자바스크립트 기초 1에 이어 자바스크립트 문법 기초 2를 정리하려고 합니다 !!
바로 가봅시다 !
✏️ Strict Equal Operator
- ==은
Equal Operator이고 ===은Stricr Equal Operator입니다.
Equal Operator은 a == b 라고 할때, a와 b의 값이 같은지를 비교합니다. a와 b가 같으면 true, 다르면 false라고 합니다.
Strict Equal Operator은 Strict(엄격한). 즉, 엄격하게 같음을 비교할 때 사용하는 연산자 입니다.
값과 값의 종류가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 합니다.
let a = 3
let b = "3"
console.log(a == b) //true
console.log(a === b) //false이런식으로 말이죠 !
✏️ NOT Operator
not. ! 연산자는 값이 false면 true를, true면 false를 반환합니다.
const myName = 'siyeon'
if(!myName) console.log('이름이 입력되지 않았습니다.')이런식으로 쓸 수 있습니다 !
✏️ Double Exclamation Marks
느낌표 두개 연산자(Double Exclamation Marks)는 0이나 false, undefined, NaN, null, ''같은 애매하거나 사용할 수 없는 값을 false로 걸러주는 연산자입니다.
console.log(!!false) //false
console.log(!!0) //false
console.log(!!undefined) //false
console.log(!!NaN) //false
console.log(!!null) //false
console.log('') //false
console.log(!!1) //true이런 식으로 이해해보았습니다 !
📖 DOM 접근하기
DOM에 접근하는 방법은 크게 3가지가 있습니다.
- 태그의 아이디를 통해 접근하는 방법
- 태그의 클래스를 통해 접근하는 방법
- CSS 선택자로 접근하는 방법
<!--index.html-->
<body>
<div class = "a">
<div id = "b">Hi!</div>
</div>
<div class = "a">
<div id = "c">Hello!</div>
</div>
<script src="script.js"></script>
</body>
/*script.js*/
document.getElementById('b') // <div id = "b">Hi!</div> 태그가 불러와집니다.
document.getElementsByClassName('a') // <div class = "a"> 두 태그가 배열 형태로 불러와집니다.
document.querySelector('#b') // <div id = "b">Hi!</div> 태그가 불러와집니다.
document.querySelector('.a') // <div class = "a"> 두 태그가 배열 형태로 불러와집니다.이런식으로 이해할 수 있습니다 !
Frontend Developer