Programming/javascript & HTML2010. 8. 19. 22:56

javascript - DOM inspector in Firefox

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/] << 부가기능 페이지

'Programming > javascript & HTML' 카테고리의 다른 글

div 태그  (0) 2015.09.08
javascript closure  (0) 2013.01.07
HTML의 style="filter:filter_name()"  (0) 2010.08.06
javascript - Traversing an HTML table with JavaScript and DOM Interfaces  (0) 2010.08.02
javascript - IE8 의 window의 on methods  (2) 2010.07.29
Posted by 구차니
Programming/javascript & HTML2010. 8. 2. 23:01

javascript - Traversing an HTML table with JavaScript and DOM Interfaces

한참을 고심하다가, 검색어를 바꾸니 떡! 하고 나온녀석 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]

'Programming > javascript & HTML' 카테고리의 다른 글

javascript - DOM inspector in Firefox  (0) 2010.08.19
HTML의 style="filter:filter_name()"  (0) 2010.08.06
javascript - IE8 의 window의 on methods  (2) 2010.07.29
javascript - innerHTML은 웹표준이 아니라고?  (2) 2010.07.29
javascript - getElementsByTagName()  (0) 2010.07.27
Posted by 구차니
Programming/javascript & HTML2010. 7. 27. 01:55

자바스크립트 - 새창 만들기

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

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 윈도우의 값을 지정해주는 것으로 생각된다.

'Programming > javascript & HTML' 카테고리의 다른 글

javascript - innerHTML은 웹표준이 아니라고?  (2) 2010.07.29
javascript - getElementsByTagName()  (0) 2010.07.27
자바스크립트 객체목록  (0) 2010.07.27
티스토리 단축키 관련 javascript  (0) 2010.07.24
javascript - scope (var keyword)  (2) 2010.07.23
Posted by 구차니
Programming/javascript & HTML2010. 7. 27. 01:15

자바스크립트 객체목록


최상위객체는 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]


'Programming > javascript & HTML' 카테고리의 다른 글

javascript - getElementsByTagName()  (0) 2010.07.27
자바스크립트 - 새창 만들기  (6) 2010.07.27
티스토리 단축키 관련 javascript  (0) 2010.07.24
javascript - scope (var keyword)  (2) 2010.07.23
javascript / DOM - document.getelementbyid  (0) 2010.07.23
Posted by 구차니
Programming/javascript & HTML2010. 7. 24. 20:48

티스토리 단축키 관련 javascript

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: 이런식으로 한게 아니구나 ㅠ.ㅠ

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 - 새창 만들기  (6) 2010.07.27
자바스크립트 객체목록  (0) 2010.07.27
javascript - scope (var keyword)  (2) 2010.07.23
javascript / DOM - document.getelementbyid  (0) 2010.07.23
javascript / XML - XMLHttpRequest  (2) 2010.07.23
Posted by 구차니
Programming/javascript & HTML2010. 7. 23. 20:55

javascript - scope (var keyword)

자바스크립트를 공부하면서 가장 헷갈리고 있는 부분이 바로 'var' 키워드이다.
어디서는
 var 변수=값;
라고 선언하고, 어디서는
 변수=값;
이라고만 선언하는데, C언어적인 관점에서는 도무지 있을수 없는 녀석이라 혼돈을 더해주고만 있어서
검색을 해보지만 이렇다 할 레퍼런스를 찾지는 못했다.

간략하게만 정리하자면
1. var 를 붙이지 않으면 자동으로 "전역변수"로 선언되며
   var 를 붙이지 않은 변수는 window 오브젝트(혹은 컨텍스트?)에 선언된다.
2. javascript 는 dynamic scope 이기 때문에 함수에서 변수를 사용시에는
  함수가 어디에 선언되었냐 보다는, 어디에서 함수가 불려지냐는 "문맥(context)"가 중요해 진다고 한다.
3. 그리고 var로 선언한 변수는 delete 키워드로 메모리를 해제할수 없다.

아무튼 ECMA 표준을 보던가 해서 명확하게 좀 찾아볼 필요가 있어 보인다.


[링크 : https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference:Functions]

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 객체목록  (0) 2010.07.27
티스토리 단축키 관련 javascript  (0) 2010.07.24
javascript / DOM - document.getelementbyid  (0) 2010.07.23
javascript / XML - XMLHttpRequest  (2) 2010.07.23
javascript - alert() confirm() prompt()  (6) 2010.07.20
Posted by 구차니
Programming/javascript & HTML2010. 7. 18. 02:01

javascript - for / for .. in

자바는 특이하게도
c언어 타입(컴파일러 언어 계열)의 for 문과
python 타입(인터프리터 언어 계열)의 for문을 지원한다.

c언어 타입의 for문
for ([initial-expression]; [condition]; [final-expression])
   statement

[링크 : https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Statements/for]

python 타입의 for..in 문
for (variable in object)
  statement

[링크 : https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Statements/for...in]


아래의 소스는 아직 문제가 있어 전체의 객체에 대해 출력을 하지 못한다. (참고용으로만 사용)
소스 결과
<html>
<script type="text/javascript">
document.write("<hr><H1>window</H1>");
for (i in window)
{
  if(typeof(window[i]) == 'object')
        document.write("<B>",i,"</B><br>");
  else  document.write(window[i], "<br>");
}
</script>
</html>

window

function getInterface() { [native code] }
window
document
navigator
netscape
function XPCSafeJSObjectWrapper() { [native code] }
function XPCNativeWrapper() { [native code] }
Components


'Programming > javascript & HTML' 카테고리의 다른 글

javascript - alert() confirm() prompt()  (6) 2010.07.20
javascript 객체출력  (8) 2010.07.20
javascript - 변수 타입  (0) 2010.07.18
javascript template  (0) 2010.07.18
core javascript 문서  (2) 2010.07.18
Posted by 구차니
Programming/javascript & HTML2010. 7. 18. 01:49

javascript - 변수 타입

자바스크립트는 동적변수 타입을 지원한다.

일단은 var var_name; 식으로 선언을 할 수 있지만
선언하지 않고 값을 바로 할당해도 동적으로 타입을 결정하기 때문에 변수 타입은 신경쓰지 않아도 된다.

그래도 변수타입중에 신경을 써야 할 것이
undefined 라는 넘이다. 변수를 만들긴 했지만, 내용을 넣지 않았다면 "undefined"로 출력이 된다.

소스 결과
<html>
<script type="text/javascript">
    var ts;
    document.write(ts);
</script>
</html>		  undefined

굳이 var 라는 키워드를 이용해서 변수를 선언하지 않더라도 사용은 가능하지만
일단 변수를 선언하거나 대입하지도 않고 변수를 출력하려고 하면 에러가 발생한다.

소스 결과
<html>
<script type="text/javascript">
    var ts;
    document.write(ts);
    document.write(tt);
</script>
</html>		  undefined
 오류: tt is not defined
 소스 파일: file:///C:/window.html
 행: 5

undefined 는 일반적인 변수에 대한 값이 없음을 나타내고
true / false 는 수치형으로도 사용이 되지만 원칙적으로는 참/거짓에 대한 논리값을 적용한다.
그리고 null은 대소문자를 구분해야 한다.(null 은 object에 대한 값이다)

The typeof operator is used in either of the following ways:

  1. typeof operand
  2. typeof (operand)

Type Result
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Host object (provided by the JS environment) Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms) "function"
E4X XML object "xml"
E4X XMLList object "xml"
Any other object "object" 

typeof true == 'boolean'

typeof null == 'object'

[링크:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/typeof_Operator]

Logical (Boolean) values, either true or false

null, a special keyword denoting a null value; null is also a primitive value.
Because JavaScript is case-sensitive, null is not the same as Null, NULL, or
any other variant l undefined, a top-level property whose value is undefined; undefined is also a primitive value

Basic Data types


[링크 : https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference]

'Programming > javascript & HTML' 카테고리의 다른 글

javascript 객체출력  (8) 2010.07.20
javascript - for / for .. in  (0) 2010.07.18
javascript template  (0) 2010.07.18
core javascript 문서  (2) 2010.07.18
javascript 관련 링크  (2) 2010.07.18
Posted by 구차니
Programming/javascript & HTML2010. 7. 18. 01:20

javascript template

html 웹 페이지 상에서 자바 스크립트를 사용할때의 템플릿

<html>
<script type="text/javascript">
function function_name(var1, var2)
{
    // statements
}

</script>
</html>


'Programming > javascript & HTML' 카테고리의 다른 글

javascript - for / for .. in  (0) 2010.07.18
javascript - 변수 타입  (0) 2010.07.18
core javascript 문서  (2) 2010.07.18
javascript 관련 링크  (2) 2010.07.18
JSON - JavaScript Object Notation  (2) 2010.06.07
Posted by 구차니
프로그램 사용/expat & XML2010. 7. 13. 00:16

Javascript DOM API / XML

XML을 사용하려면 순수하게 XML만으로 사용하기 보다는
DOM이나 SAX를 사용하게 되는데 DOM은 일반적으로 웹브라우저의 Javascript에서 지원한다.

이래저래 XML을 공부하는 겸 자바 스크립트도 공부를 해야겠다. OTL

[링크 : http://www.gotapi.com/]
[링크 : http://www.w3schools.com/Xml/xml_parser.asp]
[링크 : http://msdn.microsoft.com/en-us/library/aa468547.aspx]
[링크 : http://msdn.microsoft.com/en-us/library/aa286548.aspx]
[링크 : http://krook.org/jsdom/

[링크 : http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf] << Javascript for Acrobat API

'프로그램 사용 > expat & XML' 카테고리의 다른 글

expat 다시 사용..  (0) 2019.06.24
GPX TCX 포맷  (0) 2013.06.22
[해결중] expat 버퍼 관련 문제  (0) 2010.05.25
expat으로 smi 자막파일 파싱은 불가?  (0) 2010.05.03
SAX (Simple API for XML)  (0) 2010.04.23
Posted by 구차니

티스토리툴바