[Day6] JS 6 - set, map, 자료형, 예외처리, this, 클래스, 모듈, 객체, 함수, 스크롤, 이벤트버블링

[Day6] JS 6 [11/25] 

 

컬렉션 클래스 (set, map)

set

   1. set 객체를 생성  :   new Set()

   2.  특징 : 중복허용 X, 순서 유지 X

   3.  요소 추가          : add();

   3.  크기                 : size

   4. 모든 요소 처리     : values() ir(반복자 돌려줌)

   5. delete() - 요소 제거

   6. has()     - set 안에 요소 를 가지고 있는지 t/f

   7. forEach() 

   8. clear()

   var s = new Set();
   s.add("a");
   s.add("b");
   s.add("c");
   
   var s = new Set(["aa", "bb", "cc"]);
   
   s.forEach( function (el){
	   console.log( el );
   } );
   
   s.add("b");  // 중복 추가
   s.add("b");  // 중복 추가
   s.add("b");  // 중복 추가
   
   console.log( s.size );  // 3
   
   // b 요소가 있는지 확인해서 삭제(제거)
   if(  s.has("b") ){
	   s.delete("b");
   }
   
   var ir =  s.values();
   
   for (let el of ir) {
       console.log( el );	
 }

ex) 로또 출력

<button>로또 번호  발생기</button>
<p id="demo"></p>

   // [js_5일차_문제의   3-1 코딩을 Set 객체를 사용해서 수정 ]
   
    $("button").click( function (){    	
	   var lotto = new Set() ;    // var lotto = [];               1
	   var n ;
	   while (  lotto.size < 6 ) {   // 2
		    n = getRndRange( 1, 45);
	        // 3. 중복 체크 X
		    lotto.add( n );  // 4    lotto.push( n ) X
    	} // 
    	
    	// array       lotto.sort( (a,b)=> a-b); 정렬
    	// Set, Map  정렬하고자 한다면  -> 배열 변환 + 정렬 -> Set, Map 변환
	    
    	var lottoArray = [];
    	lotto.forEach(  function (el){
    		lottoArray.push( el );
    	}  );
    	lottoArray.sort((a,b) => a-b );
    	
    	$("#demo").html( "<ul><li>" +  lottoArray.join("</li><li>")  +" </li></ul>");
    	
  });
  
  // 1.   min ~ max 발생시키는 함수
  function getRndRange( min, max){
	  return  Math.floor(  Math.random()*(max-min+1)  ) + min;
  }

 

map

    1. Map 특징 -   key, value 한 쌍(entry)으로 저장.

    2.  key 중복 X 

    3. new Map()  맵 객체 생성

    4. size 

    5. set( key, value) : 엔트리 추가

    6. get( key ) : 엔트리 얻어오기

    7. has(key)

    8. delete( key )

    9. forEach()

    10. entries()

    var m = new Map(  [ 
    	                                  ["apples", 500], 
    	                                  ["bananas", 300] 
                                 ] );
    console.log(  m.size );
    
    m.set("oranges", 700);
    
    console.log(  m.get("oranges") );
    
    // 모든 entry 출력.
    m.forEach( function (value, key){
    	console.log(    value + " /  " + key  );
    });
    
    // entries()
    for (let entry of  m.entries() ) {
		// console.log( entry );  // key, value       []
	   var key =	entry[0];
		var value = entry[1];
		console.log(    key + " /  " + value  );
	}

---

js 자료형

    [ js  자료형 ( 5가지 ) ]

    number

    string

    boolean

    object

    function 

    

    [js 객체( 6가지 )]

    Object

    Date

    Array

    String

    Number

    Boolean

    

    [값을 포함할 수 없는 2가지 자료형]

    null

    undefined

 

   [ js  형 변환 ]

   1. 문자열  -> 숫자 형변환

      Number()

      parseInt()

      parseFloat()

      eval()

      

    2. 숫자 -> 문자열 형변환

         + ""

        String(123) 

        123.toString()

        

     3. 날짜 -> 숫자 형변환

       var d =  new Date();

        Number( d ) ;    // 1970.1.1 00:00:00.000 ~

       d.getTime()  ;    // 1970.1.1 00:00:00.000  ~

       

      4. 날짜 - > 문자열 형변환

        String( Date() )

        Date().toString()

        

      5. 불린형 -> 숫자 변환

          Number(true)     // 1

          Number(false)    // 0

       

         6. 불린형 -> 문자열 변환

           String(true) ->  "true"

           false.toString() -> "false"

           

       7. 기억  

           5 + null => 5

          "5" +  nulll => "5null"

          5 + "2" => "52"

          5 * "2" => 10

          

       8. js  객체 

           객체.toString() 

 

* 엄격모드 선언

  "use strict";    // ES5 새로 추가된 기능
  // 변수를 선언하고 사용하겠다. 
  
  function xxx(){
	  "use strict";  // 함수 내에서 엄격 선언 모드 
	  
  }

* 호이스팅 (hoisting)

선언을 맨위로 옮기는 js 기본 동작 : 변수, 함수

     name = "admin";
     mytest();
     var name;
     console.log( name );
     function mytest(){
    	 alert( "mytest...");
     }

* 범위(scope)

    [ 변수의 접근 범위 ]

    1. global scope( 전역변수 )

    2. function scope( 함수변수== 지역변수)

    3. block scope( 지역변수 ) :   let, const

---

예외처리(오류)

   try

   catch

   finally

   throw

    try {
    	// 
    	// test('hello world');
    	
    	// 0<=  kor  <= 100
    	throw "too low";
    	//
	} catch (e) {
		// $("#demo").html(   e.message  );
		$("#demo").html(   e  );
	} finally{
		
	}
     console.log("end")

---

this 의미 4가지

   // 1. js 객체 안에서 this => 객체 자기 자신
    var person = {
    		name:"admin", 
    		info: function (){
    			return this.name;
    		}       
    }
   
   // 2. 이벤트 핸들러 안에서 this => 이벤트를 받은 객체
   document.querySelector("h3").onclick = function (){
	     alert( this );
   }
   
   // 3. 함수 안에서 this => [object Window]
   function test(){
	   return this;
   }

   // 4.  [object Window]
   var x = this;

---

화살표 함수( 람다식 )

    // => 화살표 함수를 사용하면 함수를 더 짧은 구문으로 작성할 수 있다. 
    // ES6 도입
    var hello = function (){
    	// 1
    	// 2
    	// 3
    	return "hello world";
    }; 
    
    // 람다식
    // {   }  안에 return 문만 있는 경우에는  {} 중괄호 생략 + return 문 생략
    // var hello = () => "hello world" ;
    
    var hello = function (  name ){ 
    	return "hello world " + name;
    }; 

    // 매개변수가 1개인 경우에만  () 괄호를 생략할 수 있다.
    // var hello =   ( name ) =>  	 "hello world " + name;
    // var hello =    name  =>  	 "hello world " + name;
    
    var hello = () => {
    	// 람다식에서의 this는   ? 함수의 소유한자..
    	console.log( this );
    }
    
    console.log(   hello()  );

---

클래스

   1. js에도  class 키워드 사용. ( ES6 )

   2. 객체 설계도( 템플릿  )

   class Car {
	   // 필드 
	   // private String name;
	   // private int age;
	   
	   constructor(name, year) {   // js 생성자 : 객체 생성할 때 자동으로 호출되는 함수
	    	 this.name = name;
	    	 this.year = year;
	   }
	  
	   // 메서드
	   age( year ){
	    	 return year - this.year;
	   }
   }

   var myCar1 = new Car("Volvo", 2019);
   var myCar2 = new Car("Audi", 2020);
      
   console.log(   myCar1.name + "  /  " + myCar1.age(2022)  );

---

 js 모듈

     - js 모듈을 사용하면 코드를 별도의 파일로 나누어 저장 -> 관리(유지, 보수)

                                      변수 , 함수 

     - import(수입) / export(수출하다) 문을 사용

     - ex08_person.js              :    변수

     - ex08_message.js           :    함수

/**
 * ex08_message.js
 */
 
const message = () => {
     const name = "hong";
     const age = 30;
     return name + " is " + age + "years old.";
} 

export default message;

/**
 *  ex08_person.js  
 *     변수 내보내기(export)
 */
 
 /*
 export const name = "admin";
 export const age = 20;
 */
 
const name = "admin";
const age = 20;

export { name, age }

---

JSON

JSON 문법 사이트:   https://www.json.org/json-en.html

사용:   ***** JSP + [jquery ajax] + [JSON] 사용   *****

   - JSON ( JavaScript Object Notation )

   - 가벼운  [ 데이터 교환 형식 ]       옛날엔 XML 많이씀

   - 인간이 읽고 쓰는 것은 쉽다. 기계가 쉽게 구문 분석하고 생성할 수 있습니다

   - 모든 언어에서 JSON 사용. ( java, js, c#, python 등등) 

---

js 객체(개체)  ***

  1. js 객체는 기본형을 제외하면 모두 js 객체이다. 

  2. js 기본형 ? string, number, boolean, null, undefined, bigint,

  3. js 객체 ?  new String(), new Number(),  new Boolean()

                     new Date, 

                     Math

                     Array

                     function 

                     object

                     등등

    4.  js 배열  = []

        js 객체  = {}

        

       js 객체도 변수이다. 

        var person = {
                   // 속성
                   name:"admin",
                   age:20,

                   // 객체의 메서드 
                   info:function (){}
        }

     5. js 객체 생성 방법 ( 4가지 )

         1) new 키워드

              new Date()

              new Car()

              var peron = new Object(); // 빈 객체 생성
              person.name = "admin";  // 속성 추가
              person.age = 20;

         2) 객체 리터럴

              var peron = {  name:"admin", age:20};
              var peron = {};                // 빈 객체 생성
              person.name = "admin";  // 속성 추가
              preson.age = 20;

         3) 객체 생성자          

         4) Object.create()    

         

     6. js 객체 속성

            1) 접근

               객체명.속성명;

               person.name
               객체명["속성명"];
               person["name"];

            2)for in 문

            for( let p   in object)  {
                       속성명
            }

ex)

   var peron = {
		   firstname:'john',
		   lastname:'Doe',
		   age:40,
		   eyecolor:'blue',
		   
		   fullName:function (){
			   return this.firstname +" " + this.lastname;
		   }
   }
   
   // 1.   새로운 속성(필드) 추가.
   //      객체명.새로운속성명=속성값;
          person.nationality = "kerea";
          
          // 2. 속성 제거
          // delete 객체명.속성명;
          delete person.eyecolor;
          // delete person["eyecolor"];
          
          // 3. 메서드 호출
          // 객체명.메서드명();
          var name =  person.fullName();
          console.log( name );
          
          // 4. 새로운 메서드 추가.
          // 객체명.메서드명 = function (){}
          person.name  = function (){
        	  return this.firstname +" /  " + this.lastname;
          }
          
          // 5. 모든 속성 출력
          for ( var p in person) {
			console.log( p + " / " + person[p]);  // person.p X typeof string
		}
          
          // 
          /*
          var person = {}
          var person = new Object();   권장 X
          
          person.firstname = "john";
          person.fullName = function(){
        	  
          }
          */
          
          //var name = "admin";
          //var name = new String( "admin");  X

[ 중첩된 객체 ]

   var person = {
		   name:"admin", 
		   age:20,
		   cars: [
				   { name:"BMW", models:["a","b","c"]},
				   { name:"KIA", models:["a","b","c"]},
				   { name:"Ford", models:["a","b","c"]}
			   ]
   };
   // person.name
   //  person.cars[0].name             BMW

var person = {
		   name:"admin", 
		   age:20,
		   cars: {
			   car1 : "BMW",
			   car2: "KIA",
			   car3: "FORD"
		   }
};
   // KIA
   person.cars.car2;
   person.cars["car2"];
   person["cars"]["car2"];

const myObj = {
		  name: "John",
		  age: 30,
		  cars: [
		    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
		    {name:"BMW", models:["320", "X3", "X5"]},
		    {name:"Fiat", models:["500", "Panda"]}
		  ]
		}
		
		
for (let i in myObj.cars) {
	  x += "<h1>" + myObj.cars[i].name + "</h1>";
	  for (let j in myObj.cars[i].models) {
	    x += myObj.cars[i].models[j];
	  }
	  
	  console.log( x );
	}

   [ js 객체를 표시(출력)하는 방법 ]

   1. 객체명.속성명  person.name

   2. 반복문 사용 - 속성명/속성값    for( let p  in person){}

   3. 속성의 값(value)들의  배열로 반환하는 함수 :  Object.values() 사용.   

   4.  js 객체 -> JSON (문자열)변환 :        JSON.stringify()

                                                             []  stringify : 끊으로 묶다.(잇다)

   var person = {  // js object
		      name:"admin",
		      age:20,
		      city:"seoul", 
		      today:new Date(),               // 날짜 객체
		      cars:["bmw", "kia", "volvo"],  // 배열   -> 문자열화 되어진다. 
		      
		      // method
		      print: function (){
		    	  return "print()...";
		      }
   };

   /*
    // console.log(   person );  // [object ]
    var outArr = Object.values( person );
    // alert( typeof out ); 배열 체크 
    alert(   outArr  ); // admin,20,seoul
    */
    
 
    // [ JSON 표기법을 따르는 문자열 ]
    person.print = person.print.toString();
    
    var jsonStr =  JSON.stringify(   person   );            // jsp/servlet + jquery ajax 처리
    //  {"name":"admin","age":20,"city":"seoul"}
    //  { "속성명":"속성값", "속성명": }
    
    // 날짜 문자열화
    // {"name":"admin","age":20,"city":"seoul","today":"2022-11-25T03:13:10.882Z"}
    
    // print 메서드 추가 -> JSON 변환  메서드는 문자열화 되지 않더라..
    
    alert( jsonStr );

    // js ES6        getter, setter 도입.

    // java      private member ->  getter, setter 선언.

   var person = {
		   firstname:"john",
		   lastname:"Doe",
		   language:"kr", 
		   
		   fullName:function (){ 
			   return this.firstname + " " + this.lastname;
			 }, 
   
           // getter
           get  name () {
			return  this.firstname + " " + this.lastname;
		    },           
           // getter, setter
           get lang() {
			return      this.language.toUpperCase();
		   },
           set lang( lang ) {
			 this.language = lang.toUpperCase();
		   } 
		   
   }
   
   // alert( person.name)
   
    person.lang = "en";   // setter
  // 함수인데 왜 호출할때 () 를 안붙여도 되는건가요? 게터 세터가 특수한 경우인건가요?
   alert( person.lang ); // getter
  
   // alert( person.fullName() )

   [ js 객체 생성자 ]

   - 객체를 생성할때 사용되는 함수를 "객체 생성자"라고 한다. 

   - 대문자로 이름을 시작한다. ( 권장 )

    // js 함수
    // this 는 생성될때의 새로운 객체를 나타낸다. 
    // "객체 생성자 함수"
    function Person( fname, lname, age ){
    	this.firstname = fname;
    	this.lastname = lname;
    	this.age = age;
    	// 메서드 
    	this.name = function (){
    		return this.firstname +" " + this.lastname;
    	}
    }
    
    var myFather = new Person("john", "Doe", 40);
    var myMother = new Person("Sally", "Doe", 36);
    
    // 1.   객체생성자함수  ->   속성, 메서드 추가
    //   Person.eyecolor ="blue";         X    
    //Person.prototype.eyecolor= "blue";
    
    // 2. 생성된 객체를 통해서 -> 속성, 메서드 추가    
    //myFather.eyecolor = "blue"; 
    
    // 3. 객체생성자함수  ->   속성, [메서드] 추가
    // Person.prototype.print = function (){}    
    myFather.print = function (){}

---

js 함수

   1. 함수 정의

   2. 함수 선언 형식

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

    3. Function() 생성자

     function sum(a,b){  return a+b; }

     var sum = new Function("a", "b", "return a+b");
     console.log( sum(1,2) );

 

   *** 익명의  자체 호출 함수 ***

   1) 함수 선언  +   2) 함수 호출

    // 1) 함수 선언
   function print(){
	   console.log("print()...");
   }
   // 2) 함수 호출
   print();  // 호출
   
   // 1) 함수 선언
  ( function (){
	  console.log( "test ");   
   } )();  // 2) 함수 호출

   // 자료형 X 매개변수
   // 매개변수의 기본값을 설정할 수 있다. 
   function disp( name = "hong", age = 20){
	   // arguements 컬렉션 
	   console.log(" xxx ");
   }
   
   disp();  // undefined , undefined
   disp("admin");
   disp("admin", 20);
   disp("admin", 20, true);

java :    public static int sum( int...args){}

   function sum(...args){
	   let result = 0;
	   for (let n of args) {
		  result += n;
	   }
	   return result;
   }
   
   console.log(  sum(1,2,3)  );
   console.log(  sum(1,2,3,4,5,6)  );
   var m = [3,5,2,4,1];
  // console.log(  sum( m )  );

call(), apply()

    다른 객체의 메서드를  call() 메서드로 불러서 처리할 수 있다.  

    다른 객체의 메서드를  apply() 메서드로 불러서 처리할 수 있다.  

    person     printf       person1, person2

    

    [차이점 ]  매개변수가 있는 경우 

    call     나열

    apply   배열 

   var person1 = {
		   name:"hong",
		   age:20
		   
/* 		   
		   printf:function (){
			   return this.name + "/" + this.age;
		   }
 */   
   };
   
   var person2 = {
		   name:"admin",
		   age:45
		   
/* 		   
		   printf:function (){
			   return this.name + "/" + this.age;
		   }
 */
   };
   
   var person = {
		   // 속성
		   // this.eyecolor = "blue"
		   // 메서드
		   printf:function (   city , eyecolor ){
			   return this.name + "//" + this.age + "//" + city + "//" + eyecolor;
		   }, 
		   println:function (   ){
			   return this.name + "//" + this.age ;
		   }
   }

   //console.log(   person1.printf() );
   //console.log(   person2.printf() );
   
   // 매개변수가 없는 call() 메서드 사용법.
   console.log(   person.println.call( person1)   );
   console.log(   person.println.apply( person2)   );
   
   // 매개변수가  있는 call() 메서드 사용법.
   console.log(   person.printf.call( person1, "seoul" , "blue")   );
//   console.log(   person.printf.apply( person2, "pohang" , "green")   );
   console.log(   person.printf.apply( person2, [ "pohang" , "green" ])   );
   
   
   // console.log(   (person.println.bind( person2))()   );  // OK
   
   // 
   // Math.max.apply(  0 ""  Math ,  [1,5,3,2]  );
   //  Math.max.call(  null, 1,5,3,2 );

bind()

    - bind :  묶다.  감싸다.

    - 다른 객체의 메서드를 빌린다. + 실행 X

    

    - call()/apply()과   bind() 차이점.

   var person = {
		   name:"admin",
		   age:20,
		   print:function (){
			   return this.name + " / " + this.age;
		   }
   }
   
   // member 객체에는 print() 메서드가 없다
   var member = {
		   name:"kim",
		   age:34
   }
   
   //console.log(  person.print.call( member )  );  // kim / 34
   //console.log(  person.print.apply( member )  );  // kim / 34
   
   
   var fnprint = person.print.bind(member);
    console.log(  fnprint()  );  // kim / 34
   /*
   ƒ (){
	   return this.name + " / " + this.age;
   }
   함수 차용 +                        호출() X
   */
   
   /*
   function sum(){
	   console.log("합");
   }
   
   console.log(   sum  )
   ƒ sum(){
	   console.log("합");
   }
   */

---

setTimeout()/clearTimeout()/[setInterval()/clearInterval()]

ex1) 재귀

<h1 id="demo"></h1>

<button>setTimeout</button>
<button>clearTimeout</button>

   $("button").first().on( "click" , function (){
	   //alert("1")
	   dispTime();
   });
   
   var timer1;
   function dispTime(){
	   var now = new Date();
	   $("#demo").html(  now.toLocaleString() );
	   
	   // setTimeout(  함수 호출 X , 함수등록 O , ms)
	   
	   // 1000ms(1초) 후에 등록된 함수를 1번 호출하는 메서드
	   timer1 = setTimeout(   dispTime   , 1000);
   }
   
   $("button").last().on( "click" , function (){
	   //alert("2")
	   clearTimeout(timer1);
   });

ex2) 재귀X

<h1 id="demo"></h1>

<button>setInterval</button>
<button>clearInterval</button>

   $("button").first().on( "click" , function (){ 
	   dispTime();
	   
	   // 1초 마다 매번 등록된함수( dispTime )를 호출하세요. 
	   timer1 = setInterval( dispTime , 1000);
	   
   });
   
   var timer1;
   
   function dispTime(){
	   var now = new Date();
	   $("#demo").html(  now.toLocaleString() );
   }
   
   $("button").last().on( "click" , function (){
	    clearInterval(timer1);
   });

ex3) html 자동으로 읽어오기

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

  var content ;
  var contentLength ;
  var timer1;
  
  $("button").on("click" , function (){
     //	  document.documentElement  ==  <html> 루트요소(element)
	 //content =   document.documentElement.innerHTML;
     content =  $("html").html();     
     contentLength = content.length; // 문자열 길이
     // alert( content )
     typeWriter(); 
	 timer1 = setInterval( typeWriter , 10);
  });
  
  var i = 0;
  function typeWriter(){
	  if( i <= contentLength ){
			  var oneChar = content.charAt( i++ );
			  $("#demo").html( function (index, oldhtml){
		     	 return oldhtml +  ( oneChar =='\n' ? "<br>" :oneChar ) ;
		      });
			  
			  // window.scrollTo(0, 0); 맨위로 스크롤 올리기
			  window.scrollTo(0,  document.body.scrollHeight  );
	  }else{
		  clearInterval(timer1);
		  alert("출력 완료!!!");
	  }
  }

---

스크롤 표시하기

 

-css-

<style>
  body{
    margin: 0;
    font-size: 28px;
  }
  .header{
    position: fixed;
    top:0;
    z-index: 1;
    width:100%;
    background-color: #f1f1f1;
  }
  .header h2 { text-align: center;}
  .process-container{
    width:100%;
    height:8px;
    background:#ccc;
  }
  .progress-bar{
    height:8px;
    background-color: red;
    width:0;
  }
  .content{
    padding:100px 0;
    margin:50px  auto 0 auto;
    width:80%;
  }
</style>
<style>
  #btnTop{
    position: fixed;
    bottom:20px;
    right:30px;
    z-index: 99;
    
    outline: none;
    background: red;
    color:white;
    padding:15px;
    border-radius: 10px;
    
   display: none; 
    border:none;   /* 버튼은  기본적으로 테두리가 있다.. */
  }
  #btnTop:hover{
    background: #555;
  }
</style>

-html-

<div class="header">
	<h2>스크롤 표시하기</h2>
	<div class="process-container">
		<div class="progress-bar" id="myBar"></div>
	</div>
</div>

<!-- .content>p*40>lorem8 -->
<div class="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	<p>Repellat praesentium ex animi eos in excepturi quod?</p>
	<p>Quas a commodi labore quidem nihil ipsum reiciendis.</p>
	<p>Eum quisquam laboriosam modi impedit ipsam iste consectetur.</p>
	<p>Minima accusantium architecto minus ex odit exercitationem similique.</p>
	<p>Modi dolores quo ipsa voluptate eius ratione eum!</p>
	<p>Rem vel tempora repudiandae quod consequatur fugit sequi.</p>
	<p>Expedita assumenda eius molestias eum quas nisi aliquam!</p>
	<p>Tempora deleniti magnam minus ullam officiis tempore dolor!</p>
	<p>Molestias obcaecati eum impedit facere vel. Dolorem quod.</p>
	<p>Autem mollitia dolores vitae aspernatur consequatur ratione quis?</p>
	<p>Neque veritatis ut iste sequi debitis ex iure?</p>
	<p>Aliquam corporis dolore voluptatibus quas dolorum maxime animi.</p>
	<p>Officiis odit temporibus non assumenda laudantium quam labore.</p>
	<p>Id eum explicabo nulla quidem necessitatibus eos sapiente.</p>
	<p>Est quibusdam aliquid doloribus voluptatum iusto quis doloremque.</p>
	<p>Doloremque rem non voluptas quaerat rerum veniam odit?</p>
	<p>Dicta libero ab est incidunt accusantium voluptatum praesentium.</p>
	<p>Cumque est culpa provident distinctio consectetur voluptatem nobis.</p>
	<p>Explicabo ex error similique est magni nihil deleniti!</p>
	<p>Doloribus repellendus quos deleniti debitis delectus reprehenderit fuga!</p>
	<p>Consequatur quia architecto impedit aspernatur tempore alias dolores.</p>
	<p>Ea temporibus cumque laudantium autem similique distinctio omnis.</p>
	<p>Harum eligendi iusto saepe cumque tenetur delectus praesentium.</p>
	<p>Laborum culpa iure aspernatur omnis ipsum unde deserunt?</p>
	<p>Debitis voluptatibus distinctio maiores accusamus nesciunt facere voluptate!</p>
	<p>Eum dignissimos ut delectus ab atque tempore quaerat.</p>
	<p>Dicta ipsum esse quam modi eligendi possimus excepturi.</p>
	<p>Nobis velit culpa reprehenderit sit ut unde voluptatibus.</p>
	<p>Hic nostrum natus dolore laudantium odio aut et?</p>
	<p>Officiis autem voluptatem eveniet neque veniam accusantium corporis.</p>
	<p>Dolore eius id magni sint a quos ipsum.</p>
	<p>Dignissimos blanditiis aliquid inventore tempora ratione dolore ab.</p>
	<p>Officia aut ea cupiditate cumque non quae blanditiis.</p>
	<p>Officiis nemo sit eos dicta necessitatibus incidunt aliquid.</p>
	<p>Qui et libero nesciunt quia dolor quae optio.</p>
	<p>Ipsam itaque reprehenderit blanditiis quam dignissimos magni delectus!</p>
	<p>Amet officia dolorum temporibus maiores quos voluptates ea.</p>
	<p>Voluptas omnis soluta culpa fuga cupiditate sunt iure.</p>
	<p>Aut voluptas illo assumenda sed provident quod cupiditate!</p>
</div>

<!-- button#btnTop[title="Go  To Top"]>{Top} -->
<button id="btnTop" title="Go To Top">Top</button>

-js-

    // js 코딩.
    window.onscroll = function (){
    	var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop ; // 
    	var scrollHeight = document.documentElement.scrollHeight;
    	var clientHeight = document.documentElement.clientHeight;
    	
    	// console.log(  scrollHeight +" / " +  scrollTop + " / " +  clientHeight);
    	
    	var hiddenHeight = scrollHeight - clientHeight;
    	
    	// 숨겨진 높이를 100%로 했을 때 스크롤올릴 (scrollTop)경우 이 몇 % 해당하는지 ? 
    	// 100:x = hH:sT
    	// x = ( 100*sT)/hH
    	var widthPercent = (  100 * scrollTop ) / hiddenHeight;
    	
    	document.getElementById("myBar").style.width = widthPercent +"%";
    	
    	if (  scrollTop >= clientHeight ) {
    		document.getElementById("btnTop").style.display = "block";
		} else {
			document.getElementById("btnTop").style.display = "none";
		}
    	
    } ;
    // jquery 수정..
    // scrollHeight
    // jquery method : scrollTop()
    //jquery method :   innerHeight()   높이 + 패딩,보더 O  +  마진 X
    //jquery method :   Height()            높이 +   패딩,보더 X

ih = innerheight = clientheight

offset이 붙으면 border, padding 합쳐진 것 

---

bind()   다른 객체의 메서드를  묶다

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

   var person = {
		   firstname : "John",
		   lastname:"Doe",
		   display:function (){
			   let demo = document.getElementById("demo");
			   demo.innerHTML = this.firstname + " /  " + this.lastname;
		   }
   }
   
   // person.display();
   
   // 5초 뒤에 display() 함수 호출(실행)
   // undefined / undefined
   
   // [문제점]
   // [window].setTimeout( );
   // setTimeout(   person.display    , 5000);
   
   // bind() 메서드를 사용해서   person.display 를 person 에 바이딩...

   var display =   person.display.bind(person);   
   setTimeout(   display    , 5000);

* bind로 묶지 않으면 undefined -> 객체 안 this가 window 객체를 가리킴!

  그래서 bind로 묶어줘서 가리키는 객체가 person으로 해줘야함

---

[이벤트  버블링], 이벤트 캡처

  1. 이벤트 버블링

      자식 요소 이벤트가 발생하면 부모 요소에 그 이벤트 전달(전파). 발생.

 2. 이벤트 캡처링   X 

ex) p 태그 클릭했는데 div 클릭까지 먹음 

 

<!-- #out>h2+p#in -->
<div id="out">
	<h2>이벤트 버블링 체크</h2>
	<p id="in">자식 p 태그</p>
</div>

   $("#out").click( function (){
	   alert("out div click.");
   });
   
   $("#in").click( function (){
	   alert("in p click.");
	   
	   // 이벤트 버블링 막아라.. 
	   event.cancelBubble = true;
   });
   
   // table > tr > td
   // js DOM , BOM  -> jquery -> [JSP/Servlet] 2~3 주 + [3주] + 스프링 +AWS