[신세계I&C KDT][Javascript] #28 Javascript 2 (0507)

1. BOM (Browser Object Model)

• 웹 브라우저 관련 객체

1) 종류

Window 객체 : 전역 객체 (window 변수를 생략하고 사용이 가능하다 ★)
웹브라우저 창 자체를 의미
Screen 객체 : 창의 크기 정보 ( width/height )
History 객체 : 웹 페이지의 뒤로/앞으로 기능
Location 객체 : 웹 브라우저의 URL 정보
Navigator 객체 : 웹 브라우저 자체 정보

2) 특징

웹 브라우저를 open하면 자동으로 객체생성이 된다
개발자는 명시적 생성없이 참조해서 사용할 수 있음
어떤 변수명으로 되어 있을까?

Window 객체 참조 : window 변수를 사용한다
Screen 객체 참조 : screen 변수를 사용한다
History 객체 참조 : history 변수를 사용한다
Location 객체 참조 : location 변수를 사용한다
Navigator 객체 참조 : navigator 변수를 사용한다

2. Window 객체

• 전역 객체
• window 변수로 참조 가능. 하지만 일반적으로 생략해서 사용
• screen,history, location, navigator, document 는 Window 객체의 속성이다
  원래는 window.screen
  window.location
  window.history
  window.navigator
  window.document 사용하는것이 원칙이지만 일반적으로 window 는 생략하고 사용된다

1) 새로운 창 열고 닫기

• window.opener : 자식 창에서 부모 창 참조할 때 사용
• 부모에서 새로운 창 (자식 창)을 만드는 방법

window.open("child.html", 옵션);
var childWin = open("child.html");  //  동일
	 
// 현재 창 닫기
window.close();
// 부모창 닫기
opener.close();
// 자식창 닫기
childWin.close();

2) setTimeout(function(){}, 1/1000);

• 한 번만 실행됨

3) setInterval(function(){}, 1/1000);

• 매번 실행
• 해제 방법 : clearInterval(fun);

4) alert("경고창")

confirm("진짜 삭제할거임?")
propmt("이름을 입력하세요");

3. JSON 객체 ★

1) 문법

{key:value, key1:value1,...}

2) 특징

• value는 함수도 가능하다
  만약 함수인 경우에 일반 key 접근시 this 사용해야 된다
• 속성 접근은 .(dot) 이용하거나 ["key값"] 형식의 연관 배열 사용 가능 ★
  연관 배열의 특징은 "key값" 을 변수로 사용할 수 있다
• value값은 변수로 사용 가능
  만약 key와 value가 동일하면 key만 지정 가능
  예>

{ username:username } ==> {username}

• value가 함수인 경우에는 :function 생략가능해서 자바의 메서드처럼 사용 가능
  예>

setUsername:function(n){this.username=n}
==> setUsername(n){this.username=n}

• 메서드 정의 앞에 set / get 키워드 지정 가능
  기존 메서드처럼 사용하면 안 되고 ( person.setUsername("이순신"), person.getUsername() ) 속성처럼 사용해야 된다 ( person.setUsername="이순신", person.getUsername )
  예>

set setUsername(n){this.username=n}
get getUsername(){return this.username;}

• key값도 변수로 사용 가능 [변수명]

예>

var xxx = "username";
{[xxx]:"홍길동" };  ==> {"username":"홍길동"}

// 이용해서 연결해서 사용가능
{[xxx+"01"]:"홍길동" }; ==> {"username01":"홍길동"}
       
// 중첩가능     
"{key:value}" --------> {key:value}
"[10,20]"  --------> [10,20]
JSON.parse("{key:value}");
       
{key:value} ----> "{key:value}"
[10,20] ----> "[10,20]"
JSON.stringify({key:value})

"10" --------> 10
Number.parseInt("10");

10 ----------->"10"
String(10)

4. 함수 (function) ★ * 200

1) 개요

• 용도 : 기능 처리 담당 (자바의 메서드 역할)

2) 종류 1

• 일반 함수 : 일반적으로 사용되는 함수를 의미
• generator 함수 : Generator 객체를 반환하는 함수
• 비동기 함수 : Promise 객체를 반환하는 함수
  (동기 : 한 번에 요청 한 개만 처리)

3) 함수 작성 방법 2가지

(1) 함수 선언식 (이름 있는 함수)

function 함수명([파라미터,..]){
	문장;
    [return 값;]
}

-> js 실행할 때 만들어짐

(2) 함수 표현식 (이름 없는 함수, 익명 함수)

var 변수 = function ([파라미터,..]){
	문장;
    [return 값;]
	};

변수가 함수명으로 사용됨!!
-> 해당 코드가 실행될 때 만들어짐

4) 함수 특징

• 반드시 호출해야 된다 (함수명 이용)

• 호출 후 반드시 호출한 곳으로 돌아온다

• 호출할 때 인자값을 설정할 수 있고 돌아올 때 리턴값이 존재할 수 있다

• JS 함수는 함수 호출 시 인자값의 개수가 달라도 된다 ★

• 파라미터 개수 > 인자값 개수
  인자값이 저장되고 남은 파라미터에 undefined가 저장되는데 이를 막기 위해 임의의 초기값을 설정할 수 있다
  => default 파라미터
  => function fun(n=초기값, n2=초기값){}

• 파라미터 개수 < 인자값 개수인 경우
  파라미터에 저장하고 남은 인자값은 소실됨. 나머지 인자값을 배열로 가져올 수 있따
  => rest 파라미터 (파라미터 가장 마지막에만 사용된다)
  => function fun(n,...n2){}
  function fun(n,n2,...n3){}
  fun(10,20,30);

• 함수 호출시 spread 연산자 이용한 방식으로 인자값을 전달할 수 있다

  예>

    function fun(n,n2){}

    var x = [10,20];
    fun(x[0],x[1]); // 기본
    fun(...x);      // spread

• 기본형 데이터와 참조형 데이터 인자값 사용

• 기능에 따라 4가지 형태

  • 파라미터없고 리턴값없는 형태
  • 파라미터있고 리턴값없는 형태
  • 파라미터없고 리턴값있는 형태
  • 파라미터있고 리턴값있는 형태

• JS함수는 일급객체(first-class) 이다
  일급객체의 핵심 개념은 함수를 데이터로 처리하는 것
  함수를 이용해서 할 수 있는 작업은 다음과 같다

  • 함수를 변수에 저장할 수 있다

  • 함수 호출시 인자값으로 함수를 사용할 수 있다
    예> arr.forEach(인자값);
    personList.forEach(function(data,idx){});

  • 함수 호출 후 리턴값으로 함수를 사용할 수 있다

    예>

        var x = function(){};

            function fun(){
            // return 값;
            return x;
        }

• 콜백 함수 (callback)
  • 개념: 사용자가 명시적으로 호출하지 않고
    시스템이 특정 상황에 호출하는 함수를 의미한다
  • 주로 이벤트 처리시 사용됨
    예> 자바의 swing 이벤트

     Button btnOk= new Button("OK");

      // 사용자호출 : addActionListener()
      // 시스템호출 : actionPerformed()

     btnOk.addActionListener(new ActionListener(){
	   public void actionPerformed(ActionEvent e){

	   }
     });

4-1. arrow 함수

(자바의 lambda와 비슷 -> : thin arrow)

• JS에서는 => : fat arrow 이용

4-2. generator 함수

1) 문법

function* fun() {
        console.log("1");
        console.log("2");
        console.log("3");
}

2) 특징

• 함수를 호출하면 Generator 객체로 반환됨
  호출 시 함수 코드 블럭이 실행이 안 됨
• 함수 코드 블럭을 실행하려면 Generator 객체의 next()를 호출해야 된다
• 함수 코드 블럭의 여러 실행문을 분할해서 실행할 수 있다 (yield 키워드 이용)
• 함수 실행 중단

(1) 일반 함수

function fun() {
        console.log("1");
        console.log("2");
  		if(true) return;
        console.log("3");
}

fun();

(2) generator함수

function* fun(){
console.log("1");
yield
console.log("2");
yield
console.log("3");
}

var gen = fun();
gen.next(); // 1
gen.return(); // 중단

(3) 용도

• 많은 데이터를 이용해서 처리를 해야되는 작업을 분할해서 작업이 가능하다

4-3. 즉시 실행 함수

: 함수를 정의하면서 실행한다

1) 문법

(funciton(){
	console.log();
})();

• JS 라이브러리를 만드는 곳에서 주로 사용됨 (jQuery)

5. 이벤트

1) 개요

(1) 이벤트 (event)

• 사용자 및 시스템이 특정 상황에 발생시키는 사건/동작을 의미
• 예> 버튼 클릭, 드래그, 마우스 오버, 키보드로 input 태그에 입력, 시스템이 윈도우에 html을 렌더링하기 위해 DOM 트리를 만드는데, DOM 트리가 모두 완성됨을 알 수 있는 정보를 얻을 수 있음

(2) 이벤트 타입 (event type)

• 마우스 이용 : click, change, mouseover, mouseout, dbclick,...
• 키보드 이용 : keyup, keydown, keypress
• 포커스 관련 : focus, blur (포커스 해제)
• submit 버튼 : submit
• 시스템 관련 : load

(3) 이벤트 핸들러 (event handler)

• 이벤트가 발생했을 때 실제로 처리하는 코드를 가진 함수를 의미

(4) 이벤트 소스 (event source)

• 이벤트가 발생된 태그/버튼

2) 이벤트 처리 방법

(1) DOM Level 0

• 인라인 방식
  : html 시작 태그에서 연결
  : 시작 태그에서 on 이벤트타입으로 된 속성 이용
  예> 버튼
  : html과 JS가 분리가 안 된 방식으로 권장 X

• 고전 방식
  : html과 JS 분리해서 이벤트 처리가 됨
  : JS에서 이벤트 소스를 얻고 on 이벤트 타입을 지정한다
  JS 이벤트소스.onclick = function(){};
  html
  : 이벤트 소스 얻는 방법 (button)
  document.메서드() 이용
  예> 요소 하나 반환
  var result = document.getElementById("x");
  var result = document.querySelector("css 선택자문법");
  요소 여러 개 반환
  var result = document.querySelectorAll("css 선택자문법");
  (css 선택자문법 : #id, .class, 태그명, [속성명], 부모 > 자식)

(2) DOM Level 2

: JS에서 이벤트 소스를 얻고 addEventListener() 메서드로 이벤트 처리함

• 문법
  JS :
  이벤트소스.onclick = function(){};
  이벤트소스.addEventListener("이벤트타입", 이벤트핸들러, useCapture);
  예> document.querySelector("#x").addEventListener("click", function(){});

html
: OK

=> 이벤트 전파 방지 가능 (이벤트 객체 이용)

• 이벤트 객체의 stopPropagation() 이용
  예> event.stopPropagation();

3) 이벤트 객체 ★

• 이벤트 소스(버튼)에서 발생되는 이벤트 정보를 관리하는 객체
• 이벤트 객체를 사용해서 다양한 작업 가능 (변수, 메서드 이용)
• 이벤트 객체를 얻는 방법 : 이벤트 핸들러(함수)에서 event 변수명

function fun(){
	console.log(event);
}

• 속성과 메서드가 제공됨
  속성 : event.target
  메서드 :
  이벤트전파방지 : event.stopPropagation();
  기본동작방지 : event.preventDefault();
  예> < form > 태그의 submit 기능