'Prototype'에 해당되는 글 1건

  1. 2007.01.31 Construction of Prototype Framework Library
AllAcc?ess2007. 1. 31. 03:52

web2.0이라는 말이 orelly의 blog post의 word로 쓰이고 난뒤 web은 시대의 전환기를 지나고 있다

새롭게 만들어지는 webpage의 DTD는 XHTML 1.1이로 바뀌고 있으며 비동기 통신으로 나온 AJAX이 이 광풍의 MAIN_POINT로 focus되고 있다..

A-JAX [Javascript + XML] 의 DOM 객체로 XHTML이 일상화 되면서 새로운 web개발자들은 AJAX에 중심을 두고 있으며 그로 인해 JAVASCRIPT와 XML이 필요가 아니라 필수 교과목으로 되어 버렸다.

web2.0이란 이렇게 만들어지고 있는가? online을 offline처럼 느끼게 만드는 인터페이스를 지니고는 web은 변신중이다..

그중에서 Prototype Framework Library로 불리우는 Javascript framework가 많은 개발자들로 부터 관심을 받고 있으며 이를 해석하고 사용하기 위한 해석을 하기 위해 본인도 집중하고 있기는 하다.

흥미롭다는 표현을 나타내고 싶다..

이러다 Prototype이 하나의 새로운 언어로 태어나게 되어버리는건 아닌..

html 3.1에서 부터 script가 들어가면서 다이나믹이란 이름이 나오기 시작했는데 그저 client 언어라는 이유로 어플리케이션에선 외면되었다..

허나 지금은 어플리케이션의 가장 중심이 script가 되어버렸으며 script method의 개발이 또다른 동작과 더 크게는 인터페이스마저 만들어 내게 되었다.

다이나믹한 page submit button은 사라져야하며 event로 data전송을 시켜야하는 시대..
필인도 처음 AJAX을 경험하고 기능을 구현하면서 느끼는 것이 submit button의 필요성이다..

form 의 post 나 get 이나 submit으로 server에게 postBack해주어야 안심이 되었던 시대..

이젠 form내 전송되는 data의 채팅같은 통신이 되어야 안심이 되는시대로 변화한다.

submit 버튼은 사라져야 하는가 일명 새로고침이라는 페이지 reload가 일어나는 짧은 시간을 참을수 없어 이러는건가

submit버튼을 사용해도 form에서 onsubmit event를 이용해서 send()를 호출해도 비동기 통신과 같은 느낌을 줄수 있는대

<script language=javascript>

var Post_send = create_request();

function create_request() {
    var request = null;
    try {
        request = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            request = new ActiveXObject("Msxml12.XMLHTTP");
        } catch (othermicrosoft) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                request = null;
            }
        }
    }
    if (request == null)
        alert("Error creating request object!");
    else
        return request;
}
function send() {
    var val = document.getElementById("name");
    var val2 = document.getElementById("option");
    send = "name=" + val;
    send = "&option=" + val2;

    Post_send.open("POST", "update.html", true);
    Post_send.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    Post_send.send(send);
}
</script>

<form name="form" method="post">
<input type=text size=10 name=name value='messagein'>
<input type=text size=10 name=option value='what_s message'>
<input type=button value=전송 onclick=send()>
</form>

ASP.NET을 하면서 되도록이면 서버컨트롤을 사용하지 않으려 노력하고있는데 이는 서버에 무리를 조금이라도 덜기 위해서 였다..

그렇다면 비동기 통신은 어떻게 되는 것일까 사용자 SCRIPT를 사용하니 성능은 오직 client의 컴퓨터 성능에 달린걸까? 아니면 수만의 client와 채팅을 해야하는 server에 있는걸까?

어찌 되었든 다이나믹과 하나의 페이지에서 모든걸 다할수 있다면 사용자 입장에서 편리하다면 개발자들이 마다할수가 없지 않는가?

어찌되었던 다시 Prototype으로 돌아오면 framework라는 말이 실감 날만큼 정교하지만 헛점도 따르며 공개되는 library에 목메게되고 소스를 뒤집어 업으면서 추가하는 method들에 눈이 빠진다.

우선 처음 Prototype 을 접하고 소스를 보았을때 이게 뭐가 했다.. 소스의 구조가 내가 알고 있는 javascript와는 틀렸다.. 조금씩들어오는 method와 연산자 object property 들이 알수 없는 연사자($)와 대입자 ( : = { } )의 나열이 였다.. 그런대 그건 필인이
JSON을 알지 못했기 때문이다.

JSON 구조로 살펴보고 이해하면서 Prototype script를 조금씩 이해할수 있었다..

name : value 의 쌍으로 이루어진 collection 타입 : {}, [] 들의 node 구조들 엄청나게 복잡한 Array.method들 apply, arguments,push,shift,concat의 기능함수와 호출함수들의 얽힘들...

그리고 이어지는 script.aculo.us effects.js ... WoW OTL이다.

Dom의 XPath 는 둘째 치고 $ <= 이 method인지 컨트롤인지 모를 개체는 무엇인가?

난 무식하게
function $(ID)
{
var obj =document.getElementById(ID);
return objj;
}
를 만들었다..

근데 $이게 이처럼 단순한게 아니라는 것을 알수 있었다..

내가 만든 함수는 단일요소 만들 가질수 있지만 $()함수는 다중요소를 함수안으로 가지고 올수있다.

그런데 아무리 찾아봐도 $()method는 찾을수 없었다.. 검색으로 보두 뒤졌는데..

어떻게 $()함수가 만들어지는 것인가?...


Posted by aspirinirony