JavaScript, DOM, BOM, 이벤트

웹 = 클라이언트와 서버의 요청/응답
HTML = 구조와 내용
CSS = 디자인과 배치

JavaScript = 웹페이지를 움직이것이 하는 언어
BOM = 브라우저를 객체로 다루는 모델
DOM = HTML 문서를 객체로 다루는 모델
이벤트 = 클릭, 입력, 키보드 같은 사용자 행동
예외 처리 = 실행 중 발생한 오류를 안전하게 처리하는 방법

JavaScript의 역할
→ 변수와 자료형
→ 문자열
→ 연산자와 제어문
→ 함수
→ 익명함수, 콜백함수, 클로저
→ 객체
→ 내장객체
→ BOM
→ DOM
→ 이벤트
→ 예외 처리

HTML = 버튼을 만듭니다.
CSS = 버튼을 예쁘게 꾸밉니다.

JavaScript = 버튼을 클릭했을 때 실제 동작하게 만듭니다.

<button onclick="alert('안녕하세요')">클릭</button>

버튼 클릭 처리
입력값 검사
HTML 내용 바꾸기
CSS 스타일 바꾸기
팝업창 띄우기
브라우저 정보 확인
페이지 이동
서버와 데이터 주고받기

아이디를 입력하세요.

<button id="btn">클릭</button>

#btn {
    color: white;
}

document.getElementById("btn").onclick = function() {
    alert("클릭했습니다.");
};

<button onclick="alert('클릭')">버튼</button>

<script>
    alert("안녕하세요");
</script>

<script src="script.js"></script>

alert("외부 파일입니다.");

HTML = 구조
CSS = 디자인
JavaScript = 동작

int age = 15;

let age = 15;

var age = 15;

const PI = 3.14;

let score = 90;
score = 100;

const MAX = 100;
MAX = 200;

int age = 15;

let age = 15;

console.log(typeof 10);
console.log(typeof "ABC");
console.log(typeof true);

number
string
boolean

let x = 10;
console.log(typeof x);

number

let a = 'ABC';
let b = "ABC";

let s1 = 'ABC';
let s2 = "ABC";
let s3 = "점수는 '100점' 이다";

let s4 = "점수는 "100점" 이다";

"점수는 "
100점
" 입니다"

let s4 = '점수는 "100점" 이다';

let s4 = "점수는 \"100점\" 이다";

let name = "Kim";
let score = 90;

let message = `${name}의 점수는 ${score}점입니다.`;

Kim의 점수는 90점입니다.

+  -  *  /  %

let a = 7;
let b = 2;

console.log(a + b); // 9
console.log(a % b); // 1

>  <  >=  <=  ==  !=  ===  !==

"10" == 10

"10" === 10

==  = 값만 느슨하게 비교
=== = 값과 자료형을 엄격하게 비교

&&  ||  !

if (age >= 13 && age <= 19) {
    console.log("청소년");
}

let score = 85;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C 이하");
}

B

score >= 90 ? 거짓
score >= 80 ? 참
B 출력

let menu = 2;

switch (menu) {
    case 1:
        console.log("김밥");
        break;
    case 2:
        console.log("라면");
        break;
    case 3:
        console.log("떡볶이");
        break;
    default:
        console.log("잘못된 선택");
}

라면

조건 ? 참일 때 값 : 거짓일 때 값

let age = 20;
let result = age >= 19 ? "성인" : "미성년자";

console.log(result);

성인

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

1
2
3
4
5

i++;

let i = 10;

do {
    console.log(i);
    i++;
} while (i <= 5);

10

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

1
2
3
4
5

for (초기식; 조건식; 증감식) {
    반복할 코드
}

let student = {
    name: "Kim",
    score: 90,
    grade: "A"
};

for (let key in student) {
    console.log(key + ": " + student[key]);
}

name: Kim
score: 90
grade: A

function add(a, b) {
    return a + b;
}

let result = add(3, 5);
console.log(result);

8

코드 재사용
기능별 정리
복잡한 프로그램을 작은 단위로 분리

function hello() {
    console.log("안녕하세요");
}

hello();

안녕하세요

function greet(name) {
    console.log(name + "님 안녕하세요");
}

greet("Kim");

Kim님 안녕하세요

function square(x) {
    return x * x;
}

let result = square(4);
console.log(result);

16

function test() {
    return 10;
    return 20;
}

let add = function(a, b) {
    return a + b;
};

console.log(add(2, 3));

5

함수를 변수에 저장할 수 있습니다.
함수를 다른 함수에 전달할 수 있습니다.
함수를 다른 함수에서 반환할 수 있습니다.

let add = (a, b) => {
    return a + b;
};

let add = (a, b) => a + b;

console.log(add(3, 5));

8

function printAll() {
    console.log(arguments);
}

printAll(1, 2, 3);

function sum(...numbers) {
    let total = 0;

    for (let n of numbers) {
        total += n;
    }

    return total;
}

console.log(sum(1, 2, 3, 4));

10

가변 인자 함수 = 인수 개수가 정해져 있지 않은 함수

function run(callback) {
    callback();
}

run(function() {
    console.log("콜백 실행");
});

콜백 실행

button.addEventListener("click", function() {
    alert("버튼 클릭");
});

버튼이 클릭되면 나중에 실행될 함수

function outer() {
    let count = 0;

    return function() {
        count++;
        console.log(count);
    };
}

let counter = outer();

counter();
counter();
counter();

1
2
3

클로저 = 함수가 자신이 만들어진 환경의 변수를 기억하는 것

alert("안녕하세요");

let name = prompt("이름을 입력하세요");
alert(name + "님 안녕하세요");

let customer = {
    name: "홍길동",
    age: 23
};

var customer = { 이름: '홍길동', 나이: 23 };

let customer = {
    name: "Kim",
    age: 23
};

var customer = { 이름='홍길동', 나이=23 };

var customer = [ 이름:'홍길동', 나이:23 ]; // 잘못된 형태

객체 = { 속성: 값, 속성: 값 }

console.log(customer.name);

console.log(customer["name"]);

Kim

let key = "age";
console.log(customer[key]);

let student = {
    name: "Kim",
    score: 90,

    print: function() {
        console.log(this.name + ": " + this.score);
    }
};

student.print();

Kim: 90

this.name = student.name
this.score = student.score

let person = {
    name: "Kim"
};

person.age = 20;

{
    name: "Kim",
    age: 20
}

delete person.age;

function Student(name, score) {
    this.name = name;
    this.score = score;

    this.print = function() {
        console.log(this.name + ": " + this.score);
    };
}

let s1 = new Student("Kim", 90);
let s2 = new Student("Lee", 80);

s1.print();
s2.print();

Kim: 90
Lee: 80

생성자 함수 = 객체를 만들기 위한 함수

console.log(Math.max(3, 5));
console.log(Math.random());

5
0.732...

let now = new Date();
console.log(now);

브라우저 창
주소
화면 크기
방문 기록
브라우저 정보

window.alert("안녕하세요");

alert("안녕하세요");

window.open("https://www.example.com");

window.setTimeout(function() {
    alert("3초 후 실행");
}, 3000);

console.log(screen.width);
console.log(screen.height);

1920
1080

console.log(location.href);

location.href = "https://www.example.com";

location.reload();

location = 현재 주소 정보와 페이지 이동

console.log(navigator.userAgent);

navigator 정보는 브라우저나 환경에 따라 달라질 수 있습니다.

<html>
<body>
    <h1>제목</h1>
    <p>문단</p>
</body>
</html>

<h1 id="title">제목</h1>

let title = document.getElementById("title");
console.log(title);

<h1 id="title">기존 제목</h1>

let title = document.getElementById("title");
title.textContent = "새 제목";

기존 제목 → 새 제목

title.innerHTML = "<em>강조된 제목</em>";

<p id="msg">안녕하세요</p>

let msg = document.getElementById("msg");

msg.style.color = "red";
msg.style.fontSize = "24px";

글자색이 빨간색
글자 크기 24px

font-size
background-color

fontSize
backgroundColor

font-size → fontSize
background-color → backgroundColor

let p = document.createElement("p");
p.textContent = "새 문단입니다.";

document.body.appendChild(p);

p 요소를 만듭니다.
텍스트를 넣습니다.
body 안에 추가합니다.

마우스 클릭
마우스 이동
키보드 입력
폼 제출
입력값 변경
페이지 로딩

클릭 이벤트 발생
→ JavaScript 함수 실행

<button onclick="alert('클릭')">버튼</button>

간단합니다.

HTML과 JavaScript가 섞입니다.
코드가 커지면 관리하기 어렵습니다.

<button id="btn">버튼</button>

let btn = document.getElementById("btn");

btn.onclick = function() {
    alert("클릭했습니다.");
};

btn.onclick = function() {
    alert("A");
};

btn.onclick = function() {
    alert("B");
};

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
    alert("클릭했습니다.");
});

같은 이벤트에 여러 개의 이벤트 리스너를 등록할 수 있습니다.
HTML과 JavaScript를 분리하기 좋습니다.

btn.addEventListener("click", function() {
    console.log("첫 번째");
});

btn.addEventListener("click", function() {
    console.log("두 번째");
});

document.addEventListener("click", function(event) {
    console.log(event.clientX);
    console.log(event.clientY);
});

let box = document.getElementById("box");

box.addEventListener("mouseover", function() {
    box.style.backgroundColor = "yellow";
});

box.addEventListener("mouseout", function() {
    box.style.backgroundColor = "white";
});

document.addEventListener("keydown", function(event) {
    console.log("누른 키:", event.key);
});

누른 키: a

<form id="loginForm">
    <input id="userId" type="text">
    <button type="submit">로그인</button>
</form>

let form = document.getElementById("loginForm");

form.addEventListener("submit", function(event) {
    let userId = document.getElementById("userId").value;

    if (userId === "") {
        alert("아이디를 입력하세요.");
        event.preventDefault();
    }
});

입력값이 비어 있으면 서버로 보내지 않음

window.addEventListener("load", function() {
    console.log("페이지 로드 완료");
});

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM 준비 완료");
});

<div id="parent">
    <button id="child">버튼</button>
</div>

캡처링
버블링

이벤트는 한 요소에서만 끝나지 않고 부모나 자식 방향으로 전달될 수 있습니다.

event.stopPropagation();

존재하지 않는 변수 사용
JSON 형식 오류
잘못된 입력
네트워크 오류
함수 호출 오류

try {
    let result = riskyFunction();
    console.log(result);
} catch (error) {
    console.log("오류 발생:", error.message);
}

try {
    // 예외가 발생할 수 있는 코드
} catch (error) {
    // 예외 처리 코드
}

function divide(a, b) {
    if (b === 0) {
        throw new Error("0으로 나눌 수 없습니다.");
    }

    return a / b;
}

try {
    console.log(divide(10, 0));
} catch (error) {
    console.log(error.message);
}

0으로 나눌 수 없습니다.

throw = 예외를 던짐
catch = 예외를 받아 처리

try {
    console.log("작업 시작");
} catch (error) {
    console.log("오류 처리");
} finally {
    console.log("항상 실행");
}

파일 닫기
연결 해제
로딩 표시 제거

<input id="nameInput" type="text" placeholder="이름 입력">
<button id="btn">확인</button>
<p id="result"></p>

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
    let name = document.getElementById("nameInput").value;
    let result = document.getElementById("result");

    if (name === "") {
        result.textContent = "이름을 입력하세요.";
        result.style.color = "red";
    } else {
        result.textContent = name + "님 안녕하세요.";
        result.style.color = "blue";
    }
});

① 'ABC'
② "ABC"
③ "점수는 '100점' 입니다"
④ "점수는 "100점" 입니다"

④

큰따옴표로 시작한 문자열 안에 큰따옴표를 그대로 다시 쓰면 문자열이 중간에 끊깁니다.

'점수는 "100점" 이다'

"점수는 \"100점\" 이다"

var customer = { 이름:'홍길동', 나이: 23 };

객체는 중괄호 { }를 사용합니다.
속성 이름과 값은 : 로 연결합니다.
속성들은 , 로 구분합니다.

var customer = { 이름='홍길동', 나이=23 };

var customer = [ 이름:'홍길동', 나이:23 ];

"점수는 "100점" 이다"

var customer = { 이름:'홍길동', 나이: 23 };

{ name = "Kim" }

{ name: "Kim" }

[10, 20, 30]

{ name: "Kim", age: 20 }

DOM = HTML 문서 객체 모델
BOM = 브라우저 객체 모델

document.getElementById("title")

textContent = 텍스트만
innerHTML = HTML 태그까지 해석

btn.addEventListener("click", function() {
    ...
});

event.preventDefault();

try = 예외 가능 코드
catch = 예외 처리
throw = 예외 발생

웹페이지에 동작을 넣는 프로그래밍 언어

var x = 10;
let y = 20;
const z = 30;

number
string
boolean
undefined
null
object
function

'ABC'
"ABC"
"점수는 '100점' 이다"

if
switch
삼항 연산자

while
do~while
for
for in

function add(a, b) {
    return a + b;
}

let f = function() {
    console.log("hello");
};

button.addEventListener("click", function() {
    alert("click");
});

let customer = {
    name: "Kim",
    age: 23
};

window
screen
location
navigator
history

document 객체로 HTML 문서를 조작

document.getElementById()
document.querySelector()
element.textContent
element.innerHTML
element.style.color

click
keydown
submit
change
input
focus
blur

try {
    ...
} catch (error) {
    ...
} finally {
    ...
}

JavaScript = 동작
BOM = 브라우저 조작
DOM = HTML 문서 조작
이벤트 = 사용자 행동 처리
예외 처리 = 오류를 안전하게 처리

function add(a, b) {
    return a + b;
}

console.log(add(3, 5));

let student = { name: "Kim", score: 90 };