html, 자바스크립트, asp를중심으로

제 4장 자바스크립트 기초

웹 프로그래밍HTML, 자바스크립트, ASP를 중심으로

http://www.art-com.co.kr/online/ppt_gallery_1.htm

2

제 4장 자바스크립트 기초

– 4.1 자바스크립트 개요

– 4.2 자바스크립트 문서

– 4.3 자바스크립트의 자료형

– 4.4 연산자

– 4.5 제어문

– 4.6 이벤트와 이벤트 핸들러

목차

3

4.1.1 자바 스크립트 란

자바 스크립트는 넷스케이프 社에서 자체 개발한 라이브스크립트라는 언어와 선 마이크로시스템 社에서 개발한java의 기능이 결합해서 만들어진 객체 지향 언어를 말함

자바 스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 넷스케이프, 익스플로러 등 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있음

4

4.1.2 자바 스크립트의 특징

웹 브라우저에서 실행된다.

– 웹 브라우저에는자바 스크립트를 실행할 수 있는 프로그램이

포함되어있어 HTML문서에 삽입되어있는 자바 스크립트는 별

도의 작업 없이 클라이언트 측에서 실행됨

– 클라이언트 측 스크립트이기때문에 서버의 부하를 줄일 수 있

다는 큰 장점을 가지고 있음

5


작업이 편리하다.

– 일반적인프로그래밍언어와는 달리 사용자가 쉽게사용할 수

있게 만들어져 있음 (ex, 변수 동적 할당)

– 또한 자바, C 등 프로그래밍 언어의 기본적인 틀을그대로 갖추

고 있어 사용자로부터 익숙한 작업을 할 수 있게 해줌

– 하지만누구나 쉽게 사용할 수 있도록 만들어진만큼 복잡한 기

능을 구현하기 위해서 다소 무리가 있음

6


자바 스크립트는 객체 기반 언어다.

– 완전한객체지향 프로그래밍언어라고할 수는 없지만 객체지향

프로그래밍 언어의 요소가 강한 객체기반의 언어임

– 자바 스크립트 기능을 수행하는 프로그램을 기술 할 때 객체, 메

소드와같은 형태를 사용하여 기술하는데 이와같은 형식은 객

체지향프로그래밍에서사용한 것과 같음

7

4.2 자바 스크립트 문서

자바 스크립트는 HTML문서 안에 포함되어 선언됨

<SCRIT> 태그를 이용하여 자바 스크립트 또는 비주얼 베이직 스크립트라는 것을 알림

일반적으로 <HEAD> 태그 안에서 사용됨

8

4.2.1 자바 스크립트와 HTML 문서

<SCRIPT> 태그의 속성들

속 성 설 명

SRC = “파일경로” 자바 스크립트를 HTML문서에 직접 기술하지 않고선언해놓은 코드를 문서에 삽입하는 방법을 말함

일반적으로 *.js 확장자를 이용함

TYPE = “text/javascript” SCRIPT 형태를 의미하며, 자바 스크립트를 이용하기 위해서는 “text/javascript” 로 기술함

LANUAGE = “JavaScript” 스크립트에서 사용할 언어의 종류를 나타내는 속성

JavaScript, VBScript 중 자바스크립트 사용시JavaScript를 기술함

9

4.2.2 외부 자바스크립트 사용

자바스크립트 예제

예제 4-1 Hello.html

<html>

<head>

<title> 자바스크립트 시작 </title>

</head>

<body>

<SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript">

//자바스크립트 프로그램

document.write("Hello, JavaScript");

</SCRIPT>

</body>

</html>

예제 4-2 Hello-file.html

<html>

<head>

<title> 자바스크립트 시작 </title></head>

<body>

<SCRIPT TYPE ="text/javascript"

LANGUAGE = "JavaScript"

SRC = "hello_file.js">

</SCRIPT></body>

</html>

◆ Hello_file.js

document.write("hello, JavaScript");

교재소스/CHAP4-Code/4-1-Hello.html





교재소스/CHAP4-Code/4-2-hello_file.html







10

4.2.2 외부 자바스크립트 사용

자바스크립트 예제

◆ 문서에 직접 기술한 방식과 외부 파일을 포함시킨 방법모두 결과는 같음

◆ 외부 파일 삽입을 이용함으로써 코드의 재사용이 가능해 짐

11

4.2.3 자바 스크립트의 어휘

프로그래밍 언어에서 어휘란 문법적으로 의미 있는 최소한의 단위를 말하며, 이것을 토큰이라 부름

토큰은 두 종류로 나눌 수 있음

– 예약어 : 예약어란프로그래밍언어설계시 그 기능과 용도가

이미 지정되어있는 단어를 말함, 따라서 예약어를

변수 이름으로할 수 없음

– 리터럴 : 프로그래밍 언어에서 직접 값을 나타내는 자구 단위

숫자형, 문자형, 논리적 상수형, 널(null)

12


예약어

– 현재 사용중인 예약어

– 향후 사용 예정인 예약어

break for new var

continue function return void

delete if this while

else in typedef with

abstract do import short boolean double

instanceof static byte enum int super

case export interface whitch catch extends

long synchronized char final native

throw class finally package throws const

float private transient debugger goto protected

try Default implements public volatile

13


리터럴 (literal)

– 숫자 : 자바 스크립트에서 제공하는 숫자 자료형은 정수와

부동 소수점으로나뉨

◆ 8진수 : 012, 067, 0233

◆ 10진수 : 10, 55, 155

◆ 16진수 : 0xa, 0x37, 0x9b

◆ 부동(浮動)소수점 : 3.14, 5.12456, 1265.23355

14


리터럴 (literal)

– 문자열 : “ 사이에 표현되는 문자열을의미함

◆ “Hello javascript”

– 논리형상수 : true, false의 값을 가짐

◆ a = true, b = false;

– 널(null)

◆ 널이란 아무것도없음을 표기하며, 객체가 어떤 값도 갖고

있지 않음을 나타냄

15

4.3.1 변수

변수란 프로그램에서 사용하는 값을 저장하기 위해 사용하는 기억장소를 의미함

자바 스크립트는 다른 언어와 달리 변수의 자료타입을정의하지 않음, 추후에 변수에 직접 값이 배정될 때 변수의 자료형이 결정됨

변수는 var 이란 예약어를 사용하여 선언 가능

var A, b, C ; // A, b, C란 변수를 선언함

var D = 100; // D변수를 선언함과 동시에 값(100)을 지정

b = “hello”; //위에서 지정한 b 변수에 값 할당

16

4.3.2 배열

배열이란 여러 개의 값을 저장할 수 있는 기억장소를 의미함

배열은 배열이름과 첨자를 통해 액세스가 가능함

일반적인 프로그래밍 언어와 다르게 배열의 요소가 모두같은 자료 타입일 필요는 없음

배열은 new라는 예약어를 사용하여 내장객체인 Array를 사용하여 생성함

17

4.3.2 배열

배열 예제 (1)

예제 4-3 var.html

<html>

<head>

<title> 자바스크립트 에서 변수와 배열의 사용법

</title>

</head>

<body>


var name="Hong Kil Dong";

var age=19;

document.write("각 변수를 사용하여 출력"+"<br>");

document.write("이름:" +name+"<br>");

document.write("나이:"+age);

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

document.write("배열을 사용하여 출력"+"<br>");

var persion = new Array(2);

persion[0]="Hong Kil Dong";

persion[1]=19;

document.write("이름:"+persion[0]+"<br>");

document.write("나이:"+ persion[1]);

</SCRIPT>

</body>

</html>

교재소스/CHAP4-Code/4-3-var.html





18

4.4 연산자

연산자란 연산의 의미를 나타내는 기호로써 자바스크립트에서는 산술, 논리, 비교, 비트, 배정, 문자열에 관한연산자를 제공함

연산자 종류 연 산 자

산술 연산자 +, -, *, /, %

증감 연산자 ++, --

논리 연산자 &&, ||, !

비교 연산자 ==, !=, >, <, >=, <=

비트 연산자 &, |, ^, ~, <<, >>, >>>

배정 연산자 =, +=, -=, *=, /=, %=, <<=, >>=, >>>=, ^=

문자열 연산자 +, +=

19

4.4 연산자

연산자는 연산자들간에 우선순위가 존재함연산자 종류 연 산 자

1 ( ), [ ]

2 !, ~, ++, - -

3 *, /, %

4 +, -

5 <<, >>, >>>

6 <, <=, >, >=

7 ==, !=

8 &

9 ^

10 |

11 &&

12 X

13 ? :

14 =, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=

20

4.5 제어문

제어문이란 프로그램의 흐름을 제어하기 위해 사용함

종 류 설 명

if 주어진 조건을 만족할 때만 실행함

if…..else 조건에 따라 처리함, 조건이 참이면 if 문 다음의 문장을 수행하고, 조건이 거짓이면 else문 다음의 문장을 수행함

for for문 다음의 문장을 정해진 횟수만큼 반복함

while 조건이 참이면 해당 문장을 반복 수행함

switch … case 조건에 따라 해당하는 case문을 수행함

do … while While문과 같음, 한번은 꼭 실행된다는 특징을 가짐

break 반복문의 실행을 종료함

continue 반복문의 실행을 처음으로 돌아가 실행함

21

4.5.1 IF 문

if 문은 기본적으로 수식의 참, 거짓을 평가하여 그 결과에 따라 다음 문장을 수행함

if (expression1)

statement1;

else if (expression2)

statement2;

else

statement3;

◆ expression1 참 expression2 관계없음 => statement1 수행

◆ expression1 거짓 expression2 참 => statement2 수행

◆ expression1 거짓 expression2 거짓 => statement3 수행

22

4.5.1 IF 문

if문 예제 (1)

예제 4-5 if.html

<html>

<head><title>Java Script 시작</title></head>

<body>

<form>

<p>좋아하는 과일을 선택하세요<br>

<input type = radio name=apple onclick="fun(1,this.form)"> 사과<br>

<input type = radio name=apple onclick="fun(2,this.form)"> 오렌지<br>

<input type = radio name=apple onclick="fun(3,this.form)"> 바나나<br>

<p>제가 좋아하는 과일은

<input type = "text" name="result" size= 10> 입니다.

</form>


//java Script 프로그램

function fun (num,myform) {

if (num=='1') {

myform.result.value = "사과"

}

else if (num=='2') {

myform.result.value = "오렌지"

}

else { //num=='3‘

myform.result.value = "바나나"

}

}

</SCRIPT></body></html>

교재소스/CHAP4-Code/4-5-if.html





23

4.5.1 IF 문

if문 예제 (2)

◆ 예제 코드에서 이벤트(onClick), function 등은 4.6절, 5장 등을 통해 배우게 됨

24

4.5.2 FOR 문

for문은 조건이 만족하는 한 지정된 횟수만큼 문장을반복하여 실행함

for (initial; condition; increment;) {

statement

}

◆ initial 값이 increment 만큼씩 증가하면서 condition을 채크하여 condition이참인 동안 statement를 반복 수행함

◆ ex) for (i=0; i<3 ; i++)

i = 0, 1, 2 증가하는 동안 총 3번의 statement를 수행

25

4.5.2 FOR 문

for문 예제

예제 4-6 for.html

<html>

<head>

<title> Java Script 시작 </title>

</head>

<body>

<form>

<p>몇 단을 출력할까요?<br>

<input type = "text" name="result" size= 5>

<input type = "button" value="확인" onClick="fun(this.form)">

</form>

<SCRIPT TYPE ="text/javascript"LANGUAGE = "JavaScript">


function fun (myform)

{

var count,answer;

answer = myform.result.value;

for (count=1; count < 10; count++) {

document.write(answer+" * "+ count+ " = "

+answer*count + "<br>");

}

}

</SCRIPT></body></html>

교재소스/CHAP4-Code/4-6-for.html





26

4.5.2 FOR 문

for문 예제

27

4.5.3 WHILE 문

while문은 조건을 판별하여 조건이 참인 동안 해당 문장을 반복 수행함

while (condition) {

statement

}

◆ while 문은 condition이 참인 동안 statement를 수행함

◆ LOOP 탈출에 대한 부분의 정의하지 않는다면 무한루프에 빠질 수 있음

◆ 따라서 while 문은 탈출 조건의 명확히 해야 할 필요가 있음

◆ break, continue 문을 활용

28

4.5.3 WHILE 문

while문 예제예제 4-8 while.html

<html>

<head><title> Java Script 시작 </title></head>

<p> while 문을 사용하여 1에서 부터 10까지의합 구하기<br><br>

<SCRIPT TYPE ="text/javascript"LANGUAGE = "JavaScript">


var count,value;

count=1;

value=0;

while(count < 11) {

document.write(count);

value += count;

count++;

if(count==11) {

document.write(" = ");

}

else

document.write(" + ");

}

document.write(value);

</SCRIPT>

</body>

<html>

교재소스/CHAP4-Code/4-8-while.html





29

4.5.3 WHILE 문

while문 예제

◆ 예제 4-8은 while문을 마치 for문처럼 이용하였음 i 값을 임으로 1씩 증가시켜10까지만 루프를 돌게 작성하였음

◆ for (i = 1; i<11; i++) 과 같음

30

4.5.4 DO … WHILE 문

do … while 문은 다른 제어문과 달리 한번 실행된 후조건을 검사한다는 점이 다름

do

statement

while (condition)

◆ 적어도 한번의 statement를 수행해야 할 경우에 사용함

◆ 한번은 실행된다는 점을 제외하고 while 문과 같음

31

4.5.5 SWITCH … CASE 문

switch-case 문은 여러 개의 조건이 있고 각 조건에따라 실행되어야 하는 경우에 사용함

switch (수식 or 변수)

{

case result1 : statement1

break;

case result2 : statement2

break;

default : statement3

break;

}

◆ 수식 또는 변수의 값에 따라 해당되는 case의 statement를 수행함

◆ break 문이 없다면 해당 case의 statement를 수행하고 하위 case의statement도 수행하는 문제점이 발생함

32


switch-case 예제(1)예제 4-12 SwitchCase.html

<html> <head><title> Java Script 시작 </title>

</head> <body>

<form> <p>요일을 입력하시오 <input type = "text" name="result" size= 5>

<input type = "button" value = "확인" onClick="fun(this.form)"> </form>


function fun(myform) {

switch(myform.result.value) {

case '월':

document.write(myform.result.value+"요일을 입력하셨습니다.");

break;

case '화':


break;

교재소스/CHAP4-Code/4-12-Switch-Case.html





33


switch-case 예제(2)

case '수':


break;

case '목':


break;

case '금':


break;

case '토':


break;

34



case '일':


break;

default:

document.write(myform.result.value+" --> 잘못 입력하셨습니다.");

break;

}

}

</SCRIPT>

</body>

</html>

35



◆ switch … case 문은 if … else 문으로 변환 할 수 있음

◆ default의 경우 어떠한 조건도 맞지 않았을 때 수행됨

36

4.5.6 BREAK

break 문은 앞서 switch … case 문에서 보았듯이LOOP를 수행하는 중 루프를 빠져나가야 할 때 그 위치에 break; 를 기술함

case '일':


break;

default:

document.write(myform.result.value+"->잘못 입력하셨습니다.");

break;

◆ break문을 만나면 해당 루프를 종료하고 다음 statement를 수행함

37

4.5.7 CONTINUE

continue 문은 반복문의 실행 중에 조건문으로 되돌아가는 역할을 함, 즉 continue문장 다음에 있는 문장은실행되지 않고 LOOP의 처음으로 돌아감

while ( i <10) {

if (i %2 == 0) {

i++;

continue;

}

i++;

}

◆ 이처럼 다시 조건으로 가길 원하는 위치에 continue;를 기술함

38

4.6 이벤트와 이벤트 핸들러

이벤트란 일반적으로 사용자에 의한 특정 행위의 결과로발생함

일반적으로 사용자와 프로그램 사이에 상호작용을 처리해야 할 경우에 사용함

예를 들면 마우스로 버튼을 클릭했을 때 무엇인가 반응이 생기게 하는 방법을 의미함

이벤트가 발생하면 발생한 이벤트를 처리해야 하는 루틴이 필요하게 되는데 이것을 이벤트 핸들러라 부름

39


이벤트의 종류

이벤트 이벤트 핸들러 설 명

abort OnAbort 이미지를 읽다가 중단했을 경우

blur OnBlur 대상에서 포커스가 이동되었을 경우

change OnChange 대상에 입력되어 있는 값이 바뀌었을 경우

click OnClick 대상을 클릭했을 경우

dbclick OnDbclick 대상을 더블클릭 했을 경우

dragdrop OnDragDrop 대상을 클릭한 상태에서 이동했을 경우

error OnError 에러가 발생했을 경우

focus OnFocus 대상에 포커스가 들어 왔을 경우

keydown OnKeyDown 키를 입렸했을 경우

40


이벤트의 종류이벤트 이벤트 핸들러 설 명

keypress OnKeyPress 키를 눌렀을 경우

keyup OnKeyUp 키를 누른 후 놓았을 경우

load OnLoad 대상을 열었을 경우

mousedown OnMouseDown 마우스 단추를 눌렀을 경우

mousemove OnMouseMove 마우스를 움직였을 경우

mouseout OnMouseOut 대상에서 마우스 포인터가 벗어났을 경우

mouseover OnMouseOver 대상에 마우스 포인터가 위치했을 경우

mouseup OnMouseUp 마우스 포인터를 누른 후 놓았을 경우

move OnMove 윈도우나 프레임을 움직였을 경우

reset OnReset 대상을 재시작 했을 경우

resize OnResize 윈도우나 프레임의 크기를 변경했을 경우

select OnSelect 입력양식의 한 필드를 선택했을 경우

submit OnSubmit 입력 양식을 서버로 보냈을 경우

unload OnUnload 대상을 종료했을 경우

41

4.6.1 Load / Unload

Load 이벤트는 브라우저에서 문서를 열 때 발생함, Unload 이벤트는 브라우저를 종료할 때 발생함

예제 4-15 onload_onUnload.html

<html>

<head>

<title> 웹 브라우저가 시작되고 종료될 때 </title>

</head>

<body background ="image/mountain.jpg" onload="alert('홈페이지에 오신 것을 환영합니다.')"

onunload="alert('안녕히 계십시요..')">

</body>

</html>◆ load 와 unload는 <BODY> 태그에

적용함

교재소스/CHAP4-Code/4-15-onload_onunload.html





42

4.6.2 Click / Dbclick

Click 이벤트는 특정대상을 클릭했을 때, Dbclick는 특정대상을 더블 클릭했을 경우 발생함

예제 4-16 click_dbclick.html

<html><head>

<title> 클릭 이벤트와 더블클릭 이벤트가 발생했을 때

</title></head>

<body>

<form>

<input type = button value="클릭" onclick="alert('한번 클릭')">

<input type = button value="더블 클릭" onclick="alert('더블 클릭')">

</form></body>

</html>◆ 이벤트를 발생시킬 특정한 대상에

이벤트를 등록함 (예제에서는 버튼)

교재소스/CHAP4-Code/4-16-click_dbclick.html





43

4.6.3 Mouseover / Mouseout

특정 대상에 마우스 포인터가 위치했을 때와 떠날 때 발생함

예제 4-17 Mouse_out_over.html

<html>

<head>

<title> 마우스 포커스에 대한 이벤트 </title>

</head>

<body><center>

<img src="image/mountain.jpg"

OnMouseOver="alert('마우스 포인터가 그림안에 위치')"

OnMouseOut="alert('마우스 포인터가 그림밖에 위치')" >

</center></body>

</html>

◆ 이벤트를 발생시킬 특정한 대상에 이벤트를 등록함 (예제에서는이미지)

교재소스/CHAP4-Code/4-17-Mouse_out_over.html





44

4.6.4 Focus / Blur

Focus 이벤트는 입력양식에 포커스가 있을 때 발생하며, Blur 이벤트는 떠날 때 발생함

예제 4-18 Focus_Blur.html

<html>

<head>

<title> 포커스에 대한 이벤트 </title>

</head>

<body>

<p>입력 :

<input type="text" size=10

onfocus="alert('포커스가 있습니다.')"

onblur="alert('포커스가 떠났습니다.')">

</p></body>

</html>

교재소스/CHAP4-Code/4-18-Focus_Blur.html





html, 자바스크립트, asp를중심으로

Documents