자바스크립트기초 (32) 썸네일형 리스트형 #3.8 CSS in Javascript part Three classList로 클래스 이름을 바꾸는 것이 아닌 classname 목록들 관리하기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked"; if(h1.classList.contains(clickedClass)){ //classList가 clickedClass를 포함하고 있다면 h1.classList.remove(clickedClass); //classList에 clickedClass를 제거 }else{ //포함하고 있지 않다면 h1.classList.add(clickedClass);//classList에 clickedClass를 추가 } } h1.addEventListener.. #3.7 CSS in Javascript part Two Click Me! //js파일 연결 body{ background-color: beige; } h1{ color: blue; transition: color.5s ease-in-out; } .clicked{ /*clicked라는 이름의 클래스 생성*/ color: tomato; } .sexy-font{ font-family: 'Courier New', Courier, monospace; } const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked sexy-font"; //string을 변수에 저장해서 이름 잘못쳐서 에러날수 있는거 방지 if(h1.className === clicke.. #3.6 CSS in Javascript 조건문으로 색 바꾸기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const currentColor = h1.style.color; let newColor; if(currentColor === "blue"){ newColor = "tomato"; }else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click",mouseClick); 핵심은 요소를 찾고, 이벤트 추가하고, 함수로 반응만들기 #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 다음
