-
[JS] Nomadcoders - Vanila JSFrontEnd/JavaScript 2022. 5. 3. 19:40
LOGIN
HTML Element의 APIs 보는 방법
1. console.dir(elem);
2. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
HTMLElement - Web APIs | MDN
The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
developer.mozilla.org
elem.classList.contains(클래스 이름);
: 요소의 클래스 리스트에 해당 클래스가 있는지 여부를 true, false로 반환
elem.classList.add(클래스 이름);
: 요소의 클래스 리스트에 해당 클래스를 추가
elem.classList.remove(클래스 이름);
: 요소의 클래스 리스트에서 해당 클래스를 제거
elem.classList.toggle(클래스 이름);
: 요소가 해당 클래스를 가지고 있으면 요소의 클래스 리스트에서 제거, 가지고 있지 않으면 추가
addEventListener("click", callback함수); 에서 함수에 괄호를 붙이지 않는 이유
: 함수를 즉시 실행하지 않고 event가 발생할 때 실행하게 하기 위해event.preventDefault();
: 어떤 event의 기본 동작이 발생하지 않도록 막음
- <form>의 기본 동작 : 폼 제출(submit)
- <a>의 기본 동작 : 클릭 시 해당 링크로 이동
EventListener 실행 시 브라우저의 동작
1. 이벤트가 발생하면 callback 함수를 실행하는데, 이때 매개변수로 발생한 이벤트에 대한 정보를 객체로 전달
2. 이벤트에 대한 기본 동작 실행
Window.localStorage APIs : https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.
developer.mozilla.org
- localStorage.setItem("key", "value"); : local storage에 {key: value} 형태로 데이터 저장
- localStorage.getItem("key"); : local storage에 저장된 데이터를 key로 찾아 반환
- localStorage.removeItem("key"); : local storage에 저장된 데이터를 key로 찾아 삭제
CLOCK
Interval : 매 시간마다 반복적으로 동작 수행
function sayHello() { console.log("hello"); } // setInterval(first=f, second=time); : 5초에 한 번씩 sayHello 실행 setInterval(sayHello, 5000); // setTimeout(first=f, second=time); : 5초 뒤에 sayHello 실행 setTimeout(sayHello, 5000);
Window의 Date 객체
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date#instance_methods
Date - JavaScript | MDN
JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
developer.mozilla.org
시계 만들기
const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } getClock(); // 웹 사이트가 새로고침 될 때마다 새로운 Date 객체를 생성(새로고침을 누른 시간) setInterval(getClock, 1000);
- padStart(maxLength, fillString) : 글자 수를 maxLength로 만들기 위해 fillString으로 나머지 글자를 채워줌
- parseInt(String) : String을 정수형으로 변환
- String(number) : 숫자를 String으로 변환
QUOTE
실수를 정수로 바꾸는 방법
1. Math.round() : 반올림
2. Math.ceil() : 올림
3. Math.floor() : 내림
랜덤으로 숫자 생성
Math.random() : 0~1 사이의 숫자를 랜덤으로 반환
배열의 크기(원소의 개수)
Array.length
TO DO LIST
버튼을 눌렀을 때 삭제하는 함수
event.target.parentElement;
: 해당 버튼에 대한 정보를 얻기 위해 event.target 프로퍼티의 부모 요소, 즉 버튼의 부모 요소인 <li> 선택function deleteToDo(event) { const deleteLi = event.target.parentElement; deleteLi.remove(); }
브라우저가 모든 것을 문자열로 바꾸는 메서드!
JSON.stringify();
: 서버와 데이터를 주고받기 위해 JSON을 사용하는데, JSON 파일로 저장하기 위해 문자열로 변환
똑똑한 Array, JS에서 꼭 필요한 Data type!
array.forEach();
: array에 있는 각각의 elem를 매개변수로 하여 element의 수만큼 함수 실행
WEATHER
navigator.geolocation.getCurrentPosition(위치를 찾을 경우 실행할 메서드, 찾지 못할 경우 실행할 메서드);
위도와 경도를 통해 날씨를 알려주는 API : https://openweathermap.org/api
Weather API - OpenWeatherMap
Please, sign up to use our fast and easy-to-work weather APIs for free. In case your requirements go beyond our freemium account conditions, you may check the entire list of our subscription plans. You can read the How to Start guide and enjoy using our po
openweathermap.org
'FrontEnd > JavaScript' 카테고리의 다른 글
[JS] innerHTML, innerText, textConten (0) 2022.05.14 [JS] Nomadcoders - Zoom Clone Coding (0) 2022.05.06 [JS] Do it! JS - 03 변수와 자료형, 연산자 (0) 2022.05.02 [JS] Do it! JS - 02 자바스크립트와 친해지기 (0) 2022.05.02 [JS] Do it! JS - 01 자바스크립트 (0) 2022.04.30