---
tags: 온라인 코스준비
---
# 숫자맞추기 게임 2탄
## 브라우저에서 자바스크립트 콘솔보는법
1. 마우스 오른쪽 클릭
2. 맨 끝에 'inspect' 또는 '검사' 클릭

3. 콘솔 탭 선택하면 아래에서 결과를 볼 수 있다.

4. 콘솔 안에있는 내용들을 지우고싶다면 이 버튼을 누르면 된다

## Document

document는 DOM트리의 최상위 객체이다
DOM(Document Object Model)이라 하면 자바스크립트 입장에서 그저 일종의 문자열일 뿐인 HTML을 자바스크립트가 이해할수있게 객체의 형태로 바꿔둔것이다.(Document를 HTML이라고 이해하면 편하다). 이 DOM을 이제 자바스크립트가 마음대로 컨트롤할 수 있어야되는데 이때 필요한 기본 함수들과 속성값을 제공해주는게 document라는 객체이다.

## Element selectors
자바스크립트가 HTML을 가져와서 다루기 위해선 원하는 HTML태그를 선택해야하는데, document객체에서 다양하게 선택하는방식을 제공한다
* document.getElementById : id로 선택
* document.getElementsByClassName: class로 선택, 같은class가 여러개 있을 경우엔 모두 다 선택이 되서 배열에 저장된다
다음 코드를 실행해 결과를 확인해보라

<div class="menu">menu1</div>
<div class="menu">menu2</div>
<div class="menu">menu3</div>

console.log(document.getElementsByClassName("menu"))

* document.querySelector : id, class둘다 선택이 가능하고 좀더 디테일한 선택이 가능하다 참고로 선택가능한 값이 여러개가 있을경우 그중에 첫번째 태그 하나만 반환한다

let userInput = document.querySelector("#user-input"); // id=user-input을 선택
let resultAreaImg = document.querySelector(".main-img");// class=main-img를 선택
let menus = document.querySelector("nav a")// nav태그밑에있는 a태그를 선택 

* document.querySelectorAll: 위에 document.querySelector와 같다 하지만 All에서 알수있듯이 선택된값 모두를 NodeList에 담아 반환한다

## Math
자바스크립트에서 유용한객체중 하나인 Math가 있다. 수학적으로 필요한 왠만한 함수들이 다있다.
* Math.random(): 0~1사이의값을 반환 (1에 근접한값까지지만 1은미포함이다)
* Math.floor():소수점 버림이다
* Math.ceil():소수점 올림이다
* Math.round():소수점 반올림
* Math.max():여러개의 값중 제일 큰값반환
* Math.min():여러개의 값중 제일 작은값 반환

등등 여러가지 유용한 함수들이 많으니 참고하자

## 다양한 노드의 속성값

* textContent : 노드의 text값을 반환
* innterText: 노드의 text값을 반환 textContent랑 비슷하지만 textContent는 모든 요소를 반환하는 반면 innerText는 사람이 읽을 수 있는 요소만 가져옴 (글자사이에 스페이스가 많다면 textContent 있는 그대로 가져오는 반면 innerText는 스페이스를 한칸만 남기고 가져온다)
* innerHTML: html 요소를 반환한다

셋의 차이를 잘 보여주는 예제, 다음 예제를 실행시켜보고 차이를 확인하자

 <h1 id="test">
      <div>Hello      world</div>
 </h1>

let test= document.getElementById("test")

console.log(test.innerText)
console.log(test.textContent)
console.log(test.innerHTML)

이외에도 다양한 노드 속성과 함수는 다음 사이트에서 확인할 수 있다
https://developer.mozilla.org/ko/docs/Web/API/Node