JavaScript 기초 -2

📌window.document란?
현재 브라우저에 렌더링 되고 있는 문서를 의미 한다.
해당 속성을 이용하면 해당 문서에 접근 가능
(DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스, 사용하여 페이지의 정보 또는 웹 요소를 생성 및 조작 가능)

📌요소를 선택하기 위해 사용하는 대표적 메서드
📍document.getElementById : id를 인자로 전달 받고, 전달 받은 선택자와 일치하는 문서내 요소를 반환 한다.
📍document.querySelector : 선택자를 인자로 전달 받아, 전달 받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다.
📍textContent : 해당 노드가 포함하고 있는 콘텐츠를 표한 하는 속성
(해당 text를 읽고 변경 가능)

📌함수 만드는 방법
1.함수 선언식
function name(){
}
2.함수 표현식
const name = function(){
}

📌간단 용어
매개변수 : 자료를 전달 받기 위해 만들어 놓은 변수(parameter)
데이터 인자 : 실제 함수를 호출시에 전달하는 데이터(argument)

📌이벤트(event)란?
사용중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건
ex.
웹페이지 에서 사용자가 버튼을 클릭 -> 클릭 이벤트
웹페이지 에서 사용자가 키보는를 눌렀다 -> 키다운 이벤트
웨페이지 사용자가 입력폼에 내용을 제출 했다 -> 제출 이벤트
...
이러한 이벤트들은 이벤트 핸들러를 갖을 수 있다.

📌핸들러(handler)란?
이벤트가 발생 되면 실행될 코드 블록을 의미
주로 함수가 이 역할을 담당 한다.

📌이벤트 핸들러 등록 : 이벤트 핸들러 역할을 수행할 삼수를 정의 하는 것
방법
📍addEventListener : onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것 보다는 addEventListener 메서드를 사용하는 것이 좋다!!
ex. target.addEventListener('click', function(){})
장점
1.이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메서드 존재
2.같은 리스너(타겟)에 대해 다수의 핸들러 등록 가능
3.추가적인 옵션 사항 제공

📌이벤트 객체 : 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터
ex.
target.addEventListener('click', function(){})
-->click이벤트가 발생하면 함수를 호출 한다target.addEventListener('click', function(event){})
-->자동으로 전달되는 이벤트 객체를 매개변수 event에 대입 한다.

📌요소를 추가 하는 방법
📍appendChild : DOM내 개별 요소(노드)에 자식 요소를 추가할때 반드시 사용 되는 메서드
사용법 : target.appendChild(자식으로 추가할 요소)
ex.
const p = document.createElement("p")
document.body.appendChild(p)

📌appendChild vs append
공통 : 타겟 요소에 자식 요소를 추가
appendChild : 추가한 자식 노드를 반환 한다, 노드 객체만 추가 가능
append : 반환 데이터가 없다, 요소에 노드 객체 쪼는 문자열을 자식 요소에 추가 가능

📌입력 요소값 읽기
target.value : 대상 요소의 사용자 입력값을 읽는다.

📌삼항 연산자
형태 : 조건식 ? 참일경우의 결과 : 거짓일 경우의 결과 실행

📌기본생성자(내장 생성자로 빌트인 객체라고도 부른다)
ex.
const now = new Date() => 코드가 실행되는 시점의 날짜와 시간 정보 표현
const then = new Date(2009,2,3) ==> 해당 날짜의 정보를 담은 객체
const interval = now - then ==> Date객체 끼리는 밀리초 단위로 계산 가능

⏳타이머 만들기
📍setTimeout : 정해진 시간이 지나면 주어진 함수를 실행 해주는 타이머 메서드
사용법 : setTimeout(실행할 함수, ms단위 시간)
ex.
setTimeout(function(){
console.log("test")
},1000)
==>1000ms지나면 함수를 실행

📍setInterval : 일정한 시간 간격에 따라 함수를 반복 실행 해주는 메서드
사용법 : setInterval(반복실행할 함수, ms단위의 시간)
ex.
setInterval(function(){
console.log("test")
},500)
==>500ms 마다 함수를 반복적 으로 실행 한다.
📍clearInterval : setInterval메서드가 호출 되어 반복 실행할 함수 타이머를 등록하면, 0이 아닌 숫자를 반환
(숫자는 타이머의 id를 의미)
이를 clearInterval메서드에 전달 하면 타이머의 반복 실행이 취소 된다
ex.
let timer;
timer = setInterval(function(){
console.log("test");
},500)
==>셋팅된 타이버의 반환값(id)를 변수에 저장
clearInterval(timer) ==>셋팅된 타이머를 멈추어라