JAVASCRIPT STEP 14 - 응용 예제 — Developer Story House

728x90

★ 문제 1

아래와 같은 문서를 생성하시오.
버튼을 클릭해서 텍스트 박스의 길이를 변경하시오.
Long > size(50)
Short > size(20)

■ 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            font-weight: bold;
            color : gray;
        }

        #name1, #name2, #name3 {
            margin-bottom: 10px;
        }

    </style>
</head>
<body>

    <h1>데이터 입력</h1>

    <form name="form1">
        이름 : <input type="text" id="name1"><br>
        나이 : <input type="text" id="name2"><br>
        별명 : <input type="text" id="name3"><br>

        <input type="button" id="btn1" value="Long">
        <input type="button" id="btn2" value="Short">
    </form>

    

    <script>

        window.document.form1.btn1.onclick = m1;
        window.document.form1.btn2.onclick = m2;

        function m1() {
            window.document.form1.name1.size = 50;
            window.document.form1.name2.size = 50;
            window.document.form1.name3.size = 50;
        }

        function m2() {
            window.document.form1.name1.size = 20;
            window.document.form1.name2.size = 20;
            window.document.form1.name3.size = 20;
        }

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

■ 실행결과

★ 문제 2

아래와 같은 문서를 생성하시오.
아이디 유효성 검사를 하시오.
길이 > 4~12자 이내
onkeyup

■ 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            font-weight: bold;
            color : gray;
            text-align: center;
        }
        #name1, #name2, p {
           margin-left: 41%;
           margin-bottom : 1px;
        }

        #name2 {
            border : 0px;
            color : red;
        }

    </style>
</head>
<body>
    <h1> 회원 가입</h1>
    
    <form name="form1">
        <p>아이디 :</p>
         <input type="text" id="name1"><br>
        <input type="text" id="name2" value="">
    </form>

    <script>

        var txt1 = window.document.form1.name1;
        var txt2 = window.document.form1.name2;

        txt1.onkeyup = m1;

        function m1() {
            var txt1var = window.document.form1.name1.value.length;

            if(txt1var < 4){
            txt2.value='아이디가 너무 짧습니다.';
            }else if(txt1var >12) {
                txt2.value='아이디가 너무 깁니다.';
            }else {
                txt2.value='올바른 아이디입니다.';
            }
        }

        
        

    </script>

</body>
</html>

■ 실행 결과

★ 문제 3

아래와 같은 문서를 생성하시오.
마우스를 올리면 고양이 크기를 키우시오.
고양이를 클릭하면 크기를 원래대로 줄이시오.
숫자(1~5)를 누르면 고양이 크기를 키우시오.
esc 키를 누르면 크기를 원래대로 줄이시오.

■ 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            font-weight: bold;
            color : gray;
            font-size : 50px;
        }


    </style>
</head>
<body>

    <h1>고양이</h1>
    <form name="form1">
        <img src="images/catty01.png" id="cat1">
        <img src="images/catty02.png" id="cat2">
        <img src="images/catty03.png" id="cat3">
        <img src="images/catty04.png" id="cat4">
        <img src="images/catty05.png" id="cat5">
    </form>
    
    <script>

    window.onload = function() {

        document.images["cat1"].onmouseover = function() {
            document.images["cat1"].width += 5;
        };
        document.images["cat2"].onmouseover = function() {
            document.images["cat2"].width += 5;
        };
        document.images["cat3"].onmouseover = function() {
            document.images["cat3"].width += 5;
        };
        document.images["cat4"].onmouseover = function() {
            document.images["cat4"].width += 5;
        };
        document.images["cat5"].onmouseover = function() {
            document.images["cat5"].width += 5;
        };

        document.images["cat1"].onclick = function() {
                document.images["cat1"].width = 128;
        };
        document.images["cat2"].onclick = function() {
                document.images["cat2"].width = 128;
        };
        document.images["cat3"].onclick = function() {
                document.images["cat3"].width = 128;
        };
        document.images["cat4"].onclick = function() {
                document.images["cat4"].width = 128;
        };
        document.images["cat5"].onclick = function() {
                document.images["cat5"].width = 128;
        };

        document.onkeydown = 
        function(evt) {
            if(evt.keyCode==49){
                document.images["cat1"].width += 5;
            }else if(evt.keyCode==50){
                document.images["cat2"].width += 5;
            }else if(evt.keyCode==51){
                document.images["cat3"].width += 5;
            }else if(evt.keyCode==52){
                document.images["cat4"].width += 5;
            }else if(evt.keyCode==53){
                document.images["cat5"].width += 5;
            }else if(evt.keyCode==27){
                document.images["cat1"].width = 128;
                document.images["cat2"].width = 128;
                document.images["cat3"].width = 128;
                document.images["cat4"].width = 128;
                document.images["cat5"].width = 128;
            }
        }
    }

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

■ 실행결과

728x90

저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 16 - ARRAY (0)	2023.04.24
JAVASCRIPT STEP 15 - Window (0)	2023.04.24
JAVASCRIPT STEP 13 - Attribute (0)	2023.04.21
JAVASCRIPT STEP 12 - KeyEvent (0)	2023.04.21
JAVASCRIPT SETP 11 - MouseEvent (0)	2023.04.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

JAVASCRIPT STEP 14 - 응용 예제

'웹페이지' 카테고리의 다른 글

'웹페이지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역