- javascript의 변수
변수 선언
var num1 = 10;
let num2 = 10;
const num3 = 10;javascript에서는 따로 변수를 선언하지 않는다.
타입은 존재하지만 따로 쓰지 않는다
(아마 javascript에서는 자동 형변환을 지원하기 때문인듯 하다)
- javascript 각 변수의 차이점
변수 선언
var num1 = 10;
let num2 = 10;
const num3 = 10;var는 let 과 const가 만들어지기 전에 사용되던 변수입니다
var에는 여러가지 문제점이 있는데요
전역변수이기 때문에 변수의 이름을 실수로 동일하게 변경하고 값을 넣는다면
큰 문제가 발생할 수 있기 때문이고 for문 사용에도 for문을 빠져나온 변수가
초기화되지 않는 현상이 있다고합니다 그렇기 때문에 현재는 잘 사용하지 않는다네요
그렇기에 현재 javascript에서는 let과 const만 사용한다고 봐도 무방합니다
let 말그대로 변수 : 바뀌어도 상관없는 수이고
맨처음 할당한 값 외에도 재정의하여 사용이 가능합니다
const는 상수 : 바뀌지 않는 수인데요
사진을보면 알겠지만 재졍의 하면 오류가 발생합니다
또한 const는 백틱(`)으로 선언할 수 도있는데 다른 프로그램의 문법과 겹치는 부분이기에
순수하게 javascript만 사용하는게 아니라면 (`)을 사용하는 선언문은 잘 쓰지 않습니다
- javascript - 뱐수 타입을 출력하는 방법
javascript의 장점이자 단점은 자체적으로 지원하는 자동 형변환입니다
그렇기 때문에 여러개의 변수를 선언하였고 사용하는 경우 실수하는것을 방지하기위해
간혹 변수 타입을 잘 모르겠다면 출력해보고 사용하는 방법도 있겠습니다
let var1 = 10;
console.log("var1 타입:", typeof var1);
- == 와 === ?
javascript는 자동 형변환을 지원하기 때문에 등호에도 약간 차이가 있습니다
var2 정수 10이고 var3는 문자 10입니다 원래라면 당연히 "둘다 달라요"가 나오는게 맞지만
javascript에서는 ==를 사용하면 자동 형변환을 진행해 비교하기 때문에 "둘이 같다"는 결과가 나오게 됩니다
그렇기 때문에 javascript에서 자동형변환을 하지 않고 비교하기 위해서는 ===를 사용해주어야 합니다
- javascript의 객체
변수 A = {
객체
}java의 DTO 필드와 Mysql의 테이블을 생각하면 편합니다
주로 html에서는 객체를 만들지는 않고 javascript에서 만들어진 객체의 내용물을 하나씩 가져와 사용을합니다
객체 안의 정보를 출력하는 양식은 이렇습니다
// name 출력
console.log(book.name);
// price 출력
console.log(book.price);
// ch3의 내용 출력
console.log(book.index.ch3);
- html - events
- onclick
<body>
<!-- 아래 버튼을 클릭하면 fun1 함수 호출 -->
<button onclick="fun1(this)">클릭해보세요</button>
</body>
<script>
const fun1 = (ele1) => {
console.log("클릭하셨네요");
console.log("ele: ", ele1);
}
</script>
- onmouseover , onmouseout
말그대로 이벤트를 설정한 공간 안에
마우스가 올라가거나 내려가는 경우 이벤트를 발생시킵니다
<body>
<!-- onmouseover , onmouseout 이벤트 -->
<div id="div1" onmouseover="fun3()" onmouseout="fun4()"></div>
</body>
<script>
const fun3 = () => {
console.log("왔네요");
}
const fun4 = () => {
console.log("갔네요");
}
</script>
- onmousedown , onmouseup
이벤트를 설정한 공간을 마우스로 누르거나 , 뗐을때
발동하는 이벤트입니다
<body>
<!-- onmousedown , onmouseup 이벤트 -->
<div id="div2" onmousedown="fun5()" onmouseup="fun6()"></div>
</body>
<script>
const fun5 = () => {
console.log("눌렀다")
}
const fun6 = () => {
console.log("뗐다")
}
</script>
- onkeydown , onkeyup
키보드를 누르고 떼는 경우 발동되는 이벤트 입니다
<body>
<!-- onkeydown , onkeyup 이벤트 -->
<input type="text" onkeydown="fun7()" placeholder="입력해보세요">
<input type="text" onkeyup="fun8()" placeholder="입력해보세요">
</body>
<script>
const fun7 = () => {
console.log("키보드를 눌렀다")
}
const fun8 = () => {
console.log("키보드를 뗐다")
}
</script>
- onblur
text박스나 입력칸을 떠나는 경우
이벤트를 실행합니다
<body>
<input type="text" onblur="fun9()" placeholder="입력해보세요">
</body>
<script>
const fun9 = () => {
console.log("절 떠나셨네요")
}
</script>
