자바스크립트 (Part I)ysmoon/courses/2009_2.5/wi/08...1 웹과웹과인터넷인터넷활용활용및및실습실습 (Web & Internet) 자바스크립트 (Part I) 문양세 강원대학교강원대학교ITIT대학대학컴퓨터과학전공컴퓨터과학전공

1

웹과웹과 인터넷인터넷 활용활용 및및 실습실습(Web & Internet)(Web & Internet)

자바스크립트자바스크립트(Part I)(Part I)

문양세문양세강원대학교강원대학교 ITIT대학대학 컴퓨터과학전공컴퓨터과학전공

강의강의 내용내용자바스크립트

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

자바스크립트의 내장 객체

브라우저 내장 객체

Web & Internetby Yang-Sae MoonPage 2

자바스크립트를 이용한 다양한 효과주기

2

자바스크립트자바스크립트 개요개요

사용자와 상호작용하는 동적 웹 문서 작성

웹에서 사용할 수 있도록 만들어진 스크립트 언어

선 마이크로시스템스와 넷스케이프사가 공동으로 개발

자바스크립트

선 마이크로시스템스와 넷스케이프사가 공동으로 개발

주요 특징

• 웹 문서(HTML 문서)에 포함되어 웹 서버에서 브라우저로 다운로드됨

• 웹 브라우저가 자바스크립트를 실행 (실행 엔진을 브라우저 내에 포함)


• 마우스 클릭, 키보드 입력 등의 이벤트 처리를 서버와 연동 없이 실행

• 윈도우 프레임을 조절하거나, 윈도우 방문 히스토리를 기억하는 등의 프로그래밍 가능

자바스크립트의자바스크립트의 실행실행

컴파일러 같은 특수한 개발 도구가 필요하지 않음

브라우저에 내장된 인터프리터(interpreter)에 의해 실행됨

메모장 등의 에디터 프로그램과 웹 브라우저만 있으면 쉽게 프로그래밍

자바스크립트

메모장 등의 에디터 프로그램과 웹 브라우저만 있으면 쉽게 프로그래밍

할 수 있음

클라이언트 스크립트

• 브라우저(클라이언트)에서 수행되는 스크립트

• JavaScript VB Script 작성이 간단하나 복잡한 프로그래밍이 어렵고 소스가 공개됨


• JavaScript, VB Script 작성이 간단하나, 복잡한 프로그래밍이 어렵고, 소스가 공개됨

서버 스크립트

• 서버에서 수행되고, 결과만 브라우저에 전달됨

• ASP, PHP, JSP 복잡한 프로그래밍이 가능하고, 소스가 공개되지 않으나, 어려움

3

자바스크립트의자바스크립트의 특징특징

웹 문서에 바로 코딩하여 삽입할 수 있기 때문에 작성 및 편집이 쉽다.

클라이언트에서 바로 실행되므로, 처리 과정이 신속 (컴파일 불필요)

플랫폼에 독립적 (거의 모든 브라우저에서 지원)

자바스크립트

플랫폼에 독립적 (거의 모든 브라우저에서 지원)

객체지향 언어이나, 클래스의 상속을 지원하지 않으며,

자바 언어에 비해 한정된 객체와 메소드만을 지원


자바스크립트의자바스크립트의 구조구조

자바스크립트는 HTML문서에서 <head>부분이나 <body>부분에

<script>태그로 자바스크립트를 정의하여 삽입

자바스크립트

• 문서 내에 자바스크립트 작성하는 방법

<script language="javascript" >

자바스크립트 소스

</script>

• 외부 문서에서 자바스크립트를 불러오는 방법

<script language="javascript" src="자바스트립트 외부 소스파일“>

</script>


</script>

• 자바 스크립트를 지원하는 않는 브라우저에서 처리하는 방법

<noscript>

현재 스크립트를 브라우저에서 지원하는 않을 경우 보여줄 내용

</noscript>

4

자바스크립트의자바스크립트의 주석문주석문 (1/2)(1/2)자바스크립트

// // 주석문주석문

기호(//) 뒤에 있는 모든 문자들은 주석문으로 간주된다.

설명할 내용이 1줄로 구성될 때 주로 사용한다설명할 내용이 1줄로 구성될 때 주로 사용한다.

/* /* 주석문주석문 **//

기호 /* 와 */ 사이에 문자들은 모두 주석문으로 간주된다.

설명할 내용이 많아서 여러 줄로 입력해야 할 때 사용된다.


<!>

자바스크립트를 지원하지 않는 웹 브라우저에서는 기호사이에 있는

자바스크립트 코드들은 모두 주석문으로 간주하게 된다.

화면에 자바스크립트 코드들이 전혀 표시되지 않게 된다.

자바스크립트의자바스크립트의 주석문주석문 (2/2)(2/2)자바스크립트


5

자바스크립트의자바스크립트의 삽입삽입 방법방법 (1/2)(1/2)

문서 내부에 자바스크립트 포함시키기

자바스크립트


자바스크립트의자바스크립트의 삽입삽입 방법방법 (2/2)(2/2)

외부파일에 작성된 자바스크립트 불러오기

자바스크립트


6





함수





기본기본 자료형자료형자바스크립트

분류 기본자료형 진법 설명 예

숫자정수형

10진법 소수점이 포함되지 않는 10진수 1, 9, -20,

8진법0으로 시작하는 숫자로 0부터 7까지의 조합으로 구성

017, 0171숫자

자료형

구성

16진법0x로 시작하는 숫자로 0에서 9까지의 수와 A부터 F까지의 문자 조합으로 구성

0x79A, 0x25

실수형일반

실수형소수점을 포함하는 10진수 0.124, 9.227

문자열 · ·이중따옴표(“”)와 단일따옴표(‘ ’)내에 있는 연속된 문자들

“love", "사랑”

논리형 · ·참(true)과 거짓(false)의 두 가지 값 중 하나만가짐

true, false

변수의 값이 정의되지 않아서 변수에 아무 값


널(Null) 값 · ·변수의 값이 정의되지 않아서 변수에 아무 값도 현재 들어 있지 않다는 의미

null

NaN 값 · ·NaN(Not a Number)은 숫자가 아니라는의미

NaN

7

변수변수(variable) (1/2)(variable) (1/2)

변수란?

• 프로그램에서 자료형 값을 저장하기 위한 기억장소의 이름

• (상수와 다르게) 프로그램이 실행되면서 기억된 내용이 변경될 수 있음

자바스크립트

• 지역 변수(local variable)와 전역 변수(global variable)로 분류

지역 변수

• 함수 안에 선언된 변수로, 함수 안에서만 사용될 수 있음

• 지역 변수 선언의 예


var sum; // sum이라는 변수를 지역 변수로 선언한다.

var total = 100; // 지역 변수 sum을 선언하고, 값을 100으로 초기화한다.

변수변수(variable) (2/2)(variable) (2/2)

전역 변수

• 함수 밖에 선언된 변수로, 여러 함수에 걸쳐 사용될 수 있음

• 전역 변수 선언의 예:

자바스크립트

sum = 200; // 전역 변수 sum을 선언하고, 값을 200으로 초기화

변수를 만드는 예

• 변수명의 첫 글자는 반드시 영문자나 밑줄로 시작

• 변수명에는 영문자 (A~Z, a~z), 숫자(0~9), 밑줄(_)만을 사용


• 이미 정의한 예약어는 변수명으로 사용 불가

• 예약어의 예: abstract, in, static, void, super, long, break, final, if, …

8

연산자의연산자의 종류종류

산술 연산자(사칙연산을 수행할 때 사용하는 연산자):

+, -, *, /, %

대입 연산자(값(숫자)을 대입할 때 사용하는 연산자):

자바스크립트

대입 연산자(값(숫자)을 대입할 때 사용하는 연산자):

=, +=, -=, *=, /=, %=

관계 연산자(두 값의 크기를 비교하는 연산자):

>, <, >=, <=, ==, !=

논리 연산자(여러 조건(관계 연산 결과)을 연결할 때 사용하는 연산자)


!, &&, ||

증감 연산자(변수 값을 1 증가 혹은 감소시키는 연산자):

++, --

산술산술 연산자연산자자바스크립트


9

대입대입 연산자연산자자바스크립트


관계관계 연산자연산자자바스크립트


10

논리논리 연산자연산자자바스크립트


증감증감 연산자연산자자바스크립트


11





함수





IF (1/6)IF (1/6)

조건(condition)이 참인 경우에만 해당 문장들을 수행하고자 할 때,

사용하는 제어문

자바스크립트

단순 IF문

if(조건)

명령문1;

if(조건) {

명령문1;

명령문2;

…


• 조건을 만족하는 경우에만, 명령문(들)을 실행

• 조건이 만족하지 않으면 명령문(들)을 실행하지 않고, 다음 단계로 진행함

명령문n;

}

12

IF (2/6)IF (2/6)

단순 IF문 예제

자바스크립트


IF (3/6)IF (3/6)

IF ELSE

자바스크립트

if(조건)

명령문A;

if(조건) {

명령문A1;

else

명령문B;

…

명령문An;

} else {

명령문B1;

…

명령문Bn;

}


• 조건을 만족하면, 명령문A(들)를 실행

• 조건을 만족하지 않으면 명령문B(들)를 실행

}

13

IF (4/6)IF (4/6)

IF ELSE 예제

자바스크립트


IF (5/6)IF (5/6)

다중 IF ELSE

자바스크립트

if(조건1)

명령문1;

건 을 만 하면 명령 을 실행

명령문 ;

else if(조건2)

명령문2;

…

else

명령문n


• 조건1을 만족하면, 명령문1을 실행

• 조건2을 만족하면, 명령문2를 실행

• …

• 만족하는 조건이 없으면 명령문n을 수행

14

IF (6/6)IF (6/6)

다중 IF ELSE

자바스크립트


WHILE (1/2)WHILE (1/2)

주어진 조건이 만족하는 한 WHILE문 내의 문장(들)을 반복해서 실행

자바스크립트

while(조건) {

명령문 1;

• 조건이 참(true)이면, WHILE 블록 안의 명령문들을 (반복) 수행

건이 거짓 f l 인 경우 을 행하지 않 를 빠져나감

명령문 1;

명령문 2;

…

명령문 n;

}


• 조건이 거짓(false)인 경우, WHILE문을 수행하지 않고 루프를 빠져나감

15

WHILE (2/2)WHILE (2/2)자바스크립트


DO WHILE (1/2)DO WHILE (1/2)

조건을 검사하여 조건이 만족하는 한 루프를 반복 수행

WHILE과의 차이점

• WHILE은 조건을 먼저 검사한 후 실행여부를 결정

자바스크립트

• WHILE은 조건을 먼저 검사한 후 실행여부를 결정,

DO WHILE은 먼저 실행한 후 조건을 검사

• WHILE의 경우 명령문들이 한번도 수행되지 않을 수 있으나,

DO WHILE의 경우 명령문들은 적어도 한번은 수행됨

do {

명령문 1;


명령문 2;

…

명령문 n;

} while(조건);

16

DO WHILE (2/2)DO WHILE (2/2)자바스크립트


FOR (1/2)FOR (1/2)

조건이 만족하는 동안에 FOR문 내의 문장들을 반복하여 수행

자바스크립트

do {

내 초기화 건 감 성됨

명령문 1;

명령문 2;

…

명령문 n;

} while(조건);


• FOR문 내부는 초기화 부분, 조건 부분, 증감 부분으로 구성됨

• 초기화 부분은 처음 한 번만 수행되고,

조건 부분은 루프 수행 시마다 계속 수행할지 여부를 판단하며,

증감 부분은 매 루프 마지막에 인덱스(index) 변화를 위해 수행되는 부분임

17

FOR (2/2)FOR (2/2)자바스크립트


CONTINUE & BREAK (1/3)CONTINUE & BREAK (1/3)

CONTINUE

• 명령문(들)을 반복하는 과정에서 현 단계(반복)의 진행을 중단시키고,

다음의 새로운 반복 단계를 위한 조건 검사 부분으로 되돌아가고자 할 때 사용

자바스크립트

BREAK

• 반복 과정을 벗어나고자 할 때 사용 (루프를 벗어나고자 할 때 사용)


18

CONTINUE & BREAK (2/3)CONTINUE & BREAK (2/3)자바스크립트


CONTINUE & BREAK (3/3)CONTINUE & BREAK (3/3)자바스크립트


19

SWITCH (1/2)SWITCH (1/2)

여러 가지 조건에 맞추어 수행해야 하는 명령문이 있는 경우 사용

자바스크립트

switch(값) {case value1:

명령문들1명령문들1;break;

…case valueN:

명령문들N;break;

default:명령문들X;


• 주어진 값이 value1인 경우, 명령문들1이 수행되고,

주어진 값이 valueN인 경우, 명령문들N이 수행되며,

주어진 값에 해당하는 value가 없는 경우, default의 명령문들X가 수행된다.

break;}

SWITCH (2/2)SWITCH (2/2)자바스크립트


20





함수





함수함수(function) (function) 개념개념

특정한 작업을 수행하도록 만들어진 독립적인 프로그램 모듈

프로그램에서 반복되는 부분을 함수로 만들어 놓음

• 해당 함수가 필요할 때마다 호출(call)하여 사용

자바스크립트

• 해당 함수가 필요할 때마다, 호출(call)하여 사용

• 프로그램 크기를 줄일 수 있고, 작성 시간도 단축 시킬 수 있음

프로그램의 모듈화 가능

• 하나의 큰 프로그램을 작은 단위의 여러 함수로 분해하여 작성

• 함수를 통한 모듈화가 가능하여, 알아보기 쉽고 수정이 용이함

함수의 입출력과 처리


함수의 입출력과 처리

• 함수는 매개변수(parameter)를 입력으로 받아서,

• 내부 처리를 수행한 후(즉, 함수의 기능을 수행한 후),

• 결과를 리턴(출력)한다.

21

자바스크립트자바스크립트 함수의함수의 구조구조자바스크립트

FUNCTION 함수명(매개변수 1, 매개변수 2 ..... 매개변수 N){

명령문 1;명령문 2;명령문 3;명령문 3;.......명령문 n;

RETURN 반환 값이나 변환변수;}

function add(a, b){


{var sum;sum = a + b;return sum;

}

함수함수 예제예제자바스크립트


22

내장내장 함수함수 (1/2)(1/2)

자바스크립트에 기본으로 포함된 함수

자바스크립트

함수명 기능

alert(문자열)[확인] 버튼이 있는 메시지 상자를 나타낸다. 메시지의 줄 바꿈을 원할경우에는 ‘\ ' 을 이용한다

(문자열)경우에는 ‘\n' 을 이용한다.

confirm(문자열,초기 값)[확인]과 [취소] 버튼이 있는 방문자가 스스로 버튼을 선택할 수 있는 대화상자를 보여준다.

escape(문자) 문자를 ASCII 형식의 문자로 변환하여 준다.

eval(수식) 문자열을 수식으로 받아들여 그 내용을 계산한다.

isNaN(값)값이 숫자인지 판별하여 숫자인 경우 TRUE를 그렇지 않으면 FALSE를리턴 한다.

parseint(문자열) 문자열을 정수로 변환하여 준다.

parseFloat(문자열) 문자열을 부동 소수점으로 변환하여 준다


parseFloat(문자열) 문자열을 부동 소수점으로 변환하여 준다.

prompt(문자열,초기 값)값을 입력할 수 있는 입력 대화상자를 보여준다. 문자열이 메시지 형식으로 설명글 기능을 하여 나타나고, 초기 값이 입력란에 나타난다.

unescape(ASCII코드문자) escape 함수와 반대로 ASCII 코드의 문자를 문자 세트로 변환하여 준다.

내장내장 함수함수 (2/2)(2/2)

alert() 함수의 사용 예

자바스크립트


23





함수

Documents

자바스크립트 (Part I)ysmoon/courses/2009_2.5/wi/08...1 웹과웹과인터넷인터넷활용활용및및실습실습 (Web & Internet) 자바스크립트 (Part I) 문양세 강원대학교강원대학교ITIT대학대학컴퓨터과학전공컴퓨터과학전공