Web 2 - JavaScript

1.JavaScript

1)특징
- body 태그 안에 존재
- 자극이나 조건에 반응하는 유동적인 언어
2)사용 방법
- scrip 태그
- input 태그와 event
- console : 웹브라우저 개발자 도구에서 사용
사용중 실행을 미루고 싶을 땐 shift + enter

2.Data types

1)String (문자열)
- 큰 따옴표 or 작은 따옴표
ex.) 텍스트의 글자 수를 알고 싶을 때
"hello world" .length

2)Number
- 산술 연산자 : + - * /
- 대입 연산자 : =
ex.) 1+1의 값을 알림 창으로 띄우고 싶을 때
alert(1+1);

- 문자열과 숫자를 정확히 표기해야 하는 이유.
"1"+"1" = "11"
1+1 = 2

- 변수를 쓸 땐 앞에 var(variable) 붙이기

3.2버튼 야간모드

- 야간모드 버튼과 주간모드 버튼 2개를 만드는 방법
< input type ="button" value="글자" 조건
document.querySelector('선택자').style.효과;>

* queryselector는 선택자 중 첫번째만 적용 됨. ex.)
< body>
< 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';
">
< /body>

4.조건문

1) 비교 연산자(Boolean)
- 조건을 비교해서 옳은지(true) 틀린지(false) 출력해주는 연산자.

ex.) 좌항과 우항이 같은가.
< script>
document.write(1===1)
< /script>

ex.) 좌항이 우항보다 큰가(<).
< script>
document.write(1< 2 )
< /script>

2) 조건문을 활용한 원버튼 야간모드
- 만약 id 선택자가 조건이라면, {}안의 코드를 실행하고,
아니라면, {}안의 코드를 실행하라.

< input id ="id선택자" type="button" value="글자" 조건="
if(document.querySelector('#id선택자'). value === '조건')
document.querySelector('선택자').style.효과;
}else {
document.querySelector('선택자').style.효과;
}
"