JavaScript & Ajax

JavaScript를 배워야 하는 이유

JavaScript는 웹개발자가 반드시 알아야 하는 3가지 언어중 하나이다.

1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

JavaScript를 이용하면 웹페이지를 동적으로 개발할 수 있다. 
기본적인 문법은 Java와 유사하나 상호 호환되는 부분이 전혀 없기 때문에 완전히 다른 언어이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript

---

Document Object Model(DOM)

DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.
DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었고 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이다.

Major DOM interface

Document

각각의 웹 페이지는 자신의 document 객체를 가지며, document는 각각의 웹 페이지의 HTML이라고 보아도 무방하다.

Major method

• document.getElementById(id)
• document.getElementByTagName(name)
• document.createElement(name)

Element

Document내 각각의 element 객체를 의미한다.

Major property

• element.innerHTML

Major method

• element.setAttribute(name, value)
• element.getAttribute(attributeName)

Window

DOM 문서를 포함한 브라우저의 창을 의미한다.

마우스 좌,우 클릭이 동작하지 않도록 하기 위해서는 Windows의 onclick, oncontextmenu 등의 property를 이용하면 된다.

Major property

• window.onload

Major method

• window.dump(message)
• window.scrollTo(x-coord, y-coord)

---

알아둬야 하는 JavaScript 문법

undefined와 null의 차이

• undefined는 변수만 선언되고 값이 할당되지 않은 것을 의미, 다시 말하면 자료형이 결정되지 않은 변수
• null은 변수를 선언하고 null object를 할당한 것을 의미, 다시 말하면 자료형은 객체인데 비어 있는 변수

비교연산자 ==와 ===의 차이

• ==은 두 값이 동일한 경우 true
• 1 == "1"은 true이다.
• ===은 두 값과 자료형까지 동일한 경우 true
• 1 === "1"은 false이다.

function의 자료형이 object?

• JavaScript에서 function도 object이다. JavaScript에서는 여러가지 방법으로 변수에 함수를 할당 할 수 있기 때문이다.
• var a = function() { ... };
• 하지만 typeof 함수에서는 "function"을 return한다.
• http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.3

---

JavaScript Example

https://www.w3schools.com/js/js_examples.asp

---

Ajax(Asynchronous JavaScript and XML)

비동기적인 웹 어플리케이션 개발이 가능하게 하는 웹 개발 기법이다.
기존에는 항상 서버는 웹 브라우저가 요청하면 웹 서버는 해당 정보를 포함한 페이지 전체를 전달해 주기 때문에 웹 서버의 응답이 올때까지 항상 대기하고 있어야 했다.
하지만 Ajax는 비동기적으로 정보를 교환하기 때문에 웹 브라우저가 요청하면 웹 서버는 기본적인 웹 페이지를 먼저 응답으로 보내고 나머지 중요 데이터를 별도로 보낼 수 있게 되었고 웹 브라우저는 전달된 데이터를 필요한 부분에 넣어 표시만 하면 되었다.

• 웹 페이지가 load된 후에도 웹 서버로부터 데이터를 읽을 수 있다.
• 웹 페이지 reload 없이도 웹 페이지 갱신이 가능하다.
• 백그라운드에서 웹서버에 data를 보낼 수 있다.

대표적인 Ajax 웹 어플리케이션으로 Gmail, Google maps가 있다.

---

XMLHttpRequest Object

Ajax의 핵심이 바로 XMLHttpRequest object이다.

Methods

Method	Description
new XMLHttpRequest()	Creates a new XMLHttpRequest object
abort()	Cancels the current request
getAllResponseHeaders()	Returns header information
getResponseHeader()	Returns specific header information
open(method, url, async, user, psw)	Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password
send()	Sends the request to the server Used for GET requests
send(string)	Sends the request to the server. Used for POST requests
setRequestHeader()	Adds a label/value pair to the header to be sent

Properties

Property	Description
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
responseText	Returns the response data as a string
responseXML	Returns the response data as XML data
status	Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference
statusText	Returns the status-text (e.g. "OK" or "Not Found")

Example

https://www.w3schools.com/js/js_ajax_examples.asp

---

jQuery

가장 대표적인 JavaScript 라이브러리이며 조금 더 JavaScript 문법을 쉽게 작성 할 수 있다.

문법

Basic template

<script>
    $(document).ready(function(){
        // jQuery methods go here...
    });
</script>

모든 jQuery는 위와 같은 형태를 가지며 $(document).ready()은 document가 전부 로딩된 후에 실행이 될 수 있다.

예제: https://www.w3schools.com/jquery/jquery_examples.asp

Selector

• $(this).hide() - hides the current HTML element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with class="test".
• $("#test").hide() - hides the element with id="test".
• ...

Events

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload