Web App. 개발을 위한 객체지향 JavaScript [4일차 - 3]

DOM

노드를 취하는 방법에는 두가지 방법이 있다. 

1. 다이렉트 액세스: ID값이나 태그명이라는 키를 가지고 요소를 직접 접근

   ==> ID 값으로 검색, 태그명으로 검색, class 속성(스타일 클래스)으로 검색

ex> document.getElementById('ID값'), 

    document.getElementsByClassName('class') => 리스트를 반환한다.CSS에서의 클래스지만 JS에서 사용가능

    document.getElementsByTagName('tag') => 태그들을 리스트로 반환한다.

2. 노드워킹: 어느 요소를 기점으로 그 자식, 부모, 형제 요소와 같이 상대적 위치로 취득

  ==> 상대적 위치 관계로 취득하는 방법

ex> var x = document.getElementById('selector'); x.childNodes; ==> ChildNodes 은 리스트로 온다.

JQuery를 사용하기 노드를 취득해야 한다. 바로 이 방식으로 노드에 접근하게 된다.

특정한 노드를 가져와서 속성을 바꿀 수 있다.

아래 예에서 <h2 id='menu'> 메뉴를 커피 메뉴로 바꾸어 보자.

결과는 아래와 같다.

아래와 html page에 list를 추가 해놓은 후 동적으로 엘리먼트를 추가 할 수도 있다.

* JS에서는 함수를 처리할때 인자가 많거나 작거나 상관 없이 처리한다. 에러가 발생하지도 않고 내부적으로 알아서 처리하는 것으로 보인다. 중요한 것은 이렇게 처리되지 않도록 만들어야 하는 것이다. 

Server에서는 특정한 값만을 주고 JavaScript에서 이것을 처리해 페이지를 꾸며보도록 하자.

예를 들어 테이블의 갯수와 목록만을 주고 그때 그때 동적으로 처리할 수 있어야 한다. 주식시장의 그래프와 같이 값만 알면 여러가지 그래프로 보여줄수 있는 방식을 생각해 볼 수 있을것이다. JS는 이를위해서 createElement, addChildNode 등을 사용해서 작업을 할 수 있도록 했다.

JavaScript

var ServerItem = function(name, price, url){ this.name = name; this.price =price; this.url = url; }; CoffeeShop.prototype.makeMenu = function(menu){ // 테이블을 가져온다. var table = document.getElementById('coffeetable'); // 행을 생성 var tr = document.createElement('tr'); // 열을 생성 var td1 = document.createElement('td'); var name = document.createTextNode(menu.name); td1.appendChild(name); var td2 = document.createElement('td'); var name2 = document.createTextNode(menu.price); td2.appendChild(name2); td2.className = 'price';  // discout를 위해 class를 추가한다. var td3 = document.createElement('td'); var name3 = document.createTextNode(menu.url); td3.appendChild(name3); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); // 예 <tr><td><a href='espreso.html'>에스프레소</a></td> //<td>3.5</td></tr> table.appendChild(tr); };

html

.... <table id='coffeetable' border='1' style="width: 400px"> </table> ... <script> aCafe.getreceipt();   aCafe.makeMenu(new ServerItem('에스프레소', '2,000', 'espresso.html')); aCafe.makeMenu(new ServerItem('아메리카노', '2,500', 'americano.html')); aCafe.makeMenu(new ServerItem('에스프레소', '3,000', 'latte.html')); aCafe.discount(0.3); </script>