자바스크립트 핵심 문법과 DOM 모델 활용 가이드

1. 자바스크립트 개요

자바스크립트(JavaScript)는 웹 페이지의 동적인 데이터 검증과 상호작용을 위해 고안된 클라이언트 사이드 스크립트 언어입니다. 브라우저 엔진에 의해 해석되고 실행됩니다.

  • 타입 시스템: 자바스크립트는 변수의 타입이 동적으로 결정되는 약타입(Weakly Typed) 언어인 반면, 자바(Java)는 강타입(Strongly Typed) 언어입니다.
  • 주요 특징:
    • 상호작용성: 사용자의 입력에 따른 동적인 UI 업데이트 및 데이터 처리가 가능합니다.
    • 보안성: 브라우저의 샌드박스 환경에서 실행되어 로컬 파일 시스템에 직접 접근하는 것이 제한됩니다.
    • 크로스 플랫폼: 운영체제에 독립적이며, 자바스크립트 엔진을 탑재한 모든 브라우저에서 동일하게 실행됩니다.

2. HTML 문서에 자바스크립트 적용하기

2.1 내부 스크립트 방식

HTML 문서의 <head> 또는 <body> 태그 내에 <script> 태그를 직접 작성하여 코드를 삽입합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스크립트 예제</title>
    <script>
        // 브라우저에 경고창을 띄우는 내장 함수
        // 전달된 인자는 경고창의 메시지로 출력됨
        alert("자바스크립트 환경에 오신 것을 환영합니다!");
    </script>
</head>
<body>
</body>
</html>

2.2 외부 스크립트 방식

독립된 .js 파일을 작성한 후, <script> 태그의 src 속성을 통해 불러오는 방식입니다. 코드 재사용성과 유지보수 측면에서 권장됩니다.

// app.js
console.log("외부 스크립트 파일이 성공적으로 로드되었습니다.");
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스크립트 예제</title>
    <!-- src 속성에 상대 경로 또는 절대 경로를 지정하여 외부 JS 파일을 불러옴 -->
    <script src="app.js"></script>
    
    <!-- 외부 파일을 불러오는 script 태그 내부에 추가 코드를 작성하면 실행되지 않으므로 주의 -->
    <script>
        console.log("내부에서 실행된 추가 로그");
    </script>
</head>
<body>
</body>
</html>

3. 변수와 데이터 타입

변수는 메모리 공간에 데이터를 저장하기 위해 이름을 부여한 식별자입니다. 최신 자바스크립트에서는 var 대신 블록 스코프를 지원하는 let과 const를 주로 사용합니다.

  • 주요 데이터 타입: Number(숫자), String(문자열), Object(객체), Boolean(불리언), Function(함수)
  • 특수 값:
    • undefined: 변수가 선언만 되고 아직 값이 할당되지 않은 상태
    • null: 의도적으로 비어있는 값을 할당했을 때
    • NaN (Not a Number): 숫자 연산이 실패했을 때 반환되는 값
let count;
console.log(count); // undefined

count = 42;
console.log(typeof count); // "number"

count = "Hello World";
console.log(typeof count); // "string"

const numA = 10;
const numB = "Text";
console.log(numA * numB); // NaN (숫자와 문자열의 곱셈 연산 불가)

4. 연산자

4.1 비교 연산자

  • == (동등 연산자): 타입 변환을 거쳐 값만 비교합니다.
  • === (일치 연산자): 값과 데이터 타입을 모두 엄격하게 비교합니다.
const strVal = "100";
const numVal = 100;

console.log(strVal == numVal);  // true (타입 변환 후 값 비교)
console.log(strVal === numVal); // false (타입이 다르므로 false)

4.2 논리 연산자와 숏서킷 평가

논리 연산자(&&, ||, !)는 피연산자를 불리언으로 변환하여 평가합니다. 이때 0, null, undefined, ""(빈 문자열)은 false로 취급됩니다.

  • AND (&&): 모든 피연산자가 참이면 마지막 참 값을 반환하고, 거짓이 있으면 첫 번째 거짓 값을 반환합니다.
  • OR (||): 모든 피연산자가 거짓이면 마지막 거짓 값을 반환하고, 참이 있으면 첫 번째 참 값을 반환합니다.
const text = "Apple";
const isActive = true;
const isEmpty = false;
const emptyVal = null;

// AND 연산
console.log(text && isActive);   // true
console.log(isActive && text);   // "Apple"
console.log(text && isEmpty);    // false
console.log(text && emptyVal && isEmpty); // null

// OR 연산
console.log(isEmpty || emptyVal); // null
console.log(text || isEmpty);     // "Apple"

5. 배열 (Array)

자바스크립트의 배열은 다양한 데이터 타입을 혼합하여 저장할 수 있으며, 크기가 동적으로 조절되는 특징이 있습니다.

let fruits = []; // 빈 배열 생성
console.log(fruits.length); // 0

fruits[0] = "Apple";
fruits[2] = "Cherry"; // 인덱스 1을 건너뛰면 해당 요소는 undefined가 됨

console.log(fruits[1]); // undefined
console.log(fruits.length); // 3

// 반복문을 통한 배열 순회
for (let i = 0; i < fruits.length; i++) {
    console.log(`Index ${i}: ${fruits[i]}`);
}

6. 함수 (Function)

6.1 함수 선언과 표현식

함수는 function 키워드를 사용한 선언 방식과 변수에 할당하는 표현식 방식으로 정의할 수 있습니다. 자바스크립트는 함수 오버로딩을 지원하지 않으며, 동일한 이름의 함수가 중복 정의되면 나중에 선언된 함수가 덮어씌워집니다.

// 함수 선언문
function greetUser(name) {
    return `안녕하세요, ${name}님!`;
}
console.log(greetUser("철수"));

// 함수 표현식
const calculateSum = function(a, b) {
    return a + b;
};
console.log(calculateSum(15, 25));

6.2 arguments 객체와 Rest 파라미터

함수 내부에서 전달된 모든 인자는 arguments라는 유사 배열 객체로 접근할 수 있습니다. 최신 문법에서는 Rest 파라미터(...args)를 사용하여 더 직관적으로 처리합니다.

// Rest 파라미터를 활용한 가변 인자 함수
function sumNumbers(...numbers) {
    let total = 0;
    for (let num of numbers) {
        if (typeof num === "number") {
            total += num;
        }
    }
    return total;
}
console.log(sumNumbers(10, 20, "ignore", 30)); // 60

7. 객체 (Object)

객체는 키(Key)와 값(Value)의 쌍으로 이루어진 데이터 구조입니다.

7.1 Object 생성자 방식

const user = new Object();
user.username = "honggildong";
user.role = "admin";
user.displayInfo = function() {
    console.log(`사용자: ${this.username}, 권한: ${this.role}`);
};

user.displayInfo();

7.2 객체 리터럴 방식

중괄호({})를 사용하는 방식으로, 가장 일반적이고 가독성이 좋습니다.

const product = {
    name: "무선 마우스",
    price: 25000,
    getInfo: function() {
        console.log(`상품명: ${this.name}, 가격: ${this.price}원`);
    }
};

product.getInfo();

8. 이벤트 처리 (Event Handling)

이벤트는 사용자의 행동(클릭, 입력 등)이나 브라우저의 상태 변화에 반응하는 메커니즘입니다. 이벤트 리스너를 등록하는 방식에는 HTML 속성에 직접 작성하는 인라인(정적) 방식과 자바스크립트 코드로 DOM 요소에 바인딩하는 동적 방식이 있습니다. 현대적인 개발에서는 addEventListener를 사용하는 것이 표준입니다.

8.1 주요 이벤트 유형

  • load: 페이지나 리소스 로딩 완료 시 발생
  • click: 요소 클릭 시 발생
  • blur: 요소가 포커스를 잃었을 때 발생 (유효성 검사에 유용)
  • change: 입력값이나 선택값이 변경되고 포커스를 잃을 때 발생
  • submit: 폼이 제출되기 직전 발생

8.2 이벤트 리스너 등록 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>이벤트 처리</title>
</head>
<body>
    <button id="actionBtn">클릭하세요</button>
    <input type="text" id="emailInput" placeholder="이메일 입력">
    
    <script>
        // DOMContentLoaded 이벤트를 사용하여 DOM 파싱 완료 후 실행
        document.addEventListener("DOMContentLoaded", function() {
            const btn = document.getElementById("actionBtn");
            const emailField = document.getElementById("emailInput");

            // 클릭 이벤트 동적 등록
            btn.addEventListener("click", function() {
                alert("버튼이 클릭되었습니다!");
            });

            // blur 이벤트를 통한 입력값 검증
            emailField.addEventListener("blur", function() {
                if (!emailField.value.includes("@")) {
                    console.warn("올바른 이메일 형식이 아닙니다.");
                }
            });
        });
    </script>
</body>
</html>

9. DOM (Document Object Model) 조작

DOM은 HTML 문서의 구조를 트리 형태로 객체화한 모델입니다. 자바스크립트를 통해 DOM 노드에 접근하고 요소를 생성, 수정, 삭제할 수 있습니다.

9.1 요소 탐색 메서드

  • document.getElementById(id): ID를 통해 단일 요소 반환
  • document.getElementsByClassName(className): 클래스명으로 요소 컬렉션 반환
  • document.getElementsByTagName(tag): 태그명으로 요소 컬렉션 반환
  • document.querySelector(selector): CSS 선택자를 통해 첫 번째 일치 요소 반환 (현대적 방식)
  • document.querySelectorAll(selector): CSS 선택자를 통해 모든 일치 요소 반환

9.2 정규 표현식을 활용한 유효성 검사

정규 표현식(RegExp)은 문자열의 패턴을 검증하는 데 사용됩니다.

// 비밀번호 유효성 검사: 영문, 숫자 포함 8~16자리
const passwordRegex = /^[a-zA-Z0-9]{8,16}$/;
const inputPw = "SecurePass123";

console.log(passwordRegex.test(inputPw)); // true

9.3 DOM 요소 생성 및 노드 조작

createElement로 새 요소를 만들고, appendChild를 통해 DOM 트리에 추가할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM 조작</title>
</head>
<body>
    <ul id="menuList">
        <li>홈</li>
        <li>소개</li>
    </ul>
    <button id="addMenuBtn">메뉴 추가</button>

    <script>
        document.getElementById("addMenuBtn").addEventListener("click", function() {
            const list = document.getElementById("menuList");
            
            // 새로운 li 요소 생성
            const newItem = document.createElement("li");
            newItem.innerText = "연락처";
            newItem.className = "new-item";
            
            // 부모 노드의 마지막 자식으로 추가
            list.appendChild(newItem);
            
            // 노드 관계 속성 확인
            console.log("첫 번째 자식:", list.firstChild);
            console.log("부모 노드:", newItem.parentNode);
        });
    </script>
</body>
</html>

9.4 innerHTML과 innerText의 차이

  • innerHTML: 요소 내의 HTML 마크업까지 포함하여 읽고 쓸 수 있습니다. (XSS 취약점 주의)
  • innerText: 화면에 렌더링되는 순수 텍스트 내용만 처리합니다.
const targetDiv = document.getElementById("contentBox");

// HTML 태그를 해석하여 적용
targetDiv.innerHTML = "<strong>중요 공지</strong>: 서버 점검 예정";

// 순수 텍스트로 적용 (태그가 문자열 그대로 보임)
targetDiv.innerText = "<strong>중요 공지</strong>: 서버 점검 예정";

태그: JavaScript DOM event-handling Regex html-integration

6월 12일 16:02에 게시됨

인기 태그

©2026 괴물 클럽