Ace-T's Blog 내 검색 [네이버 커넥트 이웃 합니다~^-^/ 요청 大 환영~~]

ACE-T's JS Part 04. 익명함수!

Front/JavaScript 2014.07.03 17:31
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

요즘 gis를 하는데 있어서...아래의 형태가 있었습니다. 음..조금 당황 했습니다. ㅋㅋㅋ;; 많이 써보는 형태는 아니였던게죠..ㅠ.ㅠ..

anyways..이제부터 알아가보도록 하겠습니다.^-^

(function(){


})();



참고 사이트  http://www.nextree.co.kr/p4150/    

KSUG 최영목님이 댕기시는 회사에 너무 잘 정리를 해놔서..참고 하였습니다. 넥스트리 화이팅! ㅎㅎ


보통 함수 선언을할 때 아래와 같이 합니다.


이것은 함수 선언식이라고 부릅니다.

function acetBlog(){

   /* 실행코드 */

}


하지만 아래와 같이! 선언할 수 있습니다. 함수 표현식과 즉시실행함수 가 있습니다. 당황하지 마세요! 이제부터 알아가면 되니깐요! ㅎ

함수 정의할 때 “함수는 first-class object이므로 변수에 할당될 수 있다.” 라는 전제 하에 아래와 같이 작성할 수 있습니다.

제가 보았던

(function(){


})();

이친구는 5번 이였군요! ㅎㅎㅎ


왜 이런식으로 작성하는 걸까요???

간단히 생각해보면..

자바스크립트의 동작 아키텍처를 정확히는 모르겠지만 함수선언식과 함수표현식의 큰 차이는??

함수 선언식 :  스크립트 로딩시에 VO에 함수를 저장!

함수 표현식 : 런타임시에 해석되고 실행! VO에 함수 저장 X

um..클락포드 형님 책에 분명히 나왔던 것 같은데...이 내용을 알고 보았다면 더더욱 재밌고 이해가 더 잘되었을 것 같네요 ㅎㅎ

그리고 함수 선언식이 많으면 많을 수록 VO에 함수를 저장하고 하면 처리에서 느려질 것 입니다.


자! 이제 함수 표현식 친구들을 만나보겠습니다.

우선 아래를 읽어 봅시다. 고개를 끄덕끄덕 거리는 모습이 눈에 선하네요~저만 그런가요ㅋㅋ;;

자바스크립트에서 가장 큰 문제점 중의 하나는 글로벌 스코프에 정의된 것은 코드 내의 어디서든지 접근이 가능하다는 것입니다. 하지만, 외부에 공유되면 안되거나 공유될 필요가 없는 속성이나 메소드가 있습니다. 또한, 다른 스크립트 파일 내에서 동일한 이름으로 명명된 변수나 함수가 있을 경우 원치 않는 결과를 가져올 수 있습니다.


우선 코드를 하나 보겠습니다.

결과는 아래와 같습니다.


코드 : 익명 함수표현식(anonymous function expression)

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

var app = function(){


console.log("Hi~~~~test01");

}


app();


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>



즉시 실행함수를 한번 살펴보겠습니다.

결과 test01.html과 같은 결과가 나옵니다. Good!


단, 함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정을 거칩니다.  하지만, 즉시실행함수를 사용하면 이와 같은 과정을 거치지 않고 즉시 실행된다는 특징이 있습니다.


코드 :

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

(

                          function(){

console.log("Hi~~~~test02");

  }()

                        );


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>  



변수를 하나 할당하고 즉시 실행함수를 호출 해보겠습니다.
결과 : 결과는 console에 private라고 찍힙니다.

코드 : 아래의 코드에서 가장 눈여겨 볼 부분은 app.prop 이부분 입니다.  
연결고리들이 보이시나요?  app - prop - privateVar - 'private'

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

var app = (function() {

   

       var privateVar = 'private';

   

       return {

        prop : privateVar

       };


       }());


                       // 함수에 포함되지 X

       console.log(app.prop); // "private" 출력


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>


즉시실행함수 내부의 변수 privateVar를 접근한 것입니다. 자바스크립트의 변수는 함수내의 scope를 가집니다. 그런데 외부에서 접근을 한 것
입니다. 와우!! 아래를 읽어보세요!~~

이와 같이, 즉시실행함수는 변수의 스코프를 포함하는데 사용되며 외부에서 함수 내의 변수에 접근할 경우 이를 통제할 수 있습니다. 즉시실행함수는 글로벌 네임스페이스에 변수를 추가하지 않아도 되기 때문에 코드 충돌이 없이 구현할 수 있어 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.


다음으로는! 기명 함수표현식과 즉시실행 함수에 파라미터 넘겨주기 입니다.


결과 :



코드 :

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

 

                       // 기명 함수표현식

var buyCar = function(carName) {

   // I Buy a sonata1. This is good Car!. 출력

   console.log('I Buy a ' + carName + '. This is good Car!.');

};

buyCar('sonata1');

 

                        // 즉시 실행함수!

(function(carName) {

   // I Buy a sonata2. This is good Car!.출력

   console.log('I Buy a ' + carName + '. This is good Car!.');

}('sonata2'));


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>



마지막으로 오픈소스의 소스 내용을 한번 보겠습니다.

코드 : 아래의 소스는 html에서 <script type="text/javascript" src="./js/Taeha/AcetGISMain.js"></script> 의 내용이라고 가정하면

   jsFiles = [

                "AcetMap.js",

                "GISConstant.js",

                "GISModeState.js"

               

            ]; // etc.


에 원하는 js를 넣어두면 자동으로 js가 선언이 되어집니다. 와우! 유용한 것 같아요! ㅎㅎㅎ 

그리고..소스를 보면 지금까지 배웠던 내용들이 눈에 보이면 OK! 입니다. 

홧팅2


/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for  

* full list of contributors). Published under the 2-clause BSD license.

 * See license.txt in the OpenLayers distribution or repository for the

 * full text of the license. */


/* 

 * @requires OpenLayers/BaseTypes.js

 * @requires OpenLayers/Lang/en.js

 * @requires OpenLayers/Console.js

 */

 

/*

 * TODO: In 3.0, we will stop supporting build profiles that include

 * OpenLayers.js. This means we will not need the singleFile and scriptFile

 * variables, because we don't have to handle the singleFile case any more.

 */


(function() {

    /**

     * Before creating the OpenLayers namespace, check to see if

     * OpenLayers.singleFile is true.  This occurs if the

     * OpenLayers/SingleFile.js script is included before this one - as is the

     * case with old single file build profiles that included both

     * OpenLayers.js and OpenLayers/SingleFile.js.

     */

    var singleFile = false;

    

    /**

     * Relative path of this script.

     */

    var scriptName = "AcetGISMain.js";


    /*

     * If window.OpenLayers isn't set when this script (OpenLayers.js) is

     * evaluated (and if singleFile is false) then this script will load

     * *all* OpenLayers scripts. If window.OpenLayers is set to an array

     * then this script will attempt to load scripts for each string of

     * the array, using the string as the src of the script.

     *

     * Example:

     * (code)

     *     <script type="text/javascript">

     *         window.OpenLayers = [

     *             "OpenLayers/Util.js",

     *             "OpenLayers/BaseTypes.js"

     *         ];

     *     </script>

     *     <script type="text/javascript" src="../lib/OpenLayers.js"></script>

     * (end)

     * In this example OpenLayers.js will load Util.js and BaseTypes.js only.

     */

    var jsFiles = null;


    var getBitGISScriptLocation = function(){

        var r = new RegExp("(^|(.*?\\/))(" + scriptName + ")(\\?|$)"),

                s = document.getElementsByTagName('script'),

                src, m, l = "";

            for(var i=0, len=s.length; i<len; i++) {

                src = s[i].getAttribute('src');

                if(src) {

                    m = src.match(r);

                    if(m) {

                        l = m[1];

                        break;

                    }

                }

            }


            return l;


    }


    


    /**

     * OpenLayers.singleFile is a flag indicating this file is being included

     * in a Single File Library build of the OpenLayers Library.

     * 

     * When we are *not* part of a SFL build we dynamically include the

     * OpenLayers library code.

     * 

     * When we *are* part of a SFL build we do not dynamically include the 

     * OpenLayers library code as it will be appended at the end of this file.

     */

    if(!singleFile) {

        if (!jsFiles) {

            jsFiles = [

                "AcetMap.js",

                "GISConstant.js",

                "GISModeState.js"

               

            ]; // etc.

        }


        // use "parser-inserted scripts" for guaranteed execution order

        // http://hsivonen.iki.fi/script-execution/

        var scriptTags = new Array(jsFiles.length);

        var host = getBitGISScriptLocation() + "lib/";

        for (var i=0, len=jsFiles.length; i<len; i++) {

            scriptTags[i] = "<script src='" + host + jsFiles[i] +

                                   "'></script>"; 

        }

        if (scriptTags.length > 0) {

            document.write(scriptTags.join(""));

        }

    }

})();



이제 궁금증이 풀렸으니 소스를 보러~~여기 까지 포스팅 합니다! ㅎㅎ 다음에 또 만나요! 더 자세한 내용은 넥스트리를 방문해주세요^0^

이 포스팅은 자바스크립트 제대로 배우기 커뮤니티에 올라갑니다.

 https://www.facebook.com/groups/learnjsproperly/


참고 :


2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??


2014/05/08 - [Script/JavaScript] - ACE-T's JS_Part 02. Style과 Event 다루기!!


2014/05/10 - [Script/JavaScript] - ACE-T's JS Part 03. Jquery 기초를 배워봅시다!


    - END -

저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS Part 03. Jquery 기초를 배워봅시다!

Front/JavaScript 2014.05.10 14:45
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??


2014/05/08 - [Script/JavaScript] - ACE-T's JS_Part 02. Style과 Event 다루기!!


오늘은 어제 적용해본 Jquery에 대해서 간단히 설명 하려고 합니다 ㅎㅎ


<< 전체 화면 >>




하나하나씩 적용한 내용을 살펴 보도록 하겠습니다!~


Result  : Jquery로 CSS변경 해보기


UI source




JS source

$(document).ready(function(){                         // DOM 생성이 완료 되면 실행.

 

     // CSS 변경해보기!!

$('#study').css('background','pink');            // $('')라는 것으로  Jquery object화 하는 것 입니다.

$('#develop').css('background','yellow');    // 또한 매개변수로는 #이면 id, .이면 class, 그냥이면 element

$('#result').css('background','skyblue');     // .css() 를 통해 css의 내용들을 바꾼다는 내용입니다.  

    
     // 여러가지 테스트 흔적..ㅋㅋ
     //$('body ul #notice').hide();            // body 찾고 자식셀렉터인 ul 찾고 #notice, 즉 id가 notice를 찾습니다.  

//var home = $('div ul');                   // 변수에 대입도 가능 합니다.  var 변수 = $(''); - jquery 객체

//home.find('#fCome').hide();         // .hide()는 뜻그대로 숨기는 기능 입니다. .show()도 있겠죵!

//$('.tab-pane').hide();






    Result : Jquery로 이미지 조정 해보기



UI Source



JS Source

var imgAttr1 = $('.carousel-inner #img1');  // 이것 또한 class찾고 id가 img1인 것을 찾습니다.

var imgAttr2 = $('.carousel-inner #img2');

var imgAttr3 = $('.carousel-inner #img3');

imgAttr1.width('1050px');        // width는 가로, height는 세로 크기 조절!

imgAttr1.height('350px');

imgAttr2.width('1050px');

imgAttr2.height('450px');

imgAttr3.width('1050px');

imgAttr3.height('550px');






Result



UI Source



JS Source

/* facebookLink */

//$('#facebookLink').fadeIn();        // 없던 것이 보이게!

$('#facebookLink').slideDown();   // 없던 것이 보이게!






Result - Jquery를 사용한 애니메이션 효과



UI Source




JS Source

// 애니메이션 효과 입니다. 날아오기!!

var div1=$('#div1');

div1.animate({            // 애니메이션 효과!   0,0 에서 300, 300으로 이동하게 된다.

top: 300,

left: 300

},1000);                      // 빠르기 지정

div1.slideUp(2000);   // 있던 것이 사라지게!


//$('#div1').text('말만? NO!, 생각만? NO!!'); // 텍스트가 교체! html()도 있다!

//$('#div1').empty();  // div는 남아있지만 텍스트는 사라진다.

//$('.carousel-inner #attrTest').attr('src', 'resources/img/acet.png'); // 요소의 속성값을 변경하는 메소드!






Result - Jquery를 이용한 이벤트


검색 버튼 눌렀을 경우


마우스를 가져다 댈 경우


커서가 있을 경우



UI Source




JS Source

//$('#searchInput').val('검색할 키워드를 넣어주세요!');

     var searchInput=$('#searchInput');    // 변수로 저장, id가 searchInput인 input box

searchInput.width('20em');                 // 길이 조정


/***** EVENT ******/

// click

var searchBtn = $('#searchBtn');

   searchBtn.click(function(){               // click event는 간단히  click()를 사용하면 된다.

   //$('#searchInput').empty();

   alert("click 되었습니다.");

});



// mouseenter, mouseleave

searchInput.mouseenter(function(){      // 마우스를 가져다 대었을 때

   searchInput.val('검색할 키워드를 넣어주세요!');

});


    searchInput.mouseleave(function(){      // 마우스를 띄었을 때

    searchInput.val('');  // empty()가 안먹힘;;

    //$('#searchInput').val('검색할 키워드를 넣어주세요!');

});

    

    

   // focus, blur

    searchInput.focus(function(){            // 마우스 커서

       searchInput.val(''); // empty();

    });

    

    

});






저번 시간에 한번 해봐야겠다던 그 이벤트!

um..자바스크립트쪽은 따로 더 공부를 하면서 정리하도록 하겠습니다^^

// 사용자 이벤트 테스트 

/*window.onload=function(){

   var sBtn = window.document.getElementById("searchBtn");

   sBtn.addEventListener("click", function(e){

  // 1. 이벤트 생성

  var myEvent = document.createEvent("Event");


  // 2. 이벤트 객체에 이벤트와 함께 담아 보낼 데이터 추

  myEvent.data1 ="Sorry Not yet..Support! 검색은 루씬 검색엔진으로 할 예정 입니다!";


  // 3. 이벤트 초기화

  myEvent.initEvent("myEvent", false, false);


  // 4. 이벤트 발생

  sBtn.dispatchEvent(myEvent);    

   });

   

   sBtn.addEventListener("myEvent", function(e){

       alert("검색은..!, target ="+e.target.id+", data1 ="+e.data1);


    });

}*/


<< 소스 파일 >>


변수로 뺀 js

mainPage.js


변수로 빼지 않고 일일이 $('')로 한 소스

old_mainPage.js


mainPage.css



<< 참고 사항 >> - 친구가 제공!

더보기



끝으로 자바스크립에서의 DOM접근을 구현해보다가 Jquery를 통해 접근을 해보니 정말 간단하고 쉬운것을 알 수가 있었습니다.

기초적인 것만으로도 간단히 사이트를 꾸며 볼수 있었던 것 같습니다.

차근차근 하나씩 해봐야겠네요^-^/


facebook group - javascript 제대로 배우기에 올리는 글 입니다.

감사합니다.


                 - END -

저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS_Part 02. Style과 Event 다루기!!

Front/JavaScript 2014.05.08 01:16
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


<< 이전 글 >>

2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??



ACE-T's JS_Part 02. Style과 Event 다루기!!


1) Style 다루기

    태그 엘리먼트에 Style 적용하는 방법은 2가지가 있습니다.

    - CSS 구문으로 다양한 스타일 속성을 구룹(선택자)으로 만들어 스타일을 적용하는 방법

      (내부/외부 스타일 정의 모두 포함)

    - 엘리먼트에 직접 스타일 속성을 작성하는 방법(인라인 스타일)



2) Event 다루기

   자바스크립트에서..이벤트 정말 중요하죠~!! ㅎㅎ;

   먼저 종류부터 알아보도록 하겠습니다!^-^

   (1) 마우스 이벤트 : 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트

   (2) 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트

   (3) 엘리먼트 고유 이벤트 : 엘리먼트마다 발생하는 고유의 이벤트, 예로 <img>엘리먼트의 경우 이미지가 모두 로드되면

       onload 이벤트가 발생해서 이미지가 성공적으로 로드됐음을 알리며, input 엘리먼트의 경우 입력한 정보가 바뀌면    

       onchange 이벤트가 발생해서 입력 정보가 변경됐음을 알립니다.

   (4) 사용자 정의 이벤트 : 주로 개발자가 특정 기능을 수행하는 클래스를 만들고 어떤 작업이 끝났음을 사용자에게 

         알려줄 때  사용되는 이벤트 입니다.


  두번째로는 이벤트 단계에 대해서 알아보도록 하겠습니다!^-^

  이벤트는 크게 3단계에 걸쳐 발생 합니다.

  1) 캡처(Capture)단계

     - 가장 먼저 실행되는 단계로서, document에서 시작해 실제 이벤트를 발생시킨 타켓까지 이동 합니다. 

       이를 캡처링이라고 합니다. 이때 리스너가 등록돼 있다면 등록된 리스너가 바로 실행 됩니다.

  2) 타겟(Target)단계

     - 캡처 단계를 거쳐 실제 이벤트를 발생시킨 타켓에 도착한 상태를 말합니다.

  3) 버블(Bubble)단계

     - 타겟 단계까지 오면 이벤트 흐름은 다시 타겟 단계의 역순으로 움직이기 시작합니다. 이 흐름을 버블링이라고 합니다.

  위의 이벤트 단계에 대해서는 따로 정리를 해둘 필요가 있을 것 같네요. 여기에서는 요기까지만!~


실습을 해보도록 하겠습니다.

1) 리스너 추가하기

     ex_01) DOM Level 0 방식



ex_02) DOM Level 1 방식 : node.js에서도 많이 사용되고 있는 방식이군요!



result> 결과는 ex_01, ex_02 둘다 같은 alert결과이기에 한번만 작성하겠습니다.

click 하였을때의 결과 -일반 함수를 이벤트 리스너로 사용하는 경우

마우스 오버 하였을 때의 결과 - 임의의 함수를 이벤트 리스너로 사용하는 경우



최종 소스 : 

addListener.html

2) 리스너 삭제하기

   등록된 리스너 가운데 사용하지 않는 리스너는 삭제해야 합니다. 

   리스너를 삭제하는 방법 역시 이벤트를 추가할 때처럼 두가지 방식이 있습니다.

   a. DOM Level 0 방식

      ex) 이벤트 리스너를 btn_1.onClick=on_Click처럼 설정 했다면

            이벤트 삭제는 btn_1.onClick=null;

  b. DOM Level 2 방식

      ex) 이벤트 리스너를 btn_1.addEventListener("click", on_click, false)로 등록했다면 

            btn_1.removeEventListener("click", on_click, false); 로 해서 제거할 수 있습니다.

            단, 익명 함수를 만들어서 사용한 경우는 제거할 수 없습니다!!

            또한, IE 9이하 버전에서는 removeEventListener 메소드 대신 detachEvent메소드를 사용해야 합니다.


3) 이벤트 발생 시키기

    btn_1을 눌러서 btn_2를 실행 시켜보는 이벤트! 즉, btn_2를 클릭하지 않았어도 클릭한 것처럼 만들 수 있습니다.

    1. document의 createEvent()를 이용해 발생시키려는 이벤트 객체를 생성

    2. 이벤트와 함께 담아서 보낼 데이터를 이벤트 객체에 추가

    3. 1번에서 생성한 이벤트 객체의 initEvent()를 호출해 이벤트를 초기화

    4. 생성한 이벤트 객체를 dispatchEvent()의 매개변수 값으로 전달해 실행


    <<소 스>>


결과

버튼 1을 눌렀을 때


버튼 2를 눌렀을 때

    

소스파일

eventGenerate.html



4) 사용자 정의 이벤트

  << 소스 >>

결과 


소스파일

userEventGenerate.html


이 내용을 토대로 뭔가 하나 만들어봐야겠네요^-^


P.S Will do!

     1) 이벤트 단계(캡쳐, 타켓, 버블) more Detail~

     2) about DOM Level 0 and 2

     3) 위의 내용을 토대로 하나 만들어보기!


       - END -  

   







   

   


   



저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??

Front/JavaScript 2014.04.24 14:02
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

 

[pic 출처 : http://www.scriptcase.net/blog/javascript-if-else/ ]

 

 

충격적이다..

자바스크립트가 무엇인가에 대해서 자세히 모르고 있었네요..

그래서 알아보려고 합니다..

자바스크립트를 배운다는 것은 무엇인가에 대해서...


큰 구조를 파악 해봅시다.

1) 자바스크립트 Core - 여지껏...이부분만 파니...전체적인 이해가 안갔던 것 같네요..ㅠ. ㅠ

    기본 문법과 구조, 데이터 타입, 조건문(if, switch), 반복문(for, while), 함수(function), 기본 라이브러리(Math, String, Date..) 

2) 자바스크립트(DOM - Document Object Model)

    Element 제어, Style 제어, Attribute 제어, Event 제어를 할 수 있는 기능.   

3) 자바스크립트(BOM - Browser Object Model)

    Window, Navigator, Location, History, Document, Screen 객체가 있음.


DOM이란?

Web page 자체를 손수 편집하지 않고 웹브라우저에 표시된 상태에서 웹페지이의 특정부분을 동적으로 지우거나 다른 내용으로 변경하거나, 또는 글자 색과 글자 크기를 바꾸고 싶을 때, 마우스 올렸을 때 툴팁(말풍선)이 나오게 한다거나 할 때 우리는 모두 DOM의 기능을 활용하게 됩니다.


"DOM은 지켜야 할 약속만 적혀 있는 문서" - Interface(자바 Interface  라고 보면 됨, OOP~!!)


자~인터페이스에 대해서 알아봅시다.

Interface란?

 : 실체가 존재하지 않는 서로 지켜야 할 약속!!~

ex) 이 기기는 220볼트에서만 동작하는 전용 기기입니다.

       이 비디오 카드는 HDMI에서만 동작합니다.


위의 예제처럼 약속? 스펙? 규약? 명세서? 뭐 이런 느낌이라고 보시면 됩니다. 아..아닌가?!! ㅋㅋ;; anyways..

Interface는 IDL(Interface Definition Language)로 작성돼 있습니다.

즉, DOM 문서는 인터페이스 정의 문서(IDL)로 작성 돼 있다고 정도만 아시면 될 것 같습니다.


여기까지..DOM이 무엇이고 어떤 기능이 있는지, 인터페이스는 무엇인지에 대해서 알아보았습니다.


W3C에서 구현하는 소스코드가 없다면 어디에 있는 걸까요??? 어디에서 쓰일까요???

바로!! 브라우저들이 자신들만의 특화된 고유 기술을 이용해 DOM 인터페이스를 구현 합니다.


DOM과 HTML 페이지와의 관계

 : HTML 페이지 로딩 => 파싱 단계를 거쳐 웹페이지에 작성된 태그와 매칭되는 DOM 객체 생성 => 브라우저 화면에 출력


NODE와 DOM 객체와의 관계

 : NODE는 HTML 웹 페이지 구성요소의 가장 작은 단위로, <p>, <div> tag뿐만 아니라 주석도 노드에 해당 됩니다.

   브라우저는 이런 노드로 가득 찬 웹페이지를 읽어들여 해석한 후 각 노드에 접근해 제어할 수 있는 DOM객체를 생성 합니다.


다 정리하기에는 조금 무리가 있네요..^^;

요약하면..Node, Document, HTMLDocument, Element, HTMLElement 등등..서로 가족처럼 상속구조로 이루어져있다.

Node가 짱짱맨!


그리고 노드 다루기에서 배웁니다. 


가장 첫번째는 "노드찾기"  입니다. 


아마도..Jquery의 기능을 구현이 어떤식으로 되었는지 알 수 있을 것 같습니다. 셀렉터였나...anyways..^^;

window.document.getElementsByTagName("div"); 는..NodeList객체로 검색된 모든 노드를 리턴하여 줍니다.

NodeList 객체에서 제공하는 프로퍼티와 메소드는 length와 item() 메서드 둘뿐 입니다.


ex) item() 사용

for(var i=0; i < divs.length; i++){

   var div = divs.item(i);   // item[i] 로도 접근 가능!

  div.style.border = "1px solid #ff0000";  

}


그리고.."특정노드의 자식노드에서 특정 태그 이름을 지닌 노드 찾기"에서는

Document객체의 메소드인 getElementsByTagName() 대신 Element객체의 메소드인 getElementsByTagName()를 사용 합니다. getElementsByTagName..스펠링 같으니 비교하지마세요ㅋㅋㅋ 같은 기능, 반환값도 같음..

즉, 검색대상이 문서냐 아니면 특정 노드냐에 따라 Scope이 완전 달라지니 주의 해야 합니다..^^;

다시 말하면..window.document.getElementsByTagName("div"); 로 접근 한 뒤에

하위에서 다시 찾을 때는 document scope이 아닌 찾은 div(노드)아래에서 찾는 다는 것이다.


그리고.."특정 클래스가 적용된 노드를 찾기" 위해서는 getElementsByClassName를 사용하면 됩니다.

var contentData = window.document.getElementsByClassName("content_data");


그리고.."특정 ID를 지닌 노드 찾기" 위해서는 getElementsById("header"); 를 사용하면 됩니다.

일반적으로 아이디는 문서상에 오직 하나만 존재 합니다.  


노드에는 Node[] childNodes,  

              Node firstChild          : 첫번째 자식 노드에 바로 접근하고 싶을 때

             Node lastChild           : 마지막 자식 노드에 바로 접근 하고 싶을 때 


형제노드를 찾고자 한다면..

             Node nextSilbing

             Node previousSibling


다음편 예고..

  스타일 다루기

  이벤트 다루기


참조 문헌 : Jquery를 활용한 인터랙티브 웹 콘텐츠 제작(기초부터 실전 활용까지) - 저> 김춘경

자바스크립트의 전체적인 것에 대해서 생각해보지 않았던 저에게..신선한 충격을 준 책이네요..^0^/




    - END -





저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

내장함수 confirm Test

Front/JavaScript 2014.03.29 22:55
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

 

 

확인을 누르시면 ^--------------^*

취소를 누르시면 ㅠ____________ㅠ*

가 찍히게 됩니다^-^;;

 

 

<< Source >> 

 <script type=text/javascript>
   cnt=confirm("This homepage is goooddd?");
   if(cnt==true){
     alert("thank you!");
     document.write("^----------------^*");
  }else{
     alert("sorry~~T.T");
     document.write("ㅠ----------------ㅠ*");

 }
</scritp>

confirm는 함수는 위와같이 확인/취소를 나타내는 내장함수 입니다^^;

return은 boolean으로 확인을 누르시면 true! 취소를 누르시면 false가 반환됩니다.

 

그럼 테스트 해보세요~~~


<< 참고 사이트 >>

http://hsjeong106.blog.me



                                   - END -

저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

  • 조춘수 2014.04.14 17:01 신고 답글 | 수정/삭제 | ADDR

    가입 사이트,개설 블로그

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

자바스크립트 함수

Front/JavaScript 2014.03.29 22:39
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

자바스크립트에 대해서 알아 보겠습니다~

특히 함수를 많이 쓰게 되어지는데요 아래와 같이 정의를 통해서 함수의 종류를 알아보고 특히!

사용자 정의 함수에 대해서 소스를 짜보겠습니다.

 

<< 자바스크립트 함수 정의 >>

function 함수이름(매개변수1,매개변수2,매개변수3)
{
  함수에서 처리할 내용
}

<head>와 </head> tag 사이에 정의

함수
 1) 내장함수(built-in function)
   - alert(), prompt() 등
 2) 사용자 정의 함수 

 

<< 자바스크립트 소스 >>

<html>
   <head>
     <script type="text/javascript">
      
        function acet(end){
           alert(end);
           var i,total=0;
           for(i=0; i < end; i++){
              total = total+i;
           }
           return total;
        }

        function acet2(totalVale){
           document.write("==============<br>");
           document.write("= sum=>"+ totalVale+" =");
           document.write("<br>==============");
        }
       
     </script>
   </head>


   <body>
     <script type="text/javascript">
        var val = acet(100);
        acet2(val);

     </script>

   </body>


</html> 

 

 

<< 결과 >>

 

 

 

<< 참고 사이트 >>

http://hsjeong106.blog.me/90173348180

 

<< 참고 소스 >>

매개변수가 없는 함수 소스

 <html>
  <head>
     <script type="text/javascript">
        function acet(){
           alert("한글 : 안녕하세요~~");
           alert("English : hi~~~~~~~");
        }
     </script>
  </head>


  <body>
    <script type="text/javascript">
       acet();
       alert("one more time!");
       acet();
    </script>
  </body>

</html>

 

result

 

 

 

 

 

매개변수가 있는 함수 소스

 <html>
  <head>
     <script type="text/javascript">
        function acet(name, val){
           document.write("["+name+"] sir! "+val+"받으세요!");
           document.write("<br><br>");
        }
     </script>
  </head>


  <body>
     <script type="text/javascript">
        acet("ace-T", "bok");          
        acet("taehaPark", "love");

     </script> 
  </body>


</html>

 

result

 

 

                                                             - END -

 

저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

javascript test

Front/JavaScript 2014.03.18 10:22
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

  • Favicon of http://blog.anyjava.net BlogIcon anyjava 2014.03.18 18:30 신고 답글 | 수정/삭제 | ADDR

    ㅋㅋㅋ 팝업창이 떠서 놀랫구만 ㅎㅎ

    • Favicon of http://acet.pe.kr BlogIcon String Ace-T 2014.03.18 21:16 신고 수정/삭제

      ㅋㅋㅋㅋ맞나?
      요즘 조금씩 가지고 놀고 있어ㅋㅋ

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

티스토리 툴바