기록

• vs코드 글자들 한번에 바꾸는 키 : f2
• document.body(head,title ...)은 호출가능
  • 나머지 div이런건 getElementById같은걸로 찾아와야함

function handleWindowResize(){
    document.body.style.backgroundColor="tomato"; //중요한 부분, h1 처럼 못가져옴
}

function handleWindowcopy(){
    alert("카피했당");
}

function handleWindowOffline(){
    alert("살려주세유");
}

function handleWindowOnline(){
    alert("살아있어유");
}

h1.onclick = mouseClick; //이렇게도 사용가능, 근데 이거 구림
h1.addEventListener("mouseenter",handleMouse);
h1.addEventListener("mouseleave",mouseLeave); 

window.addEventListener("resize",handleWindowResize); //window element의 resize이벤트, 윈도우 화면크기 바뀌면 반응
window.addEventListener("copy",handleWindowcopy); //글씨복사하면 반응하는 이벤트
window.addEventListener("offline",handleWindowOffline); //와이파이 끊어지면 반응
window.addEventListener("online",handleWindowOnline); //와이파이 연결되면 반응

• 이벤트요소를 찾으려면 console.dir 출력해서 앞에 on들어간거 찾으면됨

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

console.dir(title); //element의 내부를 보는 법

function handleMouse(){
    title.innerText="마우스 여깄당";
}

function mouseClick(){
    title.style.color="blue";
}

function mouseLeave(){
    title.innerText="마우스 갔당";
}

title.addEventListener("mouseenter",handleMouse);
title.addEventListener("click",mouseClick);  
title.addEventListener("mouseleave",mouseLeave);

• document는 html이 app.js를 load하기 때문에 존재함
• 모두 자바스트립트의 object->object의 속성 변경가능함, on으로 시작하는 것은 다 이벤트

• event -> 클릭하는거, 입력끝내기, 엔터누르기 등등..

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

console.dir(title); //element의 내부를 보는 법


title.innerText="Hello"; //h1의 text변경

function handleTitleClick(){
    console.log("클릭됨");
    title.style.color="blue"; //h1의 style을 자바스크립트에서 변경
}

title.addEventListener("click",handleTitleClick); //클릭한 경우 함수가 실행됨,
				//함수인자에 괄호넣으면 안됨handleTitleClick() ㄴㄴ

• htrml요소를 가져와서 addEventListener로 click이벤트 추가, 클릭한 경우에 함수 실행

• app.js:3 Uncaught TypeError: Cannot set properties of null (setting 'innerText') at app.js:3:17 -> 코드 내의 어떤 값이 null이다
• classname 가져오기

const hellos = document.getElementsByClassName("hello");

console.log(hellos);

• tag name으로 가져오기

const title = document.getElementsByTagName("h1");

• css 찾기처럼 가져오기 -> hello 클래스 안에 있는 h1태그 가져오기, 여러개가 해당되도 첫번째 요소만 가져

const title = document.querySelector(".hello h1"); //하나의 요소만 가져옴

const title2 = document.querySelectorAll(".hello h1"); //모든 요소 가져옴,array형식으로

const title = document.querySelector("#hello");
const title2 = document.getElementById("hello"); //둘이 똑같음

• 자바스크립트는 HTML에 이미 연결되어 있기 때문에 자바스크립트를 통해 HTML을 바꿀 수 있음
• document가 모든 것의 시작점, 즉 웹사이트를 의미함
• document = 자바스크립트 관점에서의 html

#3.1 HTML in Javascript

• 자바스크립트로 특정 속성 가져오기 : html에서 id를 통해 요소를 가져옴

document.getElementById("")

• 자바스크립트는 HTML 속성들을 가져오지만, HTML자체를 보여주진 않음 -> HTML을 표현하는 object를 보임

• 자바스크립트로 html 변경하기

• 자바스크립트로 요소 가져오기

console.log(title.id);
console.log(title.className);

• 즉 우리는 document에서 어떤 항목이든지 간에 이것들을 가져와서 이 항목들을 변경할 수 있음