[SK고용디딤돌] 자바스크립트 (7/7)

Notice

티스토리 블로그 시작!

Recent Posts

Recent Comments

관리 메뉴

안녕세계

[SK고용디딤돌] 자바스크립트 (7/7) - 2주차 본문

[SK고용디딤돌] 자바스크립트 (7/7) - 2주차

Junhong Kim 2016. 7. 13. 17:55

728x90

/** 복습 **/

- 금요일까지 해야 할일 -

① 납기와 품질중 어떠한것이 더 중요한가? pt.12 금요일까지 제출~

② 시험공부 : Scope chain , Prototype Chian (자바스크립트의 상속 메커니즘), Closure 중심으로

ㄴ 상속을 직접 제어할 수 있어야 함. 내가 원하는거 내 마음대로 할 수 있도록

ㄴ JS에서 inherits는 어렵다.

ㄴ 10문제 -> 50분 (20점짜리가있음..)

Document Object Model : 브라우저가 읽어들이면 파싱을하는데 DOM 객체 트리가 구성됨 객체트리가 구성되면 Documnet 객체 , 그밑에 HTML , 그밑에 Head, body.. head 바디

DOM을 통해 문서 순회/조작 가능

Node.childNodes = > [NodeList] array like list 이다.

Node.nextSibling / Node.previousSibling 동일 레벨 노드 접근

appendChild : LastChild 뒤에 붙입니다.

removeChild : 자식노드 객체를 제거합니다.

insertBefore : 노드 객체를 앞에 추가합니다.

QuerySelector -> 태그 이름

event 객체에는 발생한 사실을 설명, 이벤트를 제어할 수 있음, 처리 또는 무시하기 가능.

노드 이벤트는 외부자원이 필요하다고 하면 발생하는 이벤트

event 핸들러는 특정이벤트를 처리하기 위한 콜백, 콜백이 콜백은 event 핸들러는아니다

onEvent Property에 이벤트 헨들러를 등록. 이 이벤트 핸들러는 이벤트 콜백이다. 여기에는 이벤트 객체가 전달된다.

수평/수직/사선이동 Translation -> 직선으로 움직이는 것

회전 rotation

확대/축소 scale

물체는 가만있고 좌표만 움직임 -> 메트릭스 연산이 필요 -> 새로운 좌표계의 값이 만들어짐 -> 이용해서 애니메이션을 구현

Screen X, y : 물리적인 화면

Client X,y : 윈도우를 클라이언트라고 말함., 클라이언트 영역

instanceof event 컨트롤키가 트루냐 물어볼 수았떠,

이벤트 핸들러는 어디서 이벤트가 발생했는지 볼 수 있다.

이벤트 스코프가 존재히자민 실체객체는 프로토객체..

/** 8장 웹 브라우저와 자바스크립트 **/

이벤트 핸들링 레벨2

- 레벨1에는 한개의 HTML 요소에 둘이상의 이벤트 처리가 안된다는 문제점이 있음

- 레벨2 이벤트 리스너는 한개의 HTML 요소에서 복수의 이벤트와 연관을 맺을 수 있도록 하는 기능을 제공하며 설정했던 이벤트 리스너를 쉽게 제거할 수도 있음

- 이벤트 리스너를 사용하는 경우에는 크로스 브라우징을 고려한 코드를 작성해야함

if (window.addEventListener) {

// 표준 브라우저일 때 코드, IE 9 이상

// element.addEventListener(이벤트명, function(event) { ... }, false);

} else {

// IE 6,7,8

// element.attachEvent(on이벤트, function(event) { ... });

}

var element = documnet.QuerySelector("셀렉터")

● HTML Element

1) Block Element

2) Inline Element

[08-03.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="button" id="btnClick" value="눌러주세요" />
        <input type="button" id="btnCancel" value="취소" />
    </form>
    <div id="result">
    </div>
    <script src="08-03.js"></script>
</body>
</html>

[08-03.js]

function addListener(element, eventStr, handler) {
    if(window.addEventListener) {
        element.addEventListener(eventStr, handler, false);
    } else {
        element.attachEvent("on" + eventStr, handler);
    }
}

function removeListener(element, eventStr, handler) {
    if(window.removeEventListener) {
        element.removeEventListener(eventStr, handler, false);
    } else {
        element.detachEvent("on" + eventStr, handler);
    }
}

function btnClickHandler(evt) {
    //var result = document.querySelector("#result");
    var textNode = document.createTextNode("클릭 이벤트 처리를 합니다");
    result.appendChild(textNode);
}

// 초기화작업 첫번째 작업 . 객체 참조
addListener(window, "load", function(evt) {
    var btnClick = document.querySelector("#btnClick");
    var btnCancel = document.querySelector("#btnCancel"); // id이기 때문에 맨앞에 샾
    var result = document.querySelector("#result");

// 크로싱 브라우징 문제 때문에 addListener에 해줌
    addListener(btnClick, "click", btnClickHandler);
    addListener(btnCancel, "click", function(evt) {
        result.innerHTML = "클릭 이벤트 처리가 불가능 합니다";
        removeListener(btnClick, "click", btnClickHandler);
    });
});

HTML Tag는 id로 참조할 수 있다. -> parsing 일어남 -> DOM 객체 생성(자바스크립트 객체임)

파싱되면 global scope가 생성되는데 이것이 window 이를 통해 자바스크립트 조작

Window (scope 체인의 루트였는데 얘가 Documnet를 갖고잇고 얘는 DOM의 꼭대기임)

Document

HTML

Head, body

var element = document.querySelector("#a");

img = Element 타입

src = attr(attribute) 타입

그림표시 = text 타입

"01.jpg" = text 타입

파싱의 결과 최상위는 Document

● DOM 이벤트 전파

● 이벤트 버블링 억제

event.stopPropagation()을 이용해 btnC가 눌렀을때 이벤트가 상위 div로 올라가는 것을 막아줘야 한다.

e.stop.Propagation()

window.event.cancelBubble = true

<div id="outer" class="class1"> 과 outer.className = "class1"은 동일한 것이다

[08-04.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1 {
            background-color: #adff2f;
        }
        .class2 {
            background-color: #dda0dd;
        }
    </style>
    <script src="08-common.js"></script>
</head>
<body>
    <div id="outer">
        외부 영역을
        <div id="inner">
            내부영역을 클릭해보세요~
        </div>
        클릭해보세요!
    </div>
    <div id="result">
    </div>
    <script src="08-04.js">
    </script>
</body>
</html>

[08-04.js]

addListener(window, "load", function(event) {
    var outer = document.querySelector("#outer");
    var inner = document.querySelector("#inner");
    var result = document.querySelector("#result");

    outer.className = "class1";
    inner.className = "class2";

    addListener(outer, "click", function(event) {
        result.innerHTML = "outer clicked";
    });

    addListener(inner, "click", function(event) { // click을 호출할 때 Mouse Event 객체가 event로 넘겨 진다.
        result.innerHTML = "inner clicked!!";
        cancelBubble(event); // 호환성 해결하기 위해 event를 cancelBubble()로 넘겨준다.
    });

    // addListener(inner, "click", function(event) {
    //     event.stopPropagation();
    // });
});

[08-common.js]

function addListener(element, eventStr, handler) {
    if(window.addEventListener) {
        element.addEventListener(eventStr, handler, false);
    } else {
        element.attachEvent("on" + eventStr, handler);
    }
}

function removeListener(element, eventStr, handler) {
    if(window.removeEventListener) {
        element.removeEventListener(eventStr, handler, false);
    } else {
        element.detachEvent("on" + eventStr, handler);
    }
}

function cancelBubble(event) {
    if(event.stopPropagation()) { // 표준
        event.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
}

● 이벤트디폴트동작 억제

e.preventDefault()

window.eventreturnValue = false

[08-common.js]

function byeEvent(e) {
    if(e.preventDefault()) {
        e.preventDefault();
    } else {
        window.event.returnValue =  false;
    }
}

[08-04.js]

addListener(toGoogle, "click", function(event) {
    result.innerHTML = "링크의 기본 동작이 비활성화되었습니다.";
    byeEvent(event);
});

/** 9장 jQuery **/

● jQuery와 jQuery Mobile

'Write Less, Do more'

- DOM의 쉬운 조작에서부터, 쉽고 일관된 이벤트 처리, 각종 효과 기능 제공을 통한 쉬운 시각화 지원, 쉬운 Ajax 지원, 쉬운 내장형 객체의 확장까지 자바스크립트의 전반을 지원하는 프레임워크

- jQuery UI라고 불리는 UI 기능을 포함해 jQuery 기반의 플러그인 라이브러리가 많음

// 9장에서 중요한 내용 없음

/** 10장 jQuery 기본 **/

* array like object.. 이게 뭘까

● jQuery의 핵심 개념

- Query는 자바스크립트에서 DOM 객체를 질의(query)해 조작한다는 의미를 강조하듯이, 문서 탐색 및 조작을 보다 쉬운 노드 접근 기술을 제공

- HTML DOM과 자바스크립트.....

● jQuery()와 $()

- 문서에 포함시키면 즉시실행함수를 실행시켜 라이브러리에 등록한다

jQuery() 라는 함수가 있는데 만들때..

var jQuery = function(인자) { // 객체는 얘 임, 참조변수임, 전달되는 인자의 값에 따라 하는일이 달라진다

};

var $ = jquery; // jQuery의 별칭을 준것임, 참조변수한테 받은 것

$()를 더 많이 사용 함. 즉 jQuery() = $() 똑같은 거임.

● JavaScript 객체 vs jQuery 객체

var obj = { x:10, y:50}; -> JavaScript 객체

var obj$ = $(obj); -> jQuery 객체로 만들면 jQuery 라이브러리를 사용할 수 있다.

※ obj$의 $는 그냥 식별자임. -> 자바스크립트 객체랑 구분하려고, _(under bar)를 쓰기도 함

$(자바스크립트객체) -> new를 하지 않아도 객체가 생성 됨

셀렉터를 넘겨주면 HTML DOM노드트리에서 해당 노드를 찾아서 해당노드를 jQuery로 바꿔서 반환해주는게 셀렉터가 하는 일

** 매개변수로 넘겨줄수있는것

1) 자바스크립트 객체 -> jquery 래퍼 객체 반환

2) ()안에 매개변수로 셀렉터 문자열를 기술하면 셀렉터를 해석해 HTML DOM 구조상의 노드를 찾아 jQuery 객체로 변환해 반환

-> jquery 객체 반환

3) 매개변수로 함수를 주면 콜백함수로 등록하여 DOM 로딩 완료시 호출함 - 자기자신객체 this를 리턴함, 이벤트 핸들러 등록하는 함수역할 -> ready 이벤트에 이벤트핸들러로 등록 됨

위 세가지는 하는일이 다 다름.

ready는 jQuery 이벤트

load이벤트는 표준이벤트

DOM완료 자원완료

ready load

ㅣ ㅣ

jquery 표준

$(document).on("이벤트명", 이벤트핸들러) -> 자바스크립트 addeventListener

.off("이벤트명", 이벤트핸들러) -> 자바스크립트 removeEventListener

on과 off를 이용하는데에 ready 이벤트는 딱 한번 하는 것.

$(document).on.("ready", (function(){ .. }) ready 이벤트는 초기화하는데 쓰이는 것.

=== > $(function() { ... }) 함수가 들어가면 내부적으로 ready 이벤트로 등록이됨

/** 11장 셀렉터 **/

node를 찾아낼 때 셀렉터를 이용.

jQuery도 셀렉터가 있음, 90퍼센트가 css 셀렉터.

- 기본셀렉터

$('*') : 모든 노드, jQuery가 제공하는 컬렉션에 담는다.

- 계층

- 속성

jQuery1.x : 거의 모든 웹브라우저 호환 // 대부분 이거 씀 -> 크로싱 브라우징을 지원

jQuery2.x : HTML5 표준을 지원하는 웹브라우저만 // 실무 거의 안씀 -> 매우 컴팩트, 불필요한거 다 제거함

jQuery -> uncompressed -> 복사해서 가져옴 -> 이러게하면 코드 어시스던트가 지원 안됨

jQuery -> uncompressed -> 오른쪽키 다른이름으로 링크 저장

html 파일에서 <script src="jquery-1.12.4.js"></script> 하면 스크립트에서 사용할 수 있음

jQuery.fn.method

ㄴ fn은 prototype이다

* 기본 셀렉터와 계층 셀렉터

분류	셀렉터	기능
기본	*	모든 요소를 선택
	#id	id 값을 가진 요소를 선택
	.class	class 속성 값을 가진 요소를 선택
	element	요소를 선택
	selector1, selector2,	복수의 셀렉터중 일치하는 것을 선택
계층	ancestor descendant	ancestor 요소의 모든 자손 요소 descendant를 선택 (space)
	parent > child	parent 요소 자식 요소를 선택 (gt)
	prev + next	prev 요소 다음의 형제 요소 next를 선택 (plus) → 단수
	prev ~ siblings	prev 요소 다음의 형제 요소들 siblings를 선택 (tilt) → 복수
속성	[attr]	attr 속성을 가지는 요소를 선택
	[attr=value]	attr 속성 값이 value인 요소를 선택
	[attr!=value]	attr 속성 값이 value가 아닌 요소를 선택
	[attr^=value]	attr 속성 값이 value로 시작하는 요소를 선택
	[attr$=value]	attr 속성 값이 value로 끝나는 요소를 선택
	[attr*=value]	attr 속성 값이 value로 포함하는 요소를 선택
	[selector1][selector2][selector3]	셀렉터에 일치하는 속성을 가지고 있는 요소를 선택

> → >

< → <

& → &

&expd; → ^

$('div#lectures li[href='#lec03']') 예시

* 필터

- 셀렉터에다가 필터링 하는 것

- 필터셀렉터는 대부분 jQuery가 제공하는것이라 몰라도 됨.

분류	필터 셀렉터	기능
Visibility	:hidden	보이지 않는 요소를 선택
Visibility	:visible	보이는 요소를 선택
Forms	:hidden	숨겨진 입력 요소를 선택
Forms	:visible	사용 가능 상태에 있는 요소를 선택

※ 기본 셀렉터, 계층 셀렉터, 속성 셀렉터는 웹표준이기 때문에 알아두자, QuerySelector 인자로도 쓰고 jQuery $함수의 인자로도 쓰임.

[링크]

www.w3schools.com

www.jquery.com

728x90

저작자표시 비영리 변경금지

'My Trace > SK고용디딤돌2기' 카테고리의 다른 글

[SK고용디딤돌] MySQL (2/7) - 3주차 (0)	2016.07.18
[SK고용디딤돌] MySQL (1/7) - 2주차 (0)	2016.07.15
[SK고용디딤돌] 자바스크립트 (6/7) - 2주차 (0)	2016.07.12
[SK고용디딤돌] 자바스크립트 (5/7) - 2주차 (0)	2016.07.11
[SK고용디딤돌] 자바스크립트 (4/7) - 1주차 (0)	2016.07.08

'My Trace/SK고용디딤돌2기' Related Articles

Comments

안녕세계

[SK고용디딤돌] 자바스크립트 (7/7) - 2주차 본문

[SK고용디딤돌] 자바스크립트 (7/7) - 2주차

'My Trace > SK고용디딤돌2기' 카테고리의 다른 글

티스토리툴바