javascript 검색 결과

91개 발견
  1. 미리보기
    2016.04.01 - Palpit

    [AngularJS] 6. 모듈(Module) - AngularJS 강좌

  2. 미리보기
    2016.04.01 - Palpit

    [AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌

  3. 미리보기
    2015.11.20 - Palpit

    [AngularJS] 13.5 API - AngularJS 강좌

  4. 미리보기
    2015.07.07 - Palpit

    [WebPage] 실전 웹 프로젝트 구축 !!(실전 예제) - 웹 페이지 제작 강좌

  5. 미리보기
    2015.07.07 - Palpit

    [WebPage] 4. 웹 프로그래밍의 필수요소, JavaScript와 jQuery - 웹 페이지 제작 강좌

  6. 미리보기
    2015.06.13 - Palpit

    [javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSE

  7. 미리보기
    2015.06.13 - Palpit

    [javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSE

  8. 미리보기
    2015.06.13 - Palpit

    [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE

조회수 확인

모듈(Module)

 모듈은 대체로 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고 재사용성을 높이기 위해 사용합니다.


 최근에 자바스크립트에서는 코드의 복잡도를 낮추기 위해 많은 자바스크립트 라이브러리를 모듈화할 필요성이 생겼고, 모듈을 이용한 개발이 거의 필수가 되었습니다. jQuery 와 같은 많은 라이브러리는 모듈 패턴을 이용해 모듈로 구현되었고 많은 웹 앱 또한 모듈 패턴을 이용해 개발되었습니다.


 AJS에서도 이러한 모듈을 만들 수 있는 기능을 제공하고 별도의 모듈 패턴을 구현할 필요가 없는 API를 제공합니다. 다음은 모듈 선언 코드입니다.



1
2
angular.module("모듈이름", ["사용할 모듈", ...])
 
cs



 angular.module 함수를 사용해 모듈을 만들면 모듈 인스턴스가 반환되는데 해당 모듈 인스턴스는 컨트롤러, 서비스, 지시자, 필터들을 담습니다.


 다음은 모듈 인스턴스가 사용할 수 있는 메서드를 설명한 표입니다.








 모듈의 API를 보면 AJS에서 모듈의 의미를 어느 정도 파악할 수 있습니다. 간단히 말하자면 컨트롤러, 서비스, 필터, 지시자를 담는 그릇이라고 할 수 있겠습니다. 


 하나의 AJS 웹 앱은 하나의 모듈을 지정할 수 있습니다. 해당 모듈은 자바의 메인 메서드와 같은 역할을 하는 run 함수를 이용해 앱 시작에 대한 로직을 작성할 수 있습니다. 그리고 해당 앱에서 사용하는 컨트롤러, 서비스, 필터 그리고 지시자를 등록할 수 있습니다.



 1. 모듈을 이용한 컨트롤러 등록

  지금까지 예제에서는 컨트롤러 함수를 전역(Global) 영역에 선언해 사용했습니다. 


  앞으로는 모듈을 이용해 컨트롤러를 선언하고 해당 모듈을 사용하는 애플리케이션이 등록한 컨트롤러를 사용할 수 있습니다. 간단하게 북마크를 관리하는 컨트롤러를 만들어 봅시다.



 * ajsmodule.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html ng-app="ngBookmark">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script type="text/javascript">
            angular.module('ngBookmark', []).controller("bookmarkListCtrl", ['$scope'function($scope) {
                $scope.bookmarkList = [
                    {id: "blog"name"블로그", url: "palpit.tistory.com"},
                    {id: "google"name"구글", url: "google.com"},
                    {id: "daum"name"다음", url: "daum.net"}
                ];
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="bookmarkListCtrl">
            <h1>북마크 목록</h1>
            <div>
                <ul>
                    <li ng-repeat="bookmark in bookmarkList">
                        <em>{{bookmark.name}}</em>: <span>{{bookmark.url}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>
cs








 - ng-app="ngBookmark"

  ng-app 지시자에는 해당 앱이 사용하는 모듈의 이름을 값으로 줄 수 있습니다.


 - .controller("bookmarkListCtrl", ['$scope', function($scope) {

  이름이 'bookmarkListCtrl'인 컨트롤러 함수를 등록합니다. angular.module() 함수를 사용하면 그 반환 값으로 module 인스턴스가 반환됩니다. 해당 인스턴스는 controller() 함수를 이용해 컨트롤러를 등록할 수 있습니다. controller() 함수의 첫 번째 인자는 컨트롤러 명이고, 두 번째 인자는 배열 또는 함수가 됩니다.




 2. 다른 모듈의 사용

  ng-app에 해당 앱이 사용하는 모듈명을 값으로 주었습니다. 배열로 준 것이 아니라 하나의 값이 들어가므로 하나의 앱에서는 하나의 모듈만 사용할 수 있는 것처럼 보입니다.


  그렇다면 재사용되는 코드의 단위를 좀 더 세세하게 쪼개어 여러 모듈로 만들고 싶을 때는 어떻게 할 수 있을까요?


  모듈을 선언하는 자바스크립트 API를 보면 사용할 모듈의 이름을 배열로 전달할 수 있습니다.


1
2
angular.module("ngBookmark", ["moduleA""moduleB"])
 
cs



  위와 같이 ngBookmark 모듈을 선언할 때 해당 모듈이 참조하는 moduleA와 moduleB를 선언하는 것입니다. 사실 우리가 사용하는 ng-repeat, ng-select와 같은 지시자와 곧 배울 $http, $log와 같은 서비스 모두 기본 모듈인 ng 모듈에서 제공하는 것들입니다.


  하지만 기본 ng 모듈 이외에도 AJS에서 별도의 모듈(ngMock ngCookies, ngResource, ngSanitize)을 제공하고 있습니다. 아래 예제에서 ngCookie 모듈을 사용하는 예제를 살펴보도록 합시다.



 * ajscookie.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html ng-app="cookieDemo">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-cookies.js"></script>
        <script type="text/javascript">
            angular.module('cookieDemo', ['ngCookies'])
                .controller("mainCtrl", ['$scope''$cookieStore'function($scope, $cookieStore) {
                    $scope.value = $cookieStore.get("test"|| "없음";
                    $scope.getValue = function() {
                        $scope.value = $cookieStore.get("test");
                    };
                    $scope.putValue = function(iV) {
                        $cookieStore.put("test", iV);
                    };
                }]);
        </script>
    </head>
    <body ng-controller="mainCtrl">
        <h1>쿠키 서비스 사용</h1>
        <p>test 키로 저장된 값: {{value}} </p>
        <button ng-click="getValue()">쿠키 가져오기</button>
        <br/>
        <input type="text" ng-model="iValue"><button ng-click="putValue(iValue)">쿠키 저장</button>
    </body>
</html>
 
cs






 - angular.module('cookieDemo', ['ngCookies'])

  'cookieDemo' 모듈을 선언할 때 ngCookies 모듈을 사용한다는 의미로 'ngCookies' 문자열을 값으로 가지는 배열을 두 번째 인자로 주었습니다.


 - .controller("mainCtrl", ['$scope', '$cookieStore', function($scope, $cookieStore) 

  ngCookies 모듈은 두 개의 서비스를 제공합니다. 하나는 $cookie이고 다른 하나는 $cookieStore입니다. $cookieStore 서비스를 사용하기 위해 컨트롤러 함수에 $cookieStore를 인자로 주었습니다. 




end






* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.

다른 카테고리의 글 목록

Web/AngularJS 카테고리의 포스트를 톺아봅니다
조회수 확인

MVC - Model, View, Controller

 AngularJS는 자바스크립트 MVC 프레임워크 중 하나입니다. 


 아래는 기본적인 MVC 패턴에 대한 설명입니다.











 - Model

  도메인에 해당하는 정보를 나타내는 오브젝트. 대체로 애플리케이션의 데이터와 행위를 포함하고 있음.

 

 - View

  모델의 정보를 UI에서 보여주는 역할. 하나의 모델을 다양한 뷰에서 사용할 수도 있고, 여러 모델을 하나의 뷰에서 사용할 수 있음


 - Controller

  애플리케이션에서 사용자의 입력을 받아 모델에 변경된 상태를 반영. 이는 모델을 변하게 하여 결국 뷰를 갱신. 컨트롤러는 직접 뷰를 변경하는 것이 아니라 로직을 통해 모델을 변경하고 그 결과가 뷰로 뿌려지는 것.



 MVC 패턴을 이용하면 애플리케이션 개발과 유지보수에 있어서 몇 가지 이점이 있습니다.


 첫째, 사용자 인터페이스와 비지니스 데이터를 분리할 수 있습니다. 따라서 비지니스 데이터에 해당하는 모델을 다른 뷰에서도 사용하여 모델을 재사용할 수 있게 됩니다.


 둘째, MVC 패턴으로 개발함으로써 팀 사이에 표준화된 개발 방식을 제공할 수 있습니다. 




 1. 모델(Model)

  AngularJS에서는 사용자 정보, 도서 정보, 북마크 정보 등 하나의 엔티티(Entity)나 여러 개의 엔티티가 모델이 될 수 있습니다. 그리고 다른 프레임워크와의 차이점은 별다른 상속 없이 순수 자바스크립트 객체가 모델이 될 수 있다는 점 입니다. 

  

  하지만 중요한 점은 이러한 모델 객체는 AngularJS의 $scope 객체로부터 접근할 수 있어야 한다는 것입니다.


  모델은 컨트롤러에서 $scope 객체에 선언하거나 템플릿에서 선언할 수 있습니다. 다음 코드는 컨트롤러에서 모델을 선언한 코드입니다.


1
2
3
4
function mainCtrl($scope) {
    $scope.userId: "palpit";
    $scope.bookmark: { name"내 블로그", url: "palpit.tistory.com", image: "palpit.png" };
}
cs



  위 코드처럼 컨트롤러에서 모델을 선언하고 있습니다. $scope의 속성명은 모델명을 나타내고 값은 모델이 됩니다. 여기서 모델은 단순한 문자열이나 객체, 배열이 될 수 있습니다.


  즉, 모델은 평범한 자바스크립트 객체 입니다. 모델은 HTML 템플릿에서도 선언 할 수 있습니다.




 2. 뷰(View)

  AngularJS에서 뷰는 문서 객체 모델(DOM: Document Object Model)입니다. 


  브라우저에서 HTML 문서를 읽어서 DOM을 생성하는데 AngularJS에서는 이 DOM이 뷰가 되는 것입니다. 템플릿과 뷰를 혼동할 수 있는데 AngularJS에서 HTML 문서는 템플릿이고 이 템플릿을 AngularJS가 읽어서 뷰를 생성합니다. 뷰를 생성하는 과정은 다음과 같습니다.


  a. HTML로 작성한 템플릿을 브라우저가 읽음

  b. 브라우저는 DOM 생성

  c. <script src="angular.js">가 실행되어 AngularJS 소스 실행

  d. DOM 생성 시 DOM Content Loaded 이벤트가 발생하면서 정적 DOM을 읽고 뷰를 컴파일, 컴파일 시 확장 태그나 속성을 읽고 처리한 후 데이터 바인딩

  e. 컴파일 완료되면 동적 DOM, 뷰를 생성













 3. 컨트롤러(Controller)

  AngularJS에서 컨트롤러는 많은 일을 하지 않습니다. 애플리케이션의 로직을 담당하는 역할만 합니다.


  결국 $scope 객체에 데이터나 행위를 선언하는 것입니다. 그리고 컨트롤러는 인자로 $scope를 전달받는 단순한 자바스크립트 함수입니다.


  컨트롤러 코드를 작성할 때 주의할 사항이 있습니다. 컨트롤러는 단 하나의 뷰에 해당하는 애플리케이션의 로직만을 담당해야 합니다. 화면상의 로직이 아니라 애플리케이션의 비즈니스 로직입니다.


  즉, DOM을 조작하는 행위와 같은 화면 상의 로직은 다음에 설명한 지시자에서 구현하고 컨트롤러에서는 애플리케이션의 비즈니스 로직만을 구현해야 합니다.


  또한, 컨트롤러는 하나의 컨트롤러에 하나의 $scope만을 갖게 됩니다. 컨트롤러 당 각 $scope를 갖게 된다는 것 입니다. 각각 독립된 $scope가 생성되고 서로 참조할 수 없게 됩니다. 



 4. $rootScope와 $scope

  $scope는 양방향 데이터 바인딩의 핵심이자 뷰와 컨트롤러를 이어주는 징검다리이기도 합니다. 다음 목록은 AngularJS 애플리케이션에서의 $scope의 특징을 보여줍니다.


  - 뷰와 컨트롤러를 이어주는 다리

  - 연결된 DOM에서의 실행환경

  - 양방향 데이터 바인딩 처리

  - 이벤트 전파 처리

  - 계층적 구조




  4-1. $scope 계층 구조

   모든 AngularJS 애플리케이션은 하나의 $rootScope를 가집니다. 이 $rootScope는 ng-app을 생성하며 ng-app이 선언된 DOM 요소가 최상위 노드가 되어 여러 자식 $scope를 가지게 됩니다. 즉, DOM과 같은 계층적 구조에서 최상위 계층에 $rootScope가 존재하는 것입니다. 


   다음은 ng-controller를 계층적으로 가지는 예제입니다.


 * ajsarch.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html ng-app="arch">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("arch", []);
            app.controller("parentCtrl"function($scope) {
                $scope.parent = {name"parent Moon"};    
            });
 
            app.controller("childCtrl"function($scope) {
                $scope.child = {name"child Moon"};
                $scope.changeParentName = function() {
                    $scope.parent.name = "Another Jack";
                };
            });
        </script>
    </head>
    <body ng-controller="parentCtrl">
        <h1>부모 이름: {{parent.name}}</h1>
        <div ng-controller="childCtrl" style="padding-left: 20px;">
            <h2>부모 이름: {{parent.name}}</h2>
            <h2>자식 이름: {{child.name}}</h2>
            <button ng-click="changeParentName()">부모 이름 변경</button>
        </div>
    </body>
</html>
cs







  4-2. Scope 타입

   지금까지 본 $scope 객체나 $rootScope 객체는 AngularJS 내부에서 정의하는 Scope 타입의 인스턴스입니다. 즉, 다음과 같이 별도의 생성자 함수가 AngularJS 내부에 정의되어 있습니다.


1
2
3
4
function Scope() { ... }
Scope.prototype.$apply = function () {};
Scope.prototype.$digest = function() {};
...
cs



   AJS는 초기 부트스트랩 시 프레임워크 내부에서 $rootScope를 new Scope()로 생성한 뒤 해당 $rootScope를 서비스로 제공합니다. 그리고 ng-controller나 웹 앱에서는 다음과 같이 $rootScope를 이용해서 자식 $scope 객체들을 만들 수 있습니다.


 

1
var $scope = $rootScope.$new();
cs



   서비스는 나중에 다루기로 하고, scope 타입의 프로토타입 메서드를 살펴보도록 합시다.


   $apply(표현식 또는 함수)

    주로 외부 환경에서 AJS 표현식을 실행할 때 사용


   $broadcast(이벤트 이름, 인자들...)

    첫 번째 인자인 이벤트 이름으로 하는 이벤트를 모든 하위 $scope에게 발생시킴


   $destroy() 

    현재 $scope를 제거, 모든 자식 $scope까지 제거


   $digest()

    $scope와 그 자식에 등록된 모든 $watch 리스너 함수를 실행. $watch 리스너 함수가 보는 표현식에 대해 변화가 없다면 리스너 함수는 실행시키지 않음


   $emit(이벤트명, 인자들...)

    해당 $scope를 기준으로 상위 계층 $scope에게 이벤트 명으로 인자를 전달. 물론 $on으로 이벤트 명을 듣고 있는 상위 계층에 한하여 전파


   $new(독립여부)

    새로운 $scope를 생성. 독립여부를 true, false 로 전달하는데 true일 경우 프로토타입을 기반으로 상속하지 않게 됨

 

   $on(이벤트 이름, 리스너 함수)

    주어진 이벤트 이름으로 이벤트를 감지하다가 해당 이벤트가 발생하면 리스너 함수 호출


   $watch(표현식, 리스너 함수, 동등성여부)

    대상 $scope에 특정 표현식을 감지하는 리스너 함수를 등록



   위 함수를 사용 시점별로 묶으면 데이터 바인딩 처리 시 $apply, $digest, $watch를 사용하고 사용자 정의 이벤트 처리 시 $broadcast, $emit, $on 을 사용합니다.


   $$new와 $destroy는 $scope의 생성과 파괴 처리 시 사용합니다. 컨트롤러에서 사용하는 $scope 객체는 scope 타입의 인스턴스이므로 프로토타입 상속에 의해 위 메서드를 사용할 수 있습니다.




  4-2. $scope에서 사용자 정의 이벤트 처리

   AJS는 웹 앱에 애플리케이션 이벤트를 정의하고 이런 이벤트 처리에 대한 일련의 메카니즘을 제공합니다. 이러한 사용자 정의 이벤트는 모두 $scope 객체를 통하여 처리되는데 $scope 객체에서 특정 이벤트를 발생시키면 이벤트를 발생한 $scope 객체의 자식이나 부모 $scope에서 해당 이벤트를 듣고 있다 처리할 수 있는 것 입니다.


   다음 예제를 통해서 직접 살펴보도록 합시다. 이 예제는 메시지를 입력하여 전송을 하면 공지가 되는 식의 예제입니다.




 * ajsevent.html



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html ng-app="event">
    <head>
        <meta charset="UTF-8"/>
        <style>
            .ng-scope {border: 1px solid red; padding: 5px;}
            .msg-list-area {margin: 10px; height: 400px; border: 1px solid black;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("event", []);
            app.controller("mainCtrl"function($scope) {
                $scope.broadcast = function(noticeMsg) {
                    $scope.$broadcast("chat:noticeMsg", noticeMsg);
                    $scope.noticeMsg = "";
                };
            });
 
            app.controller("chatMsgListCtrl", ['$scope''$rootScope'function($scope, $rootScope) {
                $scope.msgList = [];
                $rootScope.$on("chat:newMsg"function(e, newMsg) {
                    $scope.msgList.push(newMsg);
                });
 
                $scope.$on("chat:noticeMsg"function(e, noticeMsg) {
                    $scope.msgList.push("[공ㅈㅣ] " + noticeMsg);
                });
            }]);
 
            app.controller("chatMsgInputCtrl"function($scope) {
                $scope.submit = function(newMsg) {
                    $scope.$emit("chat:newMsg", newMsg);
                    $scope.newMsg = "";
                };
            });
 
        </script>
    </head>
    <body ng-controller="mainCtrl">
        <input type="text" ng-model="noticeMsg">
        <input type="button" value="공지 전송" ng-click="broadcast(noticeMsg)">
        <div class="msg-list-area" ng-controller="chatMsgListCtrl">
            <ul>
                <li ng-repeat="msg in msgList track by $index">{{msg}}</li>
            </ul>
        </div>
        <div ng-controller="chatMsgInputCtrl">
            <input type="text" ng-model="newMsg">
            <input type="button" value="전송" ng-click="submit(newMsg)">
        </div>
    </body>
</html>
cs








  위 예제에는 3개의 컨트롤러 함수가 정의되었습니다. mainCtrl, chatMsgListCtrl, chatMsgInputCtrl 컨트롤러 함수가 정의되어 있습니다. 

  각 컨트롤러와 연결된 DOM에는 각 컨트롤러가 생성하는 $scope 객체가 연결됩니다. 



end






* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.

다른 카테고리의 글 목록

Web/AngularJS 카테고리의 포스트를 톺아봅니다

[AngularJS] 13.5 API - AngularJS 강좌

2015.11.20 13:11 - Palpit
조회수 확인

AngularJS API

 



 1. AngularJS Global API

  AngularJS Global API는 아래와 같은 일을 수행하기 위한 global 자바스크립트 함수의 집합입니다:

  - 객체 비교

  - 객체 열거

  - 데이터 변환


  Global API 함수는 angular 객체를 사용하여 접근됩니다.


  

APIDescription
angular.lowercase()Converts a string to lowercase
angular.uppercase()Converts a string to uppercase
angular.isString()Returns true if the reference is a string
angular.isNumber()

Returns true if the reference is a number


 [출처: W3Schools ]


 


  1-1. angular.lowercase()


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ x1 }}</p>
        <p>{{ x2 }}</p>
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl'function($scope) {
            $scope.x1 = "JOHN";
            $scope.x2 = angular.lowercase($scope.x1);
        });
   </script>
 
</body>
</html>
 
cs



 






  1-2. angular.uppercase()


1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope) {
$scope.x1 = "John";
$scope.x2 = angular.uppercase($scope.x1);
});
</script>
cs









  1-3. angular.isString()


1
2
3
4
5
6
7
8
9
10
11
12
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isString($scope.x1);
});
</script>
cs







  1-4.angular.isNumber()



1
2
3
4
5
6
7
8
9
10
11
12
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
cs





















 * 이 강좌는 w3schools를 참고하여 작성하였습니다.

다른 카테고리의 글 목록

Web/AngularJS 카테고리의 포스트를 톺아봅니다
조회수 확인

마지막 장으로 지금까지 배워온 기술들을 토대로 실전 프로젝트를 진행해보도록 하겠습니다.


먼저 실전 예제를 통해 몸을 풀어봅시다.



클라이언트 페이지를 생성할 것입니다.



1. 먼저 Aptana Studio에서 프로젝트를 생성합니다. 프로젝트 명은 ClientExample 로 지정합니다.











2. BootStrap 모듈을 프로젝트에 끌어다 놓습니다.








3. 프로젝트 오른쪽 클릭하여 html 파일을 생성합니다. (example.html)



4. 생성된 html 파일에 아래와 같이 기본 틀 코드를 입력합니다.



1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8"/>
        <title>Client Example</title>
    </head>
    <body>
        
    </body>
</html>
 
cs





5. 다음으로 bootstrap과 jquery를 추가해줘야 합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8"/>
        <title>Client Example</title>
        
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
    </head>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
    </body>
</html>
 
cs



 head 태그에 bootstrap css와 body 태그에 jquery js 및 bootstrap js를 추가해줬습니다.





6. 배경을 간단히 작성하겠습니다. Head 태그안에 작성하세요.




1
2
3
4
5
6
7
 
        
        <style type="text/css">
            body {
                background-color: #C0DEED;
            }
       </style>
cs






7. 네비게이션 메뉴를 추가 구성하겠습니다. Body 태그안에 작성하세요.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        <!-- Start of NavBar -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">EXAMPLE</a>
                    <a class="btn btn-navbar" data-toggle="collapse" data-target="#navMenu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <div class="nav-collapse" id="navMenu">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#">Menu2</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of NavBar -->
cs





 현재까지 작성된 페이지 입니다.








 data-toggle="collapse" 속성은 화면이 작아지는 경우 자동으로 메뉴를 접도록 해줍니다. 위 화면의 경우 화면이 작아져서 메뉴를 사용자가 펼친 경우입니다. 








8. 페이지의 메인은 부트스트랩의 hero-unit을 통해 구현하겠습니다.



1
2
3
4
5
6
7
8
9
        <!-- End of NavBar -->
        <div class="container">
            <div class="hero-unit">
                <h1>BlueBlackBerry</h1>
                <br>
                <h3>Stay Hungry, Stay Foolish...</h3>
            </div>
        </div>
        <!-- End of container -->
cs



 body 의 스타일을 추가합니다.



1
2
3
4
5
6
7
        <style type="text/css">
            body {
                background-color: #C0DEED;
                padding-top: 60px;
                padding-bottom: 40px;
            }
       </style>
cs








9. 이제 다음 라인으로 span4 속성을 이용한 3열 레이아웃을 만들어 보겠습니다.

 

코드 작성은 클래스 container 안에 hero-unit div가 끝나는 지점에 입력하겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
            </div><!-- End of hero-unit -->
            <div class="row-fluid">
                <div class="span4">
                    <h2>Span 4</h2>
                    <input id="first" class="btn btn-danger" type="button" value="Section 2"/>
                </div>
                <div class="span4">
                    <h2>Span 4</h2>
                    <input id="second" class="btn btn-info" type="button" value="Alert Color"/>
                </div>
                <div class="span4">
                    <h2>Span 4</h2>
                    <input id="third" class="btn btn-primary" type="button" value="Progress"/>
                </div>
            </div>
cs




 span을 위한 style을 추가하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <style type="text/css">
            body {
                background-color: #C0DEED;
                padding-top: 60px;
                padding-bottom: 40px;
            }
            
            .row-fluid div[class*="span"] {
                background-color: white;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                margin-bottom: 10px !important;
                text-align: center;
            }
       </style>
cs











10. 다음 줄은 2열 컴포넌트 입니다. SPAN6을 사용해서 만들게 됩니다. row-fluid가 끝나는 부분에 작성하세요.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
            <div class="row-fluid">
                <div class="span6">
                    <h2>SPAN 6</h2>
                    <div class="tabbable">
                        <!-- Only required for left/right tabs -->
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#tab1" data-toggle="tab">Section 1</a>
                            </li>
                            <li>
                                <a href="#tab2" data-toggle="tab" id="section2">Section 2</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab1">
                                Section 1.
                            </div>
                            <div class="tab-pane" id="tab2">
                                Section 2.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span6">
                    <h2>SPAN 6</h2>
                    <div class="progress">
                        <div id="bar" class="bar" style="width: 50px;"></div>
                    </div>
                    <div class="progress progress-danger progress-striped active">
                        <div id="bar" class="bar" style="width: 50px;"></div>
                    </div>
                </div>
            </div><!-- End of span6 row-->
        </div>
        <!-- End of container -->
cs












11. 마지막 1열 레이아웃 SPAN 12 부분입니다. span 6이 끝나는 부분에 작성하세요.



1
2
3
4
5
6
7
8
9
10
            </div><!-- End of span6 row-->
            <div class="row-fluid">
                <div class="span12">
                    <br>
                    <div class="alert alert-error fade in" id="alert">
                        <a class="close" data-dismiss="alert" href="#">x</a>
                        <strong>SPAN 12</strong>
                    </div>
                </div>
            </div><!-- ENd of span12 row -->
cs










12. 이제 스크립트 부분입니다. </body> 태그 바로 위에 작성하세요.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
        <script src="bootstrap/js/bootstrap.js"></script>
        <script>
            $(document).ready(function() {
                
                $("#first").click(function() {
                    $("#section2").trigger("click");
                });
                
                $("#second").toggle(function() {
                    $("#alert").removeClass("alert-error");
                    $("#alert").addClass("alert-info");
                }, function() {
                    $("#alert").removeClass("alert-info");
                    $("#alert").addClass("alert_error");
                });
                
                $("#third").click(function() {
                    var width = $("#bar").width();
                    $(".bar").width(width + 50);
                });
            });
       </script>
cs









Span 4를 클릭하여 반응을 살펴봅니다.






 * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다

다른 카테고리의 글 목록

Web/WebPage 카테고리의 포스트를 톺아봅니다
조회수 확인

4.1 웹 스크립트 언어, JavaScript


 자바스크립트는 웹 프로그래밍을 위해서는 반드시 알아야할 언어입니다. HTML 만으로는 페이지를 표현하는 것 밖에 할 수 없기 때문에, 다양한 기능을 적용한 웹을 위해서 자바스크립트를 사용하기 때문입니다. 문법도 어렵지 않고, 바로바로 실행해 볼 수 있어서 쉬운 편에 속하는 언어입니다. 이 장에서는 자바스크립트의 문법과 활용을 알아보겠습니다.



 4.1.1 자바스크립트란?


  - 자바스크립트(JavaScript)는 HTML, CSS와 함께 브라우저가 서버나 컴파일러 등의 다른 외부 모듈 없이 직접 해석 할 수 있는 객체 기반 스크립트 언어 입니다. 객체기반이라는 말이 어려울 수 있으나 자바스크립트의 모든 것은 객체로 이루어져 있다는 것이고, 지금 어렵다해도 프로그래밍을 하면서 이해하리라 생각됩니다.



  4.1.1.1 개발환경의 설정

 

   본 프로젝트는 모두 이클립스와 Aptana Studio를 사용합니다. 이 장에서 설명할 JavaScript와 jQuery 역시 동일한 환경에서 작업할 것입니다. 



   JavaScript는 HTML 파일 내부에 <script> 태그로 내장할 수 있고, 확장자가 js인 파일로 외부에 작성한 뒤에 포함시킬 수도 있습니다. 브라우저가 직접 해석하기 때문에 컴파일 없이 바로바로 확인해 볼 수 있습니다.



   


  4.1.1.2 개발할 때의 주의사항

   

   자바스크립트를 이용한 개발을 할 때 주의사항은 크로스 브라우징입니다. 특히나 크롬을 이용해서 개발을 하다보면 많이 생기는 문제 중에 하나가 바로 인터넷 익스플로러에서 오류가 난다는 것 입니다. 자바스크립트는 무척 오래되었고, 많은 발전이 있었으며 방대한 언어입니다. 때문에 각 브라우저마다 호환되는 버전도 다르고 양식도 조금 다릅니다. 크롬에서 사용하는 자바스크립트 엔진은 무척이나 많은 것을 허용하기 때문에 대부분 스크립트가 잘 동작합니다. 





  4.1.1.3 개발 시작

   

   아래 순서대로 시작해보도록 하겠습니다.


    1) 우선 Aptana Studio를 실행하여 Web 프로젝트를 생성합니다.

    2) 프로젝트 이름은 Chapter4 라고 정합니다.

    3) 파일을 하나 추가합니다. HTML 포맷으로 선택하여 4-1이라 지정합니다.






 4.1.2 자바스크립트의 기초


  - 언어를 배울 때 기본은 문법입니다. 자바스크립트는 문법적인 부분에서 무척 자유로운 언어입니다. 어느 정도의 규칙을 무시해도 오류가 없거나, 오류가 있다고 해도 실행이 되는 부분이 있습니다. 문법을 작성시에 정확한 문법과 구조를 가지고 프로그래밍을 하는 습관을 들이는 것이 중요합니다.





  4.1.2.1 다양한 활용을 위한, Pop-up(Dialog)

   

   1) alert

  
    alert()은 경고 창을 화면에 띄우는 함수입니다.

    그럼 아래 코드를 <head> 태그 안에 작성하여 실행해봅시다.


  
1
2
3
        <script>
            alert("경고!!");
        </script>
cs






   실행을 시키면 아래처럼 경고창이 하나 뜨게됩니다.









   2) confirm

  
    confirm() 함수는 사용자에게 선택을 하게 하는 Dialog 함수입니다.

    사용자에게 Yes 혹은 No를 확인 받아 처리할 수 있도록 만들어졌습니다. 


1
2
3
4
        <script>
            confirm("당신은 학생입니까?");
        </script>
 
cs


 








   3) prompt

  
    prompt() 함수는 사용자에게 직접 값을 입력 받도록 하는 함수입니다.




1
2
3
4
5
 
        <script>
            prompt("당신의 나이를 알려주세요"0);
        </script>
 
cs












  4.1.2.2 C 혹은 JAVA와는 조금 다른 자바스크립트

   

   1) 주석


    그럼 이번에는 프로그래밍 언어에는 반드시 들어가 있는 특징인 주석에 대해서 알아보겠습니다. 주석은 브라우저가 코드를 한줄 한줄 해석할 때 해석하지 않고 그냥 넘어가도록 하는 부분을 만드는 것으로 사실 상 코드의 실행과는 관계없는 무시해버리는 상태로 만드는 것을 뜻합니다.



 

 // : 한 줄 주석

 

 /* */ : 범위 주석

 

 자바스크립트의 주석 문법






   2) 변수


    프로그래밍 언어들에서 다양한 값을 가질 수 있고 변경될 수 있는 개념을 가진 것을 변수라고 합니다. 이 변수는 모든 프로그래밍 언어의 기본이며 앞으로 가장 많이 다루게 될 것 입니다. 


1
2
3
4
5
6
7
<script>
    var numberVar;
    numberVar = 1;
 
    var stringVar;
    stringVar = "Test";
</script>
cs


    자바스크립트에서는 변수를 선언할 때 다른 언어와는 다르게 var형식으로 선언을 하고 있습니다. 정수나 문자열 배열 등 모든 변수에는 var를 통해 선언하게 됩니다.



    자바스크립트의 특징 중에 var 키워드를 생략할 수 있습니다. 추후에 Scope를 다루는 부분에서 다시 설명하겠지만 지금까지 선언되지 않았던 변수가 var 키워드 없이 사용되었다면 그 위치에서 선언된 것처럼 인식하게 됩니다.




   3) 자료형


    변수에서 설명한 것처럼 자바스크립트는 선언할 때 자료형을 지정하지 않습니다. 코르들 해석할 때 할당된 값을 가지고 형태를 나중에 자동으로 브라우저가 해석하여 지정하는 것 입니다.



    아래는 자바스크립트가 지원하는 자료형입니다.

1
2
3
4
5
6
7
8
9
<script>
    var number_ = 1;
    var number2_ = 1.0;
    var string_ = "STRING";
    var boolean_ = true;
    var function_ = function() {};
    var object_ = {};    
 
</script>
cs







  4.1.2.3 객체를 활용하자, Number, String, Array

   

   1) 배열 - Array 객체


    자바스크립트는 객체형 언어입니다. 다른 언어에서 클래스라고 불릴만한 개념도 모두 다 객체로서 처리하고 있습니다. 그 중에서 대표적인 것이 Array 객체입니다. 

    그럼 배열의 선언하는 법부터 알아보도록 하겠습니다.



 var numbers = [1, 2, 3];


 var basket = ["apple", "banana", "orange"]; 

 

 []를 통한 배열 선언

    




 

 var numbers = [];


 var basket = [];


 빈 배열 선언





 

 var numbers = new Array();


 var basket = new Array("apple", "banana", "orange");


 new Array() 를 통한 배열 선언




   다음은 유용한 배열 객체 속성과 메서드를 살펴보도록 하겠습니다.




 변수명

 설명 

 length

 배열의 크기를 리턴 

 유용한 Array 객체 속성




 메서드명

 설명 

 concat()

 인자로 들어간 배열을 모두 합쳐 하나의 배열로 리턴 

 indexOf()

 인자로 넣은 아이템의 위치(Index)를 리턴 

 lastIndexOf()

 indexOf()와 같지만 배열의 뒤에서부터 찾아서 위치를 리턴 

 slice()

 지정한 위치(시작, 끝)를 배열로 리턴 

 pop()

 배열의 마지막 맴버를 리턴하고 삭제함 

 push()

 인자로 넣은 아이템을 배열에 마지막 맴버로 추가 

 reverse()

 배열의 맴버들을 역순으로 재 정렬함 

 sort()

 배열의 맴버들을 지정된 방법으로 정렬함. Default는 알파벳순. 

 splice()

 배열의 요소들 중에서 지정된 부분을 삭제하고 인자에 요소들을 추가함. 

 유용한 Array 객체 메서드



  진하게 표시된 메서드들은 Array 자신이 변하는 메서드이고, 그 밖의 메서드들은 자신이 실제로 변하지 않고, 값을 전달하는 순간에만 다른 값을 전달하고 변수자체의 값은 변하지 않습니다.





   2) 숫자 - Number 객체


    Array 이외에도 자바스크립트 자체적으로 지원하는 객체들이 있습니다. 그 중에서 Number 객체는 이름 그대로 수를 표현하는 객체입니다. 


 속성명

 설명

 MAX_VALUE

 자바스크립트에서 표현되는 가장 큰 수를 리턴 

 MIN_VALUE

 자바스크립트에서 표현되는 가장 작은 수를 리턴

 유용한 Number 객체 속성





 메서드명

 설명 

 toExponential()

 숫자를 지수로 리턴 

 toFixed()

 숫자를 고정 소수점으로 리턴 

 toPrecision()

 자리수를 지정한 숫자로 가변적으로 고정소수점 or 지수로 표현 

 toString()

 숫자를 문자열로 변환하여 리턴 

 유용한 Number 객체 메서드







   3) 문자열 - String 객체


    자바스크립트에서는 문자열도 객체로 되어 있습니다. 



 변수명

 설명 

 length

 문자열의 길이 

 String 객체의 속성



 메서드명

 설명 

 charAt()

 지정한 위치에 있는 문자 하나를 리턴 

 charCodeAt()

 지정한 위치에 있는 문자의 유니코드를 리턴 

 concat()

 2개 이상의 문자열을 합쳐서 리턴 

 indexOf()

 지정한 문자열의 위치를 리턴 

 lastIndexOf()

 지정한 문자열의 위치를 뒤에서부터 찾아서 리턴 

 replace()

 지정한 문자열을 찾아서 새로운 문자열로 바꿔서 리턴 

 slice()

 지정한 위치(시작, 끝)을 찾아서 그 부분을 문자열로 리턴 

 split()

 지정한 Separator를 가지고 문자열로 나누고 배열로 만들어서 리턴 

 substr()

 지정한 시작지점부터 지정한 길이만큼의 문자열을 리턴 

 substring()

 지정한 시작지점부터 지정한 끝지점까지의 문자열을 리턴 

 toLowerCase()

 모든 문자열을 소문자로 바꿔서 리턴 

 toUpperCase()

 모든 문자열을 대문자로 바꿔서 리턴 

 유용한 String 객체 메서드









 4.1.3 자바스크립트의 활용


  - 지금부터는 기본에서 벗어나 자바스크립트를 활용하는 기술들에 대해 알아보겠습니다.



  4.1.3.1 특정한 시점의 감지, 이벤트

   

   이벤트라는 것은 어떤 액션이 발생되는 것을 말하며 그 순간을 감지하여 원하는 코드가 동작하도록 할 수 있습니다. 예를 들면 키보드가 입력되는 것에 대한 이벤트가 있으면 그것을 이용하여 눌러진 키를 화면에 출력하도록 할 수 있습니다.


   이벤트의 종류는 아래와 같은 것들이 있습니다.


    1) 마우스 움직임, 오버, 클릭

    2) 키보드 타이핑

    3) 페이지, 이미지 로딩

    4) 데이터 변경

    5) HTML Form Submit


   아래 예제는 button에 onclick 이벤트를 사용하는 예제입니다. click이 발생할 때 자바스크립트 부분에서 직접 작성한 clickButton() 함수를 실행하도록 하였습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
 
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
        <title>4-1</title>
        <meta name="description" content="">
        <meta name="author" content="Yeonsu">
 
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
 
        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
        <script>
            function clickButton() {
                alert("Clicked!!!");
            }
       </script>
    </head>
 
    <body>
        <button type="button" onclick="clickButton()">Click</button>        
    </body>
</html>
 
cs












  4.1.3.2 객체조작의 기본, DOM

   

   DOM이라는 것은 Document Object Model의 약자로 HTML에서의 객체 모델을 뜻하는 것입니다. HTML은 DOM이라는 개념으로 페이지를 인식하고 처리합니다. 결국 HTML은 DOM의 집합으로 이루어져 있다고 볼 수 있습니다. DOM을 다룰 때 가장 중요한 점은 DOM이 로드가 완료된 뒤에 제어를 해야 한다는 점 입니다.


  아래 예제들을 통해 확인해 보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
 
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
        <title>4-1</title>
        <meta name="description" content="">
        <meta name="author" content="Yeonsu">
 
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
 
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
        <script>
            document.getElementById("name").innerHTML = "My name is Jackson";
       </script>
    </head>
 
    <body>
        <h1 id="name"></h1>
    </body>
</html>
 
cs




 위 예제는 <h1> 태그에 스크립트를 통하여 텍스트를 매핑시키는 예제입니다. 그러나 실행결과 아무것도 나타나지 않습니다.







  DOM이 생성되기 이전에 자바스크립트에서 접근하였기 때문에 아무일도 일어나지 않는 것 입니다.




  아래와 같이 수정된 방법이 주로 쓰이는 방법입니다. 




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
 
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
        <title>4-1</title>
        <meta name="description" content="">
        <meta name="author" content="Yeonsu">
 
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
 
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
        <script>
            window.onload = function() {
                document.getElementById("name").innerHTML = "My name is Jackson";
            }
       </script>
    </head>
 
    <body>
        <h1 id="name"></h1>
    </body>
</html>
 
cs














 * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다


다른 카테고리의 글 목록

Web/WebPage 카테고리의 포스트를 톺아봅니다
조회수 확인


JavaScript HTML DOM Node List

 노드 목록은 노드의 집합입니다.






1. HTML DOM Node List

 getElementsByTagName() 메소드는 노드 목록을 반환합니다. 노드 목록은 배열 같은 노드 집합입니다.


 아래 코드는 문서의 모든 <p> 노드를 가져옵니다.



1
var x = document.getElementsByTagName("p");
cs
 







2. HTML DOM Node List Length

 length 속성은 노드 목록의 노드의 수를 정의 합니다:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <body>
 
    <p>Hello World!</p>
 
    <p>How many paragraphs in this document?</p>
 
    <p>This example demonstrates the length property of a nodelist.</p>
 
    <p id="demo"></p>
 
<script>
var myNodelist = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myNodelist.length;
</script>
 
    </body>
</html>
 
cs
 


 


 


 1. 노드 목록에서 모든 <p> 요소를 가져옵니다.

 2. 노드 목록의 길이를 출력합니다.

 

 length 속성은 노드 리스트 내의 노드들을 통하여 반복문을 돌 때 유용합니다.


1
2
3
4
5
6
 
var    myNodelist = document.getElementsByTagName("p");
var i;
for (i = 0; i <    myNodelist.length; i++) {
       myNodelist[i].style.backgroundColor = "red";
}
cs



 * 노드 목록은 배열이 아닙니다!

  노드 배열은 배열 같지만, 배열이 아닙니다. 노드 목록을 통하여 반복문을 돌아 각 노드를 배열처럼 참조 할 수 있습니다.

  그러나, valueOf()나 join()과 같은 배열 메소드는 노드 목록에서 사용하면 안됩니다!



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript HTML DOM Elements (Nodes)

 





1. Creating New HTML Elements (Nodes)

 HTML DOM에 새로운 요소를 추가하기 위해서, 먼저 요소를 생성하고, 존재하는 요소에 덧붙이면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>
cs




  8번 라인은 <p> 요소를 새로  생성하는 코드입니다.


  9번 라인은 8번에서 생성한 요소를 추가하기 전에, 텍스트 노드를 만드는게 먼저입니다. 텍스트 노드를 만드는 코드입니다.


  10번 라인은 생성한 텍스트 노드를 <p> 요소에 붙이는 코드입니다.


  12번 라인은 기존의 존재하는 div1 아이디를 가진 요소를 찾는 코드입니다.


  13번 라인은 생성된 <p> 요소에 위에서 찾은 요소에 덧붙이는 코드입니다.







2. Creating new HTML Elements - insertBefore()

 appendChild() 메소드는 새로운 요소를 부모의 마지막 자식으로 붙이는 메소드 입니다.


 마지막 자식으로 붙이기 싫다면, insertBefore() 메소드를 사용하십시오.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <body>
 
    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
 
    </body>
</html>
 
cs
 



 

 






3. Removing Existing HTML Elements

 HTML 요소 제거를 위해서, 부모 요소를 알고 있어야 합니다:



1
2
3
4
5
6
7
8
9
10
11
 
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
cs





 HTML 문서는 2 개의 자식 노드를 갖는 <div> 요소를 가지고 있습니다.


 8번 라인에서 div1 아이디를 갖는 요소를 찾습니다.

 

 9번 라인에서 p1 아이디를 갖는 요소를 찾습니다.


 10번 라인에서 div1의 자식인 p1을 제거합니다.






4. Replacing HTML Elements 

 HTML DOM 요소를 바꾸기 위해서, replaceChild() 메소드를 사용합니다:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script>
cs

 

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript HTML DOM Navigation

 HTML DOM에서, 노드 관계도를 이용하여 노드 트리를 탐사(naviagte)할 수 있습니다.


1. DOM Nodes

 W3C HTML DOM 표준에 따르면, 모든 HTML 문서는 노드입니다:
  - 전체 문서는 문서 노드입니다.
  - 모든 HTML 요소는 요소 노드입니다.
  - 텍스트 내부의 HTML 요소는 텍스트 노드입니다.
  - 모든 HTML 속성은 속성 노드입니다.
  - 모든 주석은 주석 노드입니다.

 





 HTML DOM에서, 노드 트리내의 모든 노드는 자바스크립트에 의해 접근 가능합니다.

 새로운 노드는 생성되어지고, 모든 노드는 수정되거나 삭제되어 집니다.



2. Node Relationships

 노트 트리의 노드는 각각 계층적 관계를 갖고 있습니다.

 부모, 자식, 형제 용어는 관계를 묘사하기 위해 사용됩니다.
  - 노드 트리에서, 상위 노드는 뿌리(root) 노드라 합니다.
  - 모든 노드는 root를 제외하고 정확히 하나의 부모를 갖습니다.
  - 노드는 여러명의 자식들을 갖을 수 있습니다.
  - 형제는 같은 부모를 갖습니다.


<html>
    
  <head>
    <title>DOM Tutorial</title>
  </head>

  
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html> 





 








 위의 HTML는 이렇게 해석 가능합니다:
  - <html>은 root 노드 입니다.
  - <html>은 부모가 없습니다.
  - <html>은 <head>와 <body>의 부모입니다.
  - <head>는 <html>의 첫 번째 자식입니다.
  - <body>는 <html>의 마지막 자식입니다.

  - <head>는 <title>이라는 하나의 자식을 갖습니다.
  - <title>은 "DOM Tutorial"이라는 텍스트 노드 자식을 갖습니다.
  - <body>는 <h1>과 <p>이라는 두 개의 자식을 갖습니다.
  - <h1>은 "DOM Lesson one"이라는 자식을 갖습니다.
  - <p>는 "Hello world!"이라는 자식을 갖습니다.
  - <h1>과 <p>는 형제입니다.


3. Navigating Between Nodes

 아래 나오는 속성으로 노드를 탐사 할 수 있습니다:
  - parentNode
  - childNodes[nodenumber]

  - firstChild

  - lastChild

  - nextSibling

  - previousSibling



4. Child Nodes and Node Values

 innerHTML 속성은, childNodes와 nodeValue 속성을 사용하여 요소의 내용을 가져올 수 있습니다.

 아래 예제는 <h1> 요소의 노드 값을 복사해서 <p> 요소에 붙여넣는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
    <body>
 
    <h1 id="intro">My First Page</h1>
 
    <p id="demo">Hello!</p>
 
<script>
var myText = document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
 
    </body>
</html>
cs
 

 위 예제에서 getElementById는 메소드이고, childNodes와 nodeValue는 속성입니다.


 


5. DOM Root Nodes

 문서에서 2 개의 특별한 속성을 접근하는 것을 허용합니다:
  - document.body => 문서의 바디
  - document.documentElement => 모든 문서

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <body>
 
    <p>Hello World!</p>
 
    <div>
    <p>The DOM is very useful!</p>
    <p>This example demonstrates the <b>document.body</b> property.</p>
    </div>
 
<script>
alert(document.body.innerHTML);
</script>
 
    </body>
</html>
 
cs
 

 





6. The nodeName Property

 nodeName 속성은 노드의 이름을 명시합니다.
  - nodeName은 읽기 전용입니다.
  - 요소 노드의 nodeName은 tag name과 동일합니다.
  - 속성 노드의 nodeName은 attribute name 입니다.
  - 텍스트 노드의 nodeName은 항상 #텍스트입니다.
  - 문서 노드의 nodeName은 항상 #문서입니다.

 


7. The nodeValue Property

 nodeValue 속성은 노드의 값을 명시합니다.
  - 요소 노드의 nodeValue는 undefined입니다.
  - 텍스트 노드의 nodeValue는 텍스트 값 그 자체 입니다.
  - 속성 노드의 nodeValue는 속성 값 입니다.

8. The nodeType Property

 nodeType 속성은 노드의 종류를 반환합니다. nodeType은 읽기 전용입니다.

 가장 중요한 노드 종류들 입니다:

Element typeNodeType
Element1
Attribute2
Text3
Comment8
Document9
 [ 출처: W3Schools ]


다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다