본문 바로가기
CS Study/Javascript

7. 이벤트 객체(2) - 문서, 이미지 로딩 / 폼 이벤트

Ryannn 2022. 4. 8. 13:34

1. 로딩되면 경고문 출력

<!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>
</head>
<body onload = "hello()">
    <h1>안녕!</h1>
    <script>
        function hello(){
            alert("Welcome you");
        }
    </script>
</body>
</html>

2. 이미지 로딩 후 크기 출력

<!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>
</head>
<body onload = "changeImage()">
    <h1>onload로 이미지 크기 출력</h1>
    <hr>
    <select id = "sel" onchange = "changeImage()">
        <option value = "banana.png">바나나</option>
        <option value = "apple.png">사과</option>
        <option value = "mango.png">망고</option>
    </select>
    <span id = "span">이미지 크기</span>
    <img id = "img" src = "apple.png"></img>
    <script>
        function changeImage(){
            let selection = document.getElementById("sel");
            let newImage = document.getElementById("img");
            newImage.onload = function(){
                let mySpan = document.getElementById("span");
                mySpan.innerHTML = newImage.width + "x" + newImage.height;
            }
            let index = selection.selectedIndex;
            img.src = selection.options[index].value;
            
        }
    </script>
    
</body>
</html>

3. new Image()로 이미지 로딩

<!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>
        p{
            display : block;
        }
    </style>
</head>
<body>
    <h1>new Image()로 이미지 로딩</h1>
    <hr>
    <p>이미지를 클릭하면 다음 이미지를 보여줍니다.</p>
    <img id = "image" src = "Koala.png" onclick = "changeImage()" width = "200" height = "200">
    <script>
        let imageArray = ["Koala.png","Penguins.png","Hydrangeas.png","Jellyfish.png",
        "Chrysanthemum.png", "Desert.png","Tulips.png", "Lighthouse.png"];
        let i=0;
        function changeImage(){
            let img = document.getElementById("image");
            img.src = imageArray[i];
            i++;
            if(i>=8){
                i=0;
            }
        }
    </script>
</body>
</html>

4. 이름 입력 후 다음 폼으로 이동 가능한 폼 만들기 - onblur, onfocus 활용

<!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>
</head>
<body onload = "document.getElementById('name').focus()">
    <h1>onfocus와 onblur</h1>
    <hr>
    <p>이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.</p>
    이름<textarea id = "name" onblur = "nomove(this)"></textarea><br>
    학번<textarea id = "number"></textarea>
    <script>
        function nomove(obj){
            if(obj.value == ""){
                obj.focus();
            }
        }
    </script>
</body>
</html>

5. 클릭되면 라디오 버튼의 value 출력 - checked 프로퍼티 활용

<!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>
</head>
<body>
    <h1>버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h1>
    <hr>
    <form>
        <input type = "radio" name = "city" value = "서울">서울
        <input type = "radio" name = "city" value = "부산">부산
        <input type = "radio" name = "city" value = "춘천">춘천
        <input type = "button" value = "find checked" onclick = "whichSelect()">
    </form>
    <script>
        function whichSelect(){
            let cityArray = document.getElementsByName("city");
            let selectedCity =null;
            for(let i=0;i<3;i++){
                if(cityArray[i].checked == true){
                    selectedCity = cityArray[i].value;
                }
            }
            if(selectedCity != null){
                alert(selectedCity + "이 선택되었음");
            }
            else{
                alert("선택된 도시 없음");
            }
        }
    </script>
</body>
</html>

6. 자동 물품 계산기 - checked 프로퍼티 활용

<!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>
</head>
<body>
    <h1>물품을 선택하면 금액이 자동 계산됩니다.</h1>
    <hr>
    <form>
        <input type = "checkbox" value = "10000" onclick= "calculator(this)">모자 1만원
        <input type = "checkbox" value = "30000" onclick= "calculator(this)">구두 3만원
        <input type = "checkbox" value = "80000" onclick= "calculator(this)">명품가방 1만원<br>
        지불하실 금액 <input id = "pay" type = "text" value = "0">
    </form>
    <script>
        let sum = 0;
        let payment = document.getElementById("pay");
        function calculator(obj){
            if(obj.checked == true){
                sum+=parseInt(obj.value);
            }
            else{
                sum-=parseInt(obj.value);
            }
            payment.value = "총 " + sum;
        }
    </script>
</body>
</html>

7. select 객체에서 선택한 과일 출력 - selectedIndex 활용

<!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>
        p{
            display : inline-block;
        }
    </style>
</head>
<body>
    <h1>select 객체에서 선택한 과일 출력</h1>
    <hr>
    <p>과일을 선택하면 이미지가 출력됩니다.</p>
    <form>
        <select onchange = "changeFruit(this)">
            <option selected>딸기</option>
            <option>바나나</option>
            <option>사과</option>
        </select>
        <img id = "image" src = "strawberry.png"></img>
    </form>
    <script>
        function changeFruit(selection){
            let index = selection.selectedIndex;
            let image = document.getElementById("image");
            switch(index){
                case 0:
                    image.src = "strawberry.png"
                    break;
                case 1:
                     image.src = "banana.png"
                    break;
                case 2:
                    image.src = "apple.png"
                    break;
            }
        }
    </script>
</body>
</html>

8. 키 리스너와 키 이벤트 객체의 프로퍼티

<!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>
</head>
<body>
    <h1>키 리스너와 키 이벤트 객체의 프로퍼티</h1>
    <hr>
    <p>텍스트 창에 키를 눌러보세요. Alt, Shift, Ctrl 키도 가능합니다.</p>
    <input id = "key" type = "text" value = "" onkeydown = "whichKey(event)">
    <div id = "div"></div>
    <script>
        function whichKey(e){
            div.innerHTML = "e.key = " + e.key + "<br>" + "e.code = " + e.code;
        }
    </script>
</body>
</html>

 

저작자표시

'CS Study > Javascript' 카테고리의 다른 글

9. Window 객체 (2)  (0) 2022.04.08
8. Window 객체  (0) 2022.04.08
6. 이벤트 객체 (1) - 마우스 핸들링  (0) 2022.04.08
5. DOM / document 객체  (0) 2022.04.08
4. 배열과 객체  (0) 2022.04.08

'CS Study/Javascript' Related Articles

티스토리툴바