JavaScript BOM ; the Browser Object Model
-JS window
모든 글로벌 자바 객체, 함수, 변수는 자동적으로 window object의 멤버가 됨
Global variables, global functions, and the document object(of the HTML DOM) are properties of the window object.
window size
- window.innerHeight : 윈도우 브라우저의 길이( toolbar, scrollbar 포함 x)
- window.innerWidth : 윈도우 브라우저의 너비( toolbar, scrollbar 포함 x)
other methods
- window.open() - open a new window
- window.close() - close the current window
- window.moveTo() - move the current window
- window.resizeTo() - resize the current window
-JS Screen
window.screen : 유저 화면에 대한 정보를 가지고 있음
window.screen 객체 사용법 : window prefix 없이 사용 가능
- screen.width
- screen.height
- screen.availWidth : available 한 width 리턴
- screen.availHeight : available한 height 리턴
- screen.colorDepth
- screen.pixelDepth
-JS Location : 현재 페이지의 주소를 얻기위함 그리고 새로운 페이지를 redirect하기 위함
window.location 객체 사용법 : window prefix 없이 사용 가능
- window.location.href : returns the href (URL) of the current page
- window.location.hostname : returns the domain name of the web host
- window.location.pathname : returns the path and filename of the current page
- window.location.protocol : returns the web protocol used (http: or https:)
- window.location.assign() : loads a new document
-JS Navigator : visitor의 브라우저에 대한 정보를 포함
window.navigator 객체 사용법 : window prefix 없이 사용 가능
- navigator.appName
- navigator.appCodeName
- navigator.platform
- navigator.cookieEnabled : 쿠키 사용이 가능한지 true of false
-JS Popup Alert : 정보에 대한 확인이 필요할때 주로 사용됨
JavaScript popup box
1. Alert box : 정보를 알림
2. Confirm box : "확인" 또는 "취소" 를 입력받음
3. Prompt box : 데이터를 입력받음
-JS Timing Events : 시간 간격으로 실행됨 ; timing events
지정된 시간 간격으로 코드를 실행
two key methods
- setTimeout(function, milliseconds) : 지정된 시간 이후에 함수 실행
- setInterval(function, milliseconds) : 지정된 시간으로 계속 함수 실행
--> HTML DOM window obect 메소드임
clearTimeout() : setTimeout() 함수를 멈춤, 해당 함수는 setTimeout()에서 반환된 변수를 사용
clearInterval() : setInterval() 함수를 멈춤, 해당 함수는 setInterval()에서 반환된 변수를 사용
-JS Cookies
쿠키란 ? 사용자의 컴퓨터에 작은 텍스트 파일로 저장된 데이타이다. 쿠키는 유저에 대한 정보를 기억하기 위한 것
웹 서버가 브라우저에 웹 페이지를 보낸 후, 연결이 끊긴 후 서버는 유저에 대한 모든 정보를 잊는다.
쿠키를 사용하면, 유저가 웹 페이지를 방문했을때 정보가 쿠키에 저장되고, 그 이후에 다시 그 페이지를 방문했을대 쿠키는 그 정보를 기억 한다.
자바는 document.cookie property로 쿠키를 CRUD 할 수 있음
Creat하기
Read하기
Update하기
Delete하기
-JS AJAX : JavaScript로 AJAX 구현
AJAX : Asynchronous JavaScript And XML
나오게 된 배경 : url 엔터 입력하는 순간 서버로 접속 그리고 서버가 응답 (가시적으로 보임) --> 동기적인 작업
form 도 마찬가지 !
form 입력 -> 로그인 버튼 -> 정보를 서버에 보냄 -> 정보 체크 -> 로그인 된 화면 보임
사용자 행동에 의해 바로바로 보이는 것 ; 어떤 것을 요청하고, 응답 받고, 요청하고, 응답받고 ->동기적
AJAX(아작스)는 비동기적인 것
비동기적 : 버튼을 눌렀는데,
스크립트 안에는 저 내용이 없다! 저 정보는 서버에서 받아온 정보
프로그램상에서 자바스크립트만 이용해서 서버 접속 -> 정보 가져오는 것 : AJAX
(구현하기 위해서는 : 현재 보이는 웹페이지 만들고, 내부적으로 버튼을 클릭했을 loadDoc()실행. 객체(xhttp) 만들어서 받아온 데이터를 넣는 것. 저 객체 이용해서 겟 방식으로 파일 호출
링크를 클릭한 것처럼 서버에 접속해서 파일을 가져옴. 가져오면 state가 바뀜
정상으로 뜨면 내용을 가져오는 것)
우리가 보는 웹페이지에서 내부적으로 다시 접속하여 정보를 다이나믹하게 가져오는 것
(내부적으로 사용할 수 있는 페이지를 서버에 만들어놓고 요청 -> 그것에 해당하는 데이터를 동적으로 가져올 수 있게 됨)
필요한 정보를 그때 그때 요청해서 가져옴. 한꺼번에 가져오는 게 아니라
더 간단하게 만들려면 jquery
현재위치에 저 텍스트 파일이 있는 것
-AJAX XMLHttp
AJAX - The XMLHttpRequest Object ; GET or POST
XMLHttpRequest : 웹 서버로 데이타를 주고 받기 위해 사용
XMLHttpRequest Object 생성: variable = new XMLHttpRequest();
-AJAX Request
서버에게 요청할때
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
GET : simpler and faster and, can be unsed in most cases
POST : when sending a large amount of data to the server.
it has no size limit.
more robust and secure than GET
서버에서 파일 열때
-AJAX Response
로딩되는 속도가 달라서 콜백하는 함수가 있어야 함. 완료되는 시점을 잡아서 데이터를 받음
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
-AJAX PHP : php로도 요청할 수 있다.
-ASP : 마이크로소프트에서 나온 서버 사이드 스크립트임
'Web Developement' 카테고리의 다른 글
| 10-1. jQuery (0) | 2021.01.17 |
|---|---|
| 9-2. JavaScript로 AJAX 구현하는 간단한 예제 (0) | 2021.01.15 |
| 8. JavaScript DOM (0) | 2021.01.14 |
| 7. JavaScript (2) (0) | 2021.01.13 |
| 6. JavaScript 정리 (0) | 2021.01.10 |