firefox에는 소스가 Syntax Highlight 되서 나오지만, DOM 트리를 볼수있는 방법은 없다.
다른 툴을 이용할까 했지만, 자바스크립트 for web 2.0 책을 보다보니
DOM Inspector 라는 녀석이 Firefox에 내장되어 있다는 내용이 있었지만,
실제로 최신버전에는 그녀석이 없고, '부가 기능'으로 추가를 해주어야 한다.


아무튼, XML Viewer 와 비슷한 방식으로 HTML DOM을 트리로 출력을 해준다.


2010/01/04 - [파일방] - MiTeC XML Viewer (Free!)
[링크 : https://addons.mozilla.org/ko/firefox/addon/6622/] << 부가기능 페이지
신고
Posted by 구차니

댓글을 달아 주세요

한참을 고심하다가, 검색어를 바꾸니 떡! 하고 나온녀석 OTL

Getting a text node from the table

This example introduces two new DOM attributes. First it uses the childNodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use [x] method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the <body> element.

If your object is a text node, you can use the data attribute and retrieve the text content of the node.
mybody      = document.getElementsByTagName("body")[0];
mytable = mybody.getElementsByTagName("table")[0];
mytablebody = mytable.getElementsByTagName("tbody")[0];
myrow = mytablebody.getElementsByTagName("tr")[1];
mycel = myrow.getElementsByTagName("td")[1];

// first item element of the childNodes list of mycel
myceltext=mycel.childNodes[0];

// content of currenttext is the data content of myceltext
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);

Getting an attribute value

At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:

mytable.getAttribute("border");

[링크 : https://developer.mozilla.org/en/traversing_an_html_table_with_javascript_and_dom_interfaces]

신고
Posted by 구차니

댓글을 달아 주세요

onload는 페이지가 다 읽혀진뒤에 불리워지는 핸들러이고
onresize는 페이지 크기 조절시
onblur는 특정 컨트롤의 포커스를 잃을시 발동되는(?) 핸들러라고 한다.

onafterprint
onbeforeprint
onbeforeunload
onblur
onerror
onfocus
onhashchange
onhelp
onload
onmessage
onresize
onscroll
onunload

2010/07/20 - [Programming/Javascript] - javascript 객체출력

[링크 : http://koxo.com/lang/js/event/jsList.html]
    [링크 : http://koxo.com/lang/js/event/onblur.html]
신고
Posted by 구차니

댓글을 달아 주세요

  1. 예전에 MFC 이용해서 위 함수들 이용해가지고, 매크로 프로그램 여럿 만들었었죠.
    ㅋㅋㅋㅋ

    2010.07.29 08:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 이거슨 Javascript 입니다 ㅋㅋㅋ
      아 티스님에게도 언넝 사사를 받아야 하는데 말이죠
      언넝 밥사주세요! ㅋ

      2010.07.29 09:35 신고 [ ADDR : EDIT/ DEL ]

자바 스크립트 관련 책을 보다보니
innerHTML은 브라우저 별로 지원은 하지만, 웹 표준은 아니므로 DOM 관련 함수를 쓰라고 추천하고 있다.
하지만 막상 검색을 해보니, 성능측면에서 DOM 보다는 innerHTML을 추천하는 내용들이 많이 나온다.

아무튼,
"대규모로 조작을 해야 한다면 innerHTML에 한번에 업데이트 하는 것도 고려할만 하다.
하지만 내용이 많지 않을경우에는 DOM을 하는것이 좋다."
라는 것이 결론.

[링크 : http://forums.mozilla.or.kr/viewtopic.php?p=32382]
[링크 : http://firejune.com/976&stag=innerHTML]
[링크 : http://trend21c.tistory.com/929]
신고
Posted by 구차니

댓글을 달아 주세요

  1. html5

    DOM 레벨 3에서 표준은 아니었지만 모든 브라우저에서 제공하고 일반적으로 사용했습니다.
    그런데. HTML5에서 표준으로 제정되었습니다.

    2010.07.29 18:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 준 표준으로 사용되다가 결국에는 표준이 되었군요 ㅎ
      좋은정보 감사합니다~

      2010.07.29 19:27 신고 [ ADDR : EDIT/ DEL ]

getElementaryByTagName() 함수를 사용하면 HTML DOM 에서 특정 tag에 대해서 받아올수 있다.
그리고 이 함수는 NodeList 를 돌려준다.
NodeList는 Node의 배열도 아니고 먼가 희한한 방법으로 접근을 한다.

x = document.getElementsByTagName("td");
document.write(x.item(i).nodeName);

이렇게 하면 TD 태그로 받아왔으므로, nodeName은 TD가 리턴된다.
한글2010 에서 작성한 표는 <P> 태그로 쌓여 있는데 그런 이유로 NULL 값이 나오는것으로 생각된다.

더보기


신고
Posted by 구차니

댓글을 달아 주세요

가장 많이 쓰이는 녀석같은데 은근히 쓰기가 까다롭다 ㄱ-

Syntax
window.open(URL,name,specs,replace)

[링크 : http://www.w3schools.com/jsref/met_win_open.asp]
위에 이름은 그냥 이름이고, 새로열린 창 내에서의 식별 번호이다.
즉, parent 가 되는 쪽에서는 name 으로 제어를 할수없다.

Wremote = window.open('', 'YourRemote', szoptions);
if(Wremote != null)
{
  if(Wremote.opener == null)
  {
    Wremote.opener = self;
  };
  Wremote.location.href = 'example6-remote.htm';
};

[링크 : http://www.chipchapin.com/WebTools/JavaScript/index.html]
    [링크 : http://www.chipchapin.com/WebTools/JavaScript/example2-01.html]

만약에 제어를 해야 한다면,
위와 같이 창이름을 변수로 주고 windows.open() 메소드의 return 값을 저장하면 된다.


Definition and Usage

The opener property returns a reference to the window that created the window.
When opening a window with window.open(), you can use this property from the destination window to return details of the source (parent) window.
Coding Tip: window.opener.close() will close the source (parent) window.

[링크 : http://www.w3schools.com/jsref/prop_win_opener.asp]
이 값이 parent 윈도우의 값을 지정해주는 것으로 생각된다.
신고
Posted by 구차니

댓글을 달아 주세요

  1. 으악. 보면 볼수록 어려운 글

    2010.07.27 11:30 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 저도 요즘 인터넷 html 이나 css 공부 좀 해보려구요..
    자바스크립트는 엄두도 못내겠지만.. 어려워요..

    2010.07.27 12:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • C언어를 아신다면 그리 어렵지는 않을꺼 같은데요 ^^;

      2010.07.27 15:27 신고 [ ADDR : EDIT/ DEL ]
    • 헉!! C 언어 말씀하심 미워요..
      저도 관심이 있어 책 한 두 챕터 보다가 포기했더랬습니다. ^^;;

      2010.07.29 04:31 신고 [ ADDR : EDIT/ DEL ]
    • C언어에 부담을 갖지 마세요~
      학점상으로 C만 받으면 되는데요 머 ㅋㅋ (응?)

      요즘에는 Head First Javascript 라는 책을 보고 있는데 이 책이 더 좋은거 같아요 ㅎ

      2010.07.29 09:36 신고 [ ADDR : EDIT/ DEL ]


최상위객체는 window 하나뿐이고, 그 아래에 파생되는 객체들이 존재한다.
하지만 최상위객체 지칭인 "window."를 생략하고 사용하므로 얼핏보기에는
총 6개의 최상위객체가 있는 것으로 생각될수도 있다.

Browser Objects Reference

The references describe the properties and methods of each object, along with examples.


[링크 : http://www.w3schools.com/jsref/default.asp]

Window Object Properties

Property Description
document Returns the Document object for the window (See Document object)
history Returns the History object for the window (See History object)
location Returns the Location object for the window (See Location object)
navigator Returns the Navigator object for the window (See Navigator object)
screen Returns the Screen object for the window (See Screen object)

[링크 : http://www.w3schools.com/jsref/obj_window.asp]


신고
Posted by 구차니

댓글을 달아 주세요

document.keydown 이라는 녀석에 등록을 하면
이벤트 핸들러로 등록이 되어 후킹을 하는 것으로 보인다.

function processShortcut(event) {
            if (isIE)
        {
            event = window.event;
            event.target = event.srcElement;
        }
   
        if (event.altKey || event.ctrlKey)
            return;
        switch (event.target.nodeName) {
            case "INPUT":
            case "SELECT":
            case "TEXTAREA":
                return;
        }
        switch (event.keyCode) {
            case 81: //Q

                window.location = "/admin";
                break;
            case 83: //S
                window.location = "?page=2";
                break;
            case 90: //Z
                window.location = "#recentEntries";
                break;
            case 88: //X
                window.location = "#recentComments";
                break;
            case 67: //C
                window.location = "#recentTrackback";
                break;
        }
    }
    document.onkeydown = processShortcut;



2010.07.27 추가
테스트를 해보니 무조건 대문자로 받아들이고, 'Q' 나 'q' 이런식의 값은 인식을 못하는 것으로 보인다.
괜히 위에 case 81: 이런식으로 한게 아니구나 ㅠ.ㅠ
신고
Posted by 구차니

댓글을 달아 주세요

2010/07/23 - [Programming/Javascript] - javascript / XML - XMLHttpRequest

XML이 파일을 기술하는 형태등이라면 DOM은 그러한 데이터를 조작하는 방법을 의미한다.
DOM은 XML 파일에 대해서도 사용이 가능하고
HTML 파일에 대해서도 tree 구조로 navigation이 가능하다.

그러고 보니.. 이녀석을 이용하면 예전에 완전 생 노가다로 했던
웹에서 특정 셀의 자료들만 긁어오기를 자동화 시킬수 있을 것으로 보인다.
(satcodx.com 에서 주파수/심볼/polarization 을 자동으로 긁어오기 라던가?)

[링크 : http://www.w3.org/TR/#tr_DOM]
    [링크 : http://www.w3.org/TR/DOM-Level-2-Core/core.html]
[링크 : https://developer.mozilla.org/Special:Tags?tag=DOM&language=en]
    [링크 : https://developer.mozilla.org/en/document.getElementsByName]
    [링크 : https://developer.mozilla.org/en/document.getElementById]

신고
Posted by 구차니

댓글을 달아 주세요

XMLHttpRequest() 는 XML 파서를 생성하는 자바스크립트 함수이다.
동기/비동기로 작동을 시킬수 있으며 동기로 작동하면 순간적으로 UI가 멈추니 쓰지 말란다~

기본 사용

XMLHttpRequest의 사용법은 아주 간단합니다. 이 개체의 인스턴스를 만들고, URL을 열고, 요청을 보내면 됩니다. 그 후에는 인스턴스의 결과 문서와 HTTP 상태 코드를 사용할 수 있게됩니다.

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false);
req.send(null);
if(req.status == 200)
dump(req.responseText);
참고: 이 예제는 동기적으로 동작하므로 이 함수를 JavaScript에서 호출하면 UI가 멈춥니다. 실제 제품 코드에서는 이 코드를 사용하지 마십시오.

[링크 : https://developer.mozilla.org/ko/XMLHttpRequest]

누가 머래도 원본(?)이 장땡
[NoInterfaceObject]
interface XMLHttpRequestEventTarget : EventTarget {
// for future use
};

[Constructor]
interface XMLHttpRequest : XMLHttpRequestEventTarget {
// event handler attributes
attribute Function onreadystatechange;

// states
const unsigned short UNSENT = 0;
const unsigned short OPENED = 1;
const unsigned short HEADERS_RECEIVED = 2;
const unsigned short LOADING = 3;
const unsigned short DONE = 4;
readonly attribute unsigned short readyState;

// request
void open(DOMString method, DOMString url);
void open(DOMString method, DOMString url, boolean async);
void open(DOMString method, DOMString url, boolean async, DOMString? user);
void open(DOMString method, DOMString url, boolean async, DOMString? user, DOMString? password);
void setRequestHeader(DOMString header, DOMString value);
void send();
void send(Document data);
void send([AllowAny] DOMString? data);
void abort();

// response
readonly attribute unsigned short status;
readonly attribute DOMString statusText;
DOMString getResponseHeader(DOMString header);
DOMString getAllResponseHeaders();
readonly attribute DOMString responseText;
readonly attribute Document responseXML;
};

[링크 : http://www.w3.org/TR/XMLHttpRequest/]

신고

'Programming > Javascript / HTML' 카테고리의 다른 글

javascript - scope (var keyword)  (2) 2010.07.23
javascript / DOM - document.getelementbyid  (0) 2010.07.23
javascript / XML - XMLHttpRequest  (2) 2010.07.23
javascript - alert() confirm() prompt()  (6) 2010.07.20
javascript 객체출력  (8) 2010.07.20
javascript - for / for .. in  (0) 2010.07.18
Posted by 구차니

댓글을 달아 주세요

  1. 홋 Ajax의 시발점을 맛보고 계시군요~. 정말 열공이세요~

    2010.07.25 19:24 신고 [ ADDR : EDIT/ DEL : REPLY ]