HTML 요소에 클래스를 추가하는 작업은 자바스크립트의 classList 속성이 제공하는 add() 메서드를 사용하면 아주 간단합니다. 먼저 일반적인 공식을 살펴본 뒤, 실전 예제를 통해 직접 확인해 보겠습니다. 기본 공식 var element = document.querySelector(selector) element.classList.add(class) 위의 일반적인 예제에서는 지정한 선택자 이름(태그 선택자, 클래스 선택자 등 무엇이든 가능)으로 페이지에서 첫 번째 HTML 요소를 찾아 변수에 저장합니다. 그다음 해당 요소에

HTML 요소에서 클래스를 제거하는 일은 자바스크립트 classList 속성의 remove() 메서드를 사용하면 아주 간단합니다. 이미 요소에 클래스 추가하기 관련 글을 읽어보셨다면, 클래스 제거가 사실상 같은 방식의 반대 동작이라는 점을 금방 눈치채실 겁니다. 먼저 classList.remove()의 기본 공식을 살펴본 뒤, 실전 예제를 통해 직접 확인해 보겠습니다. 기본 공식 var element = document.querySelector(selector) element.classList.remove(class) 위 기본 예제

아주 간단한 코드 스니펫 하나만 있으면 JavaScript를 사용해 기존 HTML 요소에 ID 속성을 손쉽게 추가할 수 있습니다. 코드 let featuredTitle = document.querySelector(h1); featuredTitle.id = featured-title; 위 영상에서 진행되는 과정을 단계별로 살펴보겠습니다. 먼저 document.querySelector(h1)을 사용해 웹 페이지에서 h1 요소를 찾아낸 뒤, 이를 featuredTitle이라는 변수에 할당합니다. 그다음 점 표기법(변수명.속성)을

JavaScript 객체는 서버로 직접 전송할 수 없습니다. 하지만 JSON이라면 이야기가 다릅니다. JSON은 어디에서든 사용할 수 있는 범용 문자열 형식이기 때문입니다. 이 글에서 소개하는 코드 스니펫을 활용하면 JavaScript 객체를 빠르게 JSON 문자열로 변환하고, 그 결과물을 서버에 전송할 수 있습니다. 1. JavaScript 객체 준비하기 먼저 한 사람의 정보를 담고 있는 JavaScript 객체입니다: let personObject = { name: Adam, age: 25, city: San Dieg

JavaScript의 classList 속성이 제공하는 contains() 메서드를 활용하면 요소에 특정 클래스가 존재하는지 간단하고 빠르게 확인할 수 있습니다. 먼저 classList.contains()의 기본 문법을 살펴본 뒤, 실전에서 바로 쓸 수 있는 활용 사례까지 함께 알아보겠습니다. classList.contains() 기본 문법 var element = document.querySelector(selector) element.classList.contains(class) 위 기본 예제에서는 다양한 상황에서 활용할 수 있

사용자의 마우스가 특정 영역에 들어왔을 때 보이지 않던 요소(예: 액션 바나 메뉴)를 화면에 표시하고 싶은 경우가 있습니다. 이럴 때 JavaScript의 mouseenter 이벤트를 활용하면 간단하게 구현할 수 있습니다. 구현 방법 1. HTML 마크업 아래 HTML 코드를 선호하는 에디터에 추가하세요. 온라인 에디터를 찾고 있다면 CodePen을 추천합니다. 2. CSS 스타일링 스타일시트에 다음 CSS 코드를 추가합니다. .invisible-box { opacity: 0; transition: all 500

JavaScript로 요소의 클래스를 전환(토글)하는 방법은 개발자라면 반드시 익혀야 할 가장 실용적인 기술 중 하나입니다. 클래스 토글은 메뉴 열기·닫기, 검색 필터 추가·제거, 소셜 미디어 버튼(좋아요, 추천 등) 구현 등 다양한 곳에서 활용됩니다. 토글 기능은 상황에 따라 다르지만, 몇 줄의 코드만으로도 충분히 구현할 수 있습니다. 이번 글에서는 클래스 토글뿐만 아니라 JavaScript 학습 전반에 도움이 되는 간단하고 확실한 방법을 알아보겠습니다. HTML 구조 만들기 본격적으로 JavaScript로 기능을 구현하

JavaScript에서 문자열의 마지막 문자를 제거하는 가장 간단한 방법은 slice() 메서드를 사용하는 것입니다. slice() 메서드의 기본 사용법 slice() 메서드는 두 개의 매개변수를 받아 문자열의 일부를 추출합니다. 시작 위치 — 추출을 시작할 인덱스 (0) 종료 위치 — 음수 값을 지정하면 문자열 끝에서부터 계산됩니다 (-1) 즉, slice(0, -1)은 첫 번째 문자부터 마지막 문자 바로 앞까지만 잘라내기 때문에 결과적으로 마지막 문자가 제거됩니다. 실전 예제 다음은 철자가 틀린 회사 이름을 수정하는 예시입니

JavaScript에서 문자열에 특정 단어가 포함되어 있는지 어떻게 확인할 수 있을까요? 답은 JavaScript에 기본으로 내장된 includes() 메서드입니다. 이 메서드는 문자열 안에 찾고자 하는 특정 문자나 단어가 존재하는지 판별해 줍니다. 확인하고 싶은 예시 살펴보기 예를 들어, 아래와 같은 HTML 페이지에 JavaScript라는 단어가 포함되어 있는지 확인하고 싶다고 가정해 보겠습니다. <article> <p> Lorem ipsum, dolor sit amet consectetur ad

JavaScript 배열에서 처음 몇 개의 요소에 접근해야 할 때가 있습니다. 이럴 때는 자바스크립트의 내장 메서드인 slice()를 사용하면 됩니다. 예제: 배열의 첫 3개 항목 가져오기 예를 들어, 배열의 첫 3개 항목을 조작해야 한다고 가정해 보겠습니다. 여기서 배열은 운동 목록입니다: const exerciseList = [ Deadlift, Squat, Push-up, Pull-up, Turkish Get-up, Kettlebell Swing, ] 먼저 접근하고 싶은 항목의 개수를 정의합니다: // 첫

외부 라이브러리 없이 순수한 바닐라 JavaScript만으로 DOM 요소를 숨기고 다시 표시하는 방법을 알아보세요. JavaScript에는 style이라는 속성이 있어서, 이를 통해 요소에 CSS 속성을 설정하고 마치 CSS를 작성하듯 스타일을 지정할 수 있습니다. 지금 바로 직접 사용해 보겠습니다. JavaScript로 DOM 요소를 숨기는 방법은 다음과 같습니다: element.style.display = none 숨겼던 요소를 다시 화면에 표시하려면 아래처럼 작성합니다: element.style.display = block 참

JavaScript로 배열에 항목을 추가하는 대표적인 두 가지 방법을 예제 코드와 함께 알아보세요. 배열에 항목을 추가하려면 상황에 따라 JavaScript의 push() 메서드 또는 concat() 메서드를 사용할 수 있습니다. 두 메서드 모두 JavaScript Array 객체가 기본으로 제공합니다. 이 글에서는 두 메서드를 각각 언제, 어떻게 사용해야 하는지 실제 예제를 통해 살펴보겠습니다. 배열에 항목 하나 추가하기 기존 채소 목록(배열)에 채소를 하나 추가해 보겠습니다: const vegetables = [broccoli,

JavaScript 객체에 포함된 속성(property)의 개수를 세는 두 가지 방법을 알아봅니다. 각 방법의 동작 차이까지 상세히 설명합니다. JavaScript 객체의 속성 개수를 확인하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다. for 루프 사용 Object.keys() 메서드 사용 지금부터 두 가지 방법을 하나씩 살펴보겠습니다. for 루프로 객체 속성 개수 세기 먼저 dog라는 이름의 JavaScript 객체가 있다고 가정해 보겠습니다. const dog = { name: Naya, age: 2,

JavaScript로 특정 요소의 바깥쪽 클릭을 감지하는 기술은 드롭다운 메뉴를 닫거나 모달 창을 숨기는 등 실무에서 매우 유용하게 활용됩니다. 몇 분만 투자하면 누구나 쉽게 구현할 수 있으니, 지금부터 차근차근 알아보겠습니다. 기본적인 요소 외부 클릭 감지 구현하기 먼저 HTML에 테스트용 박스 요소를 하나 만들어 보겠습니다: 이제 CSS로 박스에 스타일을 적용하고, 요소를 숨길 때 사용할 유틸리티 클래스도 함께 정의해 주겠습니다: .box { margin: 1rem auto 1rem auto; max-width: 300

정규표현식(Regex)은 텍스트 안에서 특정 패턴을 찾아내는 강력한 도구입니다. 이 글에서는 자바스크립트의 정규표현식을 활용해 문자열 내부의 공백을 다른 문자로 바꾸거나 완전히 제거하는 방법을 예제와 함께 알아봅니다. 정규표현식(Regex)이란? 정규표현식은 흔히 RegEx 또는 RegExp라고도 불리며, 문자열(텍스트)을 다룰 때 성능이 뛰어난 도구입니다. 가장 대표적인 사용 사례는 다음과 같습니다. 텍스트 유효성 검사 텍스트 검색 이번 글에서는 간단한 예제를 통해 한 줄의 텍스트(문자열)에 포함된 모든 공백을 아무것도 없는

자바스크립트에는 배열의 내용을 문자열 형태로 반환할 수 있는 메서드가 두 가지 있습니다. 바로 toString()과 join()입니다. 이 두 메서드는 겉보기에 거의 똑같아 보이지만, 실제로는 중요한 차이가 있습니다. 이 글에서는 두 메서드의 동작 방식을 직접 테스트하면서 그 차이점을 자세히 알아보겠습니다. 테스트용 배열 준비하기 먼저 숫자 목록으로 이루어진 배열 객체 하나를 만들어 보겠습니다. const numbersArray = [2, 4, 6, 8, 10] toString() 메서드로 배열 변환하기 배열을 문자열로 변환하기 위

JavaScript를 사용하면 정규표현식(RegEx)과 match(), split() 메서드만으로 문자열에서 큰따옴표로 감싸인 텍스트를 손쉽게 추출할 수 있습니다. 텍스트 블록에서 따옴표로 묶인 문장을 가져오고 싶은 경우가 종종 있습니다. 일반적으로 인용문은 큰따옴표(" ")로 감싸져 있는데요, 이럴 때 JavaScript의 match() 메서드와 약간의 정규표현식 마법을 활용하면 간단히 해결됩니다. 먼저 큰따옴표로 감싸인 문장 하나가 포함된 텍스트 블록(문자열)을 textWithQuote라는 변수에 할당해 보겠습

자바스크립트(JavaScript)를 사용하면 문자열 속에 포함된 숫자를 간단하게 추출할 수 있습니다. 이 글에서는 match() 메서드와 정규표현식을 활용해 문자열에서 하나 또는 여러 개의 숫자를 꺼내는 방법을 단계별로 알아봅니다. 문자열에서 숫자 하나 추출하기 문자열 안에 숫자가 포함되어 있고, 그 숫자만 따로 뽑아내고 싶다고 가정해 보겠습니다. 이럴 때 자바스크립트의 match() 메서드를 사용하면 아주 간단하게 해결할 수 있습니다. 먼저 숫자(1995)가 포함된 문자열을 변수에 담아 보겠습니다. const stringWithO

정규 표현식(RegEx)과 replace() 메서드를 활용하여 JavaScript에서 단어(문자열)의 모든 인스턴스를 한 번에 교체하는 방법을 알아보세요. 문자열 치환이 필요한 상황 예를 들어 회사의 최신 제품을 소개하는 긴 텍스트 블록이 있는데, 안타깝게도 특정 단어가 여러 번 잘못 표기되어 있다고 가정해 보겠습니다. 아래 텍스트 블록은 Glorious Games가 아니라 Epic Games라고 적혀야 했던 문장입니다: const textBlock = We at Glorious Games, are very proud to pr

정규 표현식(RegEx)과 replace() 메서드를 활용하면 JavaScript로 문자열 내부의 특정 문자를 손쉽게 찾아 모두 교체할 수 있습니다. 이 글에서는 그 기본 원리와 실전 예제를 소개합니다. 문자 교체가 필요한 상황 예를 들어 텍스트를 작성하다가 임대시(em dash, —)를 넣어야 했는데, 실수로 하이픈(hyphen, -)을 입력했다고 가정해 봅시다. const textBlock = When youre typing fast its normal to make a few spelling mistakes here and