๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ5

[TIL] ๐Ÿ’ก Day 5 - JS๋ฅผ ํ†ตํ•ด์„œ CSS๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. JS๋ฅผ ํ†ตํ•ด์„œ CSS๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์› ๋‹ค.๐Ÿ˜Š ๐ŸŒฑ CSS in Javascript 1๏ธโƒฃ ๐Ÿ‘‰ JS์•ˆ์—์„œ style๋กœ CSS์— ์ ‘๊ทผํ•˜์—ฌ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ• ์˜ˆ์ œ ์ฝ”๋“œ const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { // getter - ๊ฐ’์„ ๊ฐ€์ ธ์˜ด console.log(h1.style.color); // setter - ๊ฐ’์„ ์„ค์ •ํ•จ h1.style.color = "cornflowerblue"; console.log(h1.style.color); } // console๊ฒฐ.. 2022. 3. 13.
[TIL] ๐Ÿ’ก Day 4 - HTML๊ณผ JS ์—ฐ๊ฒฐ, ์กฐ์ž‘ ๋ฐฉ๋ฒ• โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“‘ ๋ณธ๊ฒฉ์ ์œผ๋กœ HTML๊ณผ JS๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ, JS์—์„œ HTML์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค.๐Ÿ˜† ๐ŸŒฑ JS ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  โ“ ๐Ÿ‘‰ HTML๊ณผ ์ƒํ˜ธ์ž‘์šฉ ํ•˜๊ธฐ ์œ„ํ•ด์„œ - JS๋Š” HTML์˜ element๋“ค์„ ์ž์‹ ์˜ ๋ฐฉ์‹์œผ๋กœ ์กฐ์ž‘ ๊ฐ€๋Šฅํ•˜๋‹ค. - JS๋กœ HTML์„ ์กฐ์ž‘ํ•˜๋ฉด ์›๋ž˜ HTML ํŒŒ์ผ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ณ  ๋…๋ฆฝ์ ์œผ๋กœ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. ๐ŸŒฑ Document๋Š” Object โ— ๐Ÿ‘‰ document๋Š” ๋ธŒ๋ผ์šฐ์ €์— ์ด๋ฏธ ์กด์žฌํ•˜๋Š” Object ์ฝ˜์†” ์ฐฝ์— document๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๊ธด object์ž„์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. html์„ JS์˜ ํ˜•ํƒœ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. = JS์—์„œ HTML document Object๋กœ๋ถ€ํ„ฐ.. 2022. 3. 13.
[TIL] ๐Ÿ’กDay 3 - function, argument, return, prompt, typeof, ์กฐ๊ฑด๋ฌธ โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ์•ž์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์„ ๋ณต์Šตํ•˜๊ณ , function(ํ•จ์ˆ˜), argument(์ธ์ˆ˜), return(๋ฐ˜ํ™˜ ๊ฐ’), prompt, typeof, ์กฐ๊ฑด๋ฌธ์— ๋Œ€ํ•ด ๋ฐฐ์› ๋‹ค. ๐ŸŒฑ Function ๐Ÿ‘‰ ๊ณ„์† ๋ฐ˜๋ณตํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ ์กฐ๊ฐ, ์–ด๋–ค ์ฝ”๋“œ๋ฅผ ์บก์Šํ™”ํ•ด์„œ ์‹คํ–‰์„ ์—ฌ๋Ÿฌ ๋ฒˆ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค€๋‹ค. function ์—†์„ ๋•Œ ๐Ÿ™…‍โ™€๏ธ // ๋ถˆ ํ•„์š”ํ•œ ๋ฐ˜๋ณต ๋„ˆ๋ฌด ๋งŽ๋‹ค.console.log("Hello my name is ์ด๋ฆ„2"); console.log("Hello my name is ์ด๋ฆ„1"); console.log("Hello my name is ์ด๋ฆ„3"); console.log("Hello my nam.. 2022. 3. 12.
[TIL] ๐Ÿ’กDay 2 - JS์˜ ๋ณ€์ˆ˜, ํƒ€์ž…, Array, Object โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“‘ JS์˜ ๋ณ€์ˆ˜, ํƒ€์ž…, Array, Object์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค. ๊ฒŒ์œผ๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด์„œ ๋…ธ๋ ฅํ•˜์ž → ๋ฐ˜๋ณต ์ค„์ด๊ธฐ!๐Ÿ‘ฉ‍๐Ÿ’ป ๐ŸŒฑ ๋ณ€์ˆ˜ ๐Ÿ‘‰ variable, ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ˆ˜ ex. 2 + 3 or 2 * 3 ๊ฐ™์€ ์—ฐ์‚ฐ ์‹œ ์ˆซ์ž๋ฅผ ๋ฐ”๊ฟ”์•ผ ํ•  ์ผ์ด ์ƒ๊ธฐ๋ฉด ๋งค๋ฒˆ ์ˆ˜์ •ํ•ด์•ผ ๋˜๋Š”๋ฐ ์ด ๊ฒƒ์€ ๋น„ ํšจ์œจ์ ์ด๋‹ค!๐Ÿค” ์ด๋•Œ ๋ณ€์ˆ˜์— ์ˆซ์ž๋ฅผ ์ €์žฅํ•˜๊ณ  a + b ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ๊ณ„์‚ฐ์„ ํ•˜๋ฉด ๋ณ€์ˆ˜๋งŒ ๋ฐ”๊พธ๋ฉด ๋˜๋‹ˆ๊นŒ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋‹ค!๐Ÿค— const, let์„ ํ†ตํ•ด์„œ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ๋‹ค. ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ์„ฑ X → const / ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ์„ฑ ์žˆ๋Š” ๊ฒƒ → let => ์ด๊ฒƒ๋งŒ ๋ด๋„ ์ž‘์„ฑ์ž์˜ ์˜๋„๊ฐ€ ํŒŒ์•… ๊ฐ€๋Šฅํ•˜๋‹ค. JS๋Š” 10์ผ ๋งŒ์— ๋งŒ๋“ค์–ด์„œ.. 2022. 3. 11.
๋ฐ˜์‘ํ˜•