📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021
<!DOCTYPE html>
<html lang="ko">
<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">
<title>JavaScript</title>
<link rel="stylesheet" href="assets/css/style.css">
<script defer src="custom.js"></script>
</head>
<body>
</body>
</html>
🔽 for of 문 사용
const items = document.querySelectorAll("#wrap article");
for (let item of items) {
console.log(item);
}
🔽 for 문 사용
const items = document.querySelectorAll("#wrap article");
for (let i=0; i<items.length; i++){
console.log(items[i]);
}
ES6 ✨
const box = document.querySelector("#box");
box.addEventListener("mouseenter", (e) => {
e.style.backgroundColor = "hotpink";
});
box.addEventListener("mouseleave", (e) => {
e.style.backgroundColor = "aqua";
});
ES5
const box = document.querySelector("#box");
box.addEventListener("mouseenter", function() {
this.style.backgroundColor = "hotpink";
});
box.addEventListener("mouseleave", function() {
this.style.backgroundColor = "aqua";
});
const myName = "Iris";
console.log(`My name is ${myName}.`);
const link = document.querySelector("a");
const link_href = link.getAttribute("href");
console.log(link_href);
const link = document.querySelector("a");
const new_href = "https://www.nate.com";
link.setAttribute("href", new_href);
const ver = navigator.userAgent;
console.log(ver);
const isIE = /trident/i.test(ver);
console.log(isIE);
if (isIE) {
alert("익스플로러 브라우저로 접속하셨습니다.");
}
단순히 같은 코드를 반복해야 할 때에는 for of 문을, 내부 요소들을 하나씩 다루어야 할 때에는 for 문을 사용하는 것이 낫다는 각각의 쓰임새를 명확하게 구분할 수 있었다. navigator.userAgent를 통해 사용자가 접속한 브라우저를 확인하고, 그것을 이용하는 예제를 학습했다.