7일차와 8일차는 자바스크립트로 어떻게 화면을 구현하는지를 주로 배웠다.
7일차는 자바스크립트로 문제를 풀었는데, 프리트랙보단 쉽긴했지만 그래도 구글링을 하면서 풀었다.

---

BOM

• Browser Object Model
• 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체
• 표준이 존재하지 않음!!

BOM 사용 객체

window.innerHEight; 				//웹페이지의 높이
window.innerWidth; 					//웹페이지의 너비

window.alert("hello"); 				//브라우저에 알림창 표시
window.confirm("want to use?"); 	//브라우저에 확인창 표시
window.close(); 					//현재 창 닫기
window.open("url", "name", "setting") //새로운 창 열기
window.scrollTo(0, 100); 			 //지정한 위치로 스크롤
window.scrollBy(0, 10);				 //지정한 만큼 스크롤
window.resizeTo(300, 300);		 //창 크기를 지정한 크기로 변경
window.resizeBy(1900, 100); 	//창 크기를 지정한 크기만큼 변경

window.location.href;		//전체 URL
window.location.pathname; 	//URL경로(/courses/1111)
window.location.search; 	//URL 중 ? 뒷부분(?query=abc)
window.location.hash;		//URL중 #부터 뒷부분(#example)
window.location.reload();	//현재 페이지 새로고침
window.location.replace("특정URL");//현재 페이지 문서 교체

window.history.length;//현재 창의 방문한 페이지 개수
window.history.back();//이전 페이지로 이동
window.history.go(1);//다음 페이지로 이동(음수면 이전 페이지)

다양한 이벤트

select

여러 값 중 하나를 선택할 경우 사용
보여지는 문구와 적용되는 값은 다름

input

사용자로부터 입력을 받기 위한 태그
type = "text"
name = "name"
placeholder = "press your number"

HTML 요소의 선택

• document.getElementById()
  해당 아이디의 요소를 선택
• document.getElementsByClassName()
  해당 클래스에 속한 요소를 모두 선택
  배열데이터로 저장됨
• document.getElementsByName()
  해당 name 속성값을 가지는 요소를 모두 선택
• document.querySelectorAll()
  해당 선택자로 선택되는 요소를 모두 선택
• document.querySelector()
  해당 선택자로 선택되는 요소를 1개 선택

HTML 이벤트 핸들러 추가

요소.onclick = function(){}
//마우스 클릭 이벤트와 연결 될 이벤트 핸들러

innerHTML vs innerText vs textContent

console.log(something.innerHTML);
//HTML태그 전체가 나옴 <h1>hello</h1>
console.log(something.innerText);
//(사용자의 눈에 보이는)텍스트만 출력 - display:none과 같은 속성으로 되어있다면 출력되지 않음!!
console.log(something.textContent);
//display:none;과 같은 속성이 있어도 문자라면 모두 그.대.로. 출력!