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

JavaScript/Nomad Coders12

[TIL] ๐Ÿ’ก Day 7 - Javascript value getting, saving, loading ํ•˜๋Š” ๋ฐฉ๋ฒ• โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“Œ value getting, saving, loading ํ•˜๋Š” ๋ฐฉ๋ฒ• ๐ŸŒฑ Getting Username ๐Ÿ‘‰ ์‚ฌ์šฉ์ž๊ฐ€ Input์— ์ž…๋ ฅํ•œ ๊ฐ’์„ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๊ธฐ Form ์ œ์ถœ ํ›„ Form์„ ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง€๊ฒŒํ•˜๊ธฐ(CSS ์ด์šฉ) CSS class hidden ์ด์šฉํ•˜๊ธฐ [ display : none ] input์˜ value๋ฅผ username์œผ๋กœ ํ• ๋‹น const username = loginInput.value; ์˜ˆ์‹œ์ฝ”๋“œ ` // js ํŒŒ์ผ const loginForm = document.querySelector("#login-form"); const loginInput = document.query.. 2022. 4. 1.
[TIL] ๐Ÿ’ก Day 6 - ํ•จ์ˆ˜๋Š” ์ •๋ณด๋ฅผ ๋‹ด๊ณ  โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“ ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ๋  ๋•Œ ํ•จ์ˆ˜ ์•ˆ์— ์ •๋ณด๋ฅผ ๋‹ด์€ ์ƒํƒœ๋กœ ์‹คํ–‰๋˜์–ด ์šฐ๋ฆฌ์—๊ฒŒ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•ด ์ค€๋‹ค. ๐ŸŒฑ Input์˜ value ๐Ÿ‘‰ ์‚ฌ์šฉ์ž๊ฐ€ Input์— ์ž…๋ ฅํ•œ ๊ฐ’์„ ๋ฐ›์•„์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์ž loginInput object์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•œ property โ“ → value : ๊ธฐ๋ณธ์ ์œผ๋กœ input์•ˆ์— ์žˆ๋Š” ํ…์ŠคํŠธ๋ฅผ ์˜๋ฏธ ์˜ˆ์‹œ ์ฝ”๋“œ Log In // JS ํŒŒ์ผ // ver 1 - loginForm๋„ html element๋‹ˆ๊นŒ loginForm ์ด์šฉ const loginForm = document.getElementById('login-form'); const loginInput = loginForm.qu.. 2022. 3. 31.
[ํ›„๊ธฐ] ๋…ธ๋งˆ๋“œ์ฝ”๋” ๋ฐ”๋‹๋ผJS ์ฑŒ๋ฆฐ์ง€ 1์ฃผ์ผ ์ง€๋‚œ ์‹œ์  ํ›„๊ธฐ ๋ฐ”๋‹๋ผ JS์ฑŒ๋ฆฐ์ง€๋ž€? ๐Ÿ‘‰ "๋…ธ๋งˆ๋“œ์ฝ”๋”" ์‚ฌ์ดํŠธ์—์„œ ์ง„ํ–‰ ์ค‘์ธ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ, ๋งค ๊ธฐ๊ฐ„๋ณ„๋กœ ์ง€์›์ž๋ฅผ ๋ฐ›์•„์„œ ์ •ํ•ด์ง„ ๊ธฐ๊ฐ„ ๋™์•ˆ ๋ฏธ์…˜์— ๋„์ „ํ•˜๋Š” ์ผ์ข…์˜ ์Šคํ„ฐ๋””๋‹ค! ๊ทธ๋ฆฌ๊ณ  ์ฑŒ๋ฆฐ์ง€๋Š” ๋ฌด๋ฃŒ์ง€๋งŒ, ์ฑŒ๋ฆฐ์ง€์— ์ฐธ์—ฌํ•˜๊ธฐ ์œ„ํ•ด ์œ ๋ฃŒ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ์ค‘์—์„œ ๋‚ด๊ฐ€ ์ฐธ์—ฌํ•œ ๊ณผ์ •์€ ๋ฐ”๋‹๋ผJS์ฑŒ๋ฆฐ์ง€๋กœ ์•„๋ž˜์˜ '๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ' ๊ฐ•์˜์™€ ๊ฐ™์ด ์ง„ํ–‰๋˜๋Š” ์ฑŒ๋ฆฐ์ง€์ด๋‹ค. ๊ฐ•์˜๋„ ๋ฌด๋ฃŒ, ์ฑŒ๋ฆฐ์ง€๋„ ๋ฌด๋ฃŒ์ธ๋ฐ ์ฑŒ๋ฆฐ์ง€๋ฅผ ๋๋‚ด๊ณ  ๋‚˜๋ฉด ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋“ค์„ ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€ 30% ํ• ์ธ์ฟ ํฐ๊ณผ ๋ฑƒ์ง€, ์ˆ˜๋ฃŒ์ฆ ๋“ฑ์„ ์ œ๊ณตํ•œ๋‹ค๊ณ  ํ•˜๋‹ˆ ์•ˆ ํ•  ์ด์œ ๊ฐ€ ์žˆ๋‚˜?๐Ÿ˜† ์ฑŒ๋ฆฐ์ง€์˜ ๋ชฉ์ ? ํ™ˆํŽ˜์ด์ง€์— ๋‚˜์™€์žˆ๋Š” ๋ชฉ์ ์€ ์œ„์™€ ๊ฐ™๋‹ค. ํฌ๊ฒŒ ๊ฐ•์˜๋ฅผ ๋Š์–ด๋†“๊ณ  ์™„๊ฐ•ํ•˜๊ธฐ ํž˜๋“ค์—ˆ๋˜ ์‚ฌ๋žŒ์ด๋‚˜, ๊ฐ•์˜๋งŒ ๋“ฃ๊ณ  ์‹ค์ „์— ์ ์šฉ์ด ์–ด๋ ค์› ๋˜ ์‚ฌ๋žŒ๋“ค์ด ๋“ค์œผ๋ฉด ์ข‹๋‹ค.. 2022. 3. 16.
[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.
๋ฐ˜์‘ํ˜•