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