국비 41일차 Javascript ( onload, onclick, onchange, onkeyup 활용)

2021. 3. 8. 18:14

20201.03.08 국비교육 41일차

[TOC]

onload

  • 프로그램 가동할때 호출할 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    function xxx(){
        var id = document.getElementById("userid");
        id.value="test";
    }

    function yyy(){
        var id = document.getElementById("username");
        id.value="test2";
    }
</script>
</head>
<body onload = "xxx(), yyy()"><!-- 온로드 사용 --> <!-- 여러개 사용하고싶으면 ,로 이어쓰기 -->
아이디<input type = "text" name = "userid" id="userid" value = "abc">
이름<input type = "text" name = "username" id="username" value = "abc">

</body>
</html>

오름차순, 내림차순

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    function mySort(param){
        console.log("instructor>>>>>", param);
        var str = document.getElementById("v1").value; // 문자열 가져오기
        var arr = str.split(",");
        if(param == "asc"){
            arr.sort(ascSort);
        }else{
            arr.sort(descSort);
        }
        var result = document.getElementById("result");
        result.value = arr;
    }

    function ascSort(a,b){
        return a-b;
    }

    function descSort(a,b){
        return b-a;
    }

</script>
</head>
<body>
입력값<input type="text" name = "v1" id="v1" value ="1,2,3,4,5,6,7"><br>
<button onclick="mySort('asc')">오름차순 정렬</button><br>
<button onclick="mySort('desc')">내림차순 정렬</button><br>
결과값<input type = "text" name = "arrResult" id="result">

</body>
</html>

이미지 전환

전, 후

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">


    var arr = ["a.jpg", "b.jpg", "c.jpg"];
    var i =0;

    function before(){
        var img = document.getElementById("flag");
        --i;
        if(i<=0){
            i = arr.length - 1;
        }
        img.src = "../image/" + arr[i];
    }

    function next(){
        var img = document.getElementById("flag");
        ++i;
        if(i>=arr.length){
            i=0;
        }
        img.src ="../image/" + arr[i];
    }

</script>
</head>
<body>
<img src = "../image/a.jpg" width = "200" height = "200" id="flag">
<button onclick = "before()">전</button>
<button onclick = "next()">후</button>

</body>
</html>

넘버링

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    var arr= ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg","f.jpg","g.jpg","h.jpg","i.jpg"];
    function change(param){
        var img = document.getElementsByTagName("img"); //태그이름으로 데이터 얻기 img // 3개
        var selectArr=""; // 9개 배열중 3개만선택
        if(param ==1){
            selectArr = arr.slice(0,3);
        }
        if(param ==2){
            selectArr = arr.slice(3,6);
        }
        if(param ==3){
            selectArr = arr.slice(6,9);
        }
        for(var x in img){
            img[x].src = "../image/" + selectArr[x];
        }
    }

</script>
</head>
<body>
<table>
    <tr>
        <td><img src= "../image/a.jpg" width = "100" height = "100"></td>
        <td><img src= "../image/b.jpg" width = "100" height = "100"></td>
        <td><img src= "../image/c.jpg" width = "100" height = "100"></td>
    </tr>
</table>
<a href = "javascript:change(1)">1</a>
<a href = "javascript:change(2)">2</a>
<a href = "javascript:change(3)">3</a>

</body>
</html>

Select // onchange

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function xxx(){
        var f= document.getElementById("fruits");
        console.log(f.value);
    }
</script>
</head>
<body>
<select id = "fruits" onchange = "xxx()">
    <option value = "사과">사과</option>
    <option value = "바나나">바나나</option>
    <option value = "수박">수박</option>
    <option value = "포도">포도</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function sum(){
        var price = document.getElementById("price").value;
        var quantity = document.getElementById("quantity").value;
        document.getElementById("totalPrice").value = parseInt(price) * parseInt(quantity);
    }
</script>

</head>
<body>
가격<input type = "text" name= "price" id= "price"><br>
수량
<select id = "quantity" onchange = "sum()">
    <option value = "10">10</option>
    <option value = "20">20</option>
    <option value = "30">30</option>
    <option value = "40">40</option>
</select>
<br>
총가격<input type = "text" name= "totalPrice" id= "totalPrice">
</body>
</html>

this

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function sum(param){ // 매개변수 받음 
        var price = document.getElementById("price").value;
        var quantity = param.value;
        console.log(param.value);
        var totalPrice = document.getElementById("totalPrice");  
        totalPrice.value = parseInt(price) * parseInt(quantity);
    }
</script>

</head>
<body>
가격<input type = "text" name= "price" id= "price"><br>
수량
<select id = "quantity" onchange = "sum(this)"> <!-- this : 현재 이벤트가 발생된 곳, this.value : undefined-->
    <option value = "10">10</option>
    <option value = "20">20</option>
    <option value = "30">30</option>
    <option value = "40">40</option>
</select>
<br>
총가격<input type = "text" name= "totalPrice" id= "totalPrice">
</body>
</html>

onkeyup, focus()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function xxx(){
        var ssn1 = document.getElementById("ssn1").value;
        if(ssn1.length == 6){
            document.getElementById("ssn2").focus(); /* 텍스트바 이동 */
        }
    }

</script>
</head>
<body>
주민번호 <input type = "text" id="ssn1" name = "ssnA" onkeyup = "xxx()">- <!-- onkeyup : 키보드가 눌렸다 떨어졌을때  // 한글자한글자 입력할때 발동됨-->
<input type = "text" id="ssn2" name = "ssnB">

</body>
</html>

checkbox // onclick // innerHTML // innerText

  • id 대신 name을 사용한 점이 포인트
    • id는 값을 한개밖에 가져오지 못하니 name이나 tag로 여러개 가져와야함
  • innerHTML과 innerText의 차이 숙지하기
  • Name과 ClassName인지하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function xxx(){
        //var arr = document.getElementsByName("fruits");
        var arr = document.getElementsByClassName("fruits");
        console.log(arr);
        var str = ""; // 화면에 뿌려질 항목을 누적
        for(var i =0; i<arr.length;i++){
            var c = arr[i];
            if(c.checked){ // 선택된 항목만 선별
                str += c.value + "<br>"; //선택된 항목의 값을 str에 누적
            }
        }
        document.getElementById("result1").innerHTML = "<h1>" + str + "</h1>";

        document.getElementById("result2").innerText = str; // 태그적용 안됨 

    }

</script>
</head>
<body>
좋아하는 과일 선택하기 <br><!-- 스페이스바로는 띄어쓰기 한칸만 적용됨 &nbsp; 사용하면 여러칸 가능  -->
사과<input type = "checkbox" class = "fruits" name = "fruits" value = "apple"><br> <!-- id로 설정하면 하나밖에 못얻어옴 -->
오렌지<input type = "checkbox" class = "fruits" name = "fruits" value = "orange"><br>
바나나<input type = "checkbox" class = "fruits" name = "fruits" value = "banana"><br>
<button onclick = "xxx()">결과보기</button>

<div id = "result1"></div> <!-- div, span 속성에 value 없음 -->
<div id = "result2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


</head>
<body>
    <p>hello</p>
    <div id = "X">
        <div id = "innerX">홍길동</div>
    </div>
    <a href = "daum.net">다음</a><br>
    <div id = "y"><h1>이순신</h1></div>

    <script type="text/javascript">

        var div = document.getElementById("X");
        console.log(div);
        var s1 = div.innerText;
        var s2 = div.innerHTML;

        console.log("innerText : ", s1); // 홍길동
        console.log("innerHTML : ", s2); //<div id = "innerX">홍길동</div>

        console.log(s1.length); //3
        console.log(s1.charAt(0)); //홍

        var html = document.getElementById("y").innerHTML;
        console.log(html);

    </script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

    <script type="text/javascript">
        function sum(param){
            var v1 = document.getElementById("v1").value;
            var v2 = document.getElementById("v2").value;
            var result = 0;
            switch(param){
            case "+" : result = Number.parseInt(v1) + Number.parseInt(v2); break;
            case "-" : result = Number.parseInt(v1) - Number.parseInt(v2); break;
            }
            var div = document.getElementById("result");
            div.innerText = result;
            //div.value = result; 작동안함
        }

    </script>

</head>
<body>

값1 : <input type = "text" name = "v1" id = "v1"><br>
값2 : <input type = "text" name = "v2" id = "v2"><br>
<a href = "javascript:sum('+')">+</a>
<a href = "javascript:sum('-')">-</a> <br>
결과값 :<div id = "result"></div>

</body>
</html>

'ETC > 국비교육' 카테고리의 다른 글

국비 44일차 Servlet (라이프사이클, thread unsafe, 응답처리, 요청처리, 파라미터 처리)  (0) 2021.03.12
국비 42일차 Javascript DOM level 0, DOM level 2 이벤트 처리  (0) 2021.03.09
국비 40일차 Javascript (객체 BOM DOM)  (0) 2021.03.05
국비 39일차 Javascript 함수 + 응용  (0) 2021.03.04
국비 38일차 Javascript operator  (0) 2021.03.03

+ Recent posts

티스토리툴바