5장 자바스크립트 기초

5.1 자바스크립트 개요

2장에서 4장까지 살펴본 HTML5는 여러 가지 태그와 콘텐츠를 웹브라우저 화면에 순서대로 집행하여 보여 주는 언어이다. 자바스크립트(JavaScript)는 단순히 순서대로 보여주는 명령의 집합인 HTML을 여러 가지 조건에 따라 집행 순서를 바꾸어 주거나, 비슷한 명령을 반복시킬 수 있는 웹프로그래밍 언어이다.

자바스크립트는 1995년 넷스케이프(Netscape Communications Corporation)와 썬마이크로시스템(Sun Microsystem)에 의해 공동으로 개발되어 Netscape Navigator 2.0에 탑재되어 웹프로그래밍의 개념을 창시한 언어이다.

자바스크립트는 C나 Java 언어와 유사하게 상수, 변수에 관한 문법이 있고 if, for, while 등의 제어문을 가지고 있으며, 버튼 등 여러 가지 입력폼에 대한 이벤트 처리를 할 수 있게 하여준다. 자바 언어와 유사하지만 작성이 쉽고 모든 브라우저에서 실행되어 현재는 웹 범용 언어가 되었다.

자바스크립트는 C나 자바 언어를 이해하고 있는 사람은 쉽게 배워서 사용할 수 있는데 두 언어의 특징을 요약하면 다음과 같다.

자바스크립트는 C나 Java의 컴파일(compile)이라는 과정 없이 브라우저 안의 인터프리터(interpreter)라는 처리기에 의해 실행되는 언어로서 HTML 문서 곳곳에 위치할 수 있는 특징이 있다. 자바스크립트는 HTML 문서 안에 <script>…</script> 태그 안에 명령어를 삽입하여 작성한다.

<head>…</head>나 <body>…</body> 부분에 삽입할 수도 있고, 별도의 파일(확장자가 js임)에 저장한 후 HTML 파일에서 불러올 수도 있다. 여러 개의 <script> 태그를 HTML 문서에 넣을 수도 있다.

[예제 5.1.1]은 HTML 태그와 텍스트로 이루어진 문자열을 자바스크립트를 이용하여 브라우저에 출력시켜 유사한 결과를 얻는 것을 보여 주었다. 자바스크립트는 이밖에도 웹페이지에서 많은 역할을 할 수 있는데 요약하면 다음과 같다.

5.1.1 자바스크립트의 구성

<그림 5.1.2>는 간단한 계산을 하여 그 값을 브라우저에 출력하는 자바스크립트 프로그램의 예이다.

<그림 5.1.2> 자바스크립트 간단한 예

위 예와 같이 자바스크립트의 기본 단위는 한 줄씩의 명령문(statement)이다. 각각의 명령문은 세미콜론(;)으로 구분하는데 여러 명령문을 한 줄에 적어도 된다. 한 명령문만 있을 경우 세미콜론은 생략할 수 있다.

// 로 시작되는 명령문은 단지 한 줄의 설명이나 메모를 목적으로 하는 주석(comment)으로서 실행되지 않는다. 여러 줄에 걸친 주석은 /* … */를 이용한다.

EX050103.htm에서 var a, b, c 는 자바스크립트 프로그램이 사용할 데이터 저장 공간의 이름을 정해주는 명령문으로 규약문(specification statement)이라 부른다. 여기서 a, b, c를 변수(variable)라고 부르는데 5.2절에서 자세히 설명한다.

a = 1; b = 2; c = a + b; 등과 같이 수학적 표현을 가진 명령문을 산술문(arithmetic statement)이라 한다. 수학 기호와 같은 ‘=’은 대입연산자, ‘+’는 산술 연산자, 1과 2와 같은 숫자를 상수(constant)라 부른다. 5.2절에서 자세히 설명한다.

document.write(“a + b = “+c+”<br>”)는 프로그램에서 계산한 내용을 브라우저에 출력해 달라는 명령문으로 입출력문(input/output statement)이라 부른다. 여기서 “a + b = “+c+”<br>” 는 문자열을 만드는 연산을 의미한다. document.write( )는 사용자를 도와주기 위한 프로그램의 일종으로 자바스크립트에서는 document 객체(object)의 메소드(method) 또는 함수(function)라 부른다. 사용자가 정의하는 함수는 5.6절에서 설명하고, document 객체는 6.5절에서 자세히 설명하고, 기타 자바스크립트를 구성하는 주요 객체와 메소드에 대해서는 6장에서 8장에 걸쳐 자세히 설명한다.

if (b > a) document.write(b) 명령문은 변수 b가 변수 a보다 큰 경우에만 b를 인쇄하라는 명령문으로 프로그램의 집행 순서를 정해주는 제어문(control statement)이라 부른다. 5.3절과 5.4절에서 자세히 설명한다.

자바스크립트는 이와 같이 =, +, if, document.write( ) 등의 언어 개발자가 제공하는 예약어(reserved word)와, a, 1, b, 2, c 등의 사용자가 정의하는 사용자 정의어(user defined word)로 구성되어 있다.

자바스크립트의 명령문은 크게 다음과 같이 구분할 수 있다. 이러한 구분은 C나 Java와 같은 대부분의 언어도 유사하다.

5.1.2 자바스크립트 입력 대화상자

자바스크립트에서 대부분의 데이터의 입력은 HTML 웹폼 태그로 만든 브라우저의 입력 박스에서 사용자가 키보드 등으로 받는다. 이러한 데이터 입력은 입력 박스에 어떠한 이벤트(마우스 클릭 등)가 발생될 경우 진행되기 때문에 이에 관한 자세한 내용은 7장의 자바스크립트 이벤트 처리에서 살펴본다.

자바스크립트에는 사용자가 이용하기 쉬운 특별한 목적의 입력 팝업 대화상자(pop-up dialog box)를 제공한다. 이는 window 객체의 메소드로서 메소드 이름에서 앞 부분의‘window.’은 생략해도 무방하다

window.prompt(string, initial_value)      // 입력 대화상자

window.confirm(string)                // 확인 및 취소 대화상자

prompt(), confirm() 메소드를 사용할 때 여러 줄의 문자열을 출력하거나, 역슬래시(\) 등을 출력할 때는 다음과 같은 문자 기호를 사용하여야 한다.

\b       back space

\f form feed

\n       new line

\r       carriage return

\t       tab

\/       slash

가. prompt() 메소드

prompt( ) 는 사용자로부터 문자열을 입력받는 팝업 대화상자를 브라우저에 나타나게 하여준다. 여기에 입력된 값은 서버에서 받아 프로그램을 진행하는데 사용한다.

prompt( ) 는 자바스크립트의 window라는 클래스 객체에 있는 메소드로서 그 형식은 [표 5.1.3]과 같다.

<그림 5.1.3>은 prompt( ) 대화상자의 사용 예이다.

<그림 5.1.3> prompt( ) 팝업 대화상자의 예

prompt( ) 대화상자에 이름을 입력하고 ‘확인’ 버튼을 누르면 이름이 서버로 전송되어 HTML 프로그램이 진행된다. 어떠한 값도 입력되지 않으면 빈 문자열(“”)을, ‘취소’ 버튼을 누르면 null로 처리된다.

나. confirm() 메소드

confirm( ) 메소드는 단지 ‘메시지’와 ‘확인’/‘취소’ 버튼을 가진 팝업 대화상자를 브라우저에 나타나게 하여준다. ‘확인’을 클릭하면 true를, ‘취소’를 클릭하면 false로 처리된다.

confirm( )도 자바스크립트의 객체에 있는 메소드로서 그 형식은 [표 5.1.4]와 같다.

 

<그림 5.1.4>는 confirm( ) 대화상자의 사용 예이다.

<그림 5.1.4> confirm 팝업 대화상자의 예

5.1.3 자바스크립트 출력

자바스크립트 출력은 HTML 문서에서 브라우저에 원하는 내용을 출력시키는 것을 의미한다.

가. document.write( ) 메소드

[예제 5.1.1]에서 보았듯이 자바스크립트는 문자열을 브라우저에 출력할 때 document라는 객체의 다음과 같은 메소드를 사용한다.

document.write(“문자열”)

document.writeln(“문자열”)

document라는 객체는 복잡한 프로그래밍을 일반인도 쉽게 사용할 수 있도록 만들어진 프로그램 모음으로 이해하면 된다. 이 document 객체에는 유용한 메소드를 많이 포함하고 있는데(6.5절 참조) 그 중에 하나가 write( ) 라는 메소드이다. 이러한 메소드를 사용하는 방법은 객체명과 메소드명 사이에 점(‘.’)을 붙이는데 위 예제의 경우 document.write(“문자열”)이라는 것이다.

C나 자바 언어에도 write( ), writeln( )이라는 메소드가 있는데 자바스크립트에서 document.write( )와 document.writeln( )은 큰 차이가 없다. 단지 writln( ) 메소드가 “\n”이라는 문자열을 추가하는데 다른 언어처럼 다음 줄로 넘어가는 것은 아니다. HTML에서 다음 줄로 넘어가려면 <br> 태그를 사용해야 한다.

document.write( ) 메소드는 자바스크립트에서 계산된 내용을 브라우저에 출력할 때도 사용할 수 있다. 5.2 절부터 예제를 통하여 알아보자.

document 클래스와 메소드에 대해서는 6.5절에서 자세히 살펴본다.

나. alert() 메소드

alert( ) 메소드는 단지 사용자에게 경고를 주는 메시지를 브라우저에 팝업 박스를 보여 주어 문제가 되는 부분을 확인하게 하여준다.

alert( )도 자바스크립트의 window 객체에 있는 메소드로서 그 형식은 [표 5.1.5]와 같다.

<그림 5.1.5>는 alert( ) 대화상자의 사용 예이다.

<그림 5.1.5> alert 팝업 대화상자의 예

5.2 변수, 상수, 데이터형 및 수식

5.2.1 변수, 상수와 데이터형

변수(variable)는 자바스크립트가 실행 중에 데이터 값을 저장하는 기억 장소로서 선언 형식은 다음과 같다.

var 변수명, 변수명, …

변수명은 다음과 같은 규칙을 따른다. 앞으로 배우는 함수명도 이 규칙을 따른다.

다음은 가능한 변수명 선언의 예이다.

var a;                        // 한 개의 변수 선언

var n, N;                      // 두 개의 다른 변수 n과 N 선언

var name, student_id, korean;     // 세 개의 변수 선언

var studentName, scoreKorean;    // 해석을 돕기 위해 변수명이 명령문처럼 길다

var statMean, statStdDeviation    // 이 방식을 낙타 표기법(camelCasting)이라고 함

다음은 잘못된 변수명 선언의 예이다.

var if;           // if는 자바스크립트 예약어여서 불가함

var 3n;          // 첫 글자는 반드시 영어 문자여야 함

var %percent;    // 특수문자 % 사용 불가

변수에는 대입연산자‘=’를 이용하여 숫자나 문자열 같은 데이터값을 저장하게 되는데 이러한 데이터값을 상수(literal)라 부른다. 상수의 데이터형(data type)은 다음과 같이 숫자형, 문자형, 불린(boolean)형, 기타 특수형으로 나눌 수 있다.

다음 예와 같이 변수 선언과 동시에 상수를 대입할 수도 있다. 초기값이 없이 선언된 변수는 undefined 값으로 초기화 된다.

var a = 2;

var name = “LEE”

C나 자바에서는 상수를 저장하는 변수의 데이터형(variable data type)을 저장 공간 크기와 함께 정확히 구분한다. 예를 들어 4바이트 정수형 변수, 8바이트 실수형 변수, 1바이트 문자형 변수 등으로 구분한다. 하지만 자바스크립트는 변수형 선언이 없다. 단지 ‘=’를 이용하여 숫자나 문자열 같은 상수를 변수에 저장하면 상수의 데이터형에 따라 변수를 자동으로 숫자형, 문자형, 불린형, 특수형 등으로 구분한다. 이 방식이 C나 자바보다 편리하지만 예기치 않은 실수를 유발할 수도 있어 주의하여야 한다.

5.2.2 연산자와 수식

자바스크립트의 변수에는 상수나 다른 변수, 그리고 여러 가지 연산자의 조합으로 수식(mathmatical expression)을 계산하여 대입할 수 있다. 자바스크립트는 [표 5.2.1]과 같은 산술연산자, 연결연산자, 비교연산자, 논리연산자, 조건연산자, 대입연산자 등을 갖는다.

자바스크립트는 위의 연산자 이외에도 비트(bit)와 시프트(shift) 연산자를 제공하는데 자주 사용되지 않으므로 이 책에서는 생략한다.

가. 산술연산자

산술연산자(arithmetic operator)는 기본적인 사칙 연산을 위한 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)의 다섯 가지이다.

var n = 10;

var sum = 150;

var mean = sum / n;       // 150 나누기 10이 계산되어 15가 됨

C나 자바와 달리 자바스크립트는 산술식 (3 / 2) 같은 정수의 연산도 실수 값 1.5를 계산하니 주의하여야 한다.

 

여러 개의 산술연산자와 변수 및 상수가 혼합된 식을 산술식(arithmetic expression)이라하고 값을 계산하는데 사용된다. 산술식에 산술연산자가 여러 개 있는 경우 우선 순위는 수학의 계산처럼 괄호 ( ) 안에 있는 수식을 먼저 계산하고, * 또는 /을 먼저 하고 + 또는 –를 왼쪽부터 계산하게 된다. ++와  —-는 * / 보다 우선 순위가 높다.

var a = 1 + 2 * 3          // 2*3을 먼저 계산, a는 7

var b = 1 + 2 * 3 / 2 // 2*3/2를 먼저 계산, b는 4

var c = (1 + 2) * 3 / 2 // (1+2)를 먼저 계산, c는 18

연산자 ++와 —-는 한 변수의 값을 1 증가, 1 감소를 편리하게 하기 위해 만들었는데 a++, ++a, a–, –a 의 기능이 조금 달라 주의하여야 한다.

a++는 a값을 먼저 사용한 후에 증가, 즉 b = a++ 이면 a값을 먼저 b에 저장한 후 a값 증가

++a는 a값을 먼저 증가한 후 사용, 즉 b = ++a 이면 a값을 먼저 증가한 후에 b에 저장

a–는 a값을 먼저 사용한 후에 감소, 즉 b = a– 이면 a값을 먼저 b에 저장한 후 a값 감소

–a는 a값을 먼저 감소한 후 사용, 즉 b = –a 이면 a값을 먼저 감소한 후에 b에 저장

나. 연결연산자

연산자 ‘+’는 덧셈에도 사용되지만  문자열과 문자열 또는 변수와 문자열을 합치는 연결 연산자로도 사용된다. 이것도 C나 Java와의 차이점이다.

“abc” + “def”     // “abcdef”가 된다

2 + 3 + “sum”      // 2+3=5를 먼저 계산 후 “sum”을 합쳐 결과는 “5sum”

“sum” + 2 + 3      // “sum”+2=”sum2″를 먼저 계산 후 3을 합쳐 결과는 “sum23”

연결연산자 ‘+’ 는 출력을 위한 변수와 문자를 연결할 때 사용하기도 한다.

document.write(average + “<p>”) // average와 문자열 “<p>”를 연결하여 한 줄을 띄움

다. 비교연산자와 논리연산자

비교연산자(relational operator)는 연산자(==, !=, >, >=, <, <=, ===, !==)를 이용하여 두 수를 비교하는데 사용되는데 결과 값은 true 또는 false가 된다.

2 < 3     // true

a > b     // 변수 a값이 b값보다 큰지 비교

c == d    // 변수 c값이 d값과 같은지, 두 개의 ==를 사용함에 주의

논리연산자(logical operator)는 세 개의 연산자(&&, ||, !)를 이용하여 두 논리 변수식에 AND, OR, NOT 의 논리연산을 하였을 때 [표 5.2.2]와 같은 결과 값을 계산한다.

라. 조건연산자

조건연산자 ‘(조건) ? 변수1 : 변수2’는 5.3절에서 배우는 if else 문의 간단한 형태로서 (조건)이 true이면 변수1의 값을, false이면 변수2의 값을 갖는다. 다음 예는  변수 today가 문자열 “monday” 와 같으면 변수 answer가 “Yes”이고 아니면 “No”값을 갖는다.

answer = (today == “monday”) ? “Yes” : “No”

마. 대입연산자

대입연산자 = 은 이 연산자 오른쪽의 수식 값을 연산한 후 연산자 오른쪽의 변수에 대입한다.

대입연산자 +=, -=, *=, /= 는 편리를 위해 만든 연산자로서 다음을 의미한다.

a += b 는 a = a + b를 의미

a -= b 는 a = a – b를 의미

a *= b 는 a = a * b를 의미

a /= b 는 a = a / b를 의미

바. 연산자 우선순위

수식 계산을 위한 여러 개의 산술연산자, 논리연산자, 대입연산자가 섞여 있는 경우 연산자들의 우선순위는 [표 5.2.3]과 같다.

<그림 5.2.1>은 자바스크립트로 변수를 선언하여 평균을 계산하는 프로그램 예이다. 이 예에서는 변수의 값을 출력하기 위하여 document.write( ) 메소드를 사용하였는데 문자열, 변수, 그리고 다시 문자열과 변수, <br>, <p>등을 혼합하여 출력하였다. 정수 나누기 정수 (150/20)가 정확히 7.5로 계산되었음을 주목하라.

 

<그림 5.2.1> 자바스크립트를 이용한 산술 계산의 예

5.3 조건문

자바스크립트 언어의 실행 순서는 일반적으로 위에서 아래, 왼쪽에서 오른쪽이다.  if, switch 등의 조건문을 사용하면 이러한 실행 순서를 조건에 맞추어 다르게 할 수 있다.

5.3.1 if 문

if (조건식) { } 문은 조건식이 true 일 때만 { } 안의 코드를 실행한다. if (조건식) {명령문1} else {명령문2} 는 조건식이 true일 때는 명령문1을 실행하고 false일 때는 명령문2를 실행한다. 조건식이 여러 개 있는 다중 if문도 많이 사용된다.

<그림 5.3.1>은 5.1절에서 살펴본 prompt() 대화상자를 이용하여 입력된 결과를 if 문으로 처리하는 자바스크립트 프로그램 예이다.

<그림 5.3.1> if문을 이용하는 자바스크립트의 예

5.3.2 switch 문

switch 문은 변수식(expression)의 값과 일치하는 case 값의 코드 블록을 실행한다. 일치하는 값이 없을 경우는 default 문의 블록을 실행하는데 이러한 default문을 생략이 가능하다. [표 5.3.2]처럼 명령문 블록은 중괄호 { }를 사용하지 않아 주의하여야 한다. case문의 값은 식은 안되고 상수만 가능하다.

case 문내의 블록을 실행한 후 break문이 없으면 이를 만날 때까지 다음 명령문을 실행하니 주의하여야 한다.

<그림 5.3.2>는 switch 문을 이용하여 오늘의 요일을 구하여 무슨 요일인지 출력해주는 자바스크립트 프로그램의 예이다.

<그림 5.3.2> swithch 문을 이용한 오늘의 날짜와 요일 구하기

위의 예에서 자바스크립트의 Date라는 객체의 getYear( ), getMonth( ), getDay( )라는 메소드를 이용하였다. getYear( ) 메소드는 1900년부터 시작해서 현재가 몇 년 째인지 계산해주기 때문에 올 해를 계산하려면 여기에 1900을 더해주어야 한다. getMonth( ) 메소드는 월의 시작을 0서부터 계산함으로 1을 더해주어야 한다.

5.4 반복문

자바스크립트에서 반복에 사용되는 명령문은 for 문과, while 문, do-while이 세 가지가 있다.

5.4.1 for 문

for문은 반복횟수를 아는 경우 많이 사용하는데 그 형식은 [표 5.4.1]과 같다.

for(초기식,조건식,증감식) { } 문은 초기식을 계산한 후 조건식을 체크하여 { }안의 명령문을 실행한다. 그리고 증감식을 계산한 후 조건식을 체크하여 반복 여부를 결정한다.

조건식은 논리 연산이나 논리값을 가진 변수를 사용한다. 조건식의 결과가 false이면 for 문을 빠져나가 그 아래에 있는 명령문을 실행한다.

for문의 중괄호 { }안의 명령문이 하나만 있을 경우에는 중괄호를 생략할 수 있다.

<그림 5.4.1> for 문의 실행순서

다음은 여러 가지 for 문의 형태에 따른 i값의 변화를 살펴본 예이다.

EX050401.htm은 for 문을 사용하여 1에서 100까지의 숫자를 더하는 프로그램 예이다.

<그림 5.4.2> for 문을 이용한 합계 계산

EX050402.htm은 오늘 1원을 저금하고 내일은 2원, 모래는 4원 등 2배씩 저금하여 20일간 저금액을 for 문을 이용하여 계산하는 프로그램 예이다.

<그림 5.4.3> for 문을 이용한 저금액 계산

for문 내부에 다시 for문을 중첩 사용하여 다양한 계산을 할 수 있다. EX050403.htm은  두 개의 중첩된 for 문을 이용하는 예이다.

<그림 5.4.4> 두 개의 중첩된 for 문을 이용하는 예

5.4.2 while 문

while (조건식) { } 은 조건식이 true일 경우 { ]안의 명령문을 반복한다. 그 형식은 [표 5.4.2]와 같다.

do { } while (조건식)은 먼저 { }의 명령문을 실행하고 조건식을 검사하여 true이면 { }의 명령문을 다시 실행한다.

모든 for 문의 초기식을 while 문 앞에 위치시키고, 증감문을 while 문 안의 명령문으로 만들면 동일한 반복문이 된다. 예를 들어 1에서 10까지의 합을 구하는 for 문을 이용한 프로그램을 while 문을 이용한 프로그램으로 바꾸면 다음과 같다.

// for 문을 이용한 1에서 10까지의 합

int sum = 0;

for (int i=1; i<=10; i++) {

sum = sum + i;

}

document.write(“합 = “+sum);

 

// while 문을 이용한 1에서 10까지의 합

int sum = 0;

int i=1;

while (i<=10) {

sum = sum + i;

i++;

}

document.write(“합 = “+sum);

EX050404.htm은 while 문을 이용한 자바스크립트 프로그램 예이다.

<그림 5.4.5> while 문을 이용한 계산 예

이 예에서는 문단의 id=“demo”를 지정하고 document 클래스의 getElementById(“demo”) 메소드를 이용하여 원하는 내용을 브라우저에 출력하는 방법을 이용하였다. 자바스크립트에서는 이와 같은 방법이 많이 이용된다.

while 문을 사용하면 for문 보다 편리할 때가 있다. EX050402.htm은 오늘 1원을 저금하고 내일은 2원, 모래는 4원 등 2배씩 저금을 20일간 하는 계산이었다. 만일 전체 저금액이 1억원을 돌파하는 것이 몇 일째인지 조사하는 문제와 같이 특정한 조건을 만족할 때 반복문을 멈추려면 while 문이 편리하다. EX050405.htm은 이와 같은 while 문의 예이다.

<그림 5.4.6> while 문을 이용한 계산 예

5.4.3 break와 continue 문

break 문은 for나 while 반복문에서 빠져나오게 하는 명령문이다.

여러 반복문이 중첩된 경우는 현재 반복문 하나만 빠져나온다.

continue 문은 for와 같은 반복문에서 다음 반복으로 넘어가고자 할 때 사용된다.

대개 if (조건식) {continue]와 같이 쓰이며 조건식이 true일 경우 다음 반복을 수행하도록 하여 준다.

5.5 배열

배열은 동일한 변수명을 가지면서 첨자를 사용하는 변수들의 모임으로 자바스크립트주요 클래스 중의 하나인 Array 클래스의 객체를 이용하여 만든다. 자바스크립트에서는 변수와 같이 배열의 데이터형은 구분하지 않는다. [표 5.5.1]의 배열변수명은 Array 클래스의 객체를 선언하는 것이다(6.1절 참조).

만일 score = new Array(3) 으로 배열을 생성하면 score[0], score[1], score[2] 와 같이 세 개의 원소를 가지는 배열이 생성된다. C 또는 자바와 같이 첨자가 0부터 시작함을 주의하여야 한다. 여기서 첨자 0,1,2 등을 인덱스(index)라 부른다.

배열의 데이터형 선언을 하지 않기 때문에 각 배열 변수에 통일된 데이터 형 값을 넣을 필요는 없다. 즉 다음과 같은 배열 값이 가능하다.

score[0] = “LEE”

score[1] = 90

score[2] = 80

배열을 이용하면 for와 같은 반복문으로 데이터 처리를 많이 효율적으로 할 수 있다. EX050501.htm은 배열을 이용하는 자바스크립트 프로그램의 예이다. 배열 lee의 크기는 4로서 lee[0], lee[1], lee[2], lee[3]가 생성됨을 주목하라.

<그림 5.5.1> 배열을 이용한 계산 예

자바스크립트에서 배열은 처음 만들어진 크기로 고정되지 않고 필요하면 하나씩 크기를 늘일 수 있다. <그림 5.5.1>의 예에서 배열 lee의 크기는 4로서 lee[0], lee[1], lee[2], lee[3]에 값을 넣었다. 추가로 lee[4] = 70; 이라고 하면 배열 lee의 크기는 5가 된다. 여기에 만일 lee[7] = 70; 이라고 하면 배열의 크기가 8이 된다.

배열에 값이 있을 때 for 문을 이용하여 평균과 분산을 구하는 EX050502.htm 프로그램을 살펴보자. 여기서 배열의 길이를 알아내는 length 메소드를 이용하였다. 평균과 분산 공식은 다음과 같다.

<그림 5.5.2> 배열을 이용한 평균 및 분산 계산

배열에 값이 있을 때 최솟값과 최댓값을 구하는 EX050503.htm 프로그램을 살펴보자.

<그림 5.5.3> 배열을 이용한 최솟값 및 최댓값 계산

배열의 원소를 값들의 오름차순(ascending) 또는 내림차순(descending)으로 정렬(sorting)할 필요가 많이 있을 수 있다. 여러 가지 알고리즘이 많이 개발되어 있는데 EX0504.htm 프로그램은 for 명령문을 두 번 사용하는 선택적 정렬(selection sorting) 알고리즘의 예이다.

<그림 5.5.4> 배열의 오름차순 정렬

5.5.1 Array 객체의 메소드

Array 객체 [표 5.5.2]와 같은 여러 가지 메소드를 제공한다.

배열은 객체이기 때문에 [표 5.5.2]의 메소드는 다음과 같이 사용할 수 있다.

배열변수명.메소드명(매개변수, … , )

 

예) score.sort(), score.length

EX050505.htm은 배열 객체의 메소드를 이용하는 자바스크립트 프로그램의 예이다. 이 예에서 for (var i=0; i<=3; i++) 명령문을 자바스크립트의 length 메소드를 사용하여 다음과 같이 하였다.

for (var i=0; i<lee.length; i++) { … }

<그림 5.5.5> 배열의 여러 메소드를 이용한 계산 예

5.5.2 배열과 객체 제어문

객체 제어문은 배열의 객체를 사용할 때 많이 사용되는 것으로 for ~ in 문과 with 문이 있다. for ~ in 문은 객체에 들어 있는 속성을 순서대로 반복하여 수행한다.

with 문은 객체에 포함된 속성이나 메소드를 여러 번 사용할 때 with 문으로 한 번 선언하고 그 안에서 속성이나 메소드를 사용할 수 있도록 하여 준다.

document 객체의 write 메소드를 여러 번 사용할 때는 다음과 같이 적을 수 있다.

with(document) {

write(“첫 째 줄 <br>”)

}

EX050506.htm은 배열과 객체 제어 for문을 이용하는 자바스크립트 프로그램 예이다.

<그림 5.5.3> 배열과 객체 제어 for문을 이용한 계산 예

5.6 함수

함수는 비슷한 작업을 반복해서 수행할 때 사용자가 정의해서 사용하는 유용한 프로그램으로 어느 프로그래밍 언어도 함수 형식을 제공한다.

함수는 매개변수를 사용해서 값을 전달받고, 이 매개변수 값을 이용해서 필요한 값을 계산한 후, 주 프로그램으로 되돌려주는(return) 형태로 구성되어있다.

자바스크립트에서는 Function 클래스 객체를 이용하는 간단한 함수, 사용자 정의 함수, 재귀함수, 전역함수 등 네 가지 형식의 함수를 제공한다.

5.6.1 Function 객체를 이용하는 간단한 함수

간단한 함수는 내장되어 있는 Function 클래스의 객체를 이용하여 다음과 같이 정의할 수 있다.

EX050601.htm은 Function 객체를 이용하는 간단한 함수 프로그램의 예이다.

<그림 5.6.1> Function 객체를 이용하는 함수의 계산 예

5.6.2 사용자 정의 함수

자바스크립트에서 사용자 정의 함수는 <head> 와 </head> 태그 사이에 넣어서 작성하는데 함수를 먼저 정의하고 후에 함수를 사용하려고 하기 때문이다. 함수의 형태는 다음과 같다.

일반적으로 함수는 매개변수를 전달 받아 필요한 계산을 한 후 결과 값을 return 해 준다. 하지만 함수의 매개변수가 없을 수도 있고, 필요한 작업만 하고 결과 값을 return하지 않는 함수도 있을 수 있다.

함수의 호출은 다음 두 가지 방법이 있다.

변수이름 = 함수이름(매개변수1, 매개변수2, … ) // 함수 호출 후 리턴값 받음

함수이름(매개변수1, 매개변수2, … )          // 함수 호출 후 리턴값 받지 않음

EX050602.htm은 두 수와 연산자를 매개변수로 하여 계산을 하는 함수의 예이다.

<그림 5.6.2> 사용자 정의 함수를 이용한 계산 예

EX050603.htm은 배열을 매개변수로 하는 함수의 예이다. 함수를 이용하여 길이기 서로 다은 두 배열 a[]와 b[]의 평균을 구하였다.

<그림 5.6.3> 배열을 매개변수로 이용한 함수 예

EX050604.htm은 하나의 배열을 입력 매개변수로 하고 다른 배열을 출력 매개변수로 이용하는 함수의 예이다. 출력할 통계량이 관찰수, 최솟값, 최댓값, 합계, 평균 등의 다섯 가지이다. 이 함수를 이용하여 길이기 서로 다은 두 배열 a[]와 b[]의 통계량을 구하였다. 편의성을 위하여 인쇄하는 함수도 하나 더 만들었다.

<그림 5.6.4> 한 배열을 입력 매개변수로 하고 다른 배열을 출력 매개변수로 이용하는 함수 예

EX050604.htm에서 리턴할 함수 값이 단일한 데이터가 아닌 경우에 배열을 이용하는 경우를 살펴보았다. 즉, 데이터의 개수, 최소, 최대, 합, 평균을 순서대로 모아 다음과 같은 배열로 만들어 리턴하였다.

[4, 60, 90, 300, 75]

하지만 이러한 방식은 각 윈소가 어떤 의미인지를 프로그래머가 일일이 기억하고 있어야 하는 문제가 있다. 각 원소의 의미가 명시적으로 드러나 있지 않기 때문에 나중에 함수의 결과 값을 사용할 때 혼란이 생길 가능성이 높다. 이와 같이 함수의 결과 값이 복잡한 구조를 가진 경우에 자바스크립트에서는 JSON 형식을 이용하는 것이 유용하다. 위의 예 경우에는 간단히 전체를 중괄호로 둘러싸고 이름(name)과 값(value)을 콜론 기호로 짝을 지어 쉼표로 구분하여 나열하면 된다.

{

n : 4,

min : 60,

max : 90,

sum : 300,

mean : 75

}

 

EX050604.htm 프로그램을 JSON 형식을 이용하여 작성하여 보면 다음과 같다. 결과는 동일하다.

<그림 5.6.4-1> EX050604에서 배열 대신 JSON 데이터 형식을 이용하는 함수 예

5.6.3 재귀함수

함수 내부에서 자기 자신을 호출하는 함수를 재귀(recursive) 함수라 부른다. 팩토리얼(factorial)과 같은 계산에 유용하다.

EX050605.htm은 재귀 함수를 이용하여 팩토리얼(factorial)을 계산하는 자바스크립트 프로그램 예이다.

<그림 5.6.5> 재귀함수를 이용한 계산 예

5.6.4 자바스크립트 전역 함수

자바스크립트는 어디서나 사용할 수 있는 몇 가지 유용한 프로퍼티(property)와 함수를 제공하는데 이를 전역 프로퍼티(Global Property)와 전역 함수(Global Function)라 부른다. [표 5.6.3]은 infinity, NaN, undefined 프로퍼티의 설명이다.

[표 5.6.4]는 자바스크립트에서 사용할 수 있는 주요 전역 함수에 대한 설명이다.

EX050606.htm은 eval( ) 함수를 이용한 자바스크립트 프로그램 예이다.

<그림 5.6.6> eval( ) 함수를 이용한 예