자바스크립트는 기본적으로 function()이면 getter, function(파라미터)는 setter로 쓴다....

javaScript

Event.preventDefault()

- 이벤트의 기본 동작을 취소한다.

- 개요
void preventDefault();

- 설명
이 메서드는 웹 브라우저로 하여금 이벤트와 연결되어 있는 기본 동작(존재하는 경우)을 수행하지 않게 만든다. 예를 들어, type 프로퍼티의 값이 'submit'이면 이벤트 전차 단계 중 어느 곳에서라도 이벤트 처리기에서 이 메서드를 호출함으로써 폼이 제출되는 것을 막을 수 있다. Event객체의 cancelable 프로퍼티가 false이면 기본 동작이 아예 존재하지 않거나 기본 동작이 수행되는 것을 막을 수 없다. 어떤 경우라도 이 메서드를 호출하는것은 아무런 영향을 주지 못한다.

Event.stopPropagation()

- 이벤트를 더 멀리 전달하지 않는다.

- 개요
void stopPropagation();

- 설명
이 메서드는 이벤트 전차를 중지시켜 이벤트가 다른 Document 노드로 전달되는 것을 막는다. 이벤트 전파 과정 중 언제라도 호출될 수 있다. 이 메서드는 동일한 Document 노드에 대해 다른 이벤트 처리기가 호출되는 것을 막지는 않지만, 이벤트가 다른 노드로 전달되는 것은 막는다.

자료출처: http://designonex.com/bbs/board.php?bo_table=G05_2&wr_id=341

자료출처: http://designonex.com/bbs/board.php?bo_table=G05_2&wr_id=340

jQuery

load()

- 전체 웹페이지를 새로고침하지 않고 웹페이지의 일부분만을 업데이트할 수 있다

on()

- $('body').on('click', '.detailLink', function(event){ } );

- body엘리먼트의 detailLink라는 클래스를 click하면 function(event){ } 를 실행하라

- jQuery 1.7버전 이상에서 사용 가능(이하버전은 live(), bind() ... 를 사용)

val()

- 선택한 엘리먼트의 값을 가져오는 함수

trigger()

- 클릭이벤트 강제로 발생시키기

-$(셀렉터).trigger(이벤트명)

ViewResolver(뷰를 찾아주는 해결사)란?

* 뷰의 이름과 로케일에 따라 적절한 타겟(뷰)을 찾아 인스턴스화하기 위해 스프링MVC가 사용하는 인터페이스로 Strategy패턴을 이용하여 작성되어 있다.

스프링은 여러가지 ViewResolver 인터페이스의 구현체를 제공하며, 모든 구현체들은 resolveViewName(String viewName, Locale locale) 메소드를 구현하고 있기 때문에 파라미터인 locale변수의 값에 따라 서로 다른 뷰를 반환하여 적절한(내가 원하는) 뷰를 찾아서 실행할 수 있다.

* 한줄요약: 특정한 뷰를 찾아서 실행시켜 주는 녀석

* spring에서 지원하는 다양한 뷰리졸버들.

(참조: spring 3.2 docs 17.5.4 ContentNegotiatingViewResolver)

<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
    <property name="viewResolvers">
        <list>
            <bean class="org.springframework.web.servlet.view.BeanNameViewResolver" />
            <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
                <property name="prefix" value="/WEB-INF/view/" />
                <property name="suffix" value=".jsp" />
            </bean>    
        </list>
    </property>
    <property name="defaultViews">
        <list>
            <bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />
        </list>
    </property>
</bean>

* 보너스, JSON......?

난 자꾸 아래의 이분이 생각난다... 잘게잘게 썰어주시는 이분....

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다....(참조: 위키)

라고 하는데... 예제 객체 하나 보는것이 더 빠른 이해가 될것 같다.

var json = {

name: "홓긿돟",

age: 20,

job: "thief"

}

이렇게 생긴 객체타입이다.....

Date.prototype.format = function(f) {

    if (!this.valueOf()) return " ";

    var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];

    var d = this;

    return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) {

        switch ($1) {

            case "yyyy": return d.getFullYear();

            case "yy": return (d.getFullYear() % 1000).zf(2);

            case "MM": return (d.getMonth() + 1).zf(2);

            case "dd": return d.getDate().zf(2);

            case "E": return weekName[d.getDay()];

            case "HH": return d.getHours().zf(2);

            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2);

            case "mm": return d.getMinutes().zf(2);

            case "ss": return d.getSeconds().zf(2);

            case "a/p": return d.getHours() < 12 ? "오전" : "오후";

            default: return $1;

        }

    });

};

String.prototype.string = function(len){var s = '', i = 0; while (i++ < len) { s += this; } return s;};

String.prototype.zf = function(len){return "0".string(len - this.length) + this;};

Number.prototype.zf = function(len){return this.toString().zf(len);};

프런트 앤드를 위한 MVC?

MVC는 서버 사이트 코드를 구조화하고 모듈로 만들며 유지보수가 용의하도록 돕는 매우 잘 알려진 디자인 패턴입니다. 그러면 프런트 앤드에서 MVC를 사용하려면 어떻게 해야 할까요? 자바스크립트에서 이 디자인패턴을 적용할 수 있을 까요? 만약 여러분이 자바스크립트를 단지 애니메이션과 폼 유효성 검사, 100라인이 넘지 않는 간단한 처리를 위해서 사용한다면 MVC를 사용해서 여러분의 스크립트 파일을 구조화할 필요 없습니다. RequireJS도 사용할 필요 없을 겁니다. 하지만, 뷰(view)가 많은 리치 웹 앱을 제작 중이라면 반드시 필요합니다!

Model 과 View 그리고 서로간의 관계

Model

모델은 도메인 개체 그 자체이다. 도메인은 프로그램 내에서 동일한 의미를 갖는 대상이다. 보통 Data 그 자체와 동일시 되지만, 이 외의 데이터를 조작할 수 있는 기능이 추가되기도 한다. 구현과 상황에 따라서는 단순히 데이터소스에 접근하는 DAO 역할을 하거나,  파일 시스템 자체가 되거나, 라이브러리 세트가 된다.

View

디스플레이.

사용자(Client. 사람이 아닌 기계 혹은 동물일수도 있다. 어플리케이션이 이용되는 타겟이라고 생각하자) 에게 제공되는 UI Layer를 말한다. 더욱 큰 의미를 포함하면 눈으로 이미지가 곁들여지거나 글자로 이루어지지 않은 바이트 코드의 나열이나 음악 파일등이라도, Client 가 이해할 수 있다면 View가 될 수 있다.

보통 Web Application 등에서는 View는 HTML/CSS 로 렌더링된 화면을 가르킨다.

둘의 관계..

MVC를 비롯한 여러 프레임워크들이 나온 이유는 명확하다.

각 계층의 분리로 재활용성을 높이고 중복을 막자는 것이다. 각 계층의 강한 결합이 발생한다면 애초에 프레임워크를 적용하는 의미가 없다.

이 둘의 의존성을 어떻게 제어하느냐에 따라 MVC, MVP, MVVM … etc 등으로 나뉘게 된다.

Controller, Presenter, ViewModel…?

이들은 모델과 뷰의 통신을 담당한다. 이들의 차이점을 한번 훓어보자.

Controller

모든 입력은 Controller에서 처리된다. 특정 입력이 들어오면 Controller는 그 입력에 해당하는 Model을 선택하여 처리하게 한다.

Controller는 입력에 따라 Model을 업데이트하고, 결과에 따라 다른 View를 선택한다. Controller는 View를 선택할 수 있기에 View를 여러개 관리할 수 있다.

일반적으로 View는 Model을 사용하여 업데이트를 하지만, Model을 관리하는 것은 Controller이므로 사실상 View는 Model을 직접적으로 생성하거나 관리하는 것은 아니다. Model을 이용하거나 이용될 뿐이다.

Controller는 Model을 조작하고 View를 선택하지만 View를 직접 업데이트하진 않는다.

이 경우에는 View와 Model의 관계가 어느정도 있으며

• View가 Model을 직접 사용하여 업데이트가 되거나,
• 아니면 Model은 자신과 관련돤 View 들에게 Notify 해줘서 View가 업데이트 되는 방식도 있고,
• View가 polling 을 통해 Model의 변화를 알아채고 스스로 업데이트하는 방식도 있다.

어느것이 되었든 View와 Model의 어느정도의 의존성은 피할 수 없다. 이것이 Controller를 사용하는 MVC의 문제점이라면 문제점이다.

MVC 패턴의 좋은 구성은 최대한 이 둘의 의존성을 낮추는게 관건이다.

조금 억지스러운 예를 들어보자.

View와 Model이 클럽에 온 소극적인 남녀라면 Controller는 이 둘을 부킹해주는 실력좋은 웨이터이다. 여기서 소극적인 이라는게 중요하다. 물론 웨이터는 수 많은 요청에 의해 오늘도 매번 부킹에 성공할 것이다.

Presenter

View와 Model 사이의 상호작용을 담당한다. 또한, 이 경우 사용자의 입력 처리는 Controller 가 아닌 View가 담당한다. View가 이벤트를 Presenter에 전달하면 이벤트에 맞춰 Presenter는 Model을 조작하고 그 결과를 다시 View에 바인딩하여 View의 요소들이 업데이트된다.

Controller는 단순히 View를 선택하고 Model을 조작한 뒤 실제 회면 갱신은 View와 Model의 상호작용으로 이루어지지만 Presenter 를 사용한 MVP에서는 Presenter가 Model을 조작하고 관리하며 변경이 있으면 Model에 따라 View를 업데이트하게 된다.

실제 구현체로 생각해본다면 Presenter는 Model과 View의 인스턴스를 모두 가지고 있어야 할 것이다. View가 섬이고 Model이 육지라면 그 사이를 이어주는 다리와 같다고 보면 될 듯 싶다.

View와 Presenter는 1:1 관계로 맺어지며 Presenter는 보통 Model보다는 View에 더 닮은 구조로 디자인된다.

MVC와는 다르게 View와 Model의 관계가 전혀 없으며 단지 View는 Presenter라는 것을 하나씩 가지고 있게 된다. 그리고 입력 처리를 View에서 처리한다는 점도 큰 차이점이 된다.

이 녀석을 사용하면 View와 Model의 의존관계가 완전히 없어진다.

ViewModel

View의 표현을 담당한다고 보면 되겠다.

MVP와 매우 비슷하지만 큰 차이점이라면 비중이 View에 좀더 치우쳐 있다는 점이며, Presenter는 View에 상당한 의존성이 있었지만, Controller, Presenter의 위치인 ViewModel은 View와 아무런 관련이 없다. 여러 View들은 하나의 ViewModel을 선택하여 바인딩하고 업데이트를 받는다.

ViewModel의 디자인은 View보다는Model에 비슷하게 구성된다. 보통 ViewModel이 변경되면 자동으로 View에 업데이트되는 방식으로 구현된다.

Model이 순수한 Model이라면 ViewModel은 View를 위한 모든 커스터마이징을 제공하는 Model이다.

좀 억지를 부려보면, ViewModel이 회사라면 View는 근무하는 사원에 가깝다. 회사는 사원의 여러 근무에 대한 환경을 제공한다. 이윤을 위해서라면 회사는 그 무엇과도 거래하고 연결한다.

min

RequestJS란 무엇이고 왜 좋은가

RequireJS는 AMD(Asynchronous Module Definition)의 구현체입니다. AMD란 모듈을 정의하는 방법과 모듈이 필요할 때 비동기로 로딩하는 방법을 정의한 API 입니다. 제임스 버크(James Burke)씨가 개발했는데, 2년간 개발해서 겨우 버전 1.0을 찍었습니다. 여러분은 RequireJS로 Javascript코드를 모듈화 할 수 있고 비동기로 관리하면서 여러파일을 병렬로 다운로드 할 수 있습니다. 스크립트 파일이 필요할 때만 병렬로 로딩되기 때문에, 페이지 로딩 속도는 빨라집니다. 

min

 1. JSON 이란?

JSON 에 대한 설명은 공식 홈페이지나 위키에 가서 확인하는게 빠를거 같습니다.

JSON 공식 홈페이지 : http://www.json.org

아래 개요 사이트에 가면 친절하게 한국어로 적혀있습니다.

JSON 개요 : http://www.json.org/json-ko.html

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고

 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming 

Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다.

 JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, 

Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이

러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.

간추려서 말하면, JSON을 지원하는 여러 다양한 언어(C, C++, C#, Java, PHP, Javascript 등...)에서 자료를 쉽게 주고 받을 수 있다고 볼 수 있습니다.

 2. Java - JSON

JSON 은 바로 사용하지 못하고 언어에 맞게 별도의 컴파일 과정을 거친 후, 사용할 수 있습니다.

C 의 경우 컴파일 후에 필요한 파일들 복사하고 헤더 파일을 등록 후에 사용하는 것 처럼, Java 에서도 제공된 라이브러리를 통해서 간단하게 사용할 수 있습니다.

 3. json-simple 로 json 사용하기

사전에 TCP, UDP 통신등으로 데이터를 주고 받을 수 있도록 구현이 된 상태에서 진행하도록 합니다.

먼저 데이터를 넣는 방법입니다.

아래와 같이 JSONObject를 선언한 다음에 put을 통해서 데이터를 집어 넣어 줍니다.

JSONObject obj;

obj = new JSONObject();

obj.put("key1", "value1");
obj.put("key2", "value2");

위와 같이 만들어진 obj를 통신을 사용해서 보내고자 하는 곳으로 넘겨주면 됩니다.

받게 되는 곳에서는 위의 obj를 받게 됩니다.

이 때, 받은 자료를 value 라는 String 에 저장을 했습니다.

받은 데이터를 JSON 문법으로 해석합니다.

그 다음 get을 통해서 키를 입력하면 값을 받을 수 있습니다.

JSONObject jsonObj;
jsonObj = (JSONObject) JSONValue.parse(value);

String tmp;
tmp = (String) jsonObj.get("key2");

system.out.println(tmp);

위와 같이 했을 때, tmp 는 value2 라는 값을 가지게 됩니다.

JSON.parse 함수(JavaScript)

JSON.parse(text [, reviver])

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);

// Output: Aaberg, Jesper

var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");

var newArr = JSON.parse(str);

while (newArr.length > 0) {
    document.write(newArr.pop() + "<br/>");
}

// Output:
var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");

var newArr = JSON.parse(str);

while (newArr.length > 0) {
    document.write(newArr.pop + "<br/>");
}

// Output:
["a","b","c"]
c
b
a

var jsontext = '{ "hiredate": "2008-01-01T12:00:00Z", "birthdate": "2008-12-25T12:00:00Z" }';
var dates = JSON.parse(jsontext, dateReviver);
document.write(dates.birthdate.toUTCString());

function dateReviver(key, value) {
    var a;
    if (typeof value === 'string') {
        a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
        if (a) {
            return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
                            +a[5], +a[6]));
        }
    }
    return value;
};

// Output:
// Thu, 25 Dec 2008 12:00:00 UTC

요구 사항

지원되는 문서 모드: Internet Explorer 8 표준, Internet Explorer 9 표준, Internet Explorer 10 표준. Windows 스토어 응용 프로그램에서도 지원됩니다. 버전 정보를 참조하십시오.

지원되지 않는 문서 모드: Quirks, Internet Explorer 6 표준, Internet Explorer 7 표준

min

Number클래스.ppt

min

자바 스크립트

문서 객체 모델 ( DOM, Document Object Model )

1. 문서 객체 모델 (DOM)

- 웹브라우저가 HTML페이지를 인식하는 방식

- document 객체와 관련된 객체의 집합

2. DOM 용어 정리

1) 태그 : HTML 페이지 내에 존재하는 element (ex>html, head, body...) 

2) 문서 객체 : 태그를 자바스크립트에서 이용할 수 있는 객체로 만든 것.

3) 노드 : DOM 트리에서 각각의 요소들 / 요소노드(Element Node)와 텍스트노드(Text Node)로 구분

ex> <h1> 안녕하세요. 저는 텍스트 노드입니다.</h1>

=> h1 : 요소 노드 // 안녕하세요. 저는 텍스트 노드입니다. : 텍스트 노드

<!DOCTYPE html>

<html>                                          -> 요소 노드

<head>                                         -> 요소 노드

    <title>INDEX</title>                     -> title :요소 노드 , 'INDEX' :텍스트 노드

</head>

<body>                                         -> 요소 노드

    <h1>Text Node</h1>                   ->h1 : 요소 노드, 'Text Node' : 텍스트 노드

    <img src="image.jpg"/>                -> 요소 노드

</body>

</html>

* '동적으로 문서 객체를 생성한다' 의미는 ?
=> 자바 스크립트를 사용해 원래 HTML페이지에는 없던 문서 객체를 생성하는 것.


3. 문서 객체 만들기

1) 요소 노드와 텍스트 노드를 생성
2) 생성한 요소 노드와 텍스트 노드를 연결(텍스트 노드를 요소 노드에 붙여줌)
3) 생성한 문서 객체를 body 문서 객체에 연결(화면에 문서 객체를 출력하기 위해서)

  *  문서 객체의 연결 메서드 ->2) , 3) 과정

* 예제 코드

<!DOCTYPE html>

<html>

<head>

    <script>

        window.onload = function () {

// 변수를 선언합니다.

            var header = document.createElement('h1');                                    ->요소 노드 생성

            var textNode = document.createTextNode('Hello DOM');                    -> 텍스트 노드 생성

 // 노드를 연결합니다.

            header.appendChild(textNode);                                                    -> 요소 노드와 텍스트 노드 연결

            //appendDChild를 해줘야 h1안으로 텍스트가 들어간다.

            // 화면에 출력은 아직 안됨.

            document.body.appendChild(header);                                            -> 생성한 문서 객체를 body                     

            //document 는 브라우저에 제공해주는 객체                                        문서 객체에 연결

            //DOM tree에 추가되어야 출력될 수 있음

        };

    </script>

</head>

<body>

</body>

</html>

4. 문서 객체 만들기 (2) - 변수의 속성 지정

-> 텍스트 노드를 갖지 않는 노드를 생성하는 방법

=> 대표적으로 img 태그.(이미지 태그를 넣기 위해서는 src 속성을 지정해야 함.)

-> 문서 객체의 속성 지정 방법 (2가지)

1)  변수를 선언한 후, 

변수.속성 = '값'으로 넣기

=> 웹표준이 정의하거나 웹브라우저가 지원하는 태그의 속성에서만 사용가능

*   img.속성명 = 값;

             - 속성은 반드시 해당 엘리먼트에 존재하는 속성이어야 한다.

             - 만약, 존재하는 속성이 아닌 경우에는 추가할 수 없다.

          - img['data-property']=350; //기존에 있는 속성이 아니라서 추가 안됨

2) 문서 객체의 속성 메서드 이용

=> 웹 브라우저가 지원하지 않은 속성도 넣을 수 있음.

1)의 예제

    <script>

        window.onload = function () {

            // 변수를 선언합니다.

            var img = document.createElement('img');

            //이미지 태그의 속성 설정

            img.src = 'Penguins.jpg';

            img.width = 500;

            img.height = 350;

            // 노드를 연결합니다.

            document.body.appendChild(img);

        };

    </script>

2)의 예제

  <script>

        window.onload = function () {

            // 변수를 선언

            var img = document.createElement('img');

            //setAttribute로도 속성값을 설정

            img.setAttribute('src', 'Penguins.jpg');

            img.setAttribute('width', 500);

            img.setAttribute('height', 350);

            // setAttibute() 메서드를 사용하지 않으면 불가능

            img.setAttribute('data-property', 350);

            // 노드를 연결합니다.

            document.body.appendChild(img);

        };

    </script>

5. 문서 객체 만들기 (3) -> innerHTML 속성을 사용하는 것. 

- 3,4 번 문서 객체 생성 방법 -> 노드를 만들고 연결하는 방법

- 5번 방법 -> 문서 객체의 innerHTML 속성을 사용하는 것. (더 쉬운...)

- 문서 객체의 innerHTML - 태그의 내부를 의미하는 속성

- 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체 생성 !

예제>

    <script>

        window.onload = function () {

// 변수를 선언

            var output = '';

            output += '<ul>';

            output += ' <li>JavaScript</li>';

            output += ' <li>jQuery</li>';

            output += ' <li>Ajax</li>';

            output += '</ul>';

// innerHTML 속성에 문자열을 할당합니다.

            document.body.innerHTML = output;

        };

    </script>

6. 문서 객체 가져오기(1)

-> 웹 페이지에 존재하는 HTML 태그를 자바스크립트로 가져오는 방법

* document 객체의 노드 추출 메서드

- script 부분 -> vaar header = document.getElementById('header1')     =>header1의 객체 h1의 문서 객체 가                            

져옴

- body부분 -> <h1 id="header1">hello</h1>

* innerHTML을 이용하여 속성 변경

예제>

<head>

    <script>

        window.onload = function () {

            // 문서 객체를 가져옵니다.

            var header1 = document.getElementById('header_1');

            // 문서 객체의 속성을 변경합니다.

            header1.innerHTML = 'with getElementById()';

           };

    </script>

</head>

<body>

    <h1 id="header_1">Header</h1>

  </body>

7. 문서 객체 가져오기(2) -> 한번에 여러개의 문서 객체를 가져오기.(복수형 : Elements)

* document 객체의 노드 추출 메서드

- 배열로 순서대로 들어감 -> 반복문 사용시,' for in' 반복문 사용 불가 (브라우저에 따라 속성과 메서드                        종류에 차이가 있음)

 -> '단순 반복 for문' 사용

- 예제) getElementsByTagqName()메서드를 사용하여 복수형 문서 객체를 가져와 속성을 변경

<head>

    <title>Index</title>

    <script>

        window.onload = function () {

            // 문서 객체를 가져옴

            var headers = document.getElementsByTagName('h1');

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

                // 문서 객체의 속성을 변경

                headers[i].innerHTML = 'hey~';

            }

        };

    </script>

</head>

<body>

    <h1>Header</h1>

    <h1>Header</h1>

</body>

8. 문서 객체의 스타일 조작 

- 문서 객체의 style 속성을 사용하여 문서 객체의 스타일 변경

1) getElementById()메서드를 사용해 문서 객체를 가져옴

2) 문서객체의 style 속성을 지정 <문서객체.style.속성 = '값'>

예제>

<head>

    <script>

    // 아이디를 찾아서 스타일을 설정

        window.onload = function () {

 // 문서 객체를 가져옴

            var header = document.getElementById('header');

// 문서 객체의 스타일을 바꿔줌

            //style의 이름은 css와 비슷

            // ex> border -> border

            // font-family->fontFamily ,background-color =>backgroundColor (자바스크립트에서 식별자에 '-'사용 불가)

// header객체에 스타일 적용

            header.style.border = '2px Solid Black';

            header.style.color = 'Orange';

            header.style.fontFamily = 'Helvetica';

 };

    </script>

</head>

<body>

    <h1 id="header">Header</h1>

</body>

9. 문서 객체 제거

* 문서 객체 제거 메서드

예제)

<head>

    <script>

        window.onload = function () {

// 문서 객체를 가져옴

            var willRemove = document.getElementById('will_remove');

// 문서 객체를 제거.

            document.body.removeChild(willRemove);

            //body-> 반드시 부모를 찾아서 지워야 한다.

        };

    </script>

</head>

<body>

    <h1 id="will_remove">Header</h1>

</body>

-> 부모 노드.removeChild(제거하고자 하는 자식 노드);

// 부모노드로 이동하여 자식 노드를 제거

- C.S.Y -