Java Script -7

웹브라우저 객체

1. 클라이언트 측 자바스크립트
   1) 웹 브라우저에서 자바스크립트가 하는일
   2) 웹 브라우저에서 자바스크립트 실행 순서

서버가 html 문자열 응답 -> 브라우저 -> document 객체 변환 -> DOMContentLoaded 이벤트 발생 -> document 객체 변환 완료
                     -> 트리구조 재구성(이진트리 - 검색에 최적화)
                     -> DOMTree

3) async와 defer 속성
defer: 외부 링크 연결하는 방식 <script defer src = "...">
-> src 스크립트 실행은 DOMContentLoaded 이벤트 발생 이후에 진행

async: 비동기실행

Window 객체

pageXOffset, pageYOffset: 가로 세로 방향 스크롤 정도

-스크롤바를 제외한 현재 창의 보이는 영역
innerHeight, innerWidth

-스크롤바를 포함한 현재 창의 보이는 영역
outerHeight, outerWeight

Console.dir():객체의 이름과 값형태로 구성출력
Console.error(): 글자색이빨간색
Console.trace(): 콘돌 트이스에 도달가기까지위치를 쌓아가듯이 stack 보여주는 기능
open(주소, 창의이름, 옵션) -> 팝업
width: 너비
opener: oper을 호출해서 열어준 창

주요 메서드

alert(message) - 알림 메세지
prompt(message) - 입력창, 반환값이 입력한 값
confirm(question) - 확인/취소, 확인 -> true, 취소 -> false 진행여부 통제

Location 객체

주소창과 관련된 객체

assign(주소) : 주소 이동
-방문기록이 남는 주소 이동
location.href = "주소";

replace(주소) : 주소 이동
-방문기록이 남지 않는 주소 이동
시크릿모드 -> 방문기록 x
CTRL + SHIFT + N

reload() : 새로고침

History 객체

History객체의 프로퍼티

방문기록과 관련된 객체
length: 방문 기록 갯수

scrollRestoration:
auto - 페이지의 스크롤 위치 복구
manual - 스크롤 위치 복구 X, 문서 상단 위치

History 객체의 메서드

back(): 뒤로 1단계 이동
forward(): 앞으로 1단계 이동
go(숫자): 숫자 -> 음,양수만큼 이동

Document 객체

Document 객체는 창에 표시되고 있는 웹 페이지를 관리,
이 객체로 웹 페이지의 내용물인 DOM 트리를 읽거나 쓸 수 있다.
(가장 중요한 객체)

-선택을 위한 메서드

아이디로 선택: document.getElementById("아이디명"); - 단수개 선택
클래스명으로 선택:  document.getElementsByClassName("클래스명"); - 복수개 선택
태그명으로 선택: document.getElementsByTagName("태그명"); - 복수개 선택 
name속성으로 선택: document.getElementsByName("속성명"); - 복수개 선택

CSS 선택자 형식으로 선택: document.querySelector("CSS 선택자 형식"); - 단수개 선택
                                .querySelectorAll("CSS 선택자 형식"); - 복수개 선택

-children: 자식 요소들
-parentElement: 부모 요소
-firstElementChild: 첫번째 자식 요소
-lastElementChild: 마지막 자식 요소
-previousElementsSibling: 앞쪽 형제
-nextElementSibling: 뒤쪽 형제

const wrap = document.getElementById("wrap")

const first = wrap.firstElementChild;

const last = wrap.lastElementChild;

last
-><div id="footer" role="contentinfo">…</div>

-html: document
-head: document.head
-body: document.body

-양식의 이름값
양식이름.입력항목 이름

속성(attribute)을 관리하는 메서드

-추가
setAttribute("이름", "값");
-조회
setAttribute("이름");
-삭제
removeAttribute("이름");