자바스크립트에서 태그, id, class 등을 생성하거나 수정할 수 있다. 이를 위해 DOM과 메서드, 프로퍼티의 범위에 대해 정확하게 이해해야 한다.
오늘 연습해 볼 부분은 사실 CSS에서 충분히 작성 가능함은 물론, CSS로 작성하는 편이 일반적으로 깔끔하나 DOM과 이벤트리스너를 연습해본다는 개념으로 접해본다.
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>test</title>
</head>
<body>
<script src=""></script>
</body>
</html>온전히 자바스크립트로 문서를 수정할 것이기 때문에, 추후 자바스크립트 연결을 위한 <script>태그 외에는 비워둔다.
2. Javascript
let h2 = document.createElement("h2"); // 1. HTML에 없는 태그를 생성
h2.innerHTML = "Hello!"; // 2. 생성한 태그에 넣을 내용 기입
h2.style.color = "white";
document.body.appendChild(h2); // 3. <body>태그의 자식으로 만들어서 최종적으로 웹에 나타나게 함
document.body.style.setProperty('background-color', 'cornflowerblue'); //기본 배경화면 설정
document.querySelector("body").classList.add("backColor"); //태그에 클래스를 직접 만들 수 있다.
// <body class="backColor">
// .classList.add 외에 만드는 방법은
// document.querySelector("body").setAttribute("class", "backColor");
// 동일한 방법으로 id를 만들거나 내부 속성값을 수정할 수 있다.
// document.querySelector("body").setAttribute("id", "idBackColor");
let backColor = document.querySelector("body.backColor");
function handleResize() {
let intFrameWidth = window.innerWidth;
let newColor;
if(intFrameWidth<=800) newColor = 'cornflowerblue';
else if(intFrameWidth<1000) newColor = '#B04AEB';
else newColor = '#F3D24D';
backColor.style.backgroundColor = newColor;
}
window.addEventListener("resize", handleResize);
const title = document.querySelector("body h2");
const handleSet = {
handleMouseEnter: () => {
title.style.color = "#1abc9c";
title.innerText = "The mouse is here";
},
handleMouseLeave: () => {
title.style.color = "#3498db";
title.innerText = "The mouse is gone!";
},
handleMouseClick: () => {
title.style.color = "#9b59b6";
title.innerText = "clicked!";
},
handleWindowResize: () => {
title.style.color = "#f39c12";
title.innerText = "You just resized!";
},
handleConText: () => {
title.style.color = "#e74c3c";
title.innerText = "That was a right click!";
}
};
// 함수로 하나하나 만들기보다 객체로 만들어 메서드를 사용하는 게 깔끔하다
title.addEventListener("mouseenter", handleSet.handleMouseEnter);
title.addEventListener("mouseleave", handleSet.handleMouseLeave);
title.addEventListener("click", handleSet.handleMouseClick);
window.addEventListener("contextmenu", handleSet.handleConText);
//좌클릭은 "click" 우클릭은 "contextmenu"
//어디에 우클릭해도 적용되게 하려면 window에서 메서드를 불러와야 한다.
window.addEventListener("resize", handleSet.handleWindowResize);태그를 적재적소에 자유자재로 생성, 수정하려면 연습이 필요하다.
메서드를 불러와 사용함에 있어 사용하고자 하는 변수, 메서드의 스코프가 중요했다.
'Programing > Javascript' 카테고리의 다른 글
| [JS] 정규 표현식 RegExp (0) | 2022.06.01 |
|---|---|
| [JS] 구조 분해 할당 (0) | 2022.05.18 |
| <JS> for문 탐색 (0) | 2022.04.08 |
| <JS> 최솟값, 최댓값 (0) | 2022.03.30 |
| [JS] 객체 (0) | 2022.03.25 |