제로초 JS 입문 강의 3강 정리

 

 

 

 

 

3 - 1

순서도 그리는 이유

 

 

 

3 - 2

기본 VS code 사용법

 

doc 치고 tab : 기본 폼 자동 완성

tab : 블록 지정해서 하면 전체 들여 쓰기

shift + tab : 전체 앞으로 땡김

 

들여 쓰기 설정

보기 - 명령 팔레트 - indent using space 에서 2칸으로 설정하면 들여쓰기 시 2칸이 된다.

 

실행

F5

 

alt + 화살표 : 해당 줄 이동
휠 클릭으로 드래그 :  같은 범위 위아래로 한번에 선택
shift + alt + f : 자동 줄 맞춤
shift + alt + 화살표 : 화살표 방향으로 해당 줄 복사

 

 

 

3 - 3

대화창 (prompt, alert, confirm)

잘 안 쓰긴 함.

 

 

 

3 - 4

HTML 태그 선택하기 (querySelector) - 선택자

 

const $button = document.querySelector('button');

$ : 사람마다 기준 나름인데, 여기 설명에서는 태그를 넣은 변수 앞에 넣기로.

 

const $word   = document.querySelector('span');
const $word   = document.querySelector('#word');
const $order  = document.querySelector('.order');
const $order  = document.querySelector('div pp');
const $order  = document.querySelector('div>span');

 

 

 

태그가 여러 개인데 태그 하나를 선택한다면 제일 앞에 있는 태그만 선택된다.

# : id 선택자

. : class 선택자

띄어쓰기 : 자손 선택자 ( 바로 아래 태그 말고 최하단까지 전부)

> : 자식 선택자 ( 바로 아래 태그까지만 선택)

 

 

 

3 - 5

이벤트 리스너 달기 (콜백함수)

 

    $button.addEventListener(적용할 태그, 함수명);
    $input.addEventListener('input', onInput);        // 입력 받을 시, 이벤트 발생

 

 

 

3 - 6~9 분기문 제작 및 순서도 최적화 ( and , or)

각각 내부 값을 가져오기 위한 속성은?

input.value

select.value

textarea.value

div.textContent

button.textContent

span.textContent

 

입력하는 태그를 넣은 변수들은 보통 value

나머지는 textContent 속성을 사용한다.