16장 HTML5와 제이쿼리

1. HTML5 주요 개념

-시멘틱 웹 정의 : 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것.

3. 제이쿼리 주요 개념

- 제이쿼리 : 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리

- 제이쿼리 특징 :

 1)CSS선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현함

 2)메서드 체인 방식으로 수행하므로 여러 개의 동작이 한 줄로 수행할 수 있음

 3)풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있음

 4)크로스 브라우징을 제공하므로 브라우저 종류에 상관없이 동일하게 기능을 수행함

-제이쿼리 사용법:

 1)www.jquery.com에서 다운로드해서 사용하는 방법

 2)네트워크로 CDN 호스트를 설정해서 사용하는 방법 -> <script scr="http://code.jquery.com/jquery-latest.min.js"></script> 이 때 script문을 쓰는 script 태그 위에 따로 써줘야 된다.

DOM = HTML의 태그들을 객체 형태로 만든 것

.htm()은 태그 안에 있는 값을 가져오는 것뿐만 아니라 파라미터에 값을 넣으면 값을 추가할 수 있음

cf) document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체, 본래는 ""붙여줘야 함. document 객체의 .ready()함수는 html 문서의 로딩이 다 끝나면 function()을 실행시켜라 이다.

5. 제이쿼리 Ajax 기능

-AJAX의 정의 : 비동기 자바스크립트 + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술. 기존엔 HTML을 응답으로 보냈음

-AJAX의 기능 : 기존엔 요청 페이지와 결과 페이지가 따로 존재했지만, AJAX에서는 요청페이지에서 결과가 나타날 수 있게 해줄 수 있음

data는 응답의 값을 저장하는 변수로 XML일 때는 info로 변경된다.

 

6. 제이쿼리에서 JSON 사용하기

-JSON 정의 : JSON은 name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식. 자바스크립트에서 파생된 것이므로 자바스크립트의 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이어서 쉽게 사용할 수 있음

cf)JSON.parse()를 하면 해당하는 JSON 문에 대한 객체가 반환된다. 따라서 {}로 묶어줘야함

cf) checkJson가 나오기 전에 script문이 호출되었기 때문에 결과적으로 JQuery문법이 checkJson을 찾지 못했고, 쿼리에 대한 함수 또한 적용시키지 못함. $('document').ready(function){} 하지만 이를 적용하면 HTML이 먼저 로드가 되고 이 문장이 실행되므로 script문이 위에 위치하더라고 페이지 로드가 끝난 후 script문을 실행시키도록 하게 됨.

 

- 서버와 JSON 데이터 주고받으려면 json-simple.jar 라이브러리를 다운해야함. 자바에서 JSON 사용하는 방식은 /pro16/java Resources/src/sec03.ex01참고하기