WEB #3 WEB UI

1.ウィンドウオブジェクト

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

1.1. settimeoutの利用(遅延時使用)

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

run();

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

DOMツリーをブラウズおよび操作するためのJavaScriptブラウズアルゴリズムを実装することは非常に困難であるため、ブラウザは複数のDOM API(方法)を提供する.

getElementByID()

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

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

querySelectorAll()

例

3. Browser Event, Event Object, Event Handler

3.1. Event

3.2. Event Handler(Event Listner)

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通信）

JSON(JavaScript Object Notation)

//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();
}

CORS: Cross-Origin Resorce Sharing

5.JavaScriptブラウザのデバッグ

5.1. デバッグコントロール