개발새발

<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 반복문 출력

<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);

<!--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를 통해 메소드를 통해서만 속성에 값을 입력할 수 있게 한다!

<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>

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

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

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

<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 키워드를 사용해 생성한다

<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 함수로 찍어내듯 객체를 생성할 수 있다. 하지만 생성자 함수를 사용하면  

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

<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>

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

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

<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.장래희망) 이런식으로 기술하게 되면

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

 <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 키워드를 사용하면 객체를 명시할 필요없이 속성을 쉽게 사용 할 수 있다

    <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에는 객체의 키가 들어간다

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

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

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

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

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

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

    <script type="text/javascript">

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

    </script>

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

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

  <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를 리턴한다

    <script type="text/javascript">
        var URI = 'http://www.nets.co.kr/한글';

        var output = '';
        output += '★escape()\n\n'
        output += escape(URI) + '\n\n';

        alert(output);

    </script>

    - escape() 함수는 문자셋과 아스키 값을 반환 한다<p>

    - 영문 알파벳, 숫자, 일부 특수 문자 (@, *, -, _, +, ., /)를 제외한<p>

      모든 문자를 인코딩 한다

    <script type="text/javascript">
        var won = '1000원';
        var dollar = '1.5$';
        alert('parseInt ' + parseInt(won) + ' : ' + parseInt(dollar));
        alert('parseFloat ' + parseFloat(won) + ' : ' + parseFloat(dollar));
    </script>

string을 유리수로 바꿔준다

string을 정수로 바꿔준다

    <script type="text/javascript">
        var willEval = '';
        willEval += 'var number = 10;';
        willEval += 'alert(number);';

        eval(willEval);
    </script>

    string을 자바스크립트 코드로 실행한다

    <script type="text/javascript">
        var age = prompt('나이를 입력하세요', '숫자만 입력하세요');
    </script>

    입력 대화상자를 만들어 주는 prompt() 함수

    <script type="text/javascript">

        var flag = confirm ('입장하시겠습니까?');

    </script>

     확인과 취소를 할 수 있는 confirm()함수

    <script type="text/javascript">
        function outerFunction(name)
        {
            // 지역변수 output
            var output = 'Hello ' + name + '..!';
            return function() {
                alert(output);
            };
        }
        outerFunction('RintIanTta')();

    </script>

지역변수 output은 함수 outerFunction을 실행할 때 생성되어 함수가 종료됨과

동시에 사라져야 한다. 그러나 자바스크립트 스스로 아직 지역변수 output을 지우면

안된다는 것을 인식하고 남겨두므로 발생하는 특성이다 이것을 클로져 라 한다

    <script type="text/javascript">
        // 익명함수를 리턴하는 함수
        function outerFuction()
        {
            return function()
                    {
                        alert('Hello world');
                    };
        }
        outerFuction();

    </script>

    <script type="text/javascript">

        // 함수를 5번 호출 하는 함수
        function callFunctionTenTimes(otherFunction) {
            for (var i = 0; i < 5; i++) {
                otherFunction();
            }
        }
        // 출력창 함수
        function justFunction() {
            alert('Hello World..!');
        }
        // 함수를 호출
        callFunctionTenTimes(justFunction);
       
    </script>

자바스크립트에서는 함수도 하나의 자료형이므로 쉽게 매개 변수로 전달 가능

익명함수, 선언적함수 모두 가능

다섯번 출력!

    <script type="text/javascript">
        //피타고라스의 정리 함수
        function pythagoras(width, height)
        {
            function square(x) {
                return x * x;
            }
            return Math.sqrt(square(width) + square(height));
            //Math 객체는 수학적인 계산을 사용하는 객체이다
            // sqrt()는 루트 계산을 하는 메소드
        }
        alert(pythagoras(2,2));
    </script>

내부함수는 함수 내부에 선언한 함수를 의미

내부함수를 사용하면 함수 외부에 이름이 같음 함수가 있어도 내부 함수가 우선됨

주의할 점은 내부함수는 내부함수가 포함되는 함수에서만 사용할 수 있다

따라서 위에 소스에서 pythagoras() 함수 외부에서는 square()를 호출할 수 없다

    <script type="text/javascript">
         function returnTest(){
             alert('문장 A');
             return;
             alert('문장 B');
         }

        returnTest();
    </script>

return 키워드는 함수가 실행되는 도중에 함수를 호출 한 곳으로 돌아가라는 의미

return 키워드를 사용하면 값을 지정하지 않아도 함수를 호출한 곳으로 돌아간다

가변인자 함수는 매개 변수의 개수가 변할 수 있는 함수이다

매개 변수를 선언된 형태와 다르게 사용했을 때도 매개 변수를 모두 활용할 수 있다

위 소스는 argument(매개 변수의 배열)의 배열의 길이를 출력하는 예제이다

함수를 호출할 때 9개를 입력 했으므로 길이는 9로 출력된다

<script type="text/javascript">
        //매개변수 : 함수를 호출하는 쪽과 호출된 함수를 연결하는 매개가 되는 변수
        //Array 함수는 매개변수에 아무것도 입력하지 않게 설계됨
        var array1 = Array();       // 빈 배열
        var array2 = Array(10);     // 크기가 10인 배열 생성
        var array3 = Array(273, 103, 57, 32); // 매개변수를 배열로 만듦

        alert(array1 + '\n' + array2 + '\n' + array3 + '\n');
    </script>

<script type="text/javascript">
        // 선언적 함수 재정의
        a();
        function a() {
            alert('함수 a')
        }
        function a() {
            alert('함수 b')
        }
       
        // 익명함수 재정의
        var b = function() {
            alert('함수 c')
        }
        var b = function() {
            alert('함수 d')
        }
        b();

        /* 결과는 '함수 b', '함수 d' 가 출력된다
        두 가지 함수는 비슷하지만 차이가 있다
        script 태그는 내부의 내용을 순서대로 읽기전에 선언적 함수를 먼저 읽기 때문에
        호출하는 부분이 선언적함수 위에 있어도 호출이 가능하다
        하지만 익명함수는 호출하는 부분이 위에 있다면 에러가 발생한다*/
    </script>

    <script type="text/javascript">
        var a =
                function () {
                    var output = prompt('숫자를 입력해주세요.', '숫자');
                    alert(output);
                };
       a();
        //a를 호출하여 결과를 나타낸다

    </script>

    <script type="text/javascript">
        //        함수의 생성과 출력
        var a =
                function () {
                    var output = prompt('숫자를 입력해주세요.', '숫자');
                    alert(output);
                };
        alert(a);
        // a 의 소스내용을 출력해준다
    </script>