if(10 > 5) {
console.log("hi");
} else {
console.log("ho");
}결과
hi
if(10 === 5) {
console.log("hi");
} else {
console.log("ho");
}결과
ho
why?10과 5는 같지 않기 때문에 else값 ho가 출력
if조건은 항상 참이여야됨.
if("10" === 10) {
console.log("hi");
} else if ("10" === "10") {
console.log("lalala");
} else {
console.log("ho");
}결과
lalala
피연산자 : 다른 조건들을 합치게 하는 것
if(20 > 5 && "hi" === "hi") {
console.log("yes");
} else {
console.log("no");
}결과
yes
&& = and ( 둘 다 참이여야만 실행함 )
|| = or ( 둘중에 하나만 맞아도 실행함 )
const age = prompt("how old are you");
if(age >= 18 && age <=21) {
console.log("you can drink but you should not");
} else if (age > 21) {
console.log("go ahed");
} else {
console.log("too young");
}참고 : prompt는 진짜 옛날 자바스크립트야 진짜 개구린거임 쓰지마.
html
css
javascript
const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";
function handleClick() {
const currentColor = title.style.color;
if (currentColor === BASE_COLOR){
title.style.color == OTHER_COLOR;
} else {
title.style.color == BASE_COLOR;
}
}
function init(){
title.style.color = "BASE_COLOR";
title.addEventListener("click", handleClick);
}
init();
이렇게하면 글자 클릭할때마다 색상이 바껴야되는데 나는 안됨........(해결못함)
해결완료!!!!
== 이거를 =이렇게 바꿔야됨....
const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";
function handleClick() {
const currentColor = title.style.color;
if (currentColor === BASE_COLOR){
title.style.color = OTHER_COLOR;
} else {
title.style.color = BASE_COLOR;
}
}
function init(){
title.style.color = "BASE_COLOR";
title.addEventListener("click", handleClick);
}
init();
이렇게하면 해결완료
결과
.gif)
click을 mouseenter로 바꾸면 마우스를 올릴때마다 색이 바뀌게됨
이런 효과들은 어디에서 볼 수 있나
html javascript DOM event MDN 검색 고고
난 자바스크립트가 웹사이트의 스타일을 처리하는걸 원하지 않아
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className;
if(currentClass !== CLICKED_CLASS) {
title.className = CLICKED_CLASS;
} else {
title.className = "";
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
결과
.gif)
근데! 여기서 실패를 보여줄게
html
<!DOCTYPE html>
<html>
<head>
<title>somthing</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 id="title" class="btn">this works!</h1>
<script src="script.js"></script>
</body>
</html>
css
body {
background-color: #ecf0f1;
}
.btn {
cursor: pointer;
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
}
.clicked {
color: #7f8c8d;
}
javascript
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className;
if(currentClass !== CLICKED_CLASS) {
title.className = CLICKED_CLASS;
} else {
title.className = "";
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
결과
클릭하는순간 마우스 포인트가 손모양으로 안나타나고 사라져버려
.gif)
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className;
if(currentClass !== CLICKED_CLASS) {
title.classList.add(CLICKED_CLASS);
} else {
title.classList.remove(CLICKED_CLASS);
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
이렇게 변경하면 눌러도 마우스 포인트가 유지되지만 다시 클릭한다고해서 색상이 바뀌진 않음
더이상 뒤로 돌아가지 않아.
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const hasClass = title.classList.contains(CLICKED_CLASS);
if(hasClass) {
title.classList.remove(CLICKED_CLASS);
} else {
title.classList.add(CLICKED_CLASS);
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
이러면 잘됨
결과
.gif)
toggle은 우리가 여기서 했던 모든걸 요약하는 거야
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
//클래스가 없으면 add 있으면 remove
title.classList.toggle(CLICKED_CLASS);
}
function init(){
title.addEventListener("click", handleClick);
}
init();
결과는 위와 같아.
♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것