[TIL] 엘리스 SW 엔지니어 트랙 Day 007

📖 오늘 배운 내용 - 2021.11.02

• javascript 이벤트
• javascript 데이터 타입
• var, let, const
• replace, split
• 다크 모드 구현
• 형 변환
• 비교 연산자
• 조건문

 

📝 javascript 이벤트

다크 모드

 <input type="button" id="dn" value="night">

<script>
    const bodyTag = document.querySelector('body');

    const dn = document.querySelector('#dn');

    dn.addEventListener('click', () => {
        if (dn.value === 'night') {
            bodyTag.style.backgroundColor ="black";
            bodyTag.style.color ="white";
            dn.value = 'day'
        } else {
            bodyTag.style.backgroundColor ="white";
            bodyTag.style.color ="black";
            dn.value = 'night'
        }
    })
</script>

[자바스크립트] 이벤트 등록, addEventListener()

 

[자바스크립트]alert, prompt, confirm

 

📝 javascript 자료형

[자바스크립트]자바스크립트의 자료형

 

📝 var, let, const

[자바스크립트]변수와 상수(let, const)

• let과 const의 차이
  • 변수와 상수
  • let은 선언 후 변경 가능, 재할당 가능
  • const는 선언 후 변경 불가능, 재할당 불가능

 

📝 ==, ===

• ===는 자료형의 동등 여부까지 엄격하게 비교한다.

var a = 10; // Number
var b = '10'; // String
console.log(a == b); // true
console.log(a === b); // false

var a = '3';
var b = '5';
var numA = Number(a); // 숫자로 형변환
var numB = Number(b); // 숫자로 형변환
console.log(a + b); // 8

var a = 3;
var b = 5;
var numA = String(a); // 문자로 형변환
var numB = String(b); // 문자로 형변환
console.log(a + b); // '35'

 

[자바스크립트] 비교 연산자

 

📝 형 변환

var a = 3; 
var b = '5';
console.log(a + b); // '35'

• 자세한 과정
  • 3 + '5' -> '3' + '5' 숫자열 3이 문자열 3으로 바뀐다.
  • 숫자 + 문자는 숫자를 문자로 바꿔준다.
  • 왜 문자를 숫자로 안 바꿔주고 숫자를 문자로 바꿔주는지?
  • 모든 숫자는 문자열로 표현해줄 수 있어서 숫자를 문자로 바꿔준다.
  • 모든 문자열이 숫자로 변환될 수는 없지만 모든 숫자는 문자열로 바꿔줄 수 있어서!

• + 연산자 사용 시 피연산자 중 문자열이 하나라도 있으면 문자열 타입으로 강제 형 변환 발생
• -, *, /, == 등 은 숫자 타입으로 강제 형 변환이 발생한다.

console.log(0 == "0"); // true
console.log(0 == []); // true, [].toString() == 0
console.log(0 ==="0"); // false
console.log("0" == []); // false
console.log(0 == ''); // true
console.log('' == '0');// false

 

[자바스크립트] 자바스크립트 형 변환 (type conversion)

 

 

💡 오늘 깨달은 것

• 자바스크립트 자료형으로는 숫자, 문자열, 불린, 객체, null, undefined가 있다.
• 태그 선택자는 document.querySelector('tag')을 사용
• 화면에 출력할 때는 document.write()함수를 사용
• var는 똑같은 이름으로 변수 선언하는 게 가능하다 → 추후 문제 발생 가능
• split → 배열로 저장된다.
• 자바스크립트에서 typeof로는 array대신 object로 나온다. -> isArray 메소드를 사용하면 array 여부를 확인할 수 있다.
• 주말에 var, let, const랑 형 변환에 대해서 정리해서 업로드할 것!!!