[Day7] JS 7 - 클로저, dragdrop, 컬렉션, BOM, 팝업창, 모달창

[Day7] JS 7 [11/28]

js 함수 클로저( closures ) *** : https://www.youtube.com/watch?v=tpl2oXQkGZs

js 변수

1) 지역변수 - funtion scope, block scope

호출 생성-> 종료 삭제

2) 전역변수 - global scope

다른 페이지로 이동, 창 닫힐 때 , 즉 페이지 유지 될 때까지..

js 클로저 ( 폐쇄 )

- 전역변수를 로컬(지역)에 선언해서 비공개적으로 만들 수 있다.

- 은닉화 가능

<1> js 중첩 함수 이해.

    function add(){
    	let counter = 0; // 지역변수 ->  js 클로저
    	// counter += 1 ; // 1 증가
        function plus(){  // js 중첩 함수를 지원한다. 
    		// 중첩함수(plus) 안에서  상위(부모)함수(add)의 지역변수에 접근 가능
    		counter += 1;
    	}
    	plus();  // 중첩함수 호출 코딩.
    	
    	return counter;    	
    } // add
    
    $("#demo").html(  add() );

<2> plus() 중첩함수를 add() 함수를 통하지 않고 외부에서 접근할 수 있다면 add() 함수 안의 let counter = 0; // 지역변수 초기화 하는 코딩을 한 번만 실행되어 초기화 되고

[ js 클로저 ]
- 1) js 중첩함수
- 2) add() X, plus() 호출 -> 자체 호출 함수

js 클로저 = 중첩함수 + 자체호출 함수

  //자체 호출 함수
  var plus =  (function (){         //  자체호출 함수 - 1번 실행
					   let counter = 0; // 지역변수 -> 전역변수 (  폐쇄  )
					   
					   return function (){   // 함수의 리턴값이      중첩함수
						   // 부모함수의 지역변수를 접근할 수 있다. 
						   counter += 1;
					       return counter;
					   };
				   })();
   
   $("button").click(function() {
   	   $("#demo").html(   plus()  );
   })

- 왜 ? counter 지역변수를 전역변수로 선언하면 쉽게 해결 ...-> js 클로저

- js 클로저는 부모함수가 닫힌 후에도 부모 범위 엑세스할 수 있는 함수

클로저함수 사용하는 이유

<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>

클로저 X

    // 각 버튼 20개  +  counter 20 개 전역 선언
    var count1 = 0;
    var count2 = 0;
         :
    var count20 = 0;

    var counts = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
    // var counts = [];
    // for( : i<20  )  counts.push(0)
    
    $("button").click(function() {
    	  // jquery method :   index()
    	  var idx = $(this).index();
          $(this).html(  ++counts[idx] );
    });

클로저 O

	// jquery
	 $("button").click(
		     (function() {  //  자체 호출 함수 + 실행
   	              let count = 0; //
   	              return function (){  // 중첩 선언
   	            	  event.srcElement.innerHTML = ++count;
   	              };
               })()           
		   );
	
	// js
	 var btns = document.getElementsByTagName("button");
	 for (var i = 0; i < btns.length; i++) {
		btns[i].onclick = ( function (){    // 자체 호출 함수
			                             let counter = 0;
			                             return function(){   // 중첩함수
			                                        event.srcElement.innerHTML = ++counter;
		                                              }; 
		                           })();
	};

예제)

var counterObject = (function (){            // 자체 호출 함수
	let counter = 0; // 지역변수 -> 전역변수 
	function changeBy( value ){  // 중첩함수
		counter += value;
	}
	return {// js 객체 리턴
		increment:function (){ changeBy(1)},
		decrement:function (){ changeBy(-1)},
		value:function (){ return counter;}
	};          
})();
  
console.log( counterObject.value() ); // 0
counterObject.increment();
counterObject.increment();
counterObject.increment();
console.log( counterObject.value() );  // 3
counterObject.decrement();
console.log( counterObject.value() );  // 2

예제2)

   var btns =  document.querySelectorAll(".myProgress button");
   for (var i = 0; i < btns.length; i++) {
	   btns[i].onclick = function (){
		   // this == event.srcElement == 클릭된 버튼 
		   var btn = event.srcElement;
		   var width = 1;  // let counter = 0   지역변수 -> 전역변수 ( 클로저)
		   var timer = setInterval(function() { // 중첩함수
			   
			   if( width < 100){
				   width++;
				   // <div id="myBar1" class="myBar">1%</div>
				   btn.previousElementSibling.style.width = width +"%";
				   btn.previousElementSibling.innerHTML = width +"%";
			   }else{
				   clearInterval(timer);
			   }
		   	
		   }, 30);
	   }
   } // for

   $(".myProgress button").click( function (){
	   var btn = $(this);
	   var width = 1; 
	   var timer = setInterval(function() { // 중첩함수
		   if( width < 100){
			   width++;
			   // jquery method :     prev(), next()
			   // js             "        :    previousElementSibling, nextElementSibling
			   btn.prev().css("width", width+"%");
			   btn.prev().html( width +"%" );
		   }else{
			   clearInterval(timer);
		   }
	   }, 30);
   });

dragdrop

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

    // jquery-ui.js 외부 js 파일
    $("#draggable").draggable();
    
    $("h3").draggable();

예제)

  .myDiv{
    background-color: #f1f1f1;
    text-align: center;
    border:1px solid #d3d3d3;
    
    position: absolute;
    
    z-index:9;
  }
  .myDivHeader{
    padding: 10px;
    cursor: move;
    z-index:10;
    background-color: #2396F3;
    color:#fff;
  }

<!-- #myDiv1.myDiv>#myDiv1Header.myDivHeader -->
<div id="myDiv1" class="myDiv">
	<div id="myDiv1Header" class="myDivHeader">Click Here</div>
	<!-- p*3>lorem1 -->
	<p>Lorem.</p>
	<p>Nesciunt.</p>
	<p>Reiciendis.</p>
</div>
<div id="myDiv2" class="myDiv">
	<div id="myDiv2Header" class="myDivHeader">Click Here</div>
	<!-- p*3>lorem1 -->
	<p>Lorem.</p>
	<p>Nesciunt.</p>
	<p>Reiciendis.</p>
</div>

    function draggable( elemt){
    	
    	var elemtX = 0, elemtY = 0;
    	var moveX = 0,  moveY = 0;  // 이동한 x,y 좌표
    	                                                  // "myDiv1"
    	if(  document.getElementById(   elemt.id +"Header"  ) ){
    		document.getElementById(   elemt.id +"Header"  ).onmousedown = dragMouseDown; // 이벤트 핸들러 등록
    	}
    	
    	// 중첩함수
    	function dragMouseDown( e ){
    	    e = window.event || e;           // event
    	    // console.log( e.clientX + " / " + e.clientY );
    	    
    	    // divHeader 위에서 마우스다운 할 때 의 X,Y 좌표 저장
    	    elemtX = e.clientX ;
    	    elemtY = e.clientY ;
    	    
    	    document.onmousemove = elementDrag ;
    	    document.onmouseup = closeDragElement;
    	    
    	}
    	
    	// mousemove
    	function elementDrag(){
    		e = window.event || e;           // event
    	    // console.log( e.clientX + " / " + e.clientY );
    		moveX = elemtX - e.clientX;  // - 음수
    		moveY = elemtY - e.clientY;
    		
    		// elemt.left;             -> "10px" 문자열
    		// elemt.offsetLeft; -> 10 
    		elemt.style.left = (  elemt.offsetLeft - moveX    )+"px";
    		elemt.style.top =  (  elemt.offsetTop - moveY    )+"px";
    		
    		// 움직인 위치가 다시 요소의 시작 위치.
    		elemtX = e.clientX;
    		elemtY = e.clientY;
    		
    	}
    	
    	// mouseup
    	function closeDragElement(){
    		// 마우스 이벤트 제거
    		document.onmousemove = null ;
    	    document.onmouseup = closeDragElement;
    	}
    } // draggable
    
    
    // 
    draggable(  document.getElementById("myDiv1")  );
    draggable(  document.getElementById("myDiv2")  );

예제2)

  #container{
    width:400px;
    height:400px;
    position:relative;
    background-color:yellow;
  }
  #animate{
    width:50px;
    height:50px;    
                                         position:absolute;    
    background-color:red;
    border-radius: 50%;
  }

<button onclick="myMove();">Click Me</button>
<br>
<br>
<div id="container">
	<div id="animate"></div>
</div>

   var no = 1;
   
   function make(){
	   var newCircle = document.createElement("div");
	   newCircle.className = "animate";
	   newCircle.setAttribute("id",  "animate" + no );	   
	   document.getElementById("container").appendChild(newCircle); 
	   myMove( "animate" + no );
	   no++;
   }

  function myMove(  id ){
	  // 클로저
	  var elem = document.getElementById(   id  );
	  var posX = 0, posY = 0;
	  
	  var x = parseInt( Math.random()*8 )+2, y = parseInt( Math.random()*8 )+2;
	  
	  var timer = setInterval(function() {   //중첩함수
		  if ( posY >= 350 || posY <= 0 )  y *= -1;  // y 방향 바꾼다.
		  if ( posX >= 350 || posX <= 0 )  x *= -1;
		  
		   
             posX += x;  // 6
             posY += y; // 9
             
             if(  posX < 0  ) posX = 0;
             else if( posX > 350 ) posX = 350;
             if(  posY < 0  ) posY = 0;
             else if( posY > 350 ) posY = 350;
             
             elem.style.left = posX+"px";
             elem.style.top = posY+"px";
	  }, 10);
  }

컬렉션

1. arguments

2. options

3. forms

-----------------

4. elements

5. images

6. links

elements

<form id="form1" name="form1" action="">
  Name : <input type="text" name="name" value="admin" />
  <br>
  Age : <input type="text" name="age" value="20" />
  <br>
  Email : <input type="email" name="email" value="admin@naver.com" />  
  <button type="button" value="ok">확인</button>
</form>  

<p id="demo"></p>

   $("button").click(function() {
   	    var form1 = document.forms["form1"];
   	    var cnt =  form1.elements.length;
   	    // alert( cnt );
   	    for (var i = 0; i < cnt; i++) {
			$("#demo").html(
					$("#demo").html() + "<br>" + form1.elements[i].value
					);
		}// 
   });

네이버 태그(images, links)

   //  naver 메인페이지의   이미지태그
   var cnt =   document.images.length;
 
   for (var i = 0; i < cnt; i++) {
	 var src = document.images[i].src; 	 
	 document.write(  (i+1) +" : "  + src + "<br>"  );
	 
	 document.images[i].src = "#"; 	 
  } // for

   //  naver 메인페이지의 링크태그
   var cnt =   document.links.length;
   // alert( cnt );  // 430
   for (var i = 0; i < cnt; i++) {
	 var href = document.links[i].href;
	 var text = document.links[i].text;
	 
	 document.write(  (i+1) +" : "  + href + " / " + text +"<br>"  );
  } // for

js BOM

1. Browser Object Model ( 브라우저 객체 모델 ) 약어

2. BOM 종류

- window 객체를 모든 브라우저에서 지원한다.

- 최상위 부모 객체

- 전역변수, 함수 선언하면 자동으로 window 객체의 구성원이 된다.

- 브라우저 창(윈도우)을 나타낸다.

1) window

// ex04.html, ex04_02.html 우편번호 검색.~

2) screen

3) history

4) navigator

5) location

3. BOM- 브라우저 상호 작용 / 정보 얻+설

   var msg = "";
   
   function test(){
	   
   }
   // alert(   window.msg  );
   // window.test();
   
   // 도구모음, 스크롤막대 등을 포함하지 않는 너비/높이
  var ww = window.innerWidth;  // 창 너비
  var wh =   window.innerHeight; // 창 높이
   
   console.log(  ww + " / "  + wh );
   
   var cw = document.body.clientWidth; // 창 높이
   var ch = document.body.clientHeight; // 창 높이
   
   console.log(  cw + " / "  + ch );
   
   
   // ex03_02.html, ex03_03.html
   // 새창 열기   window.open()
   // 현재창 닫기 window.close()
   // 현재창 이동  window.moveTo(),    window.moveBy()
   // 현재창 크기 조절  window.resizeTo(), window.resizeBy();

새창열기, 창닫기

<button onclick="windowOpen();">새 창 열기</button>
<button onclick="windowClose();">창 닫기</button>

   var newWin; 
   function windowOpen(){
	   newWin = window.open("ex03_03.html", "", "width=600,height=500,top=200");   
   }
   function windowClose(){
	   newWin.close();
	   // self.close()
   }

절대위치 상대위치 절대크기 상대크기

<table border="1" style="width:100%">
   <tr>
   	<td>절대위치</td>
   	<td onclick="fn_moveto()">moveTo()</td>
   </tr>
   <tr>
   	<td>상대위치</td>
   	<td onclick="fn_moveby()">moveBy()</td>
   </tr>
   <tr>
   	<td>절대크기</td>
   	<td onclick="fn_resizeto()">resizeTo</td>
   </tr>
   <tr>
   	<td>상대크기</td>
   	<td onclick="fn_resizeby()">resizeBy</td>
   </tr>
   <tr>
   	<td><button onclick="win_shake();">창 흔들기</button></td>
   	<td><button onclick="win_close();">창 닫기</button></td>
   </tr>
</table>

   function fn_moveto(){
	   window.moveTo(10,10); // 절대 위치
   }
   function fn_moveby(){
	   window.moveBy(10,10); // 상대 위치
   }
   function fn_resizeto(){  // 절대크기
	   window.resizeTo(300,300);
   }
   function fn_resizeby(){ // 상대크기
	   window.resizeBy(10,10);
   }
   function win_shake(){
	   // moveBy(??,??)
   }
   function win_close(){
	   self.close();
   }

2) screen

3) history

4) navigator

5) location

<table border="1" style="width: 500px;margin: 0 auto">
  <tr>
    <td>우편번호</td>
    <td>
          <!-- 우편번호 input 태그는  zip1/zip2  readonly 속성에 의해 읽기 전용 -->
        <input type="text" id="zip1" name="zip1" size="3" readonly="readonly" />-
        <input type="text" id="zip2" name="zip2" size="3" readonly="readonly"/>
        <input type="button" value="우편번호 검색"  onclick="search_zipcode();"  />
    </td>
  </tr>
  <tr>
    <td>주소</td>
    <td><input type="text" id="addr1" name="addr1" style="width:90%" /></td>
  </tr>
  <tr>
    <td>상세주소</td>
    <td><input type="text" id="addr2" name="addr2" style="width:90%" /></td>
  </tr>
</table>

   var zipWin;  // undefined    ""    null  "false"       => false 
   function search_zipcode(){
	   //            새창을 띄웠다.  X
	   //           [모달창] 띄워요...
	   // alert(    Boolean( zipWin )  );  // false,          X -> true
	   
	   
	   // 창이 undefined 일 경우에는 closed 속성 X
	   // zipWin, 	   window.closed  true 창 닫힘 , false 창 열림
	   
	   // if(  !zipWin   ){   // false 라면 
      if( !zipWin || zipWin.closed   ){   // false 라면 		   
	     zipWin = window.open("ex04_02.html", "", "width=600,height=500,top=100,left=200");
	     // 열려져 있는 우편번호검색창이 있는 데도 또  새 창이 열린다.
	   }else{
		   zipWin.focus();
	   }
	   
	   // X  닫기 버튼을 클릭하니깐.. 다음부터는 검색창이 띄어지지 않네요..  + 5분  
   }

-> 우편번호 검색 누르면 04_02 뜸

<table border="1" style="width:100%">
  <tr>
    <td>
        검색할 동 입력 :
        <input type="text" id="dong" name="dong" />
        <input type="button" value="검색"  onclick="search_dong();"/> 
    </td>
  </tr>
  <tr>
     <td>
       <div id="searchResult" class="box" style="visibility: hidden;">
         <a href="javascript:sendAddr('123','451','서울 영등포구 당산 1동')">123-451</a>서울 영등포구 당산 1동<br>
         <a href="javascript:sendAddr('123','452','서울 영등포구 당산 2동')">123-452</a>서울 영등포구 당산 2동<br>
         <a href="javascript:sendAddr('123','453','서울 영등포구 당산 3동')">123-453</a>서울 영등포구 당산 3동<br>
         <a href="javascript:sendAddr('123','454','서울 영등포구 당산 4동')">123-454</a>서울 영등포구 당산 4동<br>
         <a href="javascript:sendAddr('123','455','서울 영등포구 당산 5동')">123-455</a>서울 영등포구 당산 5동<br>
         <a href="javascript:sendAddr('123','456','서울 영등포구 당산 6동')">123-456</a>서울 영등포구 당산 6동<br>
         <a href="javascript:sendAddr('123','457','서울 영등포구 당산 7동')">123-457</a>서울 영등포구 당산 7동<br>
         <a href="javascript:sendAddr('123','458','서울 영등포구 당산 8동')">123-458</a>서울 영등포구 당산 8동<br>
         <a href="javascript:sendAddr('123','459','서울 영등포구 당산 9동')">123-459</a>서울 영등포구 당산 9동<br>
         <a href="javascript:sendAddr('123','461','서울 영등포구 당산 10동')">123-461</a>서울 영등포구 당산 10동<br>
       </div>
     </td>
  </tr>
  <tr>
    <td>
      <div class="box" style="visibility: hidden;">
         '당산' 검색 결과 10개 검색되었습니다. 
      </div>
    </td>
  </tr>
</table>

   function  window_unload() {
	   // opener.zipWin = null;   // 0 , false, undefined
   }
   
   function sendAddr( zip1, zip2, addr1  ){
	   // self
	   opener.document.getElementById("zip1").value = zip1;
	   opener.document.getElementById("zip2").value = zip2;
	   opener.document.getElementById("addr1").value = addr1;
	   
	   self.close();
	   opener.document.getElementById("addr2").focus();
   }
   function search_dong(){
	   document.getElementById("searchResult").style.visibility = "visible";
	   
   }

검색해서 얻은 값을 04에 표현하기 위한 자바스크립트 코드

opener : 현재창을 연 부모창

보통 새 창 안띄우고 모달창 띄움!!!

* 띄워진 창 닫을때 다시 opener.zipWin = null값 줘야함 (window_unload())

* 아니면 zipWin.closed()

[다음 우편번호 OPEN API 사용] : https://postcode.map.daum.net/guide#usage

<input type="text" id="sample4_postcode" placeholder="우편번호">
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
<input type="text" id="sample4_jibunAddress" placeholder="지번주소">
<span id="guide" style="color:#999;display:none"></span>
<input type="text" id="sample4_detailAddress" placeholder="상세주소">
<input type="text" id="sample4_extraAddress" placeholder="참고항목">

    //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
    function sample4_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var roadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 참고 항목 변수

                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample4_postcode').value = data.zonecode;
                document.getElementById("sample4_roadAddress").value = roadAddr;
                document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
                
                // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
                if(roadAddr !== ''){
                    document.getElementById("sample4_extraAddress").value = extraRoadAddr;
                } else {
                    document.getElementById("sample4_extraAddress").value = '';
                }

                var guideTextBox = document.getElementById("guide");
                // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
                if(data.autoRoadAddress) {
                    var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                    guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
                    guideTextBox.style.display = 'block';

                } else if(data.autoJibunAddress) {
                    var expJibunAddr = data.autoJibunAddress;
                    guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
                    guideTextBox.style.display = 'block';
                } else {
                    guideTextBox.innerHTML = '';
                    guideTextBox.style.display = 'none';
                }
            }
        }).open();
    }

BOM screen

[window.screen 객체]

- 사용자 화면에 대한 정보를 가지고 있는 객체

screen.width 화면 너비

screen.height 화면 높이

screen.availWidth: 사용가능한 화면 너비

screen.availHeight: 사용가능한 화면 높이

scren.colorDepth 색 농도

16비트 : 65536가지

32비트 : 42억가지

등등

<p id="demo"></p>

  var output = "";
  output += screen.width +" / " + screen.height + "<br>";  
  output += screen.availWidth +" / " + screen.availHeight + "<br>";
  output += screen.colorDepth +"<br>";
  $("#demo").html( output );

BOM location

1. window

2. screen

3. window.location 객체

- 윈도우(창) 위치

- 현재 페이지 주소(URL)를 가져오고

- 현재 페이지 주소(URL)를 새로 설정 -> 이동 ( redirect )

<a href="ex01.html?msg=hello&age=10">ex01.html</a>
<br>
<button onclick="move()">URL이동</button>

<br>
<br>
<br>
<button onclick="history.back()">이전 페이지로 이동</button>

   var url = location.href;
   console.log( url )
   
   console.log(  location.hostname ) ; // 도메인이름 반환
   console.log(  location.protocol ) ; // 웹 프로토콜 반환
   console.log(  location.port ) ; // 포트번호 반환

    function move(){
    	// 쌍용교육센터 사이트
    	// location.href = "http://www.sist.co.kr";      속성 *****
    	// console.log( location.href );  현재 페이지 주소(URL)를 가져오고
    	
    	location.assign("http://www.sist.co.kr"); // 새 페이지로 이동  , 함수
    }

a태그 이동

<a href="ex06.html">ex06.html</a>

     $("a").click(function() {
     	// console.log("xxx");
     	var msg = "hello world";
     	var age = 20;
     	location.href="http://www.sist.co.kr?msg=" + msg +"&age=" + age;
     });

1. window

2. screen

3. location

4. window.history

- 브라우저 기록이 포함하고 있는 객체

- 사용자의 개인 정보를 보호하기 우해 접근 방법이 제한적이다.

5. history.back() 브라우저에서 뒤로 가기 버튼 == history.go(-1)

history.forward() 브라우저에서 앞으로로 가기 버튼 == history.go(1)

[js BOM]

1. window

2. screen

3. location

4. history

5. navigator

- 방문자 브라우저 정보를 갖고 있는 객체 ..

A 사람 - 크롬 10.XX -> 요청

   console.log(  navigator.appName +"<br>");  // 브라우저 응용 프로그램 이름
   console.log( navigator.appVersion +"<br>");
   console.log( navigator.product +"<br>");  // 브라우저의 엔진 이름
   console.log( navigator.cookieEnabled +"<br>"); // 브라우저의 쿠키 사용 여부  ( true )
   console.log( navigator.javaEnabled +"<br>");  // java 활성화 여부
   console.log( navigator.platform +"<br>"); // 브라우저 플랫폼(운영체제)

[ js 팝업 상자 ]

1. window.alert("문자열")

2. confirm() 확인/ 취소 버튼 과 메시지 출력

3. prompt()

  // alert( "경고창 - 대화상자");

  var message = "정말 종료할까요? ";
  var result =   confirm(message);  // 확인(true), 취소(false)
  if( result ){  // 확인 버튼 클릭...
	  self.close();
  }

   var age =  prompt("나이를 입력하세요 ? ", 20);
   alert( age );  // 확인( 입력값 ), 취소( null )

js HTML DOM

js 쿠키

<style>
   .box{
      position: absolute;
   }
</style>

<img alt="" src="../images/item01.gif">

    function getRandom( min, max){
    	return Math.floor( Math.random()*(max-min+1)+min);
    }
    
//     오른쪽 마우스를 클릭할 때 띄워지는 메뉴 : 컨텍스트 메뉴
    document.oncontextmenu = function (){
	  // alert("오른쪽 마우스는 사용할 수 없습니다. ");
	  return false;  // 이벤트 취소
  }
    
    // item01.gif~ item21.gif
    document.onmousedown = function (){
    	// 왼쪽마우스 (0)
    	// 오른쪽 마우스( 2)
    	// 가운데 휠마우스( 1)
    	// console.log(   event.button  );
    	if( event.button == 0 ){  // 왼쪽 마우스를 클릭...할 때.
    		// jquery method :  width(), height()
    		document.title = event.clientX +", " + event.clientY +" / " + $("img").width();
    		
    	      // <img>
    	     var img = document.createElement("img");
    	     //    src 속성, alt 속성 필수
    	     var imgNo =   getRandom(1, 21).toString().padStart(2, 0);
    	     var imgUrl = "../images/item"+ imgNo+".gif"    	     
    	     img.setAttribute("src", imgUrl);
    	     img.classList.add( "box");
    	     
    	     var left = event.clientX - $("img").width()/2;
    	     var top = event.clientY - $("img").height()/2;
    	     img.setAttribute("style", "left:"+left+"px;top:"+top+"px");
    	     
    	     document.body.appendChild(img);
    	     
    	} else if( event.button == 2 ){  // 오른쪽 마우스 클릭..
    		 document.body.removeChild(  event.srcElement );
    	} else if( event.button == 1 ){  // 가운데 휠마우스( 1)
    	
    	      var imgs =  document.querySelectorAll("img.box");
    	      for (let img of imgs) {
				  // document.body.removeChild(img);
				  img.remove();
			  }
    	}// if
    }

* 숫자 0004 표현법도 위 코드안에 있음

모달창 ***

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
 
  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
 
 
<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@example.com</td>
        <td>johndoe1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>

  // $( function (){ });
  
  $( function() {
	  
	// 전역 변수
    var dialog, form,
 
      // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );
 
    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function checkLength( o, n, min, max ) {
    	
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }
 
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }
 
    function addUser() {
      var valid = true;  // 유효성 검사 결과...
      
      // 
      allFields.removeClass( "ui-state-error" );
 
      valid = valid && checkLength( name, "username", 3, 16 );
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkLength( password, "password", 5, 16 );
 
      valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
      valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
      if ( valid ) {
        $( "#users tbody" ).append( "<tr>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
        "</tr>" );
        dialog.dialog( "close" );
        
        // DB insert   +  jquery ajax 
      }
      return valid;
    }
 
    // /jquery-ui.js"
    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      
      buttons: {
        "계정추가": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });
 
    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
 
    $( "#create-user" ).button().on( "click", function() {
       dialog.dialog( "open" );
    }); 
  } );

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day1] jQuery 1 - 개요, 클릭이벤트 등록 (0)	2022.11.30
[Day8] JS 8 - 모달, DOM, cookie (0)	2022.11.30
[Day6] JS 6 - set, map, 자료형, 예외처리, this, 클래스, 모듈, 객체, 함수, 스크롤, 이벤트버블링 (0)	2022.11.25
[Day5] JS 5 - 주민번호, 달력, 슬라이드쇼, 수학객체, 부울, 제어문, scrollheight (0)	2022.11.24
[Day4] JS 4 - 문자열 검색, 숫자, 배열, 날짜 (0)	2022.11.24

[Day7] JS 7 - 클로저, dragdrop, 컬렉션, BOM, 팝업창, 모달창

[Day7] JS 7 [11/28]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day7] JS 7 [11/28]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바