[Do it! HTML+CSS+자바스크립트]자바스크립트와 객체

22.12.23 배운 내용 정리1
자바스크립트와 객체
(객체 알아보기, 자바스크립트의 내장 객체, 브라우저와 관련된 객체)

 

객체 알아보기

 

프로그래밍 언어에서 객체는 여러 가지 의미로 해석할 수 있지만,

자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다는 정도로 이해하면 됨.

흔히 자바스크립트는 모든 것이 객체라는 말이 있을 정도로 자바스크립트에서 객체는 중요한 개념임.

 

※ 자바스크립트에서 사용하는 객체

 

종류	설명
문서 객체 모델(DOM)	웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체임. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음.
브라우저 관련 객체	웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있음. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있음.
내장 객체	웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 함. 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있음.

 

① 객체의 인스턴스 만들기

자바스크립트에서 객체는 참조 형태로 사용해야 함.

즉, 객체 자체가 아니라 인스턴스의 형태로 만들어서 사용해야 한다는 것임.

자바스크립트 안에 정의된 객체는 그대로 두고 객체와 똑같은 속성과 기능을 만들 수 있음.

자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어 내는 것이 인스턴스임.

그리고 그 인스턴스에 식별자를 붙여 사용함.

객체의 인스턴스를 만들 때는 다음과 같이 new라는 예약어를 사용함.

기본형 : new 객체명

 

※ Date 객체의 인스턴스 만들기

다음 코드를 보면 new 예약어를 사용하여 Date 객체의 인스턴스를 만든 후

변수 now에 저장한 변숫값을 브라우저에 나타냄.

 

 

② 프로퍼티와 메서드 이해하기

객체에는 프로퍼티와 메서드가 있는데,

쉽게 말해 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현함.

ex. '자동차 운전'이 하나의 프로그램이라면 '자동차'는 객체가 되고,

자동차의 프로퍼티는 자동차 제조사나 모델명, 색상, 배기량 등이되며,

자동차의 메서드는 시동 걸기, 움직이기, 멈추기, 주차하기 등이 됨.

 

이러한 방식으로 자바스크립트에서도 객체마다 메서드와 프로퍼티가 있음.

그리고 프로퍼티와 메서드를 이용해서 자바스크립트 프로그램을 작성하는 것임.

 

③ 마침표 표기법으로 프로퍼티와 메서드 작성하기

인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아서 똑같이 사용함.

프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메서드 이름을 작성함.

이때 메서드는 함수와 같은 역할을 하므로 getHours( )처럼 이름 옆에 괄호를 넣어야 함.

 

※ 로컬 형식으로 현재 시각 표시하기

Date 객체에는 현재 날짜와 시간 정보를 로컬 형식으로 바꿔 주는 toLocaleString( ) 메서드가 있음.

다음과 같이 인스턴스 now를 만든 후 toLocaleString( ) 메서드를 적용한 후 결과를 확인하면 날짜와 시간이 표시됨.

 

 

---

 

자바스크립트의 내장 객체

 

① Array 객체

Array 객체는 배열을 다룸.

 

(1) Array 객체로 배열 만들기

자바스크립트에는 배열을 쉽게 만들고 다룰 수 있는 Array 객체가 내장되어 있음.

Array 객체를 사용하려면 우선 인스턴스를 만들어야 함.

 

※ Array 객체 인스턴스 만들기 - 초깃값이 없는 경우

먼저 초깃값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 됨.

이때 다음과 같이 배열의 크기를 지정하지 않을 수도 있고, 몇 개의 요소가 있는지 크기를 지정할 수도 있음.

var numbers = new Array( );      // 배열의 크기를 지정하지 않음

var numbers = new Array(4);      // 배열의 크기를 지정함

 

※ Array 객체 인스턴스 만들기 - 초깃값이 있는 경우

또한 초깃값이 있는 배열이라면 다음과 같이 인스턴스 선언과 요솟값을 한번에 할당해 작성할 수 있음.

var numbers = ["one", "two", "three", "four"];             // 배열 선언

var numbers = Array("one", "two", "three", "four");    // Array 객체를 사용한 배열 선언

 

(2) Array 객체의 length 프로퍼티 사용하기

베얄 요소는 프로그램 안에서 얼마든지 추가하거나 삭제할 수 있으므로 요소의 개수를 알고 사용하는 것이 좋음.

배열 요소의 개수를 알 수 있는 방법은 바로 Array 객체에 있는 length 프로퍼티를 사용하면 됨.

이 프로퍼티에는 배열 요소의 개수가 저장되어 있음.

 

※ 배열을 만들고 요소 표시하기

다음과 같이 마침표(.)를 사용해 length 프로퍼티를 작성한 후 for문을 이용하여 전체 배열의 요솟값을 나열함.

 

 

② Array 객체의 메서드

 

※ Array 객체의 메서드

 

종류	설명
concat	기존 배열에 요소를 추가해 새로운 배열을 만듦.
every	배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환, 그렇지 않으면 false를 반환함.
filter	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듦.
forEach	배열의 모든 요소에 대해 주어진 함수를 실행함.
index0f	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음.
join	배열 요소를 문자열로 합침. 이때 구분자를 지정할 수 있음.
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환함.
unshift	배열의 시작 부분에 새로운 요소를 추가함.
pop	배열의 마지막 요소를 꺼내 그 값을 결과로 반환함.
shift	배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환함.
splice	배열에 요소를 추가하거나 삭세함.
slice	배열에서 특정한 부분만 잘라냄.
reverse	배열의 배치 순서를 역순으로 바꿈.
sort	배열 요소를 지정한 조건에 따라 정렬함.
toString	배열에서 지정한 부분을 문자열로 반환함. 이때 각 요소는 쉼표(,)로 구분함.

 

(1) 배열끼리 합치는 concat( ) 메서드

concat( ) 메서드는 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 줌.

어느 배열을 먼저 쓰는가에 따라 기준이 달라지고, 결과 배열의 순서도 달라짐.

 

※ 배열 2개를 합쳐서 새로운 배열 만들기

다음은 nums와 chars라는 배열 2개를 합치는 예제임.

둘 중에서 어느 배열을 기준으로 하느냐에 따라 결과 배열이 달라짐.

배열 nums를 먼저 쓴 다음에 chars를 쓰면 [1, 2, 3, a, b,, c, d]의 새로운 배열(numsChars)이 만들어짐.

하지만 chars를 먼저 쓰고 nums를 나중에 쓰면 [a, b, c, d, 1, 2, 3]의 배열(charsNums)이 만들어짐.

 

 

(2) 배열 안의 요소끼리 합치는 join( ) 메서드

join( ) 메서드는 배열 요소를 연결해서 하나의 문자열로 만들어 주는데,

이때 각 요소 사이에 원하는 구분자('/')를 넣을 수도 있음. 이를 따로 지정하지 않으면 요소를 쉼표(,)로 구분함.

 

※ 배열 안의 요소 합치기

배열 nums의 요소를 구분자 없이 연결해서 문자열 string1로 만들고,

chars의 배열의 요소는 구분자를 넣어서 문자열 string2로 만듦.

 

 

(3) 새로운 요소를 추가하는 push( ), unshift( ) 메서드

배열 맨 끝에 요소를 추가하려면 push( ) 메서드를 사용하고,

배열 맨 앞에 요소를 추가하려면 unshift( ) 메서드를 사용함. 이때 추가하는 요소는 여러 개일 수도 있음.

push( ), unshift( ) 메서드를 실행할 때 주의해야 할 점은

배열 맨 앞과 맨 뒤에 요소를 추가하면 원래 있던 배열이 바뀐다는 것임.

 

※ 배열에 새로운 요소 추가하기

push( )를 사용해 배열 nums의 맨 끝에 요소 4와 5를 추가함.

그러면 배열 nums는 추가한 요소까지 포함한 새로운 배열이 됨.

그리고 실행한 결과를 변수 ret1, ret2에 저장하고 변숫값을 출력하면 새로운 배열의 length가 나타남.

 

 

(4) 배열에서 요소를 꺼내는 pop( ), shift( ) 메서드

배열에서 뒤에 있는 요소를 꺼낼 때는 pop( ) 메서드를 사용하고,

배열에서 앞에 있는 요소를 꺼낼 때는 shift( ) 메서드를 사용함.

두 메서드는 꺼낸 요솟값을 반환하며 기존 배열은 꺼낸 요소가 빠진 상태로 변경됨.

 

※ 배열에서 요소 꺼내기

 

 

(5) 원하는 위치에 요소를 추가·삭제하는 splice( ) 메서드

splice( ) 메서드는 배열 중간 부분에서 요소를 추가 또는 삭제하거나,

한꺼번에 요소를 2개 이상 추가 또는 삭제할 때 사용함.

splice( ) 메서드는 괄호 안에 들어 있는 인수에 따라 배열 요소를 삭제하거나 새로운 요소를 추가하며,

splice( ) 메서드를 실행하면 삭제한 요소로 이루어진 새로운 배열이 결괏값으로 반환됨.

 

- 인수가 1개인 경우

splice( ) 메서드의 괄호 안의 인수는 배열의 인덱스값, 즉 배열의 위치를 가리킴.

splice( ) 메서드는 인수가 지정한 인텍스의 요소부터 배열의 맨 끝 요소까지 삭제함.

 

※ splice( ) 메서드의 인수가 1개인 경우 요소 삭제하기

다음과 같이 numbers.splice(2)를 지정하면 인덱스값이 2인 요소부터 마지막 요소까지 모두 삭제함.

배열의 인덱스값은 0부터 시작하므로 splice(2)는 세 번째 요소인 3을 의미함.

splice( ) 메서드를 실행한 후에는 삭제한 요소를 반환하고 기존의 numbers 배열은 변경된 상태가 됨.

 

 

- 인수가 2개인 경우

splice( ) 메서드에 인수가 2개라면 첫 번째 인수는 인덱스값이고 두 번째 인수는 삭제할 요소의 개수임.

 

※ splice( ) 메서드의 인수가 2개인 경우 요소 삭제하기

다음과 같이 study.splice(2, 1)을 실행하면 인덱스값이 2인 요소(web)부터 요소를 1개 삭제함.

splice( ) 메서드를 실행한 후에는 삭제한 요소를 반환하고 기존의 study배열은 나머지 요소만 남음.

 

 

- 인수가 3개 이상인 경우

splice( ) 메서드의 인수가 3개 이상인 경우,

첫 번째 인수는 배열에서 삭제할 시작 위치를 나타내고, 두 번째 인수는 삭제할 개수를 알려줌.

그리고 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정함.

 

※ splice( ) 메서드 인수가 3개 이상인 경우 요소 삭제, 추가하기

앞에서 작성한 study 배열을 가지고

study.splice(2, 1, "js")를 실행하면 인덱스값이 2인 요소(jquery) 1개를 삭제하고 새로운 요소 "js"를 추가함.

이렇게 하면 study 배열에는 "jquery"를 대신해 "js"가 추가됨.

 

 

(6) 기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice( ) 메서드

slice( ) 메서드는 배열에서 요소를 꺼내는 기능을 하므로 pop( ), shift( ) 메서드와 같아보임.

하지만 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고,

실행 결과 기존 배열이 바뀌지 않는다는 차이점이 있음.

 

slice( ) 메서드에서 인수를 하나만 지정하면 그 인수를 시작 인덱스로 간주하고

지정한 요소부터 마지막 요소까지 꺼내서 변환함.

 

※ slice( ) 메서드의 인수가 1개인 경우 요소 꺼내기

다음 예제에서 colors.slice(2)를 실행하면 인덱스 값이 2인 요소(blue)부터 마지막 요소(black)까지 꺼냄.

 

 

slice( ) 메서드에서 인수 2개를 사용하면 여러 개의 요소를 꺼낼 수 있음.

즉, slice( ) 메서드의 인수 2개는 꺼낼 요소의 구간을 의미함.

이때 첫 번째 인수는 배열의 시작 인덱스이고, 두 번째 인수는 끝  인덱스의 바로 직전 인덱스를 가리킴.

 

※ slice( ) 메서드의 인수가 2개인 경우 요소 꺼내기

다음 예제에서 slice(2, 4)라고 지정하면 배열의 인데스 2부터 시작하여 인덱스 4의 직전 인덱스까지 꺼냄.

즉, 인덱스값이 2부터 3까지의 요소를 꺼냄. 그리고 slice( ) 메서드를 실행한 후에는 꺼낸 요소를 반환함.

 

 

앞에서 살펴본 splice( ),  slice( ) 메서드는 배열에서 특정 위치의 요소를 활용한다는 점에서는 같은 기능을 함.

하지만 두 메서드에는 큰 차이점이 있음.

slice( ) 메서드는 기존 배열에 영향을 주지 않지만, splice( ) 메서드는 요소를 추가 또는 삭제하면 기존 배열 자체가 수정됨.

따라서 기존 배열에서 꺼낸 요소로 새로운 배열을 만들어 사용하려면 slice( ) 메서드를,

기존 배열의 일부 요소만 삭제하려면 splice( ) 메서드를 선택하는 것이 좋음.

 

③ Date 객체

 

Date 객체는 현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고,

특정일까지 얼마나 남았는지 알려 주는 등 사이트에서 여러 가지로 응용할 수 있음.

 

(1) Date 객체 인스턴스 만들기

자바스크립트에서 Date 객체를 사용하려면 우선 Date 객체의 인스턴스를 만들어야 함.

현재 날짜로 설정할 경우에는 다음과 같이 간단히 예약어 new를 붙여 주면 됨.

 

※ Date 객체로 현재 날짜 나타내기

new Date( );

 

그리고 특정한 날짜를 저장한 Date 객체를 만들고 싶다면 Date 다음에 붙이는 괄호 안에 날짜 정보를 입력함.

예를 들어 '2022년 12월 22일'이라는 날짜 정보를 객체에 저장한 후 프로그램에서 사용하려면 다음과 같이 입력함.

 

※ Date 객체로 특정 날짜 나타내기

new Date("2022-12-22")

 

또한 시간 정보까지 Date 객체로 나타내려면 날짜 다음에 대문자 'T'를 추가한 후 그 뒤에 시간을 입력함.

 

※ Date 객체로 특정 날짜와 시간 나타내기

new Date("2022-12-22T20:00:00")

 

(2) 자바스크립트의 날짜, 시간 입력 방식 알아보기

Date 객체를 사용하여 날짜와 시간을 지정하려면 자바스크립트가 인식할 수 있는 날짜와 시간 형식으로 써야함.

 

※ 자바스크립트에서 주로 사용하는 날짜와 시간 입력 방식

 

종류	내용	예시
YYYY-MM-DD 형식	연도만 나타날때는 YYYY, 연도와 월을 나타낼 때는 YYYY-MM, 연도와 월과 일을 나타낼 때는 YYYY-MM-DD 형태로 사용함.	new Date("2022") new Date("2022-12") new Date("2022-12-22")
YYYY-MM-DDTHH 형식	연도, 월, 일 다음에 시간을 표시하는 형식으로, 시간을 나타낼 때는 날짜 뒤에 'T'를 붙이고 HH:MM:SS의 형태로 사용함. 맨 끝에 'Z'를 붙이면 UTC(국제 표준시)로 표시됨.	new Date("2022-12-22T20:00:00") new Date("2022-12-22T20:00:00Z")
MM/DD/YYYY 형식	연도를 마지막에 나타내고 싶다면 다음과 같이 MM/DD/YYYY 형태로 사용함.	new Date("12/22/2022")
이름 형식	월은 January처럼 전체를 사용하거나 Jan과 같이 줄여서 사용할 수 있음. 다음과 같이 맨 앞에 요일(Mon)을 함께 작성할 수도 있음.	new Date("Thu Dec 22 2022 18:00:00 GMT+0900 (대한민국 표준시)")
Date 객체의 메서드	아래 표 참고	아래 표 참고

 

※ Date 객체의 메서드

날짜와 시간 정보를 사용하기 위한 Date 객체를 만들었다면 Date 객체에 정의된 메서드를 사용할 수 있음.

Date 객체의 메서드는 크게 3가지로 구분됨.

날짜/시간 정보를 가져오는 메서드, 사용자가 원하는 날짜/시간으로 설정하는 메서드,

마지막으로 날짜/시간 형식을 바꿔 주는 메서드가 있음.

 

구분		설명
날짜, 시간 정보 가져오기	getFullYear( )	연도를 4자리 숫자로 표시함.
	getMonth( )	0~11 사이의 숫자로 월을 표시함. 0부터 1월이 시작되고 11은 12월임.
	getDate( )	1~31 사이의 숫자로 일을 표시함.
	getDay( )	0~6 사이의 숫자로 요일을 표시함. 0부터 일요일이 시작되고 6은 토요일임.
	getTime( )	1970년 1월 1일 자정 이후의 시간을 밀리 초(1/1000초)로 표시함.
	getHours( )	0~23 사이의 숫자로 시를 표시함.
	getMinutes( )	0~59 사이의 숫자로 분을 표시함.
	getSeconds( )	0~59 사이의 숫자로 초를 표시함.
	getMilliseconds( )	0~999 사이의 숫자로 밀리초를 표시함.
날짜, 시간 설정하기	setFullYear( )	연도를 4자리 숫자로 설정함.
	setMonth( )	0~11 사이의 숫자로 월을 설정함. 0부터 1월이 시작되고 11은 12월임.
	setDate( )	1~31 사이의 숫자로 일을 설정함.
	setTime( )	1970년 1월 1일 자정 이후의 시간을 밀리 초로 설정함.
	setHours( )	0~23 사이의 숫자로 시를 설정함.
	setMinutes( )	0~59 사이의 숫자로 분을 설정함.
	setSeconds( )	0~59 사이의 숫자로 초를 설정함.
	setMilliseconds( )	0~999 사이의 숫자로 밀리초를 설정함.
날짜, 시간 형식 바꾸기	toLocaleString( )	현재 날짜와 시간을 현지 시간(local time)으로 표시함.
	toString( )	Data 객체 타입을 문자열로 표시함.

 

④ Math 객체

Math 객체에는 수학 계산과 관련된 메서드가 많이 포함되어 있지만 수학식에서만 사용하는 것은 아님.

무작위 수가 필요하거나 반올림해야 하는 프로그램 등에서도 Math 객체의 메서드를 사용함.

Math 객체는 따로 인스턴스를 만들지 않음.

기본형 : Math.프로퍼티명

              Math.메서드명

 

(1) Math 객체의 프로퍼티

Math 객체의 프로퍼티는 항상 정해진 값을 가지고 있음.

 

※ Math 객체의 프로퍼티

 

종류	설명
E	오일러 상수
PI	원주율(π) (약 3.141592653589793의 값)
SQRT2	루트2 (약 1.4142135623730951의 값)
SQRT1_2	1/루트2 (약 0.7071067811865476의 값)
LN2	log e의 2승 (약 0.6931471805599453의 값)
LN10	log e의 10승 (약 2.302585092994046의 값)
LOG2E	log 2의 e승 (약 1.4426950408889634의 값)
LOG10E	log 10의 e승 (약 0.4342944819032518의 값)

 

(2) Math 객체의 메서드

Math 객체의 메서드는 주로 수학과 관련된 함수의 결괏값을 반환함.

수학 관련 메서드는 어느 정도 수학 지식이 있어야 편리하게 사용 가능함.

 

※ Math 객체의 메서드

 

종류	설명
abs( )	절댓값을 반환함.
acos( )	아크 코사인(arc cosine)값을 반환함.
asin( )	아크 사인(arc sine)값을 반환함.
atan( )	아크 탄젠트(arc tangent)값을 반환함.
atan2( )	아크 탄젠트(arc tangent)값을 반환함.
ceil( )	매개변수의 소수점 이하 부분을 올림.
cos( )	코사인(cosine)값을 반환함.
exp( )	지수 함수를 나타냄.
floor( )	매개변수의 소수점 이하 부분을 버림.
log( )	매개변수에 대한 로그(log)값을 반환함.
max( )	매개변수 중 최댓값을 반환함.
min( )	매개변수 중 최솟값을 반환함.
pow( )	매개변수의 지숫값을 반환함.
random( )	0과 1사이의 무작위 수를 반환함.
round( )	매개변수의 소수점 이하 부분을 반올림함.
sin( )	사인(sine)값을 반환함.
sqrt( )	매개변수에 대한 제곱근을 반환함.
tan( )	탄젠트(tangent)값을 반환함.

 

날짜 계산하는 프로그램 만들기

 

① HTML 파일 확인하기

웹 브라우저에서 파일을 열어 확인해보면 다음과 같음.

여기에서 '일' 글자 앞에 계산한 일수를 추가해주면 됨.

 

 

② 자바스크립트 코드 작성하고 결과 확인하기

책을 읽기 시작한 날짜와 현재 날짜 사이에 시간이 얼마나 흘렀는지 계산할 때는 getTime( ) 메서드를 사용하면 됨.

getTime( ) 메더드는 1970년 1월 1일부터 특정한 날까지 시간을 밀리초(1/1000초) 단위로 표시해 주기 때문임.

예를 들어 2020년 10월 1일부터 오늘까지 얼마나 지났는지 알기 위해서는 오늘의 getTime( ) 결괏값에서

2020년 10월 1일의 getTime( ) 결괏값을 빼면 됨.

getTime( ) 메서드를 실행한 결괏값은 밀리초 단위로 표시되므로 시것을 일수로 나타내려면

'1000*60*60*24'로 나눠야 함. 그리고 나눈 결괏값은 Math 객체의 round( ) 메서드를 사용해서 반올림하고

최종 정숫값을 출력하면 됨.

(여기에서는 시작 날짜를 2020년 10월 1일로, 오늘 날짜를 2020년 10월 15일로 고정함.)

 

 

이벤트 당첨자 뽑기 프로그램

 

① random( ) 메서드 알아보기

전체 응모자가 몇 명인지 입력하면 번호를 무작위로 골라 당첨자를 뽑는 자바스크립트 프로그램을 만들 때

무작위 번호는 Math 객체의 random( ) 메서드를 사용하면 간단히 구할 수 있음.

웹 브라우저에서 콘솔 창을 열고 Math.random( )을 입력하면 아래와 같이 0~1 사이에서 무작위 숫자가 출력됨.

 

 

② 1~100사이에서 무작위 수 출력하기

1~100사이에서 무작위로 숫자를 출력하기 위해서는 Math.random( )메서드를 실행한 값에 100을 곱하면

대략 0.000~99.999 사이의 값이 될 것임. 이 계산값에 1을 더해주면 됨.

→ Math.random( ) * 100 + 1

 

 

③ 소수점 이하의 수는 버리고 출력하기

무작위 수를 정수로만 나타내려면 소수점 이하를 올림, 버림 또는 반올림하면 됨.

이때 올림이나 반올림을 하면 100이 넘을 수도 있으므로 소수점 이하를 버리는 방법을 사용함.

Math 객체에서 소수점 이하를 버리는 메서드는 floor( )임.

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

 

 

④ 자바스크립트 코드 작성하고 결과 확인하기

 

 

---

 

브라우저와 관련된 객체

 

① 브라우저와 관련된 객체 알아보기

웹 브라우저 창에 문서가 표시되는 순간 사용자는 눈치 채지 못하지만

브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냄.

웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타남.

이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가짐.

 

※ 자바스크립트의 내장 객체

 

종류	설명
window	브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위에 있음.
document	웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어짐. HTML 문서의 정보가 담겨 있음.
navigator	현재 사용하는 브라우저의 정보가 들어 있음.
history	현재 창에서 사용자의 방문 기록을 저장함.
location	현재 페이지의 URL 정보가 담겨 있음.
screen	현재 사용하는 화면 정보를 다룸

 

② window 객체의 프로퍼티

window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용함.

프로퍼티를 사용하려면 window.fullScreen처럼 프로퍼티 이름 앞에 'window'를 붙임.

 

※ window 객체의 프로퍼티

 

종류	설명
document	브라우저 창에 표시된 웹 문서에 접근할 수 있음.
frameElement	현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환함.
innerHeight	내용 영역의 높이를 나타냄.
innerWidth	내용 영역의 너비를 나타냄.
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환함.
location	window 객체의 위치 또는 현재 URL을 나타냄.
name	브라우저 창의 이름을 가져오거나 수정함.
outerHeight	브라우저 창의 바깥 높이를 나타냄.
outerWidth	브라우저 창의 바깥 너비를 나타냄.
pageXOffset	스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같음.
pageYOffset	스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같음.
parent	현재 창이나 서브 프레임의 부모임.
screenX	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄.
screenY	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄.
scrollX	스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냄.
scrollY	스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냄.
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환함.

 

③ window 객체의 메서드

window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등

웹 브라우저 창 자체와 관련됨.

앞에서 사용했던 alert( )문이나 prompt( )문은 window 객체의 메서드이므로 원래는 window.alert( )라고 해야함.

하지만 window 객체는 기본 객체이므로 'window.'를 생략하고 alert( )만 사용할 수 있음.

마찬가지로 window 객체의 다른 메서드에서도 'window.'를 생략하여 사용함.

 

※ window 객체의 메서드

 

종류	설명
alert( )	알림 창을 표시함.
blur( )	현재 창에서 포커스를 제거함.
close( )	현재 창을 닫음.
confirm( )	[확인], [취소] 버튼이 있는 확인 창을 표시함.
focus( )	현재 창에 포커스를 부여함.
moveBy( )	현재 창을 지정한 크기만큼 이동함.
moveTo( )	현재 창을 지정한 좌표로 이동함.
open( )	새로운 창을 염.
postMessage( )	메시지를 다른 창으로 전달함.
print( )	현재 문서를 인쇄함.
prompt( )	프롬프트 창에 입력한 텍스트를 반환함.
resizeBy( )	지정한 크기만큼 현재 창의 크기를 조절함.
resizeTo( )	동적으로 브라우저 창의 크기를 조절함.
scroll	문서에서 특정 위치로 스크롤함.
scrollBy( )	지정한 크기만큼씩 스크롤함.
scrollTo( )	지정한 위치까지 스크롤함.
sizeToContent( )	내용에 맞게 창의 크기를 맞춤.
stop( )	로딩을 중지함.

 

(1) 새 브라우저 창을 여는 open( ) 메서드

링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 뜨게 하려면 window.open( ) 메서드를 사용함.

window.open( ) 메서드는 주로 홈페이지의 팝업 창을 띄울 때 사용함.

새 브라우저에서 열 웹 문서는 미리 만들어주었다가 다음과 같이 경로 부분에 작성하면 됨.

 

※ 새 브라우저에서 창 열기

window.open(경로, 창 이름, 창 옵션)

 

//경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냄.

//창 이름 : 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있음.

이름을 지정하지 않으면 팝업창이 계속 새로 나타남.

//창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있음.

위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타남.

 

※ 웹 브라우저에 팝업 창 표시하기

너비 500px, 높이 400px인 팝업 창을 여는 예제임.

 

 

(2) 창 이름 지정하기

앞에서 작성한 파일을 열고 새로 고침을 몇 번 누르면 계속해서 새로운 팝업 창이 열리는 문제가 생기는데,

팝업 창의 이름을 지정하면 이런 문제를 해결할 수 있음.

 

※ 팝업 창을 한 번만 표시하기

 

 

(3) 팝업 창 위치 지정하기

open( ) 메서드로 팝업 창을 표시하면 기본 위치는 화면의 왼쪽 위 구석에 나타남.

팝업 창의 위치는 open( ) 메서드의 left와 top 속성으로 지정할 수 있음.

left 속성은 화면의 왼쪽 측면을 기준으로 하고, top 속성은 화면의 위쪽을 기준으로 해서

팝업 창을 얼마나 떨어뜨릴지 지정함.

 

※ 팝업 창 위치 지정하기

왼쪽에서 100px, 위에서 200px 떨어진 위치에 팝업창을 표시함.

 

 

(4) 팝업 차단 고려하기

최신 웹 브라우저에서는 팝업 창이 열리지 않도록 하는 것을 기존으로 설정하는 경우가 많음.

또한 보안프로그램이나 관련 유틸리티를 설치하면 웹 브라우저의 팝업이 자동으로 차단되기도 함.

이런 경우 사용자는 웹 브라우저의 팝업 창이 자동을 차단된 사실을 모를 수도 있음,

그래서 사이트의 공지와 같은 중요한 내용을 팝업 창으로 보여줘야 한다면

팝업이 차단된 상태인지 체크하여 사용자에게 알려주는 것이 좋음.

 

※ 팝업이 차단된 브라우저의 알림 창 표시하기

팝업 창을 여는 openPop( ) 함수에서 웹 브라우저의 차단 여부를 확인하는 예제임.

웹 브라우저에서 팝업을 차단하면 window.open( )은 null을 반환함.

따라서 window.open( ) 메서드를 실행한 후 반환값을 체크하면 팝업이 차단되었는지 알아낼 수 있음.

(웹 브라우저의 팝업이 차단된 상태에서 파일을 열면 팝업이 차단되었다는 알림 창을 사용자에게 보여줄 수 있음.)

 

 

(5) 브라우저 창을 닫는 close( ) 메서드

팝업 창을 여는 메서드가 open( )이라면 창을 닫는 메서드는 close( )임,

기본형 : windoe.close( )

 

※ 버튼을 사용해 팝업 창 닫기

링크나 버튼 태그에 window.close( ) 메서드를 연결함.

 

 

④ navigator 객체

navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온·오프라인 등의 여러 정보가 담겨 있음.

이 정보는 사용자가 수정할 수 없으며 가져와서 보여 줄 수만 있음.

 

(1) 웹 브라우저와 렌더링 엔진

여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할 분야는 렌더링 엔진임.

아직 표준화되지 않은 CSS 속성 앞엔느 브라우저 벤더를 의미하는 프리픽스를 지정함.

이렇게 지정하는 이유는 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 때문임.

웹 브라우저는 웹 문서를 불러오면 내장된 렌더링 엔진에서 소스를 해석함.

이때 웹 브라우저마다 사용하는 렌더링 엔진이 다르므로 프리픽스를 붙여 브라우저를 구별하는 것임.

 

마찬가지로 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다름.

그래서 똑같은 HTML5 기술을 사용해서 만든 사이트에 접속하더라도

웹 브라우저마다 보여 주는 효과와 성능은 다를 수 있음.

크롬 브라우저의 주소 표시줄에 'chrome://version/'을 입력해 보면 현재 사용하는 렌더링 엔진과 버전을 알 수 있음.

 

※ 브라우저별 렌더링 엔진과 자바스크립트 엔진

 

브라우저	렌더링 엔진	자바스크립트 엔진
크롬(Chrome)	블링크(Blink)	V8
파이어폭스(Firefox)	게코(Gecko)	스파이더몽키(SpiderMonkey)
인터넷 익스플로러 (Internet Explorer)	트라이덴트(Trident)	차크라(Chakra)
사파리(Safari)	웹킷(Webkit)	자바스크립트코어(JavascriptCore)
오페라(Opera)	블링크(Blink)	V8

 

(2) userAgent 프로퍼티 알아보기

userAgent 프로퍼티는 사용자 에이전트 문자열을 의미하며, 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용함.

userAgent에는 사용자의 웹 브라우저 버전, 자바스크립트의 엔진 종류 등 여러 정보가 들어있음.

따라서 서버에서는 그 정보를 확인하여 사용자에게 맞는 웹 페이지를 보여 줄 수 있음.

 

예전에는 웹 브라우저를 식별할 때 사용자 에이전트 문자열을 많이 사용했으나,

최근에는 같은 자바스크립트 엔진을 사용하는 브라우저가 많아서

사용자 에이전트 문자열의 내용이 겹치므로 사용하지 않는 추세임.

 

ex. 크롬, 엣지, 파이어폭스 브라우저의 사용자 에이전트 문자열은 다음과 같음

 

// 크롬 userAgent

"Mozilla/5.0 (windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/81.0.4044.138 Safari/537.36"

 

// 엣지 userAgent

"Mozilla/5.0 (windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/81.0.4044.138 Safari/537.36 Edg/81.0.416.72"

 

// 파이어폭스 userAgent

"Mozilla/5.0 (windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0"

 

※ 사용자 에이전트 문자열

 

종류	설명
Mozilla/x.x	모질라 버전을 나타냄.
windows NT x.x	브라우저를 실행하는 컴퓨터 운영체제를 나타냄.
win64; x64	윈도우 64비트 기반을 나타냄.
WOW64	윈도우 64비트 기반을 나타냄.
Trident/x.x	트라이덴트 엔진 버전을 나타냄.
rv: x.x	브라우저 버전을 나타냄.
AppleWebKit/x.x	웹킷 엔진의 빌드 번호를 나타냄.
KHTML	오픈소스 렌더링 엔진인 KHTML을 의미함.
like Gecko	게코 기반의 다른 브라우저와 호환을 의미함.
Firefox/x.x	파이어폭스 브라우저 버전을 나타냄.
Chrome/x.x	크롬 버전을 나타냄.
Safari/x.x	사파리 브라우저의 빌드 번호를 나타냄.

 

(3) navigator 객체 정보 살펴보기

콘솔 창에서 navigator를 입력 후 엔터를 누른후 ▶를 클릭하면 navigator 객체의 모든 정보를 한눈에 볼 수 있음.

 

※ navigator 객체의 주요 프로퍼티

 

종류	설명
battery	배터리 충전 상태를 알려줌.
cookieEnabled	쿠키 정보를 무시하면 false, 허용하면 true를 반환함.
geolocation	모바일 기기를 이용한 위치 정보를 나타냄.
language	브라우저 UI의 언어 정보를 나타냄.
oscpu	현재 운영체제 정보를 나타냄.
userAgent	현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열임.

 

⑤ history 객체

history 객체에는 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됨.

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

history 객체에는 방문한 URL 정보가 저장되므로 메서드는 방문했던 URL을 앞뒤로 이동하며 페이지를 불러옴.

 

※ history 객체의 프로퍼티와 메서드

 

구분		설명
프로퍼티	length	현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됨.
메서드	back( )	history 목록에서 이전 페이지를 현재 화면으로 불러옴.
	forward( )	history 목록에서 다음 페이지를 현재 화면으로 불러옴.
	go( )	history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옴

 

⑥ location 객체

location 객체는 브라우저의 주소 표시줄과 관련됨. 즉, location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데

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

location 객체의 메서드는 브라우저의 [새로 고침]과 같은 역할을 하는 reload( ) 메서드와

현재 창에 다른 문서나 사이트를 보여 주는 replace( ) 메서드가 매우 유용함.

 

구분		설명
프로퍼티	hahs	URL 중에서 #으로 시작하는 해시 부분의 정보를 담고 있음.
	host	URL의 호스트 이름과 포트 번호를 담고 있음.
	hostname	URL의 호스트 이름이 저장됨.
	href	전체 URL값임. 이 값을 변경하면 해당 주소로 이동할 수 있음.
	pathmame	URL 경로가 저장됨.
	port	URL의 포트 번호를 담고 있음.
	protocol	URL의 프로토콜을 저장함.
	password	도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장함.
	search	URL 중에서 ?로 시작하는 검색 내용을 저장함.
	username	도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장함.
메서드	assign( )	현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴.
	reload( )	현재 문서를 다시 불러옴
	replace( )	현재 문서의 URL을 지우고 다른 URL의 문서로 교체함.
	toString( )	현재 문서의 URL을 문자열로 반환함.

 

※ 사이트 위치 고정하기

location 객체의 일부 프로퍼티를 가져와 보여주는 예제임.

버튼을 클릭하면 replace( ) 메서드를 이용해 이지스퍼블리싱 홈페이지로 이동함.

[이지스퍼블리싱 홈페이지로 이동하기]를 클릭하면 현재 문서의 주소 자리에

이지스퍼블리싱의 사이트 주소가 들어가면서 사이트로 이동함.

현재 문서의 주소가 새로운 주소로 대체되므로 브라우저 창의 [뒤로] 버튼이 활성화되지 않음.

 

 

⑦ screen 객체

사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용함.

screen 객체에서 사용하는 메서드는 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할을 함.

2가지 메서드는 풀 스크린 상태일 때나 방향 전환을 할 수 있는 앱에서 사용함.

 

※ screen 객체의 프로퍼티와 메서드

 

구분		설명
프로퍼티	availHeight	UI 영역(ex. 윈도우의 작업 표시줄, Mac의 독)을 제외한 영역의 높이를 나타냄.
	availWidth	UI 영역을 제외한 내용표시 영역의 너비를 나타냄.
	colorDepth	화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냄.
	height	UI 영역을 포함한 화면의 높이를 나타냄.
	orientation	화면의 현재 방향을 나타냄.
	pixelDepth	화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냄.
	width	UI 영역을 포함한 화면의 너비를 나타냄.
메서드	lockOrientation( )	화면 방향을 잠금
	unlockOrientation( )	화면 방향 잠금을 해제함.

 

※ screen 객체로 화면의 너비와 높이 알아내기

 

 

팝업 창에서 클릭한 내용을 메인 창에 나타내기

 

① main.html 파일 수정하기

팝업 창을 popWin이라는 객체로 할당한 후 popWin을 만든 부모(메인 창)가 누구인지

브라우저에게 알려주기위해 다음과 같이 소스코드를 수정하고 저장함.

 

 

② doit-event.html 파일 수정하기

<a> 태그에서 링크된 문서를 메인 창에서 표시할 수 있도록 하기위해

<a> 태그의 href 속성값을 인수로 넘겨주는 loadURL( ) 함수를 실행함.

이때 this는 click 이벤트가 발생한 대상, 즉 a 객체를 가리킴.

그리고 return false는 링크를 클릭했을 때 기본 동작(링크를 연결하는 것)을 취소한다는 뜻임.

 

 

다음으로 loadURL( ) 함수를 작성함.

이 함수는 현재 창의 부모 창을 찾아서 그 창의 location에 매개변수의 값 url을 넘겨주고 현재 창은 닫음.

 

 

다음과 같이 main.html 문서를 열고 팝업 창에서 [자세히 보기] 링크를 클릭해보면

팝업 창은 닫히고 메인 창에 상세 정보가 나타남.

 

 

팝업 창을 화면 가운데에 표시하기

 

① 화면 크기 계산하기

화면의 가로 너비는 1000px이고 세로는 600px이고, 팝업 창은 너비가 500px, 높이가 400px라고 가정했을 때,

화면의 가로 길이에서 팝업 창의 가로 길이를 빼면 500px임.

이 값을 반으로 나누어 250px만큼 왼쪽에서 띄우면 팝업 창은 가로 중간에 놓임.

화면 높이도 위와 같이 팝업 창의 높이를 뺀 후 반으로 나누면됨.

화면 크기는 screen.width와 screen.height 프로퍼티를 사용할 수도 있고,

screen.availWidth와 screen.availHeight 프로퍼티를 사용해도 됨.

 

② center.html 파일 수정하기

화면의 너비(availWidth)에서 팝업 팡의 너비(w)를 뺀 후 2로 나눈 값이 팝업 창의 왼쪽 좌표가 되고,

화면의 높이(availHeight)에서 팝업 창의 높이 값(h)을 뺀 후 2로 나눈 값이 팝업 창의 위쪽 좌표가 됨.

그리고 팝업 창의 옵션값이 길어서 opt라는 변수를 사용해 옵션 문자열을 따로 저장하여

window.open( ) 메서드에 넣어줌.

파일을 저장하고 웹 브라우저에서 결과를 확인해보면 팝업 창이 화면 가운데에 표시됨.

 

 

---