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

개발개발/자바스크립트 2012. 8. 27. 14:46

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

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

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

html 페이지에 존재하는 태그를 자바스크립트에서 이용할 수 있는 객체로 만드는 것

 

메소드 이름

설명

createElement(tagName)

요소 노드 생성

createTextNode(text)

텍스트 노드 생성

appendChild(node)

객체에 노드를 연결

setAttribute(name, value)

객체의 속성을 지정

getAttribute(name)

객체의 속성을 가져옴

getElementById(id)

태그의 id속성이 id와 일치하는 객체를 가져옴

getElementsByName(name)

태그의 name속성이 name과 일치하는 문서 객체
를 배열로 가져온다

getElementsByTagName(tagName)

tagName과 일치하는 문서 객체를 배열로 가져온다

'개발개발 > 자바스크립트' 카테고리의 다른 글

자바스크립트 계산기  (0) 2012.08.29
브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체의 스타일

개발개발/자바스크립트 2012. 8. 27. 14:41
<script type="text/javascript">
        window.onload = function () {
            // 문서 객체를 가져옵니다.
            var header = document.getElementById('header');
            // 문서 객체의 스타일을 바꿔줍니다.
            header.style.border = '2px Solid Black';
            header.style.color = 'Orange';
            header.style.fontFamily = 'Helvetica';
            header.style.backgroundColor = 'black';
        };
</script>
<body>
    <h1 id="header">Header</h1>
</body>

    위에 기술한 스타일 외에도 다양한 속성들이 있다 


    문서 객체의 스타일은 css와 속성이름이 약간 다르다


    자바스크립트는 식별자 '-' 를 사용할 수 없으므로 css의 background-color 속성을

     backgroundColor 로 나타낸다

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체 가져오기(getElementByName())

개발개발/자바스크립트 2012. 8. 27. 14:39

   <script type="text/javascript">
        window.onload = function () {
            var headers = document.getElementsByTagName('h1');
            //변수 headers 는 문서 객체를 가지는 배열이며 html 페이지의 h1 태그가 순서대로 들어감
            for (var i = 0; i < headers.length; i++) {
                // 문서 객체의 속성 변경
                headers[i].innerHTML = 'With getElementsByTagName()';
            }
        };
    </script>

    <body>
    <h1>Header</h1>
    <h1>Header</h1>
    </body>

    getElementByName()는 getElementById() 메서드와 달리 한번에 여러개의 문서 객체를 가져올 수 있다
    getElementByName()는 배열이므로 반복문을 사용할 수 있지만 for in 반복문을 사용하면
    문서 객체 이외의 속성에도 접근하기 때문에 for문 을 사용해야 한다

 

With getElementsByTagName()

With getElementsByTagName()


 

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체 가져오기(getElementById() )

개발개발/자바스크립트 2012. 8. 27. 14:39
<script type="text/javascript"> window.onload = function () { // 문서 객체를 가져옵니다. var header1 = document.getElementById('header_1'); // id 속성이 header_1 인 태그를 가져와서 header1 에 저장 var header2 = document.getElementById('header_2'); // id 속성이 header_2 인 태그를 가져와서 header2 에 저장 // 문서 객체의 속성을 변경합니다. header1.innerHTML = 'with getElementById()'; //Header 대신 with getElementById() 로 변경 header2.innerHTML = 'with getElementById()'; //Header 대신 with getElementById() 로 변경 }; </script> <h1 id="header_1">Header</h1> <h1 id="header_2">Header</h1>

 

 

with getElementById()

with getElementById()

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체의 속성(setAttribute

개발개발/자바스크립트 2012. 8. 27. 14:38
<script type="text/javascript"> window.onload = function () { var img = document.createElement('img'); img.setAttribute('src', 'kkola.jpg'); img.setAttribute('width', 500); img.setAttribute('height', 350); img.setAttribute('data-property', 350); // img.setAttribute()이 // <img src = "winter.jpg" width = "500" height="350" data-property="350"> // 와 같은 결과를 나타낸다 document.body.appendChild(img); // 노드 연결 }; </script>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
location 객체 속성 보기  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체 연결

개발개발/자바스크립트 2012. 8. 27. 14:36

   <script type="text/javascript">
        window.onload = function () {
            var header = document.createElement('h1');
            //문서 객체 header 생성
            var textNode = document.createTextNode('Hello DOM');
            // 문서객체 hello dom 생성

            header.appendChild(textNode);
            // header 문서 객체에 textnode 문서 객체 노드 연결
            document.body.appendChild(header);
            // body 문서 객체에 header 문서객체 추가
        };
    </script>

 

Hello DOM

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
location 객체 속성 보기  (0) 2012.08.27
screen 객체  (0) 2012.08.27
Posted by 공돌공돌
,

Navigator 속성 보기

개발개발/자바스크립트 2012. 8. 27. 14:34

  <script type="text/javascript">
        var output = '';
        for (var key in navigator) {
            output += '* ' + key + ' : ' + navigator[key] + '\n';
        }
        alert(output);
    </script>

 


'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체의 속성(setAttribute  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
location 객체 속성 보기  (0) 2012.08.27
screen 객체  (0) 2012.08.27
window 객체 절대 이동  (0) 2012.08.27
Posted by 공돌공돌
,

location 객체 속성 보기

개발개발/자바스크립트 2012. 8. 27. 14:32

    <script type="text/javascript">
        var output = '';
        for (var key in location) {
            output += '* ' + key + ' : ' + location[key] + '\n';
        }
        alert(output);

    </script>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체 연결  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
screen 객체  (0) 2012.08.27
window 객체 절대 이동  (0) 2012.08.27
Window 객체  (0) 2012.08.27
Posted by 공돌공돌
,

screen 객체

개발개발/자바스크립트 2012. 8. 27. 14:31

  <script type="text/javascript">
        var child = window.open('', '', 'width=300, height=200');
        // 가로300, 세로 200인 윈도우창을 만든다
        var width = screen.width;
        var height = screen.height;
        //화면 너비,높이

        child.moveTo(0, 0);
        child.resizeTo(width, height);
        //화면 너비 높이를 width, height로 지정

        setInterval(function () {
            child.resizeBy(-20, -20);
            // 크기는 -20씩 작아지고
            child.moveBy(10, 10);
            // 위치는 10씩 이동한다
        }, 2000);
    </script>

화면이 가운데 쪽으로 점점 작아진다

'개발개발 > 자바스크립트' 카테고리의 다른 글

Navigator 속성 보기  (0) 2012.08.27
location 객체 속성 보기  (0) 2012.08.27
window 객체 절대 이동  (0) 2012.08.27
Window 객체  (0) 2012.08.27
기본 내장 객체 _ 자주 쓰는 메소드  (0) 2012.08.27
Posted by 공돌공돌
,

window 객체 절대 이동

개발개발/자바스크립트 2012. 8. 27. 14:30

  <script type="text/javascript">
        var child = window.open('', '', 'width=800, height=600');
        // 가로 800 세로 600인 창을 만든다
        child.moveTo(0, 0);

        setInterval(function () {
            // 함수 반복 실행 메소드
            child.moveBy(10, 10);
            //1초에 한번씩 가로10, 세로 10만큼 창이 움직인다
        }, 1000);
        // 1초마다 반복
    </script>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

location 객체 속성 보기  (0) 2012.08.27
screen 객체  (0) 2012.08.27
Window 객체  (0) 2012.08.27
기본 내장 객체 _ 자주 쓰는 메소드  (0) 2012.08.27
기본내장객체 - Math  (0) 2012.08.27
Posted by 공돌공돌
,

Window 객체

개발개발/자바스크립트 2012. 8. 27. 14:29
<!--StartFragment-->    <script type="text/javascript">
        // 윈도우가 로드될 때
        window.onload =
        function () {
            alert('3초후 이 페이지는 종료됩니다.');
            // 3초 후에 함수를 실행합니다.
            window.setTimeout(
                    function () {
                        window.close();
                    }, 3000);
            //3초 후에 window.close() 실행
        };
    </script>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

screen 객체  (0) 2012.08.27
window 객체 절대 이동  (0) 2012.08.27
기본 내장 객체 _ 자주 쓰는 메소드  (0) 2012.08.27
기본내장객체 - Math  (0) 2012.08.27
기본내장객체 - Date  (0) 2012.08.27
Posted by 공돌공돌
,

기본 내장 객체 _ 자주 쓰는 메소드

개발개발/자바스크립트 2012. 8. 27. 14:27

기본 내장 객체
 기본 자료형과 객체의 차이

속성과 메소드는 객체가 가질 수 있는 것인데 기본 자료형에도 속성과 메소드가 있다

기본 자료형의 속성이나 메소드를 사용하면 기본 자료형이 자동으로 객체로 변환된다!

대신 기본자료형은 메소드나 속성이 “추가”는 되지 않는다

 

① Object 객체

자바스크립트의 가장 기본적인 내장객체

Object 생성자 함수로 만든 인스턴스

자주 사용하는 편은 안디ㅏ

Object 객체는 총 7개의 메소드를 갖는다

모든 기본 내장 객체는 Object객체를 기본적으로 만들어지기 때문에 다른 기본 내장객체

들 또한 일곱가지의 메소도를 갖는다

 

메소드 이름

설명

constructor()

객체의 생성자 함수를 나타냄

hasOwnProperty(name)

객체가 name속성을 가지고 있는지 확인

isPrototypeof(object)

객체가 object의 프로토타입인지 검사

propertyIsEnumerable(name)

반복문을 사용해 열거 할 수 있는지 확인

toLocaleString()

객체를 호스트 환경에 맞는 언어의 문자열로 바꿈

toString()

객체를 문자열로 바꿈

valueOf()

객체의 값을 나타

 

 

 

 

 

 

 

② Number 객체

문자를 숫자로 바꾸어 주는 역할

자바스크립트에서 가장 단순함

메소드 이름

설명

toExponential()

숫자를 지수 표시로 나타내는 문자열을 만듦

toFixed()

숫자를 고정소수좀 표시로 나타낸 문자열을 만듦

toPrecision()

숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열을 만듦

 

③ String 객체

 문자의 모양을 지정하거나 문자열을 처리하기 위한 객체

 String 객체는 매우 많은 메소드들이 있기 때문에 그 중에서도 가장 많이 쓰는

 메소드를 정리 했다

 HTML관련 메서드는 9장에서 문서 객체를 할 때 공부한다

메소드 이름

설명

charAt(position)

position에 위치하는 문자를 리턴

indexOf(searchString, position)

앞에서부터 일치하는 문자열의 위치를 리턴

match(regExp)

문자열 내에 regExp가 있는지 확인

replace(regExp,replacement)

regExp를 replacement로 바꾼뒤 리턴

search(regExp)

regExp와 일치하는 문자열의 위치를 리턴

toLowerCase()

문자열을 소문자로 바꿔 리턴

toUpperCase()

문자열을 대문자로 바꿔 리턴

 

④ Array객체

배열을 만들 때 사용하는 내장 객체,

여러가지 자료를 쉽게 관리할 수 있게 도와주는 객체

메소드 이름

설명

concat()

매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴

join()

배열 안의 모든 요소를 문자열로 만들어 리턴

pop()

배열의 마지막 요소를 제거하고 리턴

push()

배열의 마지막 부분에 새로운 요소를 추가

reverse()

배열의 요소 순서를 뒤집는다

slice()

배열 요소의 지정한 부분을 리턴

sort()

배열의 요소를 정렬하고 리턴

⑤ Date객체

 날짜와 시간을 표시하는 객체  

메소드 이름

설명

getDate()

‘년,월,일’, ‘일’의 정보

getDay()

요일 정보

getMonth()

‘월’의 정보

getFullYear()

4자리 년도 정보

getYear()

2자리의 년도 정보

getHours()

‘시간, 분, 초’중 시간 정보

getMinutes()

‘분 정보

getSecond()

‘초’ 정보

※  set*()

각 메소드명에 맞는 값들을 지정한다

 ⑥ Math객체

 수학과 관련된 메소드를 갖는 객체

메소드 이름

설명

abs(x)

x의 절대값

cell(x)

x보다 크거나 같은 가장 작은 정수

floor(x)

x보다 작거나 같은 가장 작은 정수

max(x,y,z)

x,y,z 중에 가장 큰 값

min(x,y,z)

x,y,z 중에 가장 작은 값

random()

0부터 1까지의 임의의 수

round(x)

x를 반올림

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

window 객체 절대 이동  (0) 2012.08.27
Window 객체  (0) 2012.08.27
기본내장객체 - Math  (0) 2012.08.27
기본내장객체 - Date  (0) 2012.08.27
기본내장객체 - Array - sort  (0) 2012.08.27
Posted by 공돌공돌
,

기본내장객체 - Math

개발개발/자바스크립트 2012. 8. 27. 14:26
 <script type="text/javascript">
        var a = -200;
        var b = 30;
        var c = 21.5;
        var abs = Math.abs;
        var max = Math.max;
        var min = Math.min;
        var random = Math.random;
        var round = Math.round;

        alert(abs(a));
        alert(max(a, b, c));
        alert(min(a, b, c));
        alert(random());
        alert(round(c));
    </script>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

Window 객체  (0) 2012.08.27
기본 내장 객체 _ 자주 쓰는 메소드  (0) 2012.08.27
기본내장객체 - Date  (0) 2012.08.27
기본내장객체 - Array - sort  (0) 2012.08.27
기본내장객체 - toUpperCase(), toLowerCase();  (0) 2012.08.27
Posted by 공돌공돌
,

기본내장객체 - Date

개발개발/자바스크립트 2012. 8. 27. 14:23

 <script type="text/javascript">
        var date = new Date(1988, 1, 11);

        var output = '';
        output += '★toDateString: ' + date.toDateString() + '\n';
        // 날짜를 문자열 값으로 반환
        output += '★toGMTString: ' + date.toGMTString() + '\n';
        //  그리니치 표준시(GMT)를 사용하여 문자열로 변환된 일자를 반환
        output += '★toLocaleDateString: ' + date.toLocaleDateString() + '\n';
        // 현재 일자를 로케일을 사용하여 문자열로 반환
        output += '★toLocaleString: ' + date.toLocaleString() + '\n';
        //  현재 일자와 시간을 로케일을 사용하여 문자열로 반환
        output += '★toLocaleTimeString: ' + date.toLocaleTimeString() + '\n';
        // 현재 시간을 로케일을 사용하여 문자열로 반환
        output += '★toString: ' + date.toString() + '\n';
        // Date 객체를 나타내는 문자열을 반환
        output += '★toTimeString: ' + date.toTimeString() + '\n';
        // 현재 시간을 표준시간을 사용하여 시간 문자열로 반환
        output += '★toUTCString: ' + date.toUTCString() + '\n';
        // 협정 세계 표준시(UTC)를 사용하여 문자열로 변환된 일자를 반환
        alert(output);

    </script>


'개발개발 > 자바스크립트' 카테고리의 다른 글

기본 내장 객체 _ 자주 쓰는 메소드  (0) 2012.08.27
기본내장객체 - Math  (0) 2012.08.27
기본내장객체 - Array - sort  (0) 2012.08.27
기본내장객체 - toUpperCase(), toLowerCase();  (0) 2012.08.27
기본내장객체 - Number  (0) 2012.08.27
Posted by 공돌공돌
,

기본내장객체 - Array - sort

개발개발/자바스크립트 2012. 8. 27. 14:21

<script type="text/javascript">
        var array = [52, 273, 103, 32];
        array.sort();
        alert(array);
    </script>

 

sort()메소드를 사용해서 네개의 요소를 문자열 오름차순으로 정렬한다

'개발개발 > 자바스크립트' 카테고리의 다른 글

기본내장객체 - Math  (0) 2012.08.27
기본내장객체 - Date  (0) 2012.08.27
기본내장객체 - toUpperCase(), toLowerCase();  (0) 2012.08.27
기본내장객체 - Number  (0) 2012.08.27
기본내장객체 - object  (0) 2012.08.27
Posted by 공돌공돌
,

기본내장객체 - toUpperCase(), toLowerCase();

개발개발/자바스크립트 2012. 8. 27. 14:19

<script type="text/javascript">
        var word1 = 'abcdefg';
        var word2 = 'ABCDEFG';

        word1 = word1.toUpperCase();
        // 소문자를 대문자로
        word2 = word2.toLowerCase();
        // 대문자를 소문자로

        alert(word1);
        alert(word2);
    </script>

 

                                             


'개발개발 > 자바스크립트' 카테고리의 다른 글

기본내장객체 - Date  (0) 2012.08.27
기본내장객체 - Array - sort  (0) 2012.08.27
기본내장객체 - Number  (0) 2012.08.27
기본내장객체 - object  (0) 2012.08.27
상속  (0) 2012.08.27
Posted by 공돌공돌
,

기본내장객체 - Number

개발개발/자바스크립트 2012. 8. 27. 14:18

<script type="text/javascript">
        var number = 273.5210332;
        var output = '';
        output += number.toFixed(1) + '\n';
        // 소수점 첫째 자리까지 자르기
        output += number.toFixed(4);
        // 소수점 넷째 자리까지 자르기
        alert(output);

</script>


 

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

기본내장객체 - Array - sort  (0) 2012.08.27
기본내장객체 - toUpperCase(), toLowerCase();  (0) 2012.08.27
기본내장객체 - object  (0) 2012.08.27
상속  (0) 2012.08.27
getter,setter  (0) 2012.08.27
Posted by 공돌공돌
,

기본내장객체 - object

개발개발/자바스크립트 2012. 8. 27. 14:16

<script type="text/javascript">

        var object = { property: 273};

        var output = '';
        output += "HOP('property'): " + object.hasOwnProperty('property') + '\n';
                // property 를 가지고 있는지 확인
        output += "HOP('constructor'): " + object.hasOwnProperty(' ') + '\n';
                // constructor를 가지고 있느지 확인
        output += "PIE('property'): " + object.propertyIsEnumerable('property') + '\n';
                // true 를 가지는 속성을 for in 반복문으로 출력
        output += "PIE('constructor'): " + object.propertyIsEnumerable('constructor');
        alert(output);

        for (var key in object) {
            alert(object[key]);
        }
</script>

 

                   


    property 속성을 검사한 것은 모두 true를 출력하고 constructor 속성을 검사한 것은 모두 false로 출력


    propertyIsEnumerable()  메소드를 true로 가지는 속성만 for in 반복문 출력


'개발개발 > 자바스크립트' 카테고리의 다른 글

기본내장객체 - toUpperCase(), toLowerCase();  (0) 2012.08.27
기본내장객체 - Number  (0) 2012.08.27
상속  (0) 2012.08.27
getter,setter  (0) 2012.08.27
프로토타입  (0) 2012.08.27
Posted by 공돌공돌
,

상속

개발개발/자바스크립트 2012. 8. 27. 14:12

<script type="text/javascript">
        function Rectangle(w, h) {
            var width = w;
            var height = h;

            this.getWidth = function () {
                return width;
            };
            this.getHeight = function () {
                return height;
            };
            this.setWidth = function (value) {
                if (value < 0) {
                    throw '길이는 음수일 수 없습니다.';
                } else {
                    width = value;
                }
            };
            this.setHeight = function (value) {
                if (value < 0) {
                    throw '길이는 음수일 수 없습니다.';
                } else {
                    height = value;
                }
            };
        }

        Rectangle.prototype.getArea = function () {
            return this.getWidth() * this.getHeight();
        };

        var rectangle = new Rectangle(5, 7);

        alert('AREA: ' + rectangle.getArea());

        function Square(length)
        {
            this.base = Rectangle;
            //base 속성에 함수 Rectabgle을 넣고 실행
            this.base(length, length);
        }
        Square.prototype = Rectangle.prototype;
        //Square 프로토타입에 Rectabgle 프로토타입
        var square = new Square(5);
        alert(square instanceof Rectangle);

    </script>

 

                                                   

    자바스크립트에서 상속이란 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 만든다를 뜻한다


    위 소스에서 Rectabgle함수를 상속받아 속성들을 Square에서 그대로 사용할 수 있게 한다

    먼저 Square의 base속성에 Rectangle 함수를 넣고 Rectangle의 프로토타입도

 

    square 객체의 프로토타입에  저장 했다

    추가로 자바스크립트에서는 정확한 상속 방법은 없다, 상속 여부를판단하는 기준은

    instanceof 키워드를 사용하여true가 출력된다면 상속됐다고 판단한다

    var square = new Square(5);


    alert(square instanceof Rectangle);

'개발개발 > 자바스크립트' 카테고리의 다른 글

기본내장객체 - Number  (0) 2012.08.27
기본내장객체 - object  (0) 2012.08.27
getter,setter  (0) 2012.08.27
프로토타입  (0) 2012.08.27
생성자 함수  (0) 2012.08.27
Posted by 공돌공돌
,

getter,setter

개발개발/자바스크립트 2012. 8. 27. 14:01

<!--StartFragment--><script type="text/javascript">
        // 생성자 함수를 선언
        function Rectangle(w, h) {
            var width = w;
            var height = h;

            this.getWidth = function () {
                return width;
            };
            this.getHeight = function () {
                return height;
            };
            this.setWidth = function (value) {
                if (value < 0) {
                    // throw는 웹 페이지 오류를 발생시키는 키워드
                    throw '길이는 음수일 수 없습니다.';
                } else {
                    width = value;
                }
            };
            this.setHeight = function (value) {
                if (value < 0) {
                    throw '길이는 음수일 수 없습니다.';
                } else {
                    height = value;
                }
            };
        }

        Rectangle.prototype.getArea = function () {
            return this.getWidth() * this.getHeight();
        };

        // 변수를 선언
        var rectangle = new Rectangle(5, 7);

        // 출력
        alert('AREA: ' + rectangle.getArea());
    </script>

 

    만일의 상황에 대비해서 특정 속성이나 메서드를 사용자가 사용할 수 없게 하는 것이 캡슐화!


    getter, setter를 통해 메소드를 통해서만 속성에 값을 입력할 수 있게 한다!

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

기본내장객체 - object  (0) 2012.08.27
상속  (0) 2012.08.27
프로토타입  (0) 2012.08.27
생성자 함수  (0) 2012.08.27
함수를 사용한 객체 생성  (0) 2012.08.27
Posted by 공돌공돌
,

프로토타입

개발개발/자바스크립트 2012. 8. 27. 14:00

<script type="text/javascript">
        function Student(name, korean, math, english, science) {
            this.이름 = name;
            this.국어 = korean;
            this.수학 = math;
            this.영어 = english;
            this.과학 = science;
        }
        Student.prototype.getSum = function () {};
        Student.prototype.getAverage = function () {};
        Student.prototype.toString = function () {};
    </script>


    프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간으로


    각각의 객체가 가지고 있는 메서드를 한 공간으로 옮긴다


    프로토타입을 사용하면 이미 있는 객체에 추가로 메소드를 제공할 수 있다

'개발개발 > 자바스크립트' 카테고리의 다른 글

상속  (0) 2012.08.27
getter,setter  (0) 2012.08.27
생성자 함수  (0) 2012.08.27
함수를 사용한 객체 생성  (0) 2012.08.27
객체와 배열을 사용한 데이터 관리  (0) 2012.08.27
Posted by 공돌공돌
,

생성자 함수

개발개발/자바스크립트 2012. 8. 27. 13:58

<script type="text/javascript">
        // 일반 함수를 사용해 생성한 객
        //Student 생성자 함수를 사용해 생성된 객체
        function Student(name, korean, math, english, science) {
            // 속성
            this.이름 = name;
            this.국어 = korean;
            this.수학 = math;
            this.영어 = english;
            this.과학 = science;
            // 메소드
            this.getSum = function () {
                return this.국어 + this.수학 + this.영어 + this.과학;
            };
            this.getAverage = function () {
                return this.getSum() / 4;
            };
            this.toString = function () {
                return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
            };
        }
        // 학생 정보 배열
        var students = [];
        // 생성자 함수를 사용해 객체를 생성할 때에는 new 키워 드 사용
        students.push(new Student('태연', 1, 6, 11, 16));
        students.push(new Student('수지', 2, 7, 12, 17));
        students.push(new Student('써니', 3, 8, 13, 18));
        students.push(new Student('서현', 4, 9, 14, 19));
        students.push(new Student('소희', 5, 10, 15, 20));

        // 출력
        var output = '이름\t총점\t평균\n';
        for (var i in students) {
            output += students[i].toString() + '\n';
        }
        alert(output);

    </script>

 

 생성자 함수는 new 키워드를 사용해 생성한다


'개발개발 > 자바스크립트' 카테고리의 다른 글

getter,setter  (0) 2012.08.27
프로토타입  (0) 2012.08.27
함수를 사용한 객체 생성  (0) 2012.08.27
객체와 배열을 사용한 데이터 관리  (0) 2012.08.27
객체 속성 추가(동적)  (0) 2012.08.27
Posted by 공돌공돌
,

함수를 사용한 객체 생성

개발개발/자바스크립트 2012. 8. 27. 13:57

<script type="text/javascript">
        function makeStudent(name, korean, math, english, science) {
            var willReturn = {
            // 속성
                이름: name,
                국어: korean,
                수학: math,
                영어: english,
                과학: science,
            // 메서드
                getSum: function () {
                    return this.국어 + this.수학 + this.영어 + this.과학;
                },
                getAverage: function () {
                    return this.getSum() / 4;
                },
                toString: function () {
                    return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
                }
            };
            return willReturn;
        }

        // 학생 정보 배열
        var students = [];
        students.push(makeStudent('태연', 1, 6, 11, 16));
        students.push(makeStudent('수지', 2, 7, 12, 17));
        students.push(makeStudent('써니', 3, 8, 13, 18));
        students.push(makeStudent('서현', 4, 9, 14, 19));
        students.push(makeStudent('소희', 5, 10, 15, 20));

        // 출력합니다.
        var output = '이름\t총점\t평균\n';
        for (var i in students) {
            output += students[i].toString() + '\n';
        }
        alert(output);

</script>

 

    makeStudent 함수로 찍어내듯 객체를 생성할 수 있다. 하지만 생성자 함수를 사용하면  


    기능이 많은 객체를 쉽게 만들 수 있기 때문에 잘 사용하지 않는다

'개발개발 > 자바스크립트' 카테고리의 다른 글

프로토타입  (0) 2012.08.27
생성자 함수  (0) 2012.08.27
객체와 배열을 사용한 데이터 관리  (0) 2012.08.27
객체 속성 추가(동적)  (0) 2012.08.27
with 키워드  (0) 2012.08.27
Posted by 공돌공돌
,

객체와 배열을 사용한 데이터 관리

개발개발/자바스크립트 2012. 8. 27. 13:49

<script type="text/javascript">
        var students = [];
        // push 메소드로 배열에 요소 하나하나씩 삽입
        students.push({ 이름: '태연', 국어: 1, 수학: 6, 영어: 11, 과학: 16 });
        students.push({ 이름: '수지', 국어: 2, 수학: 7, 영어: 12, 과학: 17 });
        students.push({ 이름: '써니', 국어: 3, 수학: 8, 영어: 13, 과학: 18 });
        students.push({ 이름: '서현', 국어: 4, 수학: 9, 영어: 14, 과학: 19 });
        students.push({ 이름: '소희', 국어: 5, 수학: 10, 영어: 15, 과학: 20 });

        for (var i in students)
        {
            with (students[i]) {

                //합을 구하는 메소드 getSum
                students[i].getSum = function() {
                    return 국어 + 수학 + 영어 + 과학;
                }

                //평균을 구하는 메소드 getAverage
                students[i].getAverage = function() {
                    return getSum() / 4;
                }
            }
        }
        //getSum, getAverage 로 합계 평균 구하기
        var output = '이름\t합계\t평균\n';
        for (var i in students)
        {
            with (students[i])
            {
                output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n';
            }
        }
        alert(output);

    </script>

                          

   학생들의 성적 총점과 평균을 계산하는 예제


    학생이라는 객체에서 성적을 관리할 때 필요속성만 뽑아서 자바스크립트 객체로 만듦

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

생성자 함수  (0) 2012.08.27
함수를 사용한 객체 생성  (0) 2012.08.27
객체 속성 추가(동적)  (0) 2012.08.27
with 키워드  (0) 2012.08.27
객체와 반복문  (0) 2012.08.27
Posted by 공돌공돌
,

객체 속성 추가(동적)

개발개발/자바스크립트 2012. 8. 27. 13:47

<script type="text/javascript">
        // 변수를 선언합니다.
        var student = {};
        //동적으로 속성 추가
        student.이름 = '장재순';
        student.취미 = '독서';
        student.특기 = '노래';
        student.장래희망 = '대통령';

        // 동적으로 메소드(toString) 추가
        student.toString = function () {
            var output = '';
            for (var key in this) {
                // toString() 메서드는 출력하지 않게 한다
                if (key != 'toString') {
                    output += key + '\t' + this[key] + '\n';
                }
            }
            return output;
        };
        // 출력합니다.
        alert(student.toString());
    </script>

 

    처음 객체를 생성하는 시점 이후에 객체의 속성을 추가 하는 것을 "동적으로 추가" 라고 한다


    제거 하는 것은 delete 키워드를 사용하는데 delete(student.장래희망) 이런식으로 기술하게 되면


    객체에서 장래희망 속성을 삭제하게 된다

'개발개발 > 자바스크립트' 카테고리의 다른 글

함수를 사용한 객체 생성  (0) 2012.08.27
객체와 배열을 사용한 데이터 관리  (0) 2012.08.27
with 키워드  (0) 2012.08.27
객체와 반복문  (0) 2012.08.27
객체의 생성과 메소드  (0) 2012.08.27
Posted by 공돌공돌
,

with 키워드

개발개발/자바스크립트 2012. 8. 27. 13:45

 <script type="text/javascript">
        // 객체 선언
        var student = {
            name : '장',
            korean : 92,
            math : 93,
            eng : 94,
            science : 95
        };
        // 출력
        var output = '';
        //with 키워드
        with (student) {
            //output+= '이름: ' + student.이름 + \n';
            //with 키워드를 사용하지 않다면 위와 같이 기술해야 하지만
            //with 키워드를 사용하면 아래와 같이 쉽게 기술할 수 있다
            output += '이름: ' + name + '\n';
            output += '국어: ' + korean + '\n';
            output += '수학: ' + math + '\n';
            output += '영어: ' + eng + '\n';
            output += '과학: ' + science + '\n';
            output += '총점: ' + (korean + math + eng + science);
        }
        alert(output);
    </script>

    With 키워드는 복잡하게 사용해야 하는 코드를 짧게 줄여주는 키워드이다


    일반적으로 객체의 속성을 출력할 대 식별자를 여러번 사용하니 코드가 복잡한데


    with 키워드를 사용하면 객체를 명시할 필요없이 속성을 쉽게 사용 할 수 있다

 

 

 


'개발개발 > 자바스크립트' 카테고리의 다른 글

객체와 배열을 사용한 데이터 관리  (0) 2012.08.27
객체 속성 추가(동적)  (0) 2012.08.27
객체와 반복문  (0) 2012.08.27
객체의 생성과 메소드  (0) 2012.08.27
객체의 생성  (0) 2012.08.27
Posted by 공돌공돌
,

객체와 반복문

개발개발/자바스크립트 2012. 8. 27. 13:43

    <script type="text/javascript">
      //변수 선언
        var product = {
            name: '장재순',
            age: '26',
            phone: '01012345678',
            address:'Seoul'
        };

        // 출력
        var output='';
        for (var key in product) {
            output += '*' + key + ': ' + product[key] + '\n';
        }
        alert(output);
    </script>

객체는 단순 for 반복문을 사용해 객체의 속성을 살펴보는것이 불가능하다


객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 한다


for in 반복문에 객체를 넣으면 객체의 요소 개수만큼 반복문을 실행한다


이 때 변수  key에는 객체의 키가 들어간다

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

객체 속성 추가(동적)  (0) 2012.08.27
with 키워드  (0) 2012.08.27
객체의 생성과 메소드  (0) 2012.08.27
객체의 생성  (0) 2012.08.27
isNaN(), isFinite() 함수  (0) 2012.08.27
Posted by 공돌공돌
,

객체의 생성과 메소드

개발개발/자바스크립트 2012. 8. 27. 13:41

    <script type="text/javascript">
        //객체 선언
        var person = {
            name: '홍길동',
            eat: function(food){
                alert(this.name + '이 ' + food + '을/를 먹습니다');
            }
        };
        //메서드 호출
        person.eat('밥');
    </script>

객체의 속성중 함수 자료형인 속성을 메서드 라 한다

객체 person은 속성과 eat속성을 가지고 있으며

eat속성은 함수 자료형이므로 특별히 eat()메서드라 한다

this는 메서드 내에서 자기자신을 가지고 있는 속성을 출력하고 싶을때

자신이 가지고 있는 속성임을 표시하는 키워드이다

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

with 키워드  (0) 2012.08.27
객체와 반복문  (0) 2012.08.27
객체의 생성  (0) 2012.08.27
isNaN(), isFinite() 함수  (0) 2012.08.27
escape() 함수  (0) 2012.08.27
Posted by 공돌공돌
,

객체의 생성

개발개발/자바스크립트 2012. 8. 27. 11:53

    <script type="text/javascript">

        //객체 선언
        var product = {
            제품명: '망고',
            유형: '당절임',
            성분: '망고, 설탕',
            원산지: '필리핀',
            'with space':273,
            'with': 52
        };

    </script>

    객체는 {} 중괄호를 사용해 생성한다

    
    객체의 키는 식별자 또는 문자열 모두 사용 할 수 있다

'개발개발 > 자바스크립트' 카테고리의 다른 글

객체와 반복문  (0) 2012.08.27
객체의 생성과 메소드  (0) 2012.08.27
isNaN(), isFinite() 함수  (0) 2012.08.27
escape() 함수  (0) 2012.08.27
parseFloat(), parseInt() 함수  (0) 2012.08.27
Posted by 공돌공돌
,

isNaN(), isFinite() 함수

개발개발/자바스크립트 2012. 8. 27. 11:50

  <script type="text/javascript">

        var number1 = 10/0;
        var number2 = 10/'A';
        alert(isFinite(number1) + ' : ' + isNaN(number2));

    </script>

isNaN 함수는 number가 NaN인지 확인한다

isFinite 함수는 number가 무한한 값인지 확인한다

대부분의 프로그래밍 언어는 0으로 숫자를 나누면 오류가 발생하지만

자바스크립트는 infinity 라는 값이 들어간다

그리고 NaN은 숫자지만 자바스크립트가 표현할 수 없는 숫자를 의미한다

isFinite()함수와 inNaN() 함수는 이러한 값을 구분하는 함수이다

숫자가 Infinity(무한한 수)면 false를 리턴하고

자바스크립트로 표현 할 수 없는 숫자면 true를 리턴한다

 

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

객체의 생성과 메소드  (0) 2012.08.27
객체의 생성  (0) 2012.08.27
escape() 함수  (0) 2012.08.27
parseFloat(), parseInt() 함수  (0) 2012.08.27
eval() 함수  (0) 2012.08.27
Posted by 공돌공돌
,

티스토리툴바