Download presentation
Presentation is loading. Please wait.
1
9장 자바스크립트
2
9장 자바스크립트 9.1 자바스크립트의 소개 9.1.1 자바스크립트란? 기존의 정적인 HTML은 사용자와 상호작용할 수 있는 기능이나 즉각적인 feedback을 받는 기능을 해결할 수 없음 자바스크립트는 자바를 기반으로 한 객체 지향 스크립트 언어 Window 98이나 Mac 과 같은 서로 다른 플랫폼(platform)에서도 실행되는 특징 자바스크립트는 그 모태를 자바에 두었기 때문에 대부분 자바의 기본적인 문법구조를 그대로 사용 자바와의 유사성이외에도 자바스크립트와 자바를 구분할 수 있는 몇 가지 특성이 있음 2
3
9.1.1 자바스크립트의 기능과 실행환경 HTML과 사용자 사이의 상호작용이나 feedback을 지원
9장 자바스크립트 9.1.1 자바스크립트의 기능과 실행환경 HTML과 사용자 사이의 상호작용이나 feedback을 지원 multimedia와 animation을 Web 상에 표현 Event Handler : Mouse click, Form에 입력, page간의 이동 등 Web Page상에서 일어나는 event 처리 가능 문서 객체 모형 : HTML로 정의된 Form, Frame, Layer 등의 객체 제어 가능 HTML에 속하지 않는 객체 지원 : HTML과 관련되지 않은 객체를 사용하여 별도의 정보, 예를들면, 사용자의 Browser종류, Browser가 실행되고 있는 OS 등을 알아낼 수도 있음 3
4
9.2 자바스크립트의 기초 9.2.1 HTML 문서에 자바스크립트의 삽입
9장 자바스크립트 9.2 자바스크립트의 기초 9.2.1 HTML 문서에 자바스크립트의 삽입 <SCRIPT> tag내에 Statement와 Function 정의 Event 처리기는 HTML tag안에서 이용 형식 <SCRIPT> JavaScript Statements와 Functions </SCRIPT> 4
5
자바스크립트의 작성 화면에 글자 출력하는 script 만들기 <HTML> <HEAD>
9장 자바스크립트 자바스크립트의 작성 화면에 글자 출력하는 script 만들기 <HTML> <HEAD> <TITLE> 간단한 자바스크립트 예제 </TITLE> <SCRIPT> document.write("<H1>자바스크립트 배움터에 오신걸 환영합니다.</H1>") </SCRIPT> </HEAD> <BODY> 여기는 문서의 BODY에서 출력되는 부분입니다. </BODY> </HTML> 5
6
9.2.2 자바스크립트의 변수 변수(Variable) 특정 자료형의 값을 가지고 있는 저장 장소를 가리키는 것
9장 자바스크립트 9.2.2 자바스크립트의 변수 변수(Variable) 특정 자료형의 값을 가지고 있는 저장 장소를 가리키는 것 변수는 반드시 알파벳 문자나 "_" 문자를 시작해야 함 키워드라는 자바스크립트에서 프로그램을 만들기 위해 약속으로 정해놓은 단어는 변수로 사용해서는 안됨 6
7
자바스크립트는 변수의 타입을 엄격하게 검사하지 않음 변수가 필요시마다 그 즉시 사용하면 바로 변수의 선언이 이루어짐
9장 자바스크립트 변수의 선언 자바스크립트는 변수의 타입을 엄격하게 검사하지 않음 변수가 필요시마다 그 즉시 사용하면 바로 변수의 선언이 이루어짐 자바스크립트는 특별히 변수의 타입을 지정할 필요가 없음 integer_val = 10; string_val = "JavaScript" integer_val은 int형 변수이고, string_val은 String형 변수임을 의미 var를 이용한 변수의 선언 프로그램에서 변수의 사용 범위를 명확히 하고자 할 경우 var를 이용한 변수를 사용 7
8
9.2.3 객체, 속성 및 메쏘드 객체 객체란 담당하고 있는 기능이 유사한 것들을 모아놓은 집합체
9장 자바스크립트 9.2.3 객체, 속성 및 메쏘드 객체 객체란 담당하고 있는 기능이 유사한 것들을 모아놓은 집합체 객체는 속성과 메쏘드라는 것을 포함 자바스크립트는 객체 기반 개념에 기반을 두기는 하지만 완전한 객체지향언어는 아님 자바스크립트는 웹 페이지의 구조에 기반을 둔 객체들을 가짐 8
9
Document, Browser 등에서 많이 사용되는 부분을 script언어에서 자체적으로 객체로 정의한 것
9장 자바스크립트 객체의 종류 내장 객체 Document, Browser 등에서 많이 사용되는 부분을 script언어에서 자체적으로 객체로 정의한 것 document, window, frame, form 객체등 사용자 정의 객체 9
10
각 객체는 속성을 가지며, 속성값을 변경하여 원하는 일을 할 수 있음
9장 자바스크립트 속성 각 객체는 속성을 가지며, 속성값을 변경하여 원하는 일을 할 수 있음 참조 형식 : [객체 이름].[속성] (예 : document.bgColor는 Web Page의 배경색) 메쏘드 객체의 속성값을 변경시키거나, 사용하기 위해선 이를 관리하는 인터페이스가 필요 객체와 객체의 외부 세계를 연결해주는 것을 메쏘드 10
11
9장 자바스크립트 9.2.4 자바스크립트의 연산자 할당 연산자 11
12
자바스크립트는 피연산자(operand)로 숫자를 받아 연산자를 실행 기본적인 산술 연산자로 +, -, *, / 를 지원
9장 자바스크립트 산술 연산자 자바스크립트는 피연산자(operand)로 숫자를 받아 연산자를 실행 기본적인 산술 연산자로 +, -, *, / 를 지원 이러한 기본적인 연산자 이외에 다음과 같은 연산자를 제공 12
13
9장 자바스크립트 13
14
논리 연산자는 피연산자로서 논리(Boolean)값을 취함 피연산자의 연산의 결과로 그 논리값을 리턴
9장 자바스크립트 논리 연산자 논리 연산자는 피연산자로서 논리(Boolean)값을 취함 피연산자의 연산의 결과로 그 논리값을 리턴 논리값은 참이나 거짓의 값을 가짐 14
15
비교 연산자는 피연산자를 비교하고 그 결과가 참인지 거짓인지에 따라 논리값을 리턴 피연산자는 숫자나 문자열일 수 있음
9장 자바스크립트 비교 연산자 비교 연산자는 피연산자를 비교하고 그 결과가 참인지 거짓인지에 따라 논리값을 리턴 피연산자는 숫자나 문자열일 수 있음 문자열이 사용될 때 비교는 표준 사전상의 순서에 근거 15
16
연결 연산자(Concatenation Operators)
9장 자바스크립트 연결 연산자(Concatenation Operators) 연결 연산자(+)는 두개의 문자열을 연결하고 두 피연산자의 문자열을 결합한 문자열을 리턴 예를 들어, "인터넷 " + "배움터"는 "인터넷 배움터"를 리턴 연결 할당 연산자(concatenation assignment operator) "+="도 문자열을 결합하는데 사용 연산자 우선순위 연산자의 우선순위는 식을 평가할 때 연산자가 적용되는 순서를 결정 괄호를 사용해서 연산자의 우선순위를 변경할 수 있음 16
17
9.3 자바스크립트의 함수와 이벤트의 처리 9.3.1 함수 함수의 정의와 호출
9장 자바스크립트 9.3 자바스크립트의 함수와 이벤트의 처리 9.3.1 함수 함수의 정의와 호출 프로그램에서 특정 작업을 하기 위해 독립적으로 만들어진 하나의 단위를 의미 함수는 특정한 일을 하도록 모아 놓은 코드의 집합체 함수(Function) 정의 형식 function 함수 이름 (인수1, 인수2, ...) { 실행될 코드 } 함수는 스크립트 태그안에서 직접 호출되거나, 페이지내의 이벤트에 의해 호출 17
18
Eval() : 인수로 전달된 수식을 계산하여 주는 내장 함수 예1) x = "1" y = "2.3" z = eval(x+y)
9장 자바스크립트 자바스크립트의 내장 함수 Eval() : 인수로 전달된 수식을 계산하여 주는 내장 함수 예1) x = "1" y = "2.3" z = eval(x+y) eval 함수는 두 문자열을 결합시켜 "12.3"의 문자열을 출력 예2) x = 1 y = 2.3 eval 함수의 연산을 통해 3.3을 출력 18
19
parseInt()와 parseFloat() parseInt : 인수로 들어온 문자열 => 정수로 변환
9장 자바스크립트 자바스크립트의 내장 함수 parseInt()와 parseFloat() parseInt : 인수로 들어온 문자열 => 정수로 변환 parseFloat : 인수로 들어온 문자열 => 부동소수점으로 변환 escape()와 unescape() escape는 ISO Latin-1 문자 세트를 ASCII 형태로 바꾸어 주는 함수 (예: escape("&")는 %26을 리턴) unescape 함수는 ASCII 형태를 ISO Latin-1 문자 세트로 바꾸어 주는 함수 (예 : unescape("%26")은 "&"를 리턴) 19
20
9.3.2 이벤트와 이벤트 처리기 이벤트 Web Browser에 의한 JavaScript는 주로 이벤트에의해 실행
9장 자바스크립트 9.3.2 이벤트와 이벤트 처리기 이벤트 Web Browser에 의한 JavaScript는 주로 이벤트에의해 실행 이벤트는 사용자가 특정한 행위를 발생했다는 신호를 가리킴 예: 버튼을 눌렀다든가, 링크위로 마우스가 지나가는 것 자바스크립트는 이러한 이벤트가 발생하는지를 계속해서 체크 20
21
이벤트를 받아서 처리하는 일종의 함수 혹은 메쏘드
9장 자바스크립트 이벤트 처리기 이벤트를 받아서 처리하는 일종의 함수 혹은 메쏘드 예를 들어 버튼을 눌려졌다는 이벤트에 따라 실행되는 함수가 이벤트 처리기가 됨 사용 형식 : <TAG EventHandler="JavaScript Code"> TAG : 임의의 HTML tag EventHandler : Event Handler의 이름 이벤트의 종류 21
22
9장 자바스크립트 22
23
9장 자바스크립트 9.4 객체의 활용 9.4.1 자바스크립트의 내장 객체 23
24
배열은 프로그래밍 언어에서 동일한 타입을 가지는 데이터를 저장 배열을 new 연산자를 사용해서 만들 수 있음
9장 자바스크립트 Array 객체 배열은 프로그래밍 언어에서 동일한 타입을 가지는 데이터를 저장 배열을 new 연산자를 사용해서 만들 수 있음 array_val = new Array("가", "나", "다", "라") array_val = new Array(100) 24
25
날짜와 시간에 대해서는 Date 객체를 통해서 조작 현재의 날짜와 시간을 알고 싶으면 다음 방법을 통해 알 수 있음
9장 자바스크립트 Date 객체 날짜와 시간에 대해서는 Date 객체를 통해서 조작 현재의 날짜와 시간을 알고 싶으면 다음 방법을 통해 알 수 있음 today = new Date() milisecond는 1970년 1월1일 0시를 기준으로 해서 현재까지 몇 milisecond가 지났는 가를 가지고 날짜를 만들고, datestring의 형태는 "month day, year hours:minutes:seconds"로 표시되고, month의 경우 영어 이름을 사용 25
26
"with" 문장과 사용하면 "Math."을 생략하고 사용할 수 있어 편리 with (Math) { x = cos(i)
9장 자바스크립트 Math 객체 수학식이나 상수들에 관련된 사항들을 가지고 있는 객체로 따로 생성해서 사용하지 않고 Math.constant나 Math.function()과 같은 형태로 사용 "with" 문장과 사용하면 "Math."을 생략하고 사용할 수 있어 편리 with (Math) { x = cos(i) y = abs(x) i = PI * y } 26
27
9장 자바스크립트 9.4.2 브라우저 내장객체 브라우저 내장객체의 구조 27
28
9장 자바스크립트 Window 객체 28
29
9장 자바스크립트 29
30
9장 자바스크립트 Document 객체 30
31
9장 자바스크립트 31
32
history 정보라는 것은 Browser가 가장 최근에 방문하였던 URL 주소들을 의미
9장 자바스크립트 History 객체 history 정보라는 것은 Browser가 가장 최근에 방문하였던 URL 주소들을 의미 history 객체에서 제공하는 여러 메소드들을 이용하여 방금 지나왔던 페이지로 이동할 수 있음 history list속에 있는 URL 주소를 알아낼 수는 없음 32
33
현재 Browser에 보이고 있는 문서 위치에 관한 여러 가지 정보를 제공
9장 자바스크립트 Location 객체 현재 Browser에 보이고 있는 문서 위치에 관한 여러 가지 정보를 제공 33
34
HTML 문서에 들어있는 모든 Link 정보를 제공하는 객체
9장 자바스크립트 Link 객체 HTML 문서에 들어있는 모든 Link 정보를 제공하는 객체 links는 문서에 포함된 Link 객체들을 배열로 모아 놓은 변수 document.links[0] : 문서의 첫번째에 나오는 Link를 의미 34
35
9장 자바스크립트 35
36
image 객체를 통해 이미지에 관한 정보를 나타냄
9장 자바스크립트 Image 객체 image 객체를 통해 이미지에 관한 정보를 나타냄 이미지에 대한 접근은 document 객체에 있는 images 속성을 이용하거나, image 객체의 name 속성을 통해 할 수 있다. 36
37
9장 자바스크립트 37
38
Form 객체 Form 객체는 여러개의 객체들로 구성 textarea text password hidden submit
9장 자바스크립트 Form 객체 Form 객체는 여러개의 객체들로 구성 textarea text password hidden submit reset radio checkbox buttonselect 38
39
9장 자바스크립트 39
40
현재 사용하고 있는 Browser에 관한 일반적인 정보를 제공하는 객체
9장 자바스크립트 Navigator 객체 현재 사용하고 있는 Browser에 관한 일반적인 정보를 제공하는 객체 40
41
9.5 자바스크립트의 활용 예 9.5.1 마우스의 위치에 따라 변하는 이미지
9장 자바스크립트 9.5 자바스크립트의 활용 예 9.5.1 마우스의 위치에 따라 변하는 이미지 <A> tag안에 onMouseover, onMouseout Event Handler를 사용해 처리 사용할 image는 Image객체를 이용해 미리 Load 41
42
9.5.2 풀다운 메뉴 Select 객체를 이용 Select 박스에서 원하는 사이트를 고르면 onChange라는 이벤트가 생성
9장 자바스크립트 9.5.2 풀다운 메뉴 Select 객체를 이용 Select 박스에서 원하는 사이트를 고르면 onChange라는 이벤트가 생성 이에 대한 이벤트 처리기로 showURL을 호출 바로가기 버튼을 누를 경우 onClick이라는 이벤트가 발생 42
43
9.5.3 배경색이 변하는 문서 document객체의 bgColor속성값을 바꾸어 배경색 변화
9장 자바스크립트 9.5.3 배경색이 변하는 문서 document객체의 bgColor속성값을 바꾸어 배경색 변화 배경색의 RGB값을 계산하고, timer를 설정하여 계속적으로 배경색을 바꿈 43
44
9.5.4 쿠키를 이용한 방문 횟수의 조회 쿠키 웹 사이트 방문객의 하드 디스크에 저장하는 정보
9장 자바스크립트 9.5.4 쿠키를 이용한 방문 횟수의 조회 쿠키 웹 사이트 방문객의 하드 디스크에 저장하는 정보 브라우저를 통해 정보를 저장하거나 읽어오며, 삭제됨 웹 사이트 방문객에 대한 정보를 기억하여 방문객들의 이름과 마지막으로 방문했던 날짜와 시간, 방문 횟수 등까지 기억 다음과 같은 다섯 항목이 저장됨 name=VALUE expires=DATE path=PATH domain=DOMAIN_NAME secure 44
45
9장 자바스크립트 실행 결과 45
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
![UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.](/90/14451722/big_thumb.jpg "UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.>")
