๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/JavaScript

[ex15~16] Attribute, images

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>

 

ํ™”๋ฉด

๋”๋ณด๊ธฐ
Document

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