[2020-여름 WEB] 8주차

8주차_웹실습_21기_송희원.pdf

0.30MB

8주차_웹이론_21기_송희원.pdf

0.19MB

 

1. 객체

 자바스크립트 객체는 속성(Property)와 메소드(Method)를 가진다.

  ① 속성 : 객체와 관계된 변수, 다른 객체와 구별할 수 있는 특징

  ② 메소드 : 객체의 행위를 정의하는 함수, 객체가 수행할 수 있는 기능(또는 행위)

 

 

 

 

 

2. 자바스크립트 내장 객체 다루기

2.1 자바스크립트 내장 객체

 자바스크립트에서 기본적으로 제공되는 객체에는 Date,  Math, Array, Number, String 등이 있다.

객체 생성시에는 new연산자를 사용해야 한다. ex) var today = new Date();

 

  ① Date 객체

 컴퓨터에서 제공되는 날짜/시간을 얻거나 설정

 

메소드	기능
getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds()	현재 시간을 구하는 메소드. 각각 연도, 월, 일, 시간, 분, 초 값을 리턴
getTime()	1970. 01. 01 이후 현재까지의 시간, 천분의 1초 단위
getDay()	현재 요일을 숫자(0-6)로 가져옴
getTimezoneOffset()	표준시와 현지 시간의 표준시차, 분 단위
setFullYear(), setMonth(), setDate(), setDay(), setHours(), setMinutes(), setSeconds, setMillseconds()	사용자 컴퓨터의 시계를 각각 연도, 월, 일, 요일, 시간, 분, 초, 천분의 1초 값을 설정

 

  ② Mat 객체

 별도의 선언이나 생성없이 바로 사용 가능

 

속성 이름	설명
E	Euler 상수 값(약 2.718)
LN2	자연로그2, log2 (약 0.693)
LN10	자연로그10, log10 (약 2.302)
LOG2E	log2e (약 1.442)
LOG10E	(약 0.434)
PI	원주율 π (약 3.14)
SQRT1_2	0.5  (약 0.707)
SQRT2	2  (약 1.414)

 

메소드 이름	기능
cos(), sin(), tan()	삼각함수 코사인, 사인, 탄젠트
acos(), asin(), atan()	코사인, 사인, 탄젠트의 역함수
ceil(), floor(), round()	올림, 내림, 반올림
max(), min(), abs()	최대, 최소, 절대값
sqrt(x), pow(x, y)	각각 x 와 xy 값을 리턴
log(x), exp(x)	각각 logex 와 ex 값을 리턴

 

 

 

2.2 배열 객체

배열의 데이터 구조는 데이터 요소 여러 개를 묶어서 처리하고자 할 때 사용하기 적합하다.

자바스크립트 배열은 배열의 각 요소가 동일한 데이터 타입이 아니어도 되고, 배열의 크기가 언제라도 변경 가능하다.

배열은 new연산자를 이용하거나 배열 리터럴([])을 이용해 생성한다.

배열의 요소에 접근할 때는 배열이름[인덱스]와 같이 각괄호([])를 이용해 접근한다.

 

메소드 이름	기능
reverse()	배열 내 요소들의 순서를 반대로 바꾼다.
sort()	배열 내 요소들의 순서를 오름차순으로 정렬한다.
join()	배열 내 요소를 모두 합쳐 하나의 문자열로 만든다. 이때 요소 사이에 끼워 넣을 문자열을 지정할 수 있다.
concat()	배열의 뒤에 요소를 붙인다.
slice()	배열의 요소들 중 일부만을 배열로 만든다.

 

 

 

  2.3 브라우저 제공 내장 객체

 웹 브라우저에서 제공하는 자바스크립트 객체로 대표적으로 window, navigator, document객체가 있다.

 

  ① window객체

 웹 브라우저에 열려 있는 창을 제어한다.

open(), close() 메소드는 새 창을 열거나, 현재 창을 닫는다.

alert(), confirm(), prompt() 메소드는 경고창을 띄우거나 혹은 키보드 입력을 받는 동작을 한다.

 

  ② anvigator객체

현재 사용하는 웹 브라우저의 종류와 버전을 알아내기 위해 사용한다. 대표적인 속성으로는 appName, appVersion, userAgent 등이 있다.

 

  ③ document객체

 HTML문서를 DOM을 통해 접근하기 위한 최상위 객체

 

 

 

 

 

3. 자바스크립트 사용자 정의 객체 다루기

3.1 사용자 정의 객체 생성

Object생성자와 new연산자를 이용해 생성한다. (아무런 속성을 가지지 않은 빈 객체가 생성) ex) var book = new Object();

객체 생성 후 속성 및 메소드를 언제라도 추가 가능하다.

점(dot)연산자를 붙혀서 속성과 메소드에 접근한다.

초기화를 통해서 객체를 생성할 수도 있다. (객체의 각 요소는 Key와 Value의 쌍으로 이루어짐)

또한 다양한 변수형을 속성을 사용 가능하다. (객체의 속성 값으로 또 다른 객체를 가질 수 있음)

속성을 삭제하기 위해서는 delete라는 명령어를 사용한다.

 

 

 

3.2 객체 생성자

객체를 생성하는 함수에는 Object(), Array() 등이 있다.

사용자 정의 함수를 이용해서 사용자 정의 생성자가 구현 가능하다. (this : 객체 자신을 지칭하는 키워드)

 

 

 

 

 

4. DOM으로 HTML문서 다루기

4.1 DOM의 정의 및 문서 구조

DOM은 웹 문서를 구조적 문서 객체 형태로 다루는 모델이다.

HTML문서는 태그 요소의 계층적 구조를 띠고 있다.

DOM도 트리 구조 형태를 지니고 있으며 트리의 노드는 HTML 태그 요소이고 노드는 속성과 속성값을 가진다.

웹 브라우저 DOM구조는 개발자 도구에서 확인 가능하다.

태그 요소는 DOM의 객체로 표현되고, 태그 속성은 DOM객체의 속성으로 표현된다.

태그 요소에 포함된 다른 요소는 하위 객체로 표현한다.

 

 

 

4.2 DOM을 통한 HTML문서 접근

웹 브라우저 환경과 HTML문서를 모두 객체로 간주한다.

따라서 일반 프로그래밍처럼 객체에 접근해서 값을 읽어내거나, 저장하고 수정하는 작업을 수행한다.

DOM접근 방법에는 3가지가 있다.

첫번째는 document의 forms속성을 이용해서 접근하는 방법이다.

두번째는 요소 이름을 이용해 접근하는 방법이다.

마지막은 요소의 아이디를 찾아서 접근하는 방법이 있다. 세번째 방법에는 document객체가 제공하는 getElementById() 등의 메소드가 사용된다.