728x90
반응형
toggle버튼 : on/off 스위치
목차
1. 비교 연산자와 블리언
2. 조건문
2-1. 조건문의 활용
4. 리팩토링 중복의 제거
1. 비교 연산자(Comparsion operators)와 블리언(Boolean)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Comparsion operators & Boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
document.write(1===1);
</script>
<h3>1===2</h3>
<script>
document.write(1===2);
</script>
<h3>1<2</h3>
<script>
document.write(1<2);
</script>
<h3>1<1</h3>
<script>
document.write(1<1);
</script>
</body>
</html>
즉, ===은 좌항과 우항의 관계에 따라서 true/false를 갖고
이 두가지의 값을 boolean이라고함
<date타입>
- Number
- String
- Boolean : 단 두개의 데이터로 이루어지고 있는 데이터타입.
2. 조건문(Conditional statements)
if문은 뒤에 따라오는 boolean타입이 온다
boolean 의 값에 따라서 실행되는 코드가 바뀐다
2-1. 조건문의 활용
toggle 버튼으로 만들기
id 값이 night_day 이 값이 element에 value값을 어떻게 알아내는지 웹 콘솔로 검색해보기
4. 리팩토링 중복의 제거
리팩토링이란?
우리가 코딩을 하고 나면 코드가 비효율적으로 나올때가 있다
그러면 코드의 가독성을 높이고 유지보수되게끔 코드를 다시 개선하는 작업
ex)
토글버튼을 밑에서도 사용할 수 있게끔 하고 싶은데 중복된 코드를 제거하고 실행되는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1 - JavaScript</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value==='night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
}else{
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
<ol>
<li><a href="1. html">HTML</a></li>
<li><a href="2. html">CSS</a></li>
<li><a href="3. html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>
JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다.
그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할
수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서
네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고
있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는
하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다.
자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.
</p>
</body>
</html>▽
<input id="night_day2" type="button" value="night" onclick="
if (this.value==='night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';
}else{
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value = 'night';
}
">유지보수를 위해 this로 바꾸기
728x90
반응형
'' 카테고리의 다른 글
| 배열과 반복문 (0) | 2020.07.29 |
|---|---|
| target (0) | 2020.07.29 |
| CSS 기초 (0) | 2020.07.29 |
| 데이터 타입(자료형), 변수, 웹브라우저 제어 (0) | 2020.07.29 |
| HTML과 JS (0) | 2020.07.29 |
