BackEnd/JSP
16장. HTML5와 제이쿼리
제이드Jade
2022. 2. 24. 13:42
16.1 HTML5 주요 개념
HTML5 : HTML의 최신 버전
- 기존 HTML4에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보 등을 지원
- 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과 구현 가능
- 운영체제에 상관없이 모바일환경에서도 기능 구현 가능
- 여러가지 기능
| 기능 | 설명 |
| Web Form | 입력 형태를 보다 다양하게 제공 |
| Video | 동영상 재생을 위한 API 제공 |
| Audio | 음악 재생을 위한 API를 제공 |
| Offline Web | 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 API 제공 |
| Web DataBase | 표준 SQL을 사용해 데이터를 저장할 수 있는 기능을 제공 |
| Web Storage | 웹 애플리케이션에서 데이터를 저장할 수 있는 기능을 제공 |
| Canvas | 2차원 그래픽 그리기 및 객체에 대한 각종 효과를 주는 기능을 제공 |
| SVG | XML 기반 2차원 벡터 그래픽을 표현하기 위한 SVG 언어를 지원 |
| Geolocation | 디바이스의 지리적 위치 정보를 가져오는 기능 제공 |
| Web Worker | 웹 애플리케이션을 위한 스레드 기능 제공 |
| Web Socket | 웹 애플리케이션과 서버 간의 양방향 통신 기능을 제공 |
| CSS3 | 웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS3 제공 |
16.2 HTML 시멘틱 웹을 위한 구성 요소
시멘틱 웹 : 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것
- HTML4에서는 <div>태그에 CSS를 적용, HTML5에서는 다양한 태그로 제공
- HTML5에 추가된 여러가지 태그
| 태그 | 설명 |
| <header> | 머리말을 나타내는 태그 |
| <hgroup> | 제목과 부제목을 묶는 태그 |
| <nav> | 메뉴 부분을 나타내는 태그 |
| <section> | 제목별로 나눌 수 있는 태그 |
| <article> | 개별 콘텐츠를 나타내는 태그 |
| <aside> | 왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그 |
| <footer> | 하단의 정보를 표시하는 태그 |
~<section>태그를 이용해 제목을 표시하는 실습~
- 레이아웃이 위 그림처럼 제대로 표시되려면 각 태그에 CSS를 적용해야 함(head에 css코드 작성)
<body>
<header>
<h1>HTML5 강좌를 시작합니다.</h1>
</header>
<nav>
<ul>
<li>1.개념익히기</li>
<l1>2.문법익히기</l1>
<li>3.실전응용하기</li>
</ul>
</nav>
<aside>
사이드 메뉴
</aside>
<section>
<article>
<h1> 첫 번째 강좌 제목</h1>
<p> 첫 번째 강좌 내용</p>
</article>
<article>
<h1> 두 번째 강좌 제목</h1>
<p> 두 번째 강좌 내용</p>
</article>
<article>
<h1> 세 번째 강좌 제목</h1>
<p> 세 번째 강좌 내용</p>
</article>
</section>
<aside>
퀵메뉴
</aside>
<footer>
프로그래밍 강의 Copyright All right reserved.
</footer>
</body>
16.3 제이쿼리 주요 개념
제이쿼리 : 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리.
: 여러 가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발 가능
<제이쿼리의 주요 특징>
- CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하기 때문에 명료하면서 읽기 쉬운 형태로 표현 가능
- 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하기 반복되는 것을 피할 수 있음
- 많은 플러그인을 제공
- 크로스 브라우징을 제공해 브라우저 종류에 상관 없이 동일하기 기능을 수행
<제이쿼리를 사용하는 방법 2가지>
방법1) www.jquery.com 에서 라이브러리 다운
방법2) 네트워크로 CDN 호스트를 설정해서 사용(jsp에서 코드 한줄 추가)
<HTML이나 JSP에서 제이쿼리 CDN 호스트를 설정하는 방법>
<script src="http://code.jquery.com/jquery-2.2.1(혹은 latest).min.js"></script>
16.4 제이쿼리의 여러 가지 기능
- 제이쿼리는 HTML 객체(DOM-Document Object Model)를 탐색하는 방법으로 CSS 선택지를 이용
<제이쿼리의 여러 가지 선택자>
| 선택자 종류 | 선택자 표현 방법 | 설명 |
| All selector | $("*") | 모든 DOM을 선택 |
| ID selector | $("#id") | 해당되는 id를 가지는 DOM을 선택 |
| Element selector | $("elementName") | 해당되는 이름을 가지는 DOM을 선택 (ex. div) |
| class selector | $(".className") | CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택 |
| Multiple selector | $("selector1,selector2,selector3,......selectorN") | 해당되는 선택자를 가지는 모든 DOM을 선택 |
~제이쿼리 선택자 사용 실습~
1) id 선택자로 태그에 접근하기
ex1)
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- 방법2로 제이쿼리 사용 -->
<script type="text/javascript">
$(document).ready(function() {
alert($("#unique2").html());
});
</script> <!-- document에 DOM이 로드되는 이벤트 처리 함수 -->
<!-- 페이지 로드 시 id가 unique2인 태그를 검색한 후 html() 메서드를 이용해 태그의 값('제이쿼리 입니다!')을 가져옴 -->
</head>
<body>
<div class="class1">안녕하세요.</div>
<div id="unique2">제이쿼리입니다!</div>
<div id="unique3">
<p>제이쿼리는 아주 쉽습니다!!</p>
</div>ex2)
..
function addHtml(){
$("#article").html('안녕하세요'+'<br>');
}
</script> <!-- html메서드 인자 값을 태그 값으로 설정 -->
</head>
<body>
<div>
<p id="article"></p>
</div>
<input type="button" value="추가하기" onClick="addHtml()"/>ex3)
..
function fn_process(){
var value=$("#t_input").val();
$('#t_output').val(value);
}
</script> <!-- .val() : 입력 값 -->
..
<input type="text" id="t_input"/>
<input type="button" value="입력하기" onClick="fn_process()"/><br><br>
결과:<br>
<div>
<input type="text" id="t_output" disabled/>
</div> <!-- disabled: 입력불가 -->
2) 클래스 선택자로 태그에 접근하기
..
function addImage(){
$(".class1").html("<img src='../image/duke.png' width=200>");
}
</script>
</head>
<body>
<div class="class1"></div>
<div class="class1"></div>
<input type="button" value="이미지 추가하기" onClick="addImage()"/>
3) 태그에 직접 접근하기
..
function addImage(){
$("div").html("<img src='../image/duke.png' width=200>");
}
</script>
</head>
<body>
<div></div>
<div></div>
<input type="button" value="이미지 추가하기" onClick="addImage()"/>
16.5 제이쿼리 Ajax 기능
Ajax : Asynchronous Javascript(비동기 자바스크립트) + XML
: 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술
- 페이지 이동 없이 데이터 처리가 가능, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다.
- 기존 웹페이지 ) 서버에 요청 -> 서버에서 결과를 처리 + HTML 태그를 클라이언트의 브라우저에 전송
즉, 전송하여 다른 페이지를 보여주는 것임 => 페이지 이동 발생
Ajax로 페이지 처리) 서버에서 처리 + 다시 XML이나 JSON으로 원래 요청 페이지로 전송 => 페이지 이동 X
제이쿼리 Ajax 사용법
$.ajax({ 속성: 값 })
<제이쿼리 Ajax 기능 관련 속성들>
| 속성 | 설명 |
| type | 통신 타입을 설정( post 또는 get 방식으로 선택) |
| url | 요청할 url을 설정 |
| async | 비동기식으로 처리할지의 여부를 설정(false인 경우 비동기로 처리) |
| data | 서버에 요청할 때 보낼 매개변수 설정 |
| dataType | 응답 받을 데이터 타입을 설정(XML, TEXT, HTML, JSON 등) |
| success | 요청 및 응답에 성공했을 때 처리 구문을 설정 |
| error | 요청 및 응답에 실패했을 때 처리 구문 설정 |
| complete | 모든 작업을 마친 후 처리 구문 설정 |
따라서
$.ajax({
type: "post/get"
async: "true/false"
url : "요청URL"
data : {서버로 전송할 데이터(파라미터)}
dataType : "서버에서 전송받을 데이터 형식"
success:{//정상 응답시}.
error: function(xhr, status, error){//오류 발생 시},
complete: function(data, textStatus){//작업 완료 시}
})
~제이쿼리 Ajax 사용하기 실습~
ajax1.html
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process(){
$.ajax({
type:"get",
async:false, //동기식
url:"http://localhost:8090/pro16/ajaxTest1",//전송할 서블릿
data: {param: "Hello, jquery"},
dataType:"text", //응답 데이터를 텍스트로 지정
success: function(data,textStatus){//data : 응답받은 값
$('#message').append(data);
},
error: function(data, textStatus){
alert("에러가 발생했습니다.");
},
complete: function(data, textStatus){
alert("작업을 완료했습니다.");
}
})
}
</script>
</head>
<body>
<input type="button" value="전송하기" onClick="fn_process()"/><br><br>
<div id="message"></div>
</body>- AjaxTest1.java
..
String param=(String) request.getParameter("param"); //ajax로 전송된 매개변수를 가져 옴(data)
System.out.println(param);
PrintWriter writer=response.getWriter();
writer.print("안녕하세요! 서버입니다.");
- XML 데이터 연동하기
<!-- ajax2.html -->
function fn_process(){
$.ajax({
type:"post",
async:false, //동기식
url:"http://localhost:8090/pro16/ajaxTest2",
dataType:"xml", //응답 데이터를 텍스트로 지정
success: function(info,textStatus){//info : 응답받은 값
$(info).find("book").each(function(){
var title=$(this).find("title").text(); //전송된 XML 데이터에서 엘리먼트 이름으로 데이터 가져옴
var writer=$(this).find("writer").text();
var image=$(this).find("image").text();
$('#bookInfo').append(
"<p>"+title+"</p>"+
"<p>"+writer+"</p>"+
"<img src="+image+"/>"
);
});
},
...
<!-- AjaxTest2.java -->
...
result="<main><book>"+
"<title><![CDATA[초보자를 위한 자바 프로그래밍]]></title>" +
"<writer><![CDATA[인포북스 저 | 이병승]]></writer>" +
"<image><![CDATA[http://localhost:8090/pro16/image/image1.jpg]]></image>"+
"</book>"+
"<book>"+
"<title><![CDATA[모두의 파이썬]]></title>" +
"<writer><![CDATA[길벗 저 | 이승찬]]></writer>" +
"<image><![CDATA[http://localhost:8090/pro16/image/image2.jpg]]></image>"+
"</book></main>";
System.out.println(result);
writer.print(result);
...
~ID 중복 여부 확인하기 실습~
- MemberServlet.java
...
String id=(String)request.getParameter("id");
MemberDAO dao=new MemberDAO();
boolean overlappedID=dao.overlappedID(id);
if(overlappedID==true) {
writer.print("not_usable");
}else
writer.print("usable");
}- MemberDAO.java 는 decode()~where id=? 를 이용해서 id가 존재하면 true를 반환하게 작성
- ajax3.html
<script type="text/javascript">
function fn_process(){
var _id=$('#t_id').val();
if (_id==''){
alert("ID를 입력하세요.");
return;
}
$.ajax({
type:"post",
async:true,
url:"http://localhost:8090/pro16/mem",
dataType:"text",
data:{id:_id},
success: function(data,textStatus){
if(data=='usable'){
$('#message').text("사용할 수 있는 ID입니다.");
$('#btn_duplicate').prop("disabled",true); //버튼 못누르게 하기
}else{
$('#message').text("사용할 수 없는 ID입니다.");
}
},
16.6 제이쿼리에서 JSON 사용하기
- 기존에 pc브라우저와 서버 통신할 때 XML과 JSON을 많이 사용하는데, XML로 연동할 경우 내부적으로 여러 단계의 처리 과정을 거치게 되므로 단순한 JSON으로 데이터를 많이 주고 받는다.
- JSON : name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식
: 비동기 브라우저/서버 통신(Ajax)을 위해 XML을 대체하는 데이터 전송 형식 중 하나
- JSON에서 사용하는 기본 자료형
- 수 : 정수/실수(고정,부동소수점)
- 문자열 : 문자열, 제어문자(\)
- 배열 : 대괄호로 나타냄 (ex. "name":["홍길동","이순신","임꺽정"])
- 객체 : 중괄호{}로 둘러싸서 표현 (ex { "name":"홍길동", "age":16, "weight":67)
JSON객체들을 요소로 가지는 배열 ex)
"members" : [
{"name" : "홍길동" , "age":22, "gender": "남", "nick": "날샌돌이"},
{"name" : "손흥민" , "age":30, "gender": "남", "nick": "탱크"},
{"name" : "김연아" , "age":24, "gender": "여", "nick": "갈치"},
]
~JSON의 자료형 사용 실습~
...
$(function(){
$("#checkJson").click(function(){
var jsonStr = '{"name":["홍길동", "이순신", "임꺽정"]}'; //객체의 name:name, value:배열
var jsonInfo = JSON.parse(jsonStr); //JSON형식으로 파싱
var output="회원 이름<br>";
output+="======<br>";
for(var i in jsonInfo.name){ //배열을 돌리면 i는 인덱스(cf. 객체를 돌리면 i는 name)
output+=jsonInfo.name[i]+"<br>";
}
$('#output').html(output);
});
});
...
~ 객체 자료형 ~
$(function(){
$("#checkJson").click(function(){
var jsonStr = '{"name":"홍길동","age":12,"gender":"남자","nickname":"날쌘돌이"}';
var output="회원 정보<br>";
output+="======<br>";
output+="이름 : "+jsonInfo.name+"<br>";
output+="나이 : "+jsonInfo.age+"<br>";
output+="성별 : "+jsonInfo.gender+"<br>";
output+="별명 : "+jsonInfo.nickname+"<br>";
$('#output').html(output);
});
});~ 객체의 속성 중에 객체의 배열을 값으로 가지는 실습~
$(function(){
$("#checkJson").click(function(){
var jsonStr = '{"members":[{"name":"박지성","age":25,"gender":"남자","nickname":"날쌘돌이"},'
+'{"name":"손흥민","age":31,"gender":"남자","nickname":"탱크"},'
+'{"name":"홍길동","age":12,"gender":"남자","nickname":"홍당무"}]}';
var output="회원 정보<br>";
var jsonInfo=JSON.parse(jsonStr);
output+="======<br>";
for(var i in jsonInfo.members){
output+="이름 : "+jsonInfo.members[i].name+"<br>";
output+="나이 : "+jsonInfo.members[i].age+"<br>";
output+="성별 : "+jsonInfo.members[i].gender+"<br>";
output+="별명 : "+jsonInfo.members[i].nickname+"<br><br>";
}
$('#output').html(output);
});
});
<Ajax 이용해 서버와 JSON 데이터 주고받기>
- 서블릿에서 JSON을 사용하려면 JSON 라이브러리를 설치해야 함
ㄴ https://code.google.com/archive/p/json-simple/downloads 접속 > json-simple-1.1.1.jar 다운 > lib에 붙여넣기
- jsp에서 ajax로 json 스트링을 보내주면 서블릿에서 json으로 파싱
~ JSP에서 제이쿼리 Ajax 기능을 이용해 서블릿으로 JSON 데이터를 전송 실습~
-json5.jsp
<c:set var="contextPath" value="${pageContext.request.contextPath }"/>
...
function(){
$('#checkJson').click(function(){
var _jsonInfo='{"name":"박지성","age":25,"gender":"남자","nickname":"날쌘돌이"}';
$.ajax({
type:"post",
async:false,
url:"${contextPath}/json",
data : {jsonInfo: _jsonInfo},
success:function(data,textStatus){},
error: function(data,textStatus){
alert("에러가 발생하였습니다.");
},
complete: function(data,textStatus){}
});
});
});
JsonServlet.java
..
String jsonInfo=request.getParameter("jsonInfo"); //문자열로 전송된 JSON 데이터를 가져옴
try {
JSONParser jsonParser=new JSONParser(); //JSON으로 파싱할 JSONParser 객체
JSONObject jsonObject=(JSONObject) jsonParser.parse(jsonInfo); //JSON 데이터 파싱
System.out.println(jsonObject.get("name"));
System.out.println(jsonObject.get("age"));
System.out.println(jsonObject.get("gender"));
System.out.println(jsonObject.get("nickname"));
..
~ 반대로 서블릿에서 웹페이지로 JSON을 보내는 실습~
-json6.jsp
$(function(){
$('#checkJson').click(function(){
$.ajax({
type:"post",
async:false,
url:"${contextPath}/json2",
success:function(data,textStatus){
var jsonInfo=JSON.parse(data);
var memberInfo="회원 정보<br>";
memberInfo+="=========<br>"
for(i in jsonInfo.members){
memberInfo+="이름 : "+jsonInfo.members[i].name+"<br>";
memberInfo+="나이 : "+jsonInfo.members[i].age+"<br>";
memberInfo+="성별 : "+jsonInfo.members[i].gender+"<br>";
memberInfo+="별명 : "+jsonInfo.members[i].nickname+"<br><br><br>";
}
$('#output').html(memberInfo);
},
error: function(data,textStatus){
alert("에러가 발생하였습니다.");
},
complete: function(data,textStatus){}
});
});
});-JsonServlet2.java
JSONObject totalObject=new JSONObject();
JSONArray membersArray = new JSONArray();
JSONObject memberInfo=new JSONObject();
memberInfo.put("name","박지성");
memberInfo.put("age","41");
memberInfo.put("gender","남성");
memberInfo.put("nickname", "날쌘돌이");
membersArray.add(memberInfo);
memberInfo=new JSONObject();
memberInfo.put("name","김연아");
memberInfo.put("age","31");
memberInfo.put("gender","여성");
memberInfo.put("nickname", "연느");
membersArray.add(memberInfo);
totalObject.put("members",membersArray);
String jsonInfo=totalObject.toJSONString();
writer.print(jsonInfo);
~ 여러 개의 배열을 JSON으로 전달하는 예제 ~
-.jsp
$(function(){
$('#checkJson').click(function(){
$.ajax({
type:"post",
async:false,
url:"${contextPath}/json3",
success:function(data,textStatus){
var jsonInfo=JSON.parse(data);
var memberInfo="회원 정보<br>";
memberInfo+="=========<br>";
for(var i in jsonInfo.members){
memberInfo+="이름 : "+jsonInfo.members[i].name+"<br>";
memberInfo+="나이 : "+jsonInfo.members[i].age+"<br>";
memberInfo+="성별 : "+jsonInfo.members[i].gender+"<br>";
memberInfo+="별명 : "+jsonInfo.members[i].nickname+"<br><br><br>";
}
var booksInfo="책 정보<br>";
booksInfo+="=======<br>";
for(var i in jsonInfo.books){
booksInfo+="제목 : "+jsonInfo.books[i].title+"<br>";
booksInfo+="저자 : "+jsonInfo.books[i].writer+"<br>";
booksInfo+="가격 : "+jsonInfo.books[i].price+"원 <br>";
booksInfo+="장르 : "+jsonInfo.books[i].genre+"<br>";
booksInfo+="<img src="+jsonInfo.books[i].image+" /><br><br><br>";
}
$('#output').html(memberInfo+"<br>"+booksInfo);
},
..-.java
JSONObject totalObject=new JSONObject();
JSONArray membersArray = new JSONArray();
JSONObject memberInfo=new JSONObject();
memberInfo.put("name","박지성");
memberInfo.put("age","41");
memberInfo.put("gender","남성");
memberInfo.put("nickname", "날쌘돌이");
membersArray.add(memberInfo);
memberInfo=new JSONObject();
memberInfo.put("name","김연아");
memberInfo.put("age","31");
memberInfo.put("gender","여성");
memberInfo.put("nickname", "연느");
membersArray.add(memberInfo);
totalObject.put("members",membersArray);
JSONArray bookArray=new JSONArray();
JSONObject bookInfo=new JSONObject();
bookInfo.put("title", "초보자를 위한 자바 프로그래밍");
bookInfo.put("writer", "이병승");
bookInfo.put("price", "30000");
bookInfo.put("genre", "IT");
bookInfo.put("image", "http://localhost:8090/pro16/image/image1.jpg");
bookArray.add(bookInfo);
bookInfo=new JSONObject();
bookInfo.put("title", "모두의 파이썬");
bookInfo.put("writer", "이승찬");
bookInfo.put("price", "12000");
bookInfo.put("genre", "IT");
bookInfo.put("image", "http://localhost:8090/pro16/image/image2.jpg");
bookArray.add(bookInfo);
totalObject.put("books",bookArray);
String jsonInfo=totalObject.toJSONString();
System.out.print(jsonInfo);
writer.print(jsonInfo);