0627

Node.cloneNode()

노드 복제

Syntax

var dup_node = Node.cloneNode([deep])

deep[option]
- false[기본값] - 해당 요소노드 하나만 복사
- true - 해당 요소노드 하위의 모든 요소노드까지 복사
해당 요소에 바인딩된 이벤트는 복제되지 않음

Array.prototype.forEach() 메서드

배열 요소마다 한 번씩 제공한 함수를 실행

Syntax

arr.forEach(callback[, thisArg])

매개변수
- callback : 각 요소에 대해 실행할 함수(세개의 매개변수를 가진다)
  - value : 배열에서 현재 처리중인 요소
  - index : 배열에서 현재 처리 중인 요소의 인덱스
  - array : forEach()가 적용되고 있는 배열
  - thisArg : 선택사항. callback을 실행 할 때 this로서 사용하는 값.

forEach()는 오름차순으로 배열에 있는 각 요소에 대해 한 번씩 제공한 callback을 실행합니다. 삭제 또는 비초기화된 인덱스 속성에 대해서는 호출되지 않습니다.

Example

다음 코드는 주어진 객체의 사본을 만듭니다. 객체 사본을 만드는 여러 방법이 있습니다, 다음은 그저 한 방법으로 ECMAScript 5 Object.* 메타 속성 함수를 사용하여 Array.prototype.forEach()가 작동하는 법을 설명하기 위해 제시되었습니다.

function copy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);

  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });

  return copy;
}

var obj1 = { a: 1, b: 2 };
var obj2 = copy(obj1); // obj2는 이제 obj1처럼 보임

for…in문

일반적으로 알고 있는 for 문 과는 다르게 객체의 property(속성) 들을 순회하는데 주로 사용된다.

// 사용하는 형식
for(variable in object){
  ...
}

// 기본적인 사용 예제
var obj = {a: 1, b: 2, c: 3};
    
for (var prop in obj) {   // 관례적으로 prop 이라는 이름으로 객체의 속성을 찾는데 사용한다.
  console.log(`obj.${prop} = ${obj[prop]}`);
}
// 출력은
// obj.a = 1
// obj.b = 2
// obj.c = 3

// hasOwnProperty 사용 예제
var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';	//함수의 .color 속성에 'red' 값을 할당
}

ColoredTriangle.prototype = triangle;
// ColoredTriangle 의 프로토타입으로 triangle 객체를 지정한다.

var obj = new ColoredTriangle();	// new 키워드를 사용해 ColoredTriangle 객체의 인스턴스를 생성

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
    //hasOwnProperty 가 없으면, for...in 문은 프로토타입 체인까지 거슬러 올라가 triangle 객체의 a, b, c 속성까지 모두 출력해버린다.
  } 
}

// 출력은
// obj.color = red

Event 종류

click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
focus – HTML요소에 포커스가 갔을때 발생한다.
blur – HTML요소가 포커스에서 벗어났을때 발생한다.
keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
keydown – 키를 누를 때 발생한다.
keyup – 키를 눌렀다가 떼는 순간에 발생한다.
load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
resize – 브라우저 창의 크기를 조절할때 발생한다.
scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

Focus 를 받는 Element 종류

참고: https://goo.gl/xWM8U4
href 속성을 가지는 Element

a
area
base
link

Element.classList() - IE10+

classList 메소드

add(String[, String])

특정 클래스 값을 추가. 만약 요소의 속성에 추가하려는 클래스가 존재한다면 무시

remove(String[, String])

특정 클래스 값을 제거

item(Number)

클래스 값을 콜렉션의 인덱스를 이용하여 변환

toggle(String[, force])

한개의 인수만 있을 때 : 클래스 값을 변환. 즉 클래스가 존재하면 지우고 false를 반환, 존재하지 않다면 클래스를 추가하고 true를 반환
두번째 인수가 있을 때 : 두번째 인수가 true로 평가되면 클래스가 있으면 유지, 없으면 추가. false로 평가되면 해당 클래스가 있으면 지우고, 없으면 유지.

contains(String)

특정 클래스 값이 요소의 클래스 소석에 존재하는지 확인

하위 브라우저 호환 MDN Polyfill

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.innerHTML

Element.innerHTML = content;

HTML을 완전히 바꿔버림.
해당 Element의 기존HTML(하위노드)은 전부 사라지고 삽입하는 새로운 HTML로 대체됨.
content의 문자열을 파싱하고, 생성 된 노드를 element의 자식으로 할당.
innerHTML은 이벤트 바인딩이 안된다.
HTML5에서 innserHTML로 삽입된 <script> 코드는 실행되지 않음.
조작이 쉬워 보안에 좋지 않다.

onkeyup 이벤트 핸들러(키보드 이벤트 감지+)

var keyboards = {
enter: 13
};
textarea.onkeyup = function(e) {
    var key = e.charCode || e.keyCode || e.which;
    console.log(key);
    if (key === keyboards.enter) { render(); }
};

키보드를 누르면 해당 키의 유니코드 값을 반환
- KeyboardEvent.charCode
- KeyboardEvent.keyCode(많이 사용)
- KeyboardEvent.which
참고: Keycode Reference Table

form, novalidate 속성

novalidate 속성은 폼 제출 시 유효성 검사를 하지 않도록 지정할 때 사용한다. 이 속성은 유효성 검사를 하는 폼에서 “저장” 버튼을 포함시키려고 할 때 유용한다. 사용자는 폼에 데이터를 완전히 입력하지 않은 상태에서도 하던 일을 마감할 수 있다.

<form action=“demo_form.asp” novalidate=“novalidate”>
	E-mail: <input type=“email” name=“user_email”>
<input type=“submit”>
</form>

form 값 가져오기 및 검증

값을 가져오는 방법 예제

   // 사용자 입력 값을 가져오기
    var name_value    = form.querySelector(‘#user_name’).value;
    var email_value   = form.querySelector(‘#user_email’).value;
    var subject_value = form.querySelector(‘#user_subject’).value;
    var message_value = form.querySelector(‘#user_message’).value;

   // 사용자 입력 값을 가지고와서 하나의 객체의 속성 키:값으로 설정
    var user_inputs = {
      name: name_value,
      email: email_value,
      subject: subject_value,
      message: message_value,
    };

정규표현식으로 이메일 값을 검증하는 방법 예제

// 정규 표현식을 이용한 사용자 입력 값 유효성 검사 : 이메일 검증을 위한 콜백함수는 이메일 검증을 수행한 후 올바른 경우에는 서버에 정상적으로 등록하기 위해 이동하고 잘못된 이메일 입력시 사용자에게 재입력을 요청한다.

var email_reg = /^(([^<>()\[\]\\.,;:\s@“]+(\.[^<>()\[\]\\.,;:\s@“]+)*)|(“.+“))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

email_reg.test(user_inputs.email)

Element.insertAdjacentHTML(position, text)

insertAdjacentHTML() 는 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다.
- beforebegin , afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.

<!-- 여기가 beforebegin -->
<div>
 <!-- 여기는 afterbegin -->
 Lorem ipsum...
 <!-- 여기는 beforeend -->
</div>
<!-- 여기는 afterend -->

text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.

Element.insertAdjacentElement

Element.insertAdjacentElement(position, element)
Element 에는 요소노드 값을 입력한다.
insertAdjacentHTML과 같은 포지션 값을 가진다.
IE9+ 호환

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('beforebegin',tempDiv);
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('afterend',tempDiv);
  setListener(tempDiv);
});

Element.insertAdjacentText

Element.insertAdjacentText(position, element)
Element 에는 Text 값을 입력한다.
insertAdjacentHTML과 같은 포지션 값을 가진다.
IE9+ 호환

beforeBtn.addEventListener('click', function() {
  para.insertAdjacentText('afterbegin',textInput.value);
});

afterBtn.addEventListener('click', function() {
  para.insertAdjacentText('beforeend',textInput.value);
});

##HTMLElement.dataset

데이터 접두사 제어 메소드이며 data- 로 시작하는 값을 제어할수 있다.
HTML 노드에 커스텀 속성을 부여할 수 있다.

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

let el = document.querySelector('#user');	// 위의 #user div 노드를 el 변수에 할당

// el.id == 'user'	id 값에 접근하는 방법
// el.dataset.id === '1234567890'	data-id 에 접근하는 방법
// el.dataset.user === 'johndoe'	data-user 에 접근하는 방법
// el.dataset.dateOfBirth === ' data-date-of-birth에 접근 방법: 케밥케이스는 카멜케이스로 접근한다.

el.dataset.dateOfBirth = '1960-10-03'; // data-date-of-birth 값을 세팅한다.

// 'gender' in el.dataset === false		//data-gender 값은 존재하지않으므로, false

el.dataset.gender = 'female';			//data-gender 값을 설정한다, 그리고 존재하므로 true
// 'gender' in el.dataset === true

DOMStringMap
- 요소에 추가된 사용자 지정 data- 를 나타내기 위해 HTML 특성에 사용된다.
- 위의 예제처럼 DOMStringMap 에 객체처럼 접근하여 설정할 수 있다.

네이밍 관례 종류(Naming Convention)

TitleCase : TitleCaseNaming (UpperCamelCase,PascalCaseNaming) 첫 단어를 대문자로 시작하는 표기법
CamelCase : camelCaseNaming (lowerCamelCase) 각 단어의 첫문자를 대문자로 표기하고 붙여쓰되, 맨처음 문자는 소문자로 표기
SnakeCase : snake_case_naming 단어를 밑줄문자(_)로 구분하는 표기법

KebabCAse : kebab-case-naming 소문자에 dash(-) 조합

html,css에서는 class명으로 케밥케이스를 많이 쓰는데, 자바스크립트에서 하이픈은 빼기(-)로 인식할 수 있어서
객체의 key 값을 케밥케이스로 할때에는 따옴표로 감싸줘야 한다.

  // <div class="html-wrapper">
  //   작성한 HTML 코드가 이 곳에 동적으로 처리됩니다. :-)
  // </div>
  // #user-html-code <textarea> 요소의 값(value) -> HTML 코드를
  // .html-wrapper 내부에 적용하여 화면을 업데이트 하시오.
  $.selector('div.html-wrapper').innerHTML = html_code;

참고: http://www.w3im.com/ko/js/js_conventions.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

0627

Node.cloneNode()

Array.prototype.forEach() 메서드

for…in문

Event 종류

Focus 를 받는 Element 종류

Element.classList() - IE10+

classList 메소드

Element.innerHTML

onkeyup 이벤트 핸들러(키보드 이벤트 감지+)

form, novalidate 속성

form 값 가져오기 및 검증

Element.insertAdjacentHTML(position, text)

Element.insertAdjacentElement

Element.insertAdjacentText

네이밍 관례 종류(Naming Convention)

FilesExpand file tree

0627.md

Latest commit

History

0627.md

File metadata and controls

0627

Node.cloneNode()

Array.prototype.forEach() 메서드

for…in문

Event 종류

Focus 를 받는 Element 종류

Element.classList() - IE10+

classList 메소드

Element.innerHTML

onkeyup 이벤트 핸들러(키보드 이벤트 감지+)

form, novalidate 속성

form 값 가져오기 및 검증

Element.insertAdjacentHTML(position, text)

Element.insertAdjacentElement

Element.insertAdjacentText

네이밍 관례 종류(Naming Convention)