IT Cookbook, HTML5 프로그래밍 입문 (3판)

9장 자바스크립트 기본 문법

이번 장의 예제에서 사용된 alert() 함수는 사이트의 원활한 사용을 위해 document.write() 함수로 변경되어 있습니다.

기본 예제 9-1 자바스크립트를 사용한 메시지 출력

291페이지

코드 9-1 output_alert.html
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Basic</title>
    <script>
        document.write('Hello JavaScript .. !');
    </script>
</head>
<body>

</body>
</html>

기본 예제 9-2 변수의 선언과 초기화

299페이지

코드 9-6 variable_use.html
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Basic</title>
    <script>
        // 변수를 선언 및 초기화합니다.
        var radius = 10;
        var pi = 3.14159265;

        // 출력합니다.
        document.write(2 * radius * pi);
    </script>
</head>
<body>

</body>
</html>

기본 예제 9-3 if 조건문으로 참과 거짓 판별

301페이지

코드 9-7 condition_basic.html
<script>
    // 조건문
    if (273 < 52) {
        // 표현식 "273 < 52"가 참일 경우 실행합니다.
        document.write('273 < 52 => true');
    }

    // 프로그램 종료
    document.write('프로그램 종료');
</script>

기본 예제 9-4 if 조건문으로 오전과 오후 판별

301페이지

코드 9-8 condition_getDate.html
<script>
    // Date 객체를 선언합니다: 현재 시간 측정
    var date = new Date();

    // 요소를 추출합니다.
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDay();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
</script>
코드 9-9 condition_date.html
<script>
    // 변수를 선언합니다.
    var date = new Date();
    var hours = date.getHours();

    // 조건문
    if (hours < 12) {
        // 표현식 "hours < 12"가 참일 경우 실행합니다.
        document.write('오전입니다.');
    }

    if (12 <= hours) {
        // 표현식 "12 <= hours"가 참일 경우 실행합니다.
        document.write('오후입니다.');
    }
</script>

기본 예제 9-5 if else 조건문으로 오전과 오후 판별

303페이지

코드 9-10 condition_else.html
<script>
    // 변수를 선언합니다.
    var date = new Date();
    var hours = date.getHours();

    // 조건문
    if (hours < 12) {
        // 표현식 "hours < 12"가 참일 경우 실행합니다.
        document.write('오전입니다.');
    } else {
        // 표현식 "hours < 12"가 거짓일 경우 실행합니다.
        document.write('오후입니다.');
    }
</script>

기본 예제 9-6 중첩 조건문으로 하루 일정 표현

304페이지

코드 9-11 condition_duplication.html
<script>
    // Date 객체를 선언합니다: 현재 시간 측정
    var date = new Date();
    var hours = date.getHours();

    // 조건문
    if (hours < 5) {
        document.write('잠을 자렴....');
    } else {
        if (hours < 7) {
            document.write('준비');
        } else {
            if (hours < 9) {
                document.write('출근');
            } else {
                if (hours < 12) {
                    document.write('빈둥빈둥');
                } else {
                    if (hours < 1) {
                        document.write('식사');
                    } else {
                        // 여러 가지 업무를 수행합니다.
                    }
                }
            }
        }
    }
</script>

기본 예제 9-7 if else if 조건문으로 하루 일정 표현

306페이지

코드 9-12 condition_ifelseif.html
<script>
    // Date 객체를 선언합니다: 현재 시간 측정
    var date = new Date();
    var hours = date.getHours();

    // 조건문
    if (hours < 5) {
        document.write('잠을 자렴....');
    } else if (hours < 7) {
        document.write('준비');
    } else if (hours < 9) {
        document.write('출근');
    } else if (hours < 12) {
        document.write('빈둥빈둥');
    } else if (hours < 14) {
        document.write('식사');
    } else {
        // 여러 가지 업무를 수행합니다.
    }
</script>

기본 예제 9-8 배열 생성과 배열 요소 접근

309페이지

코드 9-15 loop_array.html
<script>
    // 변수를 선언합니다.
    var array = ['가', '나', '다', '라'];

    // 배열의 요소를 변경합니다.
    array[0] = '윤';

    // 출력합니다.
    document.write(array[0]);
    document.write(array[1]);
    document.write(array[2]);
    document.write(array[3]);
</script>

배열 요소의 개수

310페이지

코드 9-16 reference_arrayLength.html
<script>
    // 변수를 선언합니다.
    var array = [10, 20, 30, 40, 50];

    // 출력합니다.
    document.write(array.length);
</script>

기본 예제 9-9 while 반복문

311페이지

코드 9-17 loop_while.html
<script>
    // 변수를 선언합니다.
    var i = 0;
    var array = ['가', '나', '다'];

    // 반복을 수행합니다.
    while (i < array.length) {
        // 출력합니다.
        document.write(i + '번째 출력: ' + array[i]);

        // 탈출을 위해 변수를 더합니다.
        i++;
    }
</script>

기본 예제 9-10 for 반복문

313페이지

코드 9-18 loop_for.html
<script>
    // 변수를 선언합니다.
    var array = ['가', '나', '다'];

    // 반복을 수행합니다.
    for (var i = 0; i < 3; i++) {
        // 출력합니다.
        document.write(i + '번째 출력: ' + array[i]);
    }
</script>

반복문 조건을 외부 요인으로 변경

314페이지

코드 9-19 reference_changeConditionFromOuterSpace.html
<script>
    // 변수를 선언합니다.
    var start = new Date().getTime();
    var count = 0;

    // 반복을 수행합니다.
    while (start + 1000 > new Date().getTime()) {
        count++;
    }

    // 출력합니다.
    document.write(count + '만큼 반복했습니다.');
</script>

기본 예제 9-11 for 반복문을 사용한 1부터 100까지 합 계산

315페이지

코드 9-20 loop_forPlus.html
<script>
    // 변수를 선언합니다.
    var output = 0;

    // 반복을 수행합니다.
    for (var i = 0; i <= 100; i++) {
        output += i;
    }

    // 출력합니다.
    document.write(output);
</script>

기본 예제 9-12 함수 선언

316페이지

코드 9-21 function_noname.html
<script>
    // 함수를 선언합니다.
    var 함수 = function () {
        document.write('함수_01');
        document.write('함수_02');
    };

    // 출력합니다.
    document.write(typeof (함수) + ' : ' + 함수);
</script>
코드 9-22 function_name.html
<script>
    // 함수를 선언합니다.
    function 함수() {
        document.write('함수_01');
        document.write('함수_02');
    };

    // 출력합니다.
    document.write(typeof (함수) + ' : ' + 함수);
</script>

기본 예제 9-13 매개변수와 반환 값이 있는 함수

320페이지

코드 9-25 function_return.html
<script>
    // 함수를 선언합니다.
    function f(x) {
        return x * x;
    }

    // 함수를 호출합니다.
    document.write(f(3));
</script>

기본 예제 9-14 콜백 함수

321페이지

코드 9-26 function_callback.html
<script>
    // 함수를 선언합니다.
    function callTenTimes(callback) {
        // 10회 반복합니다.
        for (var i = 0; i < 10; i++) {
            // 매개 변수로 전달된 함수를 호출합니다.
            callback();
        }
    }

    // 변수를 선언합니다.
    var callback = function () {
        document.write('함수 호출');
    };

    // 함수를 호출합니다.
    callTenTimes(callback);
</script>

객체

323페이지

코드 9-29 object_withForIn.html
<script>
    // 객체를 선언합니다.
    var product = {
        제품명: '7D 건조 망고',
        유형: '당절임',
        성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
        원산지: '필리핀'
    };

    // 출력합니다.
    for (var i in product) {
        document.write(i + ':' + product[i]);
    }
</script>
코드 9-30 object_this.html
<script>
    // 객체를 선언합니다.
    var person = {
        name: '윤인성',
        eat: function (food) {
            document.write(this.name + '이 ' + food + '을/를 먹습니다.');
        }
    };

    // 메서드를 호출합니다.
    person.eat('밥');
</script>

← 10장 →