계속 해보도록 하자..
어차피 흘러가는 인생 무엇을 잡는지는 모르지만 안 잡는것 보다는 낫지 않으리?

50---------------------------------------

브라우저와 DOM

1. 브라우저는 화면에 표현된 개체의 형태를 유지한다.
-- 문서개체 모델의 폼 내부
-- 이것은 문서의 자바스크립트 개체처럼 즉시 활용이 가능하다.

2. 자바스크립트 코드로 DOM을 프로그램적으로 수정하는것이 API로 가능하도록 되어있다.

************************

브라우저들은 Html문서가 표현되어진 개체를 유지한다.
그리고 이 개체들은 DOM의 개체들이다.

언급했듯이, 자바스크립트 코드내에는 DOM api들을 통해서 프로그램적으로 Dom에 접근 할수있따. 예를들어, 접근,수정 또는 Dom api들을 통한 노드의 삭제가 가능하다.


51-----------------------------------------

DOM APIs vs. innerHTML
• DOM APIs provide a means for JavaScript code to
navigate/modify the content in a page
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody,
userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}

*********************************************

우리가 이야기 했듯이, DOM api들은 당신이 페이지의 내용을 제어하거나, 수정하도록 하는 방법들을 제공하고 있다.

슬라이드내의 DOM api들이 사용되어지고 있는 코드를 예제로 볼수 있다.


52----------------------------------------------

DOM APIs vs. innerHTML
• Using innerHTML is easier: Sets or retrieves the HTML
between the start and end tags of the object
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
userMessageElement.innerHTML = messageText;
}

****************************************************8

innerHtml의 사용법은 DOM api들보다 정의하는것 또는 노드의 태그 시작과 끝 사이의 html코드의 조각들 속에서 찾는것을 사용하는것이 쉽다.

이 예제속에는 userMessageElemnet의 innerHtml 속성의 정의,
usermessageelemnet 노드의 시작과 끝 태그 사이부분의 조각의 html 코드,
당신은 text node를 할당할것이다.


원문을 참고삼아 올려둔다.. 아무래도 매끄럽지 않다.

Usage of innerHTML is easier than using DOM APIs for setting or
retrieving the html code fragment between the starting and ending
tags of a node.
In this example, by setting the innerHTML property of the
userMessageElement, the html code fragment between the starting
and ending tag of the userMessageElement node, you are assigning
the text node.


53-----------------------------------------------

9. AJAX Security

***********************************************'

자. 보안은 어떨까?

54-------------------------------------------------

Ajax 보안 : 서버

1. Ajax-based web application 은 일반적인 구조의 웹 프로그램의 보안과 동일하다
- 당신이 특별한 권한자, 관리, 그리고 당신의 web.xml 파일(declareative) 또는 당신의 프로그램들(프로그램적으로) 데이타의 보호 요구들

2. Ajax-based web applications 은 일반적인 웹 프로그램와 마찬가지의 보안 우려성의 주제가 동일하다.
- > Cross-site scripting
- > Injection flaw


************************************************************

Ajax 웹 프로그램의 보안에 대해서, 그것들은 일반적인 웹 프로그램의 구조형태의 보안방법과 같은 형태를 사용한다. 다른말로 당신의 특별한 권한, 관리자, 그리고 web.xml 내에 데이타의 보호 요구들 또는 코드로 보안 체크를 실행하거나 하는것들이 일반적 웹 프로그램과 같다.


그리고 어떤 Http 요청이 클라이언트에서 온다면, 일반적인 웹 프로그램인지 또는 ajax프로그램인지 아닌지, 이것은 서버보안구조로 한정된다.

같은 이치로, Ajax-based applications들은 일반적인 웹 프로그램과 마찬가지의 같은 보안의 우려성이 있다. 예를 들어서 어떤 우려적인 주제의 상세하게 설명하면 cross-site scripting 또는 injection flaw 같은...


55---------------------------------------------------------------

ajax의 보안 : 클라이언트

1. 자바스크립트 코드는 user/hacker가 볼수 있다.
- 해커는 자바스크립트 코드를 사용하여 서버의 약점을 추론할수 있다.

2. 자바스크립트 코드는 서버로부터 다운로드 받으면 그리고 클라이언트에서 실행한다("eval")
- 규정된 코드가 아닌것으로 클라어트를 위태롭게 할수 있다.

3. 자바스크립트 코드를 다운로드 받아진것은 sand-box 보안모델을 강제한다.
- 자바스크립트 표현에 대해 좀더 느슨하게 할수 있다.

*************************************************

자 이제 두서너가지 살펴보자 이것은 ajax프로그램과 일반적인 프로그램들의 클라이언트에서 다른점을 이야기 한다.


첫번째로 자바스크립트 코드는 해커가 볼수 있다. 이것은 누구든지 서버의 약점을 추정할수 있다.

두번째로 자바스크립트 코드의 실행이 클라이언트에서 된다는것이다. 그리고 규정되지는 않은 자바스크립트 코드는 크라이언트를 위태롭게 할수도 있다.


56-----------------------------------------------------

10. JavaScript Development 10. JavaScript Development Tools
(Try these tools with Tools (Try these tools with “AJAX Basics & Dev.
“AJAX Basics & Dev. Tools” Hands-on Lab)

****************

자 이제 개발툴로 우리의 관심을 돌려보도록 하자, 개발툴들은 대부분 클라이언트용이다. 서버쪽 디버깅은 이때까지 한것과 그다지 다르지 않다.



57-----------------------------------------------------

Development Tools for NetBeans IDE
• Building AJAX Applications over NetBeans is not that
much different from building regular Web applications
• NetBeans JavaScript editor plug-in
> http://www.liguorien.com/jseditor/

***************************************************

무엇보다 첫번째로. 내가 말하고자 하는것은 ajax 프로그램의 제작에 있어 NetBeans은 다른 일반적인 제작 프로그램과 그리 다르지 않다.

자바스크립트 에디터 플러그인 Netbeans 이 사용가능하다.



58-----------------------------------------------------

모질라 브라우저상에서의 개발 툴들

1. 모질라 파이어버그 디버그(add-on)
-- 이것은 매우 포괄적이고 가장 쓸만한 자바스크립트 디버거이다.
-- 이 툴은 다른툴의 대부분의 기능이 있으며 또는 더 낫다

2. 모질라 자바스크립트 콘솔
3. 모질라 DOM inspector(파이어 폭스 패기지에 딸려온다.)
4. 모질라 Venkman 자바스크립트 디버거(add-on)
5. 모질라 LiveHTTPheaders Http monior(Netbeans http 모니터와 비슷하다)

******************************************************

가장 일반적이고 그리고 가장 쓸만한 디버거로 모질라 firebug디버거라 생각한다.
이 툴은 다른툴의 대부분의 기능을 제공하면서 더 많은 기능이 있다. Firebug의 특징에 대해서 다음슬라이드에서 더 이야기 하겠다. 대부분의 경우에 파이어버그 디버거는 당신이 사용하길 원하는 그것일것이다.

모질라 클래스 브라우전들은 built-in 자바 콘솔이 함께 있다. 이 DOM inspecotr는 파이이폭스 브라우저를 설치할때 설치되어 있을것이다. 또는 당신이 custom installation할때 선택해야한다.

Venkman 자바스크립트 디버거를 설치할수 있는데 당신의 자바코드를 소스코드레벨에서 디버깅한다, 이것은 거진 몇몇 개발툴에서만 소개한다.

다른툴을 고려한다면 아마도 Netbeans IDE를 사용해 보지 않을것이다. 이것은 이미 LiveHttpHeaders, http traffic을 잡을수 있는 Http monitor를 제공한다.


59-----------------------------------------


모질라 파이어버그 디버거

1. 자바스크립트 디버거는 한번에 한줄씩 실행을 해나간다.
2. 이것은 웹 페이지가 잘못되었을때 상태바의 아이콘이 당신에게 보여진다.
3. console에 자바스크립트 그리고 CSS의 에러가 표시된다.
4. 당신웹페이지가 콘솔에게 자바스크립트의 로그 메세지(bye bye "alert debugging")
5. 자바스크립트 명령 라인(no more "javascript:" in the UrL bar)
6. Xmlhttprequest traffic 의 spy
7. Html 의 소스를 조사, 계산 처리, 이벤트 형태 그리고 DOM

********************************************

이 슬라이드는 모질라 파이어버그 디비거의 특징에 대해서 설명한다.
첫번째로 소스코드레벨에서 한줄씩 실행이 가능하다.

상태바는 당신의 웹페이지가 문제가 있는지 없는지 표현해 준다.
콘솔은 당신의 자바스크립트나 CSS 코드의 구문오류를 표현해 준다.

파이어 버그는 당신의 로그메세지와 그리고 콘솔안에 표현되는것을 가진다.

좋은 특징중 하나는 Xmlhttprequest traffic spy기능이다.
마지막으로 이것은 html소스코드, 스타일, 이벤트, 형태등을 조사하도록 한다.



60--------------------------------------------
11. AJAX: 11. AJAX:
Current Issues & Futures Current Issues & Futures


*****************************************

자 좀더 Ajax의 개발툴과 미래의 방향에 대한 현재의 주제에 대해서 검토해 보도록 하자.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:49:28 Prototype에서 이동 됨]</div>