DOM(Document Object Model)
은 문서 또한 객체이고, 그 객체의 모델을 DOM이라고 한다. 따라서 문서의 각 요소(Elements)에 접근하여 값을 가져오거나(get) 아니면 값을 설정하거나(set) 해줄수가 있고 값을 변경해줄수도 있다.
오늘은 Jquery의 Get과 Set을 이용하여 각 요소에 접근하고, 값을 설정하고 가져오고 변경해주는 수업을 진행했다.
먼저 Get과 Set에 대해서 살펴보겠다.
먼저 하나의 문서를 만들어서 문단을 입력해주고, 그것을 get을 이용하여 가져오는 2가지의 방법(Jquery, Javascript 문법) 으로 나눠보겠다.
그리고 해당 문법마다 각각의 버튼을 부여해 기능을 설정해주겠다.
See the Pen Untitled by codeJo (@yatong) on CodePen.
기본 틀을 생성해주고 각각의 버튼을 눌렀을때 해당 p태그의 text와 HTML을 가져와보겠다.
See the Pen Untitled by codeJo (@yatong) on CodePen.
이런식으로 진행이 된다. 각각의 ID 속성에 접근하여 그 ID 속성이 지니고 있는 Text와 HTML 요소를 출력해준것이다.
Get을 알아보았으니 Set을 알아보겠다.
See the Pen Untitled by codeJo (@yatong) on CodePen.
text와 html 그리고 val을 이용하여 각각의 요소에 접근해 값을 변경해주었고.
Javascrip에서는 getElementsByTagName과 getElementByClassName을 추가로 이용해주었다.
없는 속성을 추가하거나 속성의 값을 변경하는것도 가능한데. Jquery에서는 attr이라는 녀석이 있고 Javascript에서는 SetAtturibute과 GetAttribute가 있다.
이부분은 수업진행할때 img파일을 링크로 걸어 URL과 IMG를 변경해주곤 했는데
Codepen으로 이미지 함부로 걸기가 무서워서 코드로 대신하겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- cdn 방식으로 jquery 연동 -->
<!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->
<!-- download방식으로 jquery 연동 -->
<script src="../js/jquery-3.6.3.js"></script>
<meta charset="utf-8">
<title></title>
<style></style>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
alert($('#img1').attr('src'));
});
});
$(document).ready(function(){
$('#btn2').click(function(){
$('#img1').attr('width',800);
});
});
$(document).ready(function(){
$('#btn3').click(function(){
$('#img1').attr({'width':150, 'height':100, 'src':'../images/jquery.png'});
$('#a1').attr({'href':'http://www.jquery.com','title':'제이쿼리','target':'_blank'});
});
});
function getSrc() {
alert(document.getElementById('img1').getAttribute('src'));
}
function setSrc() {
document.getElementById('img1').setAttribute('width',100);
}
function setEx() {
let img1 = document.getElementById('img1');
let a1 = document.getElementById('a1');
img1.setAttribute('src','../images/jquery.png');
a1.setAttribute('title','제이쿼리');
a1.setAttribute('href','http://www.jquery.com');
a1.setAttribute('target','_blank');
}
</script>
</head>
<body>
<a href="http://www.google.com" title="구글" target="_self" id="a1"><img src="../images/google.png" id="img1"></a><br/>
Jquery Style<br/>
<p id="text"></p>
<button type="button" id="btn1">이미지src 가져오기</button>
<button type="button" id="btn2">이미지너비변경</button>
<button type="button" id="btn3">이미지여러속성변경</button>
<hr/>
javascript stype<br/>
<button type="button" id="btn4" onclick="getSrc();">이미지src 가져오기</button>
<button type="button" id="btn5" onclick="setSrc();">이미지너비변경</button>
<button type="button" id="btn6" onclick="setEx();">이미지여러속성변경</button>
<hr/>
<h1>jquery-DOM-attr</h1>
<pre>
$(selector).attr(attribute)-속성 값을 반환합니다.
$(selector).attr(attribute,value)-속성 및 값을 설정합니다.
$(selector).attr(attribute,function(index,currentvalue))-함수를 사용하여 속성과 값을 설정합니다.
$(selector).attr({attribute:value, attribute:value,...})-{}를 사용하여 여러 속성 및 값 설정:
</pre>
</body>
</html>
이정도로 DOM에 대해서 알아보고, 나중에 추가적으로 다룰일이 있다면 별도로 포스팅 하겠다.
다음엔 오후에 배운
Servlet 과 Mapping 설정을 정리해보겠다.
Servlet이란?
쉽게 정리해보면, 웹 애플리케이션을 만들때 필요한 인터페이스이며, 웹 클라이언트의 요청을 처리할수 있는 클래스이다.
Java에서 웹을 실행하기 위해서는 HttpServlet 클래스를 상속받아야하는데, 이를 상속하면서 만들어지는것이 Servlet이다.
기존에는 웹 클라이언트의 요청을 JSP 파일이 직접 받았다면, 이를 Servlet으로 받는것이다.
MVC패턴(Model, View, Controller) 패턴에서 Model은 Java, View는 HTML혹은 JSP파일, 그리고 Controller에 해당하는것이 바로 Servlet이다.
Servlet 파일을 만들어주면 해당 Servlet 클래스를 Mapping 해줘야한다.
이클립스 Web Project에서 WEB-INF 폴더 안에 있는 Web.xml에 들어가보자.
이곳에 Servlet 태그를 추가해줘야하는데
먼저 Servlet 클래스를 만들어놓고
package ch17;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//웹에서도 동작이 가능하게끔 HttpServlet을 상속받는다
public class MyServlet extends HttpServlet {
@Override
public void init() throws ServletException { //웹 어플리케이션 시작시 단 한번만 호출이 되는 init method
}
@Override
//get방식으로 요청시 호출 request와 response는 무조건 한쌍이다
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doget");
response.setContentType("text/html; charset=utf-8"); //browser에게 html 문서를 읽어들이라고 명령, utf-8 인코딩 방식으로
PrintWriter out = response.getWriter(); //입출력과 관련된 녀석, getWriter가 PrintWriter 타입을 반환한다
out.println("<!DOCTYPE HTML>");
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<title>");
out.println("제목");
out.println("</title>");
out.println("<body>");
out.println("<h1>오우야</h1>"); //태그도 먹는다
out.println("</body>");
out.println("</html>");
}
@Override
//post 방식으로 요청시 호출
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("dopost");
}
@Override
public void destroy() { //종료시 호출되는 method
System.out.println("destroy 호출");
super.destroy();
}
}
이를 저장한후에 Web.xml 파일에 해당 파일을 Mapping을 해주겠다. Servlet Mapping은 이처럼 Web.xml 파일에 Mapping하는 방법과 클래스에서 Mapping 하는 방법 2가지가 있다.
<servlet>
<servlet-name>서블릿 이름</servlet-name>
<servlet-class>서블릿클래스의 실제경로</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>맵핑을 할 서블릿이름</servlet-name> <!-- 연결하고자 하는 servlet name 이름 꼭 일치해야한다.-->
<url-pattern>/ms1</url-pattern> <!-- URL의 패턴 -->
</servlet-mapping>
이렇게 Web.xml에 추가를 해주면 된다.
그럼 http://localhost:포트번호/ContextPath/ms1 이라고 주소를 입력하면 /ms1으로 해당 Servlet이 맵핑되면서
실제 Servlet 클래스를 찾아가 해당 Servlet 안의 Method들이 실행되는것이다.
2번째 방법은 Servlet 클래스를 생성하면서 Annotation(@)을 이용해서 맵핑하는 방법이 있다.
아주 간단하다. 클래스명 상단에 @WebServlet 이라고 입력하고 (urlPatterns = "url명")이라고 추가만 해주면 된다.
package ch17;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//web.xml에서 servlet으로 맵핑하는게 아닌 어노테이션으로 맵핑하는방법
@WebServlet(urlPatterns = "/ms2")
public class MyServlet2 extends HttpServlet {
@Override
public void init() throws ServletException { //웹 어플리케이션 시작시 단 한번만 호출이 되는 init method
}
@Override
//get방식으로 요청시 호출 request와 response는 무조건 한쌍이다
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doget");
response.setContentType("text/html; charset=utf-8"); //browser에게 html 문서를 읽어들이라고 명령, utf-8 인코딩 방식으로
PrintWriter out = response.getWriter(); //입출력과 관련된 녀석, getWriter가 PrintWriter 타입을 반환한다
out.println("<!DOCTYPE HTML>");
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<title>");
out.println("제목");
out.println("</title>");
out.println("<body>");
out.println("<h1>오우2야오우오우오우으밍러ㅏㅁ나이로머나ㅣㅇ로미나오리ㅏㅁㄴ오라ㅣㅁㄴ로아ㅣㅗㄹ</h1>"); //태그도 먹는다
Date today = new Date();
out.println("<p>현재시간:"+today+"</p>");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy년-MM월-dd일");
out.println(sdf.format(today));
out.println("</body>");
out.println("</html>");
}
@Override
//post 방식으로 요청시 호출
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("dopost");
}
@Override
public void destroy() { //종료시 호출되는 method
System.out.println("destroy 호출");
super.destroy();
}
}
코드를 보면 MyServlet2 라고 클래스를 생성한후 HttpServlet 을 상속받았으며 클래스 선언부 상단에 어노테이션을 이용하여 Mapping을 진행해주었다. 그럼 /ms2 URL이 호출되면 이 Servlet이 실행되는것이다.
Web.xml을 이용하는 방법과 어노테이션을 이용하는 방법, 둘중에 뭐가 더 낫고 덜 낫고는 차이가 없다.