728x90 반응형 Coding With Jina154 [자바스크립트] classList.add/remove/contains / toggle classList.add("추가하고 싶은 클래스명") - 클래스를 추가 생성 classList.remove("제거하고 싶은 클래스명") - 클래스를 제거 classList.contains("확인하고 싶은 클래스명") - true/false로 클래스의 존재여부를 확인해줌/값이 존재하는지 체크 ⓐ CLICKED_CLASS 라는 변수 안에 있는 클래스의 존재 여부를 확인하여 존재하면 true / 없으면 false ⓑ if문 조건은 기본이 true이므로 !hasClass의 뜻은 false이다 ⓒ if문의 조건이 false라면 CLICKED_CLASS를 추가하고 else에서는 제거하라는 뜻. function handleClick() { const hasClass = title.classList.contains(C.. 2021. 1. 14. [자바스크립트] 자바스크립트로 CSS 변경하기 - classList 이용 element.classList.add("추가하고자하는 클래스명"); HTML Hello 자바스크립트 const a = document.querySelector(".a"); function clickThis(){ a.innerHTML = "글자색이 변경되었습니다."; a.classList.add("b"); } a.addEventListener("click", clickThis); CSS body { background-color: rgb(247, 217, 253); } h1 { color: white; } .a { color: rgb(67, 35, 211); cursor: pointer; } .b { color: rgb(255, 136, 0); } 결과 - 처음에는 class명이 a만 존재 - 한번 클릭.. 2021. 1. 14. [자바스크립트] init()함수는 왜 사용할까? init( ) 함수 : 여러 함수의 초기화를 위한 즉시실행 함수 사용이유는 ① 가독성 측면 ② 전역객체보호 사용예시) const title = document.querySelector("#title"); const BASE_COLOR = "rgb(52, 73, 94)"; const OTHER_COLOR = "#7f8c8d"; function handleClick() { const currentColor = title.style.color; if (currentColor === BASE_COLOR) { title.style.color = OTHER_COLOR; } else { title.style.color = BASE_COLOR; } } function init() { title.style.color =.. 2021. 1. 14. [자바스크립트] 이벤트 핸들러(event handler)와 이벤트 리스너(event listener) 차이점과 종류 2021. 1. 14. [자바스크립트] 이벤트리스너를 이용한 마우스오버 함수 // 1. html에 있는 원하고자 하는 부분과 연결한다. const title = document.querySelector("#title"); // 2. 모든 핸들러 함수를 담고 있는 변수를 만들고 거거 안에다 다 만든다. const superEventHandler = { // 3. 여러개의 함수를 만들때에는 꼭 , 를 붙여줄것 mouseOver: function () { title.innerHTML = "The mouse is here!!"; title.style.color = "red"; }, contextmenu: function () { title.innerHTML = "오른쪽 마우스를 클릭하셨어요!"; title.style.color = "blue"; } }; // 4. 이벤트리스너를 사용하여.. 2021. 1. 14. [자바스크립트] 배열에서 요소 랜덤으로 출력하기 예시 Coding With Jina 결과 마우스를 올릴 때마다 글자색상이 바뀐다! 2021. 1. 13. 이전 1 ··· 13 14 15 16 17 18 19 ··· 26 다음 728x90 반응형
