vanila JS

변수

const: 변하지 않음
let: 변함
null: 변수의 type이 null
undefined: 변수의 type이 지정 안 됨

array.push(~): ~를 맨 끝에 추가
Object: const로 불러오지만 내부 요소는 변경 가능

const player ={
    name:"San",
    points:10,
    fat: false,
};

console.log(player.name);
console.log(player["points"]);
player.lastname = "hyunsu";
player.points += 5;

*console도 objcect임.

fuction

const calculator = {
    plus: function(a,b){
        return(a+b);
    },
    minus: function(a,b){
        return(a-b);
    }
};
const plusResult= calculator.plus(2,4);
console.log(plusResult);

return을 사용한다는 점.

불러오기

document.getElementById("title");

document.getElementsByClassName("hello");

const hello = document.querySelector(".hello h1");

Event

hello.addEventListener("mouseenter", handleHelloClick);
hello.addEventListener("mouseleave", handleHelloClick2);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", windowHandleCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

toggle

(css)
.active{
    color:tomato;
}

(js)
function handleClickh1(){
    h1.classList.toggle("active")
}
h1.addEventListener("click", handleClickh1);

preventDefault

function handleLinkClicked(event){
    event.preventDefault();
    link.classList.add(HIDDEN_CLASSNAME);
}

classList

function handleBtnClicked(event){
    const username = loginInput.value;
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerHTML = "Hello " + username;
    greeting.innerHTML = `Hello ${username}`;
}

class를 추가하거나 제거할 수 있다.

local storage

reload를 하게 되면 변수들이 사라지기 때문에 local storage나 session storage에 저장해두는 경우가 있음.

JSON

function saveToDos(){
    localStorage.setItem("todos", JSON.stringify(toDos));
}

const reloadedToDos = JSON.parse(localStorage.getItem("todos"));

JSON.stringify: object를 JSON으로 바꿔줍니다.
JSON.parse: JSON을 object로 바꿔줍니다.

참고
ctrl+D: 같은 단어 전체 선택