[220419] JavaScript 특강

JavaScript 특강

이재원 매니저님이 진행하는 JS 실시간 특강을 수강하였다.

What is JavaScript?

자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
-위키백과

HTML, CSS에서 동작의 기능을 설정할 수 있다.

알림창 만들기 실습

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <div id="alertBox">
    <p id="number">alert box 1</p>
    <button id="closeBox">
      이거 누르면 닫힘
    </button>
  </div>

  <div>
    <button class="showAlert" onclick="openclose('나는 1box')">
      이거 누르면 1 열림
    </button>
    <button onclick="openclose('나는 2box')">
      이거 누르면 2 열림
    </button>
  </div>


  <script>
    function openclose(content) {
      document.getElementById("alertBox").style.display = "block";
      document.getElementById("number").innerHTML = content;
    }

    document.getElementById("closeBox").addEventListener("click", function() {
      document.getElementById("alertBox").style.display = 'none';
    })
    
  </script>

</body>
</html>

#alertBox {
  display: none;
  padding: 20px;
  border: 1px solid #c6c6c6;
  border-radius: 15px;
  background-color: beige;
}

#alertBox2 {
  display: none;
  padding: 20px;
  border: 1px solid #af4c4c;
  border-radius: 15px;
  background-color: rgb(131, 131, 31);
}

입력 받기 실습

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <input type="text" name="" id="inputValue" />
  <button id="submitBtn">submit</button>

  <div id="result"> </div>

  <script>
   
    document.getElementById("submitBtn").addEventListener("click", function() {
      // 사용자가 입력하지 않고 버튼 누르면 함수를 실행시키지 말자!
      var IV = document.getElementById("inputValue").value;
      if (!IV.trim()) {
        alert("입력 후 눌러라")
      }
      else {
        document.getElementById("result").innerHTML = IV;
      }
    })
  </script>

</body>
</html>

More ...

태그 선택 방법

querySelector
제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
리턴 타입이 NodeList이다.

document.querySelector('tag');
document.querySelector('#id');
document.querySelector('.class');
querySelectorAll
제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 모든 Element를 반환합니다.

document.querySelectorAll('selector');

getElementById
메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.
리턴 타입이 HTMLCollection이다.

document.getElementById(id);
getElementsByClassName
주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환합니다. 배열로 리턴합니다.

document.getElementsByClassName('class')

변수 선언

원래 JS의 변수 선언은 var로만 했으나, ES6부터 let과 const를 사용할 수 있게 되었다.
var, let, const의 차이를 알기 위해 Hoisting, Scope의 개념을 알아야한다.

Hoisting?

변수 선언들 (그리고 일반적인 선언)은 어느 코드가 실행 되기 전에 처리하기 때문에, 코드 안에서 어디서든 변수 선언은 최상위에 선언한 것과 동등합니다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다. 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 "호이스팅(hoisting)"이라고 불립니다.
-MDN

변수를 선언하기 이전에 참조가 가능하다.

Scope?

스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다.
-PoeimaWeb

global scope
코드 어디에서든지 참조 가능
local scope
자신과 하위 함수에서만 참조 가능
- function levelscope
  변수가 함수 내부에 선언되면 해당 함수 내에서만 접근할 수 있고 함수 외부에서는 사용할 수 없다.
- block level scope
  조건 내부 또는 루프 내부에서 선언된 변수는 조건 또는 루프 내에서만 접근 할 수 있다.
  대괄호({})를 단위로 범위를 정한다.

var, let, const

var
- function-scoped
- 변수 생성
  선언, 초기화 단계가 한번에 이뤄진다.
- 중복 선언, 재할당 가능
let
- block-scoped
- 변수 생성
  선언, 초기화 단계가 분리되어 이뤄진다.
  그래서 초기화 이전에 접근 시도시 참조 에러 발생.
- 중복 선언 불가능, 재할당 가능
const
변하지 않는 값(상수)를 위해 사용한다.
- block-scoped
- 변수 생성
  반드시 선언과 동시에 할당이 이뤄져야한다.
- 중복 선언, 재할당 불가능

/	var	let	const
중복선언	O	X	X
값의 재할당	O	O	X
scope	function	block	block
전역객체 property	O	X	X

let과 const의 Hoisting

var은 Hoisting 당한다.
let과 const는 Hoisting 당하지 않느냐?
❌NO! Hoisiting 당하지만 Temporary Dead Zone 때문에 당하지 않는 것처럼 보일 수 있다.

변수 생성 단계

선언 단계
변수를 실행 컨텍스트의 변수 객체에 등록한다.
초기화 단계
변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 변수는 undefined로 초기화 된다.
할당 단계
undefined로 초기화된 변수에 실제 값을 할당한다.

Temporary Dead Zone

일시적 사각 지대. scope 시작 지점부터 초기화 시작 지점까지의 구간으로, 변수 참조 불가능 구간이다.
초기화 이전에 변수를 참조하려고 하면 메모리 공간이 확보되지 않아 에러가 발생한다.

var은 선언과 동시에 초기화가 이뤄지며, 이때 undefined로 초기화 되어 있다.
let/const는 선언과 초기화가 분리되어 이뤄지므로 선언 이후 TDZ에 들어가 관리된다.

scope에 진입 시 변수가 생성되지만(Hoisting) 초기화 이전이기 때문에 TDZ에서 let/const 변수를 관리하고 있다.
그래서 초기화 이전에 변수에 접근하려 하면 참조 에러가 나고, Hoisting 당하지 않는 것처럼 보인다.

참조 블로그
https://poiemaweb.com/es6-block-scope
https://junhobaik.github.io/js-let-cont-hoisting/

Author And Source

이 문제에 관하여([220419] JavaScript 특강), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aurpo1/220419-JavaScript-특강

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)