반응형
For문
if문 기본구조
if(condition) {
block
} else {
block
}
# 예제 1
if( 10 > 5) {
console.log("yes");
} else {
console.log("no");
}
// 결과값 yes
# 예제 2
if(true) {
console.log("yes");
} else {
console.log("no");
}
// 결과값 yes
# 예제 3
if(10 === 5) {
console.log("yes");
} else {
console.log("no");
}
// 결과값 no
# 예제 4
//숫자와 문자를 비교할때
if(10 === '10') {
console.log("yes");
} else {
console.log("no");
}
// 결과값 no
# 예제 5
if(10 === '10') {
console.log("incorrect");
} else if('10' === '10') {
console.log("correct");
} else {
console.log("i don't no");
}
// 결과값 correctand 연산자
true && true = true
false && true = false
true && false = false
false && false = false- 예제
if(20 > 5 && "kang" === "kang") {
console.log("yes");
} else {
console.log("no");
}or 연산자
true || true = true
false || true = true
true || false = true
false || false = false- 예제
if(20 < 5 || "kang" === "kang") {
console.log("yes");
} else {
console.log("no");
}실제 예제
- index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title">Javascript 테스트</h1>
<script src="index.js"></script>
</body>
</html>- index.js
const title = document.querySelector('#title');
const BASE_COLOR = 'rgb(52, 73, 94)';
const OTHER_COLOR = '#7f8c8d';
function handleClick() {
const currentColor = title.style.color;
// 만약 현재 색상이 BASE_COLOR 와 같다면
if (currentColor === BASE_COLOR) {
console.log(BASE_COLOR);
title.style.color = OTHER_COLOR;
// 다르다면
} else {
title.style.color = BASE_COLOR;
}
}
function init() {
title.style.color = BASE_COLOR;
//title을 클릭할때 클릭 이벤트가 발생하면 handleClick()를 실행
//title.addEventListener('click', handleClick);
title.addEventListener('mouseenter', handleClick);
}
init();
Javascript 에서 CSS 를 수정하지않는 방식 [최적화 1단계]
body {
background-color: #ecf0f1;
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
}
.clicked {
color: #7f8c8d;
}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('mouseenter', handleClick);
}
init();최적화 2단계
const title = document.querySelector('#title');
const CLICKED_CLASS = 'clicked';
function handleClick() {
const hasClass = title.classList.contains(CLICKED_CLASS);
//classList 를 이용하여 class name 을 추가 제거하는 방법
if (!hasClass) {
title.classList.add(CLICKED_CLASS);
} else {
title.classList.remove(CLICKED_CLASS);
}
}
function init() {
title.addEventListener('click', handleClick);
}
init();
최적화 3단계
const title = document.querySelector('#title');
const CLICKED_CLASS = 'clicked';
function handleClick() {
//classList.toggle 을 이용하여 처리하는 방법
title.classList.toggle(CLICKED_CLASS);
}
function init() {
title.addEventListener('click', handleClick);
}
init();'javascript' 카테고리의 다른 글
| 11. Momentum 만들기 2 - 시간 출력 최적화 (0) | 2020.06.25 |
|---|---|
| 10. Momentum 만들기 1 - 시간 출력 (0) | 2020.06.25 |
| 8. Event (0) | 2020.06.24 |
| 7. DOM 변경 (0) | 2020.06.24 |
| 6. Function() (0) | 2020.06.24 |