14. 조건문 예고
- 토글 : 상황에 따라 다른 기능 구현됨.(on/off)
- if라는 조건문에 따라.
15. 비교 연산자와 불리언
- === : 동등 비교연산자. 왼쪽과 오른쪽 값이 같냐(이항 연산자).
- 좌항과 우항의 관계에 따라 true 혹은 false 값 출력.
- 이 두가지 값을 묶어서 '불리언'이라 부름. 또 하나의 데이터 타입.
- < , >
- html에서는 "<"가 다른 문법적 의미 갖기 때문에 'less than'이라는 뜻에서 "<"라고 씀.
- document.write("내용"); : 자바스크립트 문법에서 내용 입력하는 방법.
16. 조건문
- if(true/false){
코드 1
} else {
코드 2
} - if 괄호 안의 불리언 값에 따라 실행되는 코드 달라짐.
17. 조건문의 활용
- 버튼의 현재 value 값을 알아야 함.
- 버튼의 id 값 설정.
- 해당 id의 element가 가진 value 값 알아내기 : "javascript element get value" 검색. ".value" property 사용.
- console 이용.
- document.querySelector('#id').value 쓰고 엔터하면 "야간모드"라고 나옴.
- if(document.querySelector('#id').value === '야간모드')
18. 리팩토링: 중복의 제거
- 리팩토링 : 중복되는 코드 제거하여 효율적이게 수정하는 것. 코딩 잘하는 법!!
- this : event(예. onclick)가 속한 태그 자신을 가리킴.
- 따라서 this를 쓰면 버튼(element)의 id를 정해줄 필요도 없음.
- 그대로 카피해도 문제 없음.
- target : 중복되는 코드를 target이라는 변수로 정의.
- var target = document.querySelector('body') : 이제 target은 <body> 태그.
- target 변수를 정의하는 부분을 바꾸면 target에 대한 모든 코드가 한 번에 바뀜.
'TIL' 카테고리의 다른 글
| [TIL-13] 생활코딩 WEB2 JavaScript-23~30 (0) | 2021.09.21 |
|---|---|
| [TIL-12] 생활코딩 WEB2 JavaScript-19~22 (0) | 2021.09.20 |
| [TIL-10] 생활코딩 WEB2 JavaScript-1~12 (0) | 2021.09.18 |
| [TIL-9] 생활코딩 WEB2 CSS-12~15(완강) (0) | 2021.09.17 |
| [TIL-8] 생활코딩 WEB2 CSS-6~11 (0) | 2021.09.16 |