변수 선언

const a = 1;
const longVarialbeName = "kim"; // 변경 불가
const YN = false; // true
const Hi = null;
let b = 2; // 변경 가능

var는 이제 안쓴다고 함
변수 선언만 하고 아무것도 안 줄 시 undefined 뜸

---

배열

const arr = [1,2,"hello","world",null,true,undefined]
arr.push('d'); // 배열의 끝에 요소를 추가
arr.unshift('d'); // 배열의 앞쪽에 요소를 추가
arr.pop(); // 배열의 마지막 요소를 제거 // 제거한 요소 반환 받음
arr.shift() // 배열의 첫 요소를 제거 // 제거한 요소 반환 받음
arr.filter(Func); // 각각 요소에 func함수를 실행후 true가 아닌 요소들은 삭제하고 새로운 배열을 만든다

객체

const human = {
	name: "kim",
    age: 10,
};

console.log(human);
console.log(human.name);
console.log(human[name]);
human.lastName = "gildong"; // 객체에 추가됨 
human.name="lee"; // const로 객체를 선언해도 수정 가능

함수

const cal = {
	plus: function(a,b){
    return a+b;
    }
    minus: function(a,b){
    return a-b;
    }
}
const result = cal.minus(10,6); // 4

요소 가져오기

document.getElementByID("id")

• 아이디로 요소 하나 반환

document.getElementsByClassName("class")

document.getElementsByTagName("div")

• HTML 클래스 이름과 태그 이름에 해당하는 요소 배열으로 반환

document.querySelector("div.class h1")

• #아이디 .클래스 태그에 해당하는 첫번째 요소 반환

document.querySelectorAll("div.class h1")

• #아이디 .클래스 태그에 해당하는 요소 배열 반환

document.createElement("img");

• 해당 태그 생성

document

Javascript에서 기본 제공하는 객체로 해당 웹페이지의 HTML 요소에 접근하기 위해 사용 됨

Event 연결하기

console.log("요소") 한 후 크롬 콘솔에서 사용 가능한 이벤트를 확인할 수 있다.

function func(){}

title.addEventListener("click",fucn);
title.onClick = func; // 동일

title.addEventListener("이벤트",함수이름);
title.on이벤트 = 함수이름;
.removeEventListener(); // 이벤트 삭제 가능