1. element 가져오기
//hello란 클래스를 가진 element를 하나 가져옴.
//div.hello:fist-child h1
const title = document.querySelector(".hello");
console.log(title);
//object로 표시한 element 보여줌
console.dir(title);2. element 찾아내서 값 설정
//h1의 style의 color 요소를 blue로 변환
const title = document.querySelector("div.hello:first-child h1");
console.dir(title);
title.style.color = "blue";
3. click event 처리
//event(click event)
const title = document.querySelector("div.hello:first-child h1");
//click시 함수
function handleTitleClick(){
console.log("title was clicked!");
}
//event(click)를 listen
//button일 필요x
//function을 JavaScript에 넘겨주고 user가 클릭시 JavaScript가 실행버튼 대신 눌러줌
//handleTitleClick() 넣으면 바로 실행됨
title.addEventListener("click", handleTitleClick);4. mouse 이벤트 처리 example
const title = document.querySelector("div.hello:first-child h1");
console.dir(title);
function handleTitleClick(){
title.style.color ="blue";
}
function handleMouseEnter(){
title.innerText= "Mouse is here!";
}
function hadnleMouseLeave(){
title.innerText="Mouse is gone!";
}
// 클릭시
title.addEventListener("click", handleTitleClick);
// mouse가 올려져있을 때
title.addEventListener("mouseenter", handleMouseEnter);
// mouse가 떠났을 때
title.addEventListener("mouseleave", hadnleMouseLeave);5. window 이벤트 + h1.onclick= handleTitleClick; 사용
const h1 = document.querySelector("div.hello:first-child h1");
console.dir(h1);
function handleTitleClick(){
h1.style.color ="blue";
}
function handleMouseEnter(){
h1.innerText= "Mouse is here!";
}
function hadnleMouseLeave(){
h1.innerText="Mouse is gone!";
}
// 창의 크기 수정시
function handWindowResize(){
document.body.style.backgroundColor="tomato";
}
// copy시
function handleWindowCopy(){
alert("copier!");
}
//wifi on off시
function handleWindowOffline(){
alert("no Wifi");
}
function handleWindowOnline(){
alert("on Wifi");
}
// 클릭시
// title.addEventListener("click", handleTitleClick);
h1.onclick= handleTitleClick;
// mouse가 올려져있을 때
// title.addEventListener("mouseenter", handleMouseEnter);
h1.onmouseenter = handleMouseEnter;
// mouse가 떠났을 때
h1.addEventListener("mouseleave", hadnleMouseLeave);
window.addEventListener("resize",handWindowResize);
window.addEventListener("copy",handleWindowCopy);
window.addEventListener("offline",handleWindowOffline);
window.addEventListener("online",handleWindowOnline);6. h1.sytle.color 요소 사용하여 클릭할 때마다 색깔 변환
const h1 = document.querySelector("div.hello:first-child h1");
console.dir(h1);
// 클릭할 때 마다 색갈 바뀌게
//const, let 사용하여 가독성 좋게
function handleTitleClick(){
const currentColor= h1.style.color;
let newColor;
if(currentColor ==="blue"){
newColor ="tomato";
}
else{
newColor ="blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick);7. classList를 사용한 색깔 변환
const h1 = document.querySelector("div.hello:first-child h1");
console.dir(h1);
//css의 clicked 클래스 사용
function handleTitleClick(){
// class 명을 변경하면서 상호작용
// const를 사용하여 변수 사용을 줄이자
const clickedClass = "clicked"
//font 클래스는 살아있고 clicked 클래스만 remove, add
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass);
}
else{
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);8. className을 사용한 색깔 변환
const h1 = document.querySelector("div.hello:first-child h1");
console.dir(h1);
function handleTitleClick(){
const clickedClass = "clicked"
if(h1.className===clickedClass){
h1.className="";
}
else{
h1.className=clickedClass;
}
}
h1.addEventListener("click", handleTitleClick);9. toggle 사용하여 색깔 변환
const h1 = document.querySelector("div.hello:first-child h1");
console.dir(h1);
//css의 clicked 클래스 사용
function handleTitleClick(){
//toggle 기능
h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);사용한 html, css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div class="hello">
<h1 class="font">Grab me!1</h1>
</div>
<div class="hello">
<h1>Grab me!2</h1>
</div>
<div class="hello">
<h1>Grab me!3</h1>
</div>
<script src="app.js"></script>
</body>
</html>body{
background-color: beige;
}
h1{
color: cornflowerblue;
transition: color 0.5s ease-in-out;
}
/* clicked란 클래스 어떤 element이던지 tomato색깔 */
.clicked{
color:tomato;
}
.font{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
Develop Process