๐ JavaScript
๐ฅ๏ธ ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด
๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋ ๊ฐ์ฒด๋ฅผ '๋ธ๋ผ์ฐ์ ๊ฐ์ฒด'๋ผ๊ณ ํฉ๋๋ค. window๋ ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด์ ์ต์์ ๊ฐ์ฒด์ด๊ณ , window ๊ฐ์ฒด์๋ ํ์ ๊ฐ์ฒด๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. ์ฆ, ๊ณ์ธต์ ๊ตฌ์กฐ๋ก ์ด๋ฃจ์ด์ ธ ์์ผ๋ฉฐ ์ด๊ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(BOM, Browser Object Model)์ด๋ผ๊ณ ํฉ๋๋ค.
โ
โ window ๊ฐ์ฒด์ ๋ฉ์๋ ํ๋์ ๋ณด๊ธฐ
โ
|
์ข
๋ฅ
|
๊ธฐ๋ฅ
|
| open("URL", "์ ์ฐฝ ์ด๋ฆ", "์ ์ฐฝ ์ต์ ") | URL ํ์ด์ง๋ฅผ ์ ์ฐฝ์ผ๋ก ๋ํ๋ด๊ธฐ |
| alert(data) | ๊ฒฝ๊ณ ์ฐฝ์ ๋ํ๋ด๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ฌ์ฉ์๊ฐ [ํ์ธ] ๋๋ฅด๋ฉด alert() ์ฌ์ฉํ ๋ค์ ์์น ์ฝ๋ ์ํ |
| prompt("์ง๋ฌธ", "๋ต๋ณ") | ์ง๋ฌธ๊ณผ ๋ต๋ณ์ผ๋ก ์ง์์๋ต ์ฐฝ์ ๋ํ๋ด๊ธฐ |
| confirm("์ง๋ฌธ ๋ด์ฉ") | ์ง๋ฌธ์ผ๋ก ํ์ธ์ด๋ ์ทจ์ ์ฐฝ ๋์ฐ๊ธฐ [ํ์ธ] ๋ฒํผ ํด๋ฆญ์ true๋ฐํ, [์ทจ์] ํด๋ฆญ์ false ๋ฐํ |
| moveTo(x,y) | ์ง์ ํ ์ ์ฐฝ์ ์์น ์ด๋ |
| resizeTo(width, height) | ์ง์ ํ ์ ์ฐฝ์ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝ |
| setInterval(function() { ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ }, ์๊ฐ ๊ฐ๊ฒฉ) | ์ง์์ ์ผ๋ก ์ผ์ ํ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ํจ์๋ฅผ ํธ์ถํ์ฌ ์ฝ๋ ์คํ |
| setTimeout(function() { ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ }, ์๊ฐ ๊ฐ๊ฒฉ) | ๋จ ํ ๋ฒ ์ผ์ ํ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ํจ์๋ฅผ ํธ์ถํ์ฌ ์ฝ๋ ์คํ |
์ถ์ฒ: (์ด์ง์คํผ๋ธ๋ฆฌ์ฑ) ์๋ฐ์คํฌ๋ฆฝํธ + ์ ์ด์ฟผ๋ฆฌ ์ ๋ฌธ( p.113)
1-1. open()
ํ์ ์ฐฝ์ ๋์ฐ๋ ๋ฉ์๋ : open("URL", "์ ์ฐฝ ์ด๋ฆ", "์ ์ฐฝ ์ต์ ")
open() ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ์ง์ ํ URL ํ์ด์ง๋ฅผ ์ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ๋ํ๋ผ ์ ์๋ค. ์์ ์๋ ์ด ๋ฉ์๋๋ก ๊ด๊ณ ์ ์์ฃผ ์ฌ์ฉ๋๋ ํ์ ์ฐฝ์ ๋ง๋ค๊ธฐ๋ ํ๋ค. ํ์ง๋ง ์ต๊ทผ์๋ ์ฌ์ฉ์๊ฐ ํ์ ์ฐฝ์ ์ฐจ๋จํ ์ ์๊ธฐ ๋๋ฌธ์ ํ์ ์ฐฝ์ ํ์ฉํ ๊ด๊ณ ํจ๊ณผ๊ฐ ๋ง์ด ๋จ์ด์ ธ์ ๊ฑฐ์ ์ฌ์ฉ๋์ง ์๋๋ค.
*์์ฐฝ ์ต์
- width: ์ ์ฐฝ์ ๋๋น
- height: ์ ์ฐฝ์ ๋์ด
- left : ์ ์ฐฝ์ ์ํ(X์ถ) ์์น
- top : ์ ์ฐฝ์ ์์ง(Y์ถ) ์์น
- scrollbars: ์คํฌ๋กค๋ฐ์ ์จ๊น/๋ ธ์ถ(์จ๊น=no, ๋ ธ์ถ=yes)- location: ์ ์ฐฝ์ URL ์ฃผ์ ์ ๋ ฅ ์์ญ ์จ๊น/๋ ธ์ถ- status: ์์ฐฝ์ ์ํํ์์ค ์จ๊น/๋ ธ์ถ - toolbars: ์ ์ฐฝ์ ๋๊ตฌ ์์ ์์ญ ์จ๊น/๋ ธ์ถ
window.open("http://www.easyspub.com/", "easyspub", "width=350, height=400, left=50, top=10, scrollbars=no");
1-2. alert()
์ง์ ์๋ต ์ฐฝ์ ๋์ฐ๋ ๋ฉ์๋ : prompt("์ง์ ๋ด์ฉ", "๊ธฐ๋ณธ ๋ต๋ณ")
prompt("๋น์ ์ ์ฐ๋ น์?", "0");
1-3. confirm()
ํ์ธ/์ทจ์์ฐฝ์ ๋ํ๋ด๋ ๋ฉ์๋ : confirm("์ง์ ๋ด์ฉ" )
confirm("์ ๋ง๋ก ์ญ์ ํ์๊ฒ ์ต๋๊น?");
1-4. setInterval() / clearInterval()
์ผ์ ํ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ์ฝ๋๋ฅผ ๋ฐ๋ณต ์คํํ๋ ๋ฉ์๋ : setInterval()
setInterval()๋ฉ์๋๋ฅผ ์ทจ์ํ๋ ๋ฉ์๋ :clearInterval()
* setInterval()๊ณผ setTimeout()์ ์ฐจ์ด
์ผ๋จ setInterval()์ ๊ฒฝ์ฐ ์ผ์ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ์ฝ๋๋ฅผ ๋ฐ๋ณต ์คํํ๋ค๋ฉด, setTimeout() ๋ฉ์๋๋ ์ค์ ํ ์๊ฐ ํ์ ์ฝ๋๋ฅผ ํ ๋ฒ๋ง ์คํํ๊ณ ์ข ๋ฃํ๋ ์ฐจ์ด์ ์ด ์๋ค.
setInterval() ๋ฉ์๋์ ์๊ฐ ๊ฐ๊ฒฉ์ 1/1,000์ด ๋จ์(ms)๋ก ์์ฑ. ๋ง์ฝ 3์ด ๊ฐ๊ฒฉ์ผ๋ก ์คํํ๋ ค๋ฉด 3,000์ผ๋ก ์ค์ ํด์ผ ํจ(3,000 * 1/1000). clearnInterval() ๋ฉ์๋์๋ ์ฐธ์กฐ ๋ณ์๊ฐ ์ฌ์ฉ๋๋ค.
๊ธฐ๋ณธํ
1. var ์ฐธ์กฐ๋ณ์ = setInterval(function() { ์ฝ๋ }, ์๊ฐ๊ฐ๊ฒฉ(ms));
2. var ์ฐธ์กฐ๋ณ์ = setInterval("์ฝ๋", ์๊ฐ๊ฐ๊ฒฉ(ms));
3์ด(3,000) ๊ฐ๊ฒฉ์ผ๋ก ๋ณ์ i๊ฐ์ 1์ฉ ์ฆ๊ฐ์ํค๋ ์ฝ๋โผ
var intv = setInterval(function() { i++; }, 3000);
var intv = setInterval(" i++ ", 3000);clearInterval(intv) //์ฐธ์กฐ๋ณ์
3์ด(3,000) ๊ฐ๊ฒฉ์ผ๋ก ๋ณ์ i๊ฐ์ 1์ฉ ์ฆ๊ฐ/๊ฐ์์์ผ ์ฝ์ ์ฐฝ์ ์ถ๋ ฅํ๋ ์ฝ๋โผ
<body>
<script>
var addNum = 0;
var subNum = 1000;
var auto_1 = setInterval(function() {
addNum++;
console.log("addNum: " + addNum);
}, 3000);
var auto_2 = setInterval(function() {
subNum--;
console.log("subNum: " + subNum);
}, 3000);
</script>
<button onclick="clearInterval(auto_1)">์ฆ๊ฐ ์ ์ง</button>
<button onclick="clearInterval(auto_2)">๊ฐ์ ์ ์ง</button>
</body>
1-5. setTimeout() / clearTimeout()
setTimeout() : ์ผ์ ์๊ฐ์ด ์ง๋๋ฉด ์ฝ๋๋ฅผ ์คํํ๊ณ ์ข ๋ฃํ๋ ๋ฉ์๋
setTimeout() : setTimeout() ๋ฉ์๋๋ฅผ ์ ๊ฑฐํ๋ ๋ฉ์๋
setTimeout() ๋ฉ์๋๋ฅผ ์กฐ๊ธ๋ง ์์ฉํ์ฌ ์ฌ๊ท ํธ์ถํ๋ฉด setInterval() ๋ฉ์๋์ฒ๋ผ ์ฌ์ฉ ํ ์๋ ์๋ค.
๊ธฐ๋ณธํ
1. var ์ฐธ์กฐ๋ณ์ = setTimeout(function() { ์ฝ๋ }, ์๊ฐ๊ฐ๊ฒฉ(msc));
2. var ์ฐธ์กฐ๋ณ์ = setTimeout("์ฝ๋", ์๊ฐ๊ฐ๊ฒฉ(msc));
5์ด(3,000) ๊ฐ๊ฒฉ์ผ๋ก ๋ณ์ i๊ฐ์ 1์ฉ ์ฆ๊ฐ์ํค๋ ์ฝ๋โผ
var tim = setTimeout(function() { i++; }, 5000);
var tim = setTimeout(" i++ ", 5000);clearTimeout(tim) // ์ฐธ์กฐ ๋ณ์
5์ด(5,000) ๊ฐ๊ฒฉ์ผ๋ก ๋จ ํ ๋ฒ ์คํ๋์ด ๋ณ์ i์ ๊ฐ์ 1๋งํผ ์ฆ๊ฐ์ํจ ํ ์ฝ์ ํจ๋์ i ๊ฐ์ ์ถ๋ ฅํ๋ ์ฝ๋ โผ
<script>
var addNum = 0;
var auto = setTimeout(function() {
addNum++;
console.log(addNum);
}, 5000);
</script>
