JS(56)
-
[JS] ๋ณ์, ๋ฐ์ดํฐ ์ข ๋ฅ(๋ฌธ์ํString, ์ซ์ํ Number, ๋ ผ๋ฆฌํ Boolean, null, undefined ๋ฐ์ดํฐ)
1. ๋ณ์ Variables ๋ณ์๋ ๋ณํ๋ ๋ฐ์ดํฐ(๊ฐ)์ ์ ์ฅํ ์ ์๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ด๋ค. ๋ณ์์ ์ ์ฅํ ์ ์๋ ๋ฐ์ดํฐ ์ข ๋ฅ์๋ ๋ฌธ์ํ(String), ์ซ์ํ(Number), ๋ ผ๋ฆฌํ(Boolean), ๋น(null) ๋ฐ์ดํฐ๊ฐ ์๋ค. 2. ๋ณ์ ์ ์ธ ๋ณ์๋ฅผ ์ ์ธํ ๋๋ var ํค์๋๋ฅผ ๋ณ์๋ช ์์ ๋ถ์ธ๋ค. var ๋ณ์๋ช ; ๋ง์ฝ var box; box = 100; box = 30; ์ด๋ผ๋ฉด var box; ์ฒ์์๋ ๋ฑ๋ก๋์ง ์์ ์ํ undefined ์ํ์ด๋ค. 3. ๋ณ์์ ์ ์ฅํ ์ ์๋ ์๋ฃํ 1๏ธโฃ ๋ฌธ์ํ String ๋ฌธ์ํ ๋ฐ์ดํฐ๋ ๋ค์๊ณผ ๊ฐ์ด ๋ฌธ์๋ ์ซ์๋ฅผ " " ๋๋ ' ' ๋ก ๊ฐ์ธ๊ณ ์๋ค. var ๋ณ์ = "์ฌ์ฉํ ๋ฌธ์๋ ์ซ์"; 2๏ธโฃ ์ซ์ํ Number ์ซ์ํ ๋ฐ์ดํฐ๋ ์ซ์๋ฅผ ์๋ฏธํ๋ค. ํ์ง๋ง..
2021.10.25 -
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด ๋ฌธ๋ฒ
1. ์๋ฐ์คํฌ๋ฆฝํธ ์ ์ธ๋ฌธ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์์ฑํ ์์ญ์ ์ ์ธํ๋ ๊ฒ์ด๋ค. ์ ์คํฌ๋ฆฝํธ ์์ญ์ด๋ผ๊ณ ํ๋ค. ์ ์ธ๋ฌธ์ ํ๊ทธ ์์ญ์ด๋ ํ๊ทธ ์์ญ์ ์ ์ธํ๋ฉด ๋๋๋ฐ ๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ค์ด ํ๊ทธ ์์ญ์์ ์ ์ธํ๊ณ ์๋ค๊ณ ํ๋ค. 2. ์๋ฐ์คํฌ๋ฆฝํธ ์ฃผ์ ์ฒ๋ฆฌ // : ํ์ค /* */ : ์ฌ๋ฌ์ค 3. ๋ด๋ถ ์คํฌ๋ฆฝํธ๋ฅผ ์ธ๋ถ๋ก ๋ถ๋ฆฌํ๋ ๋ฐฉ๋ฒ ์ธ๋ถ๋ก ๋ถ๋ฆฌํ๋ ์ด์ ๋ ํ๋ก์ ํธ ๊ด๋ฆฌ๋ฅผ ์ํํ๊ฒ ํ๊ธฐ ์ํด์์ด๋ค. 4. ์ฝ๋ ์ ๋ ฅ์ ์ฃผ์์ฌํญ 1๏ธโฃ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋, ์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ์ฌ ์์ฑํ๋ค. 2๏ธโฃ ์ฝ๋ ํ ์ค์ ์์ฑํ ํ์๋ ์ธ๋ฏธ์ฝ๋ก ์ ์์ฑํ๋ ๊ฒ์ด ์ข๋ค. 3๏ธโฃ ์ฝ๋๋ฅผ ์์ฑํ ๋๋ ํ ์ค์ ํ ๋ฌธ์ฅ๋ง ์์ฑํ๋ ๊ฒ์ด ์ข๋ค. 4๏ธโฃ ๋ฌธ์ํ ๋ฐ์ดํฐ ์์ฑํ ๋ ""์ '' ์กฐ์ฌํ๊ธฐ 5๏ธโฃ ์ฝ๋๋ฅผ ์์ฑํ ๋ ์ค๊ดํธ ๋๋ ์๊ดํธ ์ง์ด..
2021.10.25 -
15-4. JS DOM ์ฐ์ต๋ฌธ์ 1,2
* ์ฐ์ต๋ฌธ์ 1 ํ ์ผ ๋ชฉ๋ก ✓ํ ์ผ 1 ✓ํ ์ผ 2 ✓ํ ์ผ 3 ✓ํ ์ผ 4 ✓ํ ์ผ 5 * ์ฐ์ต๋ฌธ์ 2 ํ๊ณผ ์ด์ ์ ๋ ฅํ๋ฉด ํ ์ด๋ธ์ด ์ถ๊ฐ๋๋๋ก ํ ์ด ์์ฑ
2021.10.22 -
15-3. JS DOM์์ ๋ ธ๋ ์ถ๊ฐ, ์ญ์ ํ๋ ๋ฐฉ๋ฒ
1. ๋ ธ๋ ๋ฆฌ์คํธ node list DOM ์์ ์๋ก์ด ๋ ธ๋๋ฅผ ๋ง๋ค์ด ์ถ๊ฐํ๊ฑฐ๋ ์ญ์ ํ๋ ค๋ฉด ๋ ธ๋ ๋ฆฌ์คํธ๋ฅผ ์ฌ์ฉํด์ผํ๋ค. DOM์์ ์ ๊ทผํ ๋ querySelectorAll() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ ธ๋๋ฅผ ํ๊บผ๋ฒ์ ์ฌ๋ฌ๊ฐ ๊ฐ์ ธ์ฌ ์ ์๋ค. ์ด๋ ๋ ธ๋ ์ ๋ณด๋ฅผ ์ฌ๋ฌ๊ฐ ์ ์ฅํ ๊ฒ์ด ๋ ธ๋๋ฆฌ์คํธ์ด๋ค. ์๋ก์ด ๋ ธ๋๋ฅผ ์ถ๊ฐํ ๋์๋ 1๏ธโฃ ๋ชจ๋ HTML ํ๊ทธ๋ ์์(element) ๋ ธ๋์ด๋ค. 2๏ธโฃ HTML ํ๊ทธ์์ ์ฌ์ฉํ๋ ํ ์คํธ ๋ด์ฉ์ ๋์ ๋ ธ๋์ธ ํ ์คํธ(text) ๋ ธ๋์ด๋ค. 3๏ธโฃ HTML ํ๊ทธ์ ์๋ ์์ฑ์ ์์ ๋ ธ๋์ธ ์์ฑ(attribute) ๋ ธ๋์ด๋ค. 4๏ธโฃ ์ฃผ์์ ์ฃผ์(comment) ๋ ธ๋์ด๋ค. ์ด ๋ค๊ฐ์ง ์์น์ ๊ธฐ์ตํด์ผํ๋ค. ์๋ฅผ ๋ค์ด img ๋ ธ๋๋ฅผ ์ถ๊ฐํ๋ค๊ณ ์๊ฐํ๋ฉด ๊ทธ ๋ ธ๋์ ์์ฑ์ ํด๋นํ๋ src์ a..
2021.10.22 -
15-2. JS DOM์์ ์ด๋ฒคํธ ์ฒ๋ฆฌ(event ๊ฐ์ฒด ํ๋กํผํฐ์ ๋ฉ์๋, ์์ฝ์ด this, addEventListener(), CSS ์์ฑ ์ ๊ทผํ๊ธฐ)
1. DOM ์์์ ํจ์ ์ง์ ์ฐ๊ฒฐํ๊ธฐ 2. ํจ์ ์ด๋ฆ์ ์ฌ์ฉํด ์ฐ๊ฒฐํ๊ธฐ 3. DOM์ event ๊ฐ์ฒด ์์๋ณด๊ธฐ DOM์๋ ์ด๋ฒคํธ ์ ๋ณด๋ฅผ ์ ์ฅํ๋ event ๊ฐ์ฒด๊ฐ ์๋ค. ์ด ๊ฐ์ฒด์๋ ์น ๋ฌธ์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ์์๊ฐ ๋ฌด์์ธ์ง, ์ด๋ค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋์ง ๋ฑ์ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ค. event ๊ฐ์ฒด ํ๋กํผํฐ์ ๋ฉ์๋ 1๏ธโฃ ํ๋กํผํฐ altKey : ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ alt ํค๋ฅผ ๋๋ ๋ ์ง ์ฌ๋ถ๋ฅผ boolean ๊ฐ์ผ๋ก ๋ฐํํ๋ค. button : ๋ง์ฐ์ค์์ ๋๋ฅธ ๋ฒํผ์ ํค ๊ฐ์ ๋ฐํํ๋ค. charCode : keypress ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ์ด๋ค ํค๋ฅผ ๋๋ ๋์ง ์ ๋์ฝ๋ ๊ฐ์ผ๋ก ๋ฐํํ๋ค. clientX : ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๊ฐ๋ก ์์น๋ฅผ ๋ฐํํ๋ค. clientY : ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ธ๋ก ์์น๋ฅผ ๋ฐํํ๋ค. ct..
2021.10.22 -
15-1. JS ๋ฌธ์๊ฐ์ฒด๋ชจ๋ธ DOM (DOM, DOMํธ๋ฆฌ, getElementById(), getElementByClassName(), getElementByTagName(), innerText(), innerHTML(), getAttribute(), setAttribute())
1. ๋ฌธ์๊ฐ์ฒด๋ชจ๋ธ DOM ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ์ฌ ์น ๋ฌธ์์ ์ ๊ทผํ๊ณ ์ ์ดํ ์ ์๋๋ก ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํด ์น ๋ฌธ์๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์น ๋ฌธ์๋ฅผ ์ด๋ฃจ๋ ํ ์คํธ๋ ์ด๋ฏธ์ง, ํ ๋ฑ์ ๋ชจ๋ ์์๋ ๊ฐ๊ฐ ๊ฐ์ฒด๋ก ์ ์ํ๋ค. ์น ๋ฌธ์ ์ ์ฒด๋ document๊ฐ์ฒด์ด๊ณ , ์ฝ์ ํ ์ด๋ฏธ์ง๋ image ๊ฐ์ฒด๊ฐ ๋๋ค. DOM์ ์น ๋ฌธ์์ ๊ทธ ์์ ๋ชจ๋ ์์๋ฅผ '๊ฐ์ฒด'๋ก ์ธ์ํ๊ณ ์ฒ๋ฆฌํ๋ค. 2. DOM ํธ๋ฆฌ ์ด๋ฐ ์น ๋ฌธ์๊ฐ ์กด์ฌํ๋ค๊ณ ํ์ ๋ DOM ํธ๋ฆฌ๋ HTML -> HEAD -> META, -> TITLE -> BODY -> H1 -> IMG ๋ผ๊ณ ํ ์ ์๋ค. ๋ถ๋ชจ์ ์์ ๊ตฌ์กฐ๋ก ํ์ํ๋ฉด ํธ๋ฆฌํํ๊ฐ ๋๋๋ฐ ์ด๋ฅผ DOM ํธ๋ฆฌ๋ผ๊ณ ํ๋ค. DOM ํธ๋ฆฌ์์ ๊ฐ์ง๊ฐ ๊ฐ๋ผ์ ธ ๋๊ฐ ํญ๋ชฉ์ ๋ ธ๋๋ผ๊ณ ํ๊ณ , DOM ํธ๋ฆฌ์ ์์๋ถ๋ถ์ธ..
2021.10.22 -
14-3. JS ๊ฐ์ฒด ์ฐ์ต๋ฌธ์ 1, 2
* ์ฐ์ต๋ฌธ์ 1 ํ์ฌ ์๊ฐ * ์ฐ์ต๋ฌธ์ 2 ํ์ฌ ์๊ฐ์ ์๋ ค์ฃผ๋ ํ์ ์ ๊ฐ์ด๋ฐ์ ๋์ฐ๊ธฐ ํ์ฌ ์๊ฐ ๋ณด๊ธฐ
2021.10.20 -
14-2. JS ๋ธ๋ผ์ฐ์ ์ ๊ด๋ จ๋ ๊ฐ์ฒด (window๊ฐ์ฒด, navigator ๊ฐ์ฒด, history ๊ฐ์ฒด, location ๊ฐ์ฒด, screen ๊ฐ์ฒด)
1. ๋ธ๋ผ์ฐ์ ๊ด๋ จ ๊ฐ์ฒด ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฆฌ๋ฉด ๊ฐ์ฅ ๋จผ์ window๋ผ๋ ๊ฐ์ฒด๊ฐ ๋ง๋ค์ด์ง๊ณ , ๋ฐ์ผ๋ก ํ์ ์์์ ํด๋คํ๋ ๊ฐ์ฒด๋ค์ด ๋ํ๋๋ค. window์ ํ์ ๊ฐ์ฒด๋ก๋ document, history ๋ฑ์ด ์๊ณ , document์ ํ์ ๊ฐ์ฒด๋ก๋ area, image ๋ฑ์ด ์๋ค. window : ๋ธ๋ผ์ฐ์ ์ฐฝ์ด ์ด๋ฆด ๋ ๋ง๋ค ํ๋์ฉ ๋ง๋ค์ด์ง๋ ๊ฒ์ผ๋ก , ๋ธ๋ผ์ฐ์ ์ฐฝ ์์ ์์ ์ค์์ ์ต์์์ ์๋ค. document : ์น ๋ฌธ์๋ง๋ค ํ๋์ฉ ์์ผ๋ฉฐ, body ํ๊ทธ๋ฅผ ๋ง๋๋ฉด ๋ง๋ค์ด์ง๋ค. navigator : ํ์ฌ ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ์ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๋ค. history : ํ์ฌ ์ฐฝ์์ ์ฌ์ฉ์์ ๋ฐฉ๋ฌธ ๊ธฐ๋ก์ ์ ์ฅํ๋ค. location : ํ์ฌ ํ์ด์ง์ url ์ ๋ณด๊ฐ ๋ด๊ฒจ์๋ค. screen : ํ์ฌ ์ฌ์ฉํ๋ ํ๋ฉด ์ ๋ณด..
2021.10.20 -
14-1. JS ๊ฐ์ฒด (๊ฐ์ฒด, ์ธ์คํด์ค, ํ๋กํผํฐ, ๋ฉ์๋, Array๊ฐ์ฒด, Date ๊ฐ์ฒด, Math ๊ฐ์ฒด), ์ฐ์ต๋ฌธ์
1.์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด 1๏ธโฃ DOM (๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ) : ์น ๋ฌธ์ ์์ฒด๊ฐ ๊ฐ์ฒด์ด๊ธฐ๋ ํ๊ณ , ์น ๋ฌธ์์ ํฌํจ๋ ์ด๋ฏธ์ง๋ ๋งํฌ , ํ ์คํธ ํ๋ ๋ชจ๋ ๊ฐ์ฒด์ ํด๋นํ๋ค, 2๏ธโฃ ๋ธ๋ผ์ฐ์ ๊ด๋ จ ๋ชจ๋ธ : ์น ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํ๋ ์ ๋ณด๋ ๊ฐ์ฒด๋ก ๋ํ๋ผ ์ ์๋ค. (history, location, link...) 3๏ธโฃ ๋ด์ฅ ๊ฐ์ฒด : ์น ํ๋ก๊ทธ๋๋ฐ ํ ๋ ์์ฃผ ์ฌ์ฉํ๋ ์์๋ก ์๋ฐ ์คํฌ๋ฆฝํธ ์์ ๋ฏธ๋ฆฌ ๊ฐ์ฒด๋ก ์ ์ ๋์ด ์๋ ๊ฒ์ ๋ด์ฅ๊ฐ์ฒด๋ผ๊ณ ํ๋ค. 2. ๊ฐ์ฒด์ ์ธ์คํด์ค ๋ง๋ค๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฒด๋ ์ฐธ์กฐ ํ์์ผ๋ก ๋ง๋ค์ด์ ์ฌ์ฉํด์ผํ๋ค. ์ฆ ๊ฐ์ฒด ์์ฒด๊ฐ ์๋ ์ธ์คํด์ค์ ํํ๋ก ๋ง๋ค์ด์ ์ฌ์ฉํด์ผํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ฒด๊ฐ ํ์ด๋ผ๋ฉด ๊ทธ ํ์ ๊ธฐ๋ณธ์ผ๋ก ํด์ ๊ณ์ ๊ฐ์ ๋ชจ์์ผ๋ก ์ฐ์ด ๋ด๋ ๊ฒ์ด ์ธ์คํด์ค์ด๋ค. ๊ฐ์ฒด์ ์ธ์คํด์ค..
2021.10.20 -
13-4. JS ํจ์ ์ฐ์ต๋ฌธ์
* ์ฐ์ต๋ฌธ์ 1 ๋ ์ ์ ๋ ฅ ๋ฐ์์ ๊ฐ์ผ๋ฉด ๊ณฑํ๊ณ , ๋ค๋ฅด๋ฉด ๋ํ๊ธฐ * ์ฐ์ต๋ฌธ์ 2
2021.10.19 -
13-3. JS ํจ์ (์ต๋ช ํจ์, ํ์ดํํจ์, ์ด๋ฒคํธ, DOM )
1. ์ต๋ช ํจ์ ์ต๋ช ํจ์๋ ํจ์์ ์ด๋ฆ์ด ์๋ ํจ์์ด๋ค. ๋ฐ๋ผ์ ์ต๋ช ํจ์๋ฅผ ์ ์ธํ ๋๋ ํจ์์ ์ด๋ฆ์ด ์๋ค. 2. ์ฆ์ ์คํ ํจ์ ์ฆ์ ์คํ ํจ์๋ ํ๋ฒ๋ง ์คํํ๋ ํจ์๋ฅผ ์ ์ํ๊ณ ๋์์ ์คํํ๋ ํจ์์ด๋ค. (function () { ๋ช ๋ น } () ); (function (๋งค๊ฐ๋ณ์) { ๋ช ๋ น } (์ธ์) ); 3. ํ์ดํ ํจ์ (๋งค๊ฐ๋ณ์) => { ํจ์ ๋ด์ฉ } 4. ์ด๋ฒคํธ 1๏ธโฃ ๋ง์ฐ์ค ์ด๋ฒคํธ click : ์ฌ์ฉ์๊ฐ html ์์๋ฅผ ํด๋ฆญํ ๋ ์ด๋ฒคํธ ๋ฐ์ dbclick : ์ฌ์ฉ์๊ฐ html ์์๋ฅผ ๋๋ธ ํด๋ฆญํ ๋ ์ด๋ฒคํธ ๋ฐ์ mousedown : ์ฌ์ฉ์๊ฐ ์์ ์์์ ๋ง์ฐ์ค ๋ฒํผ์ ๋๋ ์ ๋ ์ด๋ฒคํธ ๋ฐ์ mousemove : ์ฌ์ฉ์๊ฐ ์์ ์์์ ๋ง์ฐ์ค ํฌ์ธํฐ๋ฅผ ์์ง์์ ๋ ์ด๋ฒคํธ ๋ฐ์ mouseover ..
2021.10.19 -
13-2. JS ํจ์ (let, const, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํจ์)
var ๋ณ์๋ ์ฌ๋ฌ๊ฐ์ง ๋ฌธ์ (?)๋ฅผ ๋ฐ์์ํฌ ์ ์๋ค. ๋ง์ฝ var ์์ฝ์ด๋ฅผ ๋นผ๋จน์ผ๋ฉด ์ ์ญ๋ณ์๊ฐ ๋์ด ์๋์น์๊ฒ ์ฌ๋ฌ๊ตฐ๋ฐ์์ ์ฐ์ด๊ฒ ๋์ด ์ํ๋ ๊ฐ์ด ์๋์ฌ ์๋ ์๊ณ , var ๋ณ์๋ ์ฌ์ ์ธ๊ณผ ์ฌํ ๋น์ด ๊ฐ๋ฅํ์ฌ ์ฝ๋ ๊ธธ์ด๊ฐ ๊ธธ์ด์ ธ var ๋ณ์๋ฅผ ์ ์ธํ์๋์ง ๋ชจ๋ฅด๊ณ ๊ฐ์ ์ด๋ฆ์ผ๋ก ์ฌ์ ์ธํ๊ฑฐ๋ ์ฌํ ๋นํ๊ฒ ๋ ์๋ ์๋ค. ์ด๋ฌ๋ฉด ๋ ์ฌ์ฉ์๊ฐ ์์ํ๋ ๊ฐ์ด ์๋ ์ ํ ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ถ๋ ฅ๋ ์๋ ์๋ค. ๋ฐ๋ผ์ ES6์์๋ ๋ณ์๋ฅผ ์ ์ธํ๊ธฐ ์ํ ์์ฝ์ด๋ก let๊ณผ const๊ฐ ์๋ก ์๊ฒผ๋ค. ๊ทธ๋ฆฌ๊ณ ๋๋๋ก์ด๋ฉด var ์ฌ์ฉ์ ๊ถ์ฅํ์ง ์๋๋ค๊ณ ํ๋ค. โ var๋ ํจ์ ์์ญ์ ๋ฒ์์์ ์ฌ์ฉ๋๊ณ , let๊ณผ const๋ ๋ธ๋ก ์์ญ์ ๋ฒ์์์ ์ฌ์ฉํ๋ค. 1. let 1๏ธโฃ ๋ธ๋ก์์ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. let ์์ฝ์ด๋ ๋ณ์๋ฅผ ์ ์ธํ {..
2021.10.19