0. 노드 js 설치 node -v 버전 확인
1. undefined, null & string, number
2. 후치연산 & 전치연산
-
후치연산 num++ (= 예약)
1씩 증가 (단, 지금 나 자신에게 더하지 않고, 뒤에 오는 나=num에게 준다) -
전치연산 ++num
지금 나 자신에게 1을 추가한다 (num+=1 혹은 num=num+1)
<script>
var num = 0;
num++; // 0 ... 1씩 증가한다 (후치연산, 뒤에 오는 나에게 준다)
++num; // 2 ... 나 자신에게 지금 1을 추가한다 (후치연산이 더해져서 0+1+1=2)
num+=1; // 3 ... 나 자신에게 지금 1을 추가한다
num = num + 1; // 4 ... (전치연산)
</script>
터미널에서 확인하면 최종 num 값이 4로 나옴
3. setInterval : 주기적인 자동실행문
setInterval ( {실행식}, 시간 )
3-1) 0.1초마다 반복 실행
3-2) 순환식 = 스와이프식 = '나머지' 공식 (0-2까지 반복출력)
- 숫자 0~4까지 반복 출력
5로 나눴을 때 나머지 값 = 1, 2, 3 ,4, 0 (영원히 5가 되지 못함)1
2
3
4
0
1
2
3
4
0 ... - 숫자 0~2까지 반복 출력
3으로 나눴을 때 나머지 값 = 1, 2, 0 (영원히 3이 되지 못함)1
2
0
1
2
0 ...
<script>
var num = 0;
setInterval(
function(){
num++ /* 초기값 0+1=1 *//* 1+1=2 */ /* 2+1=3 */
num %= 3 /* 1%3 나머지 1*//* 2%3 나머지 2 *//* 3%3 나머지 0 */
console.log(num) /* 1 */ /* 2 */ /* 0 */
}, 1000
)
</script>4. getElementId
4-1) document.getElementId("counter").innerHTML = "글자노출"
<h1 id="counter" class="text-center"></h1>
<script>
document.getElementById("counter").innerHTML = "글자노출";
</script>
4-2) document.getElementId("counter").innerHTML += "했다"
<h1 id="counter" class="text-center"></h1>
<script>
document.getElementById("counter").innerHTML = "글자노출";
document.getElementId("counter").innerHTML += "했다";
</script>
4-3) 최적화, 데이터와 관리식을 따로 분리하라!
4-3-1) 데이터를 변수로 지정
- 문자 데이터 "글자노출"을 -> 변수 contents 로 바꿔줌 (이 변수 하나를 관리하면 됨!)
- 데이터 부분은 백엔드와 함께 관리하기 때문에, 나는 관리식만 건든다!
4-3-2) 관리식을 변수로 지정
관리식을 지정한 변수 itemtag을 관리하면 됨!
ex) #counter을 가지는 HTML 태그의 기존 클래스, 그 뒤에 새로운 클래스를 추가 (두가지 방법)
- itemtag.classList += ' act thumb' : 기존의 클래스 뒤에 act, thumb 클래스를 추가하겠다
- itemtag.classList.add('act') : 기존의 클래스 뒤에 act 클래스를 추가하겠다 (1개만 가능)
5. Quiz) innerHTML + setInterval 활용(0~10)
HTML
<h1 id="counter" class="text-center"></h1>
<h2 id="timer"></h2>js
<!------------------- #couner용 스크립트 ------------------->
<script>
var contents = '글자노출';
contents += ' 했다';
var itemtag = document.getElementById("counter");
itemtag.innerHTML = contents;
// itemtag.classList += ' act thumb' 기존의 클래스 뒤에 act, thumb 클래스를 추가
itemtag.classList.add('act')
</script>
<!------------------- #timer용 스크립트 ------------------->
<script>
var count = 0;
document.querySelector('#timer').innerHTML = count;
setInterval( //0-10까지 출력되는데
function(){
count++;
count %= 11;
document.querySelector('#timer').innerHTML = count;
},1000)
</script>
한번 더 최적화를 하자면?
script에서 초기값을 0으로 설정하지 말고, HTML에 바로 숫자 0 적어줌.
document.querySelector('#timer').innerHTML(=0)로 잡아서 변수(=0) 지정
<body>
<h2 id="timer">0</h2>
<!------------------- #timer용 스크립트 ------------------->
<script>
var count = document.querySelector('#timer').innerHTML;
setInterval( //0-10까지 출력되는데
function(){
count++;
count %= 11;
document.querySelector('#timer').innerHTML = count;
},1000)
</script>
</body>