20241122~1129 5day

javascript

• html의 조작과 변경을 담당하는 언어
• html로 웹문서의 틀을 만들고, css로 디아인을 하면 js로 웹페이지에 이벤트가 발생했을때 실행할 동작을 정의 이벤트 버튼이 눌릴때, 서버로 데이터 전송될때, 요소에 마우스가 올라가는 순간 등등..
• 웹 브라우저에서 실행이 가능한 "인터프리터"방식의 스크립트 언어
  인터프리터 : 컴파일 과정 없이 한줄씩 실행되는 방식의 언어

장점

• 코드를 작성한 후 바로 실행 결과를 확인가능
• 클래스, 접급제한자, 반환형, 변수의 자료형 등을 문법상 기술 할 필요가 없기
  때문에 초보자가 다루기 쉽다
• 지원하는 라이브러리나, 프레임워크가 굉장히 많다.

단점

• 컴파일언어보다 실행속도가 느리다.
• 큰규모의 어프리케이션 개발에 있어서 적합하지 못하다.

01_자바스크립트 개요

1. 자바스크립트 사용방법

    <ol>
        <li>inline 스크립트 사용방법
            <input type="button" value="실행1" onclick="alert('안녕 내꿈은 피구왕');">
        </li>
        <li>internal(내부)방식 사용
            <script>
                //  js 영역
                function abc(){ console.log('조우산'); // 출력방식 }
            </script>
            <input type="button" value="실행2" onclick="abc();">
        </li>
        <li>
            external(외부) 방식사용
            <script src="resources/js/sample.js"></script>
            <input type="button" value="실행3" onclick="externalTest();">
        </li>
    </ol>
    <button id="btn">콘솔창에 출력</button>
-
    <script>
        // id 값이 btn인 요소에 click시 효과 부여하기
        // 1. 효과를 적용시키고자 하는 요소를 선택하기
        // document :문서로딩 완료 후 생성된 문서 내부의 각 태그 정보를 객체화 하여 보관
                     (웹페이지마다 한개 씩 생성)
 		var btn = document.getElementById("btn");
        btn.onclick = function(){ console.log('순수 내부 방식 이벤트 구현');}
        console.log(btn);
    </script>

a.자바스크립트의 자료형

	<input type="button" value="자료형" onclick="dataType();">
    <script>
        function dataType(){
            // ES5방식 변수선은은 var 사용
            // ES6방식 변수 선언시 let, const를 추가로 사용가능
            var i;
            console.log(i, typeof(i)); // undefined : 값을 대입하지 않았을때 기본값
            i = 777;
            i = 3.14; 
            console.log(i, typeof(i)); //정수 실수 모두다 자료형 : Number
            i = 'js is very fun';  
            console.log(i, typeof(i)); //'', "" 둘다 문자열
            i = true; 
            console.log(i, typeof(i)); //boolean
            i = [1,2,3,'하이']; 
            console.log(i, typeof(i)); //new ArraryList(); 자료형 : object
            i = { name: '민경민', age :32, hobby:['맛집검색','게임']} 
            console.log(i, typeof(i)); // 자료형 : object
-
            // 자바스크립트에서는 함수 역시 값처럼 취급
            i = function abc(x, y){ return x+y; }; 
            console.log(i, typeof(i), i(1, 2));  // 자료형 : function
            i = null;
            console.log(i, typeof(i));  //object로 자료형이 나오지만 오류(버그) 
            i = new Date();
            console.log(i, typeof(i));
       		}
    </script>

02_셀렉터(Get Elenent)

	<ul>
        <li id="myli1" class="group">요소1</li>
        <li id="myli2" >요소2</li>
        <li id="myli3" class="group">요소3</li>
        <li id="myli4" >요소4</li>
        <li id="myli5" class="group">요소5</li>
    </ul>
    <input type="button" value="id" onclick="test1();">
    <input type="button" value="teg name" onclick="test2()">
    <input type="button" value="class name" onclick="test3()">
    <script>
//html의 요소를 선택하기 위해서는 작성한 html의 정보를 가지고 있는 
//DOM(Document object model) 이 필요하다
        function test1(){
          var li = document.getElementById("myli1"); //id와 일치 요소 선택(1개)
          var li = document.querySelector("#myli1"); //선택자와 일치 요소 선택(1개)
          console.log(li);	
          // close.console.log(myli1); 사용가능 좋지 못한 작성법
          //선택된 요소에 속성들에 접근하여 값을 추가, 가져오기 위해서는
          // 어떤 속성에 접근해야 하는지 알아야함
          //객체의 구조를 열람 함수 console.dir(객체)
          console.dir(li);
          //객체의 stlye 속성
          console.log(li.style.color) //getter
          li.style.color = "#fff"; // setter
          li.style.backgroundColor = "magents";
        }
       function test2(){
          var liArr = document.getElementsByTagName("li"); 
          //HTML collection (유사배열)
          var liArr = document.querySelectorAll("li");
          // NodeList (유사배열)
          console.log(liArr)
          console.log(liArr[0])
          console.log(liArr[1])
          //console.log(liArr[5])
-
          var blue = 50;
          for(var i = 0; i<liArr.length; i++){
              liArr[i].style.color = "rgb(130,220,"+blue+")";
              liArr[i].style.backgroundColor = "magenta";
              blue += 50;
          }
       }
       function test3(){
           var groups = document.getElementsByClassName("group");
           var groups = document.querySelectorAll(".group");
           console.log(groups);
	       //향상된 반복문 (for of, for in)
           //배열 반복시 for of문을 사용
           for(var li of groups){
           //요소의 배경색을 체크한 후 , 배경색이 magenta라면 springgreen으로 
           //springgreen 이라면 magents로 변경
	           if(li.style.backgroundColor == 'magenta'){
    	              li.style.backgroundColor = 'springgreen';
               }else{ li.style.backgroundColor = 'magenta'}
            }
        }
    </script>
-
<fieldset style="margin-top: 30px;">
        <legend>취미</legend>
        <input type="checkbox" name="hobby" id="hobby1" value="food">1</label>
        <input type="checkbox" name="hobby" id="hobby2" value="game">2</label>
        <input type="checkbox" name="hobby" id="hobby3" value="music">3</label>
        <input type="button" value="검색" onclick="test4();">
</fieldset>
    <script>
    function test4(){
        //체크한 체크박스의 값 가져오기
        var hobbies = document.getElementsByName("hobby");
        for(var hobby of hobbies){
           // console.log(hobby.checkd); //input태그가 선태 되었는지 알 수 있는 속성
            if(hobby.checkd){ console.log(hobby.value) }
        }
        var checkdHobbies = document.querySelectorAll("input[type=checkbox]:checked");
        for(var hobby of checkdHobbies){
            console.log(hobby.value);
        }
    }
    </script>
-
    <fieldset>
        <legend>이메일 입력</legend>
        <input type="email" name="userEmail" id="userEmail" placeholder="이메일 입력...">
        <input type="button" value="확인" onclick="test5();">
    </fieldset>
    <script>
/* #userEmail인 요소에 값을 입력한 후, 확인버튼을 눌렀을때 입력값을 console창에 출력 하시오.
1. 아이디로 접급하여 출력
2. 태그명으로 접급하여 출력
3. name값으로 접급하여 출력 */
        function test5(){
            var getId = document.getElementById("userEmail");
            getId = document.querySelector("#userEmail");
            console.dir(getId.value);
            var getTagName = document.getElementsByTagName('input')
            console.log(getTagName[7].value);
            var getByName = document.getElementsByName('userEmail');
            console.log(getByName[0].value)
        }
    </script>
    <table>
        <tr>
            <th colspan="3">수강신청</th>
        </tr>
        <tr>
            <td colspan="3">
                <input type="checkbox" id="checkAll" onclick="test7()">
                <label for="checkAll">전체 선택/해제</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="subject" id="subject1" onclick="test8(this)">
                <label for="subject1">국어</label>
            </td>
            <td>
                <input type="checkbox" name="subject" id="subject2" onclick="test8(this)">
                <label for="subject2">수학</label>
            </td>
            <td>
                <input type="checkbox" name="subject" id="subject3" onclick="test8(this)">
                <label for="subject3">영어</label>
            </td>
        </tr>
    </table>
-
//실습문제  1). 전체 선택기능
//전체 선택/해체 버튼을 누루면 , 국어,수학,영어 체크박스가 똑같이 선택/해제 되도록 구현
// console.log(checkAll.checkd);  
// checkAll.checkd = false;
    <script>
        function test7() {
        // 전체 선택 체크박스의 상태를 가져옵니다.
        var checkAll = document.getElementById('checkAll');
        console.log(checkAll)
        // 모든 과목 체크박스를 선택합니다.
        var subjects = document.querySelectorAll('input[name="subject"]');
        console.log(subjects)
        // 각 체크박스의 checked 상태를 전체 선택 체크박스의 상태로 설정합니다.
       for(var subject of subjects ){
            console.log(checkAll.checkd)
            subject.checked = checkAll.checked;
            subject.checked ? subject.parentNode.classList.add("on") :
                              subject.parentNode.classList.remove("on")  
      	 	 }
		}
//subject에 클래스를 추가하고 싶다면? > subject.classList.add('on')
//subject의 부모 요소를 가져오고 싶다면? > subject.parentNode == td
// for (var i = 0; i < subjects.length; i++) {
//		subjects[i].checked = checkAll.checked;
// 		}   베이직 반복문 활용 구문
-
// 실습문제 2) 개별 선택 기능
function test8(checkbox){
            // 전체 체크박스 제어
            // 1. 전체 subject 개수
            var total = document.querySelectorAll('input[name=subject]').length;
            // 2. 체크된 subject 개수
            var checked = document.querySelectorAll('input[name=subject]:checked').length;
            // 3. 전체선택버튼 요소 가져오기
            var checkAll = document.querySelector("#checkAll");
            checkAll.checked = total == checked;
            // checkbox.checked ?
            //     checkbox.parentNode.classList.add("on") :
            //     checkbox.parentNode.classList.remove("on");
            checkbox.parentNode.classList.toggle("on");
        }
    </script>

03_입출력

    <input type="button" value="confirm" onclick="test1()">
    <input type="button" value="prompt" onclick="test2()">

	<script>
        /* confirm  : 확인/취소버튼을 통해 놀리식 처리 지원 */
        function test1(){
            var boolean = confirm("이 파일을 삭제 하기겠습니까?");
            if(confirm("이 파일을 삭제 하기겠습니까?")){
                alert("파일삭제완료");
            }
        }

        /* prompt : 사용자로부터 문자열 입력값을 받아오는 함수 */
        function test2(){
            var name = prompt("당신의 이름은? ");
            console.log(name);
            // name에 저장된 값이 있다면 출력, 없다면 "올바른 이름을 입력하세요"
            // javascript는 값이 존재한다면 true  존재 하지 않는다면 false(null, undefeind,"",0)
            if(!name){
            //if(name == null || name == ""){ // 취소 = null, 이름을 입력 안하고 확인 = ""
                alert("올바른 이름을 입력하십쇼....")
            }else{
                alert(`당신의 이름은 [${name}]입니다`); //"",'',`` (이거만 템플릿 문법가능)
            }
        }
    </script>

a. innerHTML, innerText, outerHTML

    <button type="button" onclick="test3();">innerHTML</button>
    <button type="button" onclick="test4();">innerText</button>
    <button type="button" onclick="test5();">outerHTML</button>
    <div class="wrapper"></div>
    <script>
        /*
            innerHTML : 태그의 content영역(텍스트, 자식테그를)
                - getter : html이 포함된 content를 반환.
                - setter : 주어진 문자열을 html로 변환하여 처리.
        */
        function test3(){
            var str = prompt(".wrapper태그에 들어갈 내용을 입력해보세요");
            var wrapper = document.querySelector(".wrapper");
            wrapper.innerHTML = str; // setter 기능
            console.log(wrapper.innerHTML); //getter 기능
        }
        /*
            innerText : 태그안의 "텍스트"만 가져오는 속성
                - getter : html태그는 무시, 텍스트만 가져온다
                - setter : html태그는 단순 문자열로 처리
        */
        function test4(){
            var str = prompt("입력해");
            var wrapper =  document.querySelector(".wrapper");
            wrapper.innerText = str; //setter 기능
            console.log(wrapper.innerText);
        }
        /* 
        outterHTML은 내부 컨텐츠+자기자신을 포함
        */
        function test5(){
            var wrapper = document.querySelector(".wrapper");
            console.log(wrapper.outerHTML); // getter 기능
            wrapper.outerHTML = "<mark>월요일</mark>"
        }
    </script>

04_변수유효범위

    <input type="button" value="전역 | 지역" onclick="test1()">
    <input type="button" value="scope" onclick="test2()">
    <input type="button" value="개선(es6)" onclick="test3()">

    <script>
        //함수 밖 script태그에 작성된 변수는 "전역변수"
        //var 키워드로 지정된 전역변수는 window의"속성"으로 등록
        var a = 100;

        //함수안에 선언한 변수는 "지역변수"
        function test1(){
            var a = "아" //지역변수
            var b = 123; //지역변수
            console.log("a = " + a);
            console.log("b = " + b);
            console.log("전역변수 a = " + window.a);
            // window는 브라우저에서 최상위 객체
            console.log("전역변수 a = "+ this.a);
            // "일반함수"안에서 this는 window객체를 가리킨다.

            var a = true; // 변수 중복선언 가능(JS)
            //var c = '노브랜드'; // 지역변수
            c = '이마트'; // 전역변수 ( var 없이 선언된 변수는 함수안에 있어도 "전역변수")
            console.log("c = " + window.c);
        }
        /* 
            scope 유효범위
            자바 = block scope
            자바스크립트 = function scope즉, 함수단위로 유효범위를 가진다.(es5)
         */
        function test2(){
            var x = 10;
            if(true){
                var y = 100;
            }
            console.log(x, y);
            for(var i = 0; i<10; i++){
                console.log(i);
            }
            console.log(i); // 함수 안이라면 변수가 {블록}밖에 있어도 사용 가능하다
        }
    </script>

1. Hoisting

	<script>
//var a2;
// var 키워드 선언 변수는 hoisting되어 스크립트 "최상단"으로 올라간다.
//function foo(x)
// 함수선언식으로 선언된 함수는 hoisting되어 스크립트 "최상단"으로 올라간다
        console.log(a2);
        var a2 = '안녕';
        foo();

        // 함수선언식으로 생성한 함수
        function foo(){
            console.log('foo');
        }

        //ba();
        console.log(ba)
        // 함수표현식으로 생성한 함수
        // 함수표현식 : 함수를 값으로 표현하여 변수에 대입한 함수를 의미
        var ba = function(){
            console.log('ba');
        }
        ba();

ES6 개념

(ES5 : var - function scope를 가진 변수키워드)

ES6 :

• let - block scope 를 가진 변수 키워드
• const - block scope를 가진 상수 키워드

        */
        function test3(){
            //엄격 모드(use strict)
            "use strict"; //호이스팅이 되지 않는다.
            fooo = 100;
           
            //let foo = 100;  
            //foo = 101;
            if(true){
                let bao2 = 123;
            }
            console.log(bao2); // block 키워드이기 떄문에 {블록}밖에서 접급불가.
           //let foo= 102;
            const bao = "상수"; 
            // bao = "변수"; 
            console.log(foo, bao)
        }
    </script>
</body>

05_API형변환

<body>
    <h1>JS API들</h1>
    <input type="button" value="실행" onclick="test1();">
    <input type="button" value="@실습" onclick="test2();">

	<script>
        var test1 = function(){
            //string 내장객체 : 문자열과 관련된 메소드를 제공.
            var str = "Samsung Apple Xiomi";
            console.log(str.length); // length가 함수가 아닌 속성으로 존재한다. 19
            console.log(str.toUpperCase()); // SAMSUNG APPLE XIOMI
            console.log(str.toLowerCase()); // 소문자로 
            console.log(str.indexOf('ms')); // 2
            console.log(str.lastIndexOf('m')); // 17
            console.log(str.charAt(8));
            console.log(str[8]); // 문자배열로 취급

            //substring(start[, end]);
            console.log(str.substring(2,4)); // 2번인덱스에서 4번인데스 "전"까지 A
            console.log(str.substring(0)); //A

            //substr(start, length)
            console.log(str.substr(2, 2)); // 2인덱스에서부터 "2개" ms
            console.log(str.substr(0)); // Samsung Apple Xiomi

            // split("구분자") 문자열을 구분자 기준으로 쪼개어 배열로 변환
            var arr = str.split(" "); //ms
            console.log(arr);  //(3) ['Samsung', 'Apple', 'Xiomi']
        };

        /*
            두개의 인자로 문자열과 문자를 입력받고,
            문자열에서 문자가 몇 번 출현하는지 계산하여 프린터 해주는 함수를 생성
            ex)countChar(문자열, 문자)
            countChar("hahaha", "a") => 3
            countChar("abccba", "c") => 2
            countChar("abcdefg", "x") => 0
        */
        function test2(){
            var result = countChar("hahaha", "a");
            console.log(result); //3

            var result = countChar("abccda", "c");
            console.log(result); //2
          
            var result = countChar("abcdefg", "x");
            console.log(result); //0
        }
        function countChar (str, char){
          var cnt = 0;
          for(var i = 0; i<str.length; i++){
            if(str.charAt(i) == char){
                cnt++;
            }
          }
          return cnt;
        }
    </script>

1. Math

	<input type="button" value="실행" onclick="test3();">
    <script>
        var test3 = function(){
            var num = 123.456;
            console.log(Math.round(num));
            console.log(Math.round(num * 10) /10 );
            console.log(Math.ceil(num));
            console.log(Math.floor(num));

            console.log(Math.random()); // 0.0이상 1.0미만의 실수를 반환
            console.log(Math.floor(random()*10+1)); // 1~10사이의 난수
        };
    </script>
    <input type="button" value="@실습" onclick="test4()">
    <ul id="test-rnd">
        <li></li>*100
    </ul>
    <script>
        /* 
        #test-rnd인 요소의 하위 li태그에 1~100사이의 난수를 대입하시오.
       단, 대입하려고 하는 난수가 짝수일 경우 배경색과 글자색을 본입 취향껏 변경하시오.
        */
   // #test-rnd 요소의 하위 li 태그를 선택
        function test4(){
            var lis = document.querySelectorAll('#test-rnd > li');
            //console.log(lis);  //조회확인

            for(var li of lis){
                //console.log(li); //조회확인
                var random = Math.floor(Math.random()*100+1);
                li.innerHTML = random;

                li.style.color = "black";
                li.style.backgroundColor = "witre"
                if(random % 2 == 0){
                    li.style.color = "springgreen";
                    li.style.backgroundColor = "yellow";
                }
            }
        }
    </script>

2. Date

    <input type="button" value="실행" onclick="test5();">

    <script>
        function test5(){
            var now = new Date(); 
            console.log(now);

            var time1 = new Date(2000, 0 , 1); // 월은 0부터 시작
            console.log(time1);

            var time2 = new Date(2000, 0, 1, 15, 30, 50);
            console.log(time2);

            var time3 = new Date("1999/03/01 15:34:20");
            console.log(time3);

            // 1999-03-01로 변환하기 위해서는?
            console.log(displayTime(time3))
        }
        function displayTime(dt){
            var yyyy = dt.getFullYear();
            var mm = dt.getMonth() + 1;
            var dd = dt.getDate();
            return yyyy+"-"+ get2Digit(mm) +"-"+get2Digit(dd);
        }
        function get2Digit(num){
            // if(num < 10){
            //     return "0"+num;
            // }
            // return num;
            return num.toString().padStart(2,'0');
        }
    </script>

3. 형변환

    <input type="button" value="실행" onclick="test6()">
    <script>
        function test6(){
            console.log(3 + 7 +'7');
            console.log(7-"7");
            //자바스크립트는 문자열을 number로 형변환 시킨 후 연산 수행
            console.log(7*'7');
            console.log(7/'7');
            console.log(7%'4');

            console.log(7%"a");
            //Nan(not a number) : 숫자로 자동형변환이 불가능한 경우

            console.log(7+true);
            // true는 number로 형변환시 1이 반환
            console.log(7+false);
            // false는 number로 형변환시 0이 반환
           
            console.log(1+[]+1);
            // +,-등 산술연산자는 원시값들간의 연산만 지원
            // 배열과 같은 참조값들은 toString함수가 호출되면서 문자열로 변환되어 실행

            console.log({}+1); 
            //{}.toString()+1 => '[object Object]1'

            function fn(){}
                console.log(fn)// function의 toString값은 function함수명 (매개변수){몸통}         
        	}
    </script>

a. Number | parseInt | parseDouble

    <input type="button" value="실행" onclick="test7()">
    <script>
        function test7(){
            var num = "1234.567원"
            console.log(Number(num));
            //변환 불가능 문자가 포함되어 있으면 NaN을 리턴.

            console.log(parseInt(num));
            // 변환 불가능 문자가 포함 변환 가능한 위치까지 변환

            console.log(parseFloat(num));
            // 변환불가능한 문자가 포함 변환 가능한 위치까지 변환
        }
    </script>

    <input type="number" id="num1" placeholder="숫자1">
    <input type="number" id="num2" placeholder="숫자2">
    <input type="button" value="합 구하기" onclick="test8()">
    <script>
        /* 
            #num1인 요소의 값(value)과 #num2인 요소의 값(value)을 합하여 출력하기
            ex) 1 + 5 = 6
        */
        function test8(){
            var num1 = document.querySelector('#num1');
            var num2 = document.querySelector('#num2');
            // num1 = document.getElementById("num1");
            // num1 = document.getElementById("num2");
            console.log(num1, num2); // 값출력확인
            console.log(num1.value, num2.value);
            console.log(num1.value+"+"+num2.value+"="+(num1.value * 1 + num2.value * 1));
            console.log(num1.value+"+"+num2.value+"="+(Number(num1.value) + Number(num2.value)));
            //위 두가지 방법 다 가능 형변환 또는 정수변환
        }
    </script>

b. NaN | Infinity

	<input type="button" value="실행" onclick="test9()">
    <script>
        function test9(){
            console.log(10 / 0); //Infinty 반환
            console.log(typeof(10/0)); //number 자료형

            console.log(10%"a"); // NaN
            console.log(typeof(10%"a")); //number 자료형

            var num = 10 % "a" ; // NaN
            if(!isNaN(num)){ //동등연산자 비교가 되지 않는다  isNaN(값) 사용
                console.log('숫자입니다')
            }else{
                console.log('숫자가 아닙니다');
            }
        }
    </script>

c. 논리형으로 형변환

	<input type="button" value="논리형" onclick="test10()">
    <script>
/*
변수, 리터럴(값)이 boolean 형으로 형변환이 가능.
Boolean(값), if(값), 삼항연산자...
값이 존재하는 것들은 true로 치환 : 123, -123, 3,14, "하이", 'ㅋ', 객체(new Date), []..
값이 존재하지 않는 것들은 false로 치환 : 0, -0, 0.0, "",'', null, unedfiend, NaN
*/
        function test10(){
            // true가 되는 케이스 
            console.log(Boolean(123));
            console.log(Boolean(-100));
            console.log(Boolean(3.14));
            console.log(Boolean("3.14"));
            console.log(Boolean(`zzz`));
            console.log(Boolean(new Date()));
            console.log(Boolean([]));
            console.log(Boolean({}));
           
            //false가 되는 케이스
            console.log(Boolean(0));
            console.log(Boolean(0.0));
            console.log(Boolean(-0));
            console.log(Boolean(""));
            console.log(Boolean(undefined));
            console.log(Boolean(null));
            console.log(Boolean(nan));

            console.log("0"==0); //true
            console.log([] == 0); //true
            console.log('' == 0); //true
            console.log(Number('') == 0); //true
            console.log([] == "0"); //false ->[].toString()=> ' '=="0"
            console.log('' == '0'); //false
        }
    </script>

d. 엄격비교연산자

    <input type="button" value="엄격비교" onclick="test11();">
    <script>
        function test11(){
            /*
               ※ 일반 동등 비교 연산자(두 값의 타입은 신경쓰지 않는다.)
                == 타입(자료형)이 달라도 형변환 후 값이 같다면 true
                != 타입(자료형)이 달라도 형변환 후 값이 다르면 teue

               ※ 엄격 동등 비교 연산자(타입도 비교대상에 포함된다.)
                === 값과 타입이 모두 일치해야 true 
                !== 값과 타입이 다르면 true
            */
            console.log( 3 == "3"); //true
            console.log( 3 === "3"); //false
            console.log( 3 == 3);
            console.log( 3 === 3);
            console.log( 3 != "3");
            console.log( 3 !== "3");

//JS 에서는 항상 엄격동등비교 연사자를 통해 비교하는것을 권장.
            console.log(null == undefiend);
            console.log(null === undefiend);
        }
    </script>

e. 짧은 조건문

    <input type="button" value="실행" onclick="test12()">
    <script>
        function test12(){
            var num = prompt("정수를 입력");
            //짝/홀수 구분하기
            // if( num%2 == 0) alert("짝수");
            // else alert("홀수");

            //짧은 조건문
            //a조건식 && b실행문  : a가 참일경우 b실행
            // a || b            : a가 거짓일경우 b실행
            num%2 == 0 && alert("짝수");
            num%2 == 0 || alert("홀수");

            //삼항연산자
            num % 2 == 0 ? alert("짝수") : alert("홀수");
        }
    </script>

06_배열

1.배열 생성

    <input type="button" value="배열생성" onclick="test1();">
    <input type="button" value="초기화" onclick="test2()">

	<script>
        function test1(){
            /*
                javascript배열은 크기제한, 타입제한이 없다
                , 배열을 다루는데 유용한 매서드를 가지고 있다
                java의 ArrayList<Object>와 비슷한 객체
            */
           var arr1 = [];   //<- 축약형태
           var arr2 = new Array();
           var arr3 = new Array(3);
           console.log(arr1, arr2, arr3);

            //값 대입
            arr1[0] = 'a';
            arr1[1] = 'b';
            arr1[5] = 'e';
            console.log(arr1, arr2, arr3, arr1[2]);
           
            //반복문 1. 기본 반복문
            for(var i = 0; i<arr1.length; i++){
                console.log(arr1[i]);
            }
            //반복문 2. 향상된 반복문
            // for..of문 -> of기준 우측은 반복을 돌릴 배열, 좌측은 배열의 각 인덱스에 들어가 있는값
            //(자바의 foreach문자 비슷한 반복문)
            for(var item of arr1){
                console.log(item);
            }
            // for..in문 -> 객체 및 배열에서 반복문이 사용할때 사용하는 반복문
            // 배열의 for in문으로 사용시 in기준 좌측에서는 배열의 "인덱스"가 대입
            // 객체에서 for in문 사용시 변수에는 객체의 "속성명"이 대입
            for(var index in arr1){
                console.log(arr1[index]);
            }
        }
        //초기화 : 변수선언, 크기지정 및 값 대입
        function test2(){
            var arr1 = [1, 2, 3];
            var arr2 = new Array(1,2,3);
            console.log(arr1, arr2); //두가지 방식 같은 값

            var arr3 = [1,2,"할로",true,{id:"honggd"}]
            console.log(arr3);
        }
    </script>

2.Array Method

버튼생성

    <input type="button" value="indexOf" onclick="test3()">
    <input type="button" value="concat" onclick="test4()">
    <input type="button" value="join" onclick="test5()">
    <input type="button" value="reverse" onclick="test6()">
    <input type="button" value="sort" onclick="test7()">
    <input type="button" value="push | pop" onclick="test8()">
    <input type="button" value="unshift | shift" onclick="test9()">
    <input type="button" value="slice" onclick="test10()">
    <input type="button" value="splice" onclick="test11()">
    <input type="button" value="@실습" onclick="test12()">
    <input type="button" value="forEach" onclick="test13()">
    <input type="button" value="find,filter,map" onclick="test14()">
    <ul id="hobby-list"></ul>

	<ul id="drink"> 
        <li>coke</li>
        <li>juice</li>
        <li>coffee</li>
        <li>beer</li>
        <li>wine</li>
        <li>soju</li>
    </ul>
    <input type="button" value="@실습#drink" onclick="test15()">

script태그 이론학습

	<script>
        function test3(){
            var arr= ['apple', 'melon', 'banana', 'melon'];
            console.log(arr.indexOf('melon')); //1
            console.log(arr.indexOf('ㅋㅋㅋ')); //-1
            console.log(arr.lastIndexOf('melon')); //3
        }

        function test4(){
            var arr1 = ['a', 'b', 'c'];
            var arr2 = [1,2,3,4,5,];
            // var arr3 = arr1+arr2; 불가능 알쥐
            var arr3 = arr1.concat(arr2);
            console.log(arr3); //확인
        }

	// join : 요소를 지정한 구분자로 합친 문자열을 리턴
        function test5(){
            var arr = [1,2,3,4,5];
            var s = arr.join(); //구분자 생략시 기본값 ","포함
            var s = arr.join("");
            console.log(s); 
        }

 	// reverse : 원본 배열 요소의 순서를 뒤집어 값을 리턴
        function test6(){
            var arr = [1,2,3,4,5];
            var reveredArr = arr.reverse(); //원본배열의 값까지 변경한다
            console.log(reveredArr); //순서 확인
            console.log(arr); //순선 변환 확인
        }
     
        // sort 오름차순정렬
        function test7(){
            var arr = [4,2,3,1,5];
            arr.sort(); // 원본배열의 값을 변경
            console.log(arr);
            console.log(arr); //순선 변환 확인

        //내림차순 정렬 방법
        //sort함수의 매개변수로 "내림차순정렬기준을 제시"
	      arr.sort( function (a, b){ return b-a; });
          console.log(arr); // 내림차순정렬 확인
        //문자열 정렬 : 오름차순(사전틍록순서)
          var names = ["홍길동","김길동","다나가","민경민"];
          console.log(names.sort()); //오름차순정렬
        //문자열 내림차순 정렬 
          names.sort(function(a,b){
            if(a > b) return -1; //음수값이 반환되면 자리교환
            else if (a < b) return 1;
            else return 0;
            });
            console.log(names);

			//기타특이사항
            arr = [1, 2, 15];
            console.log(arr.sort()); //1 , 15 , 2
            //sort함수에 매개변수로 정렬조건을 추가하지 않으면 배열의 요소를
            //정렬시 항상 "문자열 "기준으로 취급하여 문자열 정렬 시킨다.
            //정수정렬하기 위해서는 직접 정렬기준을 추가 해야한다
            function compare(a,b){
                return a-b; //양수 == a가 더 큰경우, 음수 == b가 더 큰경우
                if(a>b) return 1;
                else if(a<b) return -1;
                return 0;
            }
            console.log(arr.sort(compare)); // 정수정렬 확인(오름차순)

            //기타
            console.log(arr.sort((a,b)=> a-b)); // 정수정렬 확인(오름차순)
            //함수를 값으로써 전달하는 위치에서는 함수 대신 화살표함수을 전달할 수 있다
        }
        /*
            push 배열 마지막에 요소를 "추가"후 변경된 길이를 리턴
            pop 배열 마지막의 요소를 "제거"후 제거된 요소를 리턴
        */
        function test8(){
            var arr = [];
            arr.push(1); // [1] 추가
            arr.push(2); // [1,2] 추가
            arr.push(3); // [1,2,3] 추가

            var k = 4;
            while(true){
                arr.push(k++);
                if(k>100) break;
            }
            console.log(arr); // 추가확인

            // console.log(arr.pop());
            // console.log(arr.pop());
            // console.log(arr.pop());
            // console.log(arr); //변화 확인

            // arr의 마지막 요소부터 값을 하나씩 뽑아 copy배열에 옮겨담기
            var copy = []; //[100,99,98,97 ...]
            while(arr.length){
                copy.push(arr.pop());
            }
            console.log(arr);
            console.log(copy);
        }
        /*
            unshift 배열 0번째 인덱스에 요소를 추가후, 변경된 길이를 리턴
            shift 배열 0번째 인덱스의 요소를 제거한 후, 제거한 요소를 리턴.
        */
        function test9(){
            var arr = ['사과', '배', '아보카도'];
            arr.unshift('감자'); // 4의 길이값
            arr.unshift('양파'); //5의 길이, ['감자','양파','사과', '배', '아보카도'] 
            console.log(arr.shift()); //양파
            console.log(arr); //['감자','사과', '배', '아보카도']
        }
        /*
            slice(시작인덱스, 끝인덱스)
            시작인덱스에서 끝인덱스의 "전"까지 요소를 가저와 새로운 배열로 반환
        */
        function test10(){
            var arr = ['a','b','c','d','e'];
            var copy1 = arr.slice(1,4);
            var copy2 = arr.slice(1);
        }
        /*
            splice(시작인덱스, 삭제개수, 추가요소...) : 요소를 추가&제거
                - 시작인덱스부터 삭제할 개수만큼 요소를 제거,
                - 시작인덱스에 추가할 요소들을 추가.
        */
        function test11(){
            var arr = ['a','b','c','d','e'];
            // a x y c d e 로 바꾸려면
            arr.splice(1, 1, 'x','y');
            console.log(arr); //['a', 'x', 'y', 'c', 'd', 'e']
         
            // a x k h e 
            arr.splice(2, 3, 'k','h');
            console.log(arr); //['a', 'x', 'k', 'h', 'e']

            // a x f r i k h e
            arr.splice(2,0,'f','r','i')
            console.log(arr);

            //요소 전체 제거
            arr.splice(0);
            console.log(arr)
        }
        /*실습*/
        function test12(){
            /*
                prompt를 이용 사용자의 취미리스트를 입력받으세요.
                입력예시) 농구, 수영, 게임, 영화
                ,로 취미구분 입력후
                각 취미를 배열에 담은 후 사전순으로 취미를 정렬
                ul#hobby-list의 자식 li태그로 추가.
            */
            var hb = prompt("당신의 취미는")
            //배열만들기
            var hbArr = hb.split(','); 

			//정렬
            hbArr.sort(); 

            //부모요소 조회
            var ul=document.querySelector('#hobby-list');
            console.log(hb, hbArr, ul);
           
            let li = "";
            for(let i = 0; i<arr.length; i++){
                //문자열 출력값만 출력 += 복합대입연산자 이용 길이만큼 대입
                li += "<li>"+arr[i]+"</li>"; 
            }
            console.log(li);
            ul.innerHTML = li;
        }

        //forEach( 실행함수 ) : 요소의 단순반복 할때
        //querySelctorAll로 조회한 NodList(유사배열)도 사용가능한 함수 
        function test13(){
            var arr = [1,2,3,4,5];
            var sum = 0;
            // arr.forEach( function(현재반복중인 요소, 인덱스값){
            //     실행코드
            // })
            arr.forEach(function(element, index){
                // console.log(element, index);
                sum += element; //1+2+3+4+5
            });
            console.log(sum); // 15 합이 출력

            var btnArr = document.querySelectorAll("input[type=button]");
            var btnValue = [];

			// btnArr의 value 속성값을 btnValues 배열에 모두 저장
            // 단, forEach함수 이용
            btnArr.forEach(function(element, index){
                btnValue.push(element.value);
                btnValue.unshift(element.value);
                btnValue[index] = element.value; // 3가지 방법다 가능 
            })  
        }
        /*
            find    : 배열에서 "내가 지정한 조건을 만족하는" 1개의 요소를 반환
                arr.find(function(element,index){
                    내가원하는요소를 반환 할수 있는 조건식
                    ex) element에 'h'가 포함된 단어(문자)
                    if(element.contains('h')) return true;
                	})
            filter  : 배열에서 내가 지정한 조건을 만족하는 n개의 요소를 반환
                arr.filter(function(element, index){
                    내가 원하는 요소만을 반환 시키는 조건식
                    ex) arr에서 짝수번재 인덱스에 저장된 값들만 남기고 싶은경우
                    if(index % 2 == 0) return true;
                	})
            map     : 배열안의 데이터를 내가 원하는 요소로 변환 시켜 반환
                arr.map(function(element, index){
                    //변환시키고자 하는 값을 작성
                    ex) arr에서 각 요소에 index값을 합치고 싶다.
                    return index+element;
                })   
        */
        function test14(){
            var objArr = [
                {id:'alsrudals',name:'경민'},
                {id:'alsrudals2',name:'경민2'},
                {id:'aaa',name:'zz'},
                {id:'alsrudals3',name:'경민3'},
                {id:'COCO',name:'쿠우쿠우'},
                {id:'alsrudals4',name:'경민4'}
            ];
            //id가 alsrudals인요소 검색
            var findOne = objArr.find(function(item, index){
                //내가 원하는 요소를 찾으면 true 반환.
                //find함수는 true반환시 반복종료
                console.log(item, index); //반복횟수 확인 출력
                if(item.id == 'alsrudals') return true;
            });
            console.log(findOne);
           
            //arr배열에서 id속성값이 alsrudals이 포함된 요소만을 남긴 배열을 반환
            var filteredArr = objArr.filter(function(item, index){
                if(item.id.includes('alsrudals')){
                    return true;
                }
            });
            console.log(filteredArr)

            //arr 배열에서 {id : XX, name : XX}객체 대신
            //{newId : xx, newName : xx}
            var mappedArr = objArr.map(function(item, index){
                return {newId : `new${item.id}` , newName : `new${item.name}`};
            });
            console.log(mappedArr);
        }
        //실습문제
        function test15(){
            /*
            1) 배열 drink에 #drink요소의 자식 li태그의 텍스트를 추가
            (단, forEach 함수 활용)
            결과 : ['coke','juice','coffee','beer','wine','soju']
            */
           var li = document.querySelectorAll('#drink li');
           var drink = [];
           li.forEach(item => {
               drink.push(item.textContent);
            });
            console.log(li, drink);
            /*
            2) 배열 drink에서 'ff'가 들어가는 요소를 선택하여 findOne변수에 저장
            (find 함수 활용)
            */
           var findOne;
           findOne = drink.find(function(element,index){
               if(element.includes('ff')) return true;
            });
            console.log(findOne);
            // 3) 배열 drink에서 'o'가 들어가는 요소들을 선택해서 filterArr에 반환
            // (filter함수 활용)
            // 결과 : ['coke','coffee','soju']
            var filteredArr;
            filteredArr = drink.filter(function(e, i){
                return e.includes('o');
            });
            console.log(filteredArr);
            /*
            4) 배열 drink를 활용하여 "음료객체배열"을 생성한 후 mappedDrink에 반환
            (map 함수 활용)
            음료 == {menu: 'coke', price : 2000};
            */
           var mappedArr;
           var priceArr = [2000,1600,4000,8000,15000,8000];
           mappedDrink = drink.map(function(item, index){
               return{ menu: item, price: priceArr[index] };
            })
            console.log(mappedDrink);
        }
            /*
            5) 직접 구현한 filter활용
            */
            var coustomFilter = filter(drink, function(e,i){
                return e.includes('o');
            });
            console.log(coustomFilter);
        // filter함수 구현
        function filter(arr, fn){
            var returnArr =[];
            for(var i = 0; i<arr.lenght; i++){
                if(fn(arr[i], i)){
                    returnArr.push(arr[i]);
                }
            }
            return returnArr;
        }
    </script>

07_Object(객체)

1. 객체생성

• dot natation : 점표기법 .
• breaket notation : 브래킷표기법 [ ]

	<input type="button" value="객체생성" onclick="test1()">
    <script>
        function test1(){
            // 객체 : 속성명과 속성값으로 구성된 요소를 관리하는 객체
            //  -속성명 : 문자열로 작성가능. 속성값 관리를 하는 식별자 역할
            //  -속성값 : 모든 타입의 값으로 작성가능.
            var obj1 = {
                name : '홍길동',
                "age" : 33,
                married : true, 
                hobby : ['축구','게임'],
                pet : {name:"꽃분이", breed : "말티즈"},
                111 : 456,
                "foo-bao" : "푸바오"
            };
            var obj2 = new Object(); //{ };
            obj2.pname = "말린 망고" //{pneme : "말린망고"};
            obj2.price = 3000;      // dot netation (점 표기법)
            obj2['origin'] = '필리핀';  // breaket notation(브래킷표기법)
            // 브래킷 표기법으로 속성명 작성시 반드시 문자열로 값이 전달되어야 한다.
            console.log(obj2, obj1);
            console.log(obj2.origin);
            obj2['ty-pe'] = '피클';
        }
    </script>

2. 메서드

    <input type="button" value="실행" onclick="test2()">
    <script>
        // 객체의 속성값이 function인 경우 method라 정의
        function test2(){
            var pet = {
                petName : '코코',
                eat : function(food){
                    console.log(this.petName+"이/가 "+food+"를 먹습니다.. 냠냠");
                }
            };
            console.log(pet) //적용확인
            pet.eat("츄르");
            pet["eat"]("갈비");
        }
    </script>

3. 속성 순회 | 동적 제어

    <input type="button" value="반복" onclick="test3()">
    <input type="button" value="게임종료" onclick="test4()">
    <input type="button" value="동적제어" onclick="test5()">
    <input type="button" value="toStrin" onclick="test6()">

    <script>
        var game;
        function test3(){
            // for in문을 사용한 반복문
            game = {
                title : "BROTATO",
                price : 8000, 
                lang : ["ko","en","cn"],
                run : function (){
                    console.log(this.title + "을 실행합니다...");
                    this["start-time"] = new Date();
                } , 
                shutdown : function (){
                    console.log(this.title+"을 종료합니다....");
                    this["end-time"] = new Date();

                    // 게임시간 계산
                    var duration = (this["end-time"] - this["start-time"]) / 1000/ 60; // 분단위
                    duration = Math.floor(duration * 10) / 10;
                    console.log(duration+"분 동안 게임하셨습니다.");
                },
            };
            //game객체에 run메소드 실행
            game.run();
            // for in : dot notation으로 속성에 접근 불가
            for(var propertyName in game){
                //console.log(propertyName+" : "+game.propertyName); // x
                console.log(propertyName+" : "+game[propertyName]);
            }
        }

        function test4(){
            //if(game != null && game != undefined)
            game && game.shutdown();  //짧은 표기법
            //game객체가 할당된 상태에서만 stutdown함수 실행
        }
        // 생성된 객체에 "동적으로" 속성을 추가/삭제
        function test5(){
            var student = {};
            student.name = "홍길동";
            student.class = "M";
            student.no = 33;
        
            //속성제거
            delete student.no;
            console.log(student);
        }
        /*
            toString 매서드 오버라이팅
            -JS 모든 객체가 Object객체를 상속받는다.
            즉, Object의 매서드를 사용 및 재정의 가능
        */
        function test6(){
            var notebook = {
                title : '오늘의 일기',
                content : '오늘은 자바스크립트와 재밌고 즐거운 하루를 보냈다..',
                date : new Date(),
                toString : function(){
                    return `{title = ${this.title}, content = ${this.content}, date = ${this.date}}`;
                }
            };
            console.log("notebook : "+notebook); //toString생량 가능 (오버라이딩)
        }
    </script>

4. 객체배열

<input type="button" value="실행" onclick="test7();">
    <script>
  //pets배열안에 각 인덱스값을 초기화하는 기본 방법
        function test7(){
            var pets = [
                {
                    name : '꽃분이',
                    breed : '말티즈',
                    weight : 4.5,
                    bark : function(){
                        return this.weight > 10 ? '멍멍' : '왈왈';
                    }
                },
                {
                    name : '아랑',
                    breed : '비숑',
                    weight : 3,
                    bark : function(){
                        return this.weight > 10 ? '멍멍' : '왈왈';
                    }
                },
                {
                    name : '콩돌',
                    breed : '리트리버',
                    weight : 25,
                    bark : function(){
                        return this.weight > 10 ? '멍멍' : '왈왈';
                    }
                },
            ];
            console.log(pets);
            for(var pet of pets){
                console.log(pet.name+"이/가"+pet.bark()+" 짖는다");
            }
        }
    </script>

5. 생성자 함수 & prototype

	<input type="button" value="생성자 함수" onclick="test8();">
    <input type="button" value="prototype" onclick="test9();">

    <script>
/*
◆ 생성자 함수 
- JS에서 객체지향 프로그래밍을 지원하는 기능.
- 함수를 클래스처럼 정의하기 위해 하용, 
	생성자 함수는 호출(CALL)시 new 연산자를 함꼐 사용해야 한다
- 생성자 함수의 첫 글자는 대문자로 작성하는 것이 관례 
- 모든 함수는 prototype라는 속성을 가지고 있으며 
	JS는 prototype을 통해 상속 관계를 정의한다.

◆ prototype (원형)
- 함수의 정의 시 prototype에는 함수의 원형을 유지하고 있는 
	"부모객체"가 생성되어 저장 (부모객체를 미 정의시 Object()객체가 저장)
- prototype 에 저장된 객체(부모객체) 내부에는 생성자 함수가 또 존재
- 함수는 prototype안의 정보를 통해 부모객체의 속성, 매서드에 접근하여 호출가능
*/
        function Pet(name, breed, weight){
            //{} <= 빈객체가 있다고 생각하자
            this.kind = kind;
            this.name = name;
            this.breed = breed;
            this.weight = weight;
            //클래스의 공통 매서드 정의
            this.bark = function(){
                return this.weight > 10 ? '멍멍' : '왈왈';
            }
            // return this; <=가 되어있다고 생각하자
        }
        /*생성자 생성 및 부모객체 확인*/
        function test8(){
            //console.log(Pet);
            //console.dir(Pet);
            console.log(Pet.prototype, typeof(Pet.prototype)); //생성자 부모객체 확인
            var coco = new Pet('고양이','코코','브숏',5);
            console.log(coco);
        }
        // 상속관계 재정의 하기 Object > Animal >Pet
        function Pet(name, breed, weight){
            this.name = name;
            this.breed = breed;
            this.weight = weight;
        }
        function Animal(kind){
            this.kind = kind;
            this.bark = function(){
                return '멍멍';
            }
        }
        Pet.prototype = new Animal();
       
        function test9(){
            var pets = [
                new Pet("구리구리", "푸들", 4.5),
                new Pet("까미","요크셔",3),
                new Pet("콩돌","리트리버",25)
            ]
            console.log(pets);
            for(var pet of pets){
                console.log(pet.name+"이/가"+pet.bark()+" 짖는다.")
            }
            var pet = new Pet("콩돌", "리트리버",25);
            console.log(pet.__proto__, Pet.prototype);
            // 부모객체에 직접적으로 접근하는 방법
/*
◆ Prototype chain
- 객체 내부 프로퍼티인 prototype를 이용하여 부모 객체의 주소값에 접근 가능
- JS는 찾고자 하는 속성/매서드가 현재 객체에 없는 경우 prototype를 이용 상위요소로 가서 찾는다
- 이 특징은 JS에서 상속관계를 설정, 객체간 속성/매서드를 공유하는 프로토타입 체인을 형성
*/
		}
	  </script>

6.자바스크립드의 class

/*
prototype은 JS에서 사용 개념, 기타 객체지향 프로그래밍언어에서는 사용하지 않는다
JS로 객체지향 프로그래밍 하는데 prototype은 접근성이 떨어지고, 
표준화가 덜된 문법이라 ES6에서 일반 객체지향 프로그래밍과 유사한 문법을 가진 class를 추가
*/
	<input type="button" value="class" onclick="test10();">
    <script>
        class Animal2 {
            constructor(kind){
                this.kind = kind;
            }
        }
        class Pet2 extends Animal2{
            // JS는 필드선언이 필요없다, this == {}
            #hobby; // # => private를 의미
            constructor(kind, name, breed, weight){
                super(kind); // 부모생성자 호출
                this.name = name;
                this.breed = breed;
                this.weight = weight;
            }
            //매서드 문법.
            static bark(){
                return this.weight > 10 ? '멍멍':'왈왈';
            }
            //옛날 set/get 추가 방식
            setHobby(value){
                this.#hobby = value;
            }
            getHobby(){
                return this.#hobby;
            }
            // 모던 JS에서는 setter, getter 함수 대신
            // set, get프러퍼티를 사용
            // 객체 내부에 private인 속성에 접근시 사용
            // set프로퍼티 사용시 속성에 값을 대입
            // get프로퍼티 사용시 속성의 값을 가져오는 역할
            get hobby(){
                return this.#hobby;
            }
            set hobby(value){
                this.#hobby = valuel;
            }
        }

        function test10(){
            console.log(Animal2, typeof(Animal2), Animal2.prototype )
            var animal = new Animal2('고양이');
            console.log(animal);
            var cat = new Pet2("고양이", "코코", "브숏", 3);
            console.log(cat);
            //cat["#hobby"] = "먹기";
            //console.log(cat["#hobby"]); 캡슐화에 추가가 아니 새로이 추가가 된다
            cat.setHobby("먹기");
            console.log(cat.getHobby());
            console.log(cat);
            cat.hobby = "눕방"; // set방식
            console.log(cat.hobby); //get방식
        }
    </script>

08_Function(함수)

함수 작성

    <script>
        //함수 선언식
        function foo(){
        };
        //함수 표현식 
        var bao = function(){
        };
        //즉시실행함수 == 1회용 함수 1번 호출하고 삭제하고자 할때
        //IIFE(Immedietely Invoked Function Expression)
        (function(){
            console.log("hello iife")
        })(); 
        (function(){
            console.log("goodbye iife")
        }());
        (function(name){
            console.log("goodbye " +name);
        }("경민"));
    </script>

2. 매개변수 | 매개인자

/*
매개변수 parameter : 함수선언식 매개인자가 담길 변수 
매개인자 argument : 함수호출시 매개변수에 전달할 값
JS는 매개변수와, 매개인자의 개수가 달라도 문제 되지 않는다.
*/

    <input type="button" value="실행" onclick="test1(1, 2); test('안','녕');">
    							<!--  매개인자와 매개변수의 관계를 위한 작성예시-->
    <input type="button" value="@arguments" onclick="test2()">
    <script>
        function test1(x = "기본값"){
            console.log("x = "+x);
            // 매개인자를 저장하는 argument속성
            console.log(arguments);
            for(var i = 0; i<arguments.length; i++){
                console.log(arguments[i]);
            }
        }
        function test2(){
            //매개인자의 합을 출력하는 가산기 함수 add를 작성
            add(1,2,3,4,5,6,7,8,9,10);//55
            add(12.34, 45.67) //58.01
            add('a','b','c','d') //"abcd"
        }
        function add(){
            var sum = typeof(arguments[0]) == 'string' ?"" : 0;
            for(var i = 0; i<arguments.length; i++){
                sum += arguments[i];
            }
            console.log(typeof(sum)=='string'? sum : Math.floor(sum*100)/100);
        }
    </script>

3. 함수의 특징

    <input type="button" value="return" onclick="test3();">
    <input type="button" value="중접함수" onclick="test4(10, 5);">
    <script>
// return : 값을 호출한 위치로 반환(매서드종료)
//          JS에서는 return을 생략 할수 있다. 생략시 undefined를 호출한 위치로 반환
        function test3(){
            var k = koo();
            console.log(k); // undefined 가 출력
        }
        function koo(){
            // return undefined; 아무것도 작성하지 않은 경우 
            return 100;
        }
        //피타고라스 공식 밑변2 + 높이2 == 빗변2
        function test4(a, b){
       // 값을 전달하면 지수연산을 수행하여 제곱을 만들어 주는 함수
            var power = function(n){
                return n**2;
            }
            //제곱근 구하기
            c = Math.sqrt(power(a) + power(b));
            console.log(c);
        }
    </script>

4. 함수 고급

/*
자바스크립트에서는 함수는 "값"으로써 취급
- 변수에 대입이 가능     -함수표현식
- 함수의 인자로 전달 가능 - callbackfn함수
- 리턴값으로 사용 가능
*/
    <input type="button" value="매개인자" onclick="test5()">
    <input type="button" value="리턴값" onclick="test6()">
    <input type="button" value="999" onclick="(soo())(999)">
    <script>
        function test5(){
            exec(function(n){
                console.log(n+": heelo , "+names[n-1]);
            });
        }
        var names = [
            'html', 'css', 'js','jquery','java'
        ];
        function exec(fn){
            for(var i = 0; i<names.length; i++){
                fn(i+1);
                //console.log(n+": heelo , "+names[n-1]);
            }
        }
        function test6(){
            var fn = returnFunction('mkm');
            console.log(fn, typeof(fn));
            fn('hello');
            var sayHello = returnFunction('say');
            var saygoodbye = returnFunction('good bye');
            sayHello("mkm");
            saygoodbye("mkm");
        }
        function returnFunction(word){
            return function(name){
                console.log(word +' '+name+" ~");
            }
        }
        function soo(){
            return function(num){
                console.log(num);
            }
        }
    </script>

5. 함수의 scope

	<script>
       var z = 50; // 전역변수
       // IIFE 내에서의 스코프
       (function varTest(){
           var z = 55;
           z+= 45;
           console.log('varTest():z = ',z); //100이 나온다
       })();
       console.log("z = ", z);//50 전역변수값
       var y = 99;
       (function varTest2(){
           //debugger;
           var x = 100;
           var y = 9;
           z = 1; // 전연변수의 z를 초기화
           console.log('varTest2() : x+y+z =', x+y+z); // 110
       })();
       console.log('y+z = ', y+z); //100
       //전역에서 실행하는 for문 내부변수 i
       for(var i = 1; i<=10; i++){
           console.log(i);
       }
       function getNum(){
           console.log('i = ' , i);
       }
       getNum();

// 중첩함수 형태에서 하위함수가 상위함수의 지역변수를 참조하고 있는 경우(클로져)
       var num = 200;
       function funcx(){
           var num = 100;
           return function (){
               //debugger
               console.log('num = ', num);
           }
       }
       var innerFn = funcx();
       innerFn();
   </script>

6. Closure

/*
클로져(Closure) : 
- 중첩함수에서 하위함수가 상위함수의 "지역변수"를 참조할때 발생스코프(범위)
- 하위함수는 상위함수의 변수값을 미리 클로저 scope에 등록해두어서 상위함수에 존재하는 값을 참조하는 것처럼 사용하게끔 설계된 scopr다
*/
    <input type="button" value="globelCounter" onclick="test7();">
    <input type="button" value="globelCounter" onclick="test8();">
    <script>
        function funcY(){
            var num = 100;
            function funZ(){
                console.log('num =' ,num);
            }
            return funZ;
        }
        var myFn = funcY();
        myFn();
        var test7 = globalCounter();
        function globalCounter(){
            var cnt = 0;
            return function(){
                console.log('cnt : '+ ++cnt);
            }
        }
        var test8 = globalCounter();
        //test8();
    </script>

@실습문제 1 : 눈코딩

<!-- 스코프범위를 생각하면서 각 변수가 어디서 오는지 어떤값이 나오는지 생각해보자-->
    <button onclick="funcX()()">funx실행확인</button>
    <button onclick="funcY()()">funY실행확인</button>
    <button onclick="funcY(987)()">funY실행확인</button>
    <button onclick="funcZ(3)(5)">funZ실행확인</button>
    <button onclick="funcZ()(5)">funZ실행확인</button>
    <script>
        var a = 1;
        var funcX = function(){
            var a = 100;
            return function(){
                console.log(a);
            }
        }
        var b = 9;
        var funcY = function(){
            var b = 99;
            return function(b){
                console.log(b); //local참조중(지역)
            }
        }
        var funcZ = function(k){
            return function(num){
                console.log(k*num);
            }
        }
    </script>

09_Window-윈도우

1. 웹페이지 구조

2. Method

    <input type="button" value="open" onclick="test1()">
    <input type="button" value="popup닫기" onclick="test2()">
    <input type="button" value="setTimeout" onclick="test3()">
    <input type="button" value="@실습" onclick="test4()">
    <input type="button" value="clearTimeout" onclick="test5()">
    <input type="button" value="setInterval" onclick="test6()">
    <input type="button" value="@실습" onclick="test7()">
    <hr>
    <div id="clock"></div>
    <div id="countdown"></div>
    <script>
/*
◆ window
- 웹브라우저에 의해 "탭"마다 하나씩 생성되는 객체 
	"브라우저"를 제어할 수 있는 매서드를 제공
- 브라우저환경상 "최상위"객체 JS실행하는 환경에 따라 존재하지 않을 수도 있다.
    (node.js 최상위가 global)
- 새창열기 매서드, 알럿창, 컴펌창, prompt창 등등..
            window.open() : 새창열기 매서드
            open(url, name, specs)
                -url : 새창 열고자 하는 주소
                -name : 팝업창의 이름
                -specs : 창크기 속성, 가로길이, 세로길이, 상태표시줄 표시여부 등등...
*/
        var newWindow;
        function test1(){
            // _self작성시 현재창에서 페이지 이동
            newWindow = open("08_함수.html","_self2","width=800, height=500")
            console.log(newWindow);
            // 1초 이후에 싱행되는 코드
            setTimeout(function(){
                newWindow.alert("Hello JS");
            }, 1000);
        }
        function test2(){
            newWindow.close();
        }
        function test3(){
            /*
                setTimeout(callbackFn, millis);
                millis초 이후 callbackFn을 실행
                timeoutAPI들 중의 하나로 비동기적으로 처리된다.
                *동기적실행 : 위에서부터 아래, 외쪽에서 오른쪽 순서대로 
                순서에 맞춰서 실행됨을 의미.
                *비동기함수는 작업의 환료를 기다리지 않는 함수.
            */
            //1. SetTimeout함수 실행 비동기함수는 동기함수가 모두 실행되고나서
            setTimeout(function(){  
                alert("반갑습니다");
            },3000);
            //2. alert 함수 실행  동기함수가 먼저실행
            alert("안녕");
        }
        //눈코딩 연습
        function test4(){
            var i = 1;
            console.log(1,i++);
            decI(i);
            setTimeout(function(){
                console.log(2, i++);
            })
            console.log(i);
            // 1번. 1 > decI(i):2 > 3번. 2 > 2번. 2 실행 순서와 출력값
        }
        function decI(i){
            console.log(3, i--);
        }
        // clearTiomout : queue에 저장된 timeout 함수를 제거하는 함수
        function test5(){
           var timeId = setTimeout(function(){
                console.log('5초 후 실행');
            }, 5000);
            console.log(timeId);
            clearTimeout(timeId);
        }
        function test6(){
            /*
                setInterval(callbackFn, millis)
                 - millis초 마다 callbackFn을 반복하여 실행
                 - 비동기함수.
            */
            // var num = 1;
            // setInterval(function(){
            //     console.log(num++);
            // },1000);
            var clock = function (){
                var now = new Date();
                var strFormat = getTimeFormat(now); // 15:36:55
                document.querySelector("#clock").innerHTML = strFormat;
            }
            setInterval(clock, 1000);
       }
       function getTimeFormat(date){
            function get2digit(time){
                return time >= 10 ? time : "0"+time;
            }
            var hh = get2digit( date.getHours() );
            var mi = get2digit( date.getMinutes() );
            var ss = get2digit( date.getSeconds() );
            return `${hh}:${mi}:${ss}`;
       }  
        /*
            실습: 
            버튼 클릭시 "카운트다운" 하는 함수 만들기
            시작 : 10, 9 ... 1.. 끝 : 0
            0도달시 카운트 다운 종료
        */
        function test7(){
            var count = 10; 
            var timeId = setInterval(function(){
                var dp = document.querySelector('#countdown');
                dp.style.display = "block";
                dp.innerHTML = count--;
                if( count == 0){
                    clearInterval(timeId);
                    dp.innerHTML = "뻥!";
                }
            },1000)
        }
    </script>
test6() test7() 문제 스타일 지정
    <style>
        #clock{
            font-size:   3em;
            text-shadow: 3px 3px 7px black;
        }
        #countdown{
            border: 3px solid black;
            font-size: 30em;
            padding : 10px;
            text-align: center;
            display: none;
        }
    </style>

3. BOM(Browser Object Mode)

    <input type="button" value="navigator" onclick="test8()">
    <input type="button" value="location" onclick="test9()">
    <input type="button" value="history" onclick="test10()">
    <input type="button" value="screen" onclick="test11()">
    <script>
/*
navigator : 현재 실행중인 browser와 운영체제에 대한 정보를 가진 객체.
클라이언트의 브라우저 정보나 운영체제 정보 확인, 운영체제에 적합한 콘텐츠를 제공 하고자 할때 사용
ex) ie같은 구식 브라우저로 웹사이트에 접근시
'ie로는 사용하지 못합니다' 와 같은 경고문 출력후 접근거부 시키는 코드 작성 가능.
        */
        function test8(){
            console.log(navigator); //콘솔창을 통해 정보들을 확인가능
        }
        /*
            location : 주소창관련 정보를 가진 객체
        */
        function test9(){
            console.log(location);
            // location.reload();//reload() 새로 고침 기능
            // location.href = location.pathname; //현제페이지이동(새로고침)
            // location.href = "http://naver.com"; //.href 페이지이동
            // location.assign('http://naver.com'); //.accihn함수이용을 권장 페이지이동
            location.replace('http://naver.com'); //.replace 뒤로가기 불가능
        }
        /*
            history : 방문기록을 보관하고 있는 객체.
            back(), go(), forward()
            뒤로, 앞으로, 새로고침(go(0)) 사용가능
        */

        function test10(){
            console.log(history);
        }

        /*
        screen : 접속기기의 화면과 관련된 정보를 가진 객체
        - width
        - height
        - avaiWidth
        - avaiHight

availHeight: 사용 가능한 화면 높이(상단의 작업 표시줄이나 도구 모음 등을 제외한 높이)
availLeft: 사용 가능한 화면의 왼쪽 가장자리에서의 거리 사용 가능한 영역의 시작 위치
availTop: 사용 가능한 화면의 상단 가장자리에서의 거리 사용 가능한 영역의 시작 위치
availWidth: 사용 가능한 화면 너비(상단의 작업 표시줄이나 도구 모음 등을 제외한 너비)
colorDepth: 화면에서 사용할 수 있는 색상의 깊이(비트 수)값이 높을수록 더 많은 색상을 표현가능
height: 전체 화면의 높이 
isExtended: 화면이 확장된 상태인지 여부를 나타내는 boolean값 다중 모니터 설정에서 주 화면이 아닌 경우 true
onchange: 화면의 속성이 변경될 때 호출되는 이벤트 핸들러 특정 속성이 변경될 때 어떤 동작 수행을 설정
orientation: 화면의 방향을 나타내는 객체 
	angle : 현재 화면의 회전 각도를,
    type : 화면의 방향
    (예: 'landscape-primary', 'portrait-primary' 등)
pixelDepth: 화면에서 표현할 수 있는 색상(색상깊이)의 비트 수 (colorDepth와 유사)       
width: 전체 화면의 너비입니다. 화면의 전체 크기를 픽셀 단위
*/
       function test11(){
           console.log(screen);
           var width = 300;
           var height = 300;
           var left = (screen.availWidth-width) / 2 + screen.availLeft;
           var top = (screen.availHeight-height) /2;
           open("08_함수.html", "popup", `width=${width}, height=${height}, left=${left}, top=${top}`)
        }
</script>

4. DOM(Document Object Mode)

    <input type="button" value="createElement" onclick="test12()">
    <input type="button" value="createImg" onclick="test13()">
    <input type="button" value="deleteNode" onclick="deleteNode(this)">
    <input type="button" value="@실습" onclick="test14()">
    <div class="img-wrapper"></div>
    <div class="result"></div>
    <script>
/*
Node 객체 : 모든 DOM객체들이 상속받는 객체.
- HTML의 태그(요소)뿐 아니라 주석(comment), 텍스트(Text), 태그까지 포함 모두 Node라고 한다
h2태그 -> HTMLHeadingElement -> HTMLElement -> Element -> Node -> EventTarget
- 모든 HTML태그는 Node클래스에 존재하는 매서드를 사용가능
  EventTarget에 존재하는 "이벤트속성"들을 사용할 수 있다.
Element의 매서드들
- firstChild, lastChild, childNodes ...
- appendChild(), removeChild(). ...
*/
     
        function test12(){
            //동적으로 <h3>하이 ㅋ</h3>
           // 동적으로 HTML 요소를 만드는 방법
           // 1. innerHTML
           //document.querySelector(".result").innerHTML = "<h3>하이 ㅋ</h3>"

           // 2. createElement : 생성 문법
              // appendChild() : 자식관계로 이어주는 문법
            // 1)ElementNode (h3)생성하기  (주소값 저장중)
            var emlementNode = document.createElement('h3');
            // 2)TextNode (하이 ㅋ)생성하기
            var textNode = document.createTextNode("하이 ㅋ");
            // 3) 두노드 연결하기 (element >(자식노드로) TextNode 로 추가)
            emlementNode.appendChild(textNode); // h3 > textNode 추가 ( > 자식)
            // 4) .result요소의 자식으로 elementNode 추가하기.
            //document.querySelector('.result').innerHTML = elementNode;
            //innerHTML로는 문자열만 추가
            document.querySelector('.result').appendChild(emlementNode);
        }
        function test13(){
            // img 태그를 동적으로 생성
            var img = document.createElement("img");
            img.src = "window.png";
            img.style = "width : 200px";
            console.log(img);
            document.querySelector(".img-wrapper")
            .appendChild(img);
        }
        function deleteNode(node){
            console.log(node);
            node.remove();  //요소를 삭제하는 문법
        }

10_이벤트

<body>
    <h1>Event</h1>
    <h2>Event Handler Binding</h2>
    <input type="button" value="inline event 속성" onclick="test1();" onmouseover="test1();">
    <input type="button" value="event 속성 지정" id="btn2">;
    <input type="button" value="addEventListenner" id="btn3">;

    <script>
        function test1(){
            console.log('event 발생!');
        }
        // document.querySelector("#btn2").onclick = function(){
        //     console.log("btn2에 click이벤트 발생")
        // };
        // document.querySelector("#btn2").click(); 좌클릭발생
       
        // 함수자체를 값으로써 저장, 호출 후 저장하지 말것.
        document.querySelector("#btn2").onclick = test1;
            colsole.log(typeof(test1), typeof(testof(test1()))); //function, undefined
        //이미 존재하는 함수는 ()붙일 필요가 없다.

        // addEventListener(이벤트타입, 이벤트핸들러)
        document.querySelector("#btn3").addEventListenner("click", function(){
            console.log("btn3 click!");
        });

    document.querySelector("#btn3").addEventListenner("click", function(){
        console.log("ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ");
    });
    
</script>

<h2>Event | Evert Target</h2>
<div class="box" onclick="test2(event)"></div>

<script>
    /*
        Event 객체 : 발생한 이벤트와 관련된 모든 정보를 가지고 있는 객체
        (이벤트가 발생한 요소, 이벤트의 유형, 이벤트가 발생한 위치정보 등...)
            이벤트 발생시 JS에서 이벤트핸들러 함수의 인자로 자동으로 전달이 됨.

        Enent Target객체 : 이벤트 발생한 객체. event객체의 target속성값에 저장이 된다.  
    
    */

    function test2(e){
        console.log(e);
        console.log(e.target, this);
        //this << 윈도우 객체로 나온다
        //일반함수에서 this 는 항상 윈도우를 가르킨다
    }

    document.querySelector(".box").onmouseover = function (e){
        console.log(e);
        console.log(e.target == document.querySelector('.box')); //true
        console.log(e.target == this); //true
        this.innerHTML = "ㅋㅋ";
        //이벤트핸들러 함수 내부에서 this는 이벤트를 발생시킨 envent target와 동일하다
    };
    document.querySelector(".box").onmouseout = function(e){
        this.innerHTML ="요소를 벗어납니다"
    };
</script>
<h2> keyEvent</h2>
<input type="text" id="userInput" placeholder="아무거나 입력하세요..">
<div class="text-wrapper"></div>

<script>
    /*
        keydown(누를떄) - keypress(누루고있는동안) - keyup(누루지 않을때)
    */
    // 1). keydown : 한템포 느리게 입력
    // document.querySelector("#userInput").addEventListener('keydown',function(e){
    //     console.log(e.target.value); // keydown 한템포 느리게 입력
    // })

    // 2). keypress : 한템포 느기게 입력
    // document.querySelector("#userInput").addEventListener('keypress',function(e){
    //     console.log(e.target.value); // keydown 한템포 느리게 입력
    // })

    // keydown ,keypress는 실시간으로 입력한 값을 바로 가져 올수 없다

    // 3). keyup : 실시간 입력 가능
    document.querySelector("#userInput").addEventListener('keyup',function(e){
        console.log(e.target.value); // keydown 한템포 느리게 입력

        document.querySelector('.text-wrapper').innerHTML = this.value;
    })

</script>

<h2>Submit Event</h2>
<form action="">
    아이디 : <input type="text" name="userId" id="userId">;<br>
    비번   : <input type="password" name="pwd" id="pwd">;<br>
    <input type="submit" value="로그인">;
</form>

<script>
    //사용자가 입력한 값을 검사 : 유효성 검사
    document.querySelector("form").onsubmit = function(e){
        console.log(e);

        // 1. 아이디 검사   (4~8글자 사이의 값을 입력했는지 검사)
        var userId = document.querySelector("#userId");
        if(!(userId.value.lenght >= 4 && userId.value.lenght <= 8)){
            alert("유효한 아이디를 입력하세요 4~8글자");
            userId.select();
            e.preventDefault();
            //html요소가 가지고 있는 "기본이벤트"호출을 방지하는 속성.
            //기본이벤트 : 각 태그마다 내장되어있는 이벤트 함수로 
            //form는 submit
            //a태그는 click
            //button는 submit
            //return false; // submit 이벤트 막기 false로 가능
        }
        
        // 2. 비밀번호 검사 (4~8글자)
        var userPwd = document.querySelector('#pwd');
        if(!(userPwd.value.lenght >= 4 && userPwd.value.lenght <= 8)){
            alert("유효한 비밀번호 입력하세요 4~8글자");
            userPwd.value= ""; //비번제거
            userPwd.select();
            e.preventDefault();
            //return false; 
        }
        return true;
    };

</script>

<h2>Event Propagation - Bubbling</h2>
<!--
    이벤트 버블링
        - 요소에 이벤트 핸들러 작동시 이어서 부모요소의 핸들러도 작동하고,
          그 부모요소의 핸들러로 계속 이벤트가 "전파"되면서 거품과 같이 커지는 것을 의미
-->

<div class="boxx box1" date-text="box1" onclick="displayMsg(event, this);">
    <div class="boxx box2" date-text="box2" onclick="displayMsg(event, this);">
        <div class="boxx box3" date-text="box3" onclick="displayMsg(event, this);"></div>
    </div>
</div>
<style>
    .boxx{
        border : 1px solid black;
        padding : 20px;
    }
    .box1{background-color: yellowgreen;}
    .box2{background-color: green;}
    .box3{background-color: springgreen;}
</style>

<script>
    function displayMsg(e, box){
        //console.log(e , box);
        console.log(box.dataset.text); //dataset.text 를 꺼내는 방법

        e.stopPropagation(); // 이벤트 전파를 막는 함수
    }
</script>

``` # 정규식 ```js

Regular Expression

<script>
    function test1(){
        /* 
            정규표현식 
             - 특정 규칙을 가진 문자열 집합에 사용하는 형식언어.
             - 유효성검사, 검색, 문자열 치환등에서 반복문 없이 효율적으로 내가 찾고자 하는 문자를 찾을 수 있게
               도와준다.
             - 언어에 독립적으로 존재하며 java, oracle, js등 다양한 언어에서 사용할 수 있다.
        */
        //정규표현식 객체 생성
        var re1 = /a/; // 문자 a를 찾을때
        var re2 = new RegExp(/[0-9]/); // 0~9까지의 숫자를 찾을때
        var re3 = new RegExp("[a-z]"); // a~z까지의 영문자를 찾을때

        // 정규표현식 실행
        // test() : boolean
        console.log(re1.test('abcde')); // true
        console.log(re1.test("bcde")); // false

        console.log(re2.test('mkm123')); // true
        console.log(re2.test('mkm')); // false

        console.log(re3.test('가나다MKm123')); // true
        console.log(re3.test('가나다MKM123')); // false

        // exec() : []
        console.log(re1.exec('abcde'));

        // 문자열의 정규표현식 활용 함수
        // match
        console.log('cba'.match(re1));

        // search : 문자열에서 정규표현식과 일치하는 문자의 인덱스 위치
        console.log('skldfjslasl'.search(re1));

        // replace(찾을문자, 바꿀문자)
        console.log('cabbbbaccca'.replace(/a/g,'A'));

        // split(구분자 | 정규식)
        console.log('사과,배, 양파, 마늘'.split(",")); // 공백이 앞에 있음.
        console.log('사과,배, 양파, 마늘'.split(/\s*,\s*/));
    }

    /*
        flag 문자
        g : global 정규식에 대한 전역비교 수행을 할때 사용
            g가 없으면 첫번째 매칭 조건이 있는 경우 검사종료
            g가 있으면 모든 문자열에 대한 정규식과 매칭되는 문자를 검사

        m : multo-line 문자열이 여러줄(\n)로 존재하는 경우 줄단위 비교를 수행.
       
        i : ignore 영문자중 대소문자를 구분하지 않고 비교
    */
    function test2(){
        var str = "Javascript jQuery Ajax";
        area.innerHTML = str.replace( /a/ig, "<mark>$&</mark>")
        // $& --> 매칭된 문자를 가리키는 와일드카드
    }
    /*
        anchor 문자
        ^ : 문자열의 시작
        $ : 문자열의 끝
    
    */
    function test3(){
        var str = "Javascript\nxxxx\njQuery\nAjax";
        // area.innerHTML = str.replace(/^j/gim,"<mark>$&</mark>")
        area.innerHTML = str.replace(/x$/gim,"<mark>$&</mark>")

    }
    /*
        사용자로부터 "문자열"을 입력받고 (prompt)
        k로 시작하면서 h로 끝나는 경우에는 "잘하셧습니다"
        적합하지 않은 경우에는 "적합한 문자가 아닙니다"를 경고창으로 출력.
        ex) kh - 잘하셧습니다
            kkh - 잘하셧습니다 
            k1111111h - 잘하셧습니다
            a1h - X
            knnnm - X
    */
    function test4(){
        var str = prompt("문자열입력하쇼");
        var re1 = /^k/;
        var re2 = /h$/;
        if(re1.test(str) && re2.test(str)){ 
            alert("잘하셧습니다");
        }else{
            alert("적합한 문자가 아닙니다");
        }

    }
    /*
        .(dot) : 임의의 한글자를 의미.
    
    */
    function test5(){
        var re1 = /^...$/; //3글자인지 검사 한다
        console.log(re1.test('ab')); //false
        console.log(re1.test('abc')); //true
        console.log(re1.test('abcd')); //false

        var re2 = /a.b/g; //정규식 작성
        area.innerHTML = "ab aab aaab".replace(re2, "<mark>$&</mark>")//aab aab

        var re3 = /in..$/; // in이후에 두글자로 끝나는 문자열
        ["goingo", "goin", "gointo", "going"].forEach(function(str){
            console.log(re3.test(str));
        });

        var re4 = /^c...k$/ //c로 시작 k로 끝나는 5글자 물자열
        ["ck", "cbk", "cbak", "cbawk","cbawak"].forEach(str => {
            console.log(re4.test(str), str);
        });

    }
    /*
        []"한글자"를 의미하며 문자의 범위를 나타날때 사용
            대괄호 안에서 ^가 사용되는 경우 앵커문자가 아닌 
            특정문자를 제외하고자 하는 기호로써 사용된다.
    */        
    function test6(){
        var s = "Javascript jquery Ajax 12345";
        // area.innerHTML = s.replace(/[aj]/gi, "<mark>$&</mark>"); //[aj] a 와 j
        // area.innerHTML = s.replace(/[^aj]/gi, "<mark>$&</mark>"); // a와 j가 아닌 문자

        //area.innerHTML = s.replace(/[ABCMFKEWJTRNQWNEQWKXMZKXD]/g,"<mark>$&</mark>")
        //대문자만 찾으려고 할떄 다 입력해서 사용할수있다
        //area.innerHTML = s.replace(/[A-Z]/g,"<mark>$&</mark>")
        //동일하게 이어지는 값 문자 등을 '-'로 표현 가능
        // area.innerHTML = s.replace(/[0-9]/g,"<mark>$&</mark>") //숫자검사
        // area.innerHTML = s.replace(/[a-z]/g,"<mark>$&</mark>") //소문자검사
        area.innerHTML = s.replace(/[a-zA-Z0-9]/g,"<mark>$&</mark>") // 영문자, 숫자 검사
        
        var hangul = "안녕하세요, 전 James입니다 I LOVE KOREA";
        area.innerHTML = hangul.replace(/[가-힣]/g,"<mark>$&</mark>") //모든한글 글자 검사
        
        hangul = "ㅋㅋ ㄷㄷ ㅎㅎ ㅂㅂ 채팅어 OTL"
        area.innerHTML = hangul.replace(/[ㄱ-ㅎ]/g,"<mark>$&</mark>") //모든한글 글자 검사
    }
    /*
        1. prompt 창을 이용해 id를 입력
        2. id가 숫자로 시작되지 않는 id인지 검사
        3. 만약 id가 숫자로 시작한다면, "아이디는 숫자로시작할수 없어"출력
        4. prompt 창을 이용하여 pwd를 입력
        5. pwd가 4자리 숫자형 비밀번호인지 검사
        6. 만약 4자리로 이루어진 비번이 아닌경우 "비밀번호는 숫자4자리여야한다"출력
        7. 모두 만족한다면 "id : xxx, pwd : xxx" 출력
    
    */
    function test7(){
        var id = prompt("id입력");
        var pwd = prompt("pwd입력");
        var idre = /^[0-9]/;
        var pwdre = /^[0-9][0-9][0-9][0-9]$/;
      
        if(!(idre.test(id))) alert("아이디는 숫자로시작할수 없어");
        if(!(pwdre.test(pwd) )) alert("비밀번호는 숫자4자리여야한다");

        // if(/^[0-9]/.test(id)){
        //     alert("아이디는 숫자시작불가");
        //     return;
        // }
        // if(!/^[0-9][0-9][0-9][0-9]$/.test(pwd)){
        //     alert("비번은 숫자4자리 입니다")
        //     return;
        // }
        // alert("id : ", id, "pwd : ", pwd);
        
    }
    /*
        문자 클래스 
        
        \d decimal 숫자
        \w word 영문자, 숫자, _
        \s space 공백문자, 탭, 개행문자

        \D 숫자가아닌 모든 문자
        \W 영문자, 숫자, _ 아닌 문자
        \S 공백문자, 탭, 개행문자가 아닌 문자
    */
    function test8(){
        var s = "A1 B2 c3 d_4 e:5 ' ` ffGG6767--__--A1 B2 c3 d_4 e:5' ` ffGG6767--__--!\"@#$%^&*()     가\n나\n다\n";
        // area.innerHTML = s.replace(/\d/g, "<mark>$&</mark>");
        // area.innerHTML = s.replace(/[0-9]/g, "<mark>$&</mark>"); //두개다 같은 역할

        // area.innerHTML = s.replace(/\w/g, "<mark>$&</mark>");
        // area.innerHTML = s.replace(/[0-9a-zA-Z_]/g, "<mark>$&</mark>"); //둘이 같다

        // area.innerHTML = s.replace(/\s/g, "<mark>$&</mark>");
        area.innerHTML = s.replace(/[ \n\t]/g, "<mark>$&</mark>"); //둘이 같다
    }

    /*
        ()그룹핑
        | 선택  ->(or)과 비슷
        | 연산자를 사용하면 항상 () 그룹화 해주도록하자
    
    */
    function test9(){
        var s = "월요일에는 월요병, 화요일은 화가 부글부글, "
      + "수요일은 술이 확 땡긴다. 목요일이 목이 컥 막히고, 금요일은 금방 올거 같지 않다.";
        
        //area.innerHTML = s.replace(/수요일/g, "<mark>$&</mark>")
        // area.innerHTML = s.replace(/(수요일|목요일)/g, "<mark>$&</mark>")
        // area.innerHTML = s.replace(/(수|목)요일/g, "<mark>$&</mark>")
        // area.innerHTML = s.replace(/[수목]요일/g, "<mark>$&</mark>")
        
        area.innerHTML = s.replace(/(?<day>수요일|목요일)/g, "<mark>$&</mark>");
            //() 안에 있는 그룹의 키값을 지정할수 있다 '?<키값>'

    }

    /*
        escaping 
        정규식 안의 기능이 포함된 문자(메타문자)를 실제 문자값으로 사용하려면.
        \역슬래시를 통해 escaping처리한다.
        []안에서는 escaping 필요 없다. []안의 모든 문자는 기능이 없는 문자로 처리
    */
    function test10(){
        var s = "$12$ \\-\\ $25$";
        // erea.innerHTML = s.replace(/\$/g, "<mark>$&</mark>"); //모든 $ 
        // erea.innerHTML = s.replace(/^\$/g, "<mark>$&</mark>"); // 시작하는$
        // erea.innerHTML = s.replace(/\$$/g, "<mark>$&</mark>"); // 끝나는 $ 
        
        // erea.innerHTML = s.replace(/[$]/g, "<mark>$&</mark>"); // 모든 $ 
        // erea.innerHTML = s.replace(/^[$]/g, "<mark>$&</mark>"); // 시작 $ 
        // erea.innerHTML = s.replace(/[$]$/g, "<mark>$&</mark>"); // 끝나는 $ 

    }

    /*
        수량자
        a* a가 0개 이상
        a+ a가 1개 이상
        a? a가 1 or 0
    
    
    */
    function test11(){
        var s= "aabc abc bc"
        // area.innerHTML = s.replace(/a*b/g, "<mark>$&</mark>");
        // area.innerHTML = s.replace(/a+b/g, "<mark>$&</mark>");
        area.innerHTML = s.replace(/a?b/g, "<mark>$&</mark>");
    }

    /*
        수량표현
        a{5} a가 5개 
        a{2,5} a가 2개이상 5이하
        a{3,} a가 3개 이상
    
    */
    function test12(){
        var s = "aa aba abba abbba";
        // area.innerHTML = s.replace(/ab{2}a/g,"<mark>$&</mark>")
        // area.innerHTML = s.replace(/ab{1,2}a/g,"<mark>$&</mark>")
        // area.innerHTML = s.replace(/ab{2,}a/g,"<mark>$&</mark>")
        
        // area.innerHTML = s.replace(/ab*a/g,"<mark>$&</mark>")
        // area.innerHTML = s.replace(/ab{0,}a/g,"<mark>$&</mark>")
        
        // area.innerHTML = s.replace(/ab+a/g,"<mark>$&</mark>")
        // area.innerHTML = s.replace(/ab{1,}a/g,"<mark>$&</mark>")
        
        // area.innerHTML = s.replace(/ab?a/g,"<mark>$&</mark>")
        // area.innerHTML = s.replace(/ab{0,1}a/g,"<mark>$&</mark>")
        
        // 숫자로 시작하고, 영문자 3글자이상 나오고 
        // .(마침표)로 끝나는 문자열을 검사하는 정규식
        
        area.innerHTML = s.replace(/^[0-9][a-zA-Z]{3,}[.]$/g,"<mark>$&</mark>")
        
        var re = /^[0-9][a-zA-z]{3,}[.]$/
        var re = /^\d$[a-zA-Z]{3,}\.$/
    }
    /*
    look around : 문자열 검사 후 최종패턴에는 포함되지 않는 검사방식
        1. look ahead(전방탐색)
            - 000(?=(re)) : 000다음 값이 re와 일치여부 검사. re는 최종패턴에 포함되지 않는다.
            - 000(?!(re)) : 000다음 값이 re와 불일치여부 검사, re는 최종패턴에 포함되지 않는다.

        2. look behind(후방탐색)
            - (?<=(re))000 : 000앞의 값이 re와 일치여부 검사. re포함 x
            - (?<!(re))000 : 000앞의 값이 re와 불일치여부 검사. re포함 x
    */
    function test13(){
        var s = "hello world hello Tom hello mkm";
        // area.innerHTML = s.replace( /hello(?=( world))/g ,"<mark>$&</mark>")
        // area.innerHTML = s.replace( /hello(?!( world))/g ,"<mark>$&</mark>")
        
        s= "hello world loe world t world";
        // area.innerHTML = s.replace( /(?<=hello )world/g ,"<mark>$&</mark>")
        area.innerHTML = s.replace( /(?<!hello )world/g ,"<mark>$&</mark>")
    }
    
    var area = document.querySelector("#area");
</script>

<p>
    @실습문제 : 주민번호 정규표현식 <br>
    다음과 같은 input태그에서 주민번호를 체크하는 정규표현식을 작성하여
    유효한지 아닌지 alert를 통해 처리하세요
    <pre>900909-1234566</pre>
</p>
<label for="">주민번호 입력</label>
<input type="text" id="ssn">
<button type="button" onclick="testSSn();">실행확인</button>
<script>
    
    
    function testSSN(){
        //조건 1. 일수는 월과 상관없이 1~31까지의 값의 범위를 가진다.
        // var inputId = document.getElementById('ssn').value;
        var inputId = document.querySelector('#ssn').value;
        
        var idRe = /^\d{6}[01]\d{2}-\d{7}$/;
        
        var idRe = /^\d{6}-\d{7}$/;
        //월 01 ~12
        var idRe = /^\d{2}(0[1-9|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])-\d{7}$/;

        
        if(re.test(ssn)){
            console.log('유효한 주번입니다.');
        }else{
            console.log('유효하지 않습니다.');
        }
    }
</script>
<form action="">
    <fieldset>
        <legend>아이디 유효성 검사</legend>
        <input type="text" name="userId" id="userId" placeholder="아이디">
        <input type="submit" value="제출">
    </fieldset>
</form>

<script>
    /* 
        userId가 8~12자리 , 영문자/숫자/특수문자[*!^/@$] 를 각 1개이상 반드시 포함해야한다.
        단, 아이디의 시작은 영문자로만 시작할 수 있다
        이 조건을 만족하지 못하는 폼이 제출되어서는 안된다.
    */
    document.querySelector("form").onsubmit = function(e){
        var userId = document.querySelector("#userId").value;

        // 1. 8~12 -> /.{8,12}/
        if(!(userId.length >= 8 && userId.length <= 12)){
            console.log('아이디는 8~12자리여야합니다.');
            return false;
        }

        // 2. 영문자 / 숫자 /특수문자 *!^/@$ 체크
        if(!(/[a-z]/i.test(userId) && /[0-9]/.test(userId) && /[*!^/@$]/.test(userId))){
            console.log('아이디는 반드시 영문자/숫자/특수문자를 하나 이상씩 포함해야합니다.')
            return false;
        }

        // 3. 영문자로 시작
        if(!(/^[a-z]/i.test(userId))){
            console.log('아이디로 영문자로 시작해야 합니다.')
            return false;
        }

        var re2 = /^[a-z](?=.*[0-9])(?=.*[*!^/@$])[a-z0-9*!^/@$]{7,11}/i;

        console.log('회원가입 성공');

        return true;
    }


</script>