アカデミー64日目-JavaScript

126182 ワード
JavaScript 塾 テキストリンク

2021.06.25


ex27_messagebox.html


ポスト

<!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>
    <!-- 
        메세지 박스
        - Dialog box
        1. alert() ****
            - 메세지 전달
        2. confirm() *****
            - 메세지 전달 -> 사용자 의사 확인 -> Yes or No 선택
        3. prompt()
            - 사용자에게 정보 입력
            - 디자인 수정 불가
    -->
    <h1>Message box</h1>

    <form name="form1">
        <input type="button" value="버튼1" name="btn1">
        <input type="button" value="버튼2" name="btn2">
        <input type="button" value="버튼3" name="btn3">
    </form>

    <script>
        var btn1 = document.form1.btn1;
        var btn2 = document.form1.btn2;
        var btn3 = document.form1.btn3;

        btn1.onclick = function() {
            alert(100);
            alert(true);
            alert('문자열');
            alert(new Date()); // 문자열
        };

        btn2.onclick = function() {
            // confirm('메세지');

            var result = confirm('정말 삭제하시겠습니까?');
            console.log(result); // 반환값 boolean

            if(result){

            } else {

            }
        };

        btn3.onclick = function() {
            // prompt('메시지', '초기값');
            var age = prompt('나이를 입력하세요.', ''); // 반환값

            if (age >= 19) {
                location.href = 'http://google.com';
            } else {
                alert('미성년자는 가입할 수 없습니다.');
            }
        };



        // **** 결론 : 자바스크립트의 함수는 모두(100%) 객체 메소드이다.(귀속 함수)
        //           : 자바스크립트는 독립 함수라는 존재가 없다.
        //           : 자바스크립트는 전역 함수라는 존재가 없다.
        //           : 자바스크립트는 전역 변수라는 존재가 없다.

        //★★★★★ 모든 전역 변수와 모든 전역 함수는 (자동으로) window 객체의 프로퍼티가 된다.★★★★★

        // 전역변수
        var num = 10;

        // 함수
        // alert();

        // 독립함수 -> 전역함수
        // 재정의
        // function alert() { 

        // }

        var obj = {
            name: '홍길동', // 프로퍼티
            age: 20,
            // 귀속함수 > 메소드
            hello: function() {
                console.log(1);
                console.log(this); // this == obj
            }
        };

        // 함수도 값이기 때문에 덮어쓰기가 가능하다.
        obj.hello = function() {
            console.log(2);
        }

        // hello(); // X
        obj.hello(); // O
        
        // 객체에 변수를 추가하면 -> 프로퍼티
        obj.gender = '남자'; // 프로퍼티 추가


        // 전역변수 생성
        var program = 'test';
        // 아래와 같이 자동으로 처리
        // window.program = 'test';

        console.log(program);
        console.log(window.program);


        // 전역 함수 생성
        function test() {
            console.log('function test');
        }

        //아래와 같이 자동으로 추가
        // window.test = function() {
        //     console.log('function test');
        // };

        test();
        window.test();

        // window는 최상위 객체이며 유일하기 때문에 생략가능*****
        // window.alert(100);
        alert(100); // 단독으로 사용하는 것은 대부분 window의 메소드이다.
        
        // window.confirm();
        // window.prompt();


        // 전역함수에서 작성한 this는 항상 window객체를 말한다.
        // this : 메소드를 소유하고 있는 객체
       // window.aaa = function() {};    
        function aaa() {
            console.log(this); // this == window
        }

        aaa();
        
    </script>
</body>
</html>

ex28_form.html

<!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>

      body { margin-bottom: 500px; }

      #tbl1 { border: 1px solid black; border-collapse: collapse; }
      #tbl1 th, #tbl1 td { border: 1px solid black; padding: 5px; }
      
   </style>
</head>
<body>

   <!--  

      BOM
      - window
      - window의 자식 : screen, history, location, document
      - document의 자식 : image, link, form
      - form의 자식 : text, button, radio, checkbox..

   -->
   
   <h1>폼</h1>

   <form name="form1">

      <h2>텍스트 박스</h2>
      <input type="text" name="txt1">
      <input type="button" value="버튼" name="btn1">

      <h2>로그인</h2>
      아이디: <input type="text" name="txtID"><br>
      암호: <input type="password" name="txtPW"><br>
      <input type="button" value="로그인" name="btnLogin">

      <h2>체크박스</h2>
      <label>동의: <input type="checkbox" name="cb1"> </label>
      <input type="button" value="확인" name="btn2">

      <h2>약관</h2>
      <fieldset>어쩌구 저쩌구..</fieldset><br>
      <label>약관 동의: <input type="checkbox" name="cb2"> </label>
      <input type="button" value="다음 단계로" name="btn3" disabled>

      <h2>게시물</h2>

      <table id="tbl1">
         <tr>
            <th><input type="checkbox" name="cbAll"></th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
      </table>

      <h2>라디오 버튼</h2>

      <div>
         <h3>선호하는 언어를 선택하세요.</h3>
         <label><input type="radio" name="rb" value="Java"> Java</label><br>
         <label><input type="radio" name="rb" value="SQL"> SQL</label><br>
         <label><input type="radio" name="rb" value="HTML"> HTML</label><br>
         <label><input type="radio" name="rb" value="CSS"> CSS</label><br>
         <label><input type="radio" name="rb" value="JavaScript"> JavaScript</label><br>
         <br>
         <input type="button" value="확인" name="btn4">
      </div>

      <div>
         <h3>색상을 선택하세요.</h3>
         <label><input type="radio" name="rbColor" value="tomato">빨강</label><br>
         <label><input type="radio" name="rbColor" value="gold">노랑</label><br>
         <label><input type="radio" name="rbColor" value="cornflowerblue">파랑</label><br>
         <label><input type="radio" name="rbColor" value="white" checked>하양</label><br>
         <label><input type="radio" name="rbColor" value="black">검정</label><br>
      </div>


      <h2>셀렉트 박스</h2>

      <div>
         <label>동물: </label>
         <select name="sel1" multiple size="7">
            <option value="1">강아지</option>
            <option value="2">고양이</option>
            <option value="3">병아리</option>
            <option value="4">토끼</option>
            <option value="5">거북이</option>
         </select>
         <br><br>
         <input type="button" value="확인5" name="btn5">
         <input type="button" value="확인6" name="btn6">
         <input type="button" value="확인7" name="btn7">
         <input type="button" value="확인8" name="btn8">
         <input type="button" value="확인9" name="btn9">
      </div>


   </form>

   <script>

      var txt1 = document.form1.txt1;
      var btn1 = document.form1.btn1;
      
      var txtID = document.form1.txtID;
      var txtPW = document.form1.txtPW;
      var btnLogin = document.form1.btnLogin;

      var btn2 = document.form1.btn2;
      var cb1 = document.form1.cb1;
      
      var btn3 = document.form1.btn3;
      var cb2 = document.form1.cb2;

      var cbAll = document.form1.cbAll; //단수
      var cbItem = document.form1.cbItem; //복수 -> 배열

      var btn4 = document.form1.btn4;
      var rb = document.form1.rb; //복수 -> 배열

      var rbColor = document.form1.rbColor; //복수 -> 배열


      var sel1 = document.form1.sel1;

      var btn5 = document.form1.btn5;
      var btn6 = document.form1.btn6;
      var btn7 = document.form1.btn7;
      var btn8 = document.form1.btn8;
      var btn9 = document.form1.btn9;



      //텍스트 박스 조작
      //1. 텍스트 박스 자체
      //2. 텍스트 박스의 값 > 문자열 조작 *****

      btn1.onclick = function() {
         //txt1.readOnly = true; // 텍스트 박스 자체 조작

      };


      // 텍스트 박스의 값 조작
      btnLogin.onclick = function() { 

         //유효성 검사
         // - 유효성 검사는 되도록 유효하지 않은 걸 찾아야 로직 구현이 편하다.
         //1. 아이디: 필수 입력, 4~12자 이내
         //2. 암호: 필수 입력, 4~12자 이내

         // 필수 입력 확인하는 방법
         // 1. txtID.value == '' -> 빈문자열인지 확인
         // 2. txtID.value.length == 0 -> 문자열길이가 0인지 확인

         if (txtID.value.trim() == '') {
            alert('아이디를 반드시 입력하세요');
            txtID.focus(); //onfocus -> 텍스트 박스에 커서의 포커스가 맞춰짐.
            return; // 빈리턴문. 함수 종료
         }

         if (txtID.value.trim().length < 4 || txtID.value.trim().length > 12) {
            alert('아이디를 4자~12자 이내로 입력하세요.');
            //txtID.focus();
            txtID.select(); // 선택된 상태로 포커스가 맞춰짐.
            return;
         }

         if (txtPW.value.trim() == '') {
            alert('암호를 반드시 입력하세요');
            txtPW.focus(); 
            return;
         }

         if (txtPW.value.trim().length < 4 || txtPW.value.trim().length > 12) {
            alert('암호를 4자~12자 이내로 입력하세요.');
            //txtPW.focus();
            txtPW.select();
            return;
         }

         //여기에 도착~
         //올바른 데이터를 입력!!
         //전송~
         alert('success');


      };

      // ----------------------------------------------------

      btn2.onclick = function() {
         
         //체크박스의 상태?
         alert(cb1.checked); // 체크하면 true, 체크 안하면 false

      };


      //체크박스를 클릭해서 체크 상태를 변화할 때 > 어떤 이벤트?
      //1. onclick
      //2. onchange : 변화가 일어났는지 감지하는 이벤트 //권장

      cb2.onchange = function() {
         //alert(cb2.checked);

         if (cb2.checked) {
            btn3.disabled = false;
         } else {
            btn3.disabled = true;
         }

      };

      btn3.onclick = function() {
         location.href = '다음페이지';
      };

      // ----------------------------------------------------

      cbAll.onchange = function() {

         //cbItem -> for문

         // if (cbAll.checked) {
         //    for (var i=0; i<cbItem.length; i++) {
         //       cbItem[i].checked = true;
         //    }
         // } else {
         //    for (var i=0; i<cbItem.length; i++) {
         //       cbItem[i].checked = false;
         //    }
         // }

         for (var i=0; i<cbItem.length; i++) {
            cbItem[i].checked = cbAll.checked;
         }

      };

      // ----------------------------------------------------

      btn4.onclick = function() {
         
         rb.forEach(function(item, index) {

            //alert(item.checked);
            //alert(item.value);

            if (item.checked) {
               alert(item.value);
            }

         });

      };

      // ----------------------------------------------------

      rbColor.forEach(function (rb, index) {

         rb.onclick = function() {
            //alert(rb.value);
            //alert(event.srcElement.value); //권장!!!
            document.body.bgColor = event.srcElement.value;
         };

      });

      // ----------------------------------------------------

      btn5.onclick = function() {

         // 선택한 <option> 접근
         // alert(sel1.value); //읽기
         sel1.value = 4; //쓰기

      };

      btn6.onclick = function() {

         // 선택 항목(<option>)
         // - <option> 태그의 index
         // alert(sel1.selectedIndex); //선택된 <option>의 index
         sel1.selectedIndex = 2;


         // 셀렉트 박스 > 선택 항목 조작
         // 1. value
         // 2. selectedIndex 

      };

      btn7.onclick = function() {

         //var flag = false;

         for (var i=0; i<sel1.options.length; i++) {
            if (sel1.options[i].text == '햄스터') {
               //flag = true;
               //break;
               return;
            }
         }

         //if (!flag) {
            // <option> 동적 추가
            var op = new Option(); // 생성자 함수. <option> 태그 생성
            op.value = 6; // <option value="6"></option>
            op.text = '햄스터'; // <option value="6">햄스터</option>

            //<select>에 <option> 추가 - options 컬렉션
            sel1.options.add(op);
         //}
      };
      
      btn8.onclick = function() {

         //<option> 삭제
         //sel1.options.remove(3);

         //sel1.options.remove(선택한 옵션의 index);

         if (sel1.options.length > 1) {
            sel1.options.remove(sel1.selectedIndex);
         }

      };

      btn9.onclick = function() {

         //다중 선택 > 선택한 항목들?
         for (var i=0; i<sel1.options.length; i++) {

            // 체크박스, 라디오버튼 : checked
            // 셀렉트 박스 : selected
             
            //alert(sel1.options[i].selected);
            if (sel1.options[i].selected) {
               alert(sel1.options[i].text + ':' + sel1.options[i].value);
            }
         }
      };

   </script>

</body>
</html>

ex29.html

<!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>
    <!-- 
        다량의 태그에 일괄적으로 이벤트 적용시 생기는 상황
     -->

    <img src="images/cat01.jpg" name="img">
    <img src="images/cat02.jpg" name="img">
    <img src="images/cat03.jpg" name="img">

    <script>

        var img = document.all.img;         

        // alert(img.length);

        for(var i=0; i<img.length; i++) { // <- var i = 0 전역변수

            // end loop -> 3

            // 이벤트를 등록하는 것. 함수는 행동이 발생했을때 실행된다.
            img[0].onclick = function() { alert(i); };
            img[1].onclick = function() { alert(i); };
            img[2].onclick = function() { alert(i); };

            // 이벤트 핸들러(역할)
            // i번째 이미지 태그의 멤버 메소드(구문)
            img[i].onclick = function() {

                // 누가 나를 불렀나?
                // - 3개의 이미지 중 어떤 이미지를 클릭했을 때 이 함수가 호출되었나?
                // alert('Click');
                // 지금 이벤트(onclick)를 발생시킨 주체가 누구? -> 이미지 중 하나
                // alert(event.srcElement.src);
                // event.srcElement.width = 500;

                // Uncaught TypeError: Cannot read property 'src' of undefined
                // alert(img[i].src); -> 나중에 이미지를 클릭한 이미지를 접근하기 위해서 img[i] 표현을 사용
                // -> 루프 변수 i의 상태가 루프를 진행할 때 당시의 값이 아니기 때문에 사용 불가능!!
                // -> event.srcElement 또는 this를 사용하자!!
                // -> event.srcElement를 더 권장.

                // alert(i);
                //alert(this.src);
                alert(event.srcElement === this); 
                

                //1. i가 왜 0,1,2가 아닌가?
                // ->  시간차 때문에..사건의 발생 순서 때문에..
                //2. i가 왜 있어? > i가 왜 살아있나? >  Closure(클로저)
                // -> 전역변수
            };
        }
    </script>
</body>
</html>
[2021 KACAブラインドテスト]タクシー料金の併用
7-26 instanceof演算子