์์ ์ ๋ชฉ์ โ
์๋ฐ์คํฌ๋ฆฝํธ = ์ฌ์ฉ์์ ์ํธ์์ฉ
์น๋ธ๋ผ์ฐ์ ํ๋ฒ ์ถ๋ ฅ ํ ์์ ๋ถ๊ฐ๋ฅ = ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋์์ธ ์์ ๊ฐ๋ฅ
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ html ์ ์ ์ดํ๋ ์ธ์ด๋ค!
๋์ ์ผ๋ก ๋ง๋ค์ด์ฃผ๊ฒ๋๋ค !
HTML๊ณผ JavaScript์ ๋ง๋จ 1 (script ํ๊ทธ)โ
html ์ ์ / JavaScript ๋์
<script>
document.write('1+1');
</script>
// 2
HTML๊ณผ JavaScript์ ๋ง๋จ 2 (์ด๋ฒคํธ)โ
- onclick ๋ค์๋ JS ๊ฐ ์์ผํจ
- JS ๋ฌธ๋ฒ ํด์์ ๋ฐ๋ผ ๋์
on ์ผ๋ก ์์ํ๋ ์์ฑ => ์ด๋ฒคํธ
HTML๊ณผ JavaScript์ ๋ง๋จ 3 (์ฝ์)โ
- Console > '๋ฌธ์์ด'.length > ๊ธ์์ ๋์ด
- Element > console (esc) > js ๋๋ค ๋น์ฒจ ์ฝ๋ ๋ฃ๊ธฐ > ๊ฒฐ๊ณผ ์๋ฃ
์ด๋ฏธ ๋ง๋ค์ด์ง ์น์ฌ์ดํธ์์๋ ํด๊ฒฐ๊ฐ๋ฅ
๋ฐ์ดํฐํ์
- ๋ฌธ์์ด๊ณผ ์ซ์โ
- ์ซ์์ ๋ฌธ์์ด์ ๋ค๋ฅธ ๋ฐ์ดํฐ ํ์ !
- ๋ฐ์ดํฐ ํ์ ํ์คํ๊ฒ ํํํด์ผํ๋ค.
- "" ๋ฌธ์
- '' ๋ฌธ์
- "" ๋ฌธ์์ด
- "hello".trim() => ๋ค์ํ ๋ฌธ๋ฒ ์ ์ฉ ๊ฐ
๋ณ์์ ๋์ ์ฐ์ฐ์โ
๋ณ์๋ฅผ ์ ์ฐ๋๊ฐ?
var name = 'egoing'
"~" + name + "~"
์น๋ธ๋ผ์ฐ์ ์ ์ดโ
- css ๋ณธ์ง ๋ฌธ๋ฒ
- js ์ํ๋ ํ๊ทธ ์ ํ
CSS ๊ธฐ์ดโ
-style ์์ฑ์ ์ด์ฉํด์ CSS ์ฌ์ฉํ๊ธฐ
-style ํ๊ทธ๋ฅผ ์ด์ฉํด์ CSS ์ฌ์ฉํ๊ธฐ
-CSS ์ ํ์
์ ์ดํ ํ๊ทธ ์ ํํ๊ธฐโ
<body>
<input type=button" value="night" onclick="
documnet.querySelector('body').style.backgroundColor = 'black';
documnet.querySelector('body').style.color = 'white';
">
์ฌ์ฉ์์ ์ํธ์์ฉ, ๋์ ์ผ๋ก ๋ง๋๋ ์๋ฆฌ
์ ์ด ํ๊ทธ ์ ํ
documnet.querySelector(".myclass")