Javascript 개발 노트

Apr 10, 2017

Javascript로 개발하면서 자주 사용하는 내용을 정리했다.

이벤트

마우스 관련 :

이벤트 핸들러 설명
onmouseenter 포인터가 한 요소로 이동될 때 발생
onmouseleave 포인터가 요소의 바깥으로 나갈 때 발생
onmousemove 요소 위에서 포인터가 움직일 때
onmousedown 요소에서 마우스 버튼을 눌렀을 때 발생
onmouseup 요소위에서 마우스 버튼을 눌렀을 때 발생(release)

자주 사용하는 이벤트 메소드 :

이벤트 핸들러 설명
e.preventDefault() 기본 기능이 동작하는 걸 막는다.
e.stopPropagation() 부모 노드 방향으로 이벤트가 전파되지 않도록 한다.

배열

var arr = [1,2,3];

// indexOf : 배열에 값이 존재하면 인덱스값을 리턴. 없으면 -1
arr.indexOf(1); // 0
arr.indexOf(4); // -1

// 배열에 원소 추가
arr.push(4); // [1,2,3,4]

// 배열에서 원소 제거
// 3의 인덱스를 구해서
var idx = arr.indexOf(3);
// 그 인덱스 값을 기준으로 1개 제거
arr.splice(idx, 1);

map

const files = ["F1", "F2", "F3"]

const result = files.map(file => {
    return "- " + file;
});

console.log(result); // ["- F1", "- F2", "- F3"]

template (ES6)

const foo = 'FOO';
const bar = 'BAR';
console.log(`${foo}-${bar}`); // FOO-BAR

유용한 객체

// 유저 에이전트
navigator.userAgent