๐ ์ด์ ๊ฐ์ ์ ๋ฆฌ
* JavaScript ๋ฌธ๋ฒ์ html์ <script> ... </script> ์์ ์์ฑํ๋ค.
* ์ถ๋ ฅ์ alert, document.write, console.log ํจ์๊ฐ ์กด์ฌํ๋ค.
* let ํ์ ์ ์ฌ์ ์ธ์ด ๋ถ๊ฐ๋ฅ ํ๊ณ , const ํ์ ์ ์ฌ์ ์ธ, ์ฌํ ๋น ๋ชจ๋ ๋ถ๊ฐ๋ฅํ๋ค. ๋ฐ๋ฉด var์ ๋ชจ๋ ๊ฐ๋ฅํ๋ค.
* ์ง์ ์ ์ผ๋ก ์ฌ์ฉ์์๊ฒ ๊ฐ์ ์ ๋ ฅ๋ฐ๋ ๊ฒ์ prompt, ์/์๋์ค(true/fase) ๋ confirm ํจ์๋ฅผ ์ฌ์ฉํ๋ค.
๐ ์ด๋ฒ ๊ฐ์ ๋ด์ฉ
* ๋ฐ๋ณต๋ฌธ for, while
* ์กฐ๊ฑด๋ฌธ if ~ else ~ else if
* ๋ฐฐ์ด๊ณผ ๋ฐฐ์ด ๋ฐ๋ณต๋ฌธ foreach
๐ Step 1. ๋ฐ๋ณต๋ฌธ for / while
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐ๋ณต๋ฌธ์ C์ธ์ด์ ๋น์ทํ ์ ์ด ๋งค์ฐ ๋ง์ต๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก for๋ฌธ์ for(์ ์ธ ๋ฐ ์ด๊ธฐ๊ฐ ๋ถ์ฌ; ์กฐ๊ฑด์; ์ฆ๊ฐ์) { ... } ์ ํ์์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
for๋ฌธ์ ๊ฒฝ์ฐ, ์ ์ธ๋ ๋ณ์์ ์ด๊ธฐ๊ฐ ๋ถํฐ ์กฐ๊ฑด์ ๋ง๋ ๋ถ๋ถ๊น์ง ์ฆ๊ฐ์์ ํตํด ํ๋์ฉ ๋ฐ๋ณตํฉ๋๋ค.์ด์ ์ค ์ฌ์ฉ ์์ ๋ฅผ ๋ณด๊ฒ ์ต๋๋ค.
๊ฒฐ๊ณผ๋ฅผ ํ์ธ ํด ๋ณด๊ณ ์ง์ ์ฝ๋๋ฅผ ๋ฐ๋ผ ์์ฑ ํด ๋ณด์ธ์!
์์ ๊ฐ์ด ์์ฑํ ๋ค ๊ฒฐ๊ณผ๋ฅผ ํ์ธ ํด ๋ณด์๋ฉด,
์ข์ธก ์ฌ์ง๊ณผ ๊ฐ์ด ๋์ต๋๋ค.
for๋ฌธ์ ๋ฐ๋ณต ์คํ ์์๋ ์๋์ ๊ฐ์ต๋๋ค.
1 | loop ๋ผ๋ ๋ณ์๋ฅผ ์ ์ธํ ๋ค ๊ทธ ๋ณ์์ ๊ฐ์ 1๋ก ์ด๊ธฐํ |
2 | loop <= 10 (a๊ฐ 10๋ณด๋ค ์๊ฑฐ๋ ๊ฐ๋ค[์ดํ]) ์ ์กฐ๊ฑด์ด ๋ง์กฑ (true) ํ ๊ฒฝ์ฐ ๋ค์ ์์ ์ํํจ |
3 | document.write(`${loop} ๋ฒ์งธ ๋ฐ๋ณต <br />`); ์ ์คํํ์ฌ ํ์ฌ loop ๊ฐ๊ณผ ๋ฌธ์๋ฅผ ์ถ๋ ฅํจ. |
4 | loop++ ๋ฅผ ์คํํ์ฌ loop์ ๊ฐ์ 1 ๋งํผ ์ฆ๊ฐ์ํด (์ฆ๊ฐ์ฐ์ฐ์) |
... | ์ ๋ด์ฉ์ loop <= 10์ด false ์ผ๋ ๊น์ง ๋ฐ๋ณตํจ. |
๋ค์์ While๋ฌธ ์ ๋๋ค.
while ๋ฌธ์ ์ด๋ค ์กฐ๊ฑด๋ฌธ์ด ์ฐธ์ด๊ธฐ๋ง ํ๋ฉด ๋ฌธ์ฅ์ ๊ณ์ํด์ ์ํํฉ๋๋ค.
While๋ฌธ์ ํ์์ while(์กฐ๊ฑด์) { ... } ์ ๋๋ค.
while๋ฌธ์ ์กฐ๊ฑด์์ด false๋ผ๋ฉด ๋ค์ ์์ ์คํํ์ง ์์ต๋๋ค.
์ ์ฝ๋๋ loop๋ 1๋ก ์ ์ํด ๋๊ณ , loop๊ฐ 10๋ณด๋ค ์์ผ๋ฉด ์คํ์ํค๊ฒ ํ์ฌ์
document.write๋ฅผ ์คํํ๊ณ , loop์ ๊ฐ์ 1 ๋งํผ ํค์๋๋ค (์ฆ๊ฐ์ฐ์ฐ์)
๐ Step 2. ์กฐ๊ฑด๋ฌธ if ~ else if ~ else
Javascript ์์๋ ๋ฌด์ธ๊ฐ ์กฐ๊ฑด์ ๊ฑธ๊ณ , ๊ทธ ์กฐ๊ฑด์ ๋ง๊ฒ ์คํ์ ๋ถ๊ธฐ์ํฌ ์ ์์ต๋๋ค.
๊ทธ๋ฅผ ์ํด ์ฌ์ฉํ๋ ๊ฒ์ด if๋ฌธ ์ ๋๋ค.
if๋ฌธ์ if(์กฐ๊ฑด์) { ... } ๋ก ์ฌ์ฉํ๋ฉฐ,์กฐ๊ฑด์์ด ์ฐธ (True) ์ผ๋ { ... } ์ ์คํํฉ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ์คํ ๊ฒฐ๊ณผ๋ฅผ ์ง์ ํ์ธํ์ธ์ (์
๋ ฅ์ด๋ผ ์ค๋ฅ๊ฐ...)
let a = 20;
let b = Number(prompt("์ซ์๋ฅผ ์
๋ ฅํ์ธ์"));
let c = a + b;
if (c >= 50) {
alert("true");
}
</script>
</body>
</html>
์์ ๊ฐ์ด ์์ฑํ์๋ฉด 30 ์ด์์ ๊ฐ์ ์ ๋ ฅํ์ ๋์๋ง true ๋ผ๋ ์๋ด์ฐฝ์ด ๋์ค๊ฒ ๋ฉ๋๋ค.
์กฐ๊ฑด์ด ๊ฑฐ์ง (false) ์ผ ๋, false ๋ฅผ ์ถ๋ ฅํ๋ ๊ฒ์ ๋ํด์ ๋ฐฐ์๋ณด๊ฒ ์ต๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ์ ๊ฐ๋จํฉ๋๋ค. else { ... } ๋ก ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค.
else๋ if๋ฌธ์ด ๊ฑฐ์ง์ผ ๋ ์๋ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฌธ๋ฒ ์ ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 20;
let b = Number(prompt("์ซ์๋ฅผ ์
๋ ฅํ์ธ์"));
let c = a + b;
if (c >= 50) {
alert("true");
} else {
alert("false");
}
</script>
</body>
</html>
์ ์ฝ๋๋ฅผ ์คํ์์ผ ๋ณด๋ฉด, 30 ์ด์์ ์ ๋ ฅํ์ ๋์๋ true, ๊ทธ ์ดํ์ ๊ฐ์ ์ ๋ ฅํ์ ๋์๋ false ๊ฐ ๋์ต๋๋ค.
๋ถ๋ช ํ ์ฌ๋ฌ๋ถ๋ค์ if๋ฌธ์ด ์๋ ๋์, ๋ค๋ฅธ ์กฐ๊ฑด์ ๋ถ์ฌํ๊ณ ์ถ์ผ์ค ๊ฒ๋๋ค(?)
๋ค. else if์ ๋ํด์ ๋ฐฐ์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
else if๋ ์ฒซ if๋ฌธ์ ์กฐ๊ฑด์์ด ๊ฑฐ์ง (false) ์ผ ๋, ๋ค์ ํ๋ฒ ๋ ์กฐ๊ฑด์ ๋ถ์ฌํ์ฌ
์ง์ํ๋ ๋ฌธ๋ฒ ์ ๋๋ค.
์ฌ์ฉ ๋ฒ์ if๋ฌธ๊ณผ ๋น์ทํ ๋ฐฉ๋ฒ์ผ๋ก, else if (์กฐ๊ฑด์) { ... } ์ ๋๋ค.
์ฌ์ค ์์๋ if ๋ฌธ์ ์ฐ๊ณ , ๊ฑฐ์ง์ผ ๋ else if๋ฅผ ์ฐ๊ณ , ๊ทธ๊ฒ ๋ง์ ๊ฑฐ์ง์ผ ๋ else ๋ฅผ ์ฌ์ฉํฉ๋๋ค.. ;;
์ก์๋ฆฌ ๋ง๊ณ ์ฝ๋ ๋ณด์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 20;
let b = Number(prompt("์ซ์๋ฅผ ์
๋ ฅํ์ธ์"));
let c = a + b;
if (c >= 50) {
alert("true, 50 ์ด์");
} else if (c >= 20) {
alert("true, 20 ์ด์")
} else {
alert("false");
}
</script>
</body>
</html>
์ ์ฝ๋๋ฅผ ์คํ์์ผ ๋ณด๋ฉด, 20 ์ด์์ธ ์ซ์๋ฅผ ์ ๋ ฅํ์ ๋์, true, 20 ์ด์ ์ด๋ผ๊ณ ์ถ๋ ฅ๋ฉ๋๋ค.
ํ... ์ด์ ๋ชธํ๊ธฐ๋ ๋๋ฌ์ต๋๋ค(?)
๐ Step 3. ๋ฐฐ์ด๊ณผ ๋ฐฐ์ด ๋ฐ๋ณต๋ฌธ foreach (์... ๋๋ฌด ์ด๋ ต๋ค;;)
์ฐธ๊ณ ๋ก, ๋ฐฐ์ด์ ๊ณต๋ถํ๊ธฐ ์ ์ ์์ ์ผ์๋ฌผ์ ์ค๋นํ์๊ธฐ ๋ฐ๋๋๋ค.
๋จธ๋ฆฌ ๋๊ป์ด ํํ์ฐ์ด ๋์ด๋ ์ ์ฑ ์์ง์ง ์์๊ฒ๋๋ค ;( ใ ใ ใ ใ ใ ใ ใ
์ก์๋ฆฌ๋ ์ฌ๊ธฐ๊น์ง ํ๊ณ , ๋ณธ๊ฒฉ์ ์ผ๋ก ๋ฐฐ์ด ๋ค์ด๊ฐ๊ฒ ์ต๋๋ค?
์ด๋ ์ธ์ด๋ ๋ง์ฐฌ๊ฐ์ง๋ก, Javascript ์์๋ ๋ฐฐ์ด์ด๋ ๊ฒ์ด ์กด์ฌํฉ๋๋ค.ํ์ด์ฌ์ ํ์๋ ๋ถ๋ค์ ์ํด ๋ง์๋๋ฆฌ์๋ฉด, ๋ฆฌ์คํธ์ ๊ฐ์ ๊ฐ๋ ์ ๋๋ค.
๋ฐฐ์ด์ด ๋ญ์ง ์๊ธฐํ๊ธฐ ์ ์, ์ ์ ๋ง๋ณด๊ธฐ๋ก ๋ง์๋ ๊ฑธ ๋ค๋ ค๋๋ฆฌ๊ฒ ์ต๋๋ค(?)์ ์ง์ด 100๊ฐ๊ฐ ์๋ค๊ณ ์นฉ์๋ค (์ ๊ฐ์ง๊ณ ์ถ๋ค;;)
์ 100๊ฐ์ ์ง ์ฃผ์๋ฅผ ๋ชจ๋ ๊ฐ์ผ๋ก ์ ์ฅํด์ผ ํ๋ค๊ณ ํ ๋,
๋ฐฐ์ด์ ์ฌ์ฉํ๋ค๋ฉด ํ ๋ฐฐ์ด์ 100๊ฐ์ ๋ฐฉ(room?) ์ ํ ๋นํ์ฌ์ ๊ฐ์ ์ ์ฅํ ์ ์์ต๋๋ค.
ํ์ง๋ง ๋ฐฐ์ด์ ์ฌ์ฉํ์ง ์๋๋ค๋ฉด... myhome1, myhome2, myhome3 ....... myhome100 ์ผ๋ก
๊ฐ๊ฐ์ ๋ณ์ 100๊ฐ๋ฅผ ๋ชจ๋ ์ ์ธํ์ฌ ๊ฐ์ ์ ์ฅํด์ผ ํ ๊ฒ ์ ๋๋ค.
๋งค์ฐ ๋นํจ์จ์ ์ ๋๋ค.
Javascript์ ๋ฐฐ์ด์ ๋ค๋ฅธ ์ธ์ด์๋ ์กฐ๊ธ ์ฐจ์ด์ ์ด ์์ต๋๋ค.
๋ณ์ํ์ ๋ณ์๋ช = new Array(); ๋ก ์ ์ธํ๊ฑฐ๋,
๋ณ์ํ์ ๋ณ์๋ช = [์์๊ฐ]; ์ผ๋ก ์ ์ธํ ์ ์์ต๋๋ค.
๋ฐฐ์ด์ ์ ์ธํ๊ณ ๋ ๋ค์, ๋ฐฐ์ด์ ์ธ๋ฑ์ค ๊ฐ์ ์ด์ฉํ์ฌ ๋ณ์๋ช [์ธ๋ฑ์ค] ์ ํํ๋ก
์ฌ์ฉํ ์ ์์ต๋๋ค. (์ ์ฐธ๊ณ ๋ก ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ 0 ๋ถํฐ ์์ํฉ๋๋ค ใ ใ ;;)
์ค์ฐ ์ค์ฐ ์ค์ฐ ์ธ๋ฐ์ ์ด๊ณ ์๋, ํ์คํ ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ 0๋ฒ๋ถํฐ ์์ํ๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
๊ทธ๋ผ ์ด์ ์ ์ฝ๋์์ for๋ฌธ์ ์ด์ฉํ์ฌ ์ ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ฅผ ์ธ๊ทธ๋ฆฌ(?) ๋ถ๋ฌ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
๋ชจ๋ ์งํฉ!
์ ์๊ทผ ์ฝ๋ค์? ์ ๋ ๊ฒ ์ฝ๊ฒ ํ๋ฒ์ ๋ถ๋ฌ์ฌ ์ ์๋ค๋...
์๊น ์ ์๊ฒ ์ ํ๋์ฉ ์ถ๋ ฅํ๊ฒ ์ํจ๊ฑฐ์ฃ ;;
์ด์ ์ฌ๊ณผ, ๋ฐ๋๋ ๋ฅผ ์ธ๋ฑ์ค์ ๋ฃ์๋ค ์น๊ณ (?) ์์ฃผ ์ฌ์ฉํ๋ ๋ฐฐ์ด ์ฐ์ฐ์ ๋ฐฐ์๋ด ์๋ค.
์ธ๋ฑ์ค ๊ฐ์ ์ด์ฉํ์ฌ ๋ฐฐ์ด์ ๊ฐ ๊ฐ๋ฅดํค๊ธฐ
let first = fruits[0]
// ์ฌ๊ณผ
let last = fruits[fruits.length - 1]
// ๋ฐ๋๋
๋ฐฐ์ด์ ๋ง์ง๋ง์ ๊ฐ ํ๋ ์ถ๊ฐํ๊ธฐ
let newLength = fruits.push('๋
์ฝฉ')
// ["์ฌ๊ณผ", "๋ฐ๋๋", "๋
์ฝฉ"]
// ์ผ ๊ทผ๋ฐ ๋
์ฝฉ์ ๊ณผ์ผ์ด ์๋์์;;
๋ฐฐ์ด์ ๋ง์ง๋ง ๊ฐ ํ๋ ์ญ์ ํ๊ธฐ
let last = fruits.pop() // ๋์์๋ ๋
์ฝฉ์ ์ ๊ฑฐ
// ["์ฌ๊ณผ", "๋ฐ๋๋"]
// ํ ํธ์...
์ธ๋ฑ์ค ๊ฐ์ ํด๋นํ๋ ๋ฐฐ์ด์ ๊ฐ ์ญ์ ํ๊ธฐ
let removedItem = fruits.splice(pos, 1)
// ["๋ธ๊ธฐ"]
// ํ... ๋์ฒ๋ผ ์๋ก๊ฐ ๋์๋ค fruits ๋ฐฐ์ด์..?;;
๋ฐฐ์ด์ ๊ธธ์ด ๊ฐ์ ธ์ค๊ธฐ
let len = fruits.length
// 1
์ด์ ... ๋ฐฐ์ด์ ๋ฐ๋ณต๋ฌธ์ด๋ผ๊ณ ํ ์ ์๋ foreach ์ ๋ํด์ ๋ฐฐ์ฐ๊ฒ ์ต๋๋ค.
์์งํ foreach๋ฅผ ์ ์ฐ๋๊ฑฐ ๊ฐ์ง ์์๋ฐ... ๊ทธ๋๋ ์๊ธด ์์์ผ ํฉ๋๋ค.
๋ค. ์ ๊ฒ ๋ค ์ ๋๋ค. ์ข ์ด๋ ต์ฃ ใ ใ ใ
foreach๋ ๋ฐฐ์ด์ ๊ฐ๊ฐ์ ๋ํด ์๋ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฌธ๋ฒ ์ ๋๋ค.
element ๋ณ์์ document.write()๋ฅผ ์คํํ ๋ ๋ง๋ค ๋ฐฐ์ด์ ๊ฐ์ด ํ๋์ฉ ๋ค์ด๊ฐ๋๋ค.
(์ฒ์์ Java๊ฐ ๋ค์ด๊ฐ๋ค๊ฐ, ์ถ๋ ฅํ๊ณ ๋๋ฉด C/C++์ด ๋ค์ด๊ฐ๋ ๊ฒ)
์ ์ง์ง ์๊ณ ํ์ จ์ต๋๋ค;; ํด์ฆ ํธ์ธ์(?)
๐ Step 4. ์ค๋์ ๋ง์ง๋ง ํด์ฆ!
1. ์ซ์ ํ๋๋ฅผ ์ ๋ ฅ ๋ฐ๊ณ , ๊ทธ ๊ฐ์ ๋ฐ๋ผ for๋ฌธ์ผ๋ก ์ธ๋ฑ์ค ๋ฒํธ๋ฅผ ์ถ๋ ฅํ์ธ์
2. ๊ฐ์ ๋ ๊ฐ ์ ๋ ฅ๋ฐ๊ณ , ๊ทธ ๊ฐ์ ์๋ก ๋บ ๊ฐ์ด 0 ์ดํ๋ผ๋ฉด a๋ฅผ, -5 ์ดํ๋ผ๋ฉด b๋ฅผ, ์๋๋ฉด c๋ฅผ ์ถ๋ ฅํ์ธ์
3. ๋ฐฐ์ด์ ํ๋ ๋ง๋ค๊ณ , ์ ๋ ฅ๋ฐ์ ๊ฐ์ ๋ฐฐ์ด์ ๋ง์ง๋ง์ ์ถ๊ฐํ์ธ์.
์ค๋ ํด์ฆ์ ์ ๋ต์ ๋ค์ ๊ฐ์์์ ๊ณต๊ฐํ๊ฒ ์ต๋๋ค.
์๊ณ ํ์ จ์ต๋๋ค!
์ฑํ ์ผ๋ก ์ฌ์ฉ์๊ฐ ์ํ๋ ๋ง์ถคํ ์๋ฒ ํธ์คํ ์
์ด์ฉ ํ์ค์ ์์ต๋๋ค.
ํ ์
์ฒด ๋ณด๋ค ๋์ฑ ๋ฐ์ด๋ ์ฑ๋ฅ ๊ณผ ๊ฐ์ฑ๋น ์
ํฉ๋ฆฌ์ ์ธ ๊ฐ๊ฒฉ์ผ๋ก RTGROUP ๋๋์ค ์ด์ฉ ํ์๊ธธ ๋ฐ๋๋๋ค.
'Web > Node.JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTUN] Chapter 2. JavaScript ๊ธฐ์ด (1) (0) | 2020.06.24 |
---|---|
[HTUN] Chapter 1. ๊ธฐ์กด ๊ฐ์ข๋ฅผ ๊ฐํธํฉ๋๋ค. (0) | 2020.06.24 |
๋๊ธ