06장 자바스크립트로 웹 페이지 제어하기

Iris·2021년 12월 6일
0
post-thumbnail

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

06-1 자바스크립트 시작하기

HTML 파일과 외부 자바스크립트 연결하기

<!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>

06-2 자바스크립트로 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]);
}

06-4 자바스크립트로 이벤트 연결하기

HTML 요소에 마우스 이벤트 연결하기

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}.`);

06-7 HTML 요소의 속성값 제어하기

속성값 알아내기

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);

06-8 자바스크립트로 사용자 브라우저 판단하기

사용자 브라우저 판별하기

const ver = navigator.userAgent;
console.log(ver);

const isIE = /trident/i.test(ver);
console.log(isIE);

if (isIE) {
  alert("익스플로러 브라우저로 접속하셨습니다.");
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

단순히 같은 코드를 반복해야 할 때에는 for of 문을, 내부 요소들을 하나씩 다루어야 할 때에는 for 문을 사용하는 것이 낫다는 각각의 쓰임새를 명확하게 구분할 수 있었다. navigator.userAgent를 통해 사용자가 접속한 브라우저를 확인하고, 그것을 이용하는 예제를 학습했다.

profile
👩🏻‍💻 Web Front-end Developer

0개의 댓글