[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 16

HTML／CSS／Javascript

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 16

EunaSon 2023. 8. 13. 20:19

16-1 자바스크립트와 객체

객체 알아보기
자바스크립트와 내장 객체

객체 알아보기

자바스크립트에는 이미 여러 객체들이 포함되어있음. 그중에서 Date 객체를 중심으로해서 객체의 사용방법에 대해 알아보자.

객체(object)란

프로그램에서 인식할 수 있는 모든 대상을 말함

자바스크립트에서 데이터를 저장하고 처리하는 기본 단위

자바스크립트 객체

자바스크립트 안에 미리 정의해놓은 객체가 있음

문서 객체 모델(DOM) : 웹 문서 안에 포함된 이미지, 링크, 텍스트필드 등을 모두 별도의 객체로 관리하는 것. 웹 문서를 좀더 다이나믹하게 꾸미기 위해 하나하나 요소를 조절하기 위해 사용함

브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리함. 웹 브라우저 주소, 화면 등을 별도의 객체로 관리함

내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해놓은 것

사용자 정의 객체 : 프로그래밍을 하면서 사용자가 필요할 때마다 직접 만드는 객체

html5에서는 자바스크립트로 따로 관리하던 이러한 객체들을 html에 포함시킴

객체의 인스턴스 만들기

객체는 그대로 가져다 쓰는 것이 아니라 인스턴스 형태로 만들어서 사용해야함

인스턴스 : 객체를 틀로 사용하여 같은 모양으로 찍어낸 것이라 보면 됨

[기본형] new 객체명

예) Date 객체의 인스턴스 만들기 -> 날짜와 시간 표시하기

var now = new Date(); // Date 인스턴스 만들고 변수에 저장함

document.write("현재 시각은 " + now);

현재 시각은 Wed Nov 11 2020 15:58:24

GMT+0900 (대한민국 표준시)

변수 now는 Date객체의 모든 성질을 다 사용할 수 있음. Date 객체의 프로퍼티, 메서드 등을 사용 가능

프로퍼티와 메서드

프로퍼티(property) : 객체의 특징이나 속성

메서드(method) : 객체에서 할 수 있는 동작

예) 자동차

프로퍼티 : 제조사, 모델명, 색상, 배기량

메서드 : 시동걸기, 움직이기, 멈추기, 주차하기

객체의 프로퍼티와 메서드를 사용할때,

1) 객체의 인스턴스를 만들어서( new Date(); )

2) 변수에 저장( var now = new Date(); )

3) 변수 이름 뒤에 메서드나 프로퍼티 써주면 됨( now.toLocaleString() )

내장객체

객체의 사용방법은 거의 비슷함.

필요한 객체가 있다면 MDN이라는 사이트를 참조

https://developer.mozilla.org/en-US/docs/Web/JavaScript

JavaScript | MDN

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache

developer.mozilla.org

자바스크립트 메뉴 안에 Built-in object라는 파트가 있음

그 안에 내장객체들이 나열되어있음

한국어로 언어 변경할 수도 있음

취소선이 그려진 것은 더이상 사용되지 않는 메서드나 프로퍼티임

뒤에 () 가 붙은것은 메서드, 괄호 없으면 프로퍼티

내장객체 - Date 객체

Date 객체 인스턴스 만들기

1) 현재 날짜를 기준으로 인스턴스 만들기

new Date();

2) 특정 날짜를 기준으로 만들기 - 괄호 안에 날짜 또는 날짜와 시간을 입력

new Date("2020-02-25") // 년월일은 하이픈 - 으로 연결함

new Date("2020-02-25T18:00:00") // 시간을 넣고싶다면 날짜와 시간 사이에 T를 써줌

자바스크립트의 날짜와 시간 입력 방식

1)YYYY-MM-DD 형식

new Date("2020")

new Date("2020-02")

new Date("2020-02-25")

2) YYYY-MM-DDTHH 형식

new Date("2020-02-25T18:00-00")

new Date("2020-02-25T15:00:00Z")

3) MM/DD/YYYY 형식

new Date("02/25/2020")

4) 이름 형식

new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)")

요일 월 일 년 시:분:초 기준시

Date 객체의 메서드

구분		설명
날짜, 시간 정보 가져오기	getFullYear()	연도를 네 자리 숫자로 표시
	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()	연도를 네 자리 숫자로 설정
	setMonth()	주의) 0~11 사이의 숫자로 월을 설정 0 : 1월, 11 : 12월
	setDate()	1~31의 숫자로 일을 설정
	setTime()	1970년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 설정함
	setHours()	0~23 사이의 숫자로 시를 설정함
	setMinutes()	0~59 사이의 숫자로 분을 설정함
	setSeconds()	0~59 사이의 숫자로 초를 설정함
	setMilliseconds()	0~999 사이의 숫자로 밀리초를 설정함
날짜, 시간 형식 바꾸기	toLocaleString()	현재 날짜와 시간을 현지 시간(local time)으로 표시함
날짜, 시간 형식 바꾸기	toString()	Date 객체 타입을 문자열로 표시함

주의) 월은 1부터 시작하지 않고 0부터 시작함, 요일도 0인 일요일부터 시작함

예) 기준일로부터 독서챌린지를 시작하여 며칠째 성공중인지 나타내보자

기준일로부터 오늘까지 며칠이 지났는지 알아야 함

getTime()을 이용하면 1970.1.1 0시0분0초부터 오늘까지 얼마나 지났는지 밀리초 단위로 반환함

getTime(오늘) = 1970.1.1 ~ 오늘

getTime(기준일) = 1970.1.1 ~ 기준일

=> getTime(오늘) - getTime(기준일) = 기준일로부터 오늘까지 얼마나 지났는지 밀리초 단위로 알 수 있음->일 단위로 변환하자

Date객체는 오늘과 기준일, 2개가 필요함

반올림에 사용하는 Math 객체는 인스턴스를 만들지 않고도 프로퍼티와 메서드를 사용할 수 있음

span 태그 안쪽에 얼마나 지났는지 일 수를 표시함, but 아직 안배워서 그냥 해보자

document.querySelector('#result').innerText = passedTime;

=> 웹 문서가 열릴 때 document 객체가 만들어지고,

id값이 result인 요소를 찾아가서( document.querySelector('#result') ) 사이에 텍스트를 집어넣음( .innerText = 텍스트내용이나 변수명) -> 써준 내용이나 변수 내용이 id값이 result인 요소(span 태그)에 들어감

<body>
    <div id="container">
        <h1>책 읽기</h1>
        <!-- span 태그 사이에 일수 들어감 -->
        <p><span class="accent" id="result"></span>일 연속으로 책읽기 달성</p>  
    </div>
    
    <script>
        var now = new Date();
        var firstDay = new Date("2020-10-01"); // 기준일 2020년 10월 1일
        
        var toNow = now.getTime(); // 1970.1.1 ~ 오늘까지 밀리초
        var toFirst = firstDay.getTime(); // 1970.1.1 ~ 기준일까지 밀리초 
        var passedTime = toNow - toFirst; // 기준일 ~ 오늘까지 밀리초, 너무 크므로 일 단위로 변환하자
        
        // 일 수가 정수가 아닌 소수점으로 표시되므로 반올림 필요->Math 객체 필요함, round 사용
        passedTime = Math.round(passedTime / (24 * 60 * 60 * 1000)); 
        
        document.querySelector('#result').innerText = passedTime;
    </script>
</body>

16-2 자바스크립트와 객체

3. 브라우저와 관련된 객체

브라우저 관련 객체

웹 브라우저 창에 웹 문서가 열리면, 웹 브라우저에서는 화면에 표시되는 요소들과 관련된 객체들을 하나씩 만들어냄

웹 브라우저가 열림과 동시에 -> window 객체를 만듬

window 객체는 웹 브라우저 창이 열릴 때마다 하나씩 만들어짐

가장 최상위의 객체, window 객체 하위로 각각의 객체들이 만들어짐

document 객체는 웹문서 하나당 하나씩 만들어짐

navigator 객체는 현재 사용하는 웹 브라우저의 정보가 들어있음

history 객체는 현재 창에서 사용자의 방문 기록을 저장함

location 객체는 현재 페이지의 url 정보가 담겨있음

screen 객체는 현재 사용하는 화면 정보를 다룸

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 객체는 기본 객체이므로 객체 이름 'window.' 를 생략하고 메서드 이름만 사용해도 됨

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

예) 문서를 열면 팝업창(notice.html)이 표시되도록 하자 - window.open()

<body>
    <!-- 해당 페이지를 열자마자 이미 만들어진 notice.html(팝업창)이 열리도록 하자-->
    <script>
        // window.open("파일 경로", "창 이름", "창 옵션(창의 크기를 px단위 없이 숫자만 써줌)")
        // 화면 왼쪽 상단에 팝업창이 뜸
        // 창이름을 지정하지 않으면 화면을 새로고침 할때마다 계속 팝업창이 뜸
    	window.open("notice.html", "공지사항","width=500, height=400");
    </script>
</body>

window.open()을 이용함

창이름을 지정하지 않으면 창을 새로고침하거나 뒤로가기로 해당페이지에 다시 돌아올 때마다 무한으로 팝업창이 계속 열리게 됨. 창이름을 지정해주면 정해진 위치에 1개의 팝업창만 뜨도록 되므로 창이름을 꼭 지정해주도록 하자.

예) 팝업창에 닫기버튼을 추가해보자

button태그에 close 메서드를 연결하는 방법은 여러가지가 있음

1) button태그에 onclick 이벤트를 이용해 이벤트 핸들러를 연결(간단한 방법, 한줄짜리면 이 방법을 주로 사용함.)

2) 자바스크립트를 이용해 태그를 밖으로 꺼내서 이벤트 핸들러를 연결

1)의 방법을 이용해보자

<body>
    <div id="content">
    <h1>공지사항</h1>
        <ul>
            <li>항목1</li>
            <li>항목2</li>
            <li>항목3</li>
            <li>항목4</li>
        </ul>
        
        <button onclick="javascript:window.close()">닫기</button>
    </div>
</body>

한줄짜리인 경우 'on이벤트=' 뒤에 "javascript: 코드~~" 써주면 됨

팝업창은 보통 왼쪽 위 귀퉁이에 표시됨

팝업창을 화면 가운데에 표시하고 싶다면 screen 객체의 프로퍼티를 이용할 수 있음

screen 객체

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

팝업창을 화면 중앙에 위치시키기

height값과 width값을 통해 화면의 중앙을 알 수 있으므로

그값을 이용해 팝업창의 너비를 빼고 반으로 나눠서 화면의 중앙위치를 알 수 있음

width값(사용가능한 너비값) : 1000px

height값(사용가능한 높이값) : 600px

팝업창의 가로값 500px, 세로값 400px

( 가용너비값 1000 - 팝업창가로값 500 ) / 2 = 250px

( 가용높이값 600 - 팝업창세로값 400 ) / 2 = 100px

팝업창을 위치시킬 좌표값은 왼쪽(left)에서 250px , 위(top)에서 100px

이를 소스코드로 만들어보자

팝업창은 notice.html, 창이름은 pop..

oopenCenter() 라는 함수를 사용해서 팝업창으로 notice.html을 열거고, 창이름은 pop, 너비값은 500, 높이값은 400

openCenter() 함수를 정의해보자

매개변수로 열 파일이름, 창이름, 너비값, 높이값 4개를 가짐

왼쪽에서 띄울 좌표값과 위쪽에서 띄울 좌표값을 구하자

<body>
    <script>
        function openCenter(doc, win, w, h) {
            var left = (screen.availWidth - w) / 2;
            var top = (screen.availHeight - h) / 2;
            var opt = "left = " + left + ", top = " + top + ", width = " + w + ", height = "+ h;
            
            window.open(doc, win, opt);
        }
        
        openCenter("notice.html", "pop", 500, 400);
    </script>
</body>

'HTML／CSS／Javascript' 카테고리의 다른 글

[Javascript/Jquery] Ajax 정리 (0)	2023.10.27
[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 17 (완) (0)	2023.08.14
[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 15 (0)	2023.08.13
[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 13~14 (0)	2023.08.08
[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 12 (0)	2023.08.06

현재글[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 16

SEA

d+4,

Today :
Yesterday :

SEA