HTML 페이지에 부분적으로 XML/XSL 을 적용할수 있게 하는 javascript

[code]    var xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async=false;
    xml.load("a.xml");

    var xsl = new ActiveXObject("Microsoft.XMLDOM");
    xsl.async=false;
    xsl.load("a.xsl");

    document.write(xml.transformNode(xsl));[/code]

신고

' > Web' 카테고리의 다른 글

IE vs FF(firefox)  (40) 2008.02.12
홈페이지 작성시 사용되는 스타일시트  (46) 2008.02.04
부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
by cranix 2007.08.22 05:14

HTML 에디터를 만들었다.

언제나 그랬듯 내 프로그램의 모토는

적용은 간단하게!

사용은 편리하게!

이다.


이번것도 적용하는거 무지하게 쉽게 해놨다.

사용자 삽입 이미지

위 그림은 기본폼에 적용해 본것이고,

소스와 설명은 아래에...

신고
by cranix 2007.08.21 16:31

사용자 삽입 이미지

이 프로그램의 모토는 간편하게 이다.

설치도 간편 쓰기도 간편.

activex 같은거 안썻고 javascript 로 되어있어서 무지하게 가볍다.

document 내에 레이어 이런거 하나도 안만들어줘도 된다.

어떤 스크립트와도 충돌 안나게 혼자서 알아서 잘 돌아갈것이다.

소스는 아래에..

신고
by cranix 2007.08.04 17:14

텍스트를 눌렀을때 자바스크립트가 실행되게 하는 방법에는 여러가지가 있다.

첫번째로 가장 흔히 쓰이는 href 속성을 이용하는것이다.

<a href="javascript:test()">test</a>

다음으로 쓰이는 방법이 onclick 속성을 이용하는것인데.

<a href="#" onclick="test()">test</a>

이 방법은 클릭 했을때 # 에 의해 문서의 제일 처음으로 간다는 단점이 있어서 잘 쓰지는 않는다.

그럼 첫번째 방법은 단점이 없느냐?

없는줄 알았다..ㅡ.ㅡ;

두 방법의 차이점은 바로 event 객체의 사용 유무 이다.

첫번째 href 속성으로 했을경우 event 객체를 사용하면 거기서 스크립트가 멈춰버린다..

오류도 없다. 메시지도 없다.. 그냥 멈춘다..ㅡ.ㅡ;

a 태그가 그런 단점을 가진다면 어떻게 하는것이 좋을까?

경험으론 아래와같이 span 태그를 이용하는 방법이 가장 좋다.

<span style="cursor:hand" onclick="test()">test</span>

그냥 쓰면 커서가 변하지 않아서 링크처럼 안보이기때문에 부득이 style 을 쓰느라고 조금 길어졌다.

그러나 긴만큼 a 태그사용에서 오던 문제점은 없다.
신고

' > Web' 카테고리의 다른 글

부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
웹페이지 인코딩  (23) 2007.06.11
JAVASCRIPT 에서 XML 문서 DOM,XPATH 로 파싱하기  (26) 2006.12.16
by cranix 2007.08.01 01:19

먼저 알아야 할것은 dom 으로 파싱을 하려면 파싱하려는 문서의 contextType 이 text/xml 이어야 한다는 것이다. (이것때문에 좀 고생했다..ㅡ.ㅡ;)

윗쪽에 "<?xml version="1.0" encoding="euc-kr" ?>" 이처럼 xml 선언을 해 주어도 페이지 contextType 이 text/xml 이 아니면 파싱이 안되니 주의하자. (거꾸로 이처럼 xml 선언을 안해줘도 contextType 이 text/xml 이면 파싱이 가능하다.)



이 문서에서 쓸 테스트 xml 파일을 만들어 보자.


<root>
<subtitle attr1="testattr1">
<subitem attr="testattr">item1</subitem>
<subitem>item2</subitem>
<subitem>item3</subitem>
</subtitle>
<subtitle2>test</subtitle2>
</root>


간단하다..



일단 위 파일을 XMLHttpRequest 로 받은후에 responseXML 속성을 받아서 파싱하면 되겠다.


1. subtitle 의 attr1 의 데이터 가져오기.


xmlObj.getElementsByTagName("subtitle")[0].getAttribute("attr1")


- 위와같이 하면되는데 getElementsByTagName("subtitle") 는 문서내에 있는 subtitle 라는 태그를 모두 배열에 담아 돌려준다는것을 기억하자.



2. subtitle2 의 텍스트 가져오기.


xmlObj.getElementsByTagName("subtitle2")[0].text


- 노드가 가지고있는 데이터 내용을 출력할때는 text 속성을 쓴다는것을 기억하자.



3. subtitle 하위태그로 있는 subitem 태그들을 배열로 받아보자.


xmlObj.getElementsByTagName("subtitle")[0].childNodes


- 위와같이 하면 된다. 현재 테스트 문서에 subitem 은 3개 있으니 .length = 3 이 되겠다.



4. 그럼 간단하게 subitem 의 모든내용을 출력하는 것을 만들어보자.


var nodes = xmlObj.getElementsByTagName("subtitle")[0].childNodes;

for (var i=0;i<nodes.length;i++) {

alert(nodes[i].text);

}



가장 기본적인 xml 탐색방법을 알아봤다.

이걸 응용해서 어떤 것이든 탐색이 가능하겠지만 귀찮다.

그래서 나온지는 모르겠는데(ㅡ.ㅡ;) 하여튼 나온게 XPATH 이다.

자 그럼 이제 xpath 탐색법을 배워보자.


- 아래는 xpath 연산자이다.

연산자
의미
/
자식노드 지정
root/subtitle (<root>의 자식인 <subtitle>)
//
후손전체지정
root//subitem (<root>의 후손중 모든 <subitem>)
*
와일드카드
root/* (<book>의 모든 자식요소)
root/@* (<book>의 속성전체)
.
자기자신
.//subtitle
..
부모노드
../subtitle
|
노드의 논리합
root/subtitle|root/subtitle2
( root/subtitle 와 root/subtitle2 을 모두 찾는다)


- 이제 예제들을 보자.


1. root/subtitle 노드를 탐색해 보자.


xmlObj.selectSingleNode("root/subtitle")


- selectSingleNode 하면 매칭되는 노드가 여러개있어도 그중 최상위 하나만 돌려준다.

  모두 검색하려면 selectNodes(xpath) 를 쓰면 된다.



2. 이제 getElementsByTagName() 처럼 모든 태그를 검색해서 원하는 노드를 가지고오는 것을 해보자.


xmlObj.selectSingleNode("//subtitle")


- 위와같이 "//" 연산자를 쓰게되면 해당 노드의 하위를 검색해서 일치하는 이름의 노드를 돌려준다.

- "//" 연산자는 어디든 올수있다. 예를들어 "root//subtitle" 라고 검색을 하게되면 root 이하의 노드에서 subtitle 를 찾게되는것이다.

- 단 "//" 연산자는 쓰기는 편하나 xml 파일이 커질수록 부하가 늘어난다는점을 기억하자.


3. 이제 좀더 나가서 subtitle 의 subitem 중 item2 라는 데이터값을 가지고있는 노드를 검색해보자.


xmlObj.selectNodes("/root/subtitle/subitem[.='item2']")


- 이거 놀랍지 않은가? for 문 같은거 안써도 된다..ㅡ.ㅡ;;

- item 값옆에 [] 를 쓰고 해당 데이터값을 기준으로 검색할수가 있다.

- 여기서 '.' 은 자기 자신을 의미한다.



4. subtitle 의 subitem 중 attr 속성이 'testattr' 인것을 검색해보자.


xmlObj.selectNodes("/root/subtitle/subitem[@attr='item2']")


- '@' 요걸 쓰면 된다.

- 단 [] 구문은 / 옆이 아니라 item 이름 옆에 온다는것을 기억하자.



5. 이제 좀헷깔리는 문제를 보자. 아래두 구문의 차이는 무엇일까?


xmlObj.selectNodes("/root/subtitle[subitem='item2']")

xmlObj.selectNodes("/root/subtitle/subitem[.='item2']")


- 둘다 subitem 의 데이터를 검색하긴 한다 그러나 위에것은 subtitle 노드를 돌려주고 아래것은 subitem 노드를 돌려준다.

- [] 구문은 바로 옆에 있는 노드를 돌려준다는것을 기억하자.


6. 자 아래 구문을 보자.


xmlObj.selectNodes("/root/subtitle/subitem/@*");


- 어떤 노드의 속성을 모두 탐색하고 싶다면 위와같이 하면 된다.

- 속성이 속성값이 아니라 하나의 노드로 인식해서 돌려주게된다.

- 위의 내용은 subitem 에 속성은 attr 밖에 없으니까 attr 노드를 돌려주게 되는것이다.

- 소스로 설명하면 아래와 같다.


<subitem attr="testattr"/>


위의 소스를


<subitem>

  <attr>testattr</attr>

</subitem>


위와같이 인식하는 것이다.


신고

' > Web' 카테고리의 다른 글

부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
웹페이지 인코딩  (23) 2007.06.11
JAVASCRIPT 에서 XML 문서 DOM,XPATH 로 파싱하기  (26) 2006.12.16
by cranix 2006.12.16 20:13
| 1 |