[Day2] JS 2 - 변수, 연산자, 자료형, 키보드

[Day2] JS 2 [11/21] 

 

--복습--

1. 모두 선택 체크박스 처리 

<div>
      <input type="checkbox">모두 선택
      <br>
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
</div>

   

   모두 선택이라는 체크 박스를 체크하면 나머지 모든 체크 박스를 체크하도록 코딩하세요.

-js-

  <script>  
   document.querySelector("div > input[type=checkbox]:first-of-type").onclick = function (){
	   // aler t("이벤트 확인")
	   //alert( this.checked );
	   // getAttribute()
	   
	   // :not(selector)
	   var ckbs = document.querySelectorAll("div > input[type=checkbox]:not( input[type=checkbox]:first-of-type)");
	   for (var i = 0; i < ckbs.length; i++) {
		  ckbs[i].checked = this.checked ;
	   } // for	   
   }
</script>

-jquery-

// $(":checkbox:first-of-type").click(function (){
$(":checkbox").eq(0).click(function (){
  // $(":checkbox:not:(first-of-type)")
  
  // filter로 첫번째가 아닌 것들 확인
  $(":checkbox").filter(function(index){
    return index >=1;
    })
    .click(function() {
      $(this).hide();
    });
  });
  
  // 진짜코딩
  $(":checkbox")
    .filter(function(index){
      return index >= 1;
    }).prop("checked", $(":checkbox").eq(0).prop("checked"));
    // .prop("checked", $(this).prop("checked"));
  });

* $("input[type=checkbox]") = $(":checkbox")

 

2. p 태글 동적으로 10개 생성하고,  p 태그를 클릭할 때 그 p 태그를 숨기는 js 코딩을 하세요 

-js-

 <script>
   for (var i = 1; i <= 10 ; i++) {
	 // DOM 사용 - 요소 조작(  생성, 수정, 삭제  )
	 // Document    Object Model 
	 //      문서     -> 객체             +  속성, 메서드
	 let pEle = document.createElement("p");  // Node	 
	 pEle.innerText = "생성된 p - " + i;
	 pEle.style.border = "1px solid gray";
	 // pEle 클릭 이벤트 등록 - addEventListener()/ removeEventListener()
	 pEle.addEventListener("click", function( ) {
	 	this.style.display = "none";
	 });	 
	 document.body.appendChild(pEle);	 
  } // for
 </script>

* DOM : 문서를 객체화시키는 것 (속성 메서드를 사용해서)

  ex) document.createElement("p") -> 요소 생성 DOM 메서드

-jquery-

<script>
  // jquery method :  body.append( p ),    p.appendTo(body)
  for (var i = 1; i <= 10 ; i++) {
  $("<p></p>")
    .text( "생성된 p - " + i)
    .css("border", "1px solid red")
    .click( function (){
      $(this).hide();
    })
    .appendTo($("body"));
  } // for
 </script>

* append 종류 두가지

  

 

3. select 태그에서 과목을 선택해서  라디오버튼의 선택한 과목을 체크하는 js 코딩을 하세요

 <select id="selsubject" >
   <option>선택하세요.</option>    
   <option value="kor">국어</option> 
   <option value="eng">영어</option> 
   <option value="mat">수학</option>
   <option value="pe">체육</option> 
</select>
 <br>
 <input type="radio" name="subject"   value="kor"><label>국어</label>
 <input type="radio"  name="subject"  value="eng"><label>영어</label>
 <input type="radio"  name="subject"  value="mat"><label>수학</label>
 <input type="radio"  name="subject"  value="pe"><label>체육</label>

-js-

 <script>
    document.getElementById("selsubject").onchange = function (){
    	// console.log( "이벤트 확인~" );
    	// alert(  this.selectedIndex );
    	// options 컬렉션
    	var svalue = this.options[this.selectedIndex].value ;
    	// alert( this.options[this.selectedIndex].text );
    	// alert(  svalue );
    	if(svalue == "선택하세요."){
    		alert("과목만 선택하세요.");
    		return;
    	}
    	
    	var radios = document.getElementsByName("subject");
    	// alert( radios.length );
    	for (var i = 0; i < radios.length; i++) {
			if( radios[i].value ==  svalue ){
				radios[i].checked = true;
				break;   // return;
			} // if
		} // for
    	
    }
 </script>

-jquery-

 <script>
    $("#selsubject").change(function() {
    	 // var svalue =  $(this).val() ;              // "kor"
    	 
    	 // $("input[type=radio]")
    	 // jquery selector    -   :radio   
    	 // jquery method    -  each() 
    	 /*
    	 $(":radio").each(function(i, element) {
    	 	  if(  $(element).val() ==  svalue )  $(element).prop("checked", true);
    	 });
    	 */
    	 $(":radio[value="+  $(this).val()  +"]").prop("checked", true);
    	 
    });
 </script>

3-1. 라디오 버튼 선택 -> select 선택

-js-

 <script>
     /*
     // document.getElementById("selsubject").options
     // children - DOM 메서드 
     var ops = document.getElementById("selsubject").children;
     // alert( ops.length );
     // ops[4].setAttribute("selected", "selected");
     ops[4].selected = true;
     */
     
     var ops = document.getElementById("selsubject").children;
     
     var radioIndex = 0;
     var radios = document.getElementsByName("subject");
     // [문제] index  
     //   왜 ?    4
    // let 키워드 / var 키워드 차이점 X		 
     //for (var i = 0; i < radios.length; i++) {  	 
     for (let i = 0; i < radios.length; i++) {	 
		// if( radios[i].checked ) radioIndex = i;
		radios[i].onclick = function (){
			 // alert( i + " /  " + this.value ) ;
			ops[i+1].selected = true;
		} // click
	} // for
	// alert( radioIndex  )  
 </script>

-jquery-

<script>
   // var opts =   $("#selsubject > option");
   $(":radio[name=subject]").click(function() {
   	     //  jquery method :  index()
   	     var idx =   $(":radio[name=subject]").index( this );
         // alert( idx );
         // ex01.html:48 Uncaught TypeError: $(...)[(idx + 1)].prop is not a function
         //$("#selsubject > option")[idx+1].prop("selected", true);
         $("#selsubject > option").eq(idx+1).prop("selected", true);
   });
</script>

5. <img src="../images/pic_bulboff.gif" alt="" id="bulb">

   마우스를 올리면 불이켜지고, 마우스를 내리면 불이 끄지도록 js 코딩하세요.

-js-

   var blub = d.g("bulb");
   blub.onmouseover = function (){
       this.src = "on.gif";
       event.srcElement = "on.gif";
   }
   blub.onmouseout = function (){
      this.src = "off.gif";
       event.srcElement = "off.gif";
   }

-jquery-

   $("#bulb").hover(
       function (){  // mouseover
           attr() / prop()
       }, 
       function (){  // mouseout
       } 
   );

---

변수

[ js 변수를 선언 4가지 방법 ]

    1)  var i;

    2)  let i; 

    3)  const i;

    4)  i=100;

    

 1. 변수 ?   데이터  저장 공간

 2. 식별자(변수) 선언 형식   

    1) 문자, 숫자, _ , $ 포함될 수 있다.

    2) 숫자로 시작 X

    3) var $$$$;    X  왜 ?    jQuery(selector)   ==    $(selector)

    4) 대소문자 구분 한다. 

    5) 예약어 X     var _var;

 

- var 키워드 : 2015  까지 js 코딩 사용

- let 키워드  + const 키워드 : 2015( ES6 ) 이후 추가

 

- var 키워드로 선언한 변수는 중복 선언 O + 값 유지

- let 키워드로 선언한 변수는 중복 선언 X

 

- var lastName =   '문자열' ;

- z =   1 + "2";       =>    "12"

   z  = 1 + 2 + "3"       =>  3 +"3"  => "33"

- let $$ = 200;  가능하다.  (jquery 때문에 $사용하지말자)

---

let 키워드

  1.   let 로 선언된 변수는 재선언할 수 없다.

  2.  let 로 선언된 변수는 사용하기 전에 선언해야 된다. 

  3. let로 선언된 변수는     글로벌 범위, 함수 범위  + 블록범위

      var                             글로벌 범위, 함수 범위

// Global Scope( 전역변수 )
     var x ;
     
     function test(){
    	 // Function Scope ( 지역변수 )
    	 var y;
 
    	 // Block Scope
    	 {
    		 let z ;
    	 }	 
     }

*호이스팅 : 블럭 맨 위로 선언된 코딩이 올라감 (var O let X)

---

const 상수

    1. 재선언 할 수 없다. 

    2. 재할당 할 수 없다. 

    3. 블록모드( block scope ) O

    

    [ js  에서 const 키워드 사용 ? ]

    항상 변경할 수 없는 .....

    const array

    const object

    const function

    const RegExp

 

*typeof

var data;  // [ undefined ]
data = 10;   // 정수 [ number ]
data = 3.14; // 실수 [ number ]
data = "admin"; //  문자열 [ string]
data = true;      //            [ boolean ]
data = [];           // [] == js 배열  [ object]
data = {};           // {} == js 객체(Object) [ object]  
data = function (){};  // js 함수  [ function ]
data = 'a';             // js char X     [ string ]

// typeof 연산자
alert( typeof ( data ));

---

[ js 연산자 ]

   1. 산술 연산자.

   2. 할당(대입) 연산자.

   3. 비교 연산자

   4. 논리 연산자

   5. 조건 연산자        ?:

   6. 유형 연산자 

<script>
     // 증감연산자      ++   --
     
     // 문자열 연결연산자  +                 "홍길동" + "님"
  
</script>

<script>
   // type(유형) 연산자
   // typeof (10)   number
   
   //  instanceof 연산자
</script>

<script>
   // &&   ||   !
   /*
   console.log(  true  &&   true);
   console.log(  true  ||   true);
   console.log(  !true  );
   */
   // js 비트 연산자 :  &  |  ^ ~  ,                             <<    >>    >>>  
</script>

<script>
   /*
   console.log(   3  ==  5  );
            console.log(   3  ===  5  );  // euqal   value + type  타입까지 비교하는 연산자.
   console.log(   3  !=  5  );
            console.log(   3  !==  5  );   // not equal  value + type
   console.log(   3  >  5  );
   console.log(   3  <  5  );
   console.log(   3  >=  5  );
   console.log(   3  <=  5  );
   */
   // ===
   // !==
   //	 ? :    삼항(조건) 연산자
</script>

<script>
   /*
    var x = 5;   //  =  할당 연산자
    x += 5;     // +=  복합 대입 연산자
    x -= 5;
    x *= 5;
    x /= 5;
    x %= 5;
    x **= 5;     누승(power)
    */
</script>
<script>
    /*
    console.log(  3 + 5  );  // 덧셈 연산자   8
    console.log(  3 - 5  );  // 뺄셈 연산자   -2
    console.log(  3 * 5  );  // 곱셈 연산자   15
    console.log(  3 ** 5  );  // Math.pow(3,5)  누승 연산자
    // console.log(  3 / 0  );  // 나눗셈 연산자   0.6
    // 정수 / 0 Infinity(무한대)
    console.log(  3.1 / 0  );  // 나눗셈 연산자   0.6
    // 실수 / 0 Infinity(무한대)
    
    // console.log(  3 % 5  );  // 나머지 연산자  3
    // console.log(  3 % 0  );  // NaN ( == Not a Number )
    */
</script>

---

자료형( data type)

  [ typeof 연산자 ]

  1.  number

  2. string 

  3. boolean

  4. function 

  5. object  - js array,  js object

  

  js 타입(유형)은  동적 유형이다.  

    var x;         // typeof    undefined
    x = 5;          //        "          number
    x = "admin"; //      "           string
    x = [] ;           //                object
    x = function (){}  //       function 
    
    
    [지수 표기법]
    let y  =  123e5;     //12300000;
     y = 123e-5;          //0.00123
     
     [js  정수,실수 = number]
     let z = 100;
     z = 3.14;
     
     
     [typeof 연산자]
     
     console.log(   typeof   100 );
     console.log(   typeof   (100) );
     
     
     var xx;         // undefined
     var xx = "";  // string

// js 배열   -              대괄호   []
   // let m = [ 1,2,3 ];
   
   /* 
   let m = [];
   m[0]=1;
   m[1]=2;
    m[2]=3;
    */
    
// js 객체 -    중괄호를 사용한다.  {}
    let p1 = { 
    		           name:"admin"
    		           , age:20 
    		     };
    console.log( p1.name );
    console.log(  p1["age"]);

---

   [ 키보드 관련 이벤트 ]

   1. keydown 이벤트   :  키보드를 누를 때   Ctrl, F1 인식 O, 대소문자 구분 X, 키보드 취소 가능

   2. keypress 이벤트  :  키보드를 누를 때   Ctrl, F1 인식 X, 대소문자 구분 O, 키보드 취소 가능

   3. keyup 이벤트      :  키보드 놓을 때

<style>
  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* css 선택자 */
  input[type=text]{
     border: 1px solid grey;
     padding: 5px;
     font-size: 20px;
     margin:10px;
     width:90%;
  }
  
  /* 특정상태 ,   :의사클래스 */
  input[type=text]:focus{
     background-color: yellow;
  }
</style>

<!-- autofocus="autofocus" -->
<input type="text"  id="txt01"  tabindex="1"  onkeyup="txt01_keyup();">
<br>
<input type="text"  id="txt02"  tabindex="2">

<script>
    // global scope
    var txtbox01 ; 
    let  txtbox02;

     window.onload = function (){
    	 // 초기화
    	 // function scope
    	 // var txtbox01 = document.getElementById("txt01");    	 
    	 txtbox01 = document.getElementById("txt01");
    	 txtbox02 = document.getElementById("txt02");
    	 
    	 txtbox01.focus();
    	 
    	 // focus  : 초점을 맞출 때 일어나는 이벤트 
    	 // blur    : 초점을 잃을 때      "
     }
     
     function txt01_keyup(){
    	 /*
		 // 이벤트 정보 :  event 객체 
		 // event.srcElement 이벤트가 발생한 객체
		 // console.log( event.type ); // "keyup"		 
		 let uniCode = event.keyCode ;
		 txtbox02.value = uniCode + "(" + String.fromCharCode(uniCode)  +")";
		 */
		 
		 // 입력을 끝낸 후 엔터키를 누를 때....  
		 if (  event.keyCode  == 13 ) {
			 txtbox02.value =  txtbox01.value;
		} // if
	 
	 } // txt01_keyup
     
</script>

---

항의 갯수 선택 

<select id="count">
   <!-- option[value=$]*15>{$} -->
</select>

ㄴ 동적추가

 

-js-

    // selectIndex 속성
    // options 컬렉션
    // options[selctedIndex].value
    // options[selctedIndex].text
    // new 연산자
    // Option 객체 ( text, value)
    var count =  document.getElementById("count");
    count.options[0] = new Option("선택하세요.", 0);
    
    for (let i = 1; i <=15; i++) {
    	count.options[i] = new Option(i, i);
	}
    count.options[10].selected  = true;   // setAttribute("selected", "selected")

-jquery-

   $("#count").append(  $("<option value='0'>선택하세요.</option>") );
   for (let i = 1; i <=15; i++) {
	   $("#count").append(  $("<option value='"+i+"'>"+i+"</option>") );
	} // for
	$("#count option").eq(15).prop("selected", true);

---

팀원 이름 입력 

<input type="text"  id="name" name="name" autofocus="autofocus" >
  <!-- onkeydown="name_keydown();" -->
<br>
<div  id="demo">
</div>

ㄴ 동적추가

 

-js-

<script>
   function name_keydown(){
	   var demo = document.getElementById("demo");
	   
	   if( event.keyCode == 13 ){  // 엔터 칠 때
		   var name = document.getElementById("name");
	   
		   // 1.
		   // demo.innerHTML += "<input type='checkbox' value='"+ name.value+"'>" + name.value +"<br>";
		   
		   // 2. DOM 요소 생성 추가
		   var ckb = document.createElement("input");  // <input>
		   ckb.setAttribute("type", "checkbox"); // <input type='checkbox'>
		   ckb.setAttribute("value", name.value); // <input type='checkbox'  value='엄태혁'>
		   demo.appendChild(ckb);
		   
		   var textnode = document.createTextNode( name.value );
		   demo.appendChild(textnode);
		   
		   var br = document.createElement("br"); 
		   demo.appendChild(  br  );
		   
		   name.value = "";
		   name.focus();
	   } // if
   } // function
</script>

 

-jquery-

<script>
   $("#name").keydown(function() {
   	    if( event.keyCode == 13 ){
   	    	var value = $(this).val();
   	    	
   	    	//var content = "<input type='checkbox' value='"+ value +"'>" + value +"<br>"; 
   	    	//$("#demo").append($(content));
   	    	
   	    	var $ckb = $("<input>").attr({
   	    		type:"checkbox",
   	    		value:value
   	    	})
   	    	
   	    	var $text = $("<lable>"+  value +"</label>");
   	    	
   	    	/*
   	    	$("#demo")
   	    	    .append($ckb)
   	    	    .append($text)   	    	    
   	    	    .append($("<br>"));
   	    	*/
   	    	$("#demo").append($ckb, $text, "<br>");
   	    	
   	    	$("#name")
   	    	      //.val("")
   	    	      .select()
   	    	      .focus();
   	    } // if
   });
</script>