text, comment, span
๊ฐ์ ๊ฒ๋ค์ ๋
ธ๋๋ผ๊ณ ํ๋๋ฐ ๋
ธ๋
๋ ๊ฐ์ฅ ์์ ๋จ์์ด๋ค.
๋
ธ๋๋ ํ์
์ด ์กด์ฌ ํ๋๋ฐ ๊ทธ ํ์
์ ๋ค์๊ณผ ๊ฐ๋ค.
* htmlํ๊ทธ๋ฅผ ์๋ฆฌ๋จผํธ๋ผ๊ณ ํ๋ค / ์ฝ๋์ ๊ธธ์ด๋ฅผ ์ค์ด๊ธฐ ์ํด ๋ณดํต ์ด๋ฆ์ ์ฌ์ฉํ๊ธฐ ๋ณด๋จ ์ซ์๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค!
- โญ
ELEMENT_NODE (1)
:
HTML ์์(ํ๊ทธ)๋ฅผ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค.
์๋ฅผ ๋ค์ด<div>
,<p>
,<a>
๋ฑ์ HTML ์์๋ ELEMENT_NODE์ ๋๋ค.- โญ
ATTRIBUTE_NODE (2)
:
HTML ์์์ ์์ฑ์ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค.
์๋ฅผ ๋ค์ด class, id, src ๋ฑ์ ์์ฑ์ ATTRIBUTE_NODE์ ๋๋ค.- โญ
TEXT_NODE (3)
:
HTML ์์์ ํ ์คํธ ๋ด์ฉ์ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค.
์๋ฅผ ๋ค์ด<p>Hello, World!</p>
์์"Hello, World!"
๋ถ๋ถ์ TEXT_NODE์ ๋๋ค.- โญ
COMMENT_NODE (8)
:
HTML ์ฃผ์์ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค. ์๋ฅผ ๋ค์ด<!-- ์ฃผ์์ ๋๋ค -->
๋ COMMENT_NODE์ ๋๋ค.
DOCUMENT_NODE (9)
: ์ ์ฒด ๋ฌธ์(document)๋ฅผ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค. ์ฆ, ๋ฌธ์ ์ ์ฒด๋ฅผ ํฌํจํ๋ ์ต์์ ๋ ธ๋์ ๋๋ค.DOCUMENT_TYPE_NODE (10)
: ๋ฌธ์์ ํ์ (DOCTYPE)์ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค.DOCUMENT_FRAGMENT_NODE (11)
: ๋ฌธ์์ ์ผ๋ถ๋ถ์ ๋ํ๋ด๋ ๋ ธ๋์ ๋๋ค. ์๋ฅผ ๋ค์ด<template>
์์์ ๋ด์ฉ์ DOCUMENT_FRAGMENT_NODE์ ๋๋ค.
for๋ฌธ
for (let i = l - 1; i >= 0; i--) { let value = frontEndDev[i]; console.log(value); } //^ 6~0 ๊น์ง ๋์ค๊ธธ ์ํจ for (let i = l; i > 0; ) { let value = frontEndDev[--i]; //frontEndDev์์ ๋ฐ๋ก ์ ๊ฐ์๋ฅผ ์ํค๋ฉด ์กฐ๊ฑด์ ๊ฐ๋จํ๊ฒ ํ ์ ์๋ค. console.log(value); }
for...in ๋ฌธ์ ์ฌ์ฉํ์ฌ javaScript ๊ฐ์ฒด๊ฐ ๊ฐ์ง ๊ฐ์ ์กฐํ ํ๋ ค๊ณ ํ์ง๋ง for in๋ฌธ์๋ ํ๋กํ ํ์ ์ฒด์ด๋์ ์ํด ์กฐ์ ๊ฐ์ฒด๊น์ง ์ฐพ์์ง๋ ์น๋ช ์ ์ธ ๋จ์ ์ด ์๋ค.
๊ทธ๋์ ์์ ์ด ๊ฐ์ง ๊ฐ๋ง ๋์ฌ ์ ์๋ hasOwnProperty๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
โ ๏ธ for...in์ ๋ฐฉ๋ฌธ ์์๊ฐ ์ค์ํ ๋ฐฐ์ด๋ณด๋ค๋ ๊ฐ์ฒด์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค!
for...in
์ ์์๋ฅผ ๋ณด์ฅํ์ง ์์ต๋๋ค. ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ ์์์ ์๋ฏธ๋ฅผ ๊ฐ๊ธฐ ๋๋ฌธ์, ์์๋ฅผ ๋ณด์ฅํ์ง ์๋for...in
์ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด์ ์ํํ๋ฉด ์๊ธฐ์น ์์ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์์ต๋๋ค. ๋์ ์for...of
๋ฃจํ๋ ๋ฐฐ์ด์forEach
๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด์ ์ํํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
ํ์ง๋ง
eslint
๊ฐ ๊ฒฝ๊ณ ๋ฅผ ํด์ค๋ค. ๊ทธ ์ด์ ๋ ์์ ๊ฐ์ด ๊ธฐ์กด์ ๊ธฐ๋ฅ์ ๋ฎ์ด ์ฐ์ฌ์ง ๊ฐ๋ฅ์ฑ์ด์๊ธฐ ๋๋ฌธ์ ๊ฒฝ๊ณ ํด์ฃผ๋ ๊ฒ์ด๋ค
โ ํด๊ฒฐ๋ฐฉ๋ฒ
call
์ ์ฌ์ฉํ์ฌ ์ง์ง ๊ฐ์ฒด์๊ฒ ๋ฅ๋ ฅ์ ๋น๋ ค์ผ ํ๋ค.call
์ด๋ผ๋ ๊ธฐ๋ฅ์ ๋ค๋ฅธ ํ์ ์ ์๋ ๊ธฐ๋ฅ์ ๋น๋ฆฌ๊ณ ์ถ์ ๋๋call
์ ์ฌ์ฉํ๋ฉด ๋ฅ๋ ฅ์ ๋น๋ฆด ์ ์๋ค.
Object.prototype.hasOwnProperty.call(javaScript, key);
์ ์ฌ์ฉํด์ผ ์จ์ ํ ์์ ์ ๊ฐ์ฒด๋ง ์กฐํํ ์ ์๋ค..
์์ ์์์ ๊ฐ์ด ๊ธฐ์กด ๊ธฐ๋ฅ์ด ์ค์ผ๋ ์ผ์ด ์๋๋๋ ์ฌ์ฉํด์ผ ํ๋ ์ด์ ๊ฐ๋ฐ์๊ฐ ์์๋ก ์กฐ์ ๊ฐ์ฒด์ ์๋ก์ด ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ์ฌ ํ๋กํ ํ์ ์ ์ค์ผ ์์ผฐ์ ๋์ ์์ ์ด ๋ง๋ ๊ฐ์ฒด javaScript์ key ๊ฐ์ ์กฐํํ๋ฉด ์กฐ์๊ฐ์ฒด์ ๋ง๋ ํ๋กํผํฐ์ ๊ฐ๊น์ง ๋ชจ๋ ์กฐํ๊ฐ ๋๊ธฐ ๋๋ฌธ์ ๋ฐ๋์
Object.prototype.hasOwnProperty.call(javaScript, key);
์ฌ์ฉํด์ฃผ๋ ๊ฒ ์ข๋ค.
Object.prototype โก๏ธ {} ๋ ({}) ๋ก ๋์ฒด ๊ฐ๋ฅํ๋ค
// iterable(๋ฐ๋ณต์ด ๊ฐ๋ฅํ) = String, Array, Array-like
//! for...of๋ ์ดํฐ๋ฌ๋ธํ ์์ด๋ค๋ง ์ฌ์ฉ๊ฐ๋ฅ
const arryLike = {
0: 'body',
1: 'head',
2: 'div',
length: 3,
}; //% ๋ฐฐ์ด์ฒ๋ผ ์ธ๋ฑ์ค์ ๊ธธ์ด๊ฐ ์กด์ฌํ์ง๋ง ๋ฐฐ์ด์ ์๋ (์์ ํ ์ ์ฌ๋ฐฐ์ด์ ์๋)/ ๊ฐ์ฒด๋ ์ดํฐ๋ฌ๋ธํ์ง ์์
for (let value of languages) {
const name = value.name;
// if (name === 'Java') break;
if (name.includes('Java') && name.length < 5) break; //! JavaScript๋ Java๋ฅผ ํฌํจํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์ถ๋ ฅ๋์ง ์๋๋ค.
console.log(name);
}
function plus(a, b){ // a, b ๋ ๋งค๊ฐ๋ณ์(parameter), ์ธ์
return a + b;
}
let result = plus(1, 2); // 1, 2 ๋ ์ธ์(argument)
ํจ์
๋ ์ด๋ค ๋์์ ์ํํ๊ธฐ ์ํ ์ฝ๋๋ฅผ ๋ชจ์๋์ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ํจ์
์ ์ด๋ฆ์ ๋๊ฐ ๋์ฌ์ด๋ค.
- ๊ฐ๊ฒฐํ๊ณ ๋ช ํํด์ผ ํ๋ค.
- ํจ์๊ฐ ์ด๋ค ๋์์ ํ๋์ง ์ค๋ช ํ ์ ์์ด์ผ ํ๋ค.
- ์ฝ๋๋ฅผ ์ฝ๋ ์ฌ๋์ด ํจ์ ์ด๋ฆ๋ง ๋ณด๊ณ ๋ ํจ์๊ฐ ์ด๋ค ๊ธฐ๋ฅ์ ํ๋์ง ํํธ๋ฅผ ์ป์ ์ ์์ด์ผ ํ๋ค.
getโฆ
: ๊ฐ์ ๋ฐํํจ
calcโฆ
: ๋ฌด์ธ๊ฐ๋ฅผ ๊ณ์ฐํจ
createโฆ
: ๋ฌด์ธ๊ฐ๋ฅผ ์์ฑํจ
checkโฆ
:๋ฌด์ธ๊ฐ๋ฅผ ํ์ธํ๊ณ ๋ถ๋ฆฐ๊ฐ์ ๋ฐํํจ
๋ ๋ฆฝ์ ์ธ ๋ ๊ฐ์ ๋์์ ๋ ๋ฆฝ๋ ํจ์ ๋ ๊ฐ์์ ๋๋ ์ ์ํํ ์ ์๊ฒ ํด์ผ ํฉ๋๋ค. ํ ์ฅ์์์ ๋ ๋์์ ๋์์ ํ์๋ก ํ๋ ๊ฒฝ์ฐ๋ผ๋ ๋ง์ด์ฃ (์ด ๊ฒฝ์ฐ๋ ์ 3์ ํจ์๋ฅผ ๋ง๋ค์ด ๊ทธ๊ณณ์์ ๋ ํจ์๋ฅผ ํธ์ถํฉ๋๋ค).
๐ฅ๊ฐ๋ฐ์๋ค์ด ๋น๋ฒํ ํ๋ ์ค์
getAge ํจ์๋ ๋์ด๋ฅผ ์ป์ด์ค๋ ๋์๋ง ์ํ ํด์ผํ ๋ค.
alert ์ฐฝ์ ๋์ด๋ฅผ ์ถ๋ ฅํด ์ฃผ๋ ๋์์ ์ด ํจ์์ ๋ค์ด๊ฐ์ง ์๋ ๊ฒ์ด ์ข๋ค.
createForm ํจ์๋ form์ ๋ง๋ค๊ณ ์ด๋ฅผ ๋ฐํํ๋ ๋์๋ง ํด์ผ ํ๋ค.
form์ ๋ฌธ์์ ์ถ๊ฐํ๋ ๋์์ด ํด๋น ํจ์์ ๋ค์ด๊ฐ ์์ผ๋ฉด ์ข์ง ์์ต๋๋ค.