통합 요약노트
Ch.9 JavaScript 기초 — 페이지에 생명을
변수, 함수, DOM 조작, 다크모드 토글
이 챕터의 내용
JavaScript란? — 세 번째 언어
JavaScript — 웹 페이지에 상호작용과 동적 기능을 부여하는 프로그래밍 언어입니다.
웹 페이지는 세 가지 언어로 만들어집니다
JavaScript는 <script> 태그로 HTML에 연결합니다
script 태그 안에 JavaScript를 작성해봅시다
- HTML = 구조, CSS = 스타일, JavaScript = 동작
- <script> 태그로 JS를 HTML에 연결
- console.log = 콘솔 출력, alert = 팝업 출력
변수와 데이터 타입
변수(variable) — 데이터를 저장하고 이름으로 불러쓰는 상자입니다.
변수는 값을 담는 상자 이름을 붙여 사용합니다
JavaScript의 기본 데이터 타입 세 가지를 알아봅시다
변수에 저장한 값으로 페이지를 업데이트해봅시다
- const = 변경 불가, let = 변경 가능, var = 레거시
- string(문자), number(숫자), boolean(참/거짓) 3대 타입
- typeof로 타입 확인, 템플릿 리터럴로 문자열 조합
조건문과 함수
if/else와 function — 조건 분기와 코드 재사용의 두 기둥입니다.
조건이 참이면 실행하고 거짓이면 다른 것을 실행합니다
반복되는 코드를 함수로 묶어 이름을 붙여 재사용합니다
점수에 따라 등급을 판정하는 함수를 만들어봅시다
- if/else로 조건 분기, === 로 엄격 비교
- function과 화살표 함수(=>) 두 가지 선언 방식
- 매개변수 → 함수 본문 → return 흐름
DOM 조작 — 페이지 제어하기
DOM(Document Object Model) — HTML을 JavaScript가 이해하는 객체 트리로 변환한 것입니다.
querySelector로 요소를 선택하고 속성을 변경합니다
JavaScript로 새 HTML 요소를 만들어 페이지에 추가합니다
DOM 조작으로 간단한 할 일 목록을 만들어봅시다
- querySelector = CSS 셀렉터로 요소 선택
- textContent, style, classList로 요소 변경
- createElement + appendChild로 동적 요소 생성
핵심 용어 모음
HTML
구조 — 제목, 문단, 이미지 등 뼈대
CSS
스타일 — 색상, 레이아웃, 애니메이션
JavaScript
동작 — 클릭, 입력, 데이터 처리
string
"안녕" — 문자열, 따옴표로 감쌈
number
42, 3.14 — 정수와 소수 모두 포함
boolean
true / false — 참 또는 거짓
===
값과 타입이 같음 (1 === 1 → true, "1" === 1 → false)
!==
값 또는 타입이 다름
> / <
크다 / 작다
>= / <=
크거나 같다 / 작거나 같다
querySelector()
CSS 셀렉터로 첫 번째 요소 선택
textContent
요소의 텍스트 읽기/변경
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기