JavaScript window innerWidth와 innerHeight 속성이란?JavaScript에서 window.innerWidth 속성은 브라우저 창 콘텐츠 영역(뷰포트)의 너비를 픽셀 단위로 반환하고, window.innerHeight 속성은 같은 영역의 높이를 픽셀 단위로 반환합니다. 두 속성 모두 읽기 전용(read-only)이며, 스크롤바나 브라우저 UI(툴바, 메뉴 등)는 제외된 순수한 콘텐츠 영역의 크기를 기준으로 합니다.반응형 웹 디자인 구현, 동적 레이아웃 조정, 요소 위치 계산 등 현재 브라우저 창의 실제
웹 페이지에서 특정 단어를 색상으로 강조하고 싶다면, 페이지가 로드될 때마다 자동으로 실행되는 JavaScript 코드를 활용할 수 있습니다. 핵심은 for 반복문과 <span> 태그를 조합하는 것입니다.동작 원리먼저 대상 요소의 텍스트를 공백을 기준으로 분리한 뒤, 각 단어를 하나씩 순회하면서 지정된 색상 이름(예: yellow, blue)과 일치하는지 확인합니다. 일치하는 단어는 해당 색상의 CSS 클래스를 가진 <span class=yourColorName> 태그로 감싸고, 마지막에 다시 하나의 문자열로
특정 요소에 포커스를 설정하려면 focus() 메서드를 활용하면 됩니다. querySelectorAll()을 사용해 클래스명으로 요소를 선택한 뒤 포커스를 지정하는 방식입니다.예제 코드<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo
웹 개발을 하다 보면 버튼 클릭 시 배경색이 무작위로 바뀌는 기능처럼 랜덤 색상 생성 기능이 필요할 때가 있습니다. JavaScript에서는 16진수 색상 코드(#RRGGBB)를 조합하는 간단한 함수를 통해 손쉽게 구현할 수 있습니다.기본 문법JavaScript에서 랜덤 색상을 생성하고 적용하는 기본 문법은 다음과 같습니다.$(#yourIdName).css(background-color, yourCustomFunctionNameToGetRandomColor());전체 예제 코드아래는 jQuery와 함께 사용하는 완전한 HTML 예제
JavaScript에서 상수(const) 배열을 만들려면 배열 이름 앞에 const 키워드를 붙여 선언하면 됩니다. 여기서 중요한 점은 배열의 개별 요소는 얼마든지 수정할 수 있지만, 배열 변수 자체를 새로운 값으로 재할당하는 것은 불가능하다는 것입니다. const 배열의 동작 원리 const로 선언된 변수는 해당 변수가 참조하는 메모리 주소(참조값)가 고정되기 때문입니다. 따라서 다음과 같은 규칙이 성립합니다. 요소 변경 가능: arr[0] = 44 처럼 인덱스를 통해 기존 요소의 값을 바꾸거나 push(), pop() 등으로
버튼을 클릭했을 때 사용자가 입력한 값을 가져오려면 document.querySelector() 메서드 안에 #(아이디 선택자)를 사용하면 됩니다. 이 방법을 활용하면 입력 필드의 값을 손쉽게 읽어올 수 있습니다.JavaScript 코드 예제다음은 사용자가 입력한 숫자를 가져와 브라우저 콘솔에 출력하는 전체 예제 코드입니다.<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8> <meta name=viewport content=widt
JSON(JavaScript Object Notation)은 데이터를 키-값(key-value) 쌍의 형태로 저장하고 전송하기 위한 경량의 데이터 교환 형식입니다. JavaScript에서는 객체 리터럴 문법을 사용하여 매우 간단하게 JSON 객체를 만들 수 있습니다.JSON 객체 생성 예제다음은 JavaScript에서 JSON 객체를 생성하고, 버튼 클릭 시 객체의 모든 키와 값을 화면에 출력하는 완전한 코드입니다.<!DOCTYPE html> <html lang="ko"> <head>
HTML 입력 요소에서 사용자가 값을 입력할 때마다 실시간으로 반응하고 싶다면 oninput 속성 대신 JavaScript의 document.getElementById()와 addEventListener() 메서드를 함께 사용하면 됩니다. 이 방식은 HTML과 JavaScript 코드를 분리할 수 있어 유지보수 측면에서도 더욱 효율적입니다.예제 코드아래는 input 요소에 input 이벤트 리스너를 추가하는 전체 HTML 예제입니다.<!DOCTYPE html> <html lang=ko> <head>
JavaScript에서 JSON.parse() 메서드는 JSON 형식의 문자열(텍스트)을 실제 사용 가능한 JavaScript 객체로 변환하는 역할을 합니다. 서버에서 받아온 JSON 데이터를 웹 애플리케이션 내에서 활용하려면 반드시 이 파싱(parsing) 과정을 거쳐야 합니다. JSON.parse() 기본 문법 기본적인 사용 문법은 다음과 같습니다. JSON.parse(text[, reviver]) text: JavaScript 객체로 변환하고자 하는 JSON 문자열입니다. reviver(선택 사항): 파싱 결과가 반환되기 전
JavaScript에서 실행 중인 함수를 중지하려면 document.getElementById().addEventListener() 개념을 활용하면 됩니다. 핵심 아이디어는 버튼 클릭 이벤트로 함수를 시작하고, 다른 버튼의 클릭 이벤트에서 clearInterval()을 호출하여 반복 실행을 멈추는 것입니다.setInterval()은 지정한 시간 간격마다 함수를 반복 실행하며, 반환된 ID 값을 clearInterval()에 전달하면 해당 반복이 즉시 중단됩니다.예제 코드<!DOCTYPE html> <html lang
JavaScript에서 폼 입력값의 유효성을 검사할 때 ValidityState 객체의 rangeOverflow와 rangeUnderflow 속성을 활용하면, 사용자가 입력한 숫자가 허용된 범위 안에 있는지 손쉽게 확인할 수 있습니다.범위 언더플로(Range Underflow)란?입력 요소의 값이 min 속성에 지정된 최솟값보다 작을 경우, 해당 요소의 validity.rangeUnderflow 속성이 true로 설정됩니다.범위 오버플로(Range Overflow)란?입력 요소의 값이 max 속성에 지정된 최댓값보다 클 경우, 해당
반복되는 HTML 요소에 홀수 번째와 짝수 번째를 구분하여 스타일을 적용하려면 CSS의 nth-child(odd)와 nth-child(even) 선택자를 사용하면 됩니다. 이 방법은 별도의 JavaScript 로직 없이 순수 CSS만으로 리스트 항목이나 카드 목록에 교차 색상을 손쉽게 적용할 수 있어 매우 실용적입니다.예제 코드아래는 과목 목록에서 홀수 번째 항목은 파란색, 짝수 번째 항목은 보라색으로 표시하는 완전한 예제입니다.<!DOCTYPE html> <html lang=ko> <head> &l
JavaScript에서 객체(Object)는 키(key)와 값(value)의 쌍으로 데이터를 저장하는 자료구조입니다. 객체를 생성한 이후에도 언제든지 새로운 속성(property)을 동적으로 추가하거나, 기존 속성의 값을 읽고, 더 이상 필요하지 않은 속성은 삭제할 수 있습니다. 객체 속성 다루기의 세 가지 기본 작업 속성 추가: 점 표기법(obj.key = value) 또는 대괄호 표기법(obj[key] = value)을 사용합니다. 속성 접근: obj.key 또는 obj[key] 형태로 값을 읽어올 수 있습니다. 속성 삭제:
자바스크립트의 switch 문은 하나의 표현식 값을 여러 개의 case와 순서대로 비교한 뒤, 일치하는 case에 해당하는 코드 블록을 실행하는 제어문입니다. 각 case 블록의 끝에는 break 문을 반드시 작성해야 하며, 이를 생략하면 일치하는 case 이후의 모든 블록이 연달아 실행되는 문제가 발생할 수 있습니다.공통 코드 블록이란?여러 개의 case가 동일한 동작을 수행해야 하는 경우, 각 case마다 같은 코드를 반복해서 작성하는 대신 break 없이 case를 연달아 나열하여 하나의 코드 블록을 함께 사용할 수 있습니다.
switch문은 엄격한 비교(===)만 사용합니다자바스크립트의 switch문은 조건을 판별할 때 오직 엄격한 비교(strict comparison, ===)만 사용합니다. == 연산자처럼 비교 전에 자료형을 변환하지 않기 때문에, switch 표현식의 값과 case 라벨의 값이 값과 자료형 모두 일치해야만 해당 case가 실행됩니다.일치하는 case를 찾지 못하면 switch문은 곧바로 default 블록을 실행합니다.왜 이 특성이 중요할까요?HTML 입력 필드(<input>)에서 가져온 값은 숫자처럼 보여도 항상 문자열
JavaScript 정규식(Regular Expression)에서 수정자(modifier)는 선택적으로 사용할 수 있는 요소로, 대소문자를 구분하지 않는 검색이나 전역 검색처럼 다양한 매칭 방식을 가능하게 해줍니다. 특히 여러 개의 수정자를 조합하여 동시에 사용할 수도 있다는 점이 큰 장점입니다. 주요 정규식 수정자 종류 JavaScript에서 자주 사용되는 대표적인 수정자는 다음과 같습니다 − 수정자설명 g전역(global) 매칭을 활성화합니다. 첫 번째 일치 항목에서 멈추지 않고 문자열 내의 모든 일치 결과를
JavaScript에서는 test() 메서드와 exec() 메서드를 사용하여 정규식(Regular Expression)을 손쉽게 테스트하고 실행할 수 있습니다.두 메서드의 역할은 다음과 같습니다.test(): 주어진 문자열에 패턴이 존재하면 true, 존재하지 않으면 false를 반환합니다.exec(): 패턴이 일치하면 일치된 문자열 정보를 담은 배열을 반환하고, 일치하지 않으면 null을 반환합니다.예제다음은 JavaScript에서 정규식을 테스트하고 실행하는 전체 코드입니다.<!DOCTYPE html> <html
try와 catch 문이란?JavaScript의 try 문은 코드 블록을 실행하면서 오류(error)가 발생하는지 테스트할 수 있도록 도와주는 에러 처리 구문입니다. 코드 실행 중 오류가 발생하면, 이어지는 catch 문이 해당 오류를 잡아내어(catch) 적절히 처리(handle)합니다. 덕분에 런타임 에러가 발생해도 프로그램 전체가 중단되지 않고 안정적으로 동작하도록 만들 수 있습니다.다음은 JavaScript에서 try와 catch 문을 사용하는 방법을 보여주는 코드입니다.예제<!DOCTYPE html> <ht
JavaScript에서 오류 이름(error name) 값은 발생한 오류의 이름을 설정하거나 반환하는 데 사용됩니다. err.name 속성을 활용하면 try-catch 문에서 잡힌 오류가 어떤 유형인지 정확하게 파악할 수 있습니다.JavaScript의 오류 이름 종류오류 이름은 아래 표와 같이 여섯 가지 값 중 하나를 반환할 수 있습니다.번호오류 이름 및 설명1EvalErroreval() 함수 실행 중 발생하는 오류를 나타냅니다.2RangeError숫자 값이 유효 범위를 벗어날 때 발생합니다. 예를 들어 배열 길이에 음수를 지정하는
JavaScript this 키워드란? JavaScript의 this 키워드는 자신이 속한 객체를 참조하는 특수한 식별자입니다. 중요한 점은 this가 고정된 값을 가지는 것이 아니라, 사용되는 위치(호출 문맥)에 따라 가리키는 대상이 달라진다는 것입니다. 단독으로 사용하거나 일반 함수 내부 → 전역 객체(브라우저 환경에서는 window)를 가리킵니다. 객체의 메서드 내부 → 해당 메서드를 소유한 객체를 가리킵니다. 이벤트 리스너 내부 → 이벤트를 수신한 HTML 요소를 가리킵니다. 문맥별 this 정