Nomad Coders와 함께 Vanilla JS 배우기

Chrome App

- Hello world with JS

- Variable

• 변수 선언 시 let, var 사용. 상수는 const

- Data_types

- Organizing - Array

• array는 []을 이용하여 선언
• 자료형에 국한되지 않음
• index가 넘어간 값을 호출해도 error 발생 안함

- Organizing - Object

• objName.val처럼 호출
• object안에 array, object 등 복합하여 사용 가능

- Function

• 아래와 같은 방법으로 작성 가능

function funName(arg){
  return arg + 1
}

• 함수 사용 시 인자값이 작성한 함수보다 많을 때도 error가 발생하지 않음

- Function - with Object

• 아래와 같은 방법으로 문자열안에 변수를 넣어 사용가능

// ``는 백틱이라 호칭
`${name} is ${age} years old`

• 아래와 같은 방법으로 object에 function을 넣어 사용가능 타언어의 클래스같은 느낌

const myObj = {
  func1: function(num){
    return num + 10
  },
  func2: function(num){
    return num - 10
  }
};

- DOM Function

• Document Object Module

- Event and event handlers

• 아래와 같이 이벤트를 listen 할 수 있음

function handleClick() {
  title.style.color = "red"
}
// 클릭하면 title 객체의 색을 빨강으로 바꿈
title.addEventListener("click", handleClick);

• 아래와 같이 작성 시 이벤트 확인 전 즉시 함수를 실행

title.addEventListener("click", handleClick());

if_else_or_and

• JS에서는 아래와 같은 문법을 사용

if(A && B || C){
  ...
} else if(D === E){
  ...
} else {
  ...
}

- DOM_function_with_if_else

---

이론 끝 개발 시작

OHMENTUM

- Clock

• 쉼표로 여러개의 변수 선언 가능

const A = document.querySelector(".clsName"),
  B = A.querySelector("h1");

• Date 클래스를 이용하여 현재 시각 사용

const date = new Date();
// Fri Oct 30 2020 04:36:31 GMT+0900 (대한민국 표준시)
const hours = date.getHours();
// 4

• 삼항 연산자를 이용하여 한자리 수일 때 예외처리

condition ? trueValue : falseValue

• setInterval 함수를 사용하여 정해진 시간마다 함수 호출

// 1000ms 마다 호출
setInterval(functionName, 1000);

- Save Name (localStorage)

• url을 기준으로 저장되는 localStorage를 사용할 수 있음

const currentUser = localStorage.getItem("KEY");
// 없을 시 null

localStorage.setItem("KEY", "VALUE");

• Enter 입력 시 form에서 defalut로 실행되는 submit을 방지할 수 있음

const form = document.querySelector(".js-form");

function handlerSubmit(event){
  event.preventDefault();
}

form.addEventListener("submit", handlerSubmit);

• display 설정을 다르게 한 css class와 classList의 add, remove를 이용하여 저장 유무에 따라 예외처리

- Make to do list

• createElement, appendChild를 사용하여 html에 추가, removeChild를 사용하여 삭제

• localStorage를 이용하여 오브젝트로 이루어진 array를 저장

• ls에 설정, 불러오기 시 JSON fn을 사용

// JSON = JavaScript Object Notation
JSON.stringify(something);
// 모든 객체들을 문자열 형태로 만들어 줌
JSON.parse(something);
// 문자열을 JS 형태로 읽어줌

// python의 exec와 같은 느낌

• array의 forEach, filter fn을 사용하여 불러왔을 때, 삭제했을 때 설정

// array에 있는 모든 요소들을 함수의 매개변수로 사용
array.forEach(funtion(ex){
  console.log(ex);
});

// array에 있는 모든 요소들을 함수의 매개변수로 사용 후 반환 값이 true인 요소들로 이루어진 새 array를 반환
newArray = array.filter(funtion(ex){
  return ex % 2 === 0;
});

- Image Background

• Math 모듈의 랜덤과 버림을 이용

// Math.random() * 5 = 0~5까지 랜덤으로
// Math.floor = 나머지 버림
// Math.ceil = 나머지 올림
const number = Math.floor(Math.random() * IMG_NUMBER);

- Get weather with open API

• navigator를 이용하여 현재 좌표 획득

navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoError);

• fetch를 이용하여 API 호출

fetch(
  `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
)

• then을 이용하여 호출이 끝난 후 가공 및 사용

fetch(
  `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
).then(function(response){
  return response.json();
}).then(function(json){

  something

});