섹션 3

순서도를 그리는 이유

• 순서도는 사고력을 기르기 위해서 본인이 꼭 그려보도록 한다

대화창(prompt, alert, confirm)

• prompt, alert, confirm 리턴형은?

HTML 태그 선택하기(querySelector)

- document.querySelector('선택자')

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

• querySelector의 경우 가장 먼저 만나는 하나를 선택한다. 그 이후에 나오는 것들은 무시한다. 보통 고유하게 정의하는 id값에 대해 선택을 한다.
• const $$button = document.querySelectorAll('button');을 통해 버튼에 대한 모든 엘리먼트를 선택할 수 있다.
• 다양한 여러개를 선택하는 다른 방법은 class를 이용한다. document.querySelector('.클래스이름');

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

document.querySelector('input')
        .addEventListener('input', function() {});

• input 태그에 대해 input 이벤트가 있으면 function()을 실행한다. 이 함수는 이벤트리스너의 **"리스너함수"**이자, input 이벤트를 실행하고 나서 실행되는 **"콜백함수"**이다. 특히 "콜백함수"에는 hello 처럼 인수없이 이름을 넣어야 한다. hello()처럼 괄호가 있으면 안된다!!!

document.querySelector('input')
        .addEventListener('click', function(){});

document.querySelector('input')
        .addEventListener('click', (event) => {});