Windows 명령어 (1) 프로세스 강제 정지

2012.11.14
공짜 점심은 없다 (There is no such thing as a free lunch)

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

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

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

2009.10.08

taskkill

C:\Users\Administrator> taskkill/?

TASKKILL [/S 시스템 [/U 사용자 이름 [/P [암호]]]]
         { [/FI 필터] [/PID 프로세스 id | /IM 이미지 이름] } [/T] [/F]

설명:
    이 도구는 프로세스 ID(PID) 또는 이미지 이름으로 작업을 종료하는 데
    사용합니다.

프로세스 이름이 foo.exe인 모든 프로세스 강제종료

C:\Users\Adminitrator> taskkill /IM javaw.exe /F

모든 프로세스(/IM)을 강제종료(/F)한다.

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

시카고 학파의 태두인 밀턴 프리드만이 즐겨했던 말로 모든 일에는 댓가가 따른다는 너무도 당연한 명제이다. 그런데 오픈소스 기반의 비지니스 세계에서는 이런 공자 점심을 기대하는 클라이언트들 때문에 좋은 의도들이 퇴색되면서 흥이 깨져 버리는 수가 많은 것 같다.

'오픈소스 = 공짜'라는 단순논리로 비용 제로의 신화를 쓰고 싶은 약은(?) 의뢰자들은 '공유를 통한 자유와 효율을 추구하는 철학'을 제대로 이해하지 못하고 그저 '저비용, 고효율'만 외쳐댄다.

그럼 그들의 비지니스는 공짜 점심을 제공할까? 참으로 아이러니 하게도 그렇게 싸게(!) 만들어서는 비싸게 팔리기를 원하는 것은 또 무슨 모순일까?

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

문서 객체 모델 (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>

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

문서 객체 모델 (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 = "제목을 바꿉니다.";

위와 같이 하면 표현식이 실행된 순간 제목의 내용이 거짓말처럼 바뀌게 됩니다. 이제 태그의 내용을 여러분이 원하는 시점에서 변경할 수 있는 멋진 아이디어가 떠오를 겁니다.

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

문서 객체 모델 (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", "속성을 추가합니다.");

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

정샘@IT.블로거

Menu

Category

Notice

웹 프로그래밍

Windows 명령어 (1) 프로세스 강제 정지

공짜 점심은 없다 (There is no such thing as a free lunch)

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

문서 객체 모델 (DOM)

노드의 추가와 삭제

appendChild()와 removeChild()

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

문서 객체 모델 (DOM)

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

firstChild와 lastChild 프로퍼티

childNodes 프로퍼티

nodeType 프로퍼티

nodeValue 프로퍼티

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

문서 객체 모델 (DOM)

속성 다루기

getAtrribute()

setAtrribute()

+ Recent posts

티스토리툴바