하이브리드웹설계

(1)

하이브리드웹설계

12주-1회 자바스크립트 - 1

(2)

하이브리드웹설계 강의노트

강의 내용

 자바 스크립터 소개

 자바 스크립터 기초

 자바 스크립터 함수와 이벤트 처리

(3)

 기존의 정적인 HTML은 사용자와 상호작용할 수 있는 기능이나 즉 각적인 feedback을 받는 기능을 해결할 수 없음

 자바스크립트는 자바를 기반으로 한 객체 지향 스크립트 언어

 Window 환경이나 Mac 과 같은 서로 다른 플랫폼(platform)에서도 실행되는 특징

 자바스크립트는 그 모태를 자바에 두었기 때문에 대부분 자바의 기 본적인 문법구조를 그대로 사용

자바스크립트란?

자바스크립트의 소개

(4)

 HTML과 사용자 사이의 상호작용이나 feedback을 지원

 multimedia와 animation을 Web 상에 표현

 Event Handler

 Mouse click, Form에 입력, page간의 이동 등 Web Page상에서 일어나는 event 처리 가능

 문서 객체 모형 : HTML로 정의된 Form, Frame, Layer 등의 객체 제어 가능

 HTML에 속하지 않는 객체 지원

 HTML과 관련되지 않은 객체를 사용하여 별도의 정보들을 알아낼 수 있음

 예를 들면, 사용자의 Browser종류, Browser가 실행되고 있는 OS 등

자바스크립트의 기능과 실행환경

(5)

 <SCRIPT> tag내에 Statement와 Function 정의

 Event 처리기는 HTML tag안에서 이용

 형식

JavaScript Statements와 Functions

</SCRIPT>

자바스크립트의 기초

HTML 문서에 자바스크립트의 삽입

(6)

 자바스크립트의 작성

 화면에 글자 출력하는 script 만들기

(7)

 변수(Variable)

 특정 자료형의 값을 가지고 있는 저장 장소를 가리키는 것

 변수는 반드시 알파벳 문자나 "_" 문자를 시작해야 함

 키워드라는 자바스크립트에서 프로그램을 만들기 위해 약속 으로 정해놓은 단어는 변수로 사용해서는 안됨

자바스크립트의 변수

(8)

 변수의 선언

 자바스크립트는 변수의 타입을 엄격하게 검사하지 않음

 변수가 필요시마다 그 즉시 사용하면 바로 변수의 선언이 이 루어짐

 자바스크립트는 특별히 변수의 타입을 지정할 필요가 없음 integer_val = 10; string_val = "JavaScript"

 integer_val은 int형 변수이고, string_val은 String형 변수임 을 의미

 var를 이용한 변수의 선언

 프로그램에서 변수의 사용 범위를 명확히 하고자 할 경우 var 를 이용한 변수를 사용

(9)

 var 변수 선언 예제

(10)

 객체

 객체란 담당하고 있는 기능이 유사한 것들을 모아놓은 집합체

 객체는 속성과 메쏘드라는 것을 포함

 자바스크립트는 객체 기반 개념에 기반을 두기는 하지만 완전 한 객체지향언어는 아님

 자바스크립트는 웹 페이지의 구조에 기반을 둔 객체들을 가짐

객체, 속성 및 메쏘드

(11)

 객체의 종류

 내장 객체

• Document, Browser 등에서 많이 사용되는 부분을 script 언어에서 자체적으로 객체로 정의한 것

• document, window, frame, form 객체등

 사용자 정의 객체

• 사용자가 직접 객체를 만들어서 사용

(12)

 속성

 각 객체는 속성을 가지며, 속성값을 변경하여 원하는 일을 할 수 있음

 속성

• 참조 형식 : [객체 이름].[속성]

 (예 : document.bgColor는 Web Page의 배경색)

 메쏘드

 객체의 속성값을 변경시키거나, 사용하기 위해선 이를 관리하 는 인터페이스가 필요

 객체와 객체의 외부 세계를 연결해주는 것을 메쏘드

(13)

 할당 연산자

자바스크립트의 연산자

 산술 연산자

 자바스크립트는 피연산자(operand)로 숫자를 받아 연산자를 실행

 기본적인 산술 연산자로 +, -, *, / 를 지원

 이러한 기본적인 연산자 이외에 다음과 같은 연산자를 제공

(14)

 논리 연산자는 피연산자로서 논리(Boolean)값을 취함

 피연산자의 연산의 결과로 그 논리값을 리턴

 논리값은 참이나 거짓의 값을 가짐

 비교 연산자

 비교 연산자는 피연산자를 비교하고 그 결과가 참인지 거짓인지에 따 라 논리값을 리턴

 피연산자는 숫자나 문자열일 수 있음

(15)

 연결 연산자(Concatenation Operators)

 연결 연산자(+)는 두개의 문자열을 연결하고 두 피연산자의 문자 열을 결합한 문자열을 리턴

 예를 들어, "인터넷 " + "배움터"는 "인터넷 배움터"를 리턴

 연결 할당 연산자(concatenation assignment operator) "+="도 문자열을 결합하는데 사용

 연산자 우선순위

 연산자의 우선순위는 식을 평가할 때 연산자가 적용되는 순서를 결정

 괄호를 사용해서 연산자의 우선순위를 변경할 수 있음

(16)

 함수의 정의와 호출

 프로그램에서 특정 작업을 하기 위해 독립적으로 만들어진 하 나의 단위를 의미

 함수는 특정한 일을 하도록 모아 놓은 코드의 집합체

 함수(Function) 정의 형식

Function 함수 이름 (인수1, 인수2, ...) { 실행될 코드

}

 함수는 스크립트 태그 안에서 직접 호출되거나, 페이지내의 이벤트에 의해 호출

자바스크립트의 함수와 이벤트의 처리

함수

(17)

 자바스크립트의 내장 함수

 Eval() : 인수로 전달된 수식을 계산하여 주는 내장 함수 예1) x = "1"

y = "2.3"

z = eval(x+y)

eval 함수는 두 문자열을 결합시켜 "12.3"의 문자열을 출력

예2) x = 1 y = 2.3

z = eval(x+y)

eval 함수의 연산을 통해 3.3을 출력

(18)

 자바스크립트의 내장 함수

 parseInt()와 parseFloat()

• parseInt : 인수로 들어온 문자열 => 정수로 변환

• parseFloat : 인수로 들어온 문자열 => 부동소수점으로 변 환

 escape()와 unescape()

• escape는 ISO Latin-1 문자 세트를 ASCII 형태로 바꾸어 주는 함수

– 예) escape("&")는 %26을 리턴

• unescape 함수는 ASCII 형태를 ISO Latin-1 문자 세트로 바꾸어 주는 함수

– 예) unescape("%26")은 "&"를 리턴

(19)

 이벤트

 Web Browser에 의한 JavaScript는 주로 이벤트에의해 실행

 이벤트는 사용자가 특정한 행위를 발생했다는 신호를 가리킴

• 예) 버튼을 눌렀다든가, 링크위로 마우스가 지나가는 것

 자바스크립트는 이러한 이벤트가 발생하는지를 계속해서 체 크

 이벤트 처리기

 이벤트를 받아서 처리하는 일종의 함수 혹은 메쏘드

• 예) 버튼을 눌려졌다는 이벤트에 따라 실행되는 함수가 이 벤트 처리기가 됨

 사용 형식

• TAG : 임의의 HTML tag

• EventHandler : Event Handler의 이름

이벤트와 이벤트 처리기

(20)

 이벤트의 종류

(21)

 window 내장 객체 ( confirm, alert ) 와 이벤트 처리기 ( onClick ) 예제

이벤트 처리기 : 버튼을 클릭했을 때 compute 함수 실행

(22)

하이브리드웹설계 강의노트 compute ( this.form ) 실행

a l e r t ( “ 당 신 은 ” + w i n d o w . d o c u m e n t .

favorite.expr.value + “를 입력했습니다.” ) alert ( “취소 되었습니다.”) confirm ( “Are You Sure?”)

(23)

하이브리드웹설계