SlideShare a Scribd company logo
1 of 57
자바스크립트 시작하기

 자바스크립트 기본 문서를 만들어보자!
이 장에서 다룰 내용



  1   자바스크립트의 개요


  2   자바스크립트 사용법


  3   자바스크립트 기본 문법
01_자바스크립트의 개요

• 자바스크립트의 특징
 o   브라우저 해석기에서 실행하므로 별도 프로그램 필요 없음
 o   사용자가 배우기 쉽고, 동적인 페이지 작성할 수 있음
 o   클라이언트와 서버 간에 대화 기능 없다는 단점

• 자바와 자바스크립트
 o   자바스크립트와 자바의 비교
01_자바스크립트의 개요

• 자바스크립트 활용 분야
 o 동적인 웹 페이지 작성하고 다양한 개체 조정 가능
 o 데이터의 유효성 판별, 계산, 멀티미디어 기능, 데이터의 저장 등으
   로 통신량을 줄이고 서버 접속 시간을 줄이는 장점
 o 클라이언트 측에서만 실행되어 데이터 전송이 작음


• 자바스크립트 실행 환경
 o   네스케이프사에서 개발
 o   인터넷 익스플로러 3.0 이상에서 ActiveX를 통해 지원
 o   코드를 작성하기 위해서 텍스트 편집기가 필요
02_자바스크립트 사용법

• 자바스크립트의 기본 구조
 o   <HEAD> 태그 내에서 선언하고 <BODY> 태그 내에서 실행
 o   <SCRIPT> . . . . . </SCRIPT> 태그 내에서 구성

      <SCRIPT>
      자바스크립트 내용
      </SCRIPT>
 o   주석문-프로그램 내용 설명



      /* . . . . . . . */ => 여러 줄 주석
      // =>한 줄 주석
[기본예제 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>
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>
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>
[기본예제 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>
[기본예제 4-3] 행 입력 선언

01 <HTML>
02 <HEAD><TITLE>자바스크립트 </TITLE> </HEAD>
03 <BODY>
04 <a href="JavaScript:alert('행입력형입니다.')">눌러주세요 </a>
05 </BODY></HTML>
[기본예제 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>
02_자바스크립트 사용법

• 자바스크립트 사용 시 주의 사항
 o   한 줄에 한 개 이상의 항과 기호로 구성
 o   새로운 줄은 새로운 문장으로 시작
 o   한 줄에서 두 문장 이상을 작성 할 때 세미콜론(;)사용
 o   동일한 실행문들은 { }로 둘러싼다.
 o   명령문이 길어서 한 줄을 넘어 갈 때 „_‟로 연결
 o   따옴표가 중복되는 경우 외부에는 큰 따옴표, 내부에는 작은 따옴
     표 사용
03_자바스크립트 기본 문법

• 변수 개요
       var kim // 변수 선언 변수명은 kim
       var i, j, k // 동시에 여러 개의 변수 선언
       var i=1 // 변수 선언과 동시에 기본값 할당

  o 대소문자를 구별하며, 반드시 첫 자는 영문자로 시작
  o 문자와 숫자만으로 구성, 한글과 밑줄(_)를 제외한 특수 문자와 공
    백은 사용 불가
  o 예약어, 함수명, 객체명, 속성 등은 변수로 사용 불가


• 변수의 종류
  o   전역변수와 지역변수
  o   전역변수 : 스크립트 어디에서나 사용 가능
  o   지역변수 : 해당 함수 내에서만 사용
[기본예제 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>
[응용예제 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>
03_자바스크립트 기본 문법

• 연산자
  o   산술 연산자 : 수치 계산에 사용 (+, -, *, /)
  o   관계 연산자 : 값을 비교하는 연산자




  o   조건 연산자 : 조건에 따라 참과 거짓으로 나타내는 연산


  o   비트 연산자 : 두 수의 비트 사이에 일어나는 연산
       조건 ? 표현식1 : 표현식2
03_자바스크립트 기본 문법

• 연산자
  o   대입 연산자 : 변수에 값을 대입할 때 사용하는 연산자




  o   논리 연산자 : 조건의 참, 거짓을 판단
      &&(AND), ||(OR), !(NOT)

  o   문자열 연산자 : 문자들을 연결시키는 역할
      “,”“+”
03_자바스크립트 기본 문법

• 연산자
  o   연산자 우선 순위
[기본예제 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>
[응용예제 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
[기본예제 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>
[응용예제 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
                                                              )
[기본예제 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>
[응용예제 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()
[기본예제 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>
[응용예제 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()”
[기본예제 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>
[응용예제 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
[응용예제 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>
[기본예제 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>
[응용예제 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>
03_자바스크립트 기본 문법

• 조건문
  o   조건이 참인 경우에만 처리




  o   조건에 만족하는 경우와 그렇지 않은 경우의 처리
03_자바스크립트 기본 문법

• 조건문
  o   조건이 참인 경우와 조건이 거짓인 경우 n개일 때의 처리
[기본예제 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>
[응용예제 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
[응용예제 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>&nbsp;</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>&nbsp;</td></tr></table></body></html>
                                                onClick=“idChk()
                                                       ”
03_자바스크립트 기본 문법

• 반복문
  o   for문 : 초기값에 의해 시작되고, 조건을 만족할 때까지 실행




  o   while 문 : 조건이 참인 동안 문장을 수행



       while (조건) {
       문장;
       }
[기본예제 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>
[응용예제 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>
[기본예제 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>
03_자바스크립트 기본 문법

• 반복문
  o   do..while 문 : while 문과 다르게 반드시 한번은 수행




  o   break(반복문 종료)와 continue(반복문 넘어가기)문
[기본예제 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>
[기본예제 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>
[기본예제 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)
[기본예제 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>
03_자바스크립트 기본 문법

• 반복문
  o   switch 문(다중선택 문) : 여러 조건에 따라 실행되는 경우
[기본예제 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>
[응용예제 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”)
           ;
예제모음_09의 예제설명 및 결과화면

예제설명
사용자가 원하는 단의 구구단을 출력하는 페이지를 만들어보자.
??원하는 구구단의 단을 내장 함수 prompt( )로 입력하면, 해당
구구단을 출력한다.
??배경 이미지 : back3.gif

결과화면
예제모음_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>
예제모음_10의 예제설명 및 결과화면

예제설명
for 문과 <hr> 태그를 이용하여 피라미드를 만드는 페이지를 만들
어보자.


실행결과
예제모음_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>
예제모음_11의 예제설명 및 결과화면

예제설명
입력창에 점수를 입력하면 해당 점수에 따라서 합격과 불합격을
표기하는 페이지를 만들어보자.
??합격과 불합격의 기준은 점수가 60점 이상이면 합격으로 처리
한다.
??사용 이미지 : tal4.gif

결과화면
예제모음_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"> &nbsp;&nbsp;
20 <input type="button" class=button value="결과확인" onclick="justify()">&nbsp;&nbsp;
21 결과 : <input type="text" size=10 name="Result">
22 </form></center></body></html>
요약

자바스크립트    자바스크립트 코드를 선언하고 실행하는 방법은 내장
          형, 행 입력형, 함수형, 링크형으로 분류


     변수   특정 값을 저장할 수 있는 저장소. 자바스크립트에서
          는 선언 없이 사용 가능. 전연, 지역 변수가 있다.


 자료형      정수, 부동소수점, 문자열, 부울린, 객체, null,
          undefined 등의 6가지 형식


 연산자      산술, 관계, 논리, 비트, 조건, 문자열, 증감 연산자가
          있다.


 조건문      제어문의 일종으로, 조건에 따라 처리 순서를 변경할
          수 있도록 하는데 이용
요약

 반복문       주어진 조건동안 계속해서 연산을 수행하게 한다. for,
           while, do~while문 등이 있다.


 switch문   다중 선택문이고, 여러 가지 조건에 따라서 실행되어
           야 하는 경우 이용
www.themegallery.com




IT CookBook for Beginner, 4장 끝

More Related Content

What's hot

자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4성일 한
 
[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅NAVER D2
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 
02.실행환경 실습교재(데이터처리)
02.실행환경 실습교재(데이터처리)02.실행환경 실습교재(데이터처리)
02.실행환경 실습교재(데이터처리)Hankyo
 
Role Of Server In Ajax Korean
Role Of Server In Ajax KoreanRole Of Server In Ajax Korean
Role Of Server In Ajax KoreanTerry Cho
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVCArawn Park
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.jsWoo Jin Kim
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&httpDong Jun Kwon
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template EngineOhgyun Ahn
 
Spring test mvc 발표자료
Spring test mvc 발표자료Spring test mvc 발표자료
Spring test mvc 발표자료수홍 이
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료joonseokkim11
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon
 
테스트가 뭐예요?
테스트가 뭐예요?테스트가 뭐예요?
테스트가 뭐예요?Kyoung Up Jung
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기Han Jung Hyun
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
SpringMVC 전체 흐름 알아보기
SpringMVC 전체 흐름 알아보기SpringMVC 전체 흐름 알아보기
SpringMVC 전체 흐름 알아보기Myung Woon Oh
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기WebFrameworks
 

What's hot (20)

자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
 
[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & Polymer
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
02.실행환경 실습교재(데이터처리)
02.실행환경 실습교재(데이터처리)02.실행환경 실습교재(데이터처리)
02.실행환경 실습교재(데이터처리)
 
Role Of Server In Ajax Korean
Role Of Server In Ajax KoreanRole Of Server In Ajax Korean
Role Of Server In Ajax Korean
 
Vue.js 입문 02 템플릿 문법
Vue.js 입문 02 템플릿 문법Vue.js 입문 02 템플릿 문법
Vue.js 입문 02 템플릿 문법
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVC
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.js
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&http
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template Engine
 
Spring test mvc 발표자료
Spring test mvc 발표자료Spring test mvc 발표자료
Spring test mvc 발표자료
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
 
테스트가 뭐예요?
테스트가 뭐예요?테스트가 뭐예요?
테스트가 뭐예요?
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
SpringMVC 전체 흐름 알아보기
SpringMVC 전체 흐름 알아보기SpringMVC 전체 흐름 알아보기
SpringMVC 전체 흐름 알아보기
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 

Viewers also liked

Ucd presentation miami_no_animation
Ucd presentation miami_no_animationUcd presentation miami_no_animation
Ucd presentation miami_no_animationsuyu22
 
The Making of A Natural History Digital Library
The Making of A Natural History Digital LibraryThe Making of A Natural History Digital Library
The Making of A Natural History Digital Librarysuyu22
 

Viewers also liked (7)

링크 Introduction
링크 Introduction링크 Introduction
링크 Introduction
 
Andy Warhol
Andy WarholAndy Warhol
Andy Warhol
 
W800
W800W800
W800
 
Ucd presentation miami_no_animation
Ucd presentation miami_no_animationUcd presentation miami_no_animation
Ucd presentation miami_no_animation
 
The Making of A Natural History Digital Library
The Making of A Natural History Digital LibraryThe Making of A Natural History Digital Library
The Making of A Natural History Digital Library
 
Kings Of Leon
Kings Of LeonKings Of Leon
Kings Of Leon
 
TarunSharma_CV
TarunSharma_CVTarunSharma_CV
TarunSharma_CV
 

Similar to ch04

Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지yongwoo Jeon
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrapredribbon1307
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)
자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)
자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)DK Lee
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복sung hwan Park
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복Mu-ik Jeon
 
Servlet design pattern
Servlet design patternServlet design pattern
Servlet design patternSukjin Yun
 
웹성능최적화 20130405
웹성능최적화 20130405웹성능최적화 20130405
웹성능최적화 20130405주형 전
 
High performance websites v1.0
High performance websites v1.0High performance websites v1.0
High performance websites v1.0Byungsun Youn
 
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 TestOkjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 Testbeom kyun choi
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그은심 강
 

Similar to ch04 (20)

Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)
자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)
자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)
 
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
 
REACTJS HelloWorld
REACTJS HelloWorldREACTJS HelloWorld
REACTJS HelloWorld
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
Servlet design pattern
Servlet design patternServlet design pattern
Servlet design pattern
 
Basic html
Basic htmlBasic html
Basic html
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
웹성능최적화 20130405
웹성능최적화 20130405웹성능최적화 20130405
웹성능최적화 20130405
 
Mongo db 최범균
Mongo db 최범균Mongo db 최범균
Mongo db 최범균
 
High performance websites v1.0
High performance websites v1.0High performance websites v1.0
High performance websites v1.0
 
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 TestOkjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그
 
Redis
RedisRedis
Redis
 

More from boaz choi

Forty-five Interesting Ways* to use Wordle in the Classroom
Forty-five Interesting Ways* to use Wordle in the ClassroomForty-five Interesting Ways* to use Wordle in the Classroom
Forty-five Interesting Ways* to use Wordle in the Classroomboaz choi
 
Wordle_최병우
Wordle_최병우Wordle_최병우
Wordle_최병우boaz choi
 
Wordpress_최병우
Wordpress_최병우Wordpress_최병우
Wordpress_최병우boaz choi
 
Copy of Luxe Black Certificate Award
Copy of Luxe Black Certificate AwardCopy of Luxe Black Certificate Award
Copy of Luxe Black Certificate Awardboaz choi
 
워크샵 발표 자료 최병우
워크샵 발표 자료 최병우워크샵 발표 자료 최병우
워크샵 발표 자료 최병우boaz choi
 

More from boaz choi (7)

Forty-five Interesting Ways* to use Wordle in the Classroom
Forty-five Interesting Ways* to use Wordle in the ClassroomForty-five Interesting Ways* to use Wordle in the Classroom
Forty-five Interesting Ways* to use Wordle in the Classroom
 
Wordle_최병우
Wordle_최병우Wordle_최병우
Wordle_최병우
 
Prezi
PreziPrezi
Prezi
 
Wordpress_최병우
Wordpress_최병우Wordpress_최병우
Wordpress_최병우
 
12001183
1200118312001183
12001183
 
Copy of Luxe Black Certificate Award
Copy of Luxe Black Certificate AwardCopy of Luxe Black Certificate Award
Copy of Luxe Black Certificate Award
 
워크샵 발표 자료 최병우
워크샵 발표 자료 최병우워크샵 발표 자료 최병우
워크샵 발표 자료 최병우
 

ch04

  • 1. 자바스크립트 시작하기 자바스크립트 기본 문서를 만들어보자!
  • 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 문자열 연산자 : 문자들을 연결시키는 역할 “,”“+”
  • 18. 03_자바스크립트 기본 문법 • 연산자 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>
  • 32. 03_자바스크립트 기본 문법 • 조건문 o 조건이 참인 경우에만 처리 o 조건에 만족하는 경우와 그렇지 않은 경우의 처리
  • 33. 03_자바스크립트 기본 문법 • 조건문 o 조건이 참인 경우와 조건이 거짓인 경우 n개일 때의 처리
  • 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>&nbsp;</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>&nbsp;</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>
  • 46. 03_자바스크립트 기본 문법 • 반복문 o switch 문(다중선택 문) : 여러 조건에 따라 실행되는 경우
  • 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"> &nbsp;&nbsp; 20 <input type="button" class=button value="결과확인" onclick="justify()">&nbsp;&nbsp; 21 결과 : <input type="text" size=10 name="Result"> 22 </form></center></body></html>
  • 55. 요약 자바스크립트 자바스크립트 코드를 선언하고 실행하는 방법은 내장 형, 행 입력형, 함수형, 링크형으로 분류 변수 특정 값을 저장할 수 있는 저장소. 자바스크립트에서 는 선언 없이 사용 가능. 전연, 지역 변수가 있다. 자료형 정수, 부동소수점, 문자열, 부울린, 객체, null, undefined 등의 6가지 형식 연산자 산술, 관계, 논리, 비트, 조건, 문자열, 증감 연산자가 있다. 조건문 제어문의 일종으로, 조건에 따라 처리 순서를 변경할 수 있도록 하는데 이용
  • 56. 요약 반복문 주어진 조건동안 계속해서 연산을 수행하게 한다. for, while, do~while문 등이 있다. switch문 다중 선택문이고, 여러 가지 조건에 따라서 실행되어 야 하는 경우 이용