[Day3] JS 3 - 테이블체크, 함수, undefined, null, 객체, 엄격모드, this, 이벤트 처리, 문자열

[Day3] JS 3 [11/22] 

 

--복습--

1. test01.html 페이지에서 select 태그의 option을 선택하면 test01_ok.jsp 페이지로 submit 되어서  radio 버튼이 체크되도록  js로 코딩하세요~

 

[sample01.html]

-html-

<form action="sample01_ok.jsp" method="get">
	<select id="selsubject"  name="selsubject">
	   <option>선택하세요.</option>    
	   <option value="kor">국어</option> 
	   <option value="eng">영어</option> 
	   <option value="mat">수학</option>
	   <option value="pe">체육</option> 
	</select>
</form>

-(form 태그 있어야 입력해서 get, post 가능!)

 

-js-

    // 1. selsubject 의  option을 선택했을 때 서브밋(submit)
    // 2. 모든 입력태그들은 form 태그 안에 있어야 한다. 
    // 3. ?파라미터이름=값&파라미터이름=값 X
     document.getElementById("selsubject").onchange = function (){    	
    	var svalue = this.options[this.selectedIndex].value ;    	
    	if(svalue == "선택하세요."){
    		alert("과목만 선택하세요.");
    		return;
    	}
    	
    	// js 서브밋~
    	// js 함수 : submit()
    	// http://localhost/webPro/javascript/days04
    	// /sample01_ok.jsp?파라미터 X
    	// ?selsubject=eng
    	// document.querySelector("form").submit();
    	// document.forms 컬렉션 ,  options 컬렉션
    	document.forms[0].submit();
    }

 

[sample01_ok.jsp]

-html-

<%
         // ?selsubject=eng
         String subject =  request.getParameter("selsubject");

          // [ jsp 스크립트 3가지 종류  ]
          // 1) 스크립트릿
%>

 <!-- 2) 표현식 ( 출력 )-->
  subject = <%= subject %><br>

 [ 선택된 과목 ] <br>
 <input type="radio" name="subject"   value="kor"><label>국어</label><br>
 <input type="radio"  name="subject"  value="eng"><label>영어</label><br>
 <input type="radio"  name="subject"  value="mat"><label>수학</label><br>
 <input type="radio"  name="subject"  value="pe"><label>체육</label><br>

-js-

	var svalue =  "<%= subject %>" ;   // js 는 문자열은   쌍 홑 따옴표
	var radios = document.getElementsByName("subject"); 
	for (var i = 0; i < radios.length; i++) {
		if( radios[i].value ==  svalue ){
			radios[i].checked = true;
			break;   // return;
		} // if
	} // for

-jquery-

$(":radio[value='<%= subject %>']").prop("checked", true);

 * 주의 : <%--  JSP 주석처리  ***

 

2. ▶, ▶▶ 버튼을 구현하세요 

<style>
   select{
      height: 200px;
      width: 100px;
   }
   button{
      width:40px;
   }   
</style>

<table>
	<tr>
		<td>
				<select multiple="multiple" id="sleft">
				  <option>이창익</option>
				  <option>김가율</option>
				  <option>임종윤</option>
				  <option>문혜빈</option>
				  <option>엄태혁</option>
				</select>
		</td>
		<td>
		   <button>▶</button><br>
		   <button>▶▶</button><br>
		   <button>◀</button><br>
		   <button>◀◀</button><br>
		</td>
		<td>
		<select multiple="multiple" id="sright">
		</select>
		</td>
	</tr>
</table>

-js-

<script>
    // <button>▶ 클릭
    document.querySelector("button:first-of-type").onclick = function (){
    	// 1. sleft 에서 선택된(selected) option의 text, value 얻어와야...
        var sleftOptions = document.querySelectorAll("#sleft option");
    	var sright = document.querySelector("#sright");
    	
    	// 2. sright 모든 option 제거
    	// sright.options.length=0;
    	sright.innerHTML = "";
    	
        for (var i = 0, j=0; i < sleftOptions.length; i++) {
    		if( sleftOptions[i].selected ){
    			// console.log( sleftOptions[i].value +" / " + sleftOptions[i].text );
    			// sright  + option 추가
    			// sright.options[j++] = new Option(sleftOptions[i].value,sleftOptions[i].value); 
    			
    			// js   복제 :  cloneNode() 
    			sright.appendChild( sleftOptions[i].cloneNode(true)  );
    		}
    	} // for
    } // 

    // select , option 요소 생성, 제거
    //              createElement() / 제거 메서드
    // 1)  sleft.remove(index);          반드시 뒤에 인덱스 ->
    
    // <button>▶▶ 클릭
    document.querySelector("button:nth-of-type(2)").onclick = function (){
    	// 1. sleft 에서 선택된(selected) option의 text, value 얻어와야...
        var sleftOptions = document.querySelectorAll("#sleft option");
    	var sright = document.querySelector("#sright");
    	
    	//sright.innerHTML = ""; 
    	// sright.options.length=0;
    	
        for (var i = 0, j=0; i < sleftOptions.length; i++) {
    		if( sleftOptions[i].selected ){
    			// console.log( sleftOptions[i].value +" / " + sleftOptions[i].text );
    			// sright  + option 추가
    			// sright.options[j++] = new Option(sleftOptions[i].value,sleftOptions[i].value);
    			
    			// jquery method : append()/ appendTo()
    			// js         method : appendChild()
    			sright.appendChild( sleftOptions[i] ); 
    		}
    	} // for
    } // 
</script>

-jquery-

<script>
// <button>▶ 클릭
   $("button").first().click( function (){
	   // alert("a")
	   $("#sleft option:selected").each(function(i, element) {
		   // jquery 복제 메서드  : clone()
	   	   $("#sright").append(  $(element).clone() );
	   });
   });
   
   // <button>▶▶ 클릭
   $("button").eq(1).click( function (){
	   // alert("b")
	   $("#sleft option:selected").each(function(i, element) {
	   	   $("#sright").append(element);
	   });
   });
</script>

 

6. 첫 번째 텍스트 박스에 숫자를 입력 후 엔터 치면 두 번째 텍스트 박스로 포커스 넘기고

   두 번째 텍스트 박스에 숫자를 입력 후 엔터 치면 덧셈 결과를 세 번째 텍스트 박스에 출력하는  js 코딩을 하세요.  

 

<input type="text"  autofocus="autofocus" >
<!-- onkeydown="txt01_keydown();" -->
 + 
<input type="number" >
 = 
 <!-- 12e+5 -->
 <input type="text"  disabled="disabled">

-js-

   function txt01_keydown(){
	   // console.log( event.keyCode );  48(0) ~ 57(9)
	   if(  !(  event.keyCode >= 48 && event.keyCode <= 57  || event.keyCode == 8  || event.keyCode == 13 || event.keyCode == 229 )    ){
		   alert("입력 잘못!!!");
		   event.returnValue = false ;   // 이벤트 취소 + 출력 O
	   }
	   if( event.keyCode == 13 ){
		   document.querySelector("input[type=number]").focus();
	   }
   }
   
   document.querySelector("input[type=number]").onkeyup = function (){	
	   // alert("xxxx");
	   if( event.keyCode == 13 ){	   
		    var n1 = document.querySelector("input[type=text]:first-of-type").value;		    
		    // alert( typeof n1);  // js :  number   [string]  function  boolean  object		    
		    var n2 = this.value;
		    
		    // "12"  -> 12 형변환
		    // java  :   Integer.parseInt( "12" )
		    // js      :   Number(),  parseFloat(),   parseInt(), eval()
		    var sum = Number(n1) + parseInt(n2);  // "12"+"23" = "1223"
		    
		    document.querySelector("input[type=text]:last-of-type").value = sum;
	   }
   }

-jquery-

   // $("input[type=text]")
   $(":text").first().keydown(function() {
   	  if ( event.keyCode == 13 ) {
		 $(this).next().focus();
	  } // 
   })
   
   $("input[type=number]").keydown(function() {
   	    if ( event.keyCode == 13 ) {
		    var n1 =  eval( $(":text").first().val() );
		    var n2 = parseInt( $(this).val() );
		    var sum = n1 + n2;
		    // $(":text").last()
		    $(this).next().val( sum );
	  } // 
   })

---

<style>
  table, th, td{
    border: 1px solid gray;
  }
  
  table{
     width: 50%;
     margin: 0 auto;
  }
</style>

 

<table>
  <thead>
	<tr>
		<td><input type="checkbox" class="all">모두 선택</td>
		<td>Name</td>
		<td>Loc</td>
	</tr>
  </thead>	
  <tbody>
	<tr>
		<td><input type="checkbox" id="ck1"></td>
		<td>Animi.</td>
		<td>Hic.</td>
	</tr>
	<tr>
		<td><input type="checkbox" id="ck2"></td>
		<td>Esse.</td>
		<td>Fuga.</td>
	</tr>
	<tr>
		<td><input type="checkbox" id="ck3"></td>
		<td>Fuga.</td>
		<td>Ducimus?</td>
	</tr>
	<tr>
		<td><input type="checkbox" id="ck4"></td>
		<td>Beatae.</td>
		<td>Optio.</td>
	</tr>
  </tbody>
  <tfoot>
     <tr>
        <td colspan="3" align="center">
           <button>선택 확인</button>
        </td>
     </tr>
  </tfoot>	
</table>

<p id="demo">
   "선택 확인" 버튼을 클릭할 때 체크박스의 id 속성값 +  [Name 컬럼]의 값도 모두 출력 
   ck1, ch3, ch4
</p>

-js-

<script>
   document.querySelector("tfoot  button").onclick = function (){
	   // alert("1");
	   // document.querySelectorAll("input[type=checkbox].not(.all)")
	   var ckbs = document.querySelectorAll("tbody input[type=checkbox]");
	   var pdemo = document.querySelector("#demo");
	   var content = "";
	   for (var i = 0; i < ckbs.length; i++) {
		     if( ckbs[i].checked ){
		    	
		    	 // DOM 요소(노드) 탐색
		    	 // console.log(  ckbs[i].parentElement.parentElement.childNodes ); // 노드 컬렉션
		    	 var name = ckbs[i].parentElement.parentElement.children[1].innerText ;  // 요소 컬렉션
		    	 // ckbs[i].parentNode
		    	 
		    	 content += ckbs[i].id + " / " + name + "<br>";
		     }
	    }  // for
	    pdemo.innerHTML = content;
   }
</script>

-jquery-

<script>
   $("tfoot button").click( function (){
	   // jquery selector   :checkbox  == input[type=checkbox]
       var content = "";
	   $("tbody :checkbox:not(.all):checked").each(function(i, element) {
	   	   var id =  element.id ;
	   	   var name = element.parentElement.nextElementSibling.innerText;
	   	    content += "<li>"+  id + " / " + name + "</li>";
	   	    
	   	   /*
	   	   $("#demo").html( function ( index, oldhtml){
	   		   // return oldhtml +"<li>"+ id +" / " + name + "</li>";
	   		   return oldhtml + $("<li></li>").text(  id +" / "+ name );
	   	   });
	   	   */
	   });
	   
	   $("#demo").html(  content  ) ;
   } );
</script>

 

-모든박스 체크누르면 다 체크 & 체크 하나 풀면 모두체크 풀기-

<script>
   $(":checkbox.all").click( function (){
	   $(":checkbox:not(.all)").prop("checked",  $(this).prop("checked") );
   });
   
   $(":checkbox:not(.all)").click( function (){
	    //  체크된 체크박스의 갯수
	    var totalCount = $(":checkbox:not(.all)").length;
	    var checkedCount = $(":checkbox:not(.all):checked").length;
	    
	    $(":checkbox.all").prop("checked", checkedCount == totalCount ? true: false);
	    /*
	    if(   checkedCount == totalCount  ){
	    	$(":checkbox.all").prop("checked", true);
	    }else{
	    	$(":checkbox.all").prop("checked", false);
	    }
	    */
   });
</script>

---

js 함수

  1. js 함수 개념 == 자바 함수 개념

     - 선(line) 긋기 : 50번  X  50줄코딩         drawLine() 선언 -> 호출,  오버로딩(중복함수)

  2. js 함수 선언 형식

function 함수명([매개변수...]){
  [return 리턴값;]
}

   3. js 함수 호출 3가지 방법..

         1) on이벤트명 속성 = "js함수();"

         2) js 코드에서  js함수 호출

         3) 자동( 자체 호출)  X -> "js 클로저"

 

<button onclick="btn1_click();">버튼 1</button><br>
<button onclick="btn2_click();">버튼 2</button><br>

<script>
   // 두 정수의 합을 반환하는 sum 함수 선언
   /*
   public static int sum(int a, int b){
	   return a+b;
   }
   */
   function sum(a,b){
	   // 함수 안에 선언된 변수 : 지역변수
	   
	   return a+b;
   }

   function btn1_click(){
	   var result =  sum(10,20);
	   alert(   result  );
   }
   
   function btn2_click(){
	   //
	   //
	   // btn1_click();
	   // js 자료형 :  number, string, boolean, function, object
	   
	   //var fnhap = sum;
	   var fnhap = function (a, b){
		   return a+b;
	   }
	   
	   var result =  fnhap(1,2);
	   alert(   result  );
   }
   
   // btn1_click(); // 함수 호출
   
   (function (){  // 익명 함수
	   //
	   //
   })();
</script>

   function btn1_click(){
	   // var name = "홍길동";	    // 함수 안에서만 사용되는 지역변수
	   name = "오승주";            // var, let, const, X  전역변수
	   alert( "1 : " +  name );
   }
   
   function btn2_click(){
	   alert( "2 : " +  name );
	   // alert( "2 : " +  window.name );
   }

---

undefined와 null 비교

    var msg;
    // if( msg == null ){}
    
    // alert(  typeof msg );   // undefined 타입
    // alert( typeof null);      // object 타입
    
    // alert(    undefined  ==  null  ); // true
    // alert(    undefined  ===  null  ); // 값 +  타입

  //var person ;           // undefined 타입
  //var person = null;  // object 타입
  
  var name = "";        // string 타입
  var name ;               //  undefined 타입 == 아직 값이 할당되지 않아 타입이 결정되지 않았다.

---

 js 객체(개체,object)

   // 1. js 객체               {} 중괄호                           - 배열  []대괄호
   //    js 객체는 속성이라고하는 명명된 값들의 집합(컨테이너)이다. 
   
   const person = {
	   name:"admin" , 
	   age:20,
	   dispInfo:function (){
		   return this.name + ", " + this.age;  
		   // 이때 this는 js 객체 자기 자신을 나타낸다. 
	   }
   };
   
   console.log(   person.name   );  // objectName.propertyName;
   console.log(   person["name"]   ); // objectName["propertyName"]
   console.log(   person.dispInfo()   );

---

엄격모드 선언 (변수는 꼭 선언하고 사용하겠다)

"use strict";

---

this의 사용처 따른 의미

- js 에서는 [ this 키워드 ]가 사용되는 곳(방법)에 따라 다른 객체를 가리킨다. ( 기억 )

       //(1) [object Window]          BOM 최상위 객체
       alert( this ); 
       
       // (2) 함수 안에서              this    [object Window] 
       //                   엄격모드       this    [undefined]
       function test(){
    	   alert( this );
       }
       test();
       
       // (3) 이벤트 핸들러(수신기)에서 this
       function h3_click(){
    	   alert( this )
       }
       
       // (4) person 객체 내의  this 는 객체 자기 자신(  object )
       var person = {
    		   name:"admin"
    		   , dispInfo: function (){
    			   //  return this.name ;
    			   alert( this );  // [object Object]
    		   }
       }
       
       person.dispInfo();  // [object Object]

<!-- 이때 this는 이벤트를 받은 객체를 나타낸다.  [object HTMLHeadingElement] -->
<h3 onclick="alert( this );">ex05.html - 엄격모드 선언,  this의 사용처 따른 의미, 이벤트 처리</h3>

---

이벤트 처리

1) on이벤트명=""

2) document.getElementById("demo").on이 벤트명 = function (){}     

3) document.getElementById("demo").addEventListener("click", function(e) { } );

---

js 문자열

    var msg = "AB\"CD\"EFGHIJKLMNOPQRSTUVWXYZ";
    
    // 1. 문자열 길이 -  length 속성
    console.log( "1. msg 문자열 길이 : " +   msg.length );  // 28
    
    // 2. 두 문자열 비교  -    ==  !=    ===  !==  연산자. 
    var name1 = "홍길동";                   // string
    // var name2 = "홍길동";
    var name2 = new String("홍길동");   // object        // String
    alert( typeof name1); // string
    alert( typeof name2); // object
    // java     equals()
    // js          ==
    console.log(  name1 == name2 );  // true                             true
    console.log(  name1 === name2 );  // true        값 + 타입      false       !==

개행제어문자

\n      \t     \b     \f     \r

메서드

   var msg = "     hello world     ";
   // console.log(  "["+ msg.trim() +"]" );
   
   var str1 = "hello",  str2 ="world";
   // 두 문자열 연결(결합) :  + 문자열 연결 연산자. 
   // var str3 = str1 + " " + str2;
   // var str3 =  str1.concat("-").concat(str2);
   var str3 =  str1.concat("-", str2, "연결문자열");
   // console.log( str3 );

대문자변환

    msg = "Hello World!!!";
    // 대문자 변환
    //console.log(   msg.toUpperCase()  );  // HELLO WORLD!!!
    //console.log(   msg.toLowerCase()  );  // hello world!!

---

팀원이름  :
<input type="text" value="김가율(팀장), 조민경(기술고문), 임희진, 이재민, 엄태혁, 황수빈, 박혜은">

<div id="demo">
   <!-- <li>김가율</li>
   <li>조민경</li> -->
</div>

                                          // :text   jquery selector
   document.querySelector("input[type=text]").onkeydown = function (){
	   if( event.keyCode == 13 ){
		   // 1. 텍스트박스에서 입력받은 팀원명을 얻어와서.
		   var team = this.value;
		   // console.log( team );
		   // 2. 구분자 콤마(,)로 문자열을 잘라내기.
		   // 3. js 배열 저장
		   var teamList = team.split(",");
		   // 4. js 배열을 for/ 반복문 사용해서 <li>김가율</li>
		   // 5. <div id="demo"> 자식으로 추가,  innerHTML 설정.
		   var demo = document.querySelector("#demo");
		 
		   /*
		   // DOM 
		   for (var i = 0; i < teamList.length; i++) {
			  // console.log(  teamList[i].trim()  );
			  var li = document.createElement("li");
			  li.innerText = teamList[i].trim();			  
			  demo.appendChild( li );
		    } //for
		   */
		   
		   var content = "<ol>";
		   for (var i = 0; i < teamList.length; i++) {
			   content += "<li>";
			   content += teamList[i].trim();	
			   content += "</li>";
		   } // 
		   content += "</ol>";
		   // <ol><li>김가율(팀장)</li><li>조민경(기술고문)</li><li>임희진</li><li>이재민</li><li>엄태혁</li><li>황수빈</li><li>박혜은</li></ol>
		   // alert( content );
		   
		   demo.innerHTML = content;

---

js  정규표현식

   // 1. 생년월일
   // 2. 성별
   // 3.  만나이
   // 4. 검증
   var rrn = "781222-170001";   
   // console.log( rrn.length ); // 14
   // 숫자6-숫자7                                   true/false   rrn.matches( 정규표현식)
   // [ js   정규표현식 ] - 문자열 메서드 : search(), replace(),  test(), exec()
   //   형식)                      /pattern/modifiers
   //                                 /[0-9]{6}-\d{7}/i              [i,g,m]
   // pattern = /정규표현식/모드 ;
   // boolean pattern.test( 문자열)
   var pattern =    /^[0-9]{6}-\d{7}$/                ;  
   // console.log(  pattern.test(rrn) ); 
   //            /^[0-9]{6}-\d{7}$/.test( rrn )
   
   // 생일 년도
   // 생일 월
   //console.log( rrn.substring(2, 4)  );  // to
   //console.log( rrn.substr(2, 2)  );  // length
   //console.log( rrn.slice(2, 4) );
   
   // 주민등록번호 뒷자리 7 출력.
   console.log(  rrn.substring( 7 ) );  // 170001
   console.log(  rrn.substring( 7, 14 ) );  // 170001
   console.log(  rrn.substring( 7, rrn.length ) );  // 170001
   
   console.log( rrn.substr(7)  );  // from   [, length]
   console.log( rrn.substr(7, 7)  );  // from , length
   
   console.log( rrn.slice(7)  );
   console.log( rrn.slice(7, 14)  );   // from , to
   // 차이점
   console.log( rrn.slice(-6)  );  // 음수:뒷 자리수
   
   
   // 생일 일
   // 성별
   //rrn.substring(from, to);
   //rrn.substr(from, length);
   // rrn.slice(from, to);

<script>
   var input = "\nIs  Th \nis it?";
//   var pattern =   /^is/;
//   var pattern =   /^is/i;
   var pattern =   /^is/m;              /*  [m]ultiline */
   //console.log(  pattern.test( input ) );
</script>

<script>
   var input = "Visit Microsoft!";
   // var pattern = "Microsoft";  // string
   // var pattern = "microsoft";
   var pattern = /microsoft/i;     // regexp
   var index =  input.search(pattern);
   //console.log( index );  // 6  ,            -1   
   //console.log(  input.replace(pattern,  "XXX") );  // Visit XXX!
</script>

---

js 문자열 메서드

   var msg = "안녕하세요, 홍길동 입니다. -홍길동 왈 - ";
   
   // var pattern = "홍길동"; // string
   var pattern = /홍길동/g ;             // regexp             i    m    g
   var replacement = "YYY";
   console.log(  msg.replace(pattern, replacement)  ); 
   
   // msg.replaceAll(target)
   
   // msg.indexOf("홍길동", 0);
   console.log(   msg.indexOf("홍길동")  ); // 7
   
   // msg.lastIndexOf(elt, from)

   //console.log(  msg.charAt(0) );
   // console.log(  msg.charAt(1) );
   
   for (var i = 0; i < msg.length; i++) {
	  //  console.log(  msg.charAt(i) );
  }

    // "7"  ->  7 형변환 ?       Java :  Ineger.parseInt()
   //                                      js    : Number() , parseInt(), parseFloat(), eval()
   //  7   -> "7"  형변환 ?     7 + ""          "7",            new String(7)
    /*
     let no = 7 + "";
     //    "0007"              String.format("%04d", 7)    "0007" StringFormat 
     no = no.padStart(4, "0");
     console.log( no );   //  "0007"
     */
     
     let no = "17";
     var len = no.length ;
     
     for (var i = 0; i < len ; i++) {
		no = "0" + no;
	}  
    //  console.log(  i + " : " + no );	
     
     // padStart() , padEnd()   새로 추가된 메서드(2017)         -   ES5(2015)

   var msg = "    hello world    ";
   console.log( "["+ msg.trim() +"]" );           // [hello world]
   console.log( "["+ msg.trimStart() +"]" );  // [hello world    ]
   console.log( "["+ msg.trimEnd() +"]" );     // [    hello world]