웹 프로그래밍/JavaScript
-
[JavaScript강의노트] DOM 사용하기 (3)2009.10.14
-
[JavaScript강의노트] DOM 사용하기 (3)2009.10.09
-
[JavaScript강의노트] DOM 사용하기 (2)2009.10.08
-
[JavaScript강의노트] DOM 사용하기 (1)2009.10.08
-
[JavaScript강의노트] 제0강 강의노트를 시작하며2009.09.29
[JavaScript강의노트] DOM 사용하기 (3)
문서 객체 모델 (DOM)
노드의 추가와 삭제
자바스크립트의 사용시 다음 두가지 규칙을 지켜서 작성하는 것을 원칙으로 합니다. 무간섭 DOM 스크립트와 단계적 기능 축소의 원칙인데 무간섭 DOM 스크립란 HTML 코드와 자바스크립트를 완전히 분리하여 웹 브라우저의 제공 기능에 따라 다운그레이드나 업그레이드를 지원한다는 것입니다. 단계적 기능 축소는 자바스크립트를 지원하지 않는 웹 브라우저에서도 제공되는 기능을 이용할 수 있어야 한다는 의미입니다. 이 밖에 CSS에 의해 HTML에 여러가지 효과를 추가하는 것을 단계적 기능 확대라고 합니다. 다음 두 메서드는 단계적 기능 축소의 원칙에 위배된다는 이견이 있는 기능으로 HTML 구조를 바꾸기 때문에 이와 관련한 이슈꺼리를 제공하기도 합니다.
appendChild()와 removeChild()
부모 노드에 자식 노드를 추가하거나 삭제하는 기능으로 HTML의 특정 요소의 구조를 변경시킵니다. 노드를 추가하기 위해 document.createElement()와 document.createText() 메서드를 이용하여 엘리먼트 노드나 텍스트 노드를 생성합니다. 다음은 이를 이용한 예제입니다.
<!-- dom_api.html --> <?xml version="1.0" encoding="UTF-8" ?> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>노드 추가하여 DB에 저장하는 예</title> <script type="text/javascript"> function addInputItem() { var root = document.getElementsByTagName("tbody")[0]; // tbody에 tr DOM 트리 추가 var element = document.createElement("tr"); element.appendChild(document.createElement("td")); var eInput = document.createElement("input"); eInput.setAttribute("type", "text"); eInput.setAttribute("name", "text"); eInput.setAttribute("size", "20"); element.firstChild.appendChild(eInput); root.appendChild(element); } function removeInputItem() { var nodes = document.getElementsByTagName("tr"); // tr 태그들을 찾아 tfoot의 tr과 tbody의 첫번째 tr은 유지하고 마지막 tr부터 삭제 var root = nodes[1].parentNode; if (nodes.length > 2) root.removeChild(root.lastChild); } </script> </head> <body> <h1 align="center">문자열 저장</h1> <form method="post" action="action.jsp"> <table align="center"> <tfoot> <tr><td align="center"><input type="submit" value="저장하기" /></td></tr> </tfoot> <tbody> <tr> <td> <input type="text" name="text" size="20" /> <input type="button" value="항목 추가" onclick="addInputItem()" /> <input type="button" value="항목 삭제" onclick="removeInputItem()" /> </td> </tr> </tbody> </table> </form> </body> </html>
<!-- action.jsp 스크립틀릿과 표현식 이용하여 폼의 내용 출력 -->
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<% String[] values = request.getParameterValues("text"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>파라메터 출력</title>
</head>
<body>
<h1>파라메터 출력</h1>
<table>
<% for (int i = 0; i < values.length; i++) { %>
<tr><td><%= values[i] %></td></tr>
<% } %>
</table>
</body>
</html>
package <!-- 폼의 데이터를 저장할 빈 -->
net.jeongsam;
public class Bean091013b {
private String[] text;
public String[] getText() {
return text;
}
public void setText(String[] text) {
this.text = text;
}
public int size() {
return text.length;
}
}
<!-- action.jsp 액션태그와 표현언어(EL), JSTL 이용 -->
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="formBean" class="net.jeongsam.Bean091013b" />
<jsp:setProperty property="*" name="formBean" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<h1>파라메터 출력</h1>
<table>
<c:forEach var="text" items="${formBean.text}">
<tr><td><c:out value="${text}" /></td></tr>
</c:forEach>
</table>
</body>
</html>[JavaScript강의노트] DOM 사용하기 (3)
문서 객체 모델 (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)
문서 객체 모델 (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", "속성을 추가합니다.");
[JavaScript강의노트] DOM 사용하기 (1)
문서 객체 모델 (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()
[JavaScript강의노트] 제0강 강의노트를 시작하며
강의노트를 시작하기에 앞서
1. 들어가면서
최근에 웹 개발에서 가장 큰 이슈를 들라면 당연 AJAX가 아닌가 싶다. AJAX는 Jesse James Garret의 'Ajax: A New Approach to Web Application'에서 처음 사용했다고 알려져있다. 이 글에 의하면 AJAX는 다음과 같은 기술들의 집합이다.
- XHTML과 CSS를 이용한 표준에 근거한 표현
- DOM;Document Object Model을 이용한 동적인 화면 제공과 상호 작용
- XML과 XSLT를 이용한 데이터 변환 및 제어
- XMLHttpRequest를 이용한 비동기 데이터 송수신
- 이 모든 기술들을 JavaScript로 조합
본 강의노트는 AJAX와 같은 기술을 다루려고 하는 것이 아니지만 JavaScript의 미래를 보여 주기에는 부족함 없는 실례가 될 것 같아 간단하게 소개하였다. JavaScript는 원래 네스케이스사의 웹브라우저의 스크립트 언어로 채택되었으며 이 웹브라우저가 시장 주도적인 위치를 차지하자 같은 회사의 웹 어플리케이션 서버의 서버측 스크립트 언어로 채택되기도 하였다. 초기 개발 당시의 이름은 'LiveScript'였으며 후에 Java언어의 개발사인 Sun의 양해하에 JavaScript라는 이름으로 대중에게 알려지게 되었다. 이렇듯 자바스크립트는 자바와는 태생부터가 다르고 문법도 상당 부분 다르지만 자바라는 이름을 갖고 있어 마치 자바언어의 한 계열인냥 오해를 불러일으키곤 했다. 현재는 ECMA라는 기관에 의해 국제표준으로 승인받아 ECMAScript라는 좀 더 표준적인 이름을 가지고 있으며 마이크로소프트에서는 JScript라는 이름의 거의 똑같은 호환 언어를 제공하고 있다.
2. 학습 계획
자바스크립트 언어의 학습은 다른 언어에 비해 임시적으로 진행되어 왔으며 최근에 이르러서야 기본 문법에 대한 중요성이 인식되어 체계가 세워지고 있다. 자바스크립트를 다뤄왔던 책들을 봐도 이를 반영하고 있는데 초기의 자바스크립트 책들은 주로 레시피 형식을 띄었으며 HTML의 보조적인 역할에 국한되었으나, 최근에 발행되는 자바스크립트 관련 서적들은 자바스크립트의 기본 문법을 코어(core)라는 부분으로 다루고, 이전에는 크게 다루지 않거나 거의 다루지 않았던, 객체와 배열, 고급 함수 기법, 클래스를 구현하기 위한 생성자와 프로토타입, 정규표현식, BOM;Browser Object Model, DOM;Document Object Model, 이벤트 모델, CSS를 이용한 동적 문서의 작성등 깊이 있는 주제들을 다루고 있다. 이는 AJAX와 같은 기술에 자바스크립트가 기반 언어로 사용되면서 체계적이고 깊이있는 내용의 학습이 필요해졌기 때문인 것으로 판단된다.
본 강의노트는 이러한 추세를 반영하여 다음과 같은 순서로 강의를 진행하고자 한다.
- 문장 구조 : 리터럴, 식별자, 코드 작성법 등
- 타입과 값
- 변수의 선언과 유효 범위
- 연산자
- 조건문
- 반복문
- 기타 제어문
- 배열와 연관배열
- 함수
- 객체
- 정규 표현식
- 웹 브라우저의 제어
- 폼 요소의 활용
- 이벤트의 처리
- CSS의 제어
- 문서 객체 모델
- 함수 고급 활용
- 생성자와 프로토타입을 활용한 클래스 만들기
강의 순서나 분량은 수업 일정에 맞추어 추가되거나 요약될 수 있음을 밝힌다. 아무쪼록 이 강의노트를 통해 개발자에게 강력한 능력을 제공하는 자바스크립트의 유연함을 맛보는 기회가 되기 바라며 강의 서론을 마칠까 한다. - 정샘.