웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 최미정 강원대학교 IT 대학 컴퓨터과학전공

웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 최미정 강원대학교 IT대학 컴퓨터과학전공

강의 내용 자바스크립트 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기

자바스크립트 개요 자바스크립트 • 사용자와 상호작용하는 동적 웹 문서 작성 • 웹에서 사용할 수 있도록 만들어진 스크립트 언어 • 선 마이크로시스템스와 넷스케이프사가 공동으로 개발 • 주요 특징 • 웹 문서(HTML 문서)에 포함되어 웹 서버에서 브라우저로 다운로드됨 • 웹 브라우저가 자바스크립트를 실행 (실행 엔진을 브라우저 내에 포함) • 마우스 클릭, 키보드 입력 등의 이벤트 처리를 서버와 연동 없이 실행 • 윈도우 프레임을 조절하거나, 윈도우 방문 히스토리를 기억하는 등의 프로그래밍 가능

자바스크립트의 실행 자바스크립트 • 컴파일러 같은 특수한 개발 도구가 필요하지 않음 브라우저에 내장된 인터프리터(interpreter)에 의해 실행됨 • 메모장 등의 에디터 프로그램과 웹 브라우저만 있으면 쉽게 프로그래밍 할 수 있음 • 클라이언트 스크립트 • 브라우저(클라이언트)에서 수행되는 스크립트 • JavaScript, VB Script  작성이 간단하나, 복잡한 프로그래밍이 어렵고, 소스가 공개됨 • 서버 스크립트 • 서버에서 수행되고, 결과만 브라우저에 전달됨 • ASP, PHP, JSP  복잡한 프로그래밍이 가능하고, 소스가 공개되지 않으나, 어려움

자바스크립트의 특징 자바스크립트 웹 문서에 바로 코딩하여 삽입할 수 있기 때문에 작성 및 편집이 쉽다. 클라이언트에서 바로 실행되므로, 처리 과정이 신속 (컴파일 불필요) 플랫폼에 독립적 (거의 모든 브라우저에서 지원) 객체지향 언어이나, 클래스의 상속을 지원하지 않으며, 자바 언어에 비해 한정된 객체와 메소드만을 지원

자바스크립트의 구조 자바스크립트 자바스크립트는 HTML문서에서 <head>부분이나 <body>부분에 <script>태그로 자바스크립트를 정의하여 삽입

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

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

자바스크립트의 삽입 방법 (1/2) 자바스크립트 문서 내부에 자바스크립트 포함시키기

자바스크립트의 삽입 방법 (2/2) 자바스크립트 외부파일에 작성된 자바스크립트 불러오기

기본 자료형 자바스크립트

변수(variable) (1/2) 자바스크립트 • 변수란? • 프로그램에서 자료형 값을 저장하기 위한 기억장소의 이름 • (상수와 다르게) 프로그램이 실행되면서 기억된 내용이 변경될 수 있음 • 지역 변수(local variable)와 전역 변수(global variable)로 분류 • 지역 변수 • 함수 안에 선언된 변수로, 함수 안에서만 사용될 수 있음 • 지역 변수 선언의 예 • var sum; // sum이라는 변수를 지역 변수로 선언한다. • var total = 100; // 지역 변수 sum을 선언하고, 값을 100으로 초기화한다.

변수(variable) (2/2) 자바스크립트 • 전역 변수 • 함수 밖에 선언된 변수로, 여러 함수에 걸쳐 사용될 수 있음 • 전역 변수 선언의 예:sum = 200; // 전역 변수 sum을 선언하고, 값을 200으로 초기화 • 변수를 만드는 예 • 변수명의 첫 글자는 반드시 영문자나 밑줄로 시작 • 변수명에는 영문자 (A~Z, a~z), 숫자(0~9), 밑줄(_)만을 사용 • 이미 정의한 예약어는변수명으로 사용 불가 • 예약어의 예: abstract, in, static, void, super, long, break, final, if, …

연산자의 종류 자바스크립트 산술 연산자(사칙연산을 수행할 때사용하는 연산자):+, -, *, /, % 대입 연산자(값(숫자)을 대입할 때 사용하는 연산자):=, +=, -=, *=, /=, %= 관계 연산자(두 값의 크기를 비교하는 연산자):>, <, >=, <=, ==, != 논리 연산자(여러 조건(관계 연산 결과)을 연결할 때 사용하는 연산자)!, &&, || 증감 연산자(변수 값을 1 증가 혹은 감소시키는 연산자):++, --

산술 연산자 자바스크립트

대입 연산자 자바스크립트

관계 연산자 자바스크립트

논리 연산자 자바스크립트

증감 연산자 자바스크립트

IF (1/6) 자바스크립트 • 조건(condition)이 참인경우에만 해당 문장들을 수행하고자 할 때, 사용하는 제어문 • 단순 IF문 • 조건을 만족하는 경우에만, 명령문(들)을 실행 • 조건이 만족하지 않으면 명령문(들)을 실행하지 않고, 다음 단계로 진행함 if(조건) 명령문1; if(조건) { 명령문1; 명령문2; … 명령문n; }

IF (2/6) 자바스크립트 단순 IF문 예제

IF (3/6) 자바스크립트 • IF ELSE • 조건을 만족하면, 명령문A(들)를 실행 • 조건을 만족하지 않으면 명령문B(들)를 실행 if(조건) 명령문A; else 명령문B; if(조건) { 명령문A1; … 명령문An; } else { 명령문B1; … 명령문Bn; }

IF (4/6) 자바스크립트 IFELSE 예제

IF (5/6) 자바스크립트 • 다중 IF ELSE • 조건1을 만족하면, 명령문1을 실행 • 조건2을 만족하면, 명령문2를 실행 • … • 만족하는 조건이 없으면 명령문n을 수행 if(조건1) 명령문1; else if(조건2) 명령문2; … else 명령문n

IF (6/6) 자바스크립트 다중 IFELSE

WHILE (1/2) 자바스크립트 • 주어진 조건이 만족하는 한 WHILE문 내의 문장(들)을 반복해서 실행 • 조건이 참(true)이면,WHILE 블록 안의 명령문들을 (반복) 수행 • 조건이 거짓(false)인 경우, WHILE문을 수행하지 않고 루프를 빠져나감 while(조건) { 명령문 1; 명령문 2; … 명령문 n; }

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

DO WHILE (1/2) 자바스크립트 • 조건을 검사하여 조건이 만족하는 한 루프를 반복 수행 • WHILE과의 차이점 • WHILE은 조건을 먼저 검사한 후 실행여부를 결정, DO WHILE은 먼저 실행한 후 조건을 검사 • WHILE의 경우 명령문들이 한번도 수행되지 않을 수 있으나,DO WHILE의 경우 명령문들은 적어도 한번은 수행됨 do { 명령문 1; 명령문 2; … 명령문 n; } while(조건);

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

FOR (1/2) 자바스크립트 • 조건이 만족하는 동안에 FOR문 내의 문장들을 반복하여 수행 • FOR문 내부는 초기화 부분, 조건 부분, 증감 부분으로 구성됨 • 초기화 부분은 처음 한 번만 수행되고,조건 부분은 루프 수행 시마다 계속 수행할지 여부를 판단하며,증감 부분은 매 루프 마지막에 인덱스(index) 변화를 위해 수행되는 부분임 for(초기화 부분; 조건 부분; 증감 부분) { 문장1; … }

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

CONTINUE & BREAK (1/3) 자바스크립트 • CONTINUE • 명령문(들)을 반복하는 과정에서 현 단계(반복)의 진행을 중단시키고,다음의 새로운 반복 단계를 위한 조건 검사 부분으로 되돌아가고자 할 때 사용 • BREAK • 반복 과정을 벗어나고자 할 때 사용 (루프를 벗어나고자 할 때 사용)

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

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

SWITCH (1/2) 자바스크립트 • 여러 가지 조건에 맞추어 수행해야 하는 명령문이 있는 경우 사용 • 주어진 값이 value1인 경우, 명령문들1이 수행되고,주어진 값이 valueN인 경우, 명령문들N이 수행되며,주어진 값에 해당하는 value가 없는 경우, default의 명령문들X가 수행된다. switch(값) { case value1: 명령문들1; break; … case valueN: 명령문들N; break; default: 명령문들X; break; }

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

함수(function) 개념 자바스크립트 • 특정한 작업을 수행하도록 만들어진 독립적인 프로그램 모듈 • 프로그램에서 반복되는 부분을 함수로 만들어 놓음 • 해당 함수가 필요할 때마다, 호출(call)하여 사용 • 프로그램 크기를 줄일 수 있고, 작성 시간도 단축 시킬 수 있음 • 프로그램의 모듈화 가능 • 하나의 큰 프로그램을 작은 단위의 여러 함수로 분해하여 작성 • 함수를 통한 모듈화가 가능하여, 알아보기 쉽고 수정이 용이함 • 함수의 입출력과 처리 • 함수는 매개변수(parameter)를 입력으로 받아서, • 내부 처리를 수행한 후(즉, 함수의 기능을 수행한 후), • 결과를 리턴(출력)한다.

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

함수예제 자바스크립트

내장 함수 (1/2) 자바스크립트 자바스크립트에 기본으로 포함된 함수

내장 함수 (2/2) 자바스크립트 alert() 함수의 사용 예

자바스크립트 내장 객체(Built-in Object) 자바스크립트 • 자바스크립트에서 많이 사용되는 객체를 미리 정의하여 제공 • 주요 내장객체 • Number • Math • Screen • Date • Array • String

Math (1/2) 자바스크립트 • 자연로그, 지수 등의 수학적 처리가 필요한 속성 제공 • sine, cosine, log 등의 메소드를 제공하여 복잡한 계산식 처리 • abs(), ceil(), cos(), exp(), floor(), log(), max(), min(), pow(), sin(), sqrt(), tan()

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

Screen (1/2) 자바스크립트 컴퓨터의 화면 해상도, 색상 수, 화면 크기 등의 정보를 알려주는 객체

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

웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 최미정 강원대학교 IT 대학 컴퓨터과학전공