JavaScript: JS 기초 Ep.4 (메소드 체이닝, 데이터 타입 확인, 산술 할당 연산자)

04 Aug 2022 • TIL

메소드 체이닝

  • Method Chaining 
    const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해서 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝...
//메소드가 마치 체인 형식처럼 연결되어 있다고 해서...
  
console.log(a); // Hello~
console.log(b); // ~olleH
More …

JavaScript: JS 기초 Ep.3 (DOM API)

04 Aug 2022 • TIL

DOM API

Document Object Model, Application Programming Interface의 약자이다.
Document ⇒ HTML에 들어있는 Object model을 말한다. (div, span, input 요소 등)
API ⇒ 웹 사이트가 동작하기 위해서 입력하는 프로그래밍 명령이다.
DOM API ⇒ 자바스크립트에서 HTML을 제어하는 명령들이다.

  • 간단 defer 예시 
    let boxEl = document.querySelector('.box');
  
console.log(boxEl);

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./main.js"></script>
</head>
<body>
  <div class="box">Box!!</div>
</body>
</html>
  
<!-- 출력 null -->

    • 위에서 아래로 해석하기 때문에 script 부분에서 .box를 요구한다. 그러나 .box는 script이후에 나온다. 그렇기에 출력한 값이 null이 나오게 된다.

      해결 방법 1

More …