WEB #3 WEB UI

1. Window 객체

• window(전역객체)에 속한 메서드에는 경고창을 띄우는 alert, setTimeout등의 메서드가 있다.

window.setTimeout()
setTimeout() <!--window는 전역객체라서 생략 가능하다.-->

1.1. setTimeout의 활용 (지연시킬때 활용)

• 인자로 함수를 받는다. (자바스크립트는 함수를 인자로 받거나 반환하는 특징을 가진다.)
• Callback 함수 : 즉시 실행되지 않고 나중에 필요한 시점에 실행되거나 실행되지 않을 수도 있다.

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않는다.
    }, 1000); //1초뒤에 실행
}

run();

• setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행된다.
• setTimeout 안의 함수(callback 함수)는 run함수의 실행이 끝나고 나서 실행된다. (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행됨)

function run() {
    console.log("start");
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않는다.
    }, 1000);
    console.log("end");
}

run();
//start
//end
//1초뒤 hello codesquad

setInterval과 setTimeOut

• setInterval은 특정 동작을 반복적으로 수행하기위해 쓰임
  ex)
  1. 갤러리 형식의 뷰를 만들어 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우
  2. 일정 시간 간격으로 배너광고를 바꾸면서 보여줄 경우
  3. 일정 주기로 계속해서 서버와 통신이 필요한 경우
• setTimeOut은 특정 동작을 다른 동작이 끝난 후 처리하기위해 쓰임

2. DOM과 querySelector

2.1. DOM (Document Object Model)

• 브라우저에서 HTML코드를 DOM 이라는 트리구조 객체형태의 모델로 정보들을 저장
  ⇒ 저장된 정보 : DOM Tree
  (HTML element는 Tree 형태로 저장된다.)
• DOM Tree를 탐색하고 조작하기 위한 JavaScript 탐색알고리즘 구현은 너무 힘들기 때문에 브라우저에서 다양한 DOM API(메서드)를 제공한다.
  

getElementByID()

• ID 정보를 통해서 element를 탐색하고 조작할 수 있게하는 DOM API

document.getElementByID("nav-cart-count);
document.getElementByID("nav-cart-count).innerText="있어";
document.getElementByID("nav-cart-count).style.display="none";

2.2. Element.querySelector()

• DOM을 찾는데 특히 유용하다.
• css selector문법을 활용하여 접근

document.querySelector("div");
document.querySelector("#nav-line-2"); //id 값 찾을때는 #
document.querySelector(".nav-line-2"); //class 값 찾을때는 .
document.querySelector(".nav-line-2 > .nav-arrow"); // 자식요소 찾을 때

querySelectorAll()

• ()에 div가 들어갈 경우 div인 모든 Element를 찾는다.
• 배열은 아니지만 노드 리스트라고 결과가 리스트 형태인 값이 나온다
• for문 같은 것을 돌려서 뭔가를 확인할 수 있다.

예시

• removeChild(child) : 삭제
• replaceChild(newChild, oldChild) : 대체
• appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가한다.
• document.createElement(tagname) : tagname 엘리먼트 노드를 추가한다.
• document.createTextNode(data) : 텍스트 노드를 추가한다.

3. Browser Event, Event Object, Event Handler

3.1. Event

• 브라우저에는 많은 이벤트가 있다(ex: 마우스 스크롤, 키보드 입력 등)
• HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 수행하도록 등록하면 된다.

3.2. Event Handler(Event Listner)

• 이벤트 등록시 : addEventListner함수를 사용한다.

var el = document.querySelector(".outside");
el.addEventListener("click", function(){ 
//이 함수는 이벤트가 발생할 때 실행된다. ⇒ Event Handler(Event Listner)
}, false);

3.3. Event Object

• 브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다.
  ⇒ 이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 됨

var el = document.querySelector(".outside");

el.addEventListener("click", function(evt){ 
  var target = evt.target; //매개변수 evt를 통해서 target에 접근하고 정보를 가져올 수 있다. 
  console.log(target.className, target.nodeName);
  console.log(target.innerText);
  });

4. Ajax 통신

4.1. Ajax (XMLHTTPRequest 통신)

• 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발
• 비동기적으로 (화면의 다른 부분에 영향을 주지 않고)데이터를 서버에서 가져오는 방식
• EX) Nav Bar의 탭을 누를 때마다 컨텐츠가 달라질 때, 누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이기에 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋은 상황일 때 Ajax기술을 활용한다.
  (새로 고침 없이 전체 웹페이지에서 일부분만 받아온 데이터로 갱신)
• Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받는다

JSON(JavaScript Object Notation)

• 서버와 클라이언트간의 데이터 교환을 할 때 상호간의 표준적인 데이터 포맷을 결정하기 위해서 JSON 포맷을 사용한다.
• AJAX를 위한 대표적인 포맷
• javascript Object와 같은 형태

//JSON의 형태 : 일반적으로 키-값(이름:값) 쌍의 패턴으로 표현된다. 
 {
    "이름": "홍길동",
    "나이": 25,
    "성별": "여",
    "주소": "서울특별시 양천구 목동",
    "특기": ["농구", "도술"],
    "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
    "회사": "경기 수원시 팔달구 우만동"
 }

4.2. AJAX 실행코드

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

1. XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보낸다.
2. 요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행된다.
3. 콜백함수가 실행될 때(로드가 시작될 때)는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태입니다. (setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직)

CORS: Cross-Origin Resorce Sharing

• 한 출처에서 실행 중인 웹어플리케이션이 다른 origin의 리소스에 접근할 수 있도로 하는 메커니즘.
• XMLHttpRequest는 사용 중인 웹어플리케이션이 자신과 출처가 동일한 리소스만 불러올 수 있고, 다른 출처의 리소스를 불러오기 위해서는 CORS헤더를 포함한 응답을 반환해야 함.
  참고 : https://huns.me/posts/2014-04-20-ajax-cors-overview

5. JavaScript 브라우저 디버깅

5.1. 디버깅 컨트롤

• Pause, Continue : 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 된다. 다른 브레이크포인트가 잡힐 때까지 코드를 진행
• Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로는 진입하지 않는다. 라인의 함수를 실행만 한다.
• Step into next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있다.
• Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아간다.
• Active/Deactive breakpoint : 브레이크포인트를 끄거나 켤 수 있다.
• Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아준다.