js 변수 : var, let, const
var: 중복 선언, 재할당 가능
let: 중복 선언 X, 재할당 가능
const : 중복 선언과 재할당 둘 다 X
let/var/const 결론
- var는 거의 사용 x
- 재할당이 필요하면 : let (최대한 scope를 좁게)
- 재할당이 아니면 거의 모두 const
js 타입
- 원시타입 : Boolean, String, Number, null, undefined, Symbol
- 참조타입 : Object, Array
- null : 개발자가 의도적으로 '값이 없음'을 나타내기 위해서
- undefined : 개발자가 넣는 것이 아닌 , 알아서 할당됨
자바스크립트는 느스난 타입의 동적 언어이다. 모든 타입의 값으로 할당가능.
- 같은 변수가 여러 개의 타입을 가질 수 있다.
- 타입을 명시하지 않아도 된다.
- 대부부분의 다른 언어는 정적이다.
let anything; // 선언만 됨 (undefined)js 타입 변환
- 함수를 사용해서 변환
- js 자체에 자동으로 변환
val = (5).toString();
val = (true).toString();
val = Number('1');등등..
- js 백틱(Backtick)은 줄바꿈이 매우 쉽고 깔끔하다.
loofs: js에서 루프를 사용하면 코드 블록을 여러 번 실행할 수 있게 한다.
루프의 종류
- for : 코드 블록을 여러 번 반복
- for/in : 객체의 속성을 따라 반복
- while : 지정된 조건이 true인 동안 코드 블록을 반복
- do/while : while 루프의 변형. 이 루프는 조건이 true인지 검사하기 전에, 코드 블록을 한 번 실행. 그러고 나서 조건이 true인 동안 루프 반복
Window 객체란 브라우저용.
-> 브라우저에 대한 창의 정보?
if(confirm('Yes or No')) {
console.log('Yes');
}else [
console.log('No')
]
let val;
val = window.outerHeight;
console.log(val);
- var로 변수를 생성하면
윈도우 객체의 속성으로 만들어지게 된다.
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "wrapper">
<h1>Stopwatch</h1>
<p><span id ="seconds">0</span>:<span id="tens">0</span></p>
<div class = "div-moim">
<button id = "button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
<script src="./index.js"></script>
</body>
</html>- index.js
const appendTens = document.getElementById('tens');
const appendSeconds = document.getElementById('seconds');
const buttonStart = document.getElementById('button-start');
const buttonStop = document.getElementById('button-stop');
const buttonReset = document.getElementById('button-reset');
let seconds = 0;
let tens = 0;
let Interval;
buttonStart.onclick = function() {
// 기존에 있었던 setInterval 없애고
clearInterval(Interval)
Interval = setInterval(startTimer, 10)
}
buttonStop.onclick = function () {
clearInterval(Interval)
}
buttonReset.onclick = function() {
clearInterval(Interval)
seconds=0;
tens=0;
appendSeconds.innerHTML = seconds;
appendTens.innerHTML = tens;
}
function startTimer() {
tens++;
if(tens <= 9) {
appendTens.innerHTML = tens;
}
if(tens > 9) {
appendTens.innerHTML = tens;
}
// tens가 99보다 클 때
if(tens > 99) {
// seconds 1 올리고
seconds++;
// appendSeconds에도 반영하기
appendSeconds.innerHTML = seconds;
tens = 0;
appendTens.innerHTML =0;
}
}innerHTML VS innerText
-- event Listner & Event 객체 부분까지는 공부해오기
개인 개발 공부, 정리용 🔗