자바스크립트 - Kangwoncs.kangwon.ac.kr/~ysmoon/courses/2010_1/wp/07.pdf · 2016-06-02 · 자바스크립트 자바스크립트의기초 자바스크립트의기본문법 자바스크립트제어구조

1

웹웹 프로그래밍프로그래밍 및및 실습실습(Web Programming & Practice)(Web Programming & Practice)g gg g

자바스크립트자바스크립트

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

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

자바스크립트의 기초

자바스크립트의 기본 문법

자바스크립트 제어 구조

함수

내장 객체

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

Web Programming & Practiceby 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문 내의 문장들을 반복하여 수행

자바스크립트

for(초기화 부분; 조건 부분; 증감 부분) {

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

초기화 은 처음 한 번만 행되

for(초기화 부분; 조건 부분; 증감 부분) {

문장1;

…

}


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

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

증감 부분은 매 루프 마지막에 인덱스(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





함수

내장 객체



자바스크립트자바스크립트 내장내장 객체객체(Built(Built--in Object)in Object)

자바스크립트에서 많이 사용되는 객체를 미리 정의하여 제공

주요 내장 객체

자바스크립트

주요 내장 객체

• Number

• Math

• Screen

• Date

• Array


y

• String

24

Math (1/2)Math (1/2)

자연로그, 지수 등의 수학적 처리가 필요한 속성 제공

자바스크립트

속성 기능

E 자연로그의 밑으로 사용하는 오일러 상수 값(2.718)을 가지고 있는 속성

LN2 2의 자연로그 값(0.693)을 가지고 있는 속성

LN10 10의 자연로그 값(2.032)을 가지고 있는 속성

LOG2E 밑이 2인 E의 로그 값(1.442)을 가지고 있는 속성

LOG10E 밑이 10인 E의 로그 값(0.434)을 가지고 있는 속성

PI 파이 값(3.14)을 가지고 있는 속성

SQRT1_2 1/2의 제곱근 값 (0.707)을 가지고 있는 속성

SQRT2 2의 제곱근 값(1.414)을 가지고 있는 속성


sine, cosine, log 등의 메소드를 제공하여 복잡한 계산식 처리

• abs(), ceil(), cos(), exp(), floor(), log(), max(), min(), pow(), sin(), sqrt(), tan()

Q

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


25

Screen (1/2)Screen (1/2)

컴퓨터의 화면 해상도, 색상 수, 화면 크기 등의 정보를 알려주는 객체

자바스크립트

속성 기능

availHeight 윈도우의 실제적인 작업 화면의 높이를 픽셀로 가지고 있는 속성

availWidth 윈도우의 실제적인 작업 화면의 넓이를 픽셀로 가지고 있는 속성

height 윈도우 작업 화면의 높이를 픽셀로 가지고 있는 속성

width 윈도우 작업 화면의 넓이를 픽셀로 가지고 있는 속성

colorDepth 해상도의 컬러 수를 가지고 있는 속성


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


26

Array (1/2)Array (1/2)

Array(배열): 동일한 타입을 갖는 객체(데이터)들의 모임

Array 객체 메소드

자바스크립트

메서드 기능

concat(value1,value2, ..., valuen)

기존 배열에 여러 개의 배열들(value1, value2 ..... valuen)을 순서대로결합하여 하나의 배열을 생성하는 메서드

pop()배열의 마지막 요소를 가져오는 메서드, 메서드를 호출한 후 배열의크기도 하나 줄임

push(value1,value2, ..., valuen)

배열의 끝에 value1, value2 ..... valuen의 값 들을 삽입하고 배열의 크기를 반환하는 메서드

reverse()배열 요소들을 저장된 역순으로 바꾸어 주는 메서드로서 역순으로


reverse()바뀐 배열을 가져옴

sort() 배열에 저장되어 있는 값들을 정렬하는 메서드

toString() 배열의 요소를 문자열로 만들어 반환하는 메서드

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


27

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


브라우저브라우저 내장내장 객체객체

자바스크립트 내장 객체임

웹 브라우저 자체에 대한 정보 (이름, 버전 정보 등)

대표적인 브라우저 내장 객체

자바스크립트

대표적인 브라우저 내장 객체

• Window: 브라우저 객체 중 최상위 객체, 여러 속성과 메소드 제공

• Document: 브라우저에 보이는 문서의 내용을 제어, 배경 및 글자 색상, 입출력 제어

• Location: 웹 문서의 주소에 관련된 정보 관리

• History: 브라우저에서 최근 방문한 주소 목록을 이벤트에 따라 앞뒤로 이동할 수 있는

기능을 제공


28

History History 사용사용 예제예제자바스크립트






함수

내장 객체

자바스크립트를 이용한 다양한 효과주기 (개념 위주로 이해 바람)


29

팝업팝업 창창 띄우기띄우기 (1/2)(1/2)

사이트를 방문한 사용자에게 중요한 정보를 알려주기 위한 용도로 사용

Window 객체의 open 메소드를 이용하여 만듦

사용자에게 혼란을 주는 많은 수의 팝업 창을 띄우는 것은 자제해야 함

자바스크립트

사용자에게 혼란을 주는 많은 수의 팝업 창을 띄우는 것은 자제해야 함


팝업팝업 창창 띄우기띄우기 (2/2)(2/2)자바스크립트


30

즐겨찾기에즐겨찾기에 추가하기추가하기 (1/2)(1/2)

사용자가 사이트를 방문할 때 마다 직접

URL를 입력 또는 검색을 통해서 찾아오는

불편함을 없애기 위하여 개발

자바스크립트

불편함을 없애기 위하여 개발

브라우저의 즐겨찾기 항목을 클릭함으로써

원하는 사이트를 쉽게 이동


즐겨찾기에즐겨찾기에 추가하기추가하기 (2/2)(2/2)자바스크립트


31

프린트하기프린트하기

현재 페이지(혹은 원하는 페이지) 내용을 프린트할 수 있음

자바스크립트


상태바에상태바에 흐르는흐르는 메시지메시지

메뉴의 하단의 상태바에 정보를 표시하기 위해 사용

너무 많은 효과를 주면 사용자에게 혼란을 줄 수 있음

자바스크립트


32

원하는원하는 배경색으로배경색으로 바꾸기바꾸기 (1/2)(1/2)

문서에 대한 배경색을 의미 (기본적으로 배경색은 흰색)

Document 객체의 bgColor 속성을 이용

자바스크립트


원하는원하는 배경색으로배경색으로 바꾸기바꾸기 (2/2)(2/2)자바스크립트


33

마우스마우스 오른쪽오른쪽 버튼버튼 금지금지

보안이 필요하다 생각되어 HTML 코드를 숨기고자 할 경우에 사용

Document 객체의 oncontextmenu 속성을 이용

자바스크립트


마우스마우스 커서를커서를 따라다니는따라다니는 이미지이미지(1/2)(1/2)자바스크립트


34

마우스마우스 커서를커서를 따라다니는따라다니는 이미지이미지(2/2)(2/2)자바스크립트






함수

내장 객체



35

Homework #6 (Homework #6 (실습실습 #4)#4)자바스크립트

Documents

자바스크립트 - Kangwoncs.kangwon.ac.kr/~ysmoon/courses/2010_1/wp/07.pdf · 2016-06-02 · 자바스크립트 자바스크립트의기초 자바스크립트의기본문법 자바스크립트제어구조