JavaScript 3

Ch3. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์‹คํ–‰ ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ 1. ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝHTML, CSS, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์›นํŽ˜์ด์ง€๋ฅผ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋ Œ๋”๋ง → DOM API ์ œ๊ณต (HTML ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๊ฑฐ๋‚˜ ์กฐ์ž‘ํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ)→ ํŒŒ์ผ ์‹œ์Šคํ…œ ์ œ๊ณตX (Web API FileReader๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง€์ •ํ•œ ํŒŒ์ผ์„ ์ฝ์–ด ๋“ค์ด๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅ)โ—๏ธ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ๋‹ค์šด๋กœ๋“œ๋˜์–ด ์‹คํ–‰๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‚ฌ์šฉ์ž ์ปดใ…ํ„ฐ์˜ ๋กœ์ปฌ ํŒŒ์ผ์„ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•˜๊ณ  ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์•…์„ฑ ์ฝ”๋“œ์— ๊ทธ๋Œ€๋กœ ๋…ธ์ถœ๋œ ๊ฒƒ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๊ธฐ ๋•Œ๋ฌธ์— ํŒŒ์ผ ์‹œ์Šคํ…œ์ด ์—†๋‹ค.ECMAScript์™€ DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker ๊ฐ™์€ ํด..

Ch2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์˜ ํ‘œ์ค€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด 1995๋…„, ์›น ๋ธŒ๋ผ์šฐ์ € ์‹œ์žฅ์„ ์ง€๋ฐฐํ•˜๊ณ  ์žˆ๋˜ ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ๋Š” ์›นํŽ˜์ด์ง€์˜ ๋ณด์กฐ์ ์ธ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ฒฝ๋Ÿ‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ๋„์ž…ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๊ณ , ๊ทธ๊ฒƒ์ด ๋ธŒ๋žœ๋˜ ์•„์ดํฌ๊ฐ€ ๊ฐœ๋ฐœํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ด๋‹ค. 1996๋…„ 3์›”, ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ์˜ ์›น ๋ถ€๋ผ์šฐ์ €์ธ ๋„ท์Šค์ผ€์ดํ”„ ๋‚ด๋น„๊ฒŒ์ดํ„ฐ2์— ํƒ‘์žฌ๋˜์—ˆ๊ณ  ๋ชจ์นด๋กœ ๋ช…๋ช…๋ฌ๋‹ค. 1996๋…„ 8์›”, ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ƒ ๋ฒ„์ „์ธ JScript๋ฅผ ์ถœ์‹œํ•˜๊ณ  ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ์–ด 3.0์— ํƒ‘์žฌํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ์™€ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ๋Š” ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์˜ ์‹œ์žฅ ์ ์œ ์œจ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ๋™์ž‘ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฒฝ์Ÿ์ ์œผ๋กœ ์ถ”๊ฐ€ํ•˜๊ธฐ ์‹œ์ž‘ํ•˜์—ฌ JScript์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ‘œ์ค€ํ™”๋˜์ง€ ๋ชปํ•˜๊ณ  ์ ๋‹น..

Ch1. ํ”„๋กœ๊ทธ๋ž˜๋ฐ

ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€ ์ผ์ข…์˜ ์ปดํ“จํ„ฐ์™€์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์ปดํ“จํ„ฐ๋Š” 0๊ณผ 1๋ฐ–์— ์•Œ์ง€ ๋ชปํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๋Š” ์ปดํ“จํ„ฐ๊ฐ€ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์„ ์ •๋„๋กœ ์ •ํ™•ํ•˜๊ณ  ์ƒ์„ธํ•œ ์š”๊ตฌ์‚ฌํ•ญ์„ ์„ค๋ช…ํ•ด์•ผ ํ•˜๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค. ์ด ์ž‘์—…์ด ์ปดํ“จํ„ฐ์™€์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜, ์ฆ‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ปดํ“จํ„ฐ์˜ ์ž…์žฅ์—์„œ ๋ฌธ์ œ๋ฅผ ๋ฐ”๋ผ๋ด์•ผ ํ•œ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ๋ฐ”๋ผ๋ณผ ๋•Œ ํ•„์š”ํ•œ ์‚ฌ๊ณ ๊ฐ€ Computational Thinking(์ปดํ“จํŒ… ์‚ฌ๊ณ )์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์šฐ๋ฆฌ๋Š” "๋“ฃ๋‹ค" ๋˜๋Š” "ํฌ๋‹ค"์™€ "์ž‘๋‹ค"๋ผ๋Š” ํ–‰๋™์ด๋‚˜ ์ƒ๋Œ€์ ์ธ ๋น„๊ต๋ฅผ ๋‹น์—ฐํ•˜๊ฒŒ ๋ฐ›์•„๋“ค์ธ๋‹ค. ํ•˜์ง€๋งŒ ์ปดํ“จํ„ฐ๋Š” ๋ฐ›์•„๋“ค์ด์ง€ ๋ชปํ•˜์—ฌ "๋“ฃ๋‹ค" ๋˜๋Š” "ํฌ๋‹ค"์™€ "์ž‘๋‹ค"๋ฅผ ์ •ํ™•ํ•œ ์ˆ˜์น˜๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์•Œ๋ ค์ค˜์•ผ ํ•œ๋‹ค. ๋‹ค์Œ ์‚ฌ์ง„์€ "๊ฑท๋‹ค"๋ผ๋Š” ๊ฒƒ์„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•  ๋•Œ ์„ค๊ณ„ํ•œ ๊ฒƒ์ด๋‹ค. ์ฆ‰, "๊ฑท๋‹ค", "๋“ฃ๋‹ค", "..