자바스크립트 기기기초 (29) 썸네일형 리스트형 #3.5 More Events 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.addEven.. #3.4 Events part Two 이벤트요소를 찾으려면 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.addEvent.. #3.3 Events 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",handleT.. #3.2 Searching For Elements 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"); //하나.. #3.0 The Document Object 자바스크립트는 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에서 어떤 항목이든지 간에 이것들을 .. 이전 1 2 3 4 다음
