제 1 장 자바스크립트란 ?

제 제 11 장장자바스크립트란 자바스크립트란 ??

자바스크립트자바스크립트 (JavaScript)(JavaScript) 자바스크립트 (JavaScript) 는 기존 HTML 의 정적인 특성을 보완하여 사용자의 요구에 따른 상호 작용이 가능한 웹 페이지를 작성하게 하는 대표적인 스크립트 언어이다 .

스크립트 종류

① Javascript 는 네스케이프사와 선 마이크로시스템사가 공동으로 개발한 스크립트 언어로서 넷스케이프나 익스플로러 등과 같은 모든 웹브라우저에서 동작한다 .

② VBscript 는 마이크로소프트사에서 비주얼베이직과 비슷한 문법 체계로 개발한 언어이며 , 익스플로러 브라우저에서만 작동된다 .

③ Jscript 역시 마이크로소프트사에서 Javascript 에 대항하기 위해서 VBscript 단점을 보안하여 개발한 스크립트 언어이다 .

자바스크립트로 할수 있는 일자바스크립트로 할수 있는 일

① 웹 페이지를 만들 때 , 사용자의 마우스 클릭이나 키보드 조작에 의해서 발생하는 이벤트를 웹 서버에 의존하지 않고 직접 처리해 줄 수 있도록 하는 기능

② 웹 서버에 사용자가 입력한 데이터를 전송하기 전에 사용자가 입력한 데이터를 확인하여 오류를 잡아주는 기능

③ 사용자가 새로운 웹 페이지를 열거나 이동할 때 원하는 작업을 수행시킬 수 있는 기능

④ 웹 페이지에 계산기나 달력 등을 만들어 주는 기능

⑤ 웹 페이지 상의 날짜 형식을 자동으로 변경시키는 기능 .

⑥ 웹브라우저 자체의 윈도우 , 문서 내용 , 주소 입력 부분 , 상태바 , 도구바 등의 객체들을 조작하는 기능

⑦ 동적인 메뉴나 애니메이션 등을 사용할 수 있는 기능

⑧ 사용자가 방문했던 웹 페이지를 기록해 놓은 기능

⑨ 연결된 웹 페이지가 팝업 윈도우 내에 나타나게 하는 기능 .

⑩ 마우스의 움직임에 따라 텍스트나 그래픽 이미지를 변화시키는 기능 등

자바스크립트와 자바자바스크립트와 자바

클라이언트 측 자바스크립트와 서버 측 자바스크립트클라이언트 측 자바스크립트와 서버 측 자바스크립트

제 제 22 장장자바스크립트 실행방법을 자바스크립트 실행방법을

통한 맛보기 프로그램 통한 맛보기 프로그램 따라하기따라하기

기본적인 자바스크립트 실행 방법기본적인 자바스크립트 실행 방법 : <SCRIPT>: <SCRIPT> 태그 사용태그 사용<SCRIPT>

자바스크립트 명령들

</SCRIPT> <HTML> <HEAD> <SCRIPT>  </SCRIPT> <HEAD> <BODY> </BODY></HTML>

<SCRIPT> <SCRIPT> 태그에 태그에 LANGUAGE LANGUAGE 옵션 사용옵션 사용LANGUAGE 옵션을 기술하는 방법

① 자바스크립트를 기술하는 예

<SCRIPT LANGUAGE="JavaScript">


</SCRIPT>

-> 만일 LANGUAGE 옵션을 생략하면 브라우저는 자동으로 JavaScript 로 인식한다 .

② 자바스크립트의 버전을 기술하는 예

<SCRIPT LANGUAGE="JavaScript1.2">


</SCRIPT>

③ VB 스크립트를 기술하는 예

<SCRIPT LANGUAGE="VBScript">

VB 스크립트 명령들

</SCRIPT>

예제예제<HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> document.write "<p> VBScript 연습입니다 ." </SCRIPT> </HEAD> <BODY> </BODY></HTML>

자바스크립트 함수 호출 예자바스크립트 함수 호출 예 <HEAD>

<SCRIPT>

function test() {

document.write(" 안녕하세요 ? 자바스크립트 <br>");

document.write(" 자바스크립트 함수 호출의 예입니다 .<br>");

}

</SCRIPT>

<SCRIPT>

test(); // test 함수 1 번 호출



</SCRIPT>

</HEAD>

자바스크립트 소스 파일을 삽입하는 방법자바스크립트 소스 파일을 삽입하는 방법

① SRC(=source) 옵션에 메모장과 같은 편집기로 미리 작성된 소스 파일명을 기술한다 .

<SCRIPT LANGUAGE="JavaScript" SRC=" 소스파일명 .js">

</SCRIPT>

② 이 때 주의해야 할 점은 자바스크립트 소스를 담은 파일의 확장자는 반드시 ".js" 이어야 한다 .

[ 소스파일명 .js]



③ 자바스크립트 명령으로 미리 작성된 소스 (source) 파일을 사용하여 자바스크립트를 실행하는 장점은 미리 작성된 소스 (source) 파일을 서로 다른 여러 HTML 문서에서 삽입하여 사용할 수 있다

예제예제1) 미리 작성된 test.js 파일

document.write(" 자바스크립트 소스 파일을 삽입하여 실행하는 예제로서 ! <p> ");

document.write(" test.js 파일이 실행되는 예 입니다 . ! <p> ");

2) test.js 파일을 실행시키기 위해서 <SCRIPT> 태그 내의 SRC 옵션에 test.js 파일을 명시 .

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript" SRC="test.js">

</SCRIPT>

<HEAD>

<BODY>

</BODY>

</HTML>

이벤트 핸들러 이벤트 핸들러

onClick onClick 이벤트 핸들러로 자바스크립트 명령을 실행한 예이벤트 핸들러로 자바스크립트 명령을 실행한 예

<html>

<body><center>

<form>

<INPUT type = "button" value = " 배경색 변경 " onClick="document.bgColor='red';">

</form></center>

</body>

</html>

onLoad onLoad 이벤트 핸들러로 자바스크립트 명령을 실행이벤트 핸들러로 자바스크립트 명령을 실행

<html>

<body onLoad="alert(' 제 홈페이지를 방문한 것을 환영합니다 ')" >

<h4> 특정 웹 페이지가 접속되었을 때 관련 HTML 문서가 실행될 때 자동으로 동작 하는 onLoad 이벤트 핸들러를 사용하는 예

</body>

</html>

onUnload onUnload 이벤트 핸들러로 자바스크립트 명령을 실행이벤트 핸들러로 자바스크립트 명령을 실행

<html>

<body onUnload="alert(' 제 홈페이지를 방문해 주셔서 감사합니다 .')" >

<h4> 접속한 웹 페이지를 떠날 경우에 자동으로 동작하는 onUnload 이벤트 핸 들러를 사용하는 예 </h4>

<h5> 다른 사이트로 이동하거나 웹브러우저의 종료 버튼을 클릭하면 onUnload 이벤트 핸들러에 정의한 alert 대화상자가 자동으로 실행됩니다 . </h5>

</body>

</html>

하이퍼 링크를 클릭하여 암호 확인 자바스크립트하이퍼 링크를 클릭하여 암호 확인 자바스크립트<HTML>

<HEAD>

<SCRIPT language="JavaScript">

function password_check(){

passwd=prompt(" 암호를 입력하세요 ","");

if (passwd == "simmani")

location.href = "http://www.simmani.com";

else

alert(" 암호를 기억한 후 방문해 주세요 !!!"); }

</SCRIPT>

</HEAD>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<p><a href="javascript:password_check();">

암호를 묻는 자바 스크립트 예제입니다 .. 클릭하세요 !! </a></p>

<p> 암호를 묻는 대화상자에서 암호가 맞으면 심마니 검색 사이트로

이동하는 자바스크립트 예제입니다 . !!</p>

<p> 참고로 , 정확한 암호는 simmani 입니다 .</p>

</body>

</html>

마우스 이벤트와 이미지 변경마우스 이벤트와 이미지 변경<html>

<body>

<center>

<a href="javascript://" onMouseOver="document.images[0].src='bird.gif';"

onMouseOut="document.images[0].src='tiger.gif';">

<img src=bird.gif ></a><br><br>

이미지가 변경되는 자바스크립트의 이벤트 처리 예제입니다 .. <P>

날아가는 새 이미지에 마우스를 올려놓은 후 잠시후에 <br>

마우스를 새 이미지에서 벗어나면 호랑이 이미지로 바뀝니다 . <br>

다시 호랑이 이미지에 마우스를 올려놓으면 날아가는 새 이미지로 변경되고요 ..

</center>

</body>

</html>

계산기 활용 예계산기 활용 예

제 제 33 장장자바스크립트 기본자바스크립트 기본

코딩시 지켜야 할 점 코딩시 지켜야 할 점

영문자 , 숫자 , 특수 문자들을 사용하여 자바스크립트 프로그램은 내용에 따라 여러 라인의 문장으로 구성된다 .

① 각 라인은 한 문장이상을 자유롭게 코딩할 수 있다 .

② 한 라인에 하나 이상의 문장을 기술하고자 할 때는 문장과 문장 사이에 반드시 세미콜론 (;) 을 표시하여 구분 한다 .

③ 만일 한 라인에 하나의 문장만을 기술하고자 할 때는 문장 끝에 세미콜론 (;)을 생략해도 상관없다 .

④ 프로그램 실행 순서는 특별한 제어가 없는 한 라인 순으로 처리된다 .

주석주석 (comment)(comment) 달기달기 보통 한 줄의 주석을 달아줄 때는 "//" 를 사용하고 , 여러 줄의 주석을 달아줄 경우에는 "/*" 와 "*/" 를 사용한다 .

[ 예 ]

/* 여러 줄의 주석을 달아줄 경우에 사용하는 주석문입니다 . */

// 한 줄의 주석을 달아줄 때 사용하는 주석문입니다 .

변수 이름을 만들 때 주의할 점변수 이름을 만들 때 주의할 점① 자바스크립트에서 변수 이름을 만들 때 첫 자는 반드시 영문자나 “ _" 로 시작해야 하고 , 두 번째 문자부터는 영문자 , 숫자 등을 조합하여 의미있게 구성할 수 있다 .

[ 올바르게 만든 예 ] : sum, irum, _javaScript, lhk140 등

[ 잘못 만든 예 ] : 3sum, *irum, 140script 등

② 대문자와 소문자를 구별해서 변수 이름을 만들어야 한다 .

대소문자로 서로 다르게 구성되었기 때문에 서로 다른 변수로 취급됨을 주의해야 한다 .

result, Result, RESULT, REsult 등

basic, BASIC, Basic basIC 등

③ 자바스크립트에서 특수한 용도를 가지고 미리 정의된 단어들인 if, var 등과 같은 예약어 (reserved word) 는 변수 이름으로 사용할 수 없다 .

변수명에서 대소문자를 구별하지 않아 오류가 발생한 예변수명에서 대소문자를 구별하지 않아 오류가 발생한 예

<html>

<head>

<script language="JavaScript">

a = 10; b = 5;

RESULT = 100;

result = a + b;

document.write(" <h3> 변수명에 대소문자가 구별되지 않아 <p>");

document.write(" 10 + 5 의 결과가 100 이라고 잘못 나온 예제입니다 .");

alert( a + " + " + b + " = " + RESULT);

</script>

</head>

</html>

자바스크립트의 자바스크립트의 44 가지 자료형가지 자료형 (data type)(data type)

1. 수치 자료형

2. 문자열 자료형

3. 불리언 자료형

4. null

수치 자료형 수치 자료형 - - 정수형정수형① 10 진수 정수형

0 에서 9 사이의 숫자로 나타낸다 .

② 8 진수 정수형

8 진수 (octal) 정수 표현은 숫자 0 으로 시작되어 0 과 7 사이의 숫자로 나타내며 , 8 진수 정수로 표현된 자료는 출력될 때 10 진수로 변환되어 출력된다 .

Ex: 015, 067 등

③ 16 진수 정수형

16 진수 (hexadecimal) 정수 표현은 0x( 숫자 0 과 알파벳 x) 혹은 0X 로 시작되어 0 에서 f 사이의 숫자로 나타내며 , 16 진수 정수로 표현된 자료는 출력될 때 10진수로 변환되어 출력된다 .

Ex: 0xa1, 0x6b 등

예제예제 <html>

<head>


// 8 진수 12 는 10 진수로 10 이다 .

document.write( 012 + "<br>" )

//16 진수 f 는 10진수로 15 이다 .

document.write(0xf + "<br>")

</script>

</head>

</html>

■ 실행 결과

10

15

수치 자료형 수치 자료형 - - 실수형실수형① 110.23, 3.14159, -23.432 등과 같이 소수 부분이 있는 숫자 .

② 지수 형식은 실수 중에서 아주 작은 숫자나 아주 큰 숫자를 짧게 표현하기 위해 사용한다 . E(exponent) 는 10 의 몇승을 의미한다 .

120000000 = 1.2 * 108 -> 1.2E+8

-0.00000000067 = -6.7 * 10 -10 -> -6.7E-10


// 실수 계산에서 근사치 결과가 발생하는 경우

a = 10;

b = 5.444

result = a + b;

document.write(" 결과는 : " + result); </script>

[ 실행 결과 ]

결과는 : 15.443999999999999

① 자바스크립트에서는 예와 같이 특수 문자 이중 따옴표 (" ") 나 단일 따옴표 (' ') 사이에 들어가는 자료를 모두 문자열로 처리한다 .

" 대화 상자 ", "10 + 5",

' 두수 ', ‘123’

② 자바스크립트는 문자열 자료임을 나타내주는 이중 따옴표 (") 나 단일 따옴표 (') 를 원래의 문자 자료로 출력하고 싶으면 , 특수 문자 “ \"(backslash)를 앞에 적어 준다 .

문자형 자료형문자형 자료형

예제예제 <html><head><script language="JavaScript"> // 출력 결과와 같이 이중 따옴표 (") 가 출력된다 .document.write("\" 이중 따옴표 \" 의 출력을 보여주는 예제입니다 .<BR>");// 출력 결과와 같이 단일 따옴표 (') 가 출력된다 .document.write("\' 단일 따옴표 \' 의 출력을 보여주는 예제입니다 .");</script></head> </html>[ 실행 결과 ]" 이중 따옴표 " 의 출력을 보여주는 예제입니다 .' 단일 따옴표 ' 의 출력을 보여주는 예제입니다 .

불리언 자료형불리언 자료형① 조건에서 참 (true) 과 거짓 (false) 값으로 결과를 나타내는 불리언 (Boolean) 자료형이 요구된다 .

② 불리언 자료형은 true 와 false 라는 값만 사용된다 .a= true, b = false

예제예제<html>

<head><script language="JavaScript">a = false;if(a)

document.write("true");else

document.write("false");</script></head>

</html>

[ 실행 결과 ]false

Null Null

① 자바스크립트는 특별하게 null 이라는 자료 값이 사용되고 있다 . 이 null이라는 값은 말 그대로 아무 값도 없다는 것을 의미한다 .

② 자바스크립트에서 변수를 선언할 때 var 라는 예약어 (reserved word) 를 사용하여 변수를 선언해주는데 , 만일 어떤 자료형의 값을 갖게될지 모르는 변수의 경우에는 null 값으로 초기화해 주면 안전하다 .

변수를 선언하지 않고 사용하는 예변수를 선언하지 않고 사용하는 예자 !! 자바스크립트는 다른 프로그래밍 언어와 다르게 변 수 에 자 료형 을 선 언 하 지 않 고 , 변 수 에 자료를 할당하기만 하면 해당하는 4 가지 자료형 (data type) 중의 하나인 변수로 자동 선언되어 사용된다 .

javaScript = 80 // javaScript 는 정수형 변수이다 .

pi = 3.14159 // pi 는 실수형 변수로 이다 .

name = " 임 홍준 " // name 은 문자열 변수이다 .

bool = false // bool 은 불리언 변수이다 .

empty = null // empty 는 null 값을 갖는 변수이다 .

varvar 를 이용하여 변수를 선언하는 방법를 이용하여 변수를 선언하는 방법

var javaScript // javaScript 정수형 변수이다 .

var pi = 3.14159 // pi 는 실수형 변수이다 .

var name = " 임 성준 " // name 은 문자열 변수이다 .

var bool = false // bool 은 불리언 변수이다 .

var empty = null // empty 는 null 값을 갖는 변수이다 .

// 변수 area 는 앞으로 사용하기 위해 자료형은 결정되지 않고 선언만 된 경우이다 .

var area;

// radius 는 초기 값 10 을 갖는 정수형 , pi 는 초기 값을 3.14159 로 갖는 실수형 변수로서 사용된다 .

var radius=10, pi = 3.14159;

// area 변수는 실수와 정수들의 곱한 결과가 저장되기 때문에 실수형 변수가 된다 . */

area = pi * radius * radius

자동으로 변수의 자료형 변환 자동으로 변수의 자료형 변환 : : 묵시적인 형 변환묵시적인 형 변환var test =10 // test 는 처음에 정수형 변수이다 .

test = " 문자열로 변환 " // 이때는 문자열 변수로 변환된다 .

test = true // 이때는 불리언 변수로 변환된다 .

자동으로 변수의 자료형 변환 자동으로 변수의 자료형 변환 : : 묵시적인 형 변환묵시적인 형 변환<script language="JavaScript">

jungsu = 5; silsu = 10.5;bool = truestring = " 문자열 ";

/* 정수 변수인 jungsu 는 실수 변수인 silsu 와 더하여져

자동으로 실수형 변수로 변환된다 . */

jungsu = jungsu + silsu;

/* 실수 변수인 silsu 는 문자열 변수와 실수 변수 그리고 불리언 변수를

"+" 기호에 의해 결합시키면 문자열 변수로 자동 형 변환된다 . */

silsu = string + silsu + bool;

document.write( jungsu + "<br>");

document.write( silsu );

</script>

[ 실행 결과 ]

15.5

문자열 10.5true

document.write() document.write() 명령에 의해 출력하기 명령에 의해 출력하기 11

a = 10; b = 5;result = a + b;document.write( a + " 과 " + b + " 를 더한 결과는 " + result + " 이다 .");

[ 실행 결과 ]10 과 5 를 더한 결과는 15 이다 .

document.write() document.write() 명령에 의해 출력하기 명령에 의해 출력하기 22주의할 점은 document.write( a + b); 문장과 같이 a 와 b 가 수치 변수라면 수치 변수들 사이에 "+" 가 사용되면 원래의 더하기 연산이 수행된 결과가 예와 같이 15가 출력된다 .a = 10; b = 5;document.write( a + b );[ 실행 결과 ]15 그러나 예와 같이 문자열 상수 다음의 수치 변수 a 가 문자열로 자동 형 변환되어 " 결과 :10" 이 되고 , 그 다음 수치 값 5 도 문자열로 변환되어 실행 결과처럼 사용자의 의도와는 다르게 " 결과 :105" 라고 출력된다 .

a = 10; b = 5;document.write( " 결과 :" + a + b );[ 실행 결과 ]결과 :105

document.write() document.write() 명령에 의해 출력하기 명령에 의해 출력하기 33⑧ document.write() 명령으로 출력할 때 "(" 와 ")" 사이에 <h3>, <hr> <p>, <br> 등 HTML 태그를 문자열 상수처럼 취급하여 HTML 태그의 기능을 활용하여 다양한 출력을 할 수 있다 .

<html>

<head>


a = 10; b = 5;

result = a + b;

document.write( "<h2>" + a + " 과 " + b + " 를 더한 결과는 <br> " + "<h1>" + result + " 이다 .");

</script>

</head>

</html>

내장 함수 내장 함수 alert()alert() 에 의해 출력하기 에 의해 출력하기 11① alert() 내장 함수는 메시지와 확인 버튼만으로 구성되는 대화상자로서 경고나 인사말 등과 같은 사용자의 요구를 받을 필요가 없는 메시지를 출력하는 경우에 주로 사용되는데 document.write() 명령처럼 프로그램에서 사용하는 변수나 상수들을 출력하는데 이용한다 . a = 10; b = 5;result = a + b;alert( " 두수 " + a + " 와 " + b + " 를 더한 결과는 " + result + " 이다 ");

② alert() 함수에서 "(" 와 ")" 사이는 출력될 메시지를 기술하는 부분으로 document.write() 명령에서 설명한 것과 동일하게 출력될 변수나 상수들 사이에 "+" 로 구분하면서 출력시키면 된다 .

③ document.write() 명령과의 차이점은 alert() 함수에서는 "(" 와 ")" 사이에 <h3>, <hr> <p>, <br> 등 HTML 태그를 사용할 수 없다는 점이다 . 만일 사용하면 실행 결과처럼 HTML 태그가 문자열로 취급되어 그대로 출력된다 .

내장 함수 내장 함수 alert()alert() 에 의해 출력하기 에 의해 출력하기 22

증감 연산자와 산술 연산자 그리고 우선순위증감 연산자와 산술 연산자 그리고 우선순위

증감 연산자 사용 예증감 연산자 사용 예1) 증가 연산자 : ++

① i++ 는 i = i + 1 과 동일

sum = sum + i++;

// sum = sum + i 를 먼저 수행하고 난 후에 i = i + 1 을 수행

② ++i 는 i = i + 1 과 동일

// i = i + 1 을 먼저 수행하고 난 후에 sum = sum + i 를 수행sum = sum + ++i;

2) 감소 연산자 : --① i-- 는 i = i - 1 과 동일

sum = sum + i--;

// sum = sum + i 를 먼저 수행하고 난 후에 i = i - 1 을 수행 ② --i 는 i = i - 1 과 동일 sum = sum + --i;

// i = i - 1 을 먼저 수행하고 난 후에 sum = sum + i 를 수행

수치 식의 계산 순서수치 식의 계산 순서수치 식의 계산 순서는 연산자 우선순위에 의존하고 만일 같은 우선순위의 연산자들이 여러개 표현되었을 때는 수학에서와 같이 왼쪽에서 오른쪽 순으로 처리한다 . 그리고 괄호를 사용하여 연산자들의 실행 순서를 변경할 수 있다 .

<html>

<head>


document.write(4 + 6 % 3 + 5.8 / 2 + "<br>");

x = 15

y = 5

document.write( 16 / ++x + y % 3)

</script>

</head>

</html>

[ 실행 결과 ]

6.9

3

할당 연산자의 또다른 표현 방법들할당 연산자의 또다른 표현 방법들

① i = i + j 와 i += j 는 동일하다 .② i = i - j 와 i -= j 는 동일하다 .③ i = i * j 와 i *= j 는 동일하다 .④ i = i / j 와 i /= j 는 동일하다 .⑤ i = i * (3 + j) 와 i *= 3 + j 는 동일하다 .⑥ i = j = k = 1 : i, j, k 에 모두 1 이 할당된다 .⑦ j = i = (i *3 ) : i * 3 의 값을 i 에 할당한 후 그 값을 다시 j 에 할당한다 .⑧ i += j *= 3 : j = j * 3 을 수행한 후 i = i + j 를 연산한다 .

문자열 식문자열 식 (string expression)(string expression)

문자열 식에 사용되는 연산자는 두개의 문자열을 하나의 문자열로 결합시켜 주는 "+" 연산자 (concatenation operator) 뿐이다 . <html>

<head><script language="JavaScript">area_code = "0331";local_number =" 200-1234";pone_number = area_code + "-" + local_number;document.write( " 전화 번호 --> " + pone_number);</script></head>

</html>[ 실행 결과 ] 전화 번호 --> 0331-200-1234

관계식관계식 (relational expression)(relational expression)

수치 대소 비교 관계식수치 대소 비교 관계식산술 연산자들의 우선순위가 관계 연산자들의 우선순위 보다 높으므로 먼저 계산된다 .

A = 10B = 20C = 4 document.write( A + B < C * 10) // true 가 출력된다 .

문자열 대소 비교 관계식문자열 대소 비교 관계식대소 비교의 기준은 ASCII(American Standard Code for Information Interchange) 코드 순서에 의하여 결정된다 . 비교 방법은 왼쪽에서부터 1 자씩 사전식으로 비교하게 된다 .

"A" < "B" : 참 , ASCII 코드값 (A 는 65, B 는 66)"script" > "script" : 거짓"blank" == "blank " : 거짓 , 공백 (“ ” 의 ASCII 코드값은 32) 도 하나의

문자이므로 "blank" 와 "blank " 는 다르다 .

논리식논리식 (logical expression)(logical expression)

활용 예활용 예자바스크립트에서 90 점과 100 점 사이의 script 점수를 조건으로 표현하려면 ,

수학적 표현 : 90 ≤ script ≤ 100

자바스크립트 표현 : 90 <= script && script <= 100

script = 95

// "A 학점이다 " 가 출력된다 .

if ( 90 <= script && script <= 100 ) document.write( "A 학점이다 ")

x = 2

y = 4

document.write( x >= y && y == 1 + x) // false 가 출력된다 .

조건 연산자 조건 연산자 (? :)(? :)

조건식 ? 참일 때 실행되는 명령 : 거짓일 때 실행되는 명령 ;

① 조건 연산자 ? 문에서 num 변수가 10 보다 큰 20 이기 때문에 조건이 참이 되어 select 변수에 ":" 기호 앞에 있는 30 이 저장되어 출력된다 .

num = 20;select = ( num > 10) ? 30 : 10;document.write( "select = " + select);

조건 연산자 조건 연산자 (? :) (? :) 사용 예사용 예<html>

<head>


num = 10;

gubun = (num % 2 == 0) ? " 짝수이다 ." : " 홀수이다 .";

document.write( num + " 은 " + gubun);

</script>

</head>

</html>

[ 실행 결과 ]

10 은 짝수이다 .

비트 논리식비트 논리식 (bit logical expression)(bit logical expression)

예제예제<script language="JavaScript">

x = 2; y = 6;

z = x & y;

document.write("x = 2 , y = 6 일 때 비트 &(AND) 연산한 결과 : " + z + "<br>" );

z = x | y;

document.write("x=2 , y = 6 일 때 비트 |(OR) 로 연산한 결과 : " + z + "<br>" );

z = x ^ y;

document.write("x=2, y=6 일 때 비트 ^(X-OR: Exclusive-OR) 로 연산한 결과 : "+ z);

</script>

쉬프트쉬프트 (shift) (shift) 연산자연산자1) 오른쪽 쉬프트 (shift) 연산자 : >>

10 진수 6 을 오른쪽으로 두 번 쉬프트 시켜서 y 에 저장하는 예 : y = 6 >> 2

① 8 비트로 10진수 6 을 2 진수로 표현하면 00000110 이다 .

② 한번 오른쪽으로 이동하면 2 진수로 00000011

③ 두번째 오른쪽으로 이동하면 2 진수로 00000001 이며 , 10 진수로 1 이 된다 .

y = 6 >> 2;

document.write("10 진수 6 을 오른쪽으로 두 번 쉬프트한 결과 : " + y );

[ 실행 결과 ]

10 진수 6 을 오른쪽으로 두 번 쉬프트한 결과 : 1

2) 왼쪽 쉬프트 (shift) 연산자 : <<

10 진수 6 을 왼쪽으로 두 번 쉬프트 시켜서 y 에 저장하는 예 : y = 6 << 2

① 8 비트로 10진수 6 을를 2 진수로 표현하면 00000110 이다 .

② 한번 왼쪽으로 이동하면 2 진수로 00001100

③ 두 번째 왼쪽으로 이동하면 2 진수로 00011000 이며 , 10진수로 24 가 된다 .

y = 6 << 2;

document.write("10 진수 6 을 왼쪽으로 두 번 쉬프트한 결과 : " + y );

[ 실행 결과 ]

10 진수 6 을 왼쪽으로 두 번 쉬프트한 결과 : 24

연산자들의 우선순위연산자들의 우선순위

제 제 44 장장프로그램 실행 제어프로그램 실행 제어

단순 단순 if if 문문 if ( 조건 ) { 명령문 ( 들 );

}

① 조건이 참인 경우 실행되는 명령문이 하나이상 이기 때문에 중괄호 {} 가 사용된 경우if (number > 0) {

sum = sum + number; document.write(" 양수이다 "); }

② 조건이 참인 경우 실행되는 명령문이 하나인 경우는 중괄호 {} 을 생략할 수 있다 . if (score >= 90) document.write("excellent");

예제예제<HTML>

<BODY >

<h1> if 문 예 <p>

<h3> prompt 대화상자에 1 을 입력하면 날아가는 새 이미지가 출력되고 , <br>

2 를 입력하면 움직이는 호랑이 이미지가 출력되는 if 문 예제이다 .


var bird_img ='<img src = "bird.gif" >';

var tiger_img ='<img src = "tiger.gif" >';

var select = prompt( "1 과 2 중 하나를 입력하라 ", "1");

if (select == 1) document.write(bird_img);

if ( select == 2) document.write(tiger_img);

</SCRIPT>

</BODY>

</HTML>

if-else if-else 문문if ( 조건 ) {

명령문 ( 들 )1; } else {

명령문 ( 들 )2; } if ( x > 0 )

{ x = x + 1;z = x - 1; }

else{ x = x - 1;z = x - 1; }

<HTML>

<BODY >

<h1> if-else 문 예 <p>

<h3> prompt 대화상자에 숫자를 입력하면 홀수 / 짝수를 구분하는

if-else 문 예제이다 .<p>


var num = prompt( " 숫자를 입력하라 " ,"");

if (num % 2 == 0)

alert( num + " 은 ( 는 ) 짝수이다 .");

else

alert( num + " 은 ( 는 ) 홀수이다 .");

</SCRIPT>

</BODY>

</HTML>

예제예제

else ifelse if 구를 사용한 다중 구를 사용한 다중 if if 문문여러 개의 조건을 기술할 때 사용하는 if 문으로서 조건을 모두 만족하지 못했을 경우에는 else 다음의 중괄호 {} 안의 명령문 ( 들 )n 을 실행시킨다 .

if ( 조건 1) {명령문 ( 들 )1; }

else if ( 조건 2) {명령문 ( 들 )2; }

... ...else {

명령문 ( 들 )n;}

예제예제<h3> prompt 대화상자에 점수를 입력하면 학점을 부여하는 다중 if 문

<SCRIPT language="JavaScript">var script = prompt( " 자바스크립트 점수를 입력하라 ", "");// script 점수가 0 보다 작거나 100 보다 크면 잘못 입력된 점수이다 .if (script < 0 || script > 100 )

{ grade = " 잘못 입력된 점수 "; }// 90 ≤ script 점수 ≤ 100 else if (script >= 90 )

{grade = "A";}// 80 ≤ script 점수 ≤ 89 else if (script >= 80 )

{grade = "B";}else if (script >= 70 ) // 70 ≤ script 점수 ≤ 79

{grade = "C";}else if (script >= 60 ) // 60 ≤ script 점수 ≤ 69

{grade = "D";}// 0 ≤ script 점수 ≤ 59 else

{grade = "F";} alert( " 학점은 " + grade + " 입니다 ");

</SCRIPT>

중첩 중첩 ifif 문 예문 예성인 / 미성년임을 구분하는 중첩 if 문 예제이다 .<p><SCRIPT language="JavaScript">sex_code = prompt( " 남자인 경우는 'm' 을 여자인 경우는 f 를 입력 , "m"); age = prompt( " 나이를 입력하라 ", ""); // 남 / 녀를 구분하는 외부 if 문 if (sex_code == "m")

{ // 남자의 성인 / 미성년임을 구분하는 내부 if 문 if ( age >= 18)

alert( " 성인 남자 "); else

alert( " 남자 미성년자 "); } else if (sex_code == "f")

{ // 여자의 성인 / 미성년임을 구분하는 내부 if 문 if ( age >= 18)

alert( " 성인 여자 "); else

alert( " 여자 미성년자 "); } else alert( " 남녀 구분이 잘못 입력되었다 "); </SCRIPT>

다중 조건문으로서 변수 값에 의해 여러 가지 경우로 분기하는 메뉴 중심의 프로그램에 유용하게 사용될 수 있다 .

switch ( 식 ) { case label1: 명령문 ( 들 )1; break; case label2: 명령문 ( 들 )2; break;

: default: 명령문 ( 들 )n; }

① switch 문에서 조건에 해당하는 식 (expression) 은 선택자로서 정수식 , 또는 문자열 식이 올 수 있다 . ② 조건과 label 중에서 일치하는 것이 있으면 해당 label 의 명령문을 실행하고 break 문에 의하여 switch 문을 벗어난다 . ③ default 는 아무 조건도 성립하지 않을 때 수행된다 .

switch case switch case 문문

예제 예제 11<h1> switch case 문 예 <p><SCRIPT language="JavaScript">

// prompt 함수에서 입력받은 자료는 문자열형이 된다 .i = prompt(" Enter menu number ?", "");/* if 문의 조건 표현과 다르게 <, <=, >, == 등을 사용할 수 없고 정수식 ,

또는 문자열 식만이 기술된다 */switch (i) { case "1" : // if ( i == "1") 의 표현과 같다 . alert(" menu -> 1 ");

break;case "2" : // if ( i == "2") 의 표현과 같다 .

alert(" menu -> 2 ");break;

case "3" : // if ( i == "3") 의 표현과 같다 .alert(" menu -> 3 ");break;

default : // "1", "2", "3" 의 경우가 아닐 때 alert(" Out of range.");

}</SCRIPT>

실행 결과

prompt 대화상자에 2 를 입력한 경우

예제 예제 22<SCRIPT language="JavaScript">

char = prompt(" 알파벳을 입력하라 ?", "");switch (char)

{case "a" :case "e" :case "i" :case "o" :case "u" :

kind = " 영어 소문자 모음 ";break;

case "A" :case "E" :case "I" :case "O" :case "U" :

kind = " 영어 대문자 모음 ";break;

default : kind = " 영어 모음이 아니다 ";

}alert(" 입력한 " + char + " 은 " + kind);</SCRIPT>

예제 설명예제 설명① break 문을 생략하면 해당 label 의 명령문을 실행하고 난 후에 switch 문을 벗어나지 않고 다음 case 명령을 계속 수행해나간다고 하였다 . 그러므로 소문자 a, e, i, o, u 의 모두 " 영어 소문자 모음 " 이라고 출력하면 되므로 case "u" 앞까지는 break 문이 생략되어야 한다 .

② 만일 case "u" 에서도 break 문이 생략되면 소문자 a, e, i, o, u 도 " 영어 대문자 모음 " 이라고 출력이 된다 .

학점 평가의 예 학점 평가의 예 prompt 대화상자에 script 성적을 입력받아 다음과 같은 조건에 따라 script 성적의 학점을 평가하는 예이다

< 평가 조건 >

90 ≤ script 점수 ≤ 100 -> A

80 ≤ script 점수 ≤ 89 -> B

70 ≤ script 점수 ≤ 79 -> C

60 ≤ script 점수 ≤ 69 -> D

0 ≤ script 점수 ≤ 59 -> F

그외 -> 잘못 입력된 script 점수

switch case 문은 관계 연산자 (<, <=, ==, != 등 ), 논리 연산자 등을 사용할 수 없으므로 조건을 정수식으로 변환해야 한다 .

ex4-6.html 참조

while while 문문조건이 참인 동안 (while) 명령문들을 반복 실행하고 , 그렇치 않으면 반복 구간을 빠져 나와 다음 문장으로 실행을 옮긴다 .

while ( 조건 )

{

반복 처리될 명령문 ( 들 );

}

예제예제<SCRIPT language="JavaScript">

var number = 1, sum=0;

/* number 의 값이 10 이 될 때까지 10 번 중괄호의 반복 구간을 반복

처리하고 11 이 되면 반복 구간을 빠져나가 결과를 출력한다 . */

while (number <= 10)

{ sum = sum + number;

number = number + 1;

}

document.write( " 1 + 2 + 3 + … + 9 + 10 = " + sum);

</SCRIPT>

[ 실행결과 ]

1 + 2 + 3 + … + 9 + 10 = 55

do~whiledo~while 문 문 while 문과 동일하나 차이점은 먼저 명령문을 수행한 후 반복 구간 마지막에서 조건을 검사하여 반복 여부를 결정한다 . 즉 , 반복 구간은 최소한 한번 실행된다 .

do { 반복 처리될 명령문 ( 들 );

}while ( 조건 )


var number = 1, sum=0;

do {

sum = sum + number;

number = number + 1;

} while (number <= 10)


</SCRIPT>

[ 실행결과 ]

1 + 2 + 3 + … + 9 + 10 = 55

<SCRIPT language="JavaScript">var bird_img ='<img src = "bird.gif" >';var tiger_img ='<img src = "tiger.gif" >';var answer = false;

do { var select = prompt( "1 과 2 중 하나를 입력하라 ", "1");

switch (select){ case "1" :

document.write(bird_img); break;

case "2" :document.write(tiger_img); break;

default : answer = confirm(" 번호가 잘못되었다 .!! 계속하려면 ' 확인 ' 종료하려면 ' 취소 '");

} } while (answer == true)

</SCRIPT>

입력받은 값이 잘못되면 반복 또는 종료입력받은 값이 잘못되면 반복 또는 종료

예제 설명예제 설명① answer = confirm(" 번호가 잘못되었다 .!! 계속하려면 ' 확인 ' 종료하려면 ' 취소 '"); prompt 대화상자에 1 이나 2 가 아닌 잘못된 자료를 입력하면 , confirm 대화상자가 나타난다 .

② confirm() 함수는 메시지와 확인 / 취소 버튼을 포함하는 대화상자를 보여주는 내장 함수로서 사용자로부터 응답을 듣고 싶을 때 사용한다 . ③ 사용자가 확인 (ok) 버튼을 누를 경우에 true 값이 answer 변수에 할당되고 , 만일 취소 (cancel) 버튼을 누를 경우에는 false 값이 answer 변수에 할당된다 .④ while (answer == true);사용자가 확인 (ok) 버튼을 눌렀으면 조건이 참이 되어 do 와 while 사이가 반복 수행되고 , 만일 취소 (cancel) 버튼을 눌렀으면 조건이 거짓이 되어 프로그램이 종료된다 .

for for 문문while 문과 달리 for 문은 초기 값을 토대로 조건을 판단하여 증가 또는 감소하면서 반복 실행하는 명령문으로서 특히 배열 처리에서 자주 이용되는 유용한 반복문이다 .

for ( 초기식 ; 조건 ; 증가식 ; )

{

반복 처리될 명령문 ( 들 );

}

예제 예제 111 에서 10 까지의 합을 구하는 문제는 1 에서 10 까지 1 씩 증가하면서 10 번 반복하는 경우이다 .

<h1> for 문 예 <p>

<h3> 1 + 2 + 3 + … + 9 + 10 을 구하는 예 <p>


var sum =0;

for (number =1; number <= 10; number++)

sum = sum + number;


</SCRIPT>

[ 실행결과 ]

1 + 2 + 3 + … + 9 + 10 = 55

구구단 프로그램구구단 프로그램<SCRIPT language="JavaScript">

var dan = prompt(" 몇 단 ?", "");


{ result = dan * number;

document.write( dan + " * " + number + " = " + result + "<br>");

}

</SCRIPT>[ 실행결과 ]5 단을 입력한 경우구구단 프로그램 5 * 1 = 55 * 2 = 105 * 3 = 155 * 4 = 205 * 5 = 255 * 6 = 305 * 7 = 355 * 8 = 405 * 9 = 45

breakbreak 문을 사용한 예문을 사용한 예<SCRIPT language="JavaScript"> var LIMIT = 50; var n=0; var sum=0; for (n=1; ; n++) { sum = sum + n; /* sum 값이 50 보다 크면 for 문을 벗어난다 . */ if (sum > LIMIT) break; }document.write("By for : " + " n = " + n + " 일 때 sum= " + sum + "<br>");sum = n = 0;while (true)

{ ++n; sum +=n;/* sum 값이 50 보다 크면 while 문을 벗어난다 . */if (sum > LIMIT) break; }

document.write("By while : " + " n = " + n + " 일 때 sum= " + sum + "<br>");sum = n =0;do { ++n; sum += n; if (sum > LIMIT) break; } while (true);document.write("By do-while : " + " n = " + n + " 일 때 sum= " + sum);</SCRIPT>

반복문 내에서 반복문 내에서 continuecontinue 문 사용문 사용


var oddSum = evenSum = 0;

for (n=1; n <= 100 ; n++)

{

if (n % 2 == 0 )

{ evenSum = evenSum + n; // 짝수의 합 누적

// 다음 문장을 수행하지 않고 다시 for 문의 처음으로 이동

continue; }

oddSum = oddSum + n; // 홀수의 합 누적

}

document.write(" 홀수의 합 = " + oddSum + ", 짝수의 합 = " + evenSum);

</SCRIPT>

외부 반복문과 내부 반복문간의 관계외부 반복문과 내부 반복문간의 관계외부 반복 변수 i 값 -> 1 내부 반복 변수 j 값 -> 1 내부 반복 변수 j 값 -> 2 내부 반복 변수 j 값 -> 3 내부 반복 변수 j 값 -> 4 외부 반복 변수 i 값 -> 2 내부 반복 변수 j 값 -> 1 내부 반복 변수 j 값 -> 2 내부 반복 변수 j 값 -> 3 내부 반복 변수 j 값 -> 4 외부 반복 변수 i 값 -> 3 내부 반복 변수 j 값 -> 1 내부 반복 변수 j 값 -> 2 내부 반복 변수 j 값 -> 3 내부 반복 변수 j 값 -> 4

허용 중첩 반복 구조와 허용되지 않는 중첩 반복 구조허용 중첩 반복 구조와 허용되지 않는 중첩 반복 구조


do

{ var dan = prompt(" 몇 단 ?", "");


{ result = dan * number;

document.write( dan + " * " + number + " = " + result +"<br>");

}

ok_no = confirm(" 계속하려면 ' 확인 ' 종료하려면 ' 취소 '");

} while(ok_no == true)

</SCRIPT>

제 제 55 장장함수 사용하기함수 사용하기

함수 해결해야 할 프로그램을 기능 중심의 여러 개의 작은 부분 문제들로 분해할 때 각 부분 문제와 관계된 여러 문장들의 집단을 함수 (function) 라 부른다 .

함수를 사용할 때의 장점

① 복잡한 프로그램을 함수별로 나누어 여러 사람이 공동 작성할 수 있다 .② 반복 기술하지 않고 필요할 때마다 공동 이용할 수 있다 .③ 함수별로 손쉽게 오류를 찾을 수 있고 수정할 수 있다 .④ 프로그램의 설계가 단순해서 프로그램을 이해하기 쉽고 , 유지보수하기가 쉽다 .

함수의 개념과 장점함수의 개념과 장점

내장 함수 내장 함수 : : alert() : : alert() 함수함수① alert() 함수는 내장 함수로서 경고나 인사말 등과 같은 정보가 있는 메시지를 출력하는 경우에 사용 .

② alert() 함수는 <br>, <p> 등과 같은 HTML 태그를 사용할 수 없으나 만일 메시지를 여러 라인으로 출력하고 싶을 때는 alert() 함수의 인수 내에 특수문자(escape sequence) 인 "\n" 을 사용한다 .

alert(" 반갑습니다 ! \n 반갑습니다 !! \n 반갑습니다 !!!");

입력 대화상자 입력 대화상자 : prompt() : prompt() 함수함수① prompt() 내장 함수는 사용자로부터 자료를 입력받는데 사용하는 텍스트 박스로 구성되는 대화상자로서 사용자에게 문자열 자료를 입력받는데 사용 .

형식형식

confirm() confirm() 함수함수① confirm() 내장 함수는 사용자가 에게 질문 메시지를 보여 주고 사용자가 선택한 확인 또는 취소 버튼에 따라 프로그램을 진행해 나갈 때 사용 .② 사용자가 확인 (ok) 버튼을 누를 경우에 ok_no 변수에 true 값이 할당되고 , 만일 취소 (cancel) 버튼을 누를 경우에는 false 값이 할당된다 .

ok_no = confirm(" 번호가 잘못되었다 .!! 계속하려면 ' 확인 ' 종료하려면 ' 취소 '");

형식형식


var ok_no;

do {

// 사용자가 암호를 입력하면 passwd 변수에 암호가 문자열로 저장된다 .

passwd=prompt(" 암호를 입력하세요 ","");

if (passwd == "simmani")

// 암호가 일치하면 심마니 검색 사이트로 이동한다 .

location.href = "http://www.simmani.com";

else

// 암호가 틀린 경우에 confirm 대화상자가 나타난다 .

ok_no = confirm(" 암호가 틀립니다 . !! \n\n 다시 암호를 입력하려면 ' 확인 ' 종료하려면 ' 취소 '");

} while(ok_no == true) ;

if (ok_no == false) alert(" 암호를 기억한 후 방문해 주세요 !!!");

</SCRIPT>

eval()eval()

문자열로 입력된 수식을 계산하여 주는 편리한 함수 .

① document.write( eval(10 * 5) ); // 50 이 출력된다 .

② eval() 함수는 prompt() 함수와 같은 입력 대화상자를 통해 입력받은 수식을 처리할 때 아주 편리하다 .


var compute_string;

do {

compute_string = prompt(" 계산할 수식을 입력하시요 ", "");

// 입력된 문자열 수식을 계산한다 .

result = eval(compute_string);

document.write("<h4>" + compute_string + " = " + result +"<br>");

ok_no = confirm(" 계속 계산하려면 ' 확인 ' 종료하려면 ' 취소 '");

} while(ok_no == true) ;

</SCRIPT>

문자열을 정수로 변환하는 함수 문자열을 정수로 변환하는 함수 : : parselnt() parselnt()

① 문자열을 정수로 변환하는 내장 함수로서 입력된 문자열을 10 진수 , 2 진수 , 8진수 , 16 진수의 정수로 변환한다 .

주의 할 점은 어떤 진수로 변환이 되어도 결과는 10 진수 정수로 출력된다

// 문자열 “ 120” 이 10 진수로 변환되어 10 진수 120 으로 출력된다 .

document.write( parseInt("120", 10) );

// 114 가 출력된다 .

document.write( parseInt("114tel03ab"), 10 );

// 3 으로 출력된다 .

document.write( parseInt("3.14159");


num_string = "101";

// 10 진수 정수로 변환한다 .

num = parseInt(num_string); // num = parseInt(num_string,10); 와 동일

document.write ( num_string + " 문자열을 10진수 정수로 변환해도 " + num + " 이다 .<p>");

// 2 진수 정수로 변환한 후 결과는 10진수로 출력된다 .

num = parseInt(num_string,2);

document.write ( num_string + " 문자열을 2 진수로 변환한 후 10진수로 출력하면 " + num + " 이다 .<p>");



document.write ( num_string + " 문자열을 8 진수로 변환한 후 10진수로 출력하면 " + num + " 이다 .<p>");



document.write ( num_string + " 문자열을 16진수로 변환한 후 10진수로 출력하면 " + num + " 이다 .<p>");

parseFloat() parseFloat()

① 문자열을 실수로 변환하는 내장 함수 .

// 23.44 가 출력된다 .

document.write( parseFloat("23.44") );

// 3.14159 가 출력된다 .

document.write( parseFloat("3.14159pi3ab") );

prompt() 함수에 입력된 자료는 문자열형 자료이기 때문에 prompt() 대화상자를 사용하여 입력받은 자료를 수치로 사용할 때는 문자열을 정수 / 실수로 변환하는 parselnt()/parseFloat() 함수를 사용해야 한다 .

[ 예 ] compute_string = prompt(" 계산할 수식을 입력하시요 ", "");

// prompt() 함수에서 입력받은 문자열 자료를 정수로 변환한다 .

int_num = parseInt(compute_string);

// prompt() 함수에서 입력받은 문자열 자료를 실수로 변환한다 .

float_num = parseFloat(compute_string);

parselnt()/parseFloat() parselnt()/parseFloat() 함수를 사용해야 하는 이유함수를 사용해야 하는 이유

isNaN()isNaN()

isNaN(= is Not a Number) 함수는 문자인지 숫자인지를 구별하는 함수로서 테스트 값이 문자이면 "true" 를 숫자이면 "false" 로 결과를 나타낸다 .

// "100" 은 false 로 출력되어 숫자임을 알 수 있다 .

num = isNaN("100");

document.write ( num ); // false 로 출력된다 .

// "string" 은 true 가 출력되어 문자임을 알 수 있다 .

document.write ( isNaN("string") );

// "10kkk" 와 같이 숫자와 문자가 혼합되어 있으면 true 가 출력되어 문자로 판단한다 .

document.write ( isNaN("10kkk") );

setTimeout()setTimeout()

① 일정 시간을 설정한 다음에 설정한 시간이 경과하고 나면 자동으로 특정 명령을 실행시키는 함수이다 .


// 5 초가 지난 후에 한미르 검색 사이트로 이동한다 . 5000 은 ms 단위로서 5초이다 .

setTimeout("location.href = 'http://www.hanmir.com' ", 5000);

</SCRIPT>

setInterval()setInterval()① setInterval() 함수는 설정된 시간 간격마다 setInterval() 함수에서 정의한 명령이 반복 실행되는 함수이다 .


/* 1 초 간격으로 setInterval() 함수가 실행되어 브라우저의 하단 상태바에 현재 날짜와 시간을 출력하는 시계가 실행된다 . */

setInterval("window.status=new Date()", 1000);

</SCRIPT>

사용자 함수를 정의하는 방법 사용자 함수를 정의하는 방법 : function : function 문문사용자의 용도와 목적에 맞게 독립된 기능을 수행하는 함수는 다음과 같은 형식으로 정의한다 .

function 함수명 ([ 전달받는 인수 리스트 )]) {

명령문 ( 들 );

[return 식 ;]

}

>

전달받는 인수 리스트 (argument list) 는 함수가 특별한 기능을 수행하는데 필요한 초기 자료로서 여러 개의 인수가 필요할 때는 콤마 (,) 를 통해 구분하면 되고 , 인수가 필요 없으면 생략하면 된다 .

중괄호 { } 내의 모든 명령이 실행되어 "}" 를 만나면 함수는 종료되면서 호출한 곳으로 복귀하게된다 .

만일 함수를 호출한 곳으로 함수의 실행 결과를 반환 (return) 하고 싶으면 이 경우에 [return 식 ] 을 사용한다 .

return 명령은 함수의 처리를 종료할 때도 사용한다 .

함수를 호출하는 방법함수를 호출하는 방법[ 변수 =] 함수명 ([ 전달할 인수 리스트 ]);

sample();

result = sample();

intNum = parseFloat("23.44")

[ 변수 =] 는 호출한 함수의 실행 결과를 특정 변수에 반환 (return) 받고 싶을 때 사용한다 . 실행 결과를 변수에 반환 (return) 받고 싶지 않으면 생략한다 .

인수 전달이 필요 없는 함수 예인수 전달이 필요 없는 함수 예<SCRIPT language="JavaScript">

/* prompt() 대화상자에 계산할 수식을 입력하면 eval() 함수를 사용하여 그 결과를 보여주는 함수를 compute() 이름으로 정의한다 . */

function compute() {

var compute_string;


/* eval() 함수는 입력된 문자열 수식을 수치 수식으로 변환한 후 계산 결과를

result 에 저장한다 . */


document.write("<h4>" + compute_string + " = " + result +"<br>");

}

</SCRIPT>

<SCRIPT language="JavaScript"> do {

// 함수를 호출한다 .compute();ok_no = confirm(" 계속 계산하려면 ' 확인 ' 종료하려면 ' 취소 '");

} while(ok_no == true) ;</SCRIPT>

버튼 클릭 이벤트에 의해 수식 계산 함수를 호출버튼 클릭 이벤트에 의해 수식 계산 함수를 호출<SCRIPT language="JavaScript">

function compute() {

var compute_string;



alert( compute_string + " = " + result );

}

</SCRIPT>

<FORM>

" 계산 할래요 ?" 버튼을 클릭할 때마다 수식을 계산하는 compute() 함수가 호출되어 계산 결과를 alert() 대화상자에 출력한다 .<p>

<INPUT TYPE="button" VALUE=" 계산할래요 ? " onClick="compute()">

</FORM>

지역 변수지역 변수① 함수 내에 var 를 사용하여 변수를 선언하면 그 변수는 함수 내에서만 유효한 지역 변수가 된다 .

function input_name() {

// var 로 선언한 name 변수는 함수 input_name() 에서만 유효한 지역 변수이다 .

var name;

name = prompt(" 당신의 이름은 ?", "");

}

전역 변수전역 변수① 함수 내에서 var 로 선언한 변수를 제외한 모든 변수는 프로그램 어디에서나 유효한 전역 변수가 된다 .

② input_name() 함수에서 사용하는 name 변수는 var 에 의해 선언하지 않았기 때문에 전역 변수이며 , var 를 사용하여 선언한 tel 변수 역시 함수 밖에서 선언된 변수이기 때문에 전역 변수이다 .


name = " 임성준 ";

}

var tel;

namename 이 지역 변수 이기 때문에 출력되지 않은 예이 지역 변수 이기 때문에 출력되지 않은 예<script language = "javascript">

function name_tel() {

var name;

name = " 임성준 ";

tel = "02-703-0830"; }

</script>

<script language = "javascript">

// 함수 호출

name_tel();

alert(" 당신의 이름은 " + name + " 이고 전화번호는 " + tel + " 이다 ");

</script>

return return 명령을 사용하는 경우명령을 사용하는 경우① 함수를 호출한 곳으로 함수의 실행 결과를 반환 (return) 하고 싶을 때 [return 식 ] 형태로 사용한다 .

② 함수의 처리를 종료할 때도 사용한다 . 즉 , 함수 내에 return 명령을 만나면 무조건 함수는 종료되면서 호출한 곳으로 복귀하게 된다 .

함수의 결과 값을 함수의 결과 값을 return return 문으로 반환하는 예제문으로 반환하는 예제<head>



var name;


return name;

}

</script>

</head>

<body>


return_name = input_name();

alert( return_name + " 씨 !!! \n\n 제홈페이지를 방문하셨군요 !. \n\n환영합니다 ");

</script>

return return 명령으로 함수를 종료명령으로 함수를 종료<SCRIPT language="JavaScript"> function gugudan() { var dan = prompt(" 몇 단 ? \n 실행을 취소하고 싶으면 ' 취소 ' 버튼을 클릭 ", ""); if (dan == null)

{alert(" 구구단 실행을 취소했읍니다 . !!" ); return; }

var connect_result = "[ " + dan + " 단 실행결과 ] \n\n“ for (number =1; number <= 9; number++) { var result = dan * number; connect_result = connect_result+ (dan+"*"+number+"="+ result +"\n");

} alert(connect_result ); }</SCRIPT>

<FORM>" 구구단을 실행 할래요 ?" 버튼을 클릭할 때마다 구구단을 출력하는 gugudan() 함수가 호출되어 결과를 alert() 대화상자에 출력한다 .<p> <INPUT TYPE="button" VALUE=" 구구단을 실행 할래요 ? " onClick="gugudan()"></FORM><h4> prompt 대화상자에서 구구단을 실행시키고 싶지않으면 " 취소 " 버튼을 클릭한다 .

인수를 전달하는 방법인수를 전달하는 방법인수는 호출 함수에 기술되는 전달할 실인수 (actual argument) 와 함수 정의 부분에 기술되는 전달받는 가인수 (formal argument) 로 구분한다 .

실인수들

함수 호출 → test( a, b, "lhk", 100)

↕ ↕ ↕ ↕

함수 정의 → function test( a, c, name, e)

가인수들

① 전달할 실인수는 함수의 정의에서 기술한 가인수와 1:1 로 대응되어야 한다 .

② 가인수와 실인수의 이름은 동일해도 되고 동일하지 않아도 상관없다 .

인수 전달 방식인수 전달 방식1) 값 호출 (Call by value) 방식

① 값 호출 방식은 인수를 전달할 때 실인수의 값 자체를 가인수로 전달하는 방식으로 전달받은 가인수를 함수에서 변화시켜도 호출하는 곳에 있는 실인수는 변화되지 않고 그대로 유지된다 .

*. 자바스크립트는 값 호출 방식이 기본이다 .

2) 참조 호출 (Call by reference) 방식

① 참조 호출 방식은 인수를 전달할 때 실인수의 주소를 전달하는 방식으로 전달받은 가인수를 함수에서 변화시키면 호출하는 곳에 있는 실인수도 같이 변화된다 .

함수에 인수를 전달하는 예<script language = "javascript">

function write_msg(irum, tel) {

alert(" 당신의 이름은 " + irum + " 이고 \n\n 전화번호 는 " + tel + " 이다 "); }

</script>

</head>

<body>

<h3> 함수에 인수를 전달하는 예



tel = prompt(" 당신의 전화번호는 ?", "");

/* 입력받은 이름과 전화 번호를 name 과 tel 이라는 인수로 전달한다 . */

write_msg(name, tel)

</script>

</body>

값 호출 방식에 대한 이해 에제값 호출 방식에 대한 이해 에제

<script language = "javascript">/* 인수로 전달받은 두 정수를 교환하는 함수 . */function swap(x , y) { var temp; document.write(" 함수에서 교환전의 두수 : x = " + x + " y = " + y + "<br>"); // 두수 교환 temp = x; x = y; y = temp; document.write(" 함수에서 교환후의 두수 : x = " + x + " y = " + y+ "<p>"); }</script></head>

<body><h3> 두수를 교환하는 예를 통하여 인수 전달에서 값 호출 방식을 이해시키는 예 <p>참고 => 자바스크립트에서 인수 전달 방식은 기본이 값 호출 방식이다 . !!!! <p><script language = "javascript"> x = 10; y = 20 document.write(" 호출하는 곳에서 교환전의 두수 : x = "+ x +" y = "+ y +"<p>"); swap(x,y); document.write(" 호출하는 곳에서 교환후의 두수 : x = " + x + " y = " + y);</script></body>

함수의 순환적 호출함수의 순환적 호출 (recursive call)(recursive call)

함수는 직접적 , 또는 간접적으로 자기 자신을 호출할 수 있다 . 자기 자신을 직접적으로 호출하는 방법을 직접 순환 (direct recutsion) 호출이라고 하고 , 다른 함수에서 간접적으로 자기 자신을 호출하는 방법을 간접 순환 (indirect recursion) 호출이라고 한다 .

참고로 , 순환 (recursion) 을 되부름 , 재귀 등과 같은 용어로 부르기도 한다 .

단순한 직접 순환 호출 함수의 예단순한 직접 순환 호출 함수의 예<head>


function direct() {

ok_no = confirm(" 자기 자신을 다시 호출하려면 ' 확인 ' 종료하려면 ' 취소 '");

if (ok_no == true )

direct(); /* 자기 자신인 direct() 함수를 다시 호출 */

else

return; /* direct() 함수를 종료 */ }

</script>

</head>

<body>

<FORM>

<INPUT TYPE="button" VALUE=" 직접 순환 함수의 예 " onClick="direct()">

</FORM>

<h4> confirm() 대화상자에서 ' 확인 ' 버튼을 클릭하면 자기 자신을 계속 다시 호출하

는 함수로서 ' 취소 ' 버튼을 클릭하면 종료한다 .<p> </body>

암호 확인 함수를 직접 순환 호출한 예암호 확인 함수를 직접 순환 호출한 예<SCRIPT language="JavaScript"> function passwd_check(){

var ok_no;passwd=prompt(" 암호를 입력하세요 ","");if (passwd == "simmani")

{location.href = "http://www.simmani.com"; return; // 함수를 종료시키면서 복귀시킨다 .}

ok_no = confirm(" 암호가 틀립니다 . !! \n\n 다시 암호를 입력하려면 ' 확인 ',종료하려면 ' 취소 '");if (ok_no == true)

passwd_check(); else

alert(" 암호를 기억한 후 방문해 주세요 !!!"); }</SCRIPT></HEAD>

<BODY ><SCRIPT language="JavaScript">passwd_check();</SCRIPT></BODY>

1 + 2+ 3+ 4+ 5 를 인수 전달에 의한 순환 함수로 구하는 과정

예제예제<script language = "javascript">

/* 1 + 2+ … + n 을 순환적으로 구하는 함수 */function sum(n) {

var hap;if (n == 1)

hap = 1; else

hap = n + sum(n-1);return hap; /* 결과 값을 반환한다 . */ }

</script></head><body><h3> 1 + 2 + 3 + … + n 까지의 합을 인수 전달에 의한 직접 순환 함수로 구하는 예 <p>이 프로그램을 다시 실행하려면 브라우저 상단의 " 새로고침 " 버튼을 클릭하시오 !!<script>

n = prompt(" 마지막 숫자 를 입력하라 ?", "");/* prompt() 함수로 입력받은 문자열형 자료이므로 정수로 형변환한다 .n = parseInt(n);hap = sum(n);alert(" 1 + 2 + … + " + (n-1) + " + " + n + " = " + hap);

</script></body>

간접 순환 함수 방식으로 간접 순환 함수 방식으로 nmnm 을 구하는 예을 구하는 예<head><script language = "javascript">function power(n , m) {result = 1;for ( i =1; i <= m; i++)

result = result * n;msg = n+ " 의 " + m + " 승은 " + result + " 이다 .\n\n 계속하려면 ' 확인 ' 종료하려면 ' 취

소 '“ok_no = confirm(msg);if (ok_no == true )input_data(); /* input_data() 함수를 간접 호출 */elsereturn; /* 함수를 종료한다 */

}function input_data() {

n = prompt("n 의 m 승 중에서 n 을 입력하라 ?", "");m = prompt("n 의 m 승 중에서 m 을 입력하라 ?", "");power(n, m); // power(n, m) 함수를 호출alert("good bye !!!");

}</script></head><body><FORM><INPUT TYPE="button" VALUE=" 간접 순환 함수 방식으로 n 의 m 승을 구할래요 ? " onClick="input_data()"></FORM>

제 1 장 자바스크립트란 ?

Documents