728x90
1. console.dir()
- console.log 대신 사용 시, Element 를 더 상세히 보여줌
2. document.querySelector()
- 찾는 요소와 최초로 일치한 element 반환
<div class='hello'><h1>Grab me 1!</h1></div>
<div class='hello'><h1>Grab me 2!</h1></div>
<div class='hello'><h1>Grab me 3!</h1></div>
const title = document.querySelector(".hello h1");
console.log(title); // -> <h1>Grab me 1!</h1>만 반환
3. document.querySelectorAll()
- selector 조건에 부합하는 모든 element 를 반환
- array 로 반환
4. raw String 사용 지양
function handleTitleClick() {
// 두번의 String 값을 입력함. 오타의 위험성 커짐
if (h1.className === "clicked") {
h1.className = "";
} else {
h1.className = "clicked";
}
}
function handleTitleClick() {
// CSS 클래스를 그대로 복사해 저장하여 에러가 발생할 부분을 줄여줌
const clickedClass = "clicked";
if (h1.className === "clickedClass") {
h1.className = "";
} else {
h1.className = "clickedClass";
}
}
5. className과 classList의 차이
className
- 자바스크립트에서 DOM 요소를 획득한 후 스타일을 획득하거나 설정할 수 있음
classList
- HTML5에서 추가된 DOM 속성. DOM 요소의 처리를 간소화. IE10부터 사용 가능
- 클래스 문자열 전체, 속성값 전체를 바꾸지 않고 클래스 하나만 추가하거나 제거할 때 사용
- contains , remove, add, toggle 메서드 등을 사용 가능!
// contains, remove, add 활용
function handleTitleClick() {
// CSS 클래스를 그대로 복사해 저장하여 에러가 발생할 부분을 줄여줌
const clickedClass = "clicked";
if (h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
// toggle 활용해서 코드를 한줄로 만들기!
function handleTitleClick() {
// CSS 클래스를 그대로 복사해 저장하여 에러가 발생할 부분을 줄여줌
h1.classList.toggle("clicked");
}
6. local Storage API
- 브라우저에서 무언가를 저장할 수 있게 해주는 것
- 개발자 도구에서 확인 (application > Storage > Local Storage)
- setItem으로 값 저장 가능
// 저장
localStorage.setItem('username', 'nico'); // 키, 키값
// 삭제
localStorage.removeItem('username');
7. padStart/padEnd
- padStart(targetLength, padString)
- padEnd(targetLength, padString)
- 현재 문자열의 시작(끝)을 다른 문자열로 채워 주어진 길이를 만족하는 새로운 문자열 반환
- padString 을 쓰지 않을 시 공백으로 채움
- IE는 지원하지 않음 ❌
'abc'.padStart(10); // " abc"
'1'.padStart(2, "0") // "01"
'abc'.padEnd(8, "0") // "abc00000"
8. JSON.stringfy()
- javascript 값이나 객체를 문자열로 변환
console.log(JSON.stringify({ x: 6, y: 7 }));
// 결과 : "{"x":6,"y":7}"
console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// 결과: "[3,"false",false]"
9. JSON.parse()
- JSON 문자열의 구문 분석 후 결과로 JavaScript 값이나 객체를 생성
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
console.log(obj.count);
// 결과 : 42
console.log(obj.result);
// 결과 : true
10. Date.now()
- UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환
11. Array.prototype.filter()
- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
function sexyFilter(item) {
return item !== 3; //3만 아니면 다른건 다 true야
}
[1, 2, 3, 4, 5].filter(sexyFilter);
// 결과 : (4) [1, 2, 4, 5]
12. geolocation.getCurrentPosition
- 장치의 현재 위치를 가져옴
// 구문
navigator.geolocation.getCurrentPosition(success, error, [options])
- success : GeolocationPosition 객체를 유일한 매개변수로 받는 콜백 함수
- error : GeolocationPositionError 객체를 유일한 매개변수로 받는 콜백 함수
- options
- maximumAge
- 캐시에 저장한 위치정보를 대신 반환할 수 있는 최대 시간을 나타내는 값
- 0 지정 -> 기본값. 위치정보 캐시를 사용 불가, 반드시 실시간으로 위치를 알아내려 시도해야 한다는 뜻
- infinity 지정 -> 지난 시간에 상관없이 캐시에 저장된 위치정보 반환함
- timeout : 기기가 위치를 반환할 때 소모할 수 있는 최대 시간 값, 위치를 알아내기 전에 getCurrentPosition()이 반환하지 않을 것을 나타냄
- enableHighAccuracy
- 위치정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 불리언 값
- true 지정 -> 지원하는 경우 장치가 더 정확한 위치 제공, 전력 소모량 증가, 응답 속도 느려짐
- false 지정 -> 기본값. 기기가 더 빠르게 반응, 전력 소모 감소, 정확도 떨어짐
- maximumAge
// 사용 예시
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords; // 사용자의 위치값을 가져옴
console.log('Your current position is:');
console.log(`Latitude : ${crd.latitude}`); // 위도
console.log(`Longitude: ${crd.longitude}`); // 경도
console.log(`More or less ${crd.accuracy} meters.`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
참고 : 노마드코더 온라인 강의 <바닐라 스크립트로 크롬앱 만들기>, mdn web docs
728x90
'TIL > JavaScript' 카테고리의 다른 글
[딥다이브] 12장 함수 (0) | 2022.04.30 |
---|---|
[딥다이브] 11장 원시 값과 객체의 비교 (2) | 2022.04.27 |
[딥다이브] 10장 객체 리터럴 (0) | 2022.04.26 |
[딥다이브] 9장 타입 변환과 단축 평가 (0) | 2022.04.24 |
[딥다이브] 8장 제어문 (0) | 2022.04.24 |