ex15
JavaScript๋ก HTML์ ์์ฑ ์ ์ดํ๊ธฐ
1. HTML ํ๊ทธ์ ๋๋ถ๋ถ์ ์์ฑ์ JavaScript์ ํ๋กํผํฐ๋ก ์ ๊ณต๋๋ค.
- HTML: <input type="text" size="10">
- JavaScript: txt1.size
2. HTML ํ๊ทธ์ ์์ฑ๋ช
๊ทธ๋๋ก JavaScript ํ๋กํผํฐ๋ช
์ผ๋ก ์ฌ์ฉ๋๋ค.
3. ๋๋ถ๋ถ ์ฝ๊ธฐ/์ฐ๊ธฐ ๋ชจ๋ ์ง์ํ๋ค. ์ผ๋ถ ์ฐ๊ธฐ or ์ฝ๊ธฐ ์ ์ฉ์ด ์๋ค.
4. ํ๊ทธ์ ์๋ณ์ ํน์ ๊ทผ๋ณธ์ ์ธ ์์ฑ์ ์กฐ์ํ์ง ๋ง๊ฒ!!
5. ํ๋๊ทธ ํ์
์ ์์ฑ์ boolean์ผ๋ก ์กฐ์ํ๋ค.
6. HTML ์์ฑ๋ช
์ด ๋ณตํฉ์ด๋ฉด ์บ๋ฉ ํ๊ธฐ๋ฒ์ผ๋ก ์์ฑํ๋ค.
-readonly(X) > readOnly
7. HTML ์์ฑ๊ฐ์ด ์ด๊ฑฐํ or ์์๋ช
์ด๋ฉด ๋ฌธ์์ด๋ก ์์ฑํ๋ค.
<body>
<!-- ex15_attribute.html -->
<h1>JavaScript๋ก HTML ํ๊ทธ์ ์์ฑ์ ์ ์ดํ๊ธฐ</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="ํ์ธ" name="btn1">
<hr>
<input type="button" value="๋๊ธฐ" name="btn2">
</form>
<script>
var txt1 = window.document.form1.txt1;
var btn1 = window.document.form1.btn1;
var btn2 = window.document.form1.btn2;
btn1.onclick = m1;
btn2.onclick = m2;
function m2() {
//window.document.body.bgColor = 'black';
// alert(window.document.body.bgColor);
//ํ๋์ ๋ฒํผ(์ค์์น) > On/Off > ํ ๊ธ ๋ฒํผ(Toggle Button)
// if (window.document.body.bgColor != 'black') {
if (btn2.value == '๋๊ธฐ') {
window.document.body.bgColor = 'black';
btn2.value = "์ผ๊ธฐ";
} else {
window.document.body.bgColor = 'white';
btn2.value = "๋๊ธฐ";
}
}
function m1() {
/*
JavaScript๋ก HTML์ ์์ฑ ์ ์ดํ๊ธฐ
*/
//<input type="text" size="10" value="" readonly>
// txt1.size = 100;
// txt1.value = 'ํ๊ธธ๋'; //์ฐ๊ธฐ
// alert(txt1.value); //์ฝ๊ธฐ
// type, ์๋ณ์ ์กฐ์ ๊ฐ๋ฅ BUT ํ์ง๋ง๊ฒ
// txt1.type = 'radio';
// txt1.name = 'txt3';
// txt1.readOnly = true;
// window.document.body.bgColor = 'gold';
}//btn1.onclick
</script>
</body>
</html>
ํ๋ฉด
JavaScript๋ก HTML ํ๊ทธ์ ์์ฑ์ ์ ์ดํ๊ธฐ
ex16
์ฌ์ง ์ฐพ๊ธฐ
1. all > ํ์ด์ง ๋ด์ ๋ชจ๋ ์์ ์ฐพ์์ค
2. ์ธ๋ฑ์ค ์ด์ฉ(์ ์์)
3. ํค(name) ์ด์ฉ
<body>
<!-- ex16_images.html -->
<img src="images/catty01.png" name="cat1">
<img src="images/catty02.png" name="cat2">
<img src="images/catty03.png" name="cat3">
<script>
// all > ํ์ด์ง ๋ด์ ๋ชจ๋ ์์ ์ฐพ์์ค(๋นํ์ค)
// window.document.all.txt1
// window.document.all.btn1
window.document.all.cat1.width = 300;
window.document.all.cat2.height = 64;
//์ธ๋ฑ์ค ๋๋ ํค(name)์ผ๋ก ์ฐพ๊ธฐ (ํ์ค)
// window.document.images[2].width = 300; //์ ์์
window.document.images['cat3'].width = 300;
</script>
</body>
</html>
ex16
์ด๋ฏธ์ง ์ฐพ๊ธฐ
-all > ํ์ด์ง ๋ด์ ๋ชจ๋ ์์ ์ฐพ์์ค(๋นํ์ค)
// window.document.all.txt1
// window.document.all.btn1
- ์ธ๋ฑ์ค ๋๋ ํค(name)์ผ๋ก ์ฐพ๊ธฐ (ํ์ค)
// window.document.images[2].width = 300; //์ ์์
<body>
<img src="images/catty01.png" name="cat1">
<img src="images/catty02.png" name="cat2">
<img src="images/catty03.png" name="cat3">
<script>
// all > ํ์ด์ง ๋ด์ ๋ชจ๋ ์์ ์ฐพ์์ค(๋นํ์ค)
// window.document.all.txt1
// window.document.all.btn1
window.document.all.cat1.width = 300;
window.document.all.cat2.height = 64;
//์ธ๋ฑ์ค ๋๋ ํค(name)์ผ๋ก ์ฐพ๊ธฐ (ํ์ค)
// window.document.images[2].width = 300; //์ ์์
window.document.images['cat3'].width = 300;
</script>
</body>
'ํ๋ก๊ทธ๋๋ฐ ๊ณต๋ถ > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ex18~22] screen, location, history, collection, link (0) | 2023.04.25 |
---|---|
[ex17] window (0) | 2023.04.24 |
[ex13~14] Mouse Event, Key Event (0) | 2023.04.21 |
[ex11~] BOM, event (0) | 2023.04.21 |
[ex09~10] Date, Array (0) | 2023.04.21 |