자바스크립트 Javascriptmeiweb.co.kr/ex_script/javascript.pdf · 2020. 12. 9. ·...

자바스크립트

Javascript

웹 프로그래밍이란?

프로그래밍이란?

- 프로그램을 만드는 과정

- 사람이 원하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령을

나열하는 행위

코딩은 ‘소스코드를 작성하는 행위’를 나타내고, 프로그래밍은 어떤 문제

를 분석하고 논리적으로 해결 할 수 있는 방법을 찾아 코딩하는 과정까지

포함하는 더 넓은 개념.

2


- 웹 프로그래밍은 ‘웹에 관련 된 프로그램을 만드는 행위’

서버

- 데이터를 저장함

- 사용자의 요청을 처리함(예. 검색)

클라이언트

- 서버가 전달하는 정보를 확인 할 수 있음.

- 데스크탑, 노트북, 모바일 기기 등

서버

요청 응답

사용자

3


백엔드back-end 개발

- 서버에서 사용자의 요청을 처리하거나 데이터를 관리하는 작업

- 데이터베이스, PHP, ASP, JAVA 등

프로트엔드front-end 개발

- 서버에서 받아 온 정보를 웹 브라우저에 어떻게 보여 줄 것인지 작업

- HTML, CSS, 자바스크립트

4

자바스크립트의 역할

웹 사이트의 동적 움직임을 구현할 수 있다.

- 드롭다운 메뉴

- 자동 슬라이드

- 팝업 창 닫기 등

5

https://www.innisfree.com/kr/ko/Main.dohttps://www.innisfree.com/kr/ko/Main.do


웹 브라우저에서 실행되는 프로그램을 제작할 수 있다.

(데이터 베이스가 구축 된 상황이라면)

버스 노선, 정류장 정보를 저장

하는 기능, 지도에 표시하는 기능

을 자바스크립트로 만들 수 있음.

6


서버를 구성하고 서버용 프로그램을 만들 수 있다.

- 기존에는 서버 프로그램을 만들기 위해 PHP, ASP, JAVA와 같은 언어가

필요했음.

- Node.js라는 자바스크립트 프레임워크를 사용하면 보다 쉽게 개발할 수

있음.

프레임워크란?

기본적으로 제공되는 소스를 수정하거나 추가하는 방법으로 개발을 좀 더

쉽게 할 수 있도록 만들어진 일종의 틀.

7

자바스크립트의 특징

- 모든 웹 브라우저에서 작동한다.

- 웹브라우저에서 실행 결과를 즉시 확인할 수 있다.

- 다양한 용도의 프로그램을 만들 수 있다.

- 다양한 자바스크립트 공개API를 사용할 수 있다.

- 다양한 라이브러리와 프레임워크를 사용할 수 있다.

API : 어떤 데이터를 다른 사람이 손쉽게 가져갈 수 있도록 미리 준비한 체계

라이브러리 : 자바스크립트로 미리 구현해 놓은 기능을 묶어 놓은 것.

8

자바스크립트 사용하기

9

자바스크립트 소스 작성하기

1. HTML문서 안에서 작성하기

- 태그를 만들어 명령어를 작성한다.

- 태그는 HTML문서 어디든 사용할 수 있다.

- 태그는 하나의 HTML문서 안에 여러 개 작성할 수 있다.

- 태그가 삽입된 위치에서 소스가 실행된다.

2. 외부 스크립트 문서를 만들어 HTML문서와 연결해서 사용하기

이때 태그를 사용해 외부 문서와 연결함.

10

자바스크립트 입력과 출력

prompt()

: 사용자가 값을 입력 받는 명령

alert()

: 알림 창으로 출력하는 명령

document.write()

: 브라우저에 출력하는 명령

console.log()

: 콘솔 창에 출력하는 명령

11

예제01 예제02

자바스크립트 소스 작성 시 지켜야 할 규칙

1. 대소문자는 다른 대상

2. 띄어쓰기 절대 금지

3. 특수문자는 _만 사용가능

4. 숫자로 시작할 수 없음

5. 여러 단어를 연결할 경우 낙타모양으로 예) myPage 또는 my_page

6. 세미콜론(;)은 문장의 끝을 나타내지만 없어도 실행 됨.

7. // 한줄 주석

/* 여러 줄 주석 */

12

변수, 자료형, 연산자

13

변수

변수와 상수

- 변수는 변하는 값, 상수는 고정 값을 나타냄

- 예) 나이를 계산하는 식

현재나이

현재연도

태어난연도

1

언제든 값이 변함= 변수

항상 값이 동일한= 상수

14

변수

변수를 선언하는 방법

var 변수이름;

- 변수는 자료를 저장하는 창고의 역할

- 변수이름 = 창고 이름

var 변수이름 = 저장할 내용;

- 변수에는 숫자, 문자 등의 자료를 저장할 수 있다.

- 예) age라는 이름의 변수에 숫자 30을 저장하기

var age = 30;

15

- 변수이름은 절대 따옴표로 묶여있으면 안됨. (따옴표 안의 내용은 문자

로 인식 됨)

- 변수는 한번에 하나의 자료만 저장할 수 있음.

예)

var cup = "물";

cup = "우유";

=> 최종 결과로는 "우유"가 출력이 됨.

- 특정 함수영역 안에서 만들어진 변수는 해당 함수 안에서만 사용 가능

변수

16

예제03

함수

함수를 선언하는 방법

- 함수는 여러 줄의 명령을 하나로 묶어두는 주머니 역할

function 함수이름( ) {

명령들

}

- 함수가 선언되어도 해당 명령들이 실행되지 않음.

- 선언 된 함수의 명령을 실행하기 위해서는 함수를 호출해야 함.

- 함수의 호출은 해당 함수의 이름을 불러주면 됨.

함수이름( );

17

함수

- 함수를 만들 때 매개변수를 지정할 수 있음. function 함수이름( ) {

함수이름(매개변수);

function 함수이름(매개변수){

명령들;

}

예)

changeNumber(10);

function changeNumber(n){

document.write(n+300);

}

=> 브라우저에 결과값으로 310이 출력 됨. ( );

18

자료형이란?

- 컴퓨터가 처리하는 자료의 형태를 뜻함. 함수이름( );

자료형

자료형 설명

string (문자열) 따옴표를 사용해 묶어야 함.

number (숫자) 숫자

boolean (논리형) 참(true)과 거짓(false)

undefined 자료형을 지정하지 않았을 때

null 값이 유효하지 않을 때

array (배열) 하나의 변수에 여러 값을 저장하는 경우

object (객체) 함수와 속성이 함께 포함된 유형

19

typeof 연산자

- 자료형을 확인하는 명령

- 콘솔창에 입력하여 자료형을 확인할 수 있음.

예)

typeof 254

“number”

typeof “hello”

“string”

자료형

20

string (문자열)

- 자바스크립트에서 문자열은 반드시 따옴표 안에 표기해야 함.

예) "글자" 또는 '글자'

- 만약 문자열 안에 따옴표가 포함되어야 할 경우

예) "오늘은 '행복한 하루'입니다."

'오늘은 "행복한 하루"입니다.'

- 문자가 길어질 경우 문자를 나눠서 작성할 수 있음. 이때 문자와 문자의

연결을 위해 +를 사용함.

예) "가나다라마바사아자차카타파하"

"가나다라마바" + "사아자차카타파하“

"가나다라" + "마바사아" + "자차카" + "타파하"함수이름( );

자료형

21

number (숫자)

- 값을 계산식으로 표현 할 수 있음.

- 기본적인 4칙연산 가능. 4칙연산의 우선순위 적용 됨.

+ (더하기) - (빼기) * (곱하기) / (나누기) % (나머지)

예) 10%3

=> 10에서 3을 나눈 후 나오는 나머지 값 1을 출력

자료형

22

boolean (논리형)

- 참true과 거짓false를 나타냄.

- 참과 거짓값은 숫자로 대응해서 나타내기도 함.

true는 1, false는 0( )

undefined와 null

- undefined는 변수를 선언하기만 하고 저장할 값을 넣지 않은 상태를 나

타냄. “처음부터 변수에 값이 할당되지 않았다”는 의미

- null은 “처음에 할당 된 값이 더는 유효하지 않다”는 의미

;

자료형

23

array (배열)

- 하나의 변수에 여러 개의 값을 저장할 수 있는 유형

- var 변수이름 = [값, 값, 값];

하나의 변수에 하나의 값을 저장할 때

var color01 = “빨간색”;

var color02 = “노란색”;

var color03 = “파란색”;

var color04 = “초록색”;

하나의 변수에 여러 개의 값을 배열로 저장할 때

var color = [“빨간색”, “노란색”, “파란색”, “초록색”]

자료형

24

- 배열의 특정 값을 가져올 때 인덱스를 사용 함

- 배열의 순서값을 나타내고, 첫 번째 자료의 인덱스는 0부터 시작

var color = [“빨간색”, “노란색”, “파란색”, “초록색”]

color[0] => “빨간색”이 출력 됨

color[2] => “파란색”이 출력 됨

자료형

25

object (객체)

- 여러 자료를 중괄호{ }로 묶을 수 있음.

- var 변수이름 = {

key : value,

key : value

};

예)

var kim = {

firstName : “mina”,

lastName : “Kim”,

age: “25”

}

자료형

26

연산자

연산자

분류 연산자 이름 기호 설명

사칙 연산자 더하기 +

빼기 -

곱하기 *

나누기 /

나머지 연산자 나머지 % 10 % 3 = 1

증감 연산자 증가 ++ 1만큼 증가

감소 -- 1만큼 감소

연산자를 제외한 요소를 피연산자라고 함.

27예제04

증감 연산자

- 피연산자의 앞에 붙일 때와 뒤에 붙일 때 결과가 달라짐

var a = 10;

var b = a++ + 5;

증감연산자가 변수 뒤에 붙으면 해당 연산이 끝난 후 증감시킴. 즉, b의 값

을 계산한 후 a의 값이 1 증가되어 a의 값은 11, b의 값은 15로 출력 됨.

var c = 10;

var d = ++c + 5;

증감연산자가 변수 뒤에 앞에 붙으면 먼저 증감시킴. 즉, a의 값을 먼저 1증

가시킨 후 b의 값을 계산하여 a의 값은 11, b의 값은 16으로 출력 됨.

연산자

28

할당 연산자(Assignment Operator, =)

- 산술 연산자와 조합해서 사용할 수 있음.

연산자

할당 연사자 응용 예 의미

+= y += x y = y + x

-= y -= x y = y – x

*= y *= x y = y * x

/= y /= x y = y / x

%= y %= x y = y % x

29

비교 연산자

- 두 값을 비교하여 true(참)나 false(거짓)로 결과값을 만드는 연산자

연산자

기호 설명

== 같다

!= 다르다

< 보다 작다

보다 크다

>= 보다 크거나 같다

=== 같다

==

자료형을 자동으로 변환하여 비교

===

자료형의 변환 없이 비교

30

논리 연산자

- true(참), false(거짓)를 처리하는 연산자.

연산자

기호 설명

|| OR연산자. 비교대상 중 하나만 참이어도 true로 처리함.

&& AND연산자. 비교대상 모두가 참이어야 true로 처리함.

! NOT연산자. true나 false를 반대로 뒤집음.

31

서로 다른 연산자를 계산하는 순서

- 다른 분류일 때

단항 연산자 → 산술 연산자 → 비교연산자 → 논리 연산자 → 할당 연산자

- 같은 분류일 때

연산자

1순위 2순위 3순위 4순위 5순위 6순위 7순위

단항 연산자 ! ++ --

산술 연산자 * / % + -

비교 연산자 < >= == != ===

논리 연산자 && ||

할당 연산자 = += -= *= /= %=

32

제어문

33

if문

if(조건) {

조건이 참일 때 실행 할 명령

}

- 조건은 두 개 이상의 대상을 비교할 때 만들어짐.

- 예) 현재시각이 오전7시와 같다면 알람이 울린다.

if (현재시각 == 오전7시){

알람이 울린다.

}

제어문

34

if(조건) {

조건이 참일 때 실행 할 명령

} else {

조건이 거짓일 때 실행 할 명령

}

if(조건1) {

조건1이 참일 때 실행 할 명령

} else if(조건2) {

조건2이 참일 때 실행 할 명령

} else {

모든 조건이 거짓일 때 실행 할 명령

}

제어문

35

예제05-1

예제05-2

조건 연산자 ?(물음표)와 :(콜론)

- 조건도 하나, 실행 할 명령도 하나뿐일 때 사용할 수 있음.

조건 ? 조건이 참일 때 실행 할 명령 : 조건이 거짓일 때 실행 할 명령

제어문

36

switch문 – 조건이 많을 때 흐름 조절하기

switch(변수) {

case “A” :

변수의 값이 “A”와 같을 때 실행할 명령;

break;

case “B” :

변수의 값이 “B”와 같을 때 실행할 명령;

break;

case “C” :

변수의 값이 “C”와 같을 때 실행할 명령;

break;

default :

변수의 값이 case값 모두와 같지 않을 때 실행할 명령;

}

제어문

37

예제06

for문 – 명령 반복 실행하기

for (초기식 ; 조건식 ; 변화식){

반복해서 실행할 명령

}

예)

var sum = 0;

for ( i=1 ; i < 11 ; i++ ) {

sum += i;

}

i=1 부터 i=10 반복해서 명령을 실행.

이때 한번 반복 될 때 마다 i의 값이 1씩 증가함.

결과로 1~10까지 더한 값이 출력 됨.

제어문

38

중첩for문 – for문 안에 또 다른 for문 작성해 명령 반복 실행하기



반복해서 실행할 명령

}

} ;

제어문

39예제07 예제08 예제11

while문, do while문 – 특정 조건에 따라 반복하기

while문에서는 조건이 참일 때만 명령을 실행 함.

while (조건){

조건이 참일 때 반복해서 실행할 명령

} ;

do while문에서는 일단 명령을 한 번 실행한 후 조건이 참이면 명령문을 반

복 실행하고 아니면 빠져나옴.

do {

조건이 참일 때 반복해서 실행할 명령

}

while (조건);

제어문

40

예제09

break문, continue문

- break문을 만나면 반복문이 즉시 종료 됨.

- continue문 다음 명령을 건너뛰게 함.

제어문

41

예제10

함수와 이벤트

42

함수

함수를 선언하는 방법

- 함수는 여러 줄의 명령을 하나로 묶어두는 주머니 역할

function 함수이름( ) {

명령들

}

- 함수가 선언되어도 해당 명령들이 실행되지 않음.

- 선언 된 함수의 명령을 실행하기 위해서는 함수를 호출해야 함.

- 함수의 호출은 해당 함수의 이름을 불러주면 됨.

함수이름( );

43

함수

매개변수와 인수

- 함수를 만들 때 매개변수를 지정할 수 있음.

- 매개변수란 함수를 실행하기 위해 필요하다고 지정하는 값을 나타냄.

함수이름(인수);

function 함수이름(매개변수){

명령들;

}

예)

changeNumber(10);

function changeNumber(n){

document.write(n+300);

}

=> 브라우저에 결과값으로 310이 출력 됨. ( );44

함수

return문

- 함수를 실행한 후 그 결과값을 함수 밖으로 넘기는 것을 “함수값을 반환

한다(return)”라고 함.

- 반환 위치는 함수를 호출한 위치

45

함수

지역 변수와 전역 변수 ( );

프로그램

함수

지역변수선언

프로그램

전역 변수선언

함수

46

함수

익명 함수

- 이름이 없는 함수.

- 함수 자체가 식이기 때문에 변수에 할당할 수 있고, 다른 함수의 매개변

수로 사용할 수 있음.

var 변수이름 = function (매개변수){

명령들;

}

- 함수를 식으로 표현하는 또 다른 방법은 ‘즉시 실행 함수’

- 함수를 정의함과 동시에 실행하는 함수.

47

예제13 예제15 예제16

이벤트

이벤트

- 웹 브라우저나 사용자가 행하는 어떤 동작을 말함.

- 예) 키보드 누르는 것, 마우스 클릭하는 것, 웹 페이지를 불러오는 것 등

마우스 이벤트

속성 설명

click 클릭 할 때

dblclick 더블 클릭 할 때

mouseover 마우스 포인터가 대상 위로 옮겨질 때마우스

mouseout 마우스 포인터가 대상 범위를 벗어날 때

mousedown 버튼을 누르고 있는 동안

mouseup 누르고 있던 마우스 버튼에서 손을 뗄 때

mousemove 대상 위에서 마우스 포인터가 움직일 때

48

이벤트

키보드 이벤트

속성 설명

keypress 키를 눌렀을 때

keydown 키를 누르고 있는 동안

keyup 누르고 있던 키에서 손을 뗄 때

문서 로딩 이벤트

속성 설명

abort 문서가 완전히 로딩 되기 전 불러오기를 멈췄을 때

error 문서가 정확히 로딩되지 않을 때

load 문서 로딩이 끝났을 때

resize 화면 크기가 바뀔 때

scroll 화면이 스크롤되었을 때

unload 문서를 벗어날 때 49

이벤트

폼 이벤트

속성 설명

focus폼 요소에 포커스가 놓였을 때label, select, textarea, button 태그에서 사용함.

blur 폼 요소에 포커스를 잃었을 때

change목록이나 체크상태 등이 변경되었을 때input, select, textarea 태그에서 사용함.

reset 폼이 다시 시작되었을 때

submit “승인”버튼을 눌렀을 때

50

예제12 예제14

이벤트

button태그에 이벤트 연결하기

1. 태그에 직접 명령 작성하기

버튼1

버튼2

예) 버튼을 클릭하면 알림창에 “확인되었습니다”라고 메시지 띄우기

버튼1

버튼2

function ring() {

alert(“확인되었습니다”);

}

51

이벤트

2. 스크립트 명령으로 실행하기

- document.querySelector(“#아이디속성값”);

html태그 요소를 선택하는 명령. 태그의 id속성값으로 접근 가능.

- document.querySelector(“#아이디속성값”).style.스타일속성이름

선택한 요소의 스타일을 변경시킬 수 있음.

예)

클릭

var btn = document.querySelector(“#btn01”);

btn.onclick = function() {

클릭에 의해 실행 될 명령들;

}

52

객체

53

객체(object)란?

- ‘복합’자료형이라고 부를 수 있음.

- 예를 들어 회원가입을 진행한다고 하면 회원이름, 나이, 성별, 이메일주

소, 가입날짜 등의 정보를 받을 수 있음.

- 이때 각각의 정보를 저장 할 변수를 개별적으로 만드는 것보다 하나의

변수에 관련 자료를 모아 두는 것이 관리하기 편할 것임.

var member = {

user_name = “김순희”,

user_age = 25,

user_zender = “female”,

user_email = “[email protected]”

}

이렇게 변수member를 객체의 형태로 만들 수 있음.

54

객체의 종류

내장 객체 모델

- 자바스크립트 안에 미리 객체로 정의 되어 있는 것들.

- 예를 들어 시간과 관련 된 프로그램을 작성할 때는 Date 객체를 사용해

현재 시각을 알아내고 그 정보를 손쉽게 가져다 사용할 수 있음.

- 자바스크립트에는 Number, Boolean, Array, Math 등 많은 내장 객체

가 들어 있음.

문서 객체 모델(DOM)

- 객체를 사용해 웹 문서를 관리하는 방식을 말함.

- 문서 객체 모델에서는 웹 문서뿐만 아니라 웹 문서 안에 포함 된 이미지,

링크, 텍스트 필드 등도 모두 각각 별도의 객체로 만들어 놓았음.

- 웹 문서 자체를 담는 Document객체, 웹 문서 안의 이미지를 관리하는

Image객체 등이 있음.55

객체의 종류

브라우저 객체 모델(BOM)

- 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로

다루는 것.

- 사용 중인 브라우저 종류나 버전을 담고 있는 Navigator객체, 브라우저

에서 방문한 기록을 남기는 History객체, 주소 표시줄 정보를 담고 있는

Location객체, 화면 크기 정보가 들어 있는 Screen객체 등이 있음.

- 이들 객체를 사용하면 알림 창을 표시할 수도 있고, 사용자 동작에 따라

원하는 사이트로 이동하도록 지정할 수 있음.

사용자 정의 객체

- 여러 정보를 하나로 묶어 사용해야 할 때 사용자가 직접 객체를 만들 수

있음.

56

객체의 속성과 메서드

- 객체에서 값을 담고 있는 정보를 속성(Property)이라고 부름.

- 속성은 자바스크립트 내장 객체에도 만들어져 있음.

- 객체의 속성 값을 가져올 때는 객체 이름 뒤에 마침표(.)를 찍고 그 뒤에

속성 이름을 적음.

- 예) Navigator객체의 vendor속성

Navigator객체 – 브라우저의 정보를 담고 있는 객체

vendor속성 – 해당 브라우저의 제조업체 정보를 담고 있는 속성

Navigator.vendor

객체이름.속성이름

57

객체의 속성과 메서드

- 메서드(Method)는 객체가 어떻게 동작할지를 선언해 놓은 함수.

- 예를 들어 Window객체 안에는 웹 브라우저 창과 관련 된 여러 메서드가

미리 만들어져 있음.

- 객체의 메서드를 사용할 때도 객체 이름 뒤에 마침표(.)를 찍고 그 뒤에

메서드를 지정함.

객체이름.메서드이름( )

58

객체의 프로토타입과 인스턴스

- 웹 문서에 있는 요소를 프로그램에서 사용하려면 객체 형태여야 함.

- 예를 들어 웹 문서에 있는 이미지를 자바스크립트에서 다룰 때는 Image

객체를 사용함. Image객체는 모든 웹 이미지가 공통으로 가지는 속성과

기능을 모아 놓은 것. 웹 이미지를 만들기 위한 기본틀이라 할 수 있음.

- 이런 틀을 ‘프로토타입(Prototype)’이라고 함.

- 만약 웹 문서에 3개의 이미지를 포함시켜야 한다면 Image객체를 사용해

서 똑같은 모양의 객체 3개를 찍어낸 다음 객체마다 원하는 이미지를 담

으면 됨. 이렇게 프로토타입을 사용해 만들어낸 객체는 ‘인스턴스

(Instance)’라고 함. 세 인스턴스는 모두 Image객체의 속성과 함수를 그

대로 사용할 수 있음.

59

객체의 인스턴스 만들기

- 객체의 인스턴스를 만들 때, 즉 객체를 똑같이 찍어 새 객체를 만들 때는

new 예약어를 사용함. new 예약어 뒤에 프로트토입 객체 이름과 괄호( )

를 써 주면 됨.

var now = new Date( );

now;

Date객체 - 날짜와 시간 정보를 저장하는 객체

변수now를 만들어 Date객체의 인스턴스를 저장함.

now는 이제 Data객체의 인스턴스이므로, Data객체에서 정의하는 속성

과 함수를 모두 사용할 수 있음.

now.toLocaleString( );

60

내장 객체로 무작위 수 프로그램 만들기

- Math객체는 수학 연산 함수를 가지고 있는 내장 객체

- Math객체에서 자주 사용되는 메서드

메서드 설명

abs(x) 숫자의 절대값을 반환

cbrt(x) 숫자의 세제곱근을 반환

ceil(x)인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환(숫자의 소수점 이하를 올림)

floor(x)인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환(숫자의 소수점 이하를 버림)

random( ) 0과 1사이의 무작위 수(난수)를 반환

round(x)숫자에서 가장 가까운 정수를 반환(숫자의 소수점 이하를 반올림)

61

내장 객체로 무작위 수 프로그램 만들기

1~100까지의 무작위 수를 만드는 방법

1. Math.random( ) * 100 +1

random( )함수로 대략 0.000000 ~ 0.999900 사이의 숫자가 하나 선택

여기에 100을 곱하면 0.0000 ~ 99.9999 사이의 숫자가 하나 선택

여기에 1을 더하면 1.0000 ~ 100.9999 사이의 숫자가 하나 선택

2. Math.floor( Math.random( ) * 100 +1 )

floor( )함수로 소수점 이하를 버림.

62

예제17

사용자 정의 객체 만들기

리터럴 표기법을 사용해 객체 만들기

- 리터럴(Literal)이란 프로그래밍에서 자료를 표기하는 방식을 말함.

- 리터럴을 사용해 표기한다는 것은 변수를 선언하면서 동시에 값을 지정

해 주는 표기 방식을 말함.

var 변수이름 = 값;

var a = 10;

63

예제18


- 객체 리터럴 표기법이란 객체를 선언하면서 동시에 값을 지정해주는 것

var 변수이름 = {

속성이름 : ‘값‘,

함수이름 : function( ){

명령

}

}

var book = {

title : ‘자바스크립트’,

pages : 365,

info : function( ){

alert( this.title + ‘책의 분량은‘ + this.pages + ‘쪽입니다.’ );

}

}64


- 이미 만들어진 객체에 새로운 속성을 추가할 수 있음.

객체이름.속성이름 = ‘값’

book.category = ‘IT’

65


생성자 함수를 사용해 객체 만들기

- 리터럴 표기법을 사용해 객체를 만들면 정해진 값을 가진 객체를 한 번만

만들게 됨.

- 만약 이 방법으로 도서 관리 프로그램을 만든다면 매번 객체와 똑같은

속성과 함수를 입력하고, 책마다 그 값을 다르게 넣어 새롭게 객체를 만

들어야 함.

- 이럴 때 항상 필요한 속성과 함수는 틀처럼 미리 만들어 두고, 필요할 때

마다 그 틀을 복제한 인스턴스를 만들어 책 정보 값을 담는 것이 편리함.

- 이때 생성자 함수를 사용해 객체를 만듬.

66

예제19 예제22


- 생성자 함수란 객체를 만들어 내는 함수를 말함.

- 이 또한 함수이므로 function 예약어를 사용해 선언.

- 생성자 함수 안에 객체의 속성과 함수를 정의할 때는 this 예약어 다음

에 마침표와 속성이름을 입력. 여기서 this가 가리키는 것은 선언하고 있

는 객체 자체임.

- 객체의 속성은 객체에서 사용하는 변수, 객체의 함수는 해당 객체에서

사용하는 함수라고 생각하면 쉬움.

67


- Book객체 만들기

function Book(title, pages, price) {

this.title = title;

this.pages = pages;

this.price = price;

}

jsBook = new Book(‘자바스크립트’,352,15000)

- 인스턴스 만들기

68

Date객체 활용하기

- 내장 함수 중 하나로 날짜와 시간 정보를 다루는 객체.

- 인스턴스를 만들어 활용함.

new Date( );

new Date(“2020-03-12”)

new Date(“2020-03”)

new Date(“2020-03-12T07:30:00”)

new Date(“2020-03-12T07:30:00Z”)

현재 날짜와 시간이 담김.

지정 한 날짜의 오전 9시 정보가 담김.

지정 한 달의 1일, 오전 9시 정보가 담김.

지정 한 날짜와 시간이 담김.

지정 한 날짜와 시간이 국제표준시로 인식

69

예제20


날짜/시간 정보를 가져오는 함수

함수이름 설명

getFullYear( ) 날짜 정보에서 연도 정보를 가져와 네 자리 숫자로 표시

getMonth( ) 날짜 정보에서 월 정보를 가져옴. 이때 0~11의 숫자로 표시

getDate( ) 날짜 정보에서 며칠인지 알 수 있는 일 정보를 가져옴

getDay( ) 날짜 정보에서 요일 정보를 가져옴. 이때 0~6의 숫자로 표시

getTime( ) 1970년 1월 1일 자정 이후의 시간을 밀리초로 표시

getHours( ) 0~23의 숫자로 시를 표시

getMinutes( ) 0~59의 숫자로 분을 표시

getSeconds( ) 0~59의 숫자로 초를 표시

getMilliseconds( ) 0~999의 숫자로 밀리초를 표시 (1초=1000밀리초)

70


날짜/시간 정보를 설정하는 함수

함수이름 설명

setFullYear( ) 연도를 네 자리 숫자로 설정

setMonth( ) 0~11의 숫자로 월을 설정

setDate( ) 1~31의 숫자로 일을 설정

setTime( ) 1970년 1월 1일 자정 이후의 시간을 밀리초로 설정

setHours( ) 0~23의 숫자로 시를 설정

setMinutes( ) 0~59의 숫자로 분을 설정

setSeconds( ) 0~59의 숫자로 초를 설정

setMilliseconds( ) 0~999의 숫자로 밀리초를 표시

71

배열

72

Array 객체

Array 객체로 배열 만들기

- 자바스크립트 안에는 배열을 쉽게 만들고 다룰 수 있게 미리 Array객체

가 만들어져 있음.

var a = new Array( );

- 위의 소스는 Array객체의 인스턴스를 만든 후 a변수에 저장한 것.

- 빈 괄호를 사용하면 배열 요소의 개수가 고정되지 않기 때문에 a배열에

얼마든지 많은 자료를 저장할 수 있음.

- 만약 초기값이 있는 배열이라면 리터럴을 사용할 수 도 있고, Array객체

를 사용할 수 도 있음.

var numbers = [“one”, “two”, “three”, “four”];

var numbers = new Arrey(“one”, “two”, “three”, “four”);73

Array 객체

배열에서 for문 사용하기

- 배열에 저장 된 자료의 개수를 구하는 명령.

var seasons = [ “봄”, “ 여름”, “ 가을”, “겨울” ];

seasons.length;

- for반복문을 사용해 배열에 저장 된 자료의 개수만큼 명령 반복하기

for(var i=0; i

Array 객체의 함수

둘 이상의 배열을 연결하는 concat( )함수

var nums = [“1”,“2”,“3”];

var chars = [“a”, “b”, “c”, “d”];

nums.concat(chars);

결과 => [“1”, “2”, “3”, “a”, “b”, “c”, “d”]

- concat( )함수는 새로운 배열을 만들기 때문에 기존의 nums나 chars 배

열에 영향을 주지 않음.

75


배열 요소를 연결하는 join( )함수

- 배열 요소를 연결해서 나열할 때 각 요소 사이에 넣을 구분 기호를 직접

지정할 수 있음.

var chars = [“a”, “b”, “c”, “d”];

chars.join( );

결과 => 1,2,3

var chars = [“a”, “b”, “c”, “d”];

chars.join(“-”);

결과 => 1-2-3

76


새로운 요소를 추가하는 push( )함수와 unshift( )함수

- 기존 배열의 맨 끝으로 추가하는 push( )함수, 맨 앞으로 추가하는

unshift( )함수.

- 추가하는 요소는 하나일 수도 있고 두 개 이상일 수 도 있음.

var chars = [“a”, “b”, “c”, “d”];

chars.push(“e”, “f”);

결과 => [“a”, “b”, “c”, “d”, “e”, “f”];

77


배열에서 요소를 추출하는 pop( )함수와 shift( )함수

- 기존 배열의 맨 뒤의 요소를 추출하여 삭제하는 pop( )함수, 맨 앞의 요

소를 추출하여 삭제하는 shift( )함수.

- 배열에서 요소를 추출하면 해당 요소가 배열에서 빠지면서 배열이 수정

되기 때문에 배열에서 요소를 삭제할 때는 추출 함수를 사용함.

var chars = [“a”, “b”, “c”, “d”];

chars.pop( );

결과 => [“a”, “b”, “c”];

chars.shift( );

결과 => [“b”, “c”];

78


원하는 위치의 요소를 삭제하거나 추가하는 splice( )함수

인수가 하나일 경우

- 함수의 괄호 안의 인수 = 배열의 인덱스 값

- 인수가 하나일 경우 해당 인수가 가리키는 인덱스의 요소부터 배열의 끝

요소까지 삭제.

var chars = [“a”, “b”, “c”, “d”];

chars.splice(2);

결과 => [“a”, “b”];

79



인수가 두개일 경우

- 첫번째 인수 = 배열의 인덱스 값

- 두번째 인수 = 삭제할 개수

var chars = [“a”, “b”, “c”, “d”];

chars.splice(1,2);

결과 => [“a”, “d”];

80



인수가 세개 이상 일 경우


- 두번째 인수 = 삭제할 개수

- 세번째 이하 인수 = 삭제할 자리에 새로 추가할 요소

var chars = [“a”, “b”, “c”, “d”];

chars.splice(1,2,“f”, “g”, “h”);

결과 => [“a”, “f”, “g”, “h”, “d”];

81


원하는 위치의 요소들을 추출하는 slice( )함수

인수가 하나일 경우

- 함수의 괄호 안의 인수 = 배열의 인덱스 값

- 인수가 하나일 경우 해당 인수가 가리키는 인덱스의 요소부터 배열의 끝

요소까지 추출

인수가 두개일 경우


- 두번째 인수 바로 앞의 요소까지 추출함.

- slice( )함수로 요소를 추출하더라도 원래 배열은 그대로 유지 됨.

- 배열에서 추출한 요소를 가지고 새로운 배열을 만들어 사용하겠다면

slice( )함수가, 배열에서 일부 요소를 삭제하겠다면 splice( )함수가 적

당. 82

여행 준비물 점검 목록 만들기

작업과정개요

1. 배열 만들기

- 여행가방에 준비물을 챙겨 넣는 것과 같이 하나의 배열을 만들어 준비물

내용들을 나열하도록 함.

2. 챙길 물건 배열에 추가하기

- 필요한 준비물을 입력상자에 입력하고 [추가]버튼을 클릭하면 해당 준비

물이 배열의 가장 뒤쪽에 추가되도록 함.

- 배열에 새로운 요소 추가하기 : push( )함수

83

예제23


3. 추가한 내용을 화면에 표시하기

- for문을 사용해 배열의 전체 내용을 화면에 표시하기

4. 준비물 목록에서 삭제하기

- [삭제]버튼을 클릭하면 해당 준비물 삭제하기

- 배열에 특정 위치의 요소 삭제하기 : splice( )함수

84


프로그래밍

85

순서 할 일

1 여행에 필요한 준비물을 저장할 빈 배열 만들기

2빈 배열에 내용을 추가할 addList( )함수 만들기

querySelector(“아이디“).value

3[추가]버튼의 click이벤트와 addList( )함수를 실행 연결하기

addEventListener( )함수

4 itemList 배열의 내용을 화면에 보여 줄 showList( )함수 만들기

4-1. HTML 태그 문자열을 저장 할 list변수 만들기

4-2. for문을 사용해 itemList 배열의 요소를 차례로 가져온 후

~태그로 묶어 list변수에 저장하기

for문은 0에서부터 itemList.length보다 작을 때까지 반복


86

순서 할 일

5 준비한 항목을 화면에서 삭제하는 removeList( )함수 만들기

5-1. showList( )함수에서 각 항목을 표시하는 소스에 [삭제]버튼을

함께 표시하기

5-2. [삭제]버튼의 click이벤트와 removeList( )함수 실행 연결하기

querySelectorAll( )함수를 사용해 삭제 버튼을 remove 변수에 저장

5-3. 이벤트가 발생한 삭제 버튼의 id값 알아내기

this.getAttribute( )

5-4. splice( )함수를 사용해 해당 id값이 가리키는 itemList배열의 요소

삭제하기

splice(A,B) => 배열의 A번째 대상부터 B개만큼 삭제함.

5-5. showList( )함수를 사용해 변경 된 배열을 화면에 표시하기

문서 객체 모델

87


문서 객체 모델이란?

- Document Object Model. 줄여서 DOM으로 표기

- 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체

를 사용해 문서를 해석하는 방법.

- 즉, 웹 문서의 텍스트·이미지 ·표 등 모든 요소가 객체라고 할 수 있음.

88


DOM 트리 – DOM 구조는 나무처럼 생겼다.

- DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.

89

- 그림이 마치 나무를 거꾸로 뒤집어 놓은 것 같이 생겨서 DOM 트리(tree)

라고 부름.

- DOM 트리는 가지와 노드로 표현 함.

- DOM 트리는 웹 문서의 HTML요소뿐만 아니라 HTML요소가 품고 있는

텍스트, 이미지도 자식으로 간주하여 DOM트리에 표현함.


- DOM 트리는 웹 문서 요소를 다음과 같이 표현함.

90

• 웹 문서의 태그는 요소(Element)노드로 표현

• 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍

스트(Text)노드로 표현

• 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성

(Attribute)노드로 표현

• 주석은 주석(Comment)노드로 표현

DOM 요소에 접근하기

91

getElementById( )DOM요소를 id 선택자로 접근하는 함수

getElementById(“아이디속성값”)

getElementByClassName( )DOM요소를 class 선택자로 접근하는 함수

getElementByClassName (“클래스속성값”)

getElementByTagName( )DOM요소를 태그이름으로 접근하는 함수

getElementByTagName (“태그이름”)

querySelector( )

querySelectorAll( )

id, class, 태그이름으로 다양하게 접근하는 함수

querySelector(“#header”)

querySelector(“.list”)

querySelector(“div”)

웹 요소의 태그 속성 가져와서 수정하기

getAttribute( )와 setAttribute( )

- HTML 태그 속성을 가져오거나 수정하는 함수

92

예제24 예제28 예제29

DOM에서 이벤트 처리하기

- HTML 태그 안에서 이벤트 처리기 연결하기

93

- DOM요소에 이벤트 처리기 연결하기

var pic = document.querySelector(“#pic”);

pic.onclick = changPic;

- 위의 두 방법 모두 하나의 요소에 하나의 이벤트 처리기만 사용할 수 있

음.

DOM에서 이벤트 처리하기

addEventListener( )함수 사용하기

- 한 요소에 여러 이벤트가 발생했을 때 이를 동시에 처리할 수 있는 함수

94

대상.addEventListener(“이벤트종류”,처리할 함수);

DOM에 요소 추가하기

DOM에 새로운 노드를 추가하는 방법

- DOM트리의 노드

95

• 웹 문서의 태그는 요소(Element)노드로 표현

• 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍

스트(Text)노드로 표현

• 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성

(Attribute)노드로 표현

• 주석은 주석(Comment)노드로 표현

예제25


- 위 소스를 DOM트리에 추가하려면 p요소 노드와 “accent”속성 값을 넣

을 class속성 노드, ‘주문이 완료되었습니다.’라는 텍스트를 넣을 텍스트

노드가 필요함. 그리고 이렇게 만든 노드를 부모 노드에 연결해서 웹 문

서에 추가 함.

96

주문이 완료되었습니다.

주문이 완료되었습니다.

속성노드 텍스트 노드

p 요소 노드

예제26 예제27


97

함수 또는 속성 설명

createElement( ) 새 요소 노드를 만듬

createTextNode( ) 텍스트 노드를 만듬

createAttribute( ) 요소에 속성 노드를 만듬

setArrtibuteNode( ) 속성 노드를 요소 노드에 연결

appendChild( ) 새로운 노드를 자식 노드로 추가. 이때 부모 노드에 이미 자

식노드가 있을 경우 마지막 자식 노드로 추가 됨.

부모노드.appendChild(자식노드);

insertBefore( )

기준이 되는 자식노드를 지정하고 그 앞에 원하는 자식 노드

를 이동시킴.

부모노드.insertBefore(이동 할 자식노드,기준 자식노드);


98

함수 또는 속성 설명

parentNode( ) 현재 노드의 부모 요소 노드를 반환하는 함수.

hasChildNodes( )특정 노드에 자식 노드가 있는지를 확인하는 함수.

자식 노드가 있다면 true, 없다면 false를 반환.

childNodes

현재 노드의 자식 노드에 접근하는 속성.

이때 요소 노드뿐만 아니라 태그와 태그 사이의 줄바꿈도 빈

텍스트 노드인 자식 노드로 인식.

NodeList를 반환.

children

자식 노드 중 텍스트 노드와 주석 노드는 필요하지 않고 요

소 노드에만 접근할 수 있는 속성.

HTMLCollection을 반환

removeChild( ) 부모 노드에서 자식 노드를 삭제하는 함수.

폼과 자바스크립트

99


폼 요소에 접근하는 방법 1. id값이나 class값 사용하기

- querySelector( )함수나 querySelectorAll( )함수 사용하기

- id값을 사용할 때는 폼 요소 하나에만 접근하고, class값을 사용할 때는

여러 요소를 가져와 배열 형태로 저장 함.

폼 요소에 접근하는 방법 2. name값 사용하기

- document.name값

- document.태그이름[name값]

100

예제30 예제31 예제32 예제33


폼 배열을 사용해 폼 요소에 접근하기

- document.forms

- forms 속성은 문서 안에 있는 form태그를 모두 가져와 배열형태로 반환.

- 이 방법은 폼 요소에 id나 class속성도 없고 name 속성도 없을 때 사용.

101


102

선택 목록 및 옵션 항목에 접근하기 (name속성 활용하기)

document.폼네임.셀렉트네임

선택목록에 접근

document.폼네임.셀렉트네임.options

옵션 항목이 배열형태로 저장

document.폼네임.셀렉트네임.options[i].innerText

i번째 옵션이 화면에 표시하는 내용에 접근

document.폼네임.셀렉트네임.options[i].value

i번째 옵션을 선택했을 때 넘겨주는 값

document.폼네임.셀렉트네임.options.selectedIndex

선택한 옵션의 인덱스값을 넘겨주는 값


103

라디오버튼과 체크박스

document.폼네임.라디오버튼네임

라디오 버튼이 배열 형태로 저장.

이때 라디오 버튼 중 선택한 값이 value에 저장됨.

document.폼네임.라디오버튼네임[i].checked

i번째 라디오 버튼의 선택 유무를 반환.

선택되었으면 true, 선택 안되었으면 false라고 표시.

document.폼네임.체크박스네임[i].checked

i번째 체크박스의 선택 유무를 반환.

선택되었으면 true, 선택 안되었으면 false라고 표시.

브라우저 객체 모델

104

브라우저 객체 모델

- 브라우저 객체 모델은 웹 브라우저 전체를 객체로 관리하는 것

- Browser Object Model, 줄여서 BOM이라고 함.

- BOM은 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록

브라우저 요소를 객체화해 놓은 것을 가리킴.

- 자주 사용하는 브라우저 내장 객체

105

Window Document History

Location Navigator Screen

웹 브라우저를 제어하는 Window 객체

- 자바스크립트의 Window 객체는 웹 브라우저의 상태를 제어하는 객체

로, 자바스크립트 객체 중 최상위이자 기본이 되는 객체.

- 즉, 자바스크립트의 모든 객체는 Window객체에 포함.

Window 객체의 속성

106

속성 설명

document 브라우저 창에 표시된 웹 문서에 접근할 수 있음.

frameElement현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환.

포함되어 있지 않으면 null을 반환.

location Window 객체의 위치/현재 URL을 나타냄.

name 브라우저 창의 이름을 가져오거나 수정.


107

속성 설명

innerWidth

innerHeight내용 영역의 너비/높이를 나타냄

outerWidth

outerHeight브라우저 창의 바깥 너비/높이를 나타냄.

pageXOffset

pageYOffset

스크롤했을 때 화면이 수평/수직으로 이동하는 픽셀 수.

scrollX/scrollY와 같음.

parent 현재 창이나 서브 프레임의 부모 프레임.

screenX screenY브라우저 창의 왼쪽/위쪽 테두리가 모니터 위쪽/위쪽 테두

리에서부터 떨어져 있는 거리를 나타냄.

scrollX scrollY 스크롤했을 때 수평/수직으로 이동하는 픽셀 수.

localStorage 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환.

sessionStroage 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환.


Window 객체에서 자주 사용하는 함수

108

함수 설명

alert( ) 알림 창(Alert Dialog)을 표시

confirm( ) [확인], [취소]가 있는 확인 창을 표시

focus( ) 현재 창에 포커스를 부여

blur( ) 창에서 포커스를 제거

open( ) 새 창 열기

close( ) 현재 열려 있는 창 닫기

moveBy( ) 현재 창을 지정한 크기만큼 이동

moveTo( ) 현재 창을 지정한 좌표로 이동


109

함수 설명

postMessage( ) 다른 창으로 메시지를 전달

print( ) 현재 문서를 인쇄

prompt( ) 프롬프트 창에 입력한 텍스트를 반환

resizeBy( ) 지정한 크기만큼 현재 창 크기를 조절

resizeTo( ) 동적으로 브라우저 창의 크기를 조절

scroll( ) 문서에서 특정 위치로 스크롤

scrollBy( ) 지정한 크기만큼씩 스크롤

scrollTo( ) 지정한 위치까지 스크롤

setCursor( ) 현재 창의 커서를 변경

showModalDialog( ) 모달 창을 표시

sizeToContent( ) 내용에 맞게 창 크기를 맞춤

stop( ) 로딩을 중지


새 창을 여는 open( )함수

- 링크를 누르거나 웹 문서를 불러오자마자 자동으로 새 창이 뜨는 동작.

- 현재 창이나 새 탭, 새로운 알림 창 등 다양한 형태로 열 수 있음.

- window.open(“주소”, “target”)

- targe값을 비워 두면 새 창 열기, _self값은 현재 창 열기

- window.open(“주소”, “ ”, “새 창의 좌표값과 크기”)

- 화면의 원하는 위치에 원하는 크기로 새 창 열기 실행

예)

window.open(“http://www.naver.com”, “ ”, “left=0, top=0, widhth=500,

height=300”);

=> 모니터의 왼쪽 상단에 가로 500px, 세로 300px 크기의 브라우저로 열림.

110


크기를 조절하는 resizeBy( ), resizeTo( )함수

- open( )함수로 크기를 지정해 열었던 알림 창의 크기를 조절하는 함수.

- resizeBy( )는 현재 브라우저 창의 크기를 기준으로 너비와 높이에 값을

더해 줌.

- resizeTo( )는 변경 된 최종 크기를 지정.

- x축과 y축 순서로 값을 작성하고 단위 없이 숫자만 작성함.

위치를 조절하는 moveBy( ), moveTo( )함수

- open( )함수로 열린 알림 창의 위치를 조절하는 함수.

- moveBy( )는 현재 브라우저 창의 위치를 기준으로 위치값이 지정 됨.

- moveTo( )는 화면을 기준으로 위치값이 지정 됨.

- x축과 y축 순서로 값을 작성하고 단위 없이 숫자만 작성함.

111

예제34

History 객체

- 브라우저에서 ‘뒤로’, ‘앞으로’ 또는 주소 표시줄에 입력해서 돌아다녔던

사이트 주소가 저장되어 있음.

- 보안 문제 때문에 브라우저에 있는 브라우저 히스토리는 읽기 전용.

- 이 객체에서 사용할 수 있는 함수는 방문하면서 History 객체에 저장 된

URL을 앞뒤로 이동하는 것.

112

속성 또는 함수 설명

length현재 브라우저 창의 History목록에 있는 항목의 개수, 즉 방문한

사이트 개수를 반환.

back( ) History목록에서 이전 페이지를 현재 화면에 불러옴.

forward( ) History목록에서 다음 페이지를 현재 화면에 불러옴.

go( )History목록에서 현재 페이지를 기준으로 상대 위치에 있는 페

이지를 현재 화면에 불러옴.

Location 객체

- 현재 문서의 URL 주소 정보를 가지고 있음.

- 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있음.

113

함수 설명

assign( ) 현재 문서에 새 문서 주소를 할당해 새 문서를 가져옴.

reload( ) 현재 문서를 다시 불러옴. 브라우저의 [새로 고침]과 같은 역할을 함.

replace( ) 현재 문서의 URL을 지우고 다른 URL의 문서로 교체.

toString( ) 현재 문서의 URL을 문자열로 반환.

Location 객체

114

속성 설명

hash URL 중 #로 시작하는 해시 부분을 나타냄.

host URL의 호스트 이름과 포트 번호를 나타냄.

hostname URL의 호스트 이름을 나타냄.

href 전체 URL. 이 값을 변경하면 해당 주소로 이동할 수 있음.

pathname URL 경로를 나타냄

port URL의 포트 번호를 나타냄

protocol http://나 ftp:// 같은 URL의 프로토콜을 나타냄

search URL 중 ?(물음표)로 시작하는 검색 내용 부분을 나타냄

username도메인 이름 앞에 username을 함께 입력해 접속하는 사이트 URL일

경우 username 정보를 저장

Screen 객체

- 기기의 화면 크기나 정보를 알아낼 때 많이 사용하는 객체.

115

함수 설명

lockOrientation( ) 화면 방향을 잠급니다.

unlockOrientation( ) 화면 방향 잠금을 해제합니다.

속성 설명

width UI영역을 포함한 부분의 너비값

height UI영역을 포함한 부분의 높이값

avaiWidth 윈도우 작업표시줄과 같은 UI영역을 제외한 부분의 너비값

avaiHeight 윈도우 작업표시줄과 같은 UI영역을 제외한 부분의 높이값

colorDepth 화면상에서 펙셀을 렌더링할 때 사용하는 색생 수를 나타냄.

orientation 화면의 현재 방향을 나타냄. 기본은 가로방향

pixelDepth 화면상에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냄.

자바스크립트 Javascriptmeiweb.co.kr/ex_script/javascript.pdf · 2020. 12. 9. ·...

Documents

Transcript of 자바스크립트 Javascriptmeiweb.co.kr/ex_script/javascript.pdf · 2020. 12. 9. ·...