[ex24~25] 롤오버 이미지, 메세지 박스

ex24

코드

<body>
    <!-- ex24_image.html -->

    <h1>이미지</h1>

    <input type="button" value="확인" name="btn1">
    <hr>

    <img src="images/cat01.jpg" name="cat1">
    <hr>

    <img src="images/cat01.jpg" name="cat2">
    <hr>

    <img src="images/switch_on.png" name="sw1">
    <hr>

    <img src="images/circle_icon01.png" name="icon">
    <hr>

    <img src="images/dog01.jpg" name="viewer">
    <hr>

    <img src="images/0.png" name="number">


    <script>

        document.all.btn1.onclick = m1;

        function m1() {
            var cat1 = document.images['cat1'];

            // cat1.width = 500;

            cat1.src = 'images/cat02.jpg';
        } //m1

        var cat2 = document.images['cat2'];

        //롤오버 이미지
        cat2.onmouseover = m2;
        cat2.onmouseout = m3;

        function m2() {
            cat2.src = 'images/cat02.jpg';
        }

        function m3() {
            cat2.src = 'images/cat01.jpg';
        }



        //name, id 식별자 > 직접 접근

        //Toggle Button
        document.images['sw1'].onclick = m4;

        function m4() {

            if (document.images['sw1'].src.endsWith('on.png')) {
                document.images['sw1'].src = 'images/switch_off.png';
                document.body.bgColor = 'black';
            } else {
                document.images['sw1'].src = 'images/switch_on.png';
                document.body.bgColor = 'white';
            }

        }

        var icon = document.images['icon'];
        var n = 1;

        icon.onclick = m5;
        // document.body.onmousemove = m5;

        function m5() {
            n++;

            if (n > 18) {
                n = 1;
            }

            icon.src = 'images/circle_icon' + addZero(n) + '.png';
        }

        // 01 02 형식으로 변환
        function addZero(n) {
            if (n < 10) {
                return '0' + n;
            }
            return n;
        }




        //키이벤트 + 뷰어
        var viewer = document.images['viewer'];
        n = 1;

        //전역 이벤트(window에 거는 이벤트) > 화면상 모든곳에서 발생한다.
        window.onkeydown = m6; 

        function m6() {

            //좌(37), 우(39)
            if (event.keyCode == 37) {
                n--;
                if (n < 1) {
                    alert('처음 이미지입니다.');
                    n = 1;
                    return;
                }
            } else if (event.keyCode == 39) {
                n++;
                if (n > 5) {
                    alert('마지막 이미지입니다.');
                    n = 5;
                    return;
                }
            }

            viewer.src = 'images/dog0' + n + '.jpg';

        }


        var number = document.images['number'];

        // window.onkeydown = m6;
        window.onkeydown = m7;

        function m7() {

            //상단 숫자키(48) or 우측 숫자패드(96~105)
            // alert(event.keyCode);

            var no = event.keyCode - 48;
            //alert(no);

            number.src = 'images/' + no + '.png';

        }

    </script>
</body>
</html>

ex25

메세지 박스, 대화 상자(Dialog Box)
1. void alert(message); > 메세지 전달용 (확인 버튼만 있음)
2. boolean confirm(message); > (확인, 취소 버튼)
---------------------------------3번은 잘 안씀
3. string prompt(message, value); > 사용자 입력값 반환

코드

<body>
    <!-- ex25_message.html -->
    <form name="form1">
        <input type="button" name="btn1" value="버튼1">
        <input type="button" name="btn2" value="버튼2">
        <input type="button" name="btn3" value="버튼3">

    </form>

    <script>
        document.form1.btn1.onclick = m1;
        document.form1.btn2.onclick = m2;
        document.form1.btn3.onclick = m3;


        //메세지 박스, 대화 상자(Dialog Box)
        //1. void alert(message); > 메세지 전달용 (확인 버튼만 있음)
        //2. boolean confirm(message); > (확인, 취소 버튼)
        //---------------------------------3번은 잘 안씀
        //3. string prompt(message, value); > 사용자 입력값 반환

        function m1() {
            // alert();
            // alert(100);
            alert('문자열');
        }

        function m2() {
            if (confirm('정말 삭제하겠습니까?')) {
                document.body.bgColor = 'blue';
            } else {
                document.body.bgColor = 'white';
            }
        }

        function m3() {
            var input = prompt('메세지', '초깃값');
            console.log(input);
        }

    </script>
</body>

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

[ex27] form(유효성 검사) (0)	2023.04.26
[ex26] 요소(태그)의 이벤트 일괄처리 (0)	2023.04.26
[ex18~22] screen, location, history, collection, link (0)	2023.04.25
[ex17] window (0)	2023.04.24
[ex15~16] Attribute, images (0)	2023.04.21

🚀

[ex24~25] 롤오버 이미지, 메세지 박스

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

티스토리툴바

[ex24~25] 롤오버 이미지, 메세지 박스

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바