Hello Javascript
html์ ์ ์ ์ด๋ค. ์ฌ๋๋ค์ ์นํ์ด์ง๋ ๊ฒ์์ฒ๋ผ ๋์ ์ผ๋ก ์ํธ์์ฉํ ์ ์๊ธฐ๋ฅผ ๋ฐ๋ผ๊ฒ ๋์๋ค. ์น์ html๋ก ๋ง๋ค๊ณ , Javascrpit๋ฅผ ์น์ด์ html์ ์ ๋ณด์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ฅ์ ๋ชจ๋ ๊ฐ์ถ, ์ ๋ฌดํ๋ฌดํ ์ ์ผ๋ฌด์ดํ ์์คํ ์ผ๋ก ์ฑ์ฅํ๋ค!
html์ด ์ ๋ณด๋ผ๋ ๋ฉ์ถฐ์๋ ์ด๋ฏธ์ง๋ฅผ ๊ทธ๋ฆฌ๋ ๊ฒ์ด๋ผ๋ฉด, ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ง์น ์ํ์ฒ๋ผ ์์ง์ด๊ฒ ํ๋ค!
๋๊ธ์ ๋๊ฐ ๊ทธ๋ฐ ๋ง์ ๋จ๊ฒผ๋ค.
dog=html
beautiful=css
์ฆ, Beautiful dog = html + css
๊ฑฐ๊ธฐ๋ค "bark'๋ผ๋ Javascript.
์ฆ, A beautiful dog barks = html+css+js
[์ํ์ฝ๋ฉ] ์๋ฐ์คํฌ๋ฆฝํธ ํธ์, ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ๊ณผ์ ์์, ํ์ํ ๋ฌธ๋ฒ์ ์ฑ๊ฒจ๊ฐ๋ ์ฌ์ ์ด๋ค.
์ฆ, ์ค์ต์ด ๊ธฐ๋ณธ + ๋ฌธ๋ฒ ์ฑ๊ฒจ๊ฐ๊ธฐ
Javascrpit ๋ง๋ณด๊ธฐ
์น๋ธ๋ผ์ฐ์ ๋ ํ๋ฒ ํ๋ฉด์ ์ถ๋ ฅ์ด ๋๋ฉด, ์๊ธฐ ์์ ์ ๋ฐ๊ฟ ์ ์๋ ๋ฅ๋ ฅ์ด ์๋ค.
๊ทธ๋ฌ๋, ๋ฐ๊ฟ ์ ์๊ฒ ํด์ฃผ๋๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ๋ค.
ex. ์ ์ด๋ฏธ์ง์์, <body> ํ๊ทธ๋ ํ ๋ฒ ์ถ๋ ฅ๋๋ฉด html์์ ๋ฐ๋์ง ์๋๋ค.
<input type= "button" value="night" onclick"
์ด๋ผ๊ณ ์ ํ ๋ถ๋ถ์ ์๋ฏธ๋, 'night'์ด๋ผ๋ ์ด๋ฆ์ ๋ฒํผ์ ๋๋ฅด๋ฉด, ํด๋น ์ฝ๋ ์๋์ ์ ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํ์ํจ๋ค~ ๋ผ๋ ๋ป์ด๋ค.
์ผํธ ํ๋ฉด์์ night ๋ฒํผ์ ๋๋ฅด์ ๋ค์๊ณผ ๊ฐ์ด ๋ณํ๊ฐ ์๊ธด๋ค.
๋ฒํผ์ ๋๋ฅด์, ์ ์ ์ธ bodyํ๊ทธ ์์ ์๋ก์ด ์คํ์ผ ํ๊ทธ๊ฐ ์๊ธด๋ค!
HTML๊ณผ JS์ ๋ง๋จ: script ํ๊ทธ
๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ html ์์์ ์์ง์ด๋ ์ธ์ด๋ค. ์ด๋ป๊ฒ ์์ ํ ๋ค๋ฅธ ๋ฌธ๋ฒ์ ๊ฐ์ง๊ณ ์๋ ์ธ์ด๋ฅผ ๋๊ฒจ ๋ฃ์ ๊ฒ์ธ๊ฐ? ๋ฅผ ์์๋ณด๋๋ก ํ์.
๋จผ์ ๊ธฐ๋ณธ html ์ฝ๋ ์ธํ ์ ํ๊ณ ,
html์ ์ฝ๋๋ก ์ง๊ธ๋ถํฐ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์์๋ฉ๋๋ค~๋ผ๊ณ ์๋ ค์ค์ผ ํ๋ค.
<body> ํ๊ทธ์ <script> ์์ ์๋ ํ๊ทธ๋ฅผ ์น๋ธ๋ผ์ฐ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ธ์งํ๋ค.
<script>
document. write('hello world');
</script>
์ด๊ฒ ๊ทธ๋ฅ htmlํ๊ทธ์ ๋ฌ๋ฆฌ ์ผ๋ง๋ ๋๋๋๋ฉด.. ์ ์ ์ธ html์, <h1> 1+1 </h1>์ด๋ผ๊ณ ์ ๋ ฅํ๋ฉด "1+1"์ด๋ผ๊ณ ์ ํ ๊ทธ๋๋ก ๋ณด์ฌ์ง์ง๋ง,
<script>
document.write(1+1);
</script>
์๋ฐ์คํฌ๋ฆฝํธ ํ๊ทธ์ ๋๊ฐ์ ๋ด์ฉ์ ์ ์, ๋๋๊ฒ๋ "2"๋ผ๊ณ ๊ณ์ฐ๋์ด ํ๋ฉด์ ์ถ๋ ฅ๋๋ค! woW
HTML๊ณผ JS์ ๋ง๋จ: ์ด๋ฒคํธ
<input type= "button" value="hi" onclick="alert('bye')">
<input type = "text" onchange="alert('changed')">
์ด๋ ๊ฒ ํ ์คํธ ์ฐฝ์ด ์๊ฒผ๋ค!
ํ ์คํธ์ฐฝ์ ์ ๋ ฅํ๊ณ , ์ฐฝ ๋ฐ์ผ๋ก ๋ง์ฐ์ค๋ฅผ ์ด๋ํด ๋นผ๋ฉด ์ง์ ๋ alert์ฐฝ์ด ๋ฌ๋ค!
์ด๋ ๊ฒ ์น๋ธ๋ผ์ฐ์ ์์์ ์ผ์ด๋๋ ์ผ๋ค์ '์ด๋ฒคํธ'๋ผ๊ณ ํ๋ค. ๊ธฐ๋ ํ ๋งํ ์ด๋ฒคํธ๋ฅผ ๊ธฐ์ตํด ๋จ๋ค!
๋ฑ๋ฑ 10-20๊ฐ ์ ๋ ์ด๋ฒคํธ๋ฅผ ์ด๋ฏธ ์ ๋ฆฌํด๋จ๋ค!
https://www.w3schools.com/tags/ev_onkeydown.asp
HTML onkeydown Event Attribute
HTML onkeydown Event Attribute โฎ HTML Event Attributes Example Execute a JavaScript when a user is pressing a key:
Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The onkeydown a
www.w3schools.com
onclick
onchange
์ด๋ฐ ์์ด๋ค์ด ๋ฐ๋ก ์ด๋ฒคํธ ์ฝ๋!
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์ ์๋ ์๋ก์ด ๋ฐฉ๋ฒ, Console
๋ณต์กํ ์ผ์ด ์๋๋ผ๋ฉด, ๊ผญ html ํ์ผ์ ๋ง๋ค์ง ์๊ณ ๋ ๊ฐ๋ฐ์ ๋๊ตฌ์ console์์ ๋ฐ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์ ์๋ค.
์ด๋ ๊ฒ ์น์์ ์ ๊ธ์ ๋ณต์ฌํด์ console์ ๋ถ์ฌ๋ฃ๊ธฐ ํด์, ๊ธ์ ์๋ฅผ ์ธ๋ณผ ์ ์๋ค. ์ด๊ฒ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๋ ๋๋ค๋ฅธ ๋ฐฉ๋ฒ ์ค ํ๋๋ค.
๊ฐ๋ฐ์๋๊ตฌ>element> esc> console์ด ๋ฐ์ ๋ธ
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ์ดํฐ ํ์ _๋ฌธ์์ด๊ณผ ์ซ์
์ปดํจํฐ ํ๋ก๊ทธ๋๋ฐ์์๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์์ฃผ ์ค์ํ๋ค. ๊ทธ๋์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด, ์ ๋ถ๋ฅํ๊ธฐ ์ํด ์๋นํ ๋ง์ ๋ ธ๋ ฅ์ ํด์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ๋ ํํ์ ์ธ์ด์๋ ์ด๋ค ํํ์ ๋ฐ์ดํฐ๋ค์ด ์๋๊ฐ๋ฅผ ์ดํด๋ณด๊ณ , ๊ทธ ์ค์์ ๊ฐ์ฅ ๋ํ์ ์ธ/ ์ต์ํ ๋งํ ๋ฐ์ดํฐ์ธ ๋ฌธ์์ ์ซ์์ ๋ํด ์์๋ณด๋๋ก ํ๊ฒ ๋ค.
๋ฐ์ดํฐ ํ์
1) ์ซ์
์ฐ์ฐ์ด ๊ต์ฅํ ์ค์ํ๋ค!
ex. 1+1 (+๋ผ๋ ๊ฒ์, ์ดํญ์ฐ์ฐ์_์ฐ์ ์ฐ์ฐ์)
+, -, *, / => ์ฐ์ ์ฐ์ฐ์
2) ๋ฌธ์์ด = string
""
''
๋ฌธ์๋ ๋ฌด์กฐ๊ฑด ๋ฐ์ดํ ์์ ๋ฃ๋๋ค!
"hello world".length
์ด๊ฑฐ๋ ๊ธ์ ์๋ฅผ ์ธ์ด์ฃผ๋ ๊ณต์์ด๋ค.
์ด๋ฐ ์์ Property๋ค์ด ๊ต์ฅํ ๋ง์๋ฐ, "Javascrpit string"์ด๋ผ๊ณ ๊ฒ์ํด๋ณด์.
https://www.w3schools.com/js/js_string_methods.asp
JavaScript String Methods
JavaScript String Methods String methods help you to work with strings. String Methods and Properties Primitive values, like "John Doe", cannot have properties or methods (because they are not objects). But with JavaScript, methods and properties are also
www.w3schools.com
ํ w3school์ ํํ ๋ฆฌ์ผ ๊ธฐ๋ฅ๊น์ง ์๋ค! ์ ๊ธฐํ๊ตฐ..
์์์๋ถํฐ ์ญ ๋ด์ผ๊ฒ ๋ค. ์ด๊ณ ์์ค๊ณผ ๋ฐฐ์ด ๋ด์ฉ๋ค์ด ์ญ ๋์จ๋ค.
https://www.w3schools.com/js/js_syntax.asp
JavaScript Syntax
JavaScript Syntax JavaScript syntax is the set of rules, how JavaScript programs are constructed: var x, y, z; // How to declare variables x = 5; y = 6; // How to assign values z = x + y; // How to compute values Java
www.w3schools.com
๋ฌธ์์ ์ซ์๋ ์๋ก ๋ค๋ฅธ ๋ฐ์ดํฐํ์ ์ด๋ผ๋ ๊ฒ์ ๋ฐฐ์ ๋ค. "๋ฌธ์์ด"์ ์ฐ๋ ๊ฒ๊ณผ '์ซ์'๋ฅผ ์ฐ๋ ๊ฒ์ ์ฐจ์ด๋ฅผ ์ดํดํ๊ณ , ์ ๊ตฌ๋ถํด์ ์จ์ผํ๋ค! ๊ทธ๋ฌ๋ฉด ๋ง๋ฌด๋ฆฌ๋.. ์ด๊ณ ์์ค์ ๋ช ์ธ ํฌ์ฒ..
"์ดํดํ๋๊ฒ ์๋๋ผ ์ต์ํด์ง๋ ๊ฒ๋๋ค"
'๐ป Deep Wide Programming > Javascript & Vanila JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๋ ธ๋ง๋์ฝ๋] ๋ฐ๋๋ผ JS 1~ 1-10 (0) | 2020.08.17 |
---|---|
[์ํ์ฝ๋ฉ] Javascript ๊ฐ์ฒด(object) ์ฐ๊ธฐ์ ์ฝ๊ธฐ (0) | 2020.08.17 |
[์ํ์ฝ๋ฉ] ๋ฐฐ์ด๊ณผ ๋ฐ๋ณต๋ฌธ์ ํ์ฉ / ํจ์์ ๊ธฐ๋ณธ, ๋งค๊ฐ๋ณ์์ ์ธ์, ์ถ๋ ฅ (0) | 2020.08.16 |
[์ํ์ฝ๋ฉ] javascript - ๋ฐฐ์ด๊ณผ ๋ฐ๋ณต๋ฌธ (0) | 2020.08.16 |
WEB2- Javascript 7๊ฐ(๋ณ์์ ๋์ ์ฐ์ฐ์) (0) | 2020.07.29 |