์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ์์น
์๋ฐ์คํฌ๋ฆฝํธ๋ ํฌ๊ฒ 4๊ฐ์ง ์์น์ ์์ฑํ ์ ์๋ค.
1. HTML ํ๊ทธ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์์ฑ์ ์์ฑ
ex)
onclick = "this.src='banana.png'"
onmouseover = "this.src='banana.png'"
2. <script></script> ํ๊ทธ์ ์์ฑ
- ์น ํ์ด์ง ๋ด ์ฌ๋ฌ๋ฒ ์ฝ์ ํ ์ ์๋ค.
ex)
<script>
function over(obj) { obj.src="media/banana.png"; }
function out(obj) { obj.src="media/apple.png"; }
</script>
3. ๋ณ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์ฑ
- ์ฝ๋๋ฅผ ์ค๋ณตํด์ ์์ฑํ์ง ์์๋ ๋๋ค.
ex)
<script src=“ํ์ผ์ด๋ฆ.js”>
// html5 ๋ถํฐ ์ฝ๋ ์ถ๊ฐ ์์ฑx
</script>
4. URL ๋ถ๋ถ์ ์์ฑ
์๋ฐ์คํฌ๋ฆฝํธ๋ก HTML ์ฝํ ์ธ ์ถ๋ ฅ
1. document.write()
- ๋ธ๋ผ์ฐ์ ์๋์ฐ์ ๋ฐ๋ก ์ถ๋ ฅ
ex)
document.write("hello world");
2. document.writeln()
- ๋น์นธ ์ถ๋ ฅ (๊ฐํ ๋ฌธ์ X)
์๋ฐ์คํฌ๋ฆฝํธ ๋ค์ด์ผ๋ก๊ทธ
1. ํ๋กฌํํธ ๋ค์ด์ผ๋ก๊ทธ
- ์ฌ์ฉ์๋ก๋ถํฐ ๋ฌธ์์ด์ ์ ๋ ฅ๋ฐ์ ๋ฆฌํด(๋ฌด์กฐ๊ฑด ๋ฌธ์์ด๋ก ๋ฐ์)
2. ํ์ธ ๋ค์ด์ผ๋ก๊ทธ
- ๋ฉ์ธ์ง๋ฅผ ์ถ๋ ฅํ๊ณ ํ์ธ ์ทจ์(true/false)๊ฐ ์๋ ๋ค์ด์ผ๋ก๊ทธ ์ถ๋ ฅ
3. ๊ฒฝ๊ณ ๋ค์ด์ผ๋ก๊ทธ
- ๋ฉ์ธ์ง์ ํ์ธ๋ฒํผ์ด ์๋ ๋ค์ด์ผ๋ก๊ทธ ์ถ๋ ฅ
์๋ฐ ์คํฌ๋ฆฝํธ ๋ณ์ ์ข ๋ฅ
- ์๋ฐ ์คํฌ๋ฆฝํธ์๋ ๋ณ์ ํ์ ์ด ์์
- ๋ณ์์ ์ ์ฅ๋๋ ๊ฐ์ ๋ํ ์ ์ฝ์ด ์์
1. var - ๋ณ์ ์ค๋ณต ์ ์ธ์ด ๊ฐ๋ฅํ๋ค. (๋ฌธ์ ์ )2. let - ๋ณ์ ์ค๋ณต ์ ์ธ์ด ๋ถ๊ฐ๋ฅํ๋ค. (var์ ๋ฌธ์ ์ ๋ณด์)3. const - ํ๋ฒ ์ ํด์ง ์์๋ ๋ณ๊ฒฝํ ์ ์๋ค.
๋ณ์์ ์ฌ์ฉ ๋ฒ์(scope)์ ์๋ช (life)
๋ณ์ ์ข ๋ฅ | ์ ์ธ |
์ ์ญ ๋ณ์ | ํจ์ ๋ฐ์์ ์ ์ธ ํน์ var/let ํค์๋ ์์ด ์๋ฌด ๊ณณ์์๋ ์ ์ธ |
์ง์ญ ๋ณ์ | ํจ์ ๋ด์ let์ผ๋ก ์ ์ธ |
๋ธ๋ก ๋ณ์ | let์ผ๋ก if, while, for ๋ฑ ๋ธ๋ก ๋ด์ ์ ์ธ |
*var๋ ํจ์ ์ธ๋ถ์์ ์ ์ธํ๋ ์ ์ญ ๋ณ์๊ฐ ๋๋ค.* ์ ์ญ๋ณ์์ ์ง์ญ๋ณ์์ ์ด๋ฆ์ด ๊ฐ์ ๋ ์ ์ญ๋ณ์์ ์ ๊ทผํ๊ณ ์ถ๋ค๋ฉด , this ํค์๋๋ฅผ ์ฌ์ฉํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด
- ์ฌ๋ฌ๊ฐ์ ํ๋กํผํฐ์ ๋ฉ์๋๋ก ๊ตฌ์ฑ๋์๋ค.
ํ๋กํผํฐ : ๊ฐ์ฒด์ ๊ณ ์ ํ ์์ฑ(๋ณ์)
๋ฉ์๋ : ํจ์
๊ฐ์ฒด์ ์ข ๋ฅ
1. ์ฝ์ด ๊ฐ์ฒด
- ๊ธฐ๋ณธ ๊ฐ์ฒด๋ก ํ์ค ๊ฐ์ฒด
- ์ด๋์๋ ์ฌ์ฉ ๊ฐ๋ฅ
2. HTML DOM ๊ฐ์ฒด
- HTML ํ๊ทธ๋ค์ ๊ฐ์ฒดํ ํจ์ผ๋ก์จ ๋ฌธ์์ ๋ด์ฉ๊ณผ ๋ชจ์์ ์ ์ดํ ์ ์๋ค.
3. ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด
- ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ์ดํ๋ค.
์ฌ์ฉ์ ๊ฐ์ฒด ๋ง๋ค๊ธฐ
1. ์ง์ ๊ฐ์ฒด ๋ง๋ค๊ธฐ
1-1. new Object();
let account = new Object();
account.owner = "ํฉ๊ธฐํ"; // ๊ณ์ข ์ฃผ์ธ ํ๋กํผํฐ ์์ฑ ๋ฐ ์ด๊ธฐํ
account.code = "111"; // ์ฝ๋ ํ๋กํผํฐ ์์ฑ ๋ฐ ์ด๊ธฐํ
account.balance = 35000; // ์์ก ํ๋กํผํฐ ์์ฑ ๋ฐ ์ด๊ธฐํ
account.inquiry = inquiry; // ๋ฉ์๋ ์์ฑ
account.deposit = deposit; // ๋ฉ์๋ ์์ฑ
account.withdraw = withdraw; // ๋ฉ์๋ ์์ฑ
1-2. ๋ฆฌํฐ๋ด ํ๊ธฐ๋ฒ - ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ค.
let account = {
// ํ๋กํผํฐ ์์ฑ ๋ฐ ์ด๊ธฐํ
owner : "ํฉ๊ธฐํ", // ๊ณ์ข ์ฃผ์ธ ํ๋กํผํฐ ์ถ๊ฐ
code : "111", // ๊ณ์ข ์ฝ๋ ํ๋กํผํฐ ์ถ๊ฐ
balance : 35000, // ์์ก ํ๋กํผํฐ ์ถ๊ฐ
// ๋ฉ์๋ ์์ฑ
inquiry : function () { return this.balance; }, // ์๊ธ ์กฐํ
deposit : function(money) { this.balance += money; }, // ์ ๊ธ. money ๋งํผ ์ ๊ธ
withdraw : function (money) { // ์๊ธ ์ธ์ถ, money๋ ์ธ์ถํ๊ณ ์ ํ๋ ์ก์
// money๊ฐ balance๋ณด๋ค ์๋ค๊ณ ๊ฐ์
this.balance -= money;
return money;
}
};
2. ํ๋กํ ํ์ ์ ๋ง๋ค๊ณ ๊ฐ์ฒด ์์ฑ
- ํ๋กํ ํ์ : ๊ฐ์ฒด ๋ชจ์์ ๊ฐ์ง ํ
function Student(name, score) {
this.univ = "ํ๊ตญ๋ํ"; // this.univ์ ์ด์ฉํ์ฌ univ ํ๋กํผํฐ ์์ฑ
this.name = name; // this.name์ ์ด์ฉํ์ฌ name ํ๋กํผํฐ ์์ฑ
this.score = score; // this.score๋ฅผ ์ด์ฉํ์ฌ score ํ๋กํผํฐ ์์ฑ
this.getGrade = function () { // getGrade() ๋ฉ์๋ ์์ฑ
if(this.score > 80) return "A";
else if(this.score > 60) return "B";
else return "F";
}
}
let kitae = new Student("ํฉ๊ธฐํ", 75); // Student ๊ฐ์ฒด ์์ฑ
let jaemoon = new Student("์ด์ฌ๋ฌธ", 93); // Student ๊ฐ์ฒด ์์ฑ
document.write(kitae.univ + ", " + kitae.name + "์ ํ์ ์ " + kitae.getGrade() + "<br>");
document.write(jaemoon.univ + ", " + jaemoon.name + "์ ํ์ ์ " + jaemoon.getGrade() + "<br>")