1) window 객체(setTimeout)
📎 window 객체
window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있다.
window는 디폴트의 개념이므로 생략할 수 있다.
window.setTimeout()
setTimeout() //window 생략window는 전역객체라서 생략 가능하다.
🔍 setTimeout 활용
-
인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도 합니다.
-
자바스크립트는 함수를 인자로 받을 수 있는 특징이 있다.
-
함수를 반환할 수도 있다.
function run() {
setTimeout(function() {
var msg = "hello codesquad";
console.log(msg); //이 메시지는 즉시 실행되지 않습니다.
}, 1000);
}
run();run(); 하게 되면 1초(1000ms) 뒤에 "hello codesquad"가 출력된다.
💡 setTimeout 실행 순서
setTimeout의 실행은 💡비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행된다.
밑에 예시를 살펴보자.
function run() {
console.log("start");
setTimeout(function() {
var msg = "hello codesquad";
console.log(msg); //이 메시지는 즉시 실행되지 않습니다.
}, 1000);
console.log("end");
}
run();setTimeout 안의 함수(콜백함수)는 run 함수의 실행이 끝나고 나서, (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행됨) 실행된다.
또 하나의 예시를 보자!
function run() {
setTimeout(function() {
var msg = "hello codesquad";
console.log(msg); //이 메시지는 즉시 실행되지 않습니다.
}, 1000);
console.log("start");
}
console.log("middle");
run();
console.log("low")이 코드는 어떻게 실행될까?
순서 middle -> start -> low -> hello codesquad
2) DOM과 querySelector
👀 1. DOM
-
브라우저에서는 HTML코드를
DOM(Document Object Model)이라는 객체형태의 모델로 저장한다. -
그렇게 저장된 정보를
DOM Tree라고 한다. -
HTML element는Tree형태로 저장된다.
Dom-Tree
복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘들다.
그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공
브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공
🔍 2. getElementById()
ID정보를 통해서 찾을 수 있다.
🔍 3 Element.querySelector()
-
DOM을 찾는데 유용한querySelector메서드 -
CSS스타일을 결정할 때 사용하던,Selector문법을 활용해DOM에 접근할 수 있다. -
DOM을 찾을 때querySelector만 사용해도 충분하고 빠르다. -
비슷하지만 다른
querySelectorAll이 있다.
(list형식으로div를 검색했다면 모든div가 나온다.)
🔍 4. css selector
-
selector문법은**querySelector와querySelectorAll메서드에서 사용할 수 있으며,css스타일을 부여했을 때 익혔던 selector문법과 동일**하다고 생각하고 사용할 수가 있다. -
다양한
css selector문법을 사용해서 원하는 엘리먼트를 찾을 수 있다.
3) Browser Event, Event object, Event handler
📎 Event
-
브라우저 화면의 크기를 마우스로 조절하거나, 스크롤을 할 때, 마우스로 이동하거나 무언가를 선택할 때 등 💡이벤트가 발생한다.
-
이벤트를 브라우저가 발생시켜주니, 그때 어떤 일을 하라고 할 일을 등록할 수가 있다.
-
HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다.
-
**JavaScript로 구현**할 수 있습니다.
🔍 이벤트 등록
이벤트 등록 표준방법
addEventListener함수를 사용할 수 있다.
var el = document.querySelector(".outside");
el.addEventListener("click", function(){
//do something..
}, false);클래스명이
outside인 클래스에click이벤트를 등록
-
addEventListener함수의 두 번째 인자는 함수입니다.
(addEventListener(1,2)즉 위 코드에서function()) -
이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 이벤트핸들러(Event Handler) 또는 이벤트리스너(Event Listener)라고 한다.
콜백함수는 이벤트가 발생할 때 실행됩니다.
🔍 이벤트 객체
-
브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다.
-
이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 된다.
var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
console.log(evt.target);
console.log(evt.target.nodeName);
}, false);클릭하게되면 해당
element에 대한 정보를 리턴한다.
event.target 이 가장 많이 사용된다.
event.target은 이벤트가 발생한 element를 가리킨다.
element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있다.
4) Ajax통신의 이해
🔍 1. Ajax (XMLHTTPRequest 통신)
-
웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다.
-
더 좋은 UX를 제공할 수 있는 기술
-
아래 탭 UI를 살펴보면 상단에 탭을 누를때마다 컨텐츠가 달라진다.
누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이다.
따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋을 것이다. -
이 경우가 Ajax기술을 활용할 수 있는 대표적인 경우
🔍 2. AJAX 실행코드
- 아래 방법은
XMLHTTPRequest객체를 사용하는 표준방법
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();
}-
XMLHttpRequest객체를 생성 ->open메소드로 요청을 준비 ->send메소드로 서버로 보낸다. -
요청처리가 완료되면
load이벤트가 발생 -> 콜백함수 실행 -
콜백함수가 실행될 때는 이미
ajax함수는 반환하고 콜스택에서 사라진 상태이다. -
이는
setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 이다.
5) JavaScript Debugging
💡 디버깅 컨트롤
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
- 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡는다.
