JavaScript (2)

 

BOM(Browser Object Model)

• 브라우저 내장 객체
• window: JS 실행엔진이 제일 먼저 생성하는 전역 객체
  • 전역 위치에 var로 선언한 함수
  • 전역 위치에 있는 함수 선언문
  ⇒전역 객체에 등록됨
• 전역 성질을 가지고 있어 어디서든 접근이 가능
• let은주로 윈도우에 등장하지 x

⇒ 보통 winodw. 키워드를 생략하고 많이 사용

Window 객체 - location, history

• location. href: 할당된 url로 페이지 이동
• location.reload(): 현재 페이지 새로 고침

window.document

window.location

winodw.screen

 

 

DOM

• Document Object Model: html, sml문서의 구조를 정의하는 api제공
• 문서 요소의 집합을 트리 형태의 계층 구조로 html표현
• document 노드가 가장 위에 있다. / element 노드 / text 노드 

 

문서 만달기 

•  createElement
• createTextNode
• appendChild
• setAttribute
• innerHTML: 문자열을 HTML태그로 삽입
• innerText: 문자열을 Text Node로 삽입 

문서 객체 가져오기

• docuement.getElementById(”name”).value
• document.getElementByClassName(””); //class 명
• getElementsByTagName
• getElementsByName
• document.querySelector(”#info”);
• document.getElementsByTagName()
• document.querySelector(’#info’).value(): css와 동일한 모양으로 id, class 호출
• document.getSelectorAll

 

객체의 속성 설정

• setAttribute(name, value)
• getAttribute(name)

이벤트 핸들러

• event: 사용자나 시스템, 주기적인 시간에 의해 일어난 사건

위임 구조

• event: 일어난 사건 정보
• event Source: 사건이 일어난 대상
• event Handler: 사건 처리 담당, Event 발생 시 처리할 수행 문장 집합(보통 함수로 작성)

 

과정

1. 이벤트 등록
2. 이벤트 발생(이벤트 객체 생성):
3. 이벤트가 실행( callback), 상황에 따라 이벤트 Source 식별

1. 인라인 이벤트 핸들러

1. DOM Level 1 - 이벤트 핸들러 프로퍼티 방식 

• EventSource 객체.onxxx=EventHandler 함수
• (단점)xxx 이벤트당 한 개의 Event Hanlder만 지정이 가능하다.

1. DOM Level 2

• EventSource 객체, addEventListener( 이벤트 유형 , 이벤트 핸들러 함수 )
• (장점) 동일한 이벤트 소스에 xx 이벤트 당 여러 개의 이벤트 핸들러 함수 지정이 가능하다.

 

인라인 이벤트 핸들러

• 자바스크립터가 html코드를 침범하는 문제 발생
• Vue,js, Angular, React의 프레임워크에서는 인라인 방식으로 이벤트 처리

 

이벤트 핸들러 프로퍼티 방식

• 자바 스크렙트에서 이벤트 핸들러를 등록함으로써 html과 JavaScript코드를 분리할 수 있다.
• div1요소에 이벤트가 발생하면 핸들러로 등록된 함수가 실행

document.getElementById(”div1”).onClick=function(){
    
    alert();
};

 

addEventListener 메소드 방식

• 이벤트 핸들러 내부에서 함수를 호출하는 방식으로 인수 전달 해결

function check(item){
	if(input.value.length<len){
		msg.innerHTML="";
	else msg=INNERHTML="정상입력"

 

JSON(JavaScript Object Notation)

• 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트 기반의 데이터 교환 표준
• 비동기 브라우저/서버통신(AJAX)을 위해, 넓게는 XML을 대체하는 주요 데이터 포멧이다.
• xml사용 시 파싱과 같은 복잡한 문제 해결
• json은 전달 받은 데이터의 무걀성을 직접 검증
• MINE 타입은 application/json

 

Json vs XML

• JSON은 종료태그가 없음
• XML에 비해 상대적으로 구문이 짧음
• json데이터가 XML데이터 보다 빨리 읽고 쓸 수 있음
• XML은 배열 사용이 불가능
• XML은 XML파서가 있어야 하지만, JSON은 자바 스크립트 함수로 변환하여 사용 가능
• XML은 문서의 DOM을 이용하여 접근하지만 , JSON은 문자열로 전송받은 후 파싱하기 때문에 XML보다 처리 속도가 빠름

 

JSON의 구조

• name - value형태의 쌍으로 collection타입이다.
• data는 쉼표로 나열된다
• 객체는 중괄호로 표현 {}
• 배열은 대괄호로 표현 []

 

JavaScript에서의 JSON 사용

• JSON.strigify: argument로 전달받은 자바스크립트의 객체를 문자열로 변환(직렬화)
• JSON.parse: 문자열을 자바스크립트의 객체로 변환(역직렬화)

 

브라우저 렌더링

• 브라우저가 서버로부터 요청받은 내용을 브라우저 화면에 표시해주는 작업

SSR(Server Side Rendering): JSP + Servlet

• 브라우저가 요청할 때마다 서버에 매번 데이터를 요청해서 서버에서 처리하는 방식
• 서버가 클라이언트의 요청마다 새로운 화면(html) 제공
• 서버가 화면을 그리는 주체
• (장점) 첫 페이지에 해당하는 문서만 브라우저에 전달하여 렌더링하기 때문에 초기 로딩 속도가 csr에 비해 빠르다. →사용자가 컨텐츠를 빠르게 볼 수 있음
• (단점) 초기 페이지 로딩 이후 새로운 페이지를 요청할 때마다, 이동 속도가 csr에 비해 느림
• (단점)서버를 매번 요청하기 때문에 서버의 부하가 커짐

CSR(Client Side Rendering)

• 클라이언트가 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식
• 클라이언트 요청 시, data(JSON, XML)을 제공, AJAX
• 브라우저가 화면을 그리는 주체
• REST- API: 클라이언트가 데이터를 받아 화면에 나타냄
• (장점) 처음 로딩 후 동적으로 빠르게 렌더링이 되기 때문에 사용자 입장에서 UX가 좋음
• (장점) 처음에 스크립트 파일을 로드하므로, 서버에게 요청하는 횟수가 적어 서버의 부담 적어지고, 새로 고침이 발생하지 ㅇ낳아 클라이언트는 네이티브 앱과 비슷한 경험
• (단점)초기 페이지 로딩이 전체 페이지에 대한 모든 문서파일을 받다 보니 SSR에 비해 페이지 로딩 속도가 느림