ch04

자바스크립트 시작하기

자바스크립트 기본 문서를 만들어보자 !

이 장에서 다룰 내용

자바스크립트의 개요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> 태그 내에서 구성

o 주석문 - 프로그램 내용 설명

<SCRIPT>자바스크립트 내용</SCRIPT>

/* . . . . . . . */ => 여러 줄 주석// => 한 줄 주석

[ 기본예제 4-1] 주석문

01 <HTML>02 <HEAD>03 <TITLE> 자바스크립트 테스트 </TITLE>04 <SCRIPT LANGUAGE="JavaScript">05 09 </SCRIPT>10 </HEAD>11 <BODY>12 </BODY>13 </HTML>


• 자바스크립트 선언과 실행o 내장형

o 링크형

<HTML><HEAD><TITLE> 자바스크립트 </TITLE><SCRIPT LANGUAGE="JavaScript">자바스크립트 내용</SCRIPT></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">자바스크립트 내용</SCRIPT></BODY></HTML>

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


• 자바스크립트 선언과 실행o 행 입력형

o 함수형

<HTML><HEAD><TITLE> 자바스크립트 </TITLE> </HEAD><BODY>< 태그 이벤트핸들러 =" 자바스크립트 소스 "></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>


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

사용

03_ 자바스크립트 기본 문법

• 변수 개요

o 대소문자를 구별하며 , 반드시 첫 자는 영문자로 시작o 문자와 숫자만으로 구성 , 한글과 밑줄 (_) 를 제외한 특수 문자와 공백은

사용 불가o 예약어 , 함수명 , 객체명 , 속성 등은 변수로 사용 불가

• 변수의 종류o 전역변수와 지역변수o 전역변수 : 스크립트 어디에서나 사용 가능o 지역변수 : 해당 함수 내에서만 사용

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

[ 기본예제 4-5] 지역 변수와 전역 변수 ①

01 <HTML> <HEAD><TITLE> 지역변수와 전역변수 </TITLE>02 <SCRIPT LANGUAGE="JavaScript">03 12 </SCRIPT></HEAD>13 <BODY>14 <SCRIPT LANGUAGE="JavaScript">15 20 </SCRIPT></BODY></HTML>

[ 응용예제 4-6] 지역 변수와 전역 변수②

01 <HTML> <HEAD> <TITLE> 지역변수와 전역변수 </TITLE>02 <SCRIPT LANGUAGE="JavaScript">03 </SCRIPT></HEAD> <BODY bgcolor="black">12 <SCRIPT LANGUAGE="JavaScript">13  </SCRIPT> </BODY></HTML>

namming()

i=


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

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

o 비트 연산자 : 두 수의 비트 사이에 일어나는 연산조건 ? 표현식 1 : 표현식 2


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

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

o 문자열 연산자 : 문자들을 연결시키는 역할 “ , ” “ + ”


• 연산자o 연산자 우선 순위

[ 기본예제 4-7] 산술 연산자 ①

01 <HTML><HEAD><TITLE> 산술 연산자 </TITLE></HEAD>02 <BODY> <H3> 산술 연산자 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 12 </SCRIPT> </BODY></HTML>

[ 응용예제 4-8] 산술 연산자 ②

• 01 <HTML><HEAD><TITLE> 산술 연산자 </TITLE>• 02 <SCRIPT LANGUAGE="JavaScript">• 03 • 10 </SCRIPT></HEAD>• 11 <BODY background="back3.gif"> <H3> 짬뽕나는 계산기 </H3>• 12 <form><input type="button" value=" + " [ ] = “sum(10,20);"></form>②• 13 </BODY></HTML>

sum(I,j)

onClick

[ 기본예제 4-9] 관계 연산자 ①

01 <HTML><HEAD><TITLE> 관계 연산자 </TITLE></HEAD>02 <BODY><H3> 관계 연산자 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 14 </SCRIPT></BODY></HTML>

[ 응용예제 4-10] 관계 연산자 ②

01 <HTML><HEAD><TITLE> 관계 연산자 </TITLE>02 <BODY><H3> 관계 연산자 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 </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>

Rel1(I,j)

k

Rel2(10,10)

[ 기본예제 4-11] 비트 연산자

01 <HTML><HEAD><TITLE> 비트 연산자 </TITLE></HEAD>02 <BODY><H3> 비트 연산자 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 14 </SCRIPT></BODY></HTML>

[ 응용예제 4-12] 조건 연산자

01 <html><head><title> 조건 연산자 </title>02 <script language=javascript>03 </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">18 </form></td></tr></table></body></html>

s1==“ 남”

fm

sex()

[ 기본예제 4-13] 대입 연산자 ①

01 <HTML><HEAD><TITLE> 대입 연산자 </TITLE></HEAD>02 <BODY><H3> 대입 연산자 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 17 </SCRIPT></BODY></HTML>

[ 응용예제 4-14] 대입 연산자 ②

01 <html><head><title> 대입 / 관계 연산자 </title>02 <script language=javascript>03  </script></head>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>

fm.m2.value

fm.result.value

“lar()”

[ 기본예제 4-15] 논리 연산자 ①

01 <HTML><HEAD><TITLE> 논리 연산자 </TITLE></HEAD>02 <BODY><H3> 논리 연산자 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 </SCRIPT></BODY></HTML>

[ 응용예제 4-16] 논리 연산자 ②

01 <html><head><title> 논리 연산자 </title>02 <script language=javascript>03 <!--04 function [ ] {①05 s1=fm.m1.value06 s2=fm.m2.value07 my1=( [ ] )? "TRUE" : "FALSE"②08 my2=( [ ] )? "TRUE" : "FALSE"③09 my3=( [ ])? "TRUE" : "FALSE"④10 fm.result1.value=my111 [ ]⑤12 fm.result3.value=my313 }

lar()

s1&&s2s1||s2

fm.result2.value=my2

!s1

[ 응용예제 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" size=2 name= [ ] >⑦22 <input type=button value=" 실행 " onclick="lar()"> <br>23 입력값 AND 결과 ?<input type="text" size="20" name="result1"><br24 입력값 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>

“fm”

“m2”

[ 기본예제 4-17] 문자열 연산자 ①

01 <HTML><HEAD><TITLE> 문자열 연산자 </TITLE></HEAD>02 <BODY><H3> 문자열 연산자 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 </SCRIPT></BODY></HTML>

[ 응용예제 4-18] 문자열 연산자 ②

01 <html><head><title> 증감 연산자 </title>02 <script language="javascript">03 </script></head>14 <body background="back2.gif" leftmargin="0" topmargin="0">15 </body></html>

++a

b++

a--

--b


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

o 조건에 만족하는 경우와 그렇지 않은 경우의 처리


• 조건문o 조건이 참인 경우와 조건이 거짓인 경우 n 개일 때의 처리

[ 기본예제 4-19] 조건문 ①

01 <HTML><HEAD><TITLE> 자바스크립트 테스트 </TITLE>02 <SCRIPT LANGUAGE="JavaScript">03 </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"12 else

id=document.fr.id.value

[ 응용예제 4-20] 조건문 ②

13 alert(" 당신은 성인이 아니므로 사이트로 접속할 수 없습니다 .")14 } // 자바스크립트 끝 --></script></head>15 <body background="back3.gif" [ ] >②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>

leftmargin=0 topmargin=0

onClick=“idChk()”


• 반복문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 </SCRIPT></BODY></HTML>

[ 응용예제 4-22] 반복문 ② _for 문

01 <html><head><title>for 문 </title>02 <script language="javascript">03 </script></head><body></body></html>

<img src=‘clip3.gif’>

i++

[ 기본예제 4-23] 반복문 ③ _while 문

01 <HTML> <HEAD><TITLE> while 연산자 </TITLE></HEAD>02 <BODY><H3> while 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 10 </SCRIPT></BODY></HTML>


• 반복문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 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 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 = 006 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>


• 반복문o switch 문 ( 다중선택 문 ) : 여러 조건에 따라 실행되는 경우

[ 기본예제 4-27] 반복문 ⑦ _switch 문

01 <HTML> <HEAD> <TITLE> switch...case</TITLE></HEAD>02 <BODY><H3> switch...case 연습 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 25 </SCRIPT></BODY></HTML>

[ 응용예제 4-28] 반복문 ⑧ _switch 문

01 <HTML> <HEAD><TITLE>switch 연습 </TITLE>02 <SCRIPT LANGUAGE="JAVASCRIPT">03 14 </script> </HEAD> <BODY background="back2.gif">15 <H3> SWITCH 문 </H3>16 <SCRIPT LANGUAGE="JAVASCRIPT">17 </SCRIPT></BODY></HTML>

switch(x)

default:

gu(“M”);gu(“F”);

예제모음 _09 의 예제설명 및 결과화면

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

결과화면

예제모음 _09 원하는 구구단 출력하기

01 <HTML>02 <HEAD><TITLE> 예제모음 9 </TITLE>03 <SCRIPT LANGUAGE="JAVASCRIPT">04 </script></HEAD>10 <BODY background="back3.gif" align="center"></BODY></HTML>


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

실행결과

예제모음 _10 피라미드 만들기

01 <HTML><HEAD><TITLE> 예제모음 10</TITLE></HEAD>02 <BODY><center><H3> 피라미드 </H3>03 <SCRIPT LANGUAGE="JavaScript">04 </SCRIPT></BODY></HTML>


예제설명입력창에 점수를 입력하면 해당 점수에 따라서 합격과 불합격을 표기하는 페이지를 만들어보자 .?? 합격과 불합격의 기준은 점수가 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 </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>

요약

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

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

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

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

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

요약

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

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

www.themegallery.com

IT CookBook for Beginner, 4 장 끝

ch04

Documents