JavaScript

■■■■■■■■■

Lecture Notes — Web ■■■■■■

■■■■■ 1.0 | 2025■■■ | ■3■

■ ■■ ■ ■■ ■ ■■■■

HTML/CSS■■■ JS■■■DOM■■■■■■ ■ 4■6 ■■

■1■ JavaScript■■■
...... 3
1.1 JS■■■■■■■■■■■■
...... 3
1.2 ■■■■■var / let / const
...... 3
1.3 ■■■■■■■■
...... 4
■2■ ■■■■■■■
...... 4
2.1 ■■■■■■■■
...... 4
2.2 ■■■■■■■■■■
...... 5
2.3 ■■■■■■■■■
...... 5
■3■ DOM■■■■■■■■
...... 6
3.1 DOM■■■■■■
...... 6
3.2 ■■■■■■■■
...... 6
3.3 Promise■ async/await
...... 7
■■ ■■■■■■■■■■■
...... 8
■1■ JavaScript■■■

1.1 JS■■■■■■■■■■■■
JavaScript■Web■■■■■■■■■■■■■■■■■■■■■■■■■■■■HTML■■■■■CSS■■■■■■■■Web■
■■■■■■■■■■■■■■■■■■■■■■■■■■[Link]■■■■■■■■■■■■■■■■■■■■■■

■■■■ ■■ ■■

■■ HTML ■■■■■■■■■■■

■■■ CSS ■■■■■■■■■■■■

■■ JavaScript ■■■■■■■■■■■■■■

1.2 ■■■■■var / let / const

const PI = 3.14159; // ■■■■■■■■■

let count = 0; // ■■■■■

count = count + 1;

// var ■■■■■■■■■■■■■■■

// var old = 'avoid this';

■■ ■■■ ■■■■ ■■■

const ✗ ■■ ■■■■ ★★★ ■■■■

let ✓ ■■ ■■■■ ★★■ ■■■■■■■■

var ✓ ■■ ■■ ★■■ ■■■

1.3 ■■■■■■■■
// ■■■■■■■

const name = 'Alice'; // string

const age = 25; // number

const isActive = true; // boolean

const nothing = null; // null

let undef; // undefined

// ■■■

const numStr = '42';

[Link](String(100)); // '100'

[Link](Boolean(0)); // false

■ JavaScript■ == ■■ === ■■■■■■■■=== ■■■■■■■■■■■■■■■■■■■■■■■■■

2.1 ■■■■■■■■
// if / else if / else

const score = 82;

if (score >= 90) {

[Link]('S');

} else if (score >= 70) {

[Link]('A'); // ■■■■■■■■

} else {

[Link]('B■■');

// for ■■■

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {

[Link](fruit);

// [Link]()

[Link]((f, i) => [Link](i, f));

2.2 ■■■■■■■■■■
ES6■■■■■■■■■■■■=>■■■■■■■■■■■this ■■■■■■■■■■■■

// ■■■■■■■

function add(a, b) {

return a + b;

// ■■■

const multiply = function(a, b) { return a * b; };

// ■■■■■■■■■■■

const square = x => x * x;

const greet = (name) => `■■■■■■${name}■`;

[Link](add(3, 4)); // 7

[Link](square(5)); // 25

[Link](greet('Bob')); // ■■■■■■Bob■

■ ■■■■■■■■■■■■■■■■■■ `...${■■}...`■■■■■■■■■■■■■■■■■■■■
2.3 ■■■■■■■■■
// ■■■■■■■

const nums = [1, 2, 3, 4, 5];

const doubled = [Link](n => n * 2); // [2,4,6,8,10]

const evens = [Link](n => n % 2 === 0); // [2,4]

const sum = [Link]((a, b) => a + b, 0); // 15

// ■■■■■■

const user = { name: 'Alice', age: 20, role: 'admin' };

const { name, age } = user; // ■■■■

[Link](`${name} is ${age}`); // Alice is 20

// ■■■■■■■■

const updated = { ...user, age: 21 }; // ■■■+■■■

3.1 DOM■■■■■■
DOM■Document Object
Model■■HTML■JavaScript■■■■■■■■■API■■■■■■■■■■■■■■■■■■■■■■■■■■

// ■■■■■

const btn = [Link]('myBtn');

const items = [Link]('.item');

// ■■■■■■■■

const title = [Link]('h1');

[Link] = '■■■■■■■';

[Link] = 'navy';

[Link]('highlight');

// ■■■■■

const li = [Link]('li');

[Link] = '■■■■■■■';

[Link]('ul').appendChild(li);

3.2 ■■■■■■■■
const button = [Link]('myBtn');

// ■■■■■■■■

[Link]('click', (event) => {

[Link]([Link]); // ■■■■■■■■■

});

// ■■■■■■■■■■■

[Link]('form').addEventListener('submit', (e) => {

[Link](); // ■■■■■■■■■■

const val = [Link]('#input').value;

[Link]('■■■:', val);

});

■ addEventListener ■■■■■■■■■■■■■■■■onclick ■■■■■■1■■■■■■■■■■■■addEventListener

3.3 Promise ■ async/await

async function getUser(id) {

try {

const res = await fetch(`/api/users/${id}`);

if (![Link]) throw new Error('Not found');

const data = await [Link]();

return data;

} catch (err) {

[Link]('■■■:', [Link]);

// ■■■■

getUser(1).then(user => [Link]([Link]));

■ await ■ async ■■■■■■■■■■■■■■■■■■■ await ■■■■■■■■■ESM■■■■■■■■■■■

■■■ ■■■ ■■■

ReferenceError ■■■■■■■■■ ■■■■■■■■■■■■

TypeError null/undefined■■■■■■■■■■ ■■■■■■■■■■ obj?.prop ■■■

SyntaxError ■■■■■■■■■■■■ ■■■■■Lint■■■■■

Promise reject try/catch■■■ async■■■try/catch■■■■■■

CORS Error ■■■■■■■fetch■■■ ■■■■■■CORS■■■■■■■

NaN ■■■■■■■■■■■ [Link]()■■■■■■■

■ ■■■■■■■■■ ■■■■■■■React / Vue ■■■■■■■■■■■TypeScript