๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 2 ~ 6, 2021
ํ์ฌ ์ํ
์์ง CSS๋ ๋ชจ๋ฅด๊ฒ ๋๋ฐ ๊ฐ์๊ธฐ ๋ถ์๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ.
์๋ฌด๋ฆฌ FE์ ๊ธฐ๋ณธ์ด HTML5, CSS3, JavaScript๋ผ์ง๋ง... ํ ์ฃผ ๋์ ์ด ์ธ ๊ฐ์ง ๋ถ์ผ์ ์ง์์ ๋จธ๋ฆฌ์ ๋ง๊ตฌ ์ค์ ๋ฃ๋ ์ค
์์ค๋ณ(?) ๊ฐ์๋ฅผ ํด์ฃผ์๊ธฐ๋ ํ์ง๋ง ๋ชจ๋ ๊ฒ ์ธ๊ณ์ด์ฒ๋ผ ๋ค๋ฆฐ๋ค.
ํ๊ตญ์ด๋ก ๋ง์ํ์๋ฉด ์ ๊ฐ ์์๋ค์ ์ค ์์ จ๋์...ใ vใ
๋ง์น '์ด๋ ์์ ๋ํ'๋ฅผ ์ฒดํํ๊ณ ์๋ ๊ฒ ๊ฐ๋ค... ์์ด ๋ณด์ด์ง ์์...! ๊ฐ๋ ๊ณต๋ถ, ์ด๋ก ๊ณต๋ถ ์ด์ฌํ ํด์ผ์ง.
๊ทธ ์ ์ ํ์์ฐ์ ํ๊ณ ๋์ด๊ฐ์๋ฉด, ์๋ JavaScript๋ ๋์์ ๊ตฌํํ๋ ๊ฑฐ๋ผ๋ฉด์ ์ ์๊พธ function์ ์จ์ผ ํ๋ ๊ฑธ๊น ๐ข.
๋ณ์๋ฅผ ์ด๋์ ๋ ๋ฃ์ด์ ์ด์งธ์ ์งธ ๋์จ ๊ฒฐ๊ณผ๋ ์ฌ์ฉ์๊ฐ button์ ํด๋ฆญํ๋ ๊ฑฐ๋ ๋ฌด์จ ์๊ด์ธ ๊ฑธ๊น ๐ข.
๋น์ต ์ ์ฌ๊ธฐ์์ ์ค๊ดํธ๋ฅผ ์ฐ๊ณ ๊ฐ์๊ธฐ ์ ์ฝ๋ก ์ ์ฐ๋ฉฐ ๋ฐฑํ์ ๋ ์ ํ์ด๋์ค๋ ๊ฑธ๊น ๐ข.
๋๋ ๊ฐ์ code๋ฅผ ์ ์ ๊ฒ ๊ฐ์๋ฐ ์ ๋๋ง undefined์ธ ๊ฑธ๊น ๐ข.
๊ฐ๋ ๊ณต๋ถ, ์ด๋ก ๊ณต๋ถ ํด์ผ๊ฒ ๋ค๊ณ ํด๋๊ณ ๋ด๊ฐ ๋ง์กฑํ ๋งํผ ํ์ง ๋ชปํ ์ฒด DOM, React, BE์์ ํต์ ๊น์ง ์ง๋๊ฐ ๋๊ฐ๋ฒ๋ ค์ ๋ง์ด ํ๋ค์๋ค. ๋ญ๊ฐ๋ฅผ ํ๊ณ ๋ ์๋๋ฐ ๊ทธ๊ฒ ๋ญ์ง๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์ ๋ง์น ์คํ๋๊ฐ ์ฝํ๊ณ ์ฝํ ํ๊ธฐ ์ด๋ ค์ด ์ค๋ญ์น ๋ฉ์ด๋ฆฌ๊ฐ ๋ ๊ฒ ๊ฐ๋ค. ์ด๋ ๊ฒ ๋ง๋งํ๋ 2๊ฐ์์ ๋ณด๋ธ 10์ 7์ผ ํ์ฌ, JavaScript๋ฅผ ๋ค์ ๋ณด๊ณ ์์๋ ์ด์ ์์ผ JavaScript์ J ์ ๋ ์ ๊ฒ ๊ฐ๋ค. ํด...
JavaScript๋ HTML ์์ ๋ง๋ค์ด์ง ์ธ์ด์ด๊ธฐ ๋๋ฌธ์ JS๋ฅผ HTML์ ์ rendez-vous์์ผ์ผ ํ๋ค.
๊ทธ ์๋ฏธ๋ก <script>
๋ผ๋ tag๋ฅผ ์ฌ์ฉํด JS๋ฅผ ์ด tag ์์ ์์ฑํด์ผ ํ๋ค.
JS์ event ์์ฑ์ ์ฌ์ฉํด ๋์ฑ ๋ ์ฌ์ฉ์์ ์ํธ์์ฉํ๋ web์ ๋ง๋ค ์ ์๋ค.
ex.onclick
, onchange
, onkeydown...
๊ฐ๋ฐ์๋๊ตฌ์ Console tab์์ JavaScript๋ฅผ ์ฆ์ ์คํํ ์ ์๋๋ฐ, ์ด๋ฅผ ํตํด ๋ด๊ฐ ์๋ํ ๋๋ก code๊ฐ ์๋ํ๋์ง ํ์ธํ๊ธฐ๋ ํ๊ณ ์ฆ์์์ code๋ฅผ ์์ ํด web์์ ์ด๋ป๊ฒ ์๋๋ ์ง ์ ์ฉํด ๋ณด๊ธฐ๋ ํ๋ค.
Console tab์์ ์์ฑํ๋ code๋ ์ค์ web์๋ ์ํฅ์ ์ฃผ์ง ์๋๋ค.
์ฐธ๊ณ ๋ก Elements tab์์ ESC key๋ฅผ ๋๋ฅด๋ฉด Console tab์ด ๋ฌ๋ค.
JS์๋ ์ฌ์ฏ ๊ฐ์ง ์๋ฃํ์ด ์๋๋ฐ, ์ด๋ typeOf
์ฐ์ฐ์๋ก ํ์ธํ ์ ์๋ค.
ใด number
, string
, boolean
, null
, bigint
, symbol
ใด console.log(typeof 100); // "number"
๏พ ๏พ console.log(typeof msg); // "string"
์ด ์ธ์ object, function, null
๋ฑ์ ์ธ ๊ฐ์ง์ ๊ตฌ์กฐ ์ ํ์ด ์๋ค.
ใด console.log(typeof null); // "object"
โต null ์ ๋น ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ๊ณ ์๊ธฐ ๋๋ฌธ
ใด console.log(console.log(typeof []); // "object"
โต ๋ฐฐ์ด์ ํ์ฅ๋ ๊ฐ์ฒด์ด๊ธฐ ๋๋ฌธ
Stringํ๊ณผ Numberํ์ ์ฐ์ฐํ๋ฉด ํญ์ Stringํ์ผ๋ก ๋ณํํ๋ฏ๋ก ์ฐ์ฐํ ๋ ์ฃผ์ํด์ผ ํ๋ค.
String์ ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ๋ค.
ใด js != JS
string๊ณผ array์์๋ .length
์์ฑ์ ์ธ ์ ์์ง๋ง number๋ ์ ๋ผ์undefined
๊ฐ ๋จ๋ฏ๋ก ์ ํ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ์ ๊ฑธ ํ ๋ ๋ฒํธ๋ฅผ ๋ฌธ์์ด๋ก ๋ฐ๊ฟ์ฃผ์ด์ผ ํ๋ค.
ใด ์ซ์๋ก ๋ฐ๊พธ๊ณ ์ถ์ ๋ :number()
, parseInt()
, parseFloat()
ใด ๋ฌธ์๋ก ๋ฐ๊พธ๊ณ ์ถ์ ๋ :.toString()
MDN docs
x = 1
์์ 'x'๊ฐ ๋ณ์, '='๊ฐ ๋์
์ฐ์ฐ์์ด๋ค.
๋ณ์๋ฅผ ์ ์ธํ ๋ let
(๋ณ์ ์์ฑ ๋ฐ ์์ฑ ํ ๊ฐ ์์ ๊ฐ๋ฅ)๊ณผ const
(๊ฐ ์์ ๋ถ๊ฐ๋ฅ)๋ฅผ ์ฌ์ฉํ๋ค.
๋ณ์๋ฅผ ์ ์ธํ์ผ๋ฉด ๊ฐ์ ํ ๋น (์ด๊ธฐํ) ํด์ผ ํ๋๋ฐ, ๊ทธ๋ ์ง ์์ผ๋ฉด ๋ณ์์ ๊ฐ์ด undeifned๊ฐ ๋๋ค.
๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๋ํ์ ์ธ ์ด์ ๋ ๋ณ์ ํ๋๋ง ์ ์ค์ ํ๋ฉด ๋ง์ data๋ฅผ ๋ณ๊ฒฝํด์ผ ํ ๋ ๋ณ์๋ง ๋ณ๊ฒฝํ๋ฉด ๋ผ์ ๊ฐํธํ๊ธฐ ๋๋ฌธ์ด๋ค.
(var, let, const์ ๊ดํ ๋ ์์ธํ ๋ด์ฉ์ ์ฌ๊ธฐ์์ ํ์๋ค. link)
์ฐธ๊ณ ๋ก ๊ฐ์ฒด์ ์ฌ์ฉ๋ ๋ณ์๋ property๋ผ๊ณ ํ๋ฉฐ property ์ฌ์ด์ ','๊ฐ ์์ด์ผ ํ๋ค.
{}
(block) ๋ด๋ถ์์ ๋ณ์๋ฅผ ์ ์ํ๋ฉด ๋ณ์๋ ์ค๋ก์ง block ๋ด๋ถ์์๋ง ์ฌ์ฉํ ์ ์๋ค.
function, for๋ฌธ, if๋ฌธ ๋ด๋ถ์ {}๋ ๋ชจ๋ block์ด๋ค.
block ๋ด๋ถ์์ ์ ์๋ ๋ณ์๋ฅผ 'local (์ง์ญ) ๋ณ์'๋ผ๊ณ ๋ถ๋ฅธ๋ค.
global ๋ณ์๋ ํ๋ก๊ทธ๋จ์ด ์ข
๋ฃ๋ ๋๊น์ง ๊ณ์ ์ด์์๋ค.
ใด ์ด ๋ง์ local ๋ณ์๋ block์ด ๋๋๋ฉด ๋ ์ด์ ์ด์์์ง ์๊ณ ์ธ ์ ์๋ค๋ ๋ง์ด๋ค.
global ๋ณ์๊ฐ ์ฌ๊ธฐ์ ๊ธฐ์ ์์ ๋๋ฉด code ์์ ์ฑ์ ์ข์ง ์๊ธฐ ๋๋ฌธ์ ๋ณ์๋ค์ ์ต๋ํ block scope์ผ๋ก ๋๋๋ ๊ฒ ์ข๋ค.
๊ฐ๊ธ์ global ๋ณ์๋ ์ฐ์ง ์๋๋ก ๋
ธ๋ ฅํด์ผ ํ๊ณ , ์ต๋ํ {} ๋ด์์ let, const ์ ์ฌ์ฉํ์ฌ ๋ณ์๋ฅผ ์๋ก ๋ง๋ค์ด์ ์ฐ์.
JS์์๋ 'x = 1'์ 'x๋ 1์ด๋ค.'๊ฐ ์๋๋ผ 'x์ 1์ ๋์
/์ ์ฅํ๋ค.'์ด๋ค.
ํน์ 'x = 1'์ ''x'๋ผ๋ ๊ณต๊ฐ์ด ์๊ธฐ๊ณ ๊ทธ๊ณณ์ 1์ด๋ผ๋ ๊ฐ์ ์ ์ฅํด๋๋ค.'๋ก ํํํ๊ธฐ๋ ํ๋ค.
์ฐ์ฐ์ ์ค +
, ===
์ฒ๋ผ ์์ชฝ์ ๊ฐ์ ์ฐ์ฐํ๋ ๊ฒ์ ์ดํญ์ฐ์ฐ์์ด๋ค.
+
๋ฑ์ ์ดํญ ์ฐ์ฐ์ ์ค์์ ์ฐ์๋ฅผ ํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ฐ์ ์ฐ์ฐ์๋ผ๊ณ ๋ถ๋ฅธ๋ค.
HTML๊ณผ JS๋ ๋ชจ๋ computer ์ธ์ด์ด๋ค.
์ด ์ค JS๋ computer ์ธ์ด์๊ณผ ๋์์ computer programming ์ธ์ด์ด๋ค.
program์๋ '์์'๋ผ๋ ์๋ฏธ๊ฐ ์๊ณ , ์ด ์์๋ฅผ ๋ง๋๋ ๊ฒ programming์ด๋ค.
ex. orchestra program
์ฆ computer programming์ด๋ ์๊ฐ์ ์์์ ๋ฐ๋ผ ์คํ๋์ด์ผ ํ ๊ธฐ๋ฅ์ programming ์ธ์ด์ ๋ฌธ๋ฒ์ ๋ง๊ฒ ๊ธ๋ก ์ ์ ๊ฒ์ด๋ค.
๋น๊ต์ฐ์ฐ์์ ๊ฐ์ด boolean (true
or false
) ์ด๋ค.
๋น๊ต์ฐ์ฐ์๋ฅผ ํ์ฉํจ์ผ๋ก์จ coding์ด ๋จ์ ๋ฐ๋ณต์์ ํด๋ฐฉ๋ ์ ์์๋ค.
boolean์ด true๋ false๋์ ๋ฐ๋ผ ์คํ๋๋ code๊ฐ ๋ฌ๋ผ์ง๋ค.
ใด true
ย ย ย ย false
๋น๊ต์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ programming์ผ๋ก ๋ฐ๋ณต ์์ ์ด ์์ํด์ก๋๋ฐ, ์ฌ๊ธฐ์ ๋ํด ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ธฐ๋ฅ์ด ์คํ๋๊ฒ ํจ์ผ๋ก์จ ๋จ์ ๋ฐ๋ณต ์ด์์ ๋ ๋ณต์กํ ์์ ์ด ๊ฐ๋ฅํ๊ฒ ๋์๋ค.
โ if๋ฌธ์ ํ์
if (boolean type data){
true๋ฉด ์คํํ code
} false๋ฉด ์คํํ code;
โ ๊ณต์ ๋ฌธ์์๋
if (condition) {
condition์ด ์ฐธ์ด๋ฉด ์คํํ code
} else {
๋์ ์คํํ code
}
else if
๋ฌธ ๋ฑ์ ์ฌ์ฉํ ๋ code๊ฐ ์์ฑ๋ ์์๋๋ก ์กฐ๊ฑด์ ๊ฒํ ๋๋ฏ๋ก ์กฐ๊ฑด๋ฌธ์ ์์๊ฐ ์ค์ํ๋ค.
์ฐธ๊ณ ๋ก computer๋ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก, ์์์ ์๋๋ก code๋ฅผ ์คํํ๋ฉฐ ๋น๊ต์ฐ์ฐ์๊ฐ ์์ ๋๋ ๋น๊ต์ฐ์ฐ์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ผ์ชฝ๊ณผ ์ค๋ฅธ์ชฝ์ผ๋ก ๋๋์ด์ code๋ฅผ ์คํํ๋ค.
MDN docs
refactoring์ ํตํด ๊ฐ๋ฐ์์ computer ๋ชจ๋์๊ฒ ์๋ ๋นํจ์จ์ ์ ๊ฑฐํ๋ค.
์ ์งใป๋ณด์์ ์ค์ํ๋ฏ๋ก refactoring์ ๊พธ์คํ, ์ฌ๋ฌ ์ฐจ๋ก ํด์ผ ํ๋ค.
<input
id="night_day"
type="button"
value="night"
onclick="
if (document.querySelector('#night_day').value === 'night')
{ document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
โ
๋ฐ๋ณต ์ ๊ฑฐ
1) ๋ณธ์ธ์ ๊ฐ๋ฆฌํค๋ 'document.querySelector('#night_day')'๋ฅผ 'this'๋ก ์นํ
2) ๋ฐ๋ณต๋๋ 'document.querySelector('body')'๋ฅผ ๋ณ์ var์ ์ ์ฅ
<input
id="night_day"
type="button"
value="night"
onclick="
var target = document.querySelector('body');
if (this.value === 'night')
{ target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
๋ฌผ๊ฑด์ด ๋ง์ ๋ ๋ฌผ๊ฑด ํ๋ํ๋๋ฅผ ๊ธฐ์ตํ๊ธฐ๋ณด๋ค ๋ง์ ๋ฌผ๊ฑด์ ๊ฐ์ข
์๋ฉ ์์์ ๋ณด๊ดํด ๋ฌผ๊ฑด์ด ๋ด๊ฒจ์๋ ์๋ฉ ์์๋ฅผ ๊ธฐ์ตํ๋ฉด ํธํ๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก data๋ฅผ ๋ฐฐ์ด์ด๋ผ๋ ์๋ฉ ์์์ ๋ณด๊ดํ๋ฉด ํด๋นํ๋ ๋ฐฐ์ด๋ง ์๊ฐํ๋ฉด ๋ผ์ ํธํ๋ค.
ใด 3๋ฒ์ MDN ๋ฌธ์์์๋ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฐฉ(collection)์ ๋น์ ํ๋ค.
ใด ๋ฐฐ์ด์ ๊ฐ์ฒด์ด๋ค.
๋ฐฐ์ด์ ์ฌ์ฉํ๋ฉด ๋ช ์ฒ ๊ฐ์ ๋ณ์๋ฅผ ์์ฑํ์ง ์๊ณ , ํ๋์ ๋ณ์์ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ์์ ์ ์๋ค.
ํ์์ []
์ด๊ณ ๋๊ดํธ ์์ data๋ฅผ ๋ด๋๋ค.
์์์ ๋ฐ๋ผ ์ ๋ณด๋ฅผ ์ ๋ฆฌ์ ๋ํ๋ฉฐ, index๋ก data๋ฅผ ์ถ๋ ฅํ ์ ์๋ค.
ใด ๋ฐฐ์ด์ด๋ฆ[index]
๋ก ๋ฐฐ์ด์ ์ ๊ทผํ๋ค.
๋ฐฐ์ด์ ๊ฐ์๋ .length
์์ฑ์, ๋ฐฐ์ด์ ์ถ๊ฐํ ๋๋ .push
์์ฑ์ ์ฌ์ฉํ๋ค.
๋ฐฐ์ด์ ์กฐ์ํ ๋ index๋ก ์ ๊ทผํ์ฌ ์์ /์ถ๊ฐํ๊ฑฐ๋ push
, unshift
method๋ก ์ถ๊ฐ, pop
method๋ก ์ ๊ฑฐํ ์ ์๋ค.
Array.map()
์ธ map method๋ ๋ฐฐ์ด์ ๋ฐ๋ณตํด์ฃผ๋๋ฐ, callback ํจ์์์ returnํ ๊ฐ์ผ๋ก ๋งค ์์๋ฅผ ์์ ํ๋ค.
map method์ return ๊ฐ์ ์์ ๋ ๊ฐ์ผ๋ก ๋ค์ ์์ฑ๋ ๋ฐฐ์ด์ด๋ค.
codingํ ๋ ๋์์ ๋ฐ๋ณต์ํค๊ณ ์ถ๋ค๋ฉด code๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ์์ฑํด๋ ๋์ง๋ง while์ด๋ for๊ฐ์ ์กฐ๊ฑด๋ฌธ์ ์ฌ์ฉํ๋ ๊ฒ์ด ํ๋ช
ํ๋ค.
๋ํ data๊ฐ ๋ฐ๋์๋ค๊ณ logic์ ๋ฐ๊พธ์ด์ผ ํ๋ code๋ ๋นํจ์จ์ ์ด๋ฏ ๋ณ์, ๋น๊ต์ฐ์ฐ์, ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ์ ํ์ฉํด ํจ์จ์ ๋์ด์.
โ while๋ฌธ์ ํ์
while (boolean type data){
์กฐ๊ฑด์ด false๊ฐ ๋ ๋๊น์ง ์คํ๋๋ code (true์ธ ๋์ ๊ณ์ ์คํ๋๋ code)
} false๊ฐ ๋๋ฉด ์ค๊ดํธ์์ ๋์ค๋ฉด์ ๋ฐ๋ณต์ด ์ข
๋ฃ๋๊ฑฐ๋ ์ด ์๋ฆฌ์ ์ง ๋ค๋ฅธ code๊ฐ ์คํ๋จ
โ ๊ณต์ ๋ฌธ์์๋
while (condition){
statement
};
๋ฐ๋ณต๋ฌธ์ ์์๋๋ก ์คํ๋๋ program์ ์คํ ์์, ์ฆ ํ๋ฆ์ ์ ์ดํ๋ ์ ์ด๋ฌธ์ด๋ค. w/ ์กฐ๊ฑด๋ฌธ
ํ์ง๋ง ์ฐ์์ฑ์ด ์์ผ๋ฏ๋ก ์ฐ์์ ์ด์ง ์์ code๋ฅผ ๋ฐ๋ณต์ํค๊ณ ์ถ์ ๋ ํ๊ณ๊ฐ ์๋ค.
<h1>Loop, Array</h1>
<script>
var fruites = ["strawberry", "fig", "orange", "melon"];
</script>
<h2>Fruites I Like</h2>
<ul>
<script>
var i = 0;
while (i < fruites.length) {
document.write('<li><a href="http://fruites.com/'+fruites[i]+'">'+fruites[i]+'</a></li>');
i = i + 1;
}
</script>
</ul>
๐งโ ์ ๋ด์ฉ์ ๋ณด๋ค ๊ฐ์๊ธฐ ๋ฑ์ฅํ i๊ฐ ๊ถ๊ธํ๋ค. ๊ทธ๋๋ ์ code์์์ i๋ ์ดํด๊ฐ ๋์๋๋ฐ, ๋ค์์ code์์๋ i์ ๋ฑ์ฅ์ด ์๋ฑ๋ง๊ฒ ๋๊ปด์ก๋ค. ๐ง
let count = 1;
for (let i = 0; i <= 5; i++) {
count = count + 1;
}
์ ๋ต์ (๊ณต์ ๋ฌธ์)์ ์์๋ค.
โ for๋ฌธ์ ํ์
for ([initialization]; [condition]; [final-expression])
statement;
let i = 0
์ initialization, i <= 5
๋ condition, i++
์ final-expression์ด๋ค.
โ ๋ ๋ค๋ฅธ ์์ (๋ฐฐ์ด ์ค ์ต์๊ฐ ๊ตฌํ๊ธฐ)
function findSmallestElement(arr) {
if (arr.length === 0) {
return 0;
} else {
let min = arr[0];
for (let i = 0 ; i < arr.length ; i++){
if (arr[i] < min) {
min = arr[i];
}
} return min;
}
}
๋ฐฐ์ด์ ์ด์ ๋ ๋ค๋ฅธ ์๋ฉ ์์์ด๋ค. (ํํ ์ํ๊ธฐ ํน์ ๋ง์ ์์๋ก ๋น์ ๋๋ ๊ทธ๊ฒ์ด๋ค.)
์
๋ ฅ๊ณผ ์ถ๋ ฅ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
์ฌ์ค ๋ชจ๋ JavaScript๋ function ๊ฐ์ฒด์ด๋ค.
ใด function(){}.constructor === function
์ด ture
์ธ ๊ฒ์ด ๊ทธ ์ฆ๊ฑฐ์ด๋ค.
์ฐธ๊ณ ๋ก 'ํจ์'๋ '๋ช
๋ น'์ด๋ผ๊ณ ๋ ํ๋ฉฐ, ๊ฐ์ฒด์ ์ํด์๋ ํจ์๋ 'method'๋ผ๊ณ ํ๋ค.
ใด document.querySelector('body')
์์ document
๊ฐ ๊ฐ์ฒด, querySelector('body')
๊ฐ ํจ์์ธ ๊ฒ์ ์ ์ ์๋๋ฐ, ์ฌ๊ธฐ์์๋ ๊ฐ์ฒด์ ์ํ ํจ์์ด๋ฏ๋ก querySelector('body')
๋ฅผ method๋ผ ๋ถ๋ฅธ๋ค.
๋ณ์, ๋น๊ต์ฐ์ฐ์, ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ ๋ฑ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ง์ code๋ฅผ ์ ๋ฆฌํ ๋ ํจ์๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก ์ ์งใป๋ณด์์ ์ข๋ค.
์์์ ํจ์๋ฅผ ์ ์ธ/์ ์ํ๊ณ , ์๋์์ ํธ์ถํ๋ค.
ํจ์๋ฅผ ํธ์ถํ ๋ ํจ์๋ช
()
์ด๋ผ๊ณ ์ด๋ค.
ใด ์ ์ธ๋ง ํ๋ฉด ํจ์๋ฅผ ์ ์ํ ๊ฒ์ผ ๋ฟ ์คํ๋์ง ์์ผ๋ฏ๋ก ํธ์ถํด์ ์คํ์์ผ์ผ ํ๋ค.
ใด ๋ณ์์ ์ด๋ค ์ธ์๊ฐ ์ ๋ฌ๋ ์ง๋ ํจ์๋ฅผ ํธ์ถํ ๋ ๊ฒฐ์ ํ๋ ๊ฒ์ด๋ฏ๋ก ํจ์๋ฅผ ์ ์ธํ๋ ์์ญ์์ ๋งค๊ฐ๋ณ์์ ์๋ก์ด ๊ฐ์ ๋ฃ์ผ๋ฉด ์ ๋๋ค.
โ function๋ฌธ์ ํ์
function ๋ด๊ฐ์ ํํจ์๋ช
(){
ํจ์ ์คํ ๋จ์ (์ฌ์ฌ์ฉํ๊ณ ์ถ์ ์ฝ๋)
return ํจ์์์ ๋ฐํํ ๊ฐ (returnํ ๊ฒ์ด ์๋ค๋ฉด ์์ฑ)
}
โ ํจ์๋ฅผ ์ ์ธํ๋ ์์ญ์์ ๋งค๊ฐ๋ณ์์ ์๋ก์ด ๊ฐ์ ๋ฃ์์ผ๋ฏ๋ก ์ ์ข์ ์์
function alertSigninSuccess(name) {
๐
โโ๏ธ let name="Micheal";
alert(name+"๋ ๋ก๊ทธ์ธ ์ฑ๊ณต!");
}
๐โโ๏ธ alertSigninSuccess("Micheal");
ํจ์ ์์์ ๋ ํจ์๋ฅผ ํธ์ถํ ์๋ ์๋ค.
ย ย ย ํจ์๋ ์
๋ ฅ๊ณผ ์ถ๋ ฅ์ผ๋ก ์ด๋ฃจ์ด์ ธ์๋๋ฐ, ์
๋ ฅ์๋ parameter(๋งค๊ฐ'๋ณ์')์ argument(์ธ์)๊ฐ ์๋ค.
ย ย ย ์๋ ์ฝ๋์์ left
์ right
๊ฐ parameter(๋งค๊ฐ๋ณ์)์ด๊ณ , 2
, 3
, 3
, 4
๊ฐ argument(์ธ์)์ด๋ค.
ย ย ย ์ฆ, ๋งค๊ฐ๋ณ์ ์๋ฆฌ์ ์ธ์๋ฅผ ์ ์ฅํ๋ค.
ย ย ย ์ธ์๋ ํจ์๋ฅผ ํธ์ถํ ๋ ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ์ฌ์ฉ๋๋ ๊ฒ์ด๋ค.
ย ย ย ๋งค๊ฐ๋ณ์๋ ํจ์๋ฅผ ํธ์ถํ ๋ ์ธ์๋ฅผ ์ ๋ฌ๋ฐ์์ ๋งค๊ฐ๋ณ์์ ์ด๋ฆ์ผ๋ก ํจ์ ์์ชฝ์์ ์ฌ์ฉ๋๋ค.
ย ย ย ๋งค๊ฐ๋ณ์๊ฐ ๊ฐ์ ๋ฐ์ผ๋ฉด ๊ทธ ๊ฐ์ด ๋ฐ๋ก ํจ์๋ก ์ ๋ฌ๋๋ค.
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3); // 5
sum(3,4); // 7
ย ย ย ํจ์์ ์ถ๋ ฅ
ย ย ย '1 + 2 = 3'์์ '1 + 2'๊ฐ 3์ ํํ์์ด๋ฏ, 1===1์ ture
์์ 1===1
์ ture
์ ํํ์์ด๋ค.
ย ย ย return์ ์๋ตํ๋ฉด ํจ์๋ undefined๋ฅผ ๋ฐํํ๋ค.
ย ย ย ๊ทธ๋ฌ๋ฏ๋ก return์ ํจ์์ ํํ์์ด๋ค.
ย ย ย ํจ์๋ฅผ ํธ์ถํ๊ธฐ๋ ํ๋๋ฐ, ๊ทธ๊ฒ ๋ญ์ง๋ฅผ ์ ์๊ฐ ์์ผ๋ return์์ ๋ณ์๋ช
์ ์ง์ ํ๊ธฐ๋ ํ๋ค.
ย ย ย ๊ทธ๋ฌ๋ฏ๋ก ํจ์๋ฅผ ์ธ ๋ ํจ์๋ช
, ๋งค๊ฐ๋ณ์, ์ธ์, return ๋ฑ์ ์ด๋ฆ์ ์ง์ ํด ์ฃผ์ด์ผ ํ๋ค.
function sum(left, right){
return left+right;
}
// ํจ์์ ์ํด ๋์ถ๋ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ป๊ฒ ํ์ฉํ ๊ฑด์ง๋ ์๋์ ๊ธฐ์ฌ
document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum(2,<3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum(2,3)+'</div>');
<body>
<input
type="button"
value="night"
onclick="
var target = document.querySelector('body');
if (this.value === 'night')
{ target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
</body>
โ
1) event๋ฅผ head ์์ญ์ ํจ์๋ก ๊ธฐ์ฌ
2) body์๋ head์์ ์ ์ธํ ํจ์๋ช
๋ง ๊ธฐ์ฌ
3) ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด 'this' ๋ถ๋ถ์ ์์
<head>
function nightDayHandler(modeChange){
var target = document.querySelector('body');
if (modeChange.value === 'night')
{ target.style.backgroundColor = 'black';
target.style.color = 'white';
modeChange.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
modeChange.value = 'night';
}
}
</head>
<body>
<input
type="button"
value="night"
onclick="nightDayHandler(this)"
>
</body>
ํจ์๋ผ๋ ๊ธฐ๋ฐ ์์ ๊ฐ์ฒด๊ฐ ์กด์ฌํ๋ค.
๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋ฌ ์ด์ ์ค ๊ฐ์ฒด ์ญ์ ์ ๋ฆฌ์ ๋์ ์๋จ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค๋ ์ฅ์ ์ด ์๋ค.
๊ฐ์ฒด๋ ๋ง์ ํจ์์ ์ด๋ค ์ฌ์ด์ ์๋ก ์ฐ๊ด๋ ๋ณ์๋ฅผ ๊ฐ์ ์ด๋ฆ์ผ๋ก ๊ทธ๋ฃนํํด์ ์ ์ ๋ฆฌํ๊ธฐ ์ํ ๋๊ตฌ์ด๋ค.
๋ฐฐ์ด์๋ ์์๊ฐ ์์ง๋ง object๋ ์์๋ฅผ ๋ณด์ฅํ์ง ์๋๋ค.
ใด ์ฆ, ๊ฐ์ฒด๋ ์์๊ฐ ๋ฐ๋์ด๋ ์๊ด์๋ค.
๊ฐ์ฒด๋ Key์ ๊ฐ(Value)์ ์กฐํฉ์ผ๋ก ์ด๋ฃจ์ด์ง data์ด๋ฉฐ, index๋ก ๊ฐ์ ์ ๊ทผํ๋ ๋ฐฐ์ด๊ณผ ๋ค๋ฅด๊ฒ key๋ก ๊ฐ์ ์ ๊ทผํ๋ค.
๊ฐ์ฒด๋ ์ค๊ดํธ๋ก ๊ฐ์ธ์ง key-value(property)์ ํํ๋ฅผ ๊ฐ๋๋ค.
property ์ด๋ฆ์ ์ค๋ณต๋๋ฉด ์ ๋๋ค.
๊ฐ์ฒด์ด๋ฆ = {
property์ด๋ฆ1: property๊ฐ,
property์ด๋ฆ2: property๊ฐ
};
๊ฐ์ฒด์ ์ด๋ฏธ key๊ฐ ์กด์ฌํ๋๋ฐ, ๋ค์ ํ ๋ฒ ํ ๋นํ๋ฉด ๊ฐ์ด ๊ต์ฒด(์์ )๋๋ค.
์ด์ ์ ์๋ key๋ก ์ ๊ทผํ๋ฉด ์๋ก์ด property๊ฐ ์ถ๊ฐ ๋๋ค.
<script>
const members = {
"vocalist" : "JK",
"dancer" : "J-Hope"
};
document.write(members.vocalist);
document.write(members.dnacer);
// ์๋๋ ๊ฐ์ฒด์ ๊ฐ์ ์ถ๊ฐํ๋ code
members["team leader"] = "RM";
// ์์ฒ๋ผ key ๊ฐ์ ๋์ด์ฐ๊ธฐ๊ฐ ์๋ค๋ฉด ๋๊ดํธ ์์ ์ ์ด์ผ ํจ. 'member.tea leader'๋ผ๊ณ ํ๋ฉด ์ ๋จ.
</script>
โ ๋ชจ๋ ๊ฐ์ฒด ๊ฐ์ ๋ถ๋ฌ์ค๋ ค๋ฉด
<script>
for (const key in members) {
document.write(key+' : '+members[key]+'<br>';
</script>
๋ณ์๋ฅผ ์ ์ธํ ๋๋ ํ ์ ์์์ง๋ง ๊ฐ์ฒด์ key์๋ ํ๊ธ, ํน์๋ฌธ์, ๊ณต๋ฐฑ, ๋ณ์ ๋ฑ์ด ์ฐ์ผ ์ ์๋ค.
ใด ๋จ ๊ณต๋ฐฑ, ๋ณ์, ์ซ์๋ก ๋์ด ์๋ key์ ์ ๊ทผํ ๋๋ dot ๋ง๊ณ ๋๊ดํธ๋ก ์ ๊ทผํด์ผ ํ๋ค.
ย ย ย ย ย ์ฆ property์ ์ ๊ทผํ ๋ ๊ฐ์ฒด์ด๋ฆ.property์ด๋ฆ
๋๋ ๊ฐ์ฒด์ด๋ฆ["property์ด๋ฆ"]
๊ฐ์ฒด๋ ๋ฌธ์, ์ซ์, ๋ฐฐ์ด, ๊ฐ์ฒด ๋ฑ ์ด๋ ํ data๋ ๋ด์ ์ ์์ผ๋ฉฐ, ์ฌ์ง์ด ํจ์๋ ๋ด์ ์ ์๋ค.
<script>
const members = {
"vocalist" : "JK",
"dancer" : "J-Hope"
};
members["team leader"] = "RM";
</script>
โ
1) 'members'๋ผ๋ ๊ฐ์ฒด์ 'showAll'์ด๋ผ๋ ํจ์ ์ถ๊ฐ
2) 'members'๋ผ๋ ๋ณ์ ๊ฐ์ด ๋ณ๊ฒฝ๋ ์ ์์ผ๋ฏ๋ก ์์ ์ ๋ปํ๋ 'this'๋ก ์์
<script>
members.showAll = function(){
for(const key in this) {
document.write(key+' : 'this[key]+'<br>');
}
}
members.showAll();
// ๊ฐ์ ๊ฒฐ๊ณผ ๋์ถ
</script>
console.log()
๋ ํํ๋ฅผ ๋ณด๋ฉด ๊ฐ์ฒด์ด๋ค.
JavaScript ์ด๋์๋ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ฏ๋ก global ๊ฐ์ฒด์ด๋ค.
console ๋ค์์ dot(.)์ผ๋ก property์ ์ ๊ทผํ๊ณ , log๋ผ๋ key์ ๊ฐ์ ํจ์์ด๋ค.
log๋ console ์ด๋ผ๋ ๊ฐ์ฒด์ method์ธ ๊ฒ์ด๋ค.
๋ system ๊ฐ์ ์ํธ ์์ฉ ์ฅ์น
button
alert
MDN docs
์ํ์ฝ๋ฉ
WeCode