JavaScript

원본: 1-JavaScript.pdf · 상위: 웹 기초 MOC

한 줄 요약

웹에서 동작을 만드는 언어. 브라우저(클라이언트)·Node(서버)·앱 런타임까지 쓰이며, ECMAScript 표준을 따른다.

목차 (강의 구성)

1. 자바스크립트 기초
2. 자료와 변수
3. 조건문
4. 반복문
5. 함수
6. 객체
7. 문서 객체 모델 (DOM)
8. 예외 처리
9. 클래스

---

1. 자바스크립트 기초

활용 영역

• 웹 클라이언트 / 서버(Node)
• 모바일·데스크톱(하이브리드·Electron 등)
• DB·도구 스크립트

표준

• ECMAScript 1(1997) … ES5(2009) … ES2015 … ES2023 …

개발 환경

• Chrome, VS Code, Live Preview
• Node.js, Code Runner
• 콘솔 출력·오류 확인

기본 용어

용어	설명
표현식	값으로 평가되는 코드
문장	실행 단위 (;)
키워드	예약어
식별자	변수·함수 이름
주석	// /* */

식별자 관례: 클래스 PascalCase, 변수/함수 camelCase.

출력: alert, console.log

---

2. 자료와 변수

기본 자료형

• number, string, boolean
• 문자열 연산·길이, 숫자 연산자
• 논리 부정 !, && ||
• typeof, 템플릿 문자열 `...${}`
• 비교 == / != (느슨), === 권장

상수·변수

• const (재할당 불가), let (재할당 가능)
• 복합 대입 += 등, 증감 ++ --
• undefined
• 형 변환: Number/String/Boolean, 연산 이용

---

3. 조건문

• if / if else / else if
• 중첩 조건
• switch
• 삼항 연산자 조건 ? A : B
• 예: 짝홀, 학점, 띠 계산

---

4. 반복문·배열

배열

• 생성, 인덱스로 접근, length
• 추가: push, 인덱스
• 제거·특정 위치 삽입

반복

• for, while
• for...in, for...of
• break, continue
• 중첩 반복 (피라미드 등)

---

5. 함수

• 선언적 함수 / 익명 함수 / 화살표 함수
• 매개변수·리턴
• 나머지 매개변수 ...args, 전개 연산자
• 기본 매개변수
• 콜백: forEach, map, filter
• 타이머: setTimeout, setInterval

---

6. 객체

• 속성·메소드
• this
• 동적 속성 추가/제거
• 메소드 단축 문법

---

7. 문서 객체 모델 (DOM)

• HTML을 객체 트리로 다루기
• 요소 선택·생성·수정·이벤트 연결
  (클릭, 입력 등 → 화면 반응)

---

8. 예외 처리

• try / catch / finally
• throw로 오류 발생

---

9. 클래스

• ES6 class / constructor
• 메소드, 상속 개념 (강의 후반)

---

최소 예제

const name = "SeSAC";
const score = 85;

function grade(s) {
  if (s >= 90) return "A";
  if (s >= 80) return "B";
  return "C";
}

console.log(`${name}: ${grade(score)}`);

const nums = [1, 2, 3];
const doubled = nums.map((n) => n * 2);

체크리스트

• let/const 구분
• 조건·반복·함수 기본
• 배열 메소드 map/filter 감 잡기
• DOM에서 요소 하나 바꾸고 이벤트 연결

링크

• 이전: CSS3 요약
• 맵: 웹 기초 MOC