2. 이 장에서 다룰 내용
1 자바스크립트의 개요
2 자바스크립트 사용법
3 자바스크립트 기본 문법
3. 01_자바스크립트의 개요
• 자바스크립트의 특징
o 브라우저 해석기에서 실행하므로 별도 프로그램 필요 없음
o 사용자가 배우기 쉽고, 동적인 페이지 작성할 수 있음
o 클라이언트와 서버 간에 대화 기능 없다는 단점
• 자바와 자바스크립트
o 자바스크립트와 자바의 비교
4. 01_자바스크립트의 개요
• 자바스크립트 활용 분야
o 동적인 웹 페이지 작성하고 다양한 개체 조정 가능
o 데이터의 유효성 판별, 계산, 멀티미디어 기능, 데이터의 저장 등으
로 통신량을 줄이고 서버 접속 시간을 줄이는 장점
o 클라이언트 측에서만 실행되어 데이터 전송이 작음
• 자바스크립트 실행 환경
o 네스케이프사에서 개발
o 인터넷 익스플로러 3.0 이상에서 ActiveX를 통해 지원
o 코드를 작성하기 위해서 텍스트 편집기가 필요
5. 02_자바스크립트 사용법
• 자바스크립트의 기본 구조
o <HEAD> 태그 내에서 선언하고 <BODY> 태그 내에서 실행
o <SCRIPT> . . . . . </SCRIPT> 태그 내에서 구성
<SCRIPT>
자바스크립트 내용
</SCRIPT>
o 주석문-프로그램 내용 설명
/* . . . . . . . */ => 여러 줄 주석
// =>한 줄 주석
6. [기본예제 4-1] 주석문
01 <HTML>
02 <HEAD>
03 <TITLE>자바스크립트 테스트 </TITLE>
04 <SCRIPT LANGUAGE="JavaScript">
05 <!--
06 /* 화면에 출력하기 위한 문장 */
07 document.write("헬로우 자바스크립트 월드 !")
08 // 자바스크립트 마지막 부분-->
09 </SCRIPT>
10 </HEAD>
11 <BODY>
12 </BODY>
13 </HTML>
7. 02_자바스크립트 사용법
• 자바스크립트 선언과 실행
o 내장형
<HTML>
<HEAD><TITLE>자바스크립트 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
자바스크립트 내용
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
자바스크립트 내용
o 링크형
</SCRIPT>
</BODY>
</HTML>
<SCRIPT LANGUAGE = "JavaScript" SRC="test.js" >
</SCRIPT>
8. 02_자바스크립트 사용법
• 자바스크립트 선언과 실행
o 행 입력형
<HTML>
<HEAD><TITLE>자바스크립트 </TITLE> </HEAD>
<BODY>
<태그 이벤트핸들러="자바스크립트 소스">
o 함수형
</BODY></HTML>
<HTML>
<HEAD><TITLE>자바스크립트 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function 함수명( ) {
자바스크립트 내용
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
함수명()
</SCRIPT>
</BODY>
</HTML>
9. [기본예제 4-2] 내장형 선언
01 <HTML><HEAD><TITLE>자바스크립트 </TITLE>
02 <SCRIPT LANGUAGE="JavaScript">
03 alert("여기는 head 태그 안입니다.")
04 </SCRIPT> </HEAD>
05 <BODY><SCRIPT LANGUAGE="JavaScript">
06 alert("여기는 body 태그 안입니다.")
07 </SCRIPT></BODY></HTML>
10. [기본예제 4-3] 행 입력 선언
01 <HTML>
02 <HEAD><TITLE>자바스크립트 </TITLE> </HEAD>
03 <BODY>
04 <a href="JavaScript:alert('행입력형입니다.')">눌러주세요 </a>
05 </BODY></HTML>
11. [기본예제 4-4] 함수형 선언
01 <HTML><HEAD><TITLE>자바스크립트 </TITLE>
02 <SCRIPT LANGUAGE="JavaScript">
03 function fu( ) {
04 alert("함수형입니다")
05 }
06 </SCRIPT> </HEAD>
07 <BODY><SCRIPT LANGUAGE="JavaScript">
08 fu()
09 </SCRIPT></BODY></HTML>
12. 02_자바스크립트 사용법
• 자바스크립트 사용 시 주의 사항
o 한 줄에 한 개 이상의 항과 기호로 구성
o 새로운 줄은 새로운 문장으로 시작
o 한 줄에서 두 문장 이상을 작성 할 때 세미콜론(;)사용
o 동일한 실행문들은 { }로 둘러싼다.
o 명령문이 길어서 한 줄을 넘어 갈 때 „_‟로 연결
o 따옴표가 중복되는 경우 외부에는 큰 따옴표, 내부에는 작은 따옴
표 사용
13. 03_자바스크립트 기본 문법
• 변수 개요
var kim // 변수 선언 변수명은 kim
var i, j, k // 동시에 여러 개의 변수 선언
var i=1 // 변수 선언과 동시에 기본값 할당
o 대소문자를 구별하며, 반드시 첫 자는 영문자로 시작
o 문자와 숫자만으로 구성, 한글과 밑줄(_)를 제외한 특수 문자와 공
백은 사용 불가
o 예약어, 함수명, 객체명, 속성 등은 변수로 사용 불가
• 변수의 종류
o 전역변수와 지역변수
o 전역변수 : 스크립트 어디에서나 사용 가능
o 지역변수 : 해당 함수 내에서만 사용
14. [기본예제 4-5] 지역 변수와 전역 변수 ①
01 <HTML> <HEAD><TITLE>지역변수와 전역변수</TITLE>
02 <SCRIPT LANGUAGE="JavaScript">
03 <!--
04 /* i를 지역변수로 이용하기위해서 100을 대입 */
05 i=100;
06 function namming(){
07 var i=200;
08 j="강강이";
09 document.write(i + j +"<br>") ;
10 }
11 // 자바스크립트 끝 -->
12 </SCRIPT></HEAD>
13 <BODY>
14 <SCRIPT LANGUAGE="JavaScript">
15 <!--
16 /* name 함수를 호출 */
17 namming()
18 document.write(i + j );
19 // 자바스크립트 끝 -->
20 </SCRIPT></BODY></HTML>
15. [응용예제 4-6] 지역 변수와 전역 변수②
01 <HTML> <HEAD> <TITLE>지역변수와 전역변수</TITLE>
02 <SCRIPT LANGUAGE="JavaScript">
03 <!--
04 i="강강이";
05 function [ ① ]{
06 var i; nammin
07 [②] "강냉이"; g()
08 j="강댕이";
09 document.write("<font color='white'>여기는 괄호안입니다.."+ i + j + "<br>괄호를 벗어
i=
납니다</font><br>") ;
10 }
11 // 자바스크립트 끝 --></SCRIPT></HEAD> <BODY bgcolor="black">
12 <SCRIPT LANGUAGE="JavaScript">
13 <!--
14 namming();
15 document.write("<font color='yellow'>여기는 밖입니다"+ i + j + "<br>전역변수
</font>”);
16 // 자바스크립트 끝 --> </SCRIPT> </BODY></HTML>
16. 03_자바스크립트 기본 문법
• 연산자
o 산술 연산자 : 수치 계산에 사용 (+, -, *, /)
o 관계 연산자 : 값을 비교하는 연산자
o 조건 연산자 : 조건에 따라 참과 거짓으로 나타내는 연산
o 비트 연산자 : 두 수의 비트 사이에 일어나는 연산
조건 ? 표현식1 : 표현식2
17. 03_자바스크립트 기본 문법
• 연산자
o 대입 연산자 : 변수에 값을 대입할 때 사용하는 연산자
o 논리 연산자 : 조건의 참, 거짓을 판단
&&(AND), ||(OR), !(NOT)
o 문자열 연산자 : 문자들을 연결시키는 역할
“,”“+”
19. [기본예제 4-7] 산술 연산자 ①
01 <HTML><HEAD><TITLE>산술 연산자</TITLE></HEAD>
02 <BODY> <H3>산술 연산자 연습 </H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=10; j=20
06 k=i+j; document.write("i + j = " + k + "<br>");
07 k=i-j; document.write("i - j = " + k + "<br>");
08 k=i*j; document.write("i * j = " + k + "<br>");
09 k=i/j; document.write("i / j = " + k + "<br>");
10 k=i%j; document.write("i % j = " + k + "<br>");
11 // 자바스크립트 끝-->
12 </SCRIPT> </BODY></HTML>
20. [응용예제 4-8] 산술 연산자 ②
• 01 <HTML><HEAD><TITLE>산술 연산자</TITLE>
• 02 <SCRIPT LANGUAGE="JavaScript">
• 03 <!--
• 04 var i, j, k;
• 05 function [ ① ]{
• 06 k=i+j; sum(I,j)
• 07 document.write("i와 j의 합은" + k + "<br>");
• 08 }
• 09 // 자바스크립트 끝-->
• 10 </SCRIPT></HEAD>
• 11 <BODY background="back3.gif"> <H3>짬뽕나는 계산기 </H3>
• 12 <form><input type="button" value=" + " [ ② ] = “sum(10,20);"></form>
• 13 </BODY></HTML>
onClick
21. [기본예제 4-9] 관계 연산자 ①
01 <HTML><HEAD><TITLE> 관계 연산자</TITLE></HEAD>
02 <BODY><H3>관계 연산자</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 document.write("10 == 10 : "); document.write(10==10);
06 document.write("<P>");
07 document.write("10 > 10 : "); document.write(10 > 5);
08 document.write("<P>");
09 document.write("23 <= 10 : "); document.write(23 <=10);
10 document.write("<P>");
11 document.write("10 != 12 : "); document.write(10!=12);
12 document.write("<P>");
13 // 자바스크립트 끝 -->
14 </SCRIPT></BODY></HTML>
22. [응용예제 4-10] 관계 연산자 ②
01 <HTML><HEAD><TITLE> 관계 연산자</TITLE>
02 <BODY><H3>관계 연산자</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 var i, j, k;
06 function [ ① ] {
07 k=i>j
Rel1(I,j
08 document.write("i와 j의 크기 비교 결과는 " + [②]+ "<br>");
)
09 }
10 function Rel2(i,j){ k
11 k=i==j
12 document.write("i와 j의 크기 비교 결과는 " + k+ "<br>");
13 }
14 // 자바스크립트 끝--></SCRIPT></HEAD>
15 <BODY background="back2.gif"> <H3>숫자 비교하기 </H3>
16 <form>
17 <input type="button" value="10 > 20 ?" onClick="Rel1(10,20);">
18 <input type="button" value=" 10==10 ?" onClick=“ [ ③ ] ;">
19 </FORM></BODY></HTML>
Rel2(10,10
)
23. [기본예제 4-11] 비트 연산자
01 <HTML><HEAD><TITLE> 비트 연산자</TITLE></HEAD>
02 <BODY><H3>비트 연산자 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=10 // 2진수 1010
06 j=8 // 2진수 1000
07 k=i & j; document.write(" i & j = " + k +"<br>");
08 k=i | j; document.write(" i | j = " + k +"<br>");
09 k=i ^ j; document.write(" i ^ j = " + k +"<br>");
10 k=~ 255 ; document.write(" ~ k = " + k +"<br>");
11 I=10; k=i<<1 ; document.write(" i << 1 = " + k +"<br>");
12 i=10; k=i>>1 ; document.write(" i >> 1 = " + k +"<br>");
13 // 자바스크립트 끝 -->
14 </SCRIPT></BODY></HTML>
24. [응용예제 4-12] 조건 연산자
01 <html><head><title> 조건 연산자 </title>
02 <script language=javascript>
03 <!--
04 function sex(){
05 s1=fm.man.value
06 mysex=( [ ① ] )? " 남자입니다." : " 여자입니다. "
07 fm.result.value=mysex
08 }
s1==“남
”
09 // 자바스크립트 끝 --></script></head>
10 <body leftmargin="0" topmargin="0">
11 <table width="550" border="0" cellpadding="0" cellspacing="0" align="center">
12 <tr><td><img src="disney1.gif"><b>조건 연산자 연습</b></td></tr>
13 <tr><td background="back2.gif" align="center">
14 <form name=" [②] ">성별 입력
15 <input type="text" size=2 name="man">
16 <input type=button value="실행" onclick=" [ ③ ] ">
17 결과는 ?<input type="text" size="20" name="result">
fm
18 </form></td></tr></table></body></html>
sex()
25. [기본예제 4-13] 대입 연산자 ①
01 <HTML><HEAD><TITLE> 대입 연산자</TITLE></HEAD>
02 <BODY><H3>대입 연산자 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=10; j=20; i += j; document.write("i += j : ", i ,"<br>");
06 i=10; j=20; i -= j; document.write("i -= j : ", i ,"<br>");
07 i=10; j=20; i *= j; document.write("i *= j : ", i ,"<br>");
08 i=10; j=20; i /= j; document.write("i /= j : ", i ,"<br>");
09 i=10; j=20; i %= j; document.write("i %= j : ", i ,"<br>");
10 i=10; j=2 ; i <<= j; document.write("i <<= j : ", i ,"<br>");
11 i=10; j=2 ; i >>= j; document.write("i >>= j : ", i ,"<br>");
12 i=10; j=2 ; i >>>= j; document.write("i >>>= j : ", i ,"<br>");
13 i=10; j=20; i &= j; document.write("i &= j : ", i ,"<br>");
14 i=10; j=20; i ^= j; document.write("i ^= j : ", i ,"<br>");
15 i=10; j=20; i |= j; document.write("i |= j : ", i ,"<br>");
16 // 자바스크립트 끝 -->
17 </SCRIPT></BODY></HTML>
26. [응용예제 4-14] 대입 연산자 ②
01 <html><head><title> 대입/관계 연산자 </title>
02 <script language=javascript>
03 <!--
04 function lar(){
05 s1=fm.m1.value
06 s2= [ ① ]
07 mysex=(s1>s2)? s1 : s2
fm.m2.value
08 [ ② ] =mysex
09 }
10 // 자바스크립트 끝 --> </script></head>
fm.result.valu
e
11 <body leftmargin="0" topmargin="0">
12 <table width="550" border="0" cellpadding="0" cellspacing="0" align="center">
13 <tr><td><img src="disney3.gif"><b>수의 비교</b></td></tr>
14 <tr><td background="back2.gif" align="center">
15 <form name="fm">값 대입하기
16 <input type="text" size=2 name="m1">
17 <input type="text" size=2 name="m2">
18 <input type=button value="실행" onclick= [ ③ ] > <br>
19 입력값 중 큰수는 ?<input type="text" size=“20" name="result">
20 </form></td></tr></table></body></html>
“lar()”
27. [기본예제 4-15] 논리 연산자 ①
01 <HTML><HEAD><TITLE> 논리 연산자</TITLE></HEAD>
02 <BODY><H3>논리 연산자 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=10;
06 j=20;
07
08 if ((i==10) && (j==20))
09 document.write ("조건이 참입니다. <br>");
10 if ((i==10) || (j==20))
11 document.write ("조건이 참입니다. <br>");
12 if ( !(i==20) )
13 document.write ("조건이 참입니다. <br>");
14
15 k = ( i > 5) ? 10 : 20 ;
16 document.write (" k =" + k);
17 // 자바스크립트 끝 --></SCRIPT></BODY></HTML>
28. [응용예제 4-16] 논리 연산자 ②
01 <html><head><title> 논리 연산자 </title>
02 <script language=javascript>
03 <!--
04 function [ ① ] {
05 s1=fm.m1.valuelar()
06 s2=fm.m2.value
07 my1=( [ ② ] )? "TRUE" : "FALSE"
08 my2=( [ ③ ] )? "TRUE" : "FALSE"
s1&&s
09 my3=( [④])? "TRUE" : "FALSE"
2
10 fm.result1.value=my1
s1||s2
11 [ ⑤ ] !s1
12 fm.result3.value=my3
13 }
fm.result2.value=my
2
29. [응용예제 4-16] 논리 연산자 ②
14 // 자바스크립트 끝 --></script></head>
15 <body leftmargin="0" topmargin="0">
16 <table width="550" border="0" cellpadding="0" cellspacing="0"
align="center">
17 <tr><td><img src="disney3.gif"><b>논리 연산자 연습</b></td></tr>
18 <tr><td background="back2.gif" align="center">
19 <form name= [ ⑥ ] >값 대입하기
20 <input type="text" size=2 name="m1">
21 <input type="text"“fm” name= [ ⑦ ] >
size=2
22 <input type=button value="실행" onclick="lar()"> <br>
23 입력값 AND 결과 ?<input type="text" size="20" name="result1"><br
“m2”
24 입력값OR 결과 ?<input type="text" size="20" name="result2"><br>
25 입력값 NOT 결과 ?<input type="text" size="20" name="result3">
26 </form></td></tr></table></body></html>
30. [기본예제 4-17] 문자열 연산자 ①
01 <HTML><HEAD><TITLE> 문자열 연산자</TITLE></HEAD>
02 <BODY><H3>문자열 연산자 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 document.write("콤마를 사용 : a " , " b <br>")
06 document.write("더하기를 사용 : a " + " b <br><br>")
07 i= " 강강이 "
08 j= " 순댕이 "
09 k= i + j
10 document.write (i, j, k, "<br>")
11 document.write (i + j + k + "<br>")
12 // 자바스크립트 끝 --></SCRIPT></BODY></HTML>
31. [응용예제 4-18] 문자열 연산자 ②
01 <html><head><title> 증감 연산자 </title>
02 <script language="javascript">
03 <!--
04 var a=5,b=3
05 document.write("<center> <img src='disney1.gif'><h3> 증감 연산자 </h3>")
06 document.write(" a = ", a , " b = " ,b, "<p>")
07 document.write(" [1] ++i : ",( [ ① ] ),"<br>")
08 document.write(" [2] i++ : ",( [ ② ] ),"<br><br>")
09 document.write(" a = ", a , " b = " ,b,++a
"<p>")
10 document.write(" [3] a-- : ",( [ ③ ] ),"<br>")
b++
11 document.write(" [4] --b : ",( [ ④ ] ),"<br><br>")
12 document.write(" a = ", a , " b = " ,b, "<p>")
a--
13 // 자바스크립트 끝 --></script></head>
--b
14 <body background="back2.gif" leftmargin="0" topmargin="0">
15 </body></html>
34. [기본예제 4-19] 조건문 ①
01 <HTML><HEAD><TITLE>자바스크립트 테스트</TITLE>
02 <SCRIPT LANGUAGE="JavaScript">
03 <!--
04 function learn(su) {
05 if(su == "국어")
06 alert("국어를 학습하겠습니다.!");
07 else if(su == "영어")
08 alert("영어를 학습하겠습니다.!");
09 else if(su == "수학")
10 alert("수학을 학습하겠습니다.!");
11 else if(su == "컴퓨터")
12 alert("탁월한 선택입니다.!");
13 }
14 // 자바스크립트 끝 --></SCRIPT></HEAD>
15 <BODY><H3> 학습을 원하는 과목을 선택하세요 </H3> <P>
16 <FORM>
17 <INPUT TYPE="button" VALUE="국어" onClick="learn('국어')">
18 <INPUT TYPE="button" VALUE="영어" onClick="learn('영어')">
19 <INPUT TYPE="button" VALUE="수학" onClick="learn('수학')">
20 <INPUT TYPE="button" VALUE="컴퓨터" onClick="learn('컴퓨터')">
21 </FORM></BODY></HTML>
35. [응용예제 4-20] 조건문 ②
01 <html><head><title>if문으로 성인 인증</title>
02 <style type="text/css">
03 a{color:blue;text-decoration:none}
04 .button{font-family:궁서; font-size:12pt; color:blue; border-width:0; width:70;
height:30;}
05 </style>
06 <script language="javascript">
07 <!--
08 function idChk(){
09 [ ① ]
10 if(id>19)
11 document.location.href="http://www.naver.com"
id=document.fr.id.value
12 else
36. [응용예제 4-20] 조건문 ②
13 alert("당신은 성인이 아니므로 사이트로 접속할 수 없습니다.")
14 } // 자바스크립트 끝--></script></head>
15 <body background="back3.gif" [ ② ] >
leftmargin=0 topmargin=0
16 <table width=800 border=0 cellpadding=0 cellspacing=0>
17 <tr height=284>
18 <td background="ani2.gif" valign=bottom> </td></tr>
19 <tr height=121><td>
20 <table width=350 border=0><tr><td align=right><br>
21 <form name=fr>
22 나이입력 : <input type="password" size=12 name=id>
23 <input type="button" value="성인 인증" [ ③ ]>
24 </form></td></tr></table></td></tr>
25 <tr height=195><td> </td></tr></table></body></html>
onClick=“idChk()
”
37. 03_자바스크립트 기본 문법
• 반복문
o for문 : 초기값에 의해 시작되고, 조건을 만족할 때까지 실행
o while 문 : 조건이 참인 동안 문장을 수행
while (조건) {
문장;
}
38. [기본예제 4-21] 반복문 ①_for문
01 <HTML><HEAD><TITLE> for 연산자</TITLE></HEAD>
02 <BODY><H3> for 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 for(i=1; i<11; i++) {
06 document.write(i, " + ", i ," = ", i+i, "<br>");
07 }// 자바스크립트 끝 --></SCRIPT></BODY></HTML>
39. [응용예제 4-22] 반복문 ②_for문
01 <html><head><title>for 문 </title>
02 <script language="javascript">
03 <!--
04 for(i=1;i<=100; [ ① ] ){
05 document.write("[ ②i++ ]")
06 } <img src=„clip3.gif‟>
07 // 자바스크립트 끝--></script></head><body></body></html>
40. [기본예제 4-23] 반복문 ③_while문
01 <HTML> <HEAD><TITLE> while 연산자</TITLE></HEAD>
02 <BODY><H3> while 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=1;
06 while (i<11) {
07 document.write(i, " + ", i ," = ", i+i, "<br>");
08 i++;
09 } // 자바스크립트 끝 -->
10 </SCRIPT></BODY></HTML>
41. 03_자바스크립트 기본 문법
• 반복문
o do..while 문 : while 문과 다르게 반드시 한번은 수행
o break(반복문 종료)와 continue(반복문 넘어가기)문
42. [기본예제 4-24] 반복문 ④_do~while문
01 <HTML><HEAD><TITLE> do while 연산자</TITLE></HEAD>
02 <BODY><H3> do while 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=11;
06 do{
07 document.write(i, " + ", i ," = ", i+i, "<br>");
08 i++;
09 }while (i<11)
10 // 자바스크립트 끝 -->
11 </SCRIPT></BODY></HTML>
43. [기본예제 4-25] 반복문 ⑤_break/continue문
01 <HTML> <HEAD> <TITLE> break/continue</TITLE></HEAD>
02 <BODY><H1> break/continue 연습</H1>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=11
06 while(true) {
07 i--;
08 if(i>5) continue
09 if(i==0) break
10 document.write(i, " + ", i ," = ", i+i, "<br>");
11 }
12 // 자바스크립트 끝 -->
13 </SCRIPT></BODY></HTML>
44. [기본예제 4-26] 반복문 ⑥_label문
01 <HTML> <HEAD> <TITLE> label 연습</TITLE></HEAD>
02 <BODY><H3> label 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 var i = 0
06 while (i < 10) {
07 i++;
08 if (i==7)
09 continue;
10 document.write(i + " ");
11 }
12 document.write("<br>");
13 for(i=0; i<4; i++) {
14 if (i==2)
45. [기본예제 4-26] 반복문 ⑥_label문
15 continue;
16 document.write(i + " ");
17 }
18 lab:
19 for(i=0; i<3; i++) {
20 document.write("<BR>" + " test " + i + ": ");
21 for(j=0; j<10; j++) {
22 document.write(j + " ");
23 if(j==i)
24 continue lab;
25 }
26 }
27 // 자바스크립트 끝 -->
28 </SCRIPT></BODY></HTML>
47. [기본예제 4-27] 반복문 ⑦_switch문
01 <HTML> <HEAD> <TITLE> switch...case</TITLE></HEAD>
02 <BODY><H3> switch...case 연습</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 i=0;
06 while(i<10) {
07 i++;
08 switch(i) {
09 case 1 :
10 document.write( i ," = 값이 1이군요<BR>");
11 break;
12 case 2 :
13 document.write( i ," = 값이 2이군요<BR>");
14 break;
15 case 3 :
16 document.write( i ," = 값이 3이군요<BR>");
17 break;
18 case 4 :
19 document.write( i ," = 값이 4이군요<BR>");
20 break;
21 default :
22 document.write( i ," = 값이 1,2,3,4가 아니군요<BR>");
23 }
24 } // 자바스크립트 끝 -->
25 </SCRIPT></BODY></HTML>
48. [응용예제 4-28] 반복문 ⑧_switch문
01 <HTML> <HEAD><TITLE>switch 연습</TITLE>
02 <SCRIPT LANGUAGE="JAVASCRIPT">
03 <!--
04 function gu(x){
05 var y;
06 [ ① ]{
07 caseswitch(x
"M": y="남자";break;
08 case "F":) y="여자";break;
09 [ ② ] y="중성"
10 }
11 document.write(y+“ 입니다<br>")
default:
12 }
13 // 자바스크립트 끝-->
14 </script> </HEAD> <BODY background="back2.gif">
15 <H3> SWITCH 문</H3>
16 <SCRIPT LANGUAGE="JAVASCRIPT">
17 <!--
18 [ ③ ]
19 [ ④ ]
20 gu("S");
21 --></SCRIPT></BODY></HTML>
gu(“M”)
;
gu(“F”)
;
49. 예제모음_09의 예제설명 및 결과화면
예제설명
사용자가 원하는 단의 구구단을 출력하는 페이지를 만들어보자.
??원하는 구구단의 단을 내장 함수 prompt( )로 입력하면, 해당
구구단을 출력한다.
??배경 이미지 : back3.gif
결과화면
50. 예제모음_09 원하는 구구단 출력하기
01 <HTML>
02 <HEAD><TITLE>예제모음9 </TITLE>
03 <SCRIPT LANGUAGE="JAVASCRIPT">
04 <!--
05 var dan=prompt("원하는 구구단은?","3");
06 for(i=1;i<=9;i++){
07 document.write(dan+"*" + i +" = "+ dan*i + "<br>");
08 }
09 --></script></HEAD>
10 <BODY background="back3.gif" align="center"></BODY></HTML>
51. 예제모음_10의 예제설명 및 결과화면
예제설명
for 문과 <hr> 태그를 이용하여 피라미드를 만드는 페이지를 만들
어보자.
실행결과
52. 예제모음_10 피라미드 만들기
01 <HTML><HEAD><TITLE> 예제모음10</TITLE></HEAD>
02 <BODY><center><H3> 피라미드</H3>
03 <SCRIPT LANGUAGE="JavaScript">
04 <!--
05 for(i=10; i<500; i+=20) {
06 document.write("<hr width="+i+"size=7 noshade>");
07 } // 자바스크립트 끝 --></SCRIPT></BODY></HTML>
53. 예제모음_11의 예제설명 및 결과화면
예제설명
입력창에 점수를 입력하면 해당 점수에 따라서 합격과 불합격을
표기하는 페이지를 만들어보자.
??합격과 불합격의 기준은 점수가 60점 이상이면 합격으로 처리
한다.
??사용 이미지 : tal4.gif
결과화면
54. 예제모음_11 성적 평가하기
01 <html><head><title> 예제모음11</title>
02 <style type="text/css">
03 .input{border:1px solid gray; background-color: ivory ;text-align:center }
04 .button{font-family:굴림; font-size:12pt; color:white; background-color:blue; borderwidth: 0; width:70; height:30;
cursor: hand;}
05 </style>
06 <script language="JavaScript">
07 <!--
08 function justify(){
09 Total=frm.total.value
10 if(Total>=60)
11 result="합격"
12 else
13 result="불합격"
14 frm.Result.value=result
15 } // 자바스크립트 끝--></script></head>
16 <body><center><h3>합격자 조회 (60점 이상이면 합격!)</h3>
17 <img src="tal4.gif"><br><br>
18 <form name="frm">
19 시험 점수 : <input type="text" size=5 name="total">
20 <input type="button" class=button value="결과확인" onclick="justify()">
21 결과 : <input type="text" size=10 name="Result">
22 </form></center></body></html>
55. 요약
자바스크립트 자바스크립트 코드를 선언하고 실행하는 방법은 내장
형, 행 입력형, 함수형, 링크형으로 분류
변수 특정 값을 저장할 수 있는 저장소. 자바스크립트에서
는 선언 없이 사용 가능. 전연, 지역 변수가 있다.
자료형 정수, 부동소수점, 문자열, 부울린, 객체, null,
undefined 등의 6가지 형식
연산자 산술, 관계, 논리, 비트, 조건, 문자열, 증감 연산자가
있다.
조건문 제어문의 일종으로, 조건에 따라 처리 순서를 변경할
수 있도록 하는데 이용
56. 요약
반복문 주어진 조건동안 계속해서 연산을 수행하게 한다. for,
while, do~while문 등이 있다.
switch문 다중 선택문이고, 여러 가지 조건에 따라서 실행되어
야 하는 경우 이용
