자바스크립트를 이용한 웹 제어 — 『Do it 자바스크립트 입문』

책 한눈에 보기

항목	내용
도서명	Do it 자바스크립트 입문
저자	고경희
키워드	JavaScript, DOM, 이벤트, 객체, 프로젝트, 로컬 스토리지

“JavaScript는 웹 페이지를 ‘살아있는’ 공간으로 바꾸는 핵심 언어다.”

---

1. 자료형과 연산자

핵심 포인트
느슨한 자료형 체크와 비교 연산자의 차이를 이해해야 한다.

• typeof 연산자를 사용하면 변수의 자료형을 확인할 수 있음.
• 자바스크립트는 정수, 문자열, 불린 등 자료형 구분이 엄격하지 않은 느슨한 자료형 체크 방식을 사용함.
• == 은 자동으로 자료형을 변환하여 비교하지만, === 은 자료형 변환을 허용하지 않고 값과 자료형이 모두 같은지 비교함.
• 예: "10" == 10 은 true, "10" === 10 은 false.

---

2. 함수와 이벤트

핵심 포인트
함수와 이벤트를 적절히 활용하면 동적인 페이지 제어가 가능하다.

• let 예약어로 선언한 변수는 블록 범위(scope) 내에서만 유효함.
• const 로 선언한 변수는 상수이며 재할당이 불가능함.
• 매개변수(parameter): 함수를 실행할 때 필요한 값을 받는 변수.
• 인수(argument): 함수를 호출할 때 매개변수로 전달하는 값.
• 즉시 실행 함수(IIFE): 함수를 정의함과 동시에 실행하는 형태.
  예: (function(){ console.log("즉시 실행"); })();
• 이벤트 종류: 마우스, 키보드, 문서 로딩, 폼 이벤트 등.
• 이벤트 처리기(event handler): 이벤트와 함수를 연결해 동작을 지정하는 코드.
• 하나의 함수 안에 여러 동작을 묶어 재사용할 수 있음.

---

3. 객체

핵심 포인트
객체는 데이터와 동작을 하나로 묶어 관리한다.

• 내장 객체: 브라우저에서 기본 제공하는 객체 (예: Date, Math).
• 문서 객체 모델(DOM): HTML 요소를 객체로 다뤄 문서를 제어하는 구조.
• 브라우저 객체 모델(BOM): 브라우저 창, 주소창, 히스토리 등의 정보를 다루는 객체.
• 사용자 정의 객체: 개발자가 직접 정의한 객체.
• 객체의 속성 접근: 객체명.속성명
• 메서드: 객체에 속한 함수로, 객체의 동작을 정의함.

---

4. 문서 객체 모델, 브라우저 객체 모델

핵심 포인트
DOM과 BOM을 이해하면 화면 요소와 브라우저 자체를 모두 제어할 수 있다.

• DOM 구조는 부모-자식 관계로 구성됨.
• 주요 DOM 접근 메서드:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector() / querySelectorAll()
• 속성 접근 및 변경: getAttribute(), setAttribute()
• BOM 대표 객체:
  • window (최상위 객체)
  • document (문서)
  • navigator (브라우저 정보)
  • history, location, screen
• CSS 선택자:
  • # : id 선택
  • . : class 선택
  • > : 자식 요소 선택

---

5. 폼과 자바스크립트

핵심 포인트
폼 요소 제어는 사용자 입력 검증의 핵심이다.

• 폼(form): 사용자 입력을 받는 HTML 요소 집합.
• 입력값 검증: 값의 유효성을 검사해 잘못된 입력을 방지.
• 접근 방법:
  • id/class 선택자
  • name 속성
  • form 배열
• 예: 드롭다운 선택 값 가져오기
• document.querySelector("#dropdown").value;

---

6. 실전 프로젝트

핵심 포인트
프로젝트를 통해 DOM, 이벤트, 로직을 통합적으로 이해할 수 있다.

• Ⅰ. 숫자 맞히기 게임
  • Math.floor(Math.random() * 100) + 1 로 난수 생성.
  • 사용자 입력값 가져오기:
  • document.getElementById("try").value;
  • if문으로 비교 후 결과를 화면에 표시.
• Ⅱ. 이미지 슬라이드쇼
  • 이미지 목록:
  • const slides = document.querySelectorAll("#container > img");
  • prev/next 버튼 이벤트로 이미지 전환.
• Ⅲ. 온도 변환기
  • 섭씨 → 화씨: (c * 1.8 + 32).toFixed(2)
  • 화씨 → 섭씨: ((f - 32) / 1.8).toFixed(2)
  • onkeyup 이벤트로 실시간 변환.
• Ⅳ. 라이트 박스
  • 썸네일 클릭 시 큰 이미지 표시.
  • data-src 속성 활용해 원본 경로 설정.
• Ⅴ. 로컬 스토리지
  • 데이터 저장:
  • localStorage.setItem("key", JSON.stringify(data));
  • 데이터 읽기:
  • JSON.parse(localStorage.getItem("key"));
• Ⅵ. 타이머
  • setInterval로 1초마다 카운트.
  • 시간이 0이 되면 clearInterval로 종료.

---

💡 Quick Insight

• === 연산자를 사용해 자료형까지 일치하는 비교 습관을 들이자.
• const와 let의 스코프 차이를 이해하면 버그를 줄일 수 있다.
• DOM과 BOM을 구분해서 제어 범위를 명확히 하는 것이 좋다.
• 이벤트 처리기는 함수 재사용과 유지보수를 용이하게 만든다.
• 폼 입력값 검증 로직은 반드시 클라이언트와 서버 양쪽에 구현한다.
• 실전 프로젝트를 통해 DOM 조작·이벤트·조건문 로직을 통합적으로 학습할 수 있다.
• 로컬 스토리지 사용 시 JSON.stringify / JSON.parse 패턴은 필수다.
• setInterval 사용 후에는 clearInterval로 메모리 누수를 방지해야 한다.

---

마무리 생각

• 자바스크립트는 <script>태그로 불러오며, DOM을 통해 페이지의 모든 요소를 제어할 수 있음.
• 최상위 객체인 window는 생략 가능.
• 이벤트는 사용자가 페이지 영역 안에서 발생시키는 동작에 한정됨.