4일차에 만든것
오늘은 화면의 크기가 변하면서 화면의 색깔을 다르게 하는 것이다.
const body = document.querySelector("body");
const resized = {
color: function () {
if (window.innerWidth < 600) {
body.style.backgroundColor = "red";
} else if (600 < window.innerWidth && window.innerWidth < 900) {
body.style.backgroundColor = "blue";
} else {
body.style.backgroundColor = "pink";
}
}
};
// 이벤트
window.addEventListener("resize", resized.color);풀이
window의 화면 사이즈가 바뀔때 resiezed.color 함수를 실행 시킨다
window.innerWidth가 600보다 작으면 body의 배경색을 "red"로
window.innerWidth가 600보다 크면서 900보다 작을때 body의 배경색을 "blue"로
그 이상일 경우에는 "pink"로 바꾼다.
처음 과제를 봤을 때는 쉬워 보였지만 막상 하고 보니 조금 어려웠던것 같다
#2.5~#2.7까지의 내용들
#2.5 if, else, and, or
#2.6 if else - Function practice
#2.7 function practice 2
조건문
문법
if(조건식1){
// statement1
}else if(조건식2) {
//statement2
}else {
//statement3
}-
if안에 있는 조건식1이 참인 경우 if문을 실행한다
-
조건식1이 참이 아니고 조건식2가 참인경우 else if문을 실행시킨다.
-
조건식1과 조건식2가 모두 거짓이면 else문을 실행시킨다.
조건식에 거짓으로 취급하는 값
1) false
2) undefined
3) nell
4) 0
5) NaN
6) the empty string("")
조건문에서 사용할 수 있는 비교 연산자
1) ===, ==, !==
===는 타입과 값이 같은지를 비교한다
==는 두 비교값을 같은 형태로 바꾼후 비교한다, 비교값이 모두 객체라면 내부 참조를 보고 둘다 같은 객체를 바라보고 있는지 판별한다.
!=는 두 비교값이 같지 않은 경우에 참을 반환한다.
조건문에서 사용하는 논리 연산자
종류: || , && , !
||(or)
or은 하나만 true이면 무조건 true를 반환한다
값 || 값 || 값
이 값들중 1개 이상 true가 있으면 무조건 true를 반환한다
처음 실행되는 값이 true이면 뒤에 값은 무시하고 true값을 반환
&&(and)
값 && 값 &&값
이 값들중에 하나라도 false이면 무조건 false값을 반환한다
처음에 실행되는 값이 false이면 뒤에 값은 무시하고 false값을 반환한다.
!(not)
! 값
값이 true이면 false,
false이면 true값을 반환한다
논리연산자 간단한 예제
const age = 20;
if(age<=18){
console.log("넌 아직 어리다")
}else if(age>18 && age<24){
console.log("먹고 죽을 나이")
}else{
console.log("이제 나이를 먹어버렸드아아..")
};practice
1.
const title = document.querySelector("#title");
const clicked_class = "clicked";
function handleClick(){
const currentClass = title.className;
//class값을 자바스크립트에서 가져오기 위해서는 className을 쓴다
if(currentClass !== clicked_class){
title.className = clicked_class;
} else {
title.className = "";
}
}
function init(){
title.addEventListener("click", handleClick);
init();title을 클릭했을때 title의 클래스 값이 clicked가 아니면 clicked로 바꿔주고 같으면 빈 값으로 두게한다.
이렇게 되면 클릭 할때마다 title의 클래스 값이 clicked이였다가 사라짐을 반복하게 되는걸 console에서 확인이 가능하다.
혹시 여기서 class값을 새롭게 준다면?
<h1 id="title" class="btn"> this works </h>.btn {
cursor: "pointer";
}타이틀에 새로운 클래스를 주고 커서를 포인터로 바꾸게 했다
실행해 보면 처음에 커서를 title에 댔을때는 포인터로 변하지만 클릭을 했을때는 포인터가 사라져있는 걸 확인할 수 있다
클래스 값이 clicked로 바뀌었기 때문이다
이런 문제를 해결할 수 있는 것이 classList이다
classList(읽기 전용)
function handleClick() {
const currentClass = title.className;
const CLICKED_CLASS = "clicked";
if (currentClass !== CLICKED_CLASS) {
title.classList.add(CLICKED_CLASS);
} else {
title.classList.remove(CLICKED_CLASS);
}
}위에서 처럼 classList.add는 클래스 값이 clicked가 아니면 그 값을 클래스에 삽입하고 맞으면 clicked를 지운다
여기서 또 문제가 생긴다.
처음 클릭했을때는 clicked가 추가가 되지만 다음동작은 실행이 되지 않는다
클래스값이 btn clicked로 바뀌었기 때문이다
이부분도 해결하려면 Element.contains()가 필요하다
Element.contains(): ()안에 값이 있는지 체크하고 true 나 false을 반환한다
function handleClick() {
const hasClass = title.classList.contains(CLICKED_CLASS);
if (!hasClass) {
title.classList.add(CLICKED_CLASS);
} else {
title.classList.remove(CLICKED_CLASS);
}
}위와 같이 clicked_class의 값이 clicked이면 classList.contains는 true값을 반환하고 그렇지 않으면 false를 반환한다
clicked값이 없으면 clicked를 추가하고 있으면 제거한다
이 귀찮은 공정을 간소화 할 수 있는 것이 있는데
그것이 바로 toogle()이다
너무너무 편리한 것~~
toogle(): 클래스 값이 있는지 없는지 체크하고 없으면 더하고 있으면 제거한다
function handleClick(){
title.classList.toogle(CLICKED_CLASS);
}