제 1장 자바스크립트란 ?
자바스크립트(JavaScript) 자바스크립트(JavaScript)는 기존 HTML의 정적인 특성을 보완하여 사용자의 요구에 따른 상호 작용이 가능한 웹 페이지를 작성하게 하는 대표적인 스크립트 언어이다. 스크립트 종류 ① Javascript는 네스케이프사와 선 마이크로시스템사가 공동으로 개발한 스크립트 언어로서 넷스케이프나 익스플로러 등과 같은 모든 웹브라우저에서 동작한다. ② VBscript는 마이크로소프트사에서 비주얼베이직과 비슷한 문법 체계로 개발한 언어이며, 익스플로러 브라우저에서만 작동된다. ③ Jscript 역시 마이크로소프트사에서 Javascript에 대항하기 위해서 VBscript 단점을 보안하여 개발한 스크립트 언어이다.
자바스크립트로 할수 있는 일 ① 웹 페이지를 만들 때, 사용자의 마우스 클릭이나 키보드 조작에 의해서 발생하는 이벤트를 웹 서버에 의존하지 않고 직접 처리해 줄 수 있도록 하는 기능 ② 웹 서버에 사용자가 입력한 데이터를 전송하기 전에 사용자가 입력한 데이터를 확인하여 오류를 잡아주는 기능 ③ 사용자가 새로운 웹 페이지를 열거나 이동할 때 원하는 작업을 수행시킬 수 있는 기능 ④ 웹 페이지에 계산기나 달력 등을 만들어 주는 기능 ⑤ 웹 페이지 상의 날짜 형식을 자동으로 변경시키는 기능. ⑥ 웹브라우저 자체의 윈도우, 문서 내용, 주소 입력 부분, 상태바, 도구바 등의 객체들을 조작하는 기능 ⑦ 동적인 메뉴나 애니메이션 등을 사용할 수 있는 기능 ⑧ 사용자가 방문했던 웹 페이지를 기록해 놓은 기능 ⑨ 연결된 웹 페이지가 팝업 윈도우 내에 나타나게 하는 기능. ⑩ 마우스의 움직임에 따라 텍스트나 그래픽 이미지를 변화시키는 기능 등
자바스크립트와 자바
클라이언트 측 자바스크립트와 서버 측 자바스크립트
제 2장 자바스크립트 실행방법을 통한 맛보기 프로그램 따라하기
기본적인 자바스크립트 실행 방법: <SCRIPT>태그 사용 자바스크립트 명령들 </SCRIPT> <HTML> <HEAD> <SCRIPT> <!-- document.write("자바스크립트의 단순한 예 입니다. !"); --> </SCRIPT> <BODY> </BODY> </HTML>
<SCRIPT> 태그에 LANGUAGE 옵션 사용 ① 자바스크립트를 기술하는 예 <SCRIPT LANGUAGE="JavaScript"> 자바스크립트 명령들 </SCRIPT> ->만일 LANGUAGE 옵션을 생략하면 브라우저는 자동으로 JavaScript로 인식한다. ② 자바스크립트의 버전을 기술하는 예 <SCRIPT LANGUAGE="JavaScript1.2"> ③ VB스크립트를 기술하는 예 <SCRIPT LANGUAGE="VBScript"> VB스크립트 명령들
예제 <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> test(); // test 함수 1번 호출 test(); // test 함수 2번 호출 test(); // test 함수 3번 호출 </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> <BODY> </BODY> </HTML>
<script> 태그를 사용하지 않고 이벤트 핸들러로 자바스크립트를 실행하는 방법 <TAG eventHandler="자바스크립트 명령이나 함수"> ① <INPUT type="button" value="더하기 버튼" onClick="addition()"> 사용자가 "더하기 버튼"을 클릭하여 이벤트를 발생시키면 onClick 이벤트 핸들러가 자바스크립트 명령으로 정의된 addition() 함수가 실행된다. ② <INPUT type="button" value="배경색 변경" onClick="document.bgColor ='blue'"> 사용자가 "배경색 변경" 버튼을 클릭하면 onClick 이벤트 핸들러가 자바스크립트 명령인 "document.bgcolor='blue'"를 실행시켜 문서의 배경 색상을 파란색으로 변경시킨다. ③ <body onLoad="window.defaultStatus='어서오세요';"> HTML 문서가 처음 실행될 때 자동으로 발생되는 onLoad 이벤트 핸들러가 자바스크립트 명령인 "window.defaultStatus='어서오세요';"를 실행시켜 브라우저 하단의 상태 표시줄에 "어서오세요"와 같은 초기 메시지를 출력한다.
이벤트 핸들러
onClick 이벤트 핸들러로 자바스크립트 명령을 실행한 예 <html> <body><center> <form> <INPUT type = "button" value = "배경색 변경" onClick="document.bgColor='red';"> </form></center> </body> </html>
onLoad 이벤트 핸들러로 자바스크립트 명령을 실행 <html> <body onLoad="alert('제 홈페이지를 방문한 것을 환영합니다')" > <h4> 특정 웹 페이지가 접속되었을 때 관련 HTML 문서가 실행될 때 자동으로 동작 하는 onLoad 이벤트 핸들러를 사용하는 예 </body> </html>
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>
계산기 활용 예
제 3장 자바스크립트 기본
코딩시 지켜야 할 점 영문자, 숫자, 특수 문자들을 사용하여 자바스크립트 프로그램은 내용에 따라 여러 라인의 문장으로 구성된다. ① 각 라인은 한 문장이상을 자유롭게 코딩할 수 있다. ② 한 라인에 하나 이상의 문장을 기술하고자 할 때는 문장과 문장 사이에 반드시 세미콜론(;)을 표시하여 구분 한다. ③ 만일 한 라인에 하나의 문장만을 기술하고자 할 때는 문장 끝에 세미콜론(;)을 생략해도 상관없다. ④ 프로그램 실행 순서는 특별한 제어가 없는 한 라인 순으로 처리된다.
주석(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>
자바스크립트의 4가지 자료형(data type) 수치 자료형 문자열 자료형 불리언 자료형 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> <script language="JavaScript"> // 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 등과 같이 소수 부분이 있는 숫자. ① 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 <script language="JavaScript"> // 실수 계산에서 근사치 결과가 발생하는 경우 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) 자료형이 요구된다. 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이라는 값은 말 그대로 아무 값도 없다는 것을 의미한다. ② 자바스크립트에서 변수를 선언할 때 var라는 예약어(reserved word)를 사용하여 변수를 선언해주는데, 만일 어떤 자료형의 값을 갖게될지 모르는 변수의 경우에는 null 값으로 초기화해 주면 안전하다.
변수를 선언하지 않고 사용하는 예 자!! 자바스크립트는 다른 프로그래밍 언어와 다르게 변수에 자료형을 선언하지 않고, 변수에 자료를 할당하기만 하면 해당하는 4가지 자료형(data type) 중의 하나인 변수로 자동 선언되어 사용된다. javaScript = 80 // javaScript는 정수형 변수이다. pi = 3.14159 // pi는 실수형 변수로 이다. name = "임 홍준" // name은 문자열 변수이다. bool = false // bool은 불리언 변수이다. empty = null // empty는 null 값을 갖는 변수이다.
var를 이용하여 변수를 선언하는 방법 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() 명령에 의해 출력하기 1 a = 10; b = 5; result = a + b; document.write( a + " 과 " + b + "를 더한 결과는 " + result + " 이다."); [실행 결과] 10 과 5를 더한 결과는 15 이다.
document.write() 명령에 의해 출력하기 2 주의할 점은 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() 명령에 의해 출력하기 3 ⑧ document.write() 명령으로 출력할 때 "("와 ")"사이에 <h3>, <hr> <p>, <br> 등 HTML 태그를 문자열 상수처럼 취급하여 HTML 태그의 기능을 활용하여 다양한 출력을 할 수 있다. <html> <head> <script language="JavaScript"> a = 10; b = 5; result = a + b; document.write( "<h2>" + a + " 과 " + b + "를 더한 결과는<br> " + "<h1>" + result + " 이다."); </script> </head> </html>
내장 함수 alert()에 의해 출력하기 1 ① alert() 내장 함수는 메시지와 확인 버튼만으로 구성되는 대화상자로서 경고나 인사말 등과 같은 사용자의 요구를 받을 필요가 없는 메시지를 출력하는 경우에 주로 사용되는데 document.write() 명령처럼 프로그램에서 사용하는 변수나 상수들을 출력하는데 이용한다. a = 10; b = 5; result = a + b; alert( "두수 " + a + " 와 " + b + "를 더한 결과는 " + result + " 이다");
내장 함수 alert()에 의해 출력하기 2 ② alert() 함수에서 "("와 ")"사이는 출력될 메시지를 기술하는 부분으로 document.write() 명령에서 설명한 것과 동일하게 출력될 변수나 상수들 사이에 "+"로 구분하면서 출력시키면 된다. ③ document.write() 명령과의 차이점은 alert() 함수에서는 "("와 ")"사이에 <h3>, <hr> <p>, <br> 등 HTML 태그를 사용할 수 없다는 점이다. 만일 사용하면 실행 결과처럼 HTML 태그가 문자열로 취급되어 그대로 출력된다.
증감 연산자와 산술 연산자 그리고 우선순위
증감 연산자 사용 예 1) 증가 연산자 : ++ ① i++는 i = i + 1과 동일 sum = sum + i++; 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> <script language="JavaScript"> 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 = 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) 문자열 식에 사용되는 연산자는 두개의 문자열을 하나의 문자열로 결합시켜 주는 "+" 연산자(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)
수치 대소 비교 관계식 산술 연산자들의 우선순위가 관계 연산자들의 우선순위 보다 높으므로 먼저 계산된다. A = 10 B = 20 C = 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)
활용 예 자바스크립트에서 90점과 100점 사이의 script 점수를 조건으로 표현하려면, 자바스크립트 표현 : 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> 조건 연산자 (? :) 사용 예 <html> <head> <script language="JavaScript"> num = 10; gubun = (num % 2 == 0) ? " 짝수이다." : " 홀수이다."; document.write( num + "은" + gubun); </script> </head> </html> [실행 결과] 10은 짝수이다.
비트 논리식(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) 연산자 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
연산자들의 우선순위
제 4장 프로그램 실행 제어
단순 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 문 예제이다. <SCRIPT language="JavaScript"> 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 (조건) { 명령문(들)1; } else { 명령문(들)2; } if ( x > 0 ) 명령문(들)1; } else { 명령문(들)2; } if ( x > 0 ) { x = x + 1; z = x - 1; } else { x = x - 1;
예제 <HTML> <BODY > <h1> if-else문 예<p> <h3> prompt 대화상자에 숫자를 입력하면 홀수/짝수를 구분하는 if-else 문 예제이다.<p> <SCRIPT language="JavaScript"> var num = prompt( "숫자를 입력하라" ,""); if (num % 2 == 0) alert( num + "은(는) 짝수이다."); else alert( num + "은(는) 홀수이다."); </SCRIPT> </BODY> </HTML>
else 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>
중첩 if문 예 성인/미성년임을 구분하는 중첩 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 문 다중 조건문으로서 변수 값에 의해 여러 가지 경우로 분기하는 메뉴 중심의 프로그램에 유용하게 사용될 수 있다. switch (식) { case label1: 명령문(들)1; break; case label2: 명령문(들)2; break; : default: 명령문(들)n; } ① switch문에서 조건에 해당하는 식(expression)은 선택자로서 정수식, 또는 문자열 식이 올 수 있다. ② 조건과 label 중에서 일치하는 것이 있으면 해당 label의 명령문을 실행하고 break문에 의하여 switch문을 벗어난다. ③ default는 아무 조건도 성립하지 않을 때 수행된다.
예제 1 <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를 입력한 경우
예제 2 <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 ( 조건 ) { 반복 처리될 명령문(들); }
예제 <SCRIPT language="JavaScript"> var number = 1, sum=0; 처리하고 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~while문 while문과 동일하나 차이점은 먼저 명령문을 수행한 후 반복 구간 마지막에서 조건을 검사하여 반복 여부를 결정한다. 즉, 반복 구간은 최소한 한번 실행된다. do { 반복 처리될 명령문(들); } while ( 조건 )
예제 <SCRIPT language="JavaScript"> var number = 1, sum=0; do { sum = sum + number; number = number + 1; } while (number <= 10) document.write( " 1 + 2 + 3 + … + 9 + 10 = " + sum); </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 문 while문과 달리 for문은 초기 값을 토대로 조건을 판단하여 증가 또는 감소하면서 반복 실행하는 명령문으로서 특히 배열 처리에서 자주 이용되는 유용한 반복문이다. for (초기식; 조건; 증가식; ) { 반복 처리될 명령문(들); }
예제 1 1에서 10까지의 합을 구하는 문제는 1에서 10까지 1씩 증가하면서 10번 반복하는 경우이다. <h1> for 문 예<p> <h3> 1 + 2 + 3 + … + 9 + 10을 구하는 예 <p> <SCRIPT language="JavaScript"> var sum =0; for (number =1; number <= 10; number++) sum = sum + number; document.write( " 1 + 2 + 3 + … + 9 + 10 = " + sum); </SCRIPT> [실행결과] 1 + 2 + 3 + … + 9 + 10 = 55
구구단 프로그램 <SCRIPT language="JavaScript"> var dan = prompt(" 몇 단?", ""); for (number =1; number <= 9; number++) { result = dan * number; document.write( dan + " * " + number + " = " + result + "<br>"); } </SCRIPT> [실행결과] 5단을 입력한 경우 구구단 프로그램 5 * 1 = 5 5 * 2 = 10 5 * 3 = 15 5 * 4 = 20 5 * 5 = 25 5 * 6 = 30 5 * 7 = 35 5 * 8 = 40 5 * 9 = 45
break문을 사용한 예 <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>
반복문 내에서 continue문 사용 <SCRIPT language="JavaScript"> 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
허용 중첩 반복 구조와 허용되지 않는 중첩 반복 구조
예제 <SCRIPT language="JavaScript"> do { var dan = prompt(" 몇 단?", ""); for (number =1; number <= 9; number++) { result = dan * number; document.write( dan + " * " + number + " = " + result +"<br>"); } ok_no = confirm(" 계속하려면 '확인' 종료하려면 '취소'"); } while(ok_no == true) </SCRIPT>
제 5장 함수 사용하기
함수의 개념과 장점 함수 해결해야 할 프로그램을 기능 중심의 여러 개의 작은 부분 문제들로 분해할 때 각 부분 문제와 관계된 여러 문장들의 집단을 함수(function)라 부른다. 함수를 사용할 때의 장점 ① 복잡한 프로그램을 함수별로 나누어 여러 사람이 공동 작성할 수 있다. ② 반복 기술하지 않고 필요할 때마다 공동 이용할 수 있다. ③ 함수별로 손쉽게 오류를 찾을 수 있고 수정할 수 있다. ④ 프로그램의 설계가 단순해서 프로그램을 이해하기 쉽고, 유지보수하기가 쉽다.
내장 함수 : : alert() 함수 ① alert() 함수는 내장 함수로서 경고나 인사말 등과 같은 정보가 있는 메시지를 출력하는 경우에 사용.
② alert() 함수는 <br>, <p> 등과 같은 HTML 태그를 사용할 수 없으나 만일 메시지를 여러 라인으로 출력하고 싶을 때는 alert() 함수의 인수 내에 특수문자(escape sequence)인 "\n"을 사용한다. alert(" 반갑습니다! \n 반갑습니다 !! \n 반갑습니다 !!!");
입력 대화상자 : prompt() 함수 ① prompt() 내장 함수는 사용자로부터 자료를 입력받는데 사용하는 텍스트 박스로 구성되는 대화상자로서 사용자에게 문자열 자료를 입력받는데 사용.
형식
confirm() 함수 ① confirm() 내장 함수는 사용자가 에게 질문 메시지를 보여 주고 사용자가 선택한 확인 또는 취소 버튼에 따라 프로그램을 진행해 나갈 때 사용. ② 사용자가 확인(ok) 버튼을 누를 경우에 ok_no 변수에 true 값이 할당되고, 만일 취소(cancel) 버튼을 누를 경우에는 false 값이 할당된다. ok_no = confirm("번호가 잘못되었다.!! 계속하려면 '확인' 종료하려면 '취소'");
형식
예제 <SCRIPT language="JavaScript"> 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() 문자열로 입력된 수식을 계산하여 주는 편리한 함수. ① document.write( eval(10 * 5) ); // 50이 출력된다. ② eval() 함수는 prompt() 함수와 같은 입력 대화상자를 통해 입력받은 수식을 처리할 때 아주 편리하다.
예제 <SCRIPT language="JavaScript"> 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() ① 문자열을 정수로 변환하는 내장 함수로서 입력된 문자열을 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");
예제 <SCRIPT language="JavaScript"> 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>"); // 8진수 정수로 변환한 후 결과는 10진수로 출력된다. num = parseInt(num_string,8); document.write ( num_string + " 문자열을 8진수로 변환한 후 10진수로 출력하면 " + num + "이다.<p>"); // 16진수 정수로 변환한 후 결과는 10진수로 출력된다. num = parseInt(num_string,16); document.write ( num_string + " 문자열을 16진수로 변환한 후 10진수로 출력하면 " + num + "이다.<p>");
parseFloat() ① 문자열을 실수로 변환하는 내장 함수. // 23.44가 출력된다. document.write( parseFloat("23.44") ); // 3.14159가 출력된다. document.write( parseFloat("3.14159pi3ab") );
parselnt()/parseFloat() 함수를 사용해야 하는 이유 prompt() 함수에 입력된 자료는 문자열형 자료이기 때문에 prompt() 대화상자를 사용하여 입력받은 자료를 수치로 사용할 때는 문자열을 정수/실수로 변환하는 parselnt()/parseFloat() 함수를 사용해야 한다. [예] compute_string = prompt("계산할 수식을 입력하시요", ""); // prompt() 함수에서 입력받은 문자열 자료를 정수로 변환한다. int_num = parseInt(compute_string); // prompt() 함수에서 입력받은 문자열 자료를 실수로 변환한다. float_num = parseFloat(compute_string);
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() ① 일정 시간을 설정한 다음에 설정한 시간이 경과하고 나면 자동으로 특정 명령을 실행시키는 함수이다.
예제 <SCRIPT language="JavaScript"> // 5 초가 지난 후에 한미르 검색 사이트로 이동한다. 5000은 ms 단위로서 5초이다. setTimeout("location.href = 'http://www.hanmir.com' ", 5000); </SCRIPT>
setInterval() ① setInterval() 함수는 설정된 시간 간격마다 setInterval() 함수에서 정의한 명령이 반복 실행되는 함수이다.
예제 <SCRIPT language="JavaScript"> /* 1초 간격으로 setInterval() 함수가 실행되어 브라우저의 하단 상태바에 현재 날짜와 시간을 출력하는 시계가 실행된다. */ setInterval("window.status=new Date()", 1000); </SCRIPT>
사용자 함수를 정의하는 방법 : 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; compute_string = prompt("계산할 수식을 입력하시요", ""); /* eval() 함수는 입력된 문자열 수식을 수치 수식으로 변환한 후 계산 결과를 result에 저장한다. */ result = eval(compute_string); 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; compute_string = prompt("계산할 수식을 입력하시요", ""); result = eval(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 변수 역시 함수 밖에서 선언된 변수이기 때문에 전역 변수이다. function input_name() { name = "임성준"; } var tel;
name이 지역 변수 이기 때문에 출력되지 않은 예 <script language = "javascript"> function name_tel() { var name; name = "임성준"; tel = "02-703-0830"; } </script> // 함수 호출 name_tel(); alert("당신의 이름은 " + name + "이고 전화번호는 " + tel + "이다");
return 명령을 사용하는 경우 ① 함수를 호출한 곳으로 함수의 실행 결과를 반환(return)하고 싶을 때 [return 식] 형태로 사용한다. ② 함수의 처리를 종료할 때도 사용한다. 즉, 함수 내에 return 명령을 만나면 무조건 함수는 종료되면서 호출한 곳으로 복귀하게 된다.
함수의 결과 값을 return 문으로 반환하는 예제 <head> <script language = "javascript"> function input_name() { var name; name = prompt("당신의 이름은 ?", ""); return name; } </script> </head> <body> return_name = input_name(); alert( return_name + " 씨 !!! \n\n 제홈페이지를 방문하셨군요 !. \n\n환영합니다");
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> 함수에 인수를 전달하는 예 name = prompt("당신의 이름은 ?", ""); tel = prompt("당신의 전화번호는 ?", ""); /* 입력받은 이름과 전화 번호를 name과 tel이라는 인수로 전달한다. */ write_msg(name, tel) </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) 함수는 직접적, 또는 간접적으로 자기 자신을 호출할 수 있다. 자기 자신을 직접적으로 호출하는 방법을 직접 순환(direct recutsion) 호출이라고 하고, 다른 함수에서 간접적으로 자기 자신을 호출하는 방법을 간접 순환(indirect recursion) 호출이라고 한다. 참고로, 순환(recursion)을 되부름, 재귀 등과 같은 용어로 부르기도 한다.
단순한 직접 순환 호출 함수의 예 <head> <script language = "javascript"> 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를 인수 전달에 의한 순환 함수로 구하는 과정 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>
간접 순환 함수 방식으로 nm을 구하는 예 <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() 함수를 간접 호출 */ else return; /* 함수를 종료한다 */ } 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>