[JS] Nomadcoders - Vanila JS

 

LOGIN

 

HTML Element의 APIs 보는 방법

1. console.dir(elem);

 

 

2. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

 

HTMLElement - Web APIs | MDN

 

---

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.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

 

시계 만들기

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