변수를 정의할때 실제 let과 const의 쓰임을 적절하게 사용한다면
코드를 더 객체지향적으로 만들수있는거같다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const h1 = document.querySelector("div.hello:first-child h1")
console.log(h1);
function handleTitleClick() {
const currentColor = h1.style.color;
let newColor;
if(currentColor === "blue")
{
h1.style.colornewColor = "tomato";
}else {
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick)
예를 들면 이렇게이다.
변수값이 자주바뀌는값을 따로 정의해줘서
let키워드를 사용해 newColor함수를 사용하는것과
현재 html의
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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">
<title>HELLO HTML</title>
</head>
<body>
<div class="hello">
<h1>yeji</h1>
<h2>hihi</h2>
</div>
<script src="todo.js"></script>
</body>
</html>
h1 style color의 색깔을 가져와서 담아주는 currentColor변수를 지정해준다면
조금더 객관적인코드가 완성될수있을거라 생각이든다
그렇다면 어제 숙제한코드를보면
let과 const의 키워드를 다시 수정해보았다
블록범위에서 작용한는 let
java에서 final같은 const
함수내에서 작동하는 var
다른작품1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
const currentWidth = window.innerWidth;
const body = document.querySelector("body");
const hello = document.querySelector("h1");
const midiumWidth = currentWidth * 1.4;
const bigWidth = currentWidth * 1.7;
hello.style.color = "white";
body.style.backgroundColor = colors[1];
function handleResize() {
const width = window.innerWidth;
console.log(currentWidth, width);
if (width < midiumWidth) {
body.style.backgroundColor = colors[1];
} else if (width >= midiumWidth && width < bigWidth) {
body.style.backgroundColor = colors[2];
} else {
body.style.backgroundColor = colors[3];
}
}
window.addEventListener("resize", handleResize);
객체를 잘만들어서 만든 작품같다
내가 필요한 값들을 변수에 잘정의해놓았기때문에 보다 짜임새있게 함수를 만든거같다
따라하고싶은점들은 컬러들을 배열에 담아서 배열넘버로 지정해줘서 색을 변화해줬다는점이다.
다른작품2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const h3 = document.createElement("h3");
const script = document.querySelector('script[src="src/index.js"]');
h3.id = "title";
h3.innerText = "Hello!";
document.body.insertBefore(h3, script);
function handleResize() {
const width = window.innerWidth;
let backgroundColor = "#9b59b6";
if (width > 1000) {
backgroundColor = "#efbc13"; //노란색
} else if (width > 500) {
backgroundColor = "#9b59b6"; //보라색
} else {
backgroundColor = "#3498db"; //파란색
}
document.body.style.backgroundColor = backgroundColor;
}
window.addEventListener("resize", handleResize);
블록단위로 변할수있는 backgroundColor 변수를 let 으로 표현한점이다
이두작품에 좋은점들을 넣어봐서
수정본
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
function size() {
const widthLength = window.innerWidth;
let backgroundColor = colors[0];
if (widthLength < 500) {
backgroundColor = colors[1];
} else if (widthLength < 800 && widthLength > 500) {
backgroundColor = colors[2];
} else {
backgroundColor = colors[3];
}
document.body.style.backgroundColor = backgroundColor;
}
window.addEventListener("resize", size);
이렇게 만들어보았다