분류 전체보기

[JavaScript강의노트] DOM 사용하기 (3)

2009. 10. 9. 01:14

문서 객체 모델 (DOM)

노드 트리와 관련된 프로퍼티

이전 강의노트에서 DOM은 (X)HTML 문서의 각 엘리먼트 노드들을 트리 구조로 보고 접근한다고 했었습니다. HTML DOM API에는 이 트리를 탐색할 수 있도록 다양한 프로퍼티들을 제공합니다.

firstChild와 lastChild 프로퍼티

firstChild 프로퍼티는 부모 노드의 자식 노드 중 첫 번째 노드를 가리킵니다. 마찬가지로 마지막 자식 노드를 가리키는 프로퍼티는 lastChild 입니다.

var element = document.getElementById("headline");
alert(element.firstChild);

childNodes 프로퍼티

childNodes 프로퍼티는 부모 노드의 모든 자식 노드들을 배열로 저장하고 있습니다.

<p id="para">
<span>Java</span><span>Servlet</span><span>JSP</span>
</p>
<script type="text/javascript">
var element = document.getElementById("para");
var texts = element.childNodes;
for (var i = 0; i < texts.length; i++) {
	if (texts[i].nodeType == Node.ELEMENT_NODE) { /* 파폭에서만 필요합니다. */
		document.writeln(texts[i].firstChild.nodeValue + "<br />");
	}
}
</script>

위의 소스에서 if 문은 파이어폭스3.5(FF)에서는 제대로 동작을 하지만 IE8.0에서는 필요없습니다. 이유는 바로 '\n' 때문인데 IE8.0은 노드 트리를 만들 때 '\n'을 무시하지만 FF는 '\n'를 트리에 추가합니다. 그래서 FF에서 p 엘리먼트의 자식 엘리먼트는 '\n', span, span, span, '\n'이 됩니다. 위의 소스를 IE8.0에서 실행시키면 화면에 아무것도 표시하지 않는데 'document.ELEMENT_NODE'의 값이 정수 '1'인데 IE에는 심볼 선언이 되어 있지 않기 때문입니다. 결국 IE와 FF 모두에서 정상 동작을 시키려면 nodeType == 1 로 체크를 해야합니다. 참고로 1은 엘리먼트 타입을 의미합니다.

nodeType 프로퍼티

앞서 소스 코드에 본 것처럼 노드의 타입 값을 담고 있는 프로퍼티입니다. 엘리먼트 노드는 1, 어트리뷰트 노드는 2, 텍스트 노드는 3으로 지정되어 있습니다. FF는 ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE 등으로 미리 선언되어 있습니다. IE는 이러한 심볼이 존재하지 않으므로 다음처럼 선언하여 사용하는 것도 한가지 요령이 되겠습니다.

if (!window.Node) {
	var Node = {
		ELEMENT_NODE: 1,
		ATTRIBUTE_NODE: 2,
		TEXT_NODE: 3,
		COMMENT_NODE: 8,
		DOCUMENT_NODE: 9,
		DOCUMENT_FRAGMENT_NODE: 11
	};
}

이렇게 하면 IE의 경우 window 객체에 Node 객체가 존재하지 않으므로 if 조건에 의해 Node 객체에 심볼들을 추가하게 됩니다. 정수 리터럴을 그대로 사용하고 별도로 /* Node.ELEMENT_NODE */ 와 같은 주석을 다는 것보다 좀 더 직관적인 코딩 습관을 길러줍니다.

nodeValue 프로퍼티

텍스트 노드의 문자열을 읽거나 변경하기 위해 사용합니다.

document.getElementsByTagName("h1")[0].firstChild.nodeValue = "제목을 바꿉니다.";
위와 같이 하면 표현식이 실행된 순간 제목의 내용이 거짓말처럼 바뀌게 됩니다. 이제 태그의 내용을 여러분이 원하는 시점에서 변경할 수 있는 멋진 아이디어가 떠오를 겁니다.
저작자표시 비영리 동일조건

[JavaScript강의노트] DOM 사용하기 (2)

2009. 10. 8. 23:44

문서 객체 모델 (DOM)

속성 다루기

이전 강의노트에서 getElementById() 메서드와 getElementsByTagName() 메서드를 이용하여 엘리먼트 노드(HTML에서는 태그라고 한다는 거 아직 기억나죠?)에 접근하는 방법을 익혀봤습니다. 그럼 이렇게 엘리먼트 노드에 접근해서 무슨 작업을 할 수 있을까요? 바로 지금 소개하는 메서드가 이렇게 선택된 엘리먼트 노드를 대상으로 어트리뷰트 노드(이건 HTML에서 속성입니다.)를 추가하거나 변경, 읽기 등을 할 수 있도록 합니다.

getAtrribute()

엘리먼트 노드에 붙어있는 어트리뷰트 노드의 값을 읽어 들이기 위해 사용합니다.

var element = document.getElementById("headline");
alert(element.getAttribute("title"));

setAtrribute()

어트리뷰트 노드의 값을 읽을 뿐만 아니라 변경이나 추가도 할 수 있습니다. 바로 setAttribute() 메서드입니다.

var element = document.getElementById("headline");
element.setAttribute("title", "속성을 추가합니다.");
저작자표시 비영리 동일조건

[JSP강의노트] Tip. Servlet/JSP와 JavaScript 간의 데이터 교환

2009. 10. 8. 17:13

JavaScript와 JSP나 Servlet과의 데이터 교환

웹 브라우저에서 실행되는 JavaScript와 서버에서 실행되는 Servlet/JSP와의 데이터 교환은 가능할까? 답은 '불가능'이다. 서로간에 데이터를 직접 주고 받을 수 있는 방법은 원칙적으로 그리고 보안모델상 불가능하다. 특히 JavaScript의 경우 SendBox 보안 모델을 사용하기 때문에 로컬 디스크에 대한 데이터 저장이나 네트워크를 통한 데이터 전송, 메모리 접근 등의 예민한 작업은 원천적으로 봉쇄되어 있다. 물론 AJAX에서는 얘기가 달라지지만 여기서 논의하고자 하는 것과는 본질적으로 다른 얘기다.

다시 질문으로 되돌아 가서 '불가능'이란 뻔한 답을 왜 질문을 던지고 블로그에 글까지 쓰고 있는 걸까? 조회 수를 올리기 위한 낚시밥이라면 난 돌을 맞아야겠지^^;

데이터를 직접 주고 받는 것은 불가능하지만 꽁수를 써서 주고 받는 것처럼 결과를 보이는 것은 가능하다. 아이디어는 Servlet/JSP는 실행 결과로 HTML 문서를 만들어내고 JavaScritpt는 location.href 프로퍼티를 이용해 웹브라우저에게 URL을 요청하도록 할 수 있다는 점이다.

우선 JSP의 ArrayList의 값들을 JavaScript의 배열로 전달하는 예들 보이겠다. 재미를 위해 일부러 JSP의 변수 이름과 JavaScript의 변수 이름을 똑같이 만들었다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%
ArrayList<String> fruits = new ArrayList<String>();
fruits.add("사과");
fruits.add("배");
fruits.add("포도");
fruits.add("자두");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP의 결과 값을 JavaScript로 전달하기</title>
<script type="text/javascript">
function printFruits() {
	var fruits = [
	<% for (int i = 0; i < fruits.size(); i++) { %>
	"<%= fruits.get(i) %>"<%= i < fruits.size() - 1 ? "," : "" %>
	<% } %>];

	for (var i = 0; i < fruits.length; i++) {
		document.writeln(fruits[i] + "<br />");
	}
}
</script>
</head>
<body>
<h1>JSP ArrayList에 저장된 과일들</h1>
<script type="text/javascript">
printFruits();
</script>
</body>
</html>

JSP 입장에서는 ArrayList에 저장된 아이템들을 HTML 문서로 뿌리는 단순한 작업이다. 하지만 이렇게 만들어진 HTML 문서는 다음과 같은 내용이 된다.

원래의 이미지를 보려면 클릭하세요.

다음은 JavaScript의 데이터를 JSP로 전달하는 예제이다.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript의 데이터를 JSP로 전달</title>
<script type="text/javascript">
function storeFruits() {
	var fruits = ["사과", "배", "복숭아"];
	var queryString = "";
	for (var i = 0; i < fruits.length; i++) {
		queryString += "fruits=" + encodeURI(fruits[i]);
		queryString += (i < fruits.length - 1) ? "&" : "";
	}
	confirm(queryString);
	location.href="jsToJsp.jsp?" + queryString;
}
</script>
</head>
<body>
<input type="button" value="전송" onclick="storeFruits()" />
</body>
</html>

JavaScript는 location.href를 이용하여 쿼리스트링으로 배열의 값을 JSP로 전달한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String[] fruits = request.getParameterValues("fruits");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript의 데이터 출력</title>
</head>
<body>
<h1>자바스크립트의 배열에 저장된 과일들</h1>
<%
for (String fruit : fruits)
	out.println(
			new String(fruit.getBytes("8859_1"), "utf-8") + "<br />");
%>
</body>
</html>

이를 JSP가 받아서 처리하는 예이다. 여기서 HTTP request Header에 담겨있는 쿼리스트링은 ISO 8859-1로 인코딩되어 있기 때문에 한글의 표시를 위해 UTF-8로 다시 인코딩을 하고 있다.

저작자표시 비영리 동일조건

[JavaScript강의노트] DOM 사용하기 (1)

2009. 10. 8. 02:03

문서 객체 모델 (DOM)

문서 객체 모델이란 무엇인가
DOM

클릭하면 원래 크기의 이미지를 볼 수 있습니다.

문서(Document)

원래 DOM은 XML이라는 기술에서 유래하였으며 D는 문서를 의미합니다. 특별히 웹 브라우저가 파싱(parsing)하여 화면을 구성하는데 사용되는 문서는 HTML과 XHTML이며 HTML과 함께 사용되는 DOM 기술을 HTML DOM이라고 하기도 합니다.

객체(Object)

객체는 프로퍼티(속성)와 메소드를 가지고 있으며 HTML 문서의 각 요소를 접근하기 위하여 웹 브라우저는 HTML 문서를 객체로 보고 접근할 수 있도록 해줍니다. 자바스크립트 초기에는 웹 브라우저를 제어하기 위해 윈도우 객체(window object)를 제공하였으며 윈도우 객체의 프로퍼티와 메서드는 브라우저 객체 모델(BOM; Browser Object Model)이라고 부르기도 합니다.

모델(Model)

DOM은 HTML이나 XHTML로 작성된 웹 문서를 나뭇가지형(tree) 구조로 표시하여 웹 문서의 각 요소(element)로 접근할 수 있도록 모델을 제공합니다.

DOM 사용하기

노드(node)

노드란 나뭇가지(tree)형 구조으로 연결(link)되어 부모(parent), 자식(child), 형제(sibling) 관계를 형성합니다. 노드는 다음과 같이 분류합니다.

요소(element) 노드

<html>, <head>, <body>와 같은 HTML 태그(tag)를 요소(element)라고 합니다. 요소는 하위 요소를 포함할 수 있으며 이 때 하위 요소를 자식 요소라고 합니다. 하위 요소를 포함하고 있는 상위 요소를 부모 요소라고 합니다.

텍스트(text) 노드

<p> 태그 사이에 위치한 문자열을 텍스트 노드라고 합니다. XHTML에서 텍스트 노드는 항상 요소 노드의 자식으로 포함되어야 합니다. 그러므로 HTML 문서의 작성시 문자열은 반드시 태그로 감싸는 습관을 들이기 바랍니다.

속성(attribute) 노드

HTML 태그는 나름의 속성들을 가지고 있습니다. 예를 들어 <body> 태그의 경우 배경색 지정을 위해 bgcolor라는 속성을 가지고 있습니다. 이러한 속성들 역시 요소 노드의 자식 노드로 포함됩니다.

CSS와의 관계

DOM에서 CSS를 다루기 위해 요소 노드의 style 속성 노드라는 개념으로 스타일 시트 속성 값을 읽어오거나 추가, 변경 등의 작업을 할 수 있습니다.

getElementById()

DOM API 중 가장 많이 사용되는 메서드 중의 하나로 window.document.getElementById()라는 구조로 document 객체에 포함된 메서드입니다. HTML 태그의 속성 중 "ID" 속성은 중복을 허용하지 않는 유일한 값을 가지는데 이 값을 검색하여 요소 노드를 리턴합니다.

var e = document.getElementById("header");
alert(e);

위의 예는 ID 속성의 값으로 "header"를 갖는 요소(태그)를 찾아 변수 e가 가리키도록 한 것입니다. 경고창을 이용하여 값을 출력하면 해당 요소의 타입과 이름이 표시됩니다.

getElementsByTagName()

이 메서드는 특정 태그를 사용하는 요소들을 배열로 리턴하게 됩니다.

var elements = document.getElementsByName("li");
alert(elements.length);

위의 예는 <LI> 태그들을 찾아 elements라는 배열로 저장하고 몇 개가 찾아졌는지 개 수를 출력합니다. 만일 <LI> 태그로 묶인 아이템들이 여러 개가 있는데 여기에 일괄적으로 "onmouseover"나 "onmouseout" 등 이벤트 리스너를 추가하고자 할 경우 getElementsByName() 메서드를 이용하여 배열에 담아 for 문등으로 돌려서 한꺼번에 추가하는 등의 작업으로 응용이 가능합니다.

속성 다루기

getAtrribute()

setAtrribute()

저작자표시 비영리 동일조건

[JSP강의노트] 제5강 JSP의 내장 객체들

2009. 10. 7. 01:45

JSP 내장객체

pageContext 객체
(javax.servlet.jsp.PageContext)

현재 JSP 문서과 관련된 속성외에 다른 내장 객체의 속성을 얻을 수 있는 막강한 기능의 내장객체입니다. 다른 내장 객체의 속성을 얻기 위해 메서드의 매개변수로 범위를 나타내는 정수 값을 전달해야 합니다.

내장 객체를 얻기 위한 메서드

public abstract Exception getException()
예외 발생 시 이를 처리하도록 지정된 에러 문서를 리턴합니다.
public abstract JspWriter getOut()
out 내장 객체를 리턴합니다.
public abstract Object getPage()
page 내장 객체를 리턴합니다. 해당 JSP 문서에 대한 서블릿 인스턴스 객체를 리턴합니다.
public abstract ServletRequest getRequest()
request 내장 객체를 리턴합니다.
public abstract ServletResponse getResponse()
response 내장 객체를 리턴합니다.
public abstract ServletConfig getServletConfig()
config 내장 객체를 리턴합니다. 해당 문서에 대한 서블릿 초기 설정 정보를 얻을 수 있습니다.
public abstract ServletContext getServletContext()
application 내장 객체를 리턴합니다. 해당 JSP 문서에 대한 서블릿이 실행되는 환경 정보를 얻을 수 있습니다.
public abstract HttpSession getSession()
session 내장 객체를 리턴합니다.

요청 처리할 제어권의 위임과 관련한 메서드

public abstract void forward(String urlPath) throws ServletException, IOException
현재 JSP 문서의 request 객체와 response 객체를 forward() 메서드로 호출한 문서에게 전달합니다. 주소창의 주소늘 불변입니다.
public abstract void include(String urlPath) throws ServletException, IOException
현재 JSP 문서의 request 객체와 response 객체를 include() 메서드로 호출한 문서에게 전달하여 처리한 후 처리가 끝나면 다시 제어권을 현재 문서로 가지고 옵니다. 지정된 문서를 끼워넣는 효과가 있습니다.

속성을 읽고 설정하는 메서드

public abstract Object getAttribute(String name)
page 생존 범위의 속성 값을 리턴합니다.
public abstract void setAttribute(String name, Object value)
page 생존 범위의 name 속성에 값을 저장합니다.
public abstract Object findAttribute(String name)
page, request, session, application 범위의 순서대로 name 속성이 존재하는지 확인하여 결과값을 리턴합니다.
public abstract Object getAttribute(String name, int scope)
지정된 범위의 name 속성 값을 리턴합니다. PageContext.APPLICATION_SCOPE, PageContext.PAGE_SCOPE, PageContext.REQUEST_SCOPE, PageContext.SESSION_SCOPE 의 범위 정수 값을 지정할 수 있습니다.
public abstract void setAttribute(String name, Object value, int scope)
지정된 범위의 name 속성에 값을 저장합니다. 범위 정수 값은 위 설명과 같습니다.

session 내장 객체
(javax.servlet.http.HttpSession)

public String getId()
해당 세션의 세션ID를 리턴합니다.
public long getCreateTime()
1970년 1월 1일 0시 0분 0초를 기준으로 session이 생성된 시간을 밀리초 단위로 리턴합니다.
public long getLastAccessedTime()
가장 최근에 요청이 시도된 시간을 밀리초 단위로 리턴합니다.
public int getMaxInactiveInterval()
클라이언트의 요청이 없을 경우 해당 세션의 최대 유지 시간을 초 단위로 리턴합니다.
public void invalidate()
해당 세션을 종료합니다.
public boolean isNew()
새로운 세션이 생성될 경우 true를 리턴하고 기존 세션이 유지되고 있는 상태일 경우 false를 리턴합니다.
public void setMaxInactiveInterval(int second)
세션 유지 최대 시간을 초 단위로 설정합니다.

application 내장 객체
(javax.servlet.ServletContext)

특정 웹 어플리케이션 전체에 설정한 정보를 얻을 수 있습니다. 서버의 정보와 자원에 대한 정보를 얻고, 어플리케이션이 실행하는 동안 발생할 수 있는 이벤트 로그 등 관련 기능을 제공합니다.

어플리케이션 실행 환경을 제공하는 서버의 정보 관련 메서드

public int getMajorVersion()
Servlet API spec.의 주 버전을 리턴합니다.
public int getMinorVersion()
Servlet API spec.의 보조 버전을 리턴합니다.
public String getServerInfo()
Servlet/JSP container의 버전을 리턴합니다.

서버측 자원 정보 관련 메서드

public String getMimeType(String filename)
지정된 파일의 MIME 형식을 리턴합니다.
public java.net.URL getResource(String path)
path로 지정된 자원을 URL 객체로 리턴합니다. 서버측 자원의 접근 용도로 사용됩니다.
public InputStream getResourceAsStream(String path)
path로 지정된 자원을 입력 스트림 객체로 리턴합니다.
public String getRealPath(String path)
path로 지정된 자원의 실제 경로를 리턴합니다.

어플리케이션 이벤트 로그 관련 메서드

public void log(String msg)
메시지를 지정된 로그 파일에 저장합니다.
public void log(String msg, java.lang.Throwable exception)
메시지와 예외 스택 트레이스 정보를 로그 파일에 저장합니다.

out 내장 객체
(javax.servlet.jsp.JspWriter)

전송할 응답에 대한 출력 스트림 객체입니다.

public abstract void clear() throws IOException
출력 버퍼의 내용을 사용하지 않고 지워버립니다.
public boolean isAutoFlush()
출력 버퍼가 가득찰 경우 자동으로 flush 하여 클라이언트로 전송할 수 있도록 ture가 설정되었는지 확인합니다. (page 지시어의 buffer 속성 참고)
public int getBufferSize()
바이트 단위로 지정된 버퍼의 크기를 리턴합니다. (page 지시어의 buffer 속성 참고)
public abstract int getRemaining()
버퍼의 남은 양을 바이트 단위로 리턴합니다.
public abstract void clearBuffer() throws IOException
현재 출력 버퍼에 저장된 내용을 삭제합니다. clear() 메서드의 경우 flush된 경우 예외를 발생시키지만 clearBuffer() 메서드는 현재 버퍼의 사용을 취소하는 것이므로 예외는 발생하지 않습니다. 입출력시 예외가 발생할 수 있습니다.
public abstract void flush() throws IOException
출력 버퍼의 내용을 비워버리고 클라이언트로 즉시 전송합니다.
public abstract void close() throws IOException
출력 버퍼의 내용을 flush하고 스트림을 닫습니다.

config 내장 객체
(javax.servlet.ServletConfig)

서블릿 인스턴스가 참조할 초기 설정 정보를 얻을 수 있습니다.

public String getInitParameter(String init_paramName)
Servlet/JSP container 설정 파일에 지정된 초기 파라메터의 값을 리턴합니다.
public Enumeration getInitParameterNames()
Servlet/JSP container 설정 파일에 지정된 초기 파라메터의 이름들을 리턴합니다.

page 내장 객체
(javax.servlet.jsp.HttpJspPage)

JSP 문서에서 생성된 서블릿 인스턴스 객체를 참조합니다. 현재 대부분의 JSP 컨테이너가 지원하는 스크립트 언어가 Java이므로 거의 사용되지 않습니다.

exception 내장 객체

JSP 문서에서 발생한 예외를 처리할 페이지를 지정한 경우 에러 페이지에 전달되는 예외 객체입니다. (page 지시어의 isErrorPage 속성 참고)

public String getMessage()

에러 메시지를 리턴합니다.

public void printStackTrace()

에러 출력 스트림(System.err)으로 스택 트레이스 정보를 출력합니다.

public void printStackTrace(java.io.PrintWriter out)

스택 트레이스 정보를 지정된 출력 스트림으로 출력합니다.

저작자표시 비영리 동일조건

+ Recent posts

티스토리툴바