(Web Programming & Practice) 웹 프로그래밍 및 실습 (Web Programming & Practice) 자바스크립트 문양세 강원대학교 IT대학 컴퓨터과학전공
강의 내용 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기
자바스크립트 개요 사용자와 상호작용하는 동적 웹 문서 작성 웹에서 사용할 수 있도록 만들어진 스크립트 언어 선 마이크로시스템스와 넷스케이프사가 공동으로 개발 주요 특징 웹 문서(HTML 문서)에 포함되어 웹 서버에서 브라우저로 다운로드됨 웹 브라우저가 자바스크립트를 실행 (실행 엔진을 브라우저 내에 포함) 마우스 클릭, 키보드 입력 등의 이벤트 처리를 서버와 연동 없이 실행 윈도우 프레임을 조절하거나, 윈도우 방문 히스토리를 기억하는 등의 프로그래밍 가능
자바스크립트의 실행 자바스크립트 컴파일러 같은 특수한 개발 도구가 필요하지 않음 브라우저에 내장된 인터프리터(interpreter)에 의해 실행됨 메모장 등의 에디터 프로그램과 웹 브라우저만 있으면 쉽게 프로그래밍 할 수 있음 클라이언트 스크립트 브라우저(클라이언트)에서 수행되는 스크립트 JavaScript, VB Script 작성이 간단하나, 복잡한 프로그래밍이 어렵고, 소스가 공개됨 서버 스크립트 서버에서 수행되고, 결과만 브라우저에 전달됨 ASP, PHP, JSP 복잡한 프로그래밍이 가능하고, 소스가 공개되지 않으나, 어려움
자바스크립트의 특징 웹 문서에 바로 코딩하여 삽입할 수 있기 때문에 작성 및 편집이 쉽다. 클라이언트에서 바로 실행되므로, 처리 과정이 신속 (컴파일 불필요) 플랫폼에 독립적 (거의 모든 브라우저에서 지원) 객체지향 언어이나, 클래스의 상속을 지원하지 않으며, 자바 언어에 비해 한정된 객체와 메소드만을 지원
자바스크립트의 구조 자바스크립트 자바스크립트는 HTML문서에서 <head>부분이나 <body>부분에 <script>태그로 자바스크립트를 정의하여 삽입 문서 내에 자바스크립트 작성하는 방법 <script language="javascript" > 자바스크립트 소스 </script> 외부 문서에서 자바스크립트를 불러오는 방법 <script language="javascript" src="자바스트립트 외부 소스파일“> 자바 스크립트를 지원하는 않는 브라우저에서 처리하는 방법 <noscript> 현재 스크립트를 브라우저에서 지원하는 않을 경우 보여줄 내용 </noscript>
자바스크립트의 주석문 (1/2) // 주석문 /* 주석문 */ <!-- 주석문 ---> 기호(//) 뒤에 있는 모든 문자들은 주석문으로 간주된다. 설명할 내용이 1줄로 구성될 때 주로 사용한다. /* 주석문 */ 기호 /* 와 */ 사이에 문자들은 모두 주석문으로 간주된다. 설명할 내용이 많아서 여러 줄로 입력해야 할 때 사용된다. <!-- 주석문 ---> 자바스크립트를 지원하지 않는 웹 브라우저에서는 기호<!--와 -->사이에 있는 자바스크립트 코드들은 모두 주석문으로 간주하게 된다. 화면에 자바스크립트 코드들이 전혀 표시되지 않게 된다.
자바스크립트의 주석문 (2/2) 자바스크립트
자바스크립트의 삽입 방법 (1/2) 자바스크립트 문서 내부에 자바스크립트 포함시키기
자바스크립트의 삽입 방법 (2/2) 자바스크립트 외부파일에 작성된 자바스크립트 불러오기
강의 내용 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기
기본 자료형 분류 기본자료형 진법 설명 예 숫자 자료형 정수형 10진법 소수점이 포함되지 않는 10진수 1, 9, -20, 자바스크립트 분류 기본자료형 진법 설명 예 숫자 자료형 정수형 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
변수(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문 자바스크립트 조건(condition)이 참인 경우에만 해당 문장들을 수행하고자 할 때, 사용하는 제어문 단순 IF문 조건을 만족하는 경우에만, 명령문(들)을 실행 조건이 만족하지 않으면 명령문(들)을 실행하지 않고, 다음 단계로 진행함 if(조건) 명령문1; if(조건) { 명령문1; 명령문2; … 명령문n; }
IF (2/6) 자바스크립트 단순 IF문 예제
IF (3/6) IF ELSE 조건을 만족하면, 명령문A(들)를 실행 조건을 만족하지 않으면 명령문B(들)를 실행 if(조건) 자바스크립트 IF ELSE 조건을 만족하면, 명령문A(들)를 실행 조건을 만족하지 않으면 명령문B(들)를 실행 if(조건) 명령문A; else 명령문B; if(조건) { 명령문A1; … 명령문An; } else { 명령문B1; 명령문Bn; }
IF (4/6) 자바스크립트 IF ELSE 예제
IF (5/6) 다중 IF ELSE if(조건1) 명령문1; else if(조건2) 명령문2; … else 자바스크립트 다중 IF ELSE 조건1을 만족하면, 명령문1을 실행 조건2을 만족하면, 명령문2를 실행 … 만족하는 조건이 없으면 명령문n을 수행 if(조건1) 명령문1; else if(조건2) 명령문2; … else 명령문n
IF (6/6) 자바스크립트 다중 IF ELSE
WHILE (1/2) 주어진 조건이 만족하는 한 WHILE문 내의 문장(들)을 반복해서 실행 while(조건) { 명령문 1; 자바스크립트 주어진 조건이 만족하는 한 WHILE문 내의 문장(들)을 반복해서 실행 조건이 참(true)이면, WHILE 블록 안의 명령문들을 (반복) 수행 조건이 거짓(false)인 경우, WHILE문을 수행하지 않고 루프를 빠져나감 while(조건) { 명령문 1; 명령문 2; … 명령문 n; }
WHILE (2/2) 자바스크립트
DO WHILE (1/2) 조건을 검사하여 조건이 만족하는 한 루프를 반복 수행 WHILE과의 차이점 자바스크립트 조건을 검사하여 조건이 만족하는 한 루프를 반복 수행 WHILE과의 차이점 WHILE은 조건을 먼저 검사한 후 실행여부를 결정, DO WHILE은 먼저 실행한 후 조건을 검사 WHILE의 경우 명령문들이 한번도 수행되지 않을 수 있으나, DO WHILE의 경우 명령문들은 적어도 한번은 수행됨 do { 명령문 1; 명령문 2; … 명령문 n; } while(조건);
DO WHILE (2/2) 자바스크립트
FOR (1/2) 조건이 만족하는 동안에 FOR문 내의 문장들을 반복하여 수행 자바스크립트 조건이 만족하는 동안에 FOR문 내의 문장들을 반복하여 수행 FOR문 내부는 초기화 부분, 조건 부분, 증감 부분으로 구성됨 초기화 부분은 처음 한 번만 수행되고, 조건 부분은 루프 수행 시마다 계속 수행할지 여부를 판단하며, 증감 부분은 매 루프 마지막에 인덱스(index) 변화를 위해 수행되는 부분임 for(초기화 부분; 조건 부분; 증감 부분) { 문장1; … }
FOR (2/2) 자바스크립트
CONTINUE & BREAK (1/3) CONTINUE BREAK 자바스크립트 CONTINUE 명령문(들)을 반복하는 과정에서 현 단계(반복)의 진행을 중단시키고, 다음의 새로운 반복 단계를 위한 조건 검사 부분으로 되돌아가고자 할 때 사용 BREAK 반복 과정을 벗어나고자 할 때 사용 (루프를 벗어나고자 할 때 사용)
CONTINUE & BREAK (2/3) 자바스크립트
CONTINUE & BREAK (3/3) 자바스크립트
SWITCH (1/2) 여러 가지 조건에 맞추어 수행해야 하는 명령문이 있는 경우 사용 switch(값) { 자바스크립트 여러 가지 조건에 맞추어 수행해야 하는 명령문이 있는 경우 사용 주어진 값이 value1인 경우, 명령문들1이 수행되고, 주어진 값이 valueN인 경우, 명령문들N이 수행되며, 주어진 값에 해당하는 value가 없는 경우, default의 명령문들X가 수행된다. switch(값) { case value1: 명령문들1; break; … case valueN: 명령문들N; default: 명령문들X; }
SWITCH (2/2) 자바스크립트
Homework #5 (실습 #4) 자바스크립트
강의 내용 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기
함수(function) 개념 특정한 작업을 수행하도록 만들어진 독립적인 프로그램 모듈 자바스크립트 특정한 작업을 수행하도록 만들어진 독립적인 프로그램 모듈 프로그램에서 반복되는 부분을 함수로 만들어 놓음 해당 함수가 필요할 때마다, 호출(call)하여 사용 프로그램 크기를 줄일 수 있고, 작성 시간도 단축 시킬 수 있음 프로그램의 모듈화 가능 하나의 큰 프로그램을 작은 단위의 여러 함수로 분해하여 작성 함수를 통한 모듈화가 가능하여, 알아보기 쉽고 수정이 용이함 함수의 입출력과 처리 함수는 매개변수(parameter)를 입력으로 받아서, 내부 처리를 수행한 후(즉, 함수의 기능을 수행한 후), 결과를 리턴(출력)한다.
자바스크립트 함수의 구조 function 함수명(매개변수 1, 매개변수 2 ..... 매개변수 N) { 명령문 1; 명령문 2; 명령문 3; ....... 명령문 n; RETURN 반환 값이나 변환변수; } function add(a, b) { var sum; sum = a + b; return sum; }
함수 예제 자바스크립트
내장 함수 (1/2) 자바스크립트에 기본으로 포함된 함수 함수명 기능 alert(문자열) [확인] 버튼이 있는 메시지 상자를 나타낸다. 메시지의 줄 바꿈을 원할 경우에는 ‘\n' 을 이용한다. confirm(문자열,초기 값) [확인]과 [취소] 버튼이 있는 방문자가 스스로 버튼을 선택할 수 있는 대화상자를 보여준다. escape(문자) 문자를 ASCII 형식의 문자로 변환하여 준다. eval(수식) 문자열을 수식으로 받아들여 그 내용을 계산한다. isNaN(값) 값이 숫자인지 판별하여 숫자인 경우 TRUE를 그렇지 않으면 FALSE를 리턴 한다. parseint(문자열) 문자열을 정수로 변환하여 준다. parseFloat(문자열) 문자열을 부동 소수점으로 변환하여 준다. prompt(문자열,초기 값) 값을 입력할 수 있는 입력 대화상자를 보여준다. 문자열이 메시지 형식으로 설명글 기능을 하여 나타나고, 초기 값이 입력란에 나타난다. unescape(ASCII코드문자) escape 함수와 반대로 ASCII 코드의 문자를 문자 세트로 변환하여 준다.
내장 함수 (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() 속성 기능 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)을 가지고 있는 속성
Math (2/2) 자바스크립트
Screen (1/2) 컴퓨터의 화면 해상도, 색상 수, 화면 크기 등의 정보를 알려주는 객체 속성 기능 availHeight 자바스크립트 컴퓨터의 화면 해상도, 색상 수, 화면 크기 등의 정보를 알려주는 객체 속성 기능 availHeight 윈도우의 실제적인 작업 화면의 높이를 픽셀로 가지고 있는 속성 availWidth 윈도우의 실제적인 작업 화면의 넓이를 픽셀로 가지고 있는 속성 height 윈도우 작업 화면의 높이를 픽셀로 가지고 있는 속성 width 윈도우 작업 화면의 넓이를 픽셀로 가지고 있는 속성 colorDepth 해상도의 컬러 수를 가지고 있는 속성
Screen (2/2) 자바스크립트
Array (1/2) Array(배열): 동일한 타입을 갖는 객체(데이터)들의 모임 Array 객체 메소드 메서드 기능 자바스크립트 Array(배열): 동일한 타입을 갖는 객체(데이터)들의 모임 Array 객체 메소드 메서드 기능 concat(value1, value2, ..., valuen) 기존 배열에 여러 개의 배열들(value1, value2 ..... valuen)을 순서대로 결합하여 하나의 배열을 생성하는 메서드 pop() 배열의 마지막 요소를 가져오는 메서드, 메서드를 호출한 후 배열의 크기도 하나 줄임 push(value1, value2, ..., valuen) 배열의 끝에 value1, value2 ..... valuen의 값 들을 삽입하고 배열의 크기를 반환하는 메서드 reverse() 배열 요소들을 저장된 역순으로 바꾸어 주는 메서드로서 역순으로 바뀐 배열을 가져옴 sort() 배열에 저장되어 있는 값들을 정렬하는 메서드 toString() 배열의 요소를 문자열로 만들어 반환하는 메서드
Array (2/2) 자바스크립트
Array (2/2) 자바스크립트
브라우저 내장 객체 자바스크립트 내장 객체임 웹 브라우저 자체에 대한 정보 (이름, 버전 정보 등) 대표적인 브라우저 내장 객체 Window: 브라우저 객체 중 최상위 객체, 여러 속성과 메소드 제공 Document: 브라우저에 보이는 문서의 내용을 제어, 배경 및 글자 색상, 입출력 제어 Location: 웹 문서의 주소에 관련된 정보 관리 History: 브라우저에서 최근 방문한 주소 목록을 이벤트에 따라 앞뒤로 이동할 수 있는 기능을 제공
History 사용 예제 자바스크립트
강의 내용 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기 (개념 위주로 이해 바람)
팝업 창 띄우기 (1/2) 사이트를 방문한 사용자에게 중요한 정보를 알려주기 위한 용도로 사용 자바스크립트 사이트를 방문한 사용자에게 중요한 정보를 알려주기 위한 용도로 사용 Window 객체의 open 메소드를 이용하여 만듦 사용자에게 혼란을 주는 많은 수의 팝업 창을 띄우는 것은 자제해야 함
팝업 창 띄우기 (2/2) 자바스크립트
즐겨찾기에 추가하기 (1/2) 자바스크립트 사용자가 사이트를 방문할 때 마다 직접 URL를 입력 또는 검색을 통해서 찾아오는 불편함을 없애기 위하여 개발 브라우저의 즐겨찾기 항목을 클릭함으로써 원하는 사이트를 쉽게 이동
즐겨찾기에 추가하기 (2/2) 자바스크립트
프린트하기 자바스크립트 현재 페이지(혹은 원하는 페이지) 내용을 프린트할 수 있음
상태바에 흐르는 메시지 메뉴의 하단의 상태바에 정보를 표시하기 위해 사용 너무 많은 효과를 주면 사용자에게 혼란을 줄 수 있음 자바스크립트 메뉴의 하단의 상태바에 정보를 표시하기 위해 사용 너무 많은 효과를 주면 사용자에게 혼란을 줄 수 있음
원하는 배경색으로 바꾸기 (1/2) 문서에 대한 배경색을 의미 (기본적으로 배경색은 흰색) 자바스크립트 문서에 대한 배경색을 의미 (기본적으로 배경색은 흰색) Document 객체의 bgColor 속성을 이용
원하는 배경색으로 바꾸기 (2/2) 자바스크립트
마우스 오른쪽 버튼 금지 보안이 필요하다 생각되어 HTML 코드를 숨기고자 할 경우에 사용 자바스크립트 보안이 필요하다 생각되어 HTML 코드를 숨기고자 할 경우에 사용 Document 객체의 oncontextmenu 속성을 이용
마우스 커서를 따라다니는 이미지(1/2) 자바스크립트
마우스 커서를 따라다니는 이미지(2/2) 자바스크립트
강의 내용 자바스크립트의 기초 자바스크립트의 기본 문법 자바스크립트 제어 구조 함수 내장 객체 자바스크립트를 이용한 다양한 효과주기
Homework #6 (실습 #5) 자바스크립트