FDS04 Javascript 중급(0613)

Nodelist 와 HTMLCollection 차이점

NodeList 는 어떤 종류의 nodeType 도 가질수 있지만, HTMLCollection 은 보통 Element 노드만 가진다.

Event 핸들링 방법: 바인딩

/*===========================
- 구형 : on{event_name}
- 이벤트 핸들러에 할당하는 매우 오래된 방식이며, 모든 브라우저에서 지원하는 방법
- 엘리멘트의 이벤트 핸들러 프로퍼티에 직접적으로 할당하는 방식
- 이벤트 핸들러는 해당 엘리먼트의 메소드로 간주되기 때문에, this의 스코프는 엘리먼트가 된다.
===========================*/
var clickBtn = document.getElementById('clickBtn');
btn.onclick = function() {
	alert('message!');
	console.log(this.id);
}


/*===========================
- 신형(IE9+) : addEventListener('event_name', handler)
- 이벤트에 대한 추가 및 제거를 위한 메소드로서,
아래의 메소드를 사용하면 하나의 이벤트 핸들러에 여러개의 이벤트 함수를 할당할 수도 있다.
또한, 같은 이벤트 함수가 아닌 경우, 삭제가 되지 않으니 주의하도록 한다.
	. addEventListener() : 이벤트 할당
	. 파라메터 : 이벤트 이름
			 이벤트 핸들링 함수
			 호출방식 (true:캡쳐링, false:버블링)
	. removeEventListener() : 이벤트 제거
	. 파라메터 : 이벤트 이름
			 이벤트 핸들링 함수
===========================*/
var clickBtn = document.getElementById('clickBtn');
btn.addEventListener('click', function() {
	alert('message!');
}, false);

btn.removeEventListener('click', function() {
	alert('message!');
});

브라우저의 기본 동작 차단: a tag 의 기본 동작인 페이지 이동 해제

/*===========================
브라우저의 기본 동작 차단

- 구형 : return false;
- 신형(IE9+) : Event.preventDefault();
===========================*/

//  * 이벤트를 바인딩할때 함수를 반복문 안에 넣는거보다는 바깥으로 빼서 참조 시키는 형태가 더 좋다.
  for ( var link, i=0, l=study_content_links.length; i<l; ++i ) {
      link = study_content_links.item(i);
      link.onclick = activeParent;
    };
    function activeParent(){
      console.log('this.parentNode:', this.parentNode);
      _.parent(this).className = 'active';
      return false;
    };

이벤트 위임(Event Delegation)

Child Element들 각각에 Event Handler를 추가하는 것이 아니라 Parent Element에 Event Handler를 추가한 뒤 Event가 발생한 node를 확인하여 처리하는 방법.

장점

등록되는 Event Handler의 수를 줄일 수 있다. (성능에 도움이 된다.)
코드가 간결해지며 유지보수가 수월해진다.

단점

불필요한 Event를 filtering하는 작업이 추가된다.

참고링크

사용 가능한 이벤트 핸들러

onabort: 이미지 로딩이 중단될 경우 실행된다.
onblur: 엘리먼트가 입력 포커스를 잃어버릴 경우 실행된다.
onchange: 폼 엘리먼트가 포커스를 잃고 값이 변경될 경우 실행된다.
onclick: 마우스 버튼이 눌렸다 떼어질 때 실행된다. mouseup 이벤트가 이어서 발생한다. 기본 동작 방식을 취소하려면 false를 반환한다.
ondblclick: 마우스가 더블클릭될 때 실행된다.
onerror: 이미지 로딩 오류가 일어날 경우 실행된다.
onfocus: 엘리먼트가 입력 포커스를 얻을 경우 실행된다.
onkeydown: 키가 눌렸을 때 실행된다. 취소하려면 false를 반환한다.
onkeypress: 키가 눌렸을 때 실행된다. keydown 이벤트가 이어서 발생한다. 취소하려면 false를 반환한다.
onkeyup: 키에서 손을 뗐을 때 실행된다. keypress 이벤트가 이어서 발생한다.
onmousedown: 마우스 버튼이 눌렸을 때 실행된다.
onmousemove: 마우스가 이동할 경우 실행된다.
onmouseout: 마우스가 엘리먼트에서 벗어났을 때 실행된다.
onmouseover: 마우스가 엘리먼트 위로 이동할 때 실행된다.
onmouseup: 마우스 버튼에서 손을 뗐을 때 실행된다.
onresize: 윈도우 크기가 변경될 경우 실행된다.
onselect: 텍스트가 선택됐을 때 실행된다.
onreset: 폼 초기화가 요청됐을 때 실행된다. 초기화를 방지하려면 false를 반환한다.
onsubmit: 폼 제출이 요청됐을 때 실행된다. 제출을 방지하려면 false를 반환한다.
onload: 문서 로딩이 완료됐을 때 실행된다.
onunload: 문서나 프레임셋이 사라졌을 때 실행된다.

이벤트 핸들러와 this 키워드

이벤트 핸들러를 HTML 속성으로 정의하든 자바스크립트 프로퍼티로 정의하든 함수를 document 엘리먼트의 프로퍼티로 할당하는 셈이다. 다시 말해 document 엘리먼트에 새로운 메서드를 정의하는 것이다. 이벤트 핸들러가 호출되면 이벤트가 발생한 엘리먼트의 메서드로서 해당 이벤트 핸들러가 호출되고, 따라서 this 키워드는 대상 엘리먼트를 가리킨다.

'this' 에 대한 예제 +

this 의 정의

전역 컨텍스트 : 전역에서(어떤 함수 외부) this는 전역 객체를 나타낸다. 웹브라우저에서 전역객체는 window
함수 컨텍스트 : 함수내부에서 this는 호출한 방법에 의해 좌우된다.

각 상황에 따라 this가 가리키는 것

기본적으로 global 객체이다. (window)
- strict mode가 아닐 때 this의 값은 항상 window

function f1(){
  return this;
}
f1() === window; // 전역 객체

function sum(a, b) {
   console.log(this === window); // => true
   this.myNumber = 20; // 전역 객체에 'myNumber'라는 속성을 추가
   return a + b;
}

strict mode일 때 undefined ( 실행 컨텍스트에 들어갈 때 할당되어 유지. 만약 정의되지 않았을 경우 undefined. null, 숫자, 문자값 등으로 설정 가능. 엄격모드는 내부 함수에서도 적용된다.)

function f2(){
  "use strict"; // strict mode
  return this;
}
f2() === undefined;
//  f2가 어떠한 기본(예. f2())도 제공하지 않고 호출했다. 이 기능은 strict mode를 지원하기 위해 시작했을 때 일부 브라우저에서 구현되지 않았다. 결과적으로, window 객체를 잘못 반환했다.

// 내부 함수에서의 this
var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       // this는 window, 엄격 모드였으면 undefined
       console.log(this === numbers); // => false
       return this.numberA + this.numberB;
     }
     return calculate();
   }
};
numbers.sum(); // NaN, 엄격 모드였으면 TypeError

new연산자(생성자)로 생성된 function 영역에서 this는 새롭게 생성된 객체 그 자신이다.

function F (v) {
  this.val = v;
}
var f = new F("Woohoo!");
console.log(f.val); // Woohoo!
console.log(val); // ReferenceError

객체의 prototype 체인에서 this는 호출된 객체이다.

var o = {
  f:function(){ 
    return this.a + this.b;
  }
};
var p = Object.create(o);	// 객체 o 를 프로토타입으로한 객체 p 를 생성한다.
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

메소드 실행에서의 this는 메소드를 소유하고 있는 객체다.(객체 내에 있는 메소드를 실행할 때, 여기서의 this는 자기자신)

var calc = {
  num: 0,
  increment: function() {
    console.log(this === calc); // => true
    this.num += 1;
    return this.num;
  }
};
// 메소드 실행. 여기서의 this는 calc.
calc.increment(); // => 1
calc.increment(); // => 2

getter와 setter에서의 this는 get 또는 set 되는 속성 객체다.

function modulus(){
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var o = {
  re: 1,
  im: -1,
  get phase(){
    return Math.atan2(this.im, this.re);
  }
};

Object.defineProperty(o, 'modulus', {
    get: modulus, enumerable:true, configurable:true});

console.log(o.phase, o.modulus); // logs -0.78 1.4142

call, apply, bind 메서드로 this를 특정한 객체와 연결할 수 있다.

var add = function (x, y) {
      this.val = x + y;
    },
    obj = {
      val: 0
    };
add.apply(obj, [2, 8]);
console.log(obj.val); // 10
add.call(obj, 2, 8);
console.log(obj.val); // 10

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty

DOM 이벤트 핸들러로 사용되는 함수에서 this는 이벤트가 발생한 엘리먼트다.

// 리스너로서 호출될 때, 관련된 엘리먼트를 파랗게 만든다.
function bluify(e){
  // 항상 true
  console.log(this === e.currentTarget); 
  // currentTarget 과 target 이 같은 객체일 때 true
  console.log(this === e.target);
  this.style.backgroundColor = '#A5D9F3';
}

// document의 모든 엘리먼트의 목록을 얻는다.
var elements = document.getElementsByTagName('*');

// 클릭 리스너로 bluify를 추가하여서 엘리먼트를 클릭하면, 그 엘리먼트는 파랗게 된다.
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}

참고 링크

Node.parentNode

특정 document 요소에 접근하여 그 요소의 부모를 찾고싶을 때 사용하는 속성이다.

// 활용 예제
// node 는 선택된 특정 document 요소
if (node.parentNode) {
 // remove a node from the tree, unless
 // it’s not in the tree already
 node.parentNode.removeChild(node);
}

Document 노드와 DocumentFragment 노드는 부모를 가질 수 없으므로 parentNode는 항상 null을 반환한다. 또한, 노드가 방금 작성되고 트리에 아직 연결되지 않은 경우 널 (null)을 리턴한다.

Element.className

특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

// 간단한 class 토글 예제

var elm = document.getElementById(‘item’);

if(elm.className === ‘active’){
   elm.className = ‘inactive’;
} else {
   elm.className = ‘active’;
}

많은 언어에서 DOM 조작을 위해 사용되는 “class ” 키워드와의 혼란을 줄이기 위하여 class 대신 className이라는 프로퍼티 명을 사용한다.

HTMLElement.offsetParent

DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 jQuery 객체로 만들어(wrapped) 준다. 여기서 말한 위치(positioned)는 CSS의 속성인 relative, absolute, fixed를 의미한다. 이런 정보들은 페이지상에서 객체들의 위치를 계산하기 위해 아주 유용하다.

<div class="hello">
  <p class="bonjour">Bonjour</p>
</div>

.hello{
  position: relative;
}
.bonjour{
  position: absolute;
  left: 20px;
  font-family: sans-serif
}

var offsetP = document.querySelector('.bonjour');

console.log(offsetP.offsetParent);

// 여기서 hello가 bonjour 의 상대적인 부모 노드다.

Node.hasChildNodes (IE7+)

/*===========================
Node.hasChildNodes() 메소드는 현재 노드(Node)에게 자식노드(child nodes)가 있는지를 Boolean 값으로 반환합니다.

예시 ) 아래 예시에서는 "foo"라는 id를 가진 요소를 찾고 "foo" 요소에게 자식노드가 있으면 첫번째 자식노드를 제거해줍니다.
===========================*/
var foo = document.getElementById("foo");

if ( foo.hasChildNodes() ) { 
  foo.removeChild( foo.childNodes[0] );
}

참고: https://developer.mozilla.org/ko/docs/Web/API/Node/hasChildNodes

Document.getElementByClassName (IE9+)

/*===========================
지정된 클래스 이름을 가진 모든 요소를 가져옵니다. (Internet Explorer 9 이상 부터 지원)

예시 ) 아래 예시에서는 클래스 값이 'example'인 모든 요소를 x라는 변수에 할당합니다.
===========================*/
var x = document.getElementsByClassName("example");

참고: https://developer.mozilla.org/ko/docs/Web/API/Document/getElementsByClassName

Regular Expression | 정규 표현식

정규표현식, 간단히 영어로는 regex, regex 라고도 불리운다.
정규표현식도 하나의 객체다

new RegExp(pattern[, flags]);
// 첫번째 전달인자로는 정규식 표현 패턴을 받으며,
// 두번째 전달인자로는 flag 라는 값을 받는다.

new RegExp('ab+c', 'i');  // 이렇게 사용할 수 있고,
new RegExp(/ab+c/, 'i');  // 이런 형식으로도 사용할 수 있다.

flags(플래그)

정규식 생성자의 두번째 전달인자로 받으며, 여러 개의 값을 넣을 수 있다.

입력값의 전역에서 매칭된 하나의 값만을 찾지않고, 둘 이상의 모든 매칭값을 찾는다.

대소문자 구분을 하지 않는다.

여러 줄의 입력값을 행 단위로 확인한다.

패턴을 유니코드로 해석한다.

패턴 표현식

문자열의 시작

문자열의 끝

임의의 한 문자(문자의 종류 무관), 백슬래시( \ ) 는 넣을 수 없음.

문자가 없거나, 무한정 많음

문자가 하나 이상

문자가 없거나 하나

[]

문자의 집합 혹은 범위를 나타낸다. []내에서 ^가 선행하면 NOT 을 나타낸다.

{}

횟수 또는 범위

()

소괄호 안의 문자를 하나의 문자로 인식

패턴 안에서 OR 연산을 수행할 때 사용된다

공백 문자

공백 문자를 제외한 나머지 문자

알파뱃이나 숫자

알파뱃이나 숫자를 제외한 나머지 문자

숫자 0 ~ 9

숫자를 제외한 모든 문자

정규식 .test() 메소드와 종종 사용하는 예제

/[0-9]/.test("44231231");	// 숫자 0~9값을 검증한다.

var reg = new RegExp('[가-힣]');	//한글만 허용하는 정규식, 생성자를 활용
reg.test("가너두러오");	//한글이다... true

/\d{6}\-[1-4]\d{6}/.test("860406-2213262");	// 주민등록번호 검증 정규식
										    // 숫자6개와 - 1~4숫자 1개와 숫자6개

/^[a-zA-Z0-9.]+@[a-zA-Z0-9.]+[a-zA-Z]$/.test("amm.omo@gmail.com");
// 이메일 검증 정규식
// 아이디 부분에 . 을 허용해보았다.

querySelector(), querySelectorAll()

IE8+ 에서 작동한다.
태그의 아이디, 클래스, 이름 등으로 태그 객체를 반환하는 메서드로 jQuery의 $(“셀렉터“) 와 비슷하다.

querySelector()

css의 선택자를 인자로 받아서 해당 엘리먼트 객체를 찾음
가장 첫번째 엘리먼트만을 리턴
배열아니므로 직접 제어해야함

var container = document.querySelector("#container");
var box = document.querySelector(".box"); //배열이 아님
var body = document.querySelector("body"); //배열이 아님

querySelectorAll()

IE8 에서는 CSS2만 지원한다.
해당 선택자의 모든 엘리먼트를 유사배열에 담아 리턴
for-in문 사용

####querySelector 사용시 주의할 점

인자를 문자열로 전달해야함

querySelector(""), querySelectorAll("")

css 선택자와 사용방법이 동일하나 약간의 제한이 있음

* > .class // (o) 
>.class // (x)

CSS 구문을 따르지 않는 id 또는 선택기 (예 : 콜론 또는 공백을 사용하여)를 일치 시키려면 백 슬래시로 이스케이프 문자를 사용
의사 클래스 선택기 :hover, :focus, :active 지원. :visited :link 가 포함 된 선택기 는 무시되고 요소가 반환되지 않음
지정한 선택자는 검색을 시작할 시작 요소의 하위 항목에만 적용. 시작 요소 자체는 포함되지 않음
CSS Pseudo-elements(가상 요소)는 어떠한 element도 결코 반환하지 않음

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FDS04 Javascript 중급(0613)

Nodelist 와 HTMLCollection 차이점

Event 핸들링 방법: 바인딩

브라우저의 기본 동작 차단: a tag 의 기본 동작인 페이지 이동 해제

이벤트 위임(Event Delegation)

사용 가능한 이벤트 핸들러

이벤트 핸들러와 this 키워드

'this' 에 대한 예제 +

this 의 정의

각 상황에 따라 this가 가리키는 것

참고 링크

Node.parentNode

Element.className

HTMLElement.offsetParent

Node.hasChildNodes (IE7+)

Document.getElementByClassName (IE9+)

Regular Expression | 정규 표현식

flags(플래그)

패턴 표현식

정규식 .test() 메소드와 종종 사용하는 예제

querySelector(), querySelectorAll()

querySelector()

querySelectorAll()

FilesExpand file tree

0613.md

Latest commit

History

0613.md

File metadata and controls

FDS04 Javascript 중급(0613)

Nodelist 와 HTMLCollection 차이점

Event 핸들링 방법: 바인딩

브라우저의 기본 동작 차단: a tag 의 기본 동작인 페이지 이동 해제

이벤트 위임(Event Delegation)

사용 가능한 이벤트 핸들러

이벤트 핸들러와 this 키워드

'this' 에 대한 예제 +

this 의 정의

각 상황에 따라 this가 가리키는 것

참고 링크

Node.parentNode

Element.className

HTMLElement.offsetParent

Node.hasChildNodes (IE7+)

Document.getElementByClassName (IE9+)

Regular Expression | 정규 표현식

flags(플래그)

패턴 표현식

정규식 .test() 메소드와 종종 사용하는 예제

querySelector(), querySelectorAll()

querySelector()

querySelectorAll()