Preface
이번 장에선 자바스크립트의 내장 객체와 해당 객체들의 프로퍼티와 메서드를 알아봤다.
내용이 많아도 너무 많아서 책을 읽을 때도, 블로그를 쓸 때도 시간이 오래 걸렸다.
웹 쪽을 전문적으로 다룰 생각은 없기 때문에 자바스크립트 역시 모든 내용을 익히고 암기하는 것 보단, 필요한 내용만 그때그때 찾아보는 식으로 사용할 것 같다.
한 가지 궁금한 점은 웹의 특정 요소에 링크를 연결하는 작업처럼 HTML로도 구현할 수 있고, JS로도 구현할 수 있는 작업인 경우엔 어떤 것을 사용하는가에 관한 것이다.
HTML과 CSS만으로도 충분한 작업엔 굳이 자바스크립트를 사용할 필요가 없을 것 같은데...
1. 객체 알아보기
- 객체: 프로그램에서 인식할 수 있는 모든 대상
1) 문서 객체 모델(DOM)
2) 브라우저 관련 객체
3) 내장 객체
- 자바스크립트에선 객체를 참조 형태로 사용해야 한다.
→ 객체 자체가 아니라 인스턴스의 형태로 만들어서 사용해야 한다.
- 객체의 인스턴스를 만들 땐 new라는 예약어를 사용한다.
new 객체명
- 객체의 구성
1) 프로퍼티: 객체의 특징이나 속성
2) 메서드: 객체에서 할 수 있는 동작
- 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표를 붙이고 객체의 프로퍼티나 메서드 이름을 작성해야 한다.
→ 메서드는 함수와 같은 역할을 하므로 이름 옆에 괄호를 넣어야 한다.
2. 자바스크립트의 내장 객체
- Array 객체: 배열을 다루는 객체
var numbers = new Array(); // 배열의 크기를 지정하지 않음
var numbers = new Array(4); // 배열의 크기를 지정함
var numbers = ["one", "two", "three"]; // 초깃값이 있는 배열 선언
var numbers = Array("one", "two", "three"); // Array 객체를 사용한 초깃값 있는 배열 선언
- Array 객체의 메서드
| 종류 | 설명 |
| concat | 기존 배열에 요소를 추가해 새로운 배열을 만든다. |
| every | 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. |
| filter | 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. |
| forEach | 배열의 모든 요소에 대해 주어진 함수를 실행한다. |
| indexOf | 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다. |
| join | 배열 요소를 문자열로 합친다. (구분자 지정 가능) |
| push | 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 배열의 length를 반환한다. |
| unshift | 배열의 시작 부분에 새로운 요소를 추가한다. |
| pop | 배열의 마지막 요소를 꺼내 그 값을 결과로 반환한다. |
| shift | 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환한다. |
| splice | 배열에 요소를 추가하거나 삭제한다. |
| slice | 배열에서 특정한 부분만 잘라낸다. |
| reverse | 배열의 배치 순서를 역순으로 바꾼다. |
| sort | 배열 요소를 지정한 조건에 따라 정렬한다. |
| toString | 배열에서 지정한 부분을 문자열로 반환한다. (각 요소는 쉼표로 구분) |
- concat( ) 메서드는 서로 다른 배열 2개를 합쳐 별도의 새로운 배열을 만든다.
- spclice( ) 메서드는 괄호 안에 들어 있는 인수에 따라 배열 요소를 삭제하거나 새로운 요소를 추가하며, 삭제한 요소로 이루어진 새로운 배열이 결괏값으로 반환된다.
1) 인수가 1개인 경우: 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제한다.
2) 인수가 2개인 경우: 첫 번째 인수는 인덱스값이고 두 번째 인수는 삭제할 요소의 개수이다.
3) 인수가 3개 이상인 경우: 첫 번째 인수는 배열에서 삭제할 시작 위치를, 두 번째 인수는 삭제할 개수를, 세 번째 인수부턴 삭제한 위치에 새로 추가할 요소를 지정한다.
- slice( ) 메서드는 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내지만, 기존 배열이 바뀌지 않는다. (슬라이싱 개념인듯)
1) 인수가 1개인 경우: 해당 인수를 시작 인덱스로 간주하고 지정한 요소부터 마지막 요소까지 꺼내서 반환한다.
2) 인수가 2개인 경우: 첫 번째 인수는 배열의 시작 인덱스이고, 두 번째 인수는 끝 인덱스의 바로 직전 인덱스이다.
- Date 객체 인스턴스
1) 현재 날짜로 설정할 경우: new Date( );
2) 특정한 날짜를 지정할 경우: new Date("날짜 정보");
3) 시간 정보까지 나타낼 경우: 날짜 다음에 대문자 T를 추가한 후 그 뒤에 시간을 입력한다.
- 시간 입력 방식
1) YYYY-MM-DD
2) YYYY-MM-DDTHH:MM:SS
3) MM/DD/YYYY
4) 이름 형식: new Date("Wed Oct 10 2022 19:21:00 GMT+0900 (대한민국 표준시)")
- Date 객체의 메서드
| 구분 | 설명 | |
| 날짜/시간 정보 가져오기 | getFullYear( ) | 연도를 4자리 숫자로 표시한다. |
| getMonth( ) | 0~11 사이의 숫자로 월을 표시한다. | |
| getDate( ) | 1~31 사이의 숫자로 일을 표시한다. | |
| getDay( ) | 0~6 사이의 숫자로 요일을 표시한다. (0부터 일요일이 시작) | |
| getTime( ) | 1970년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 표시한다. | |
| getHours( ) | 0~23 사이의 숫자로 시를 표시한다. | |
| getMinutes( ) | 0~59 사이의 숫자로 분을 표시한다. | |
| getSeconds( ) | 0~59 사이의 숫자로 초를 표시한다. | |
| getMilliseconds( ) | 0~999 사이의 숫자로 밀리초를 표시한다. | |
| 날짜/시간 설정하기 | setFullYear( ) | 연도를 4자리 숫자로 설정한다. |
| setMonth( ) | 0~11 사이의 숫자로 월을 설정한다. | |
| setDate( ) | 1~31 사이의 숫자로 일을 설정한다. | |
| setTime( ) | 1970년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 설정한다. | |
| setHours( ) | 0~23 사이의 숫자로 시를 설정한다. | |
| setMinutes( ) | 0~59 사이의 숫자로 분을 설정한다. | |
| setSeconds( ) | 0~59 사이의 숫자로 초를 설정한다. | |
| setMilliseconds( ) | 0~999 사이의 숫자로 밀리초를 설정한다. | |
| 날짜/시간 형식 바꾸기 | toLocaleString( ) | 현재 날짜와 시간을 현지 시간으로 표시한다. |
| toString( ) | Date 객체 타입을 문자열로 표시한다. | |
- 날짜 계산하는 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독서 챌린지</title>
<style>
#container{
margin:50px auto;
width:300px;
height:300px;
border-radius:50%;
border:2px double #222;
background-color:#d8f0fc;
text-align: center;
}
h1 {
margin-top:80px;
}
.accent {
font-size:1.8em;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<div id="container">
<h1>책 읽기</h1>
<p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
<p>축하합니다!</p>
</div>
<script>
var now = new Date("2020-10-15"); // 오늘 날짜를 객체로 지정
var firstDay = new Date("2020-10-01"); // 시작 날짜를 객체로 지정
var toNow = now.getTime(); // 오늘까지 지난 시간(밀리 초)
var toFirst = firstDay.getTime(); // 첫날까지 지난 시간(밀리 초)
var passedTime = toNow - toFirst; // 첫날부터 오늘까지 지난 시간(밀리 초)
passedTime = Math.round(passedTime/(1000*60*60*24)); // 밀리 초를 일 수로 계산하고 반올림
document.querySelector('#result').innerText = passedTime;
</script>
</body>
</html>
- Math 객체는 따로 인스턴스를 만들지 않는다.
Math.프로퍼티명
Math.메서드명
- Math 객체의 메서드
| 종류 | 설명 |
| abs( ) | 절댓값을 반환한다. |
| acos( ) | 아크 코사인 값을 반환한다. |
| asin( ) | 아크 사인 값을 반환한다. |
| atan( ) | 아크 탄젠트 값을 반환한다. |
| atan2( ) | 아크 탄젠트 값을 반환한다. |
| ceil( ) | 매개변수의 소수점 이하 부분을 올린다. |
| cos( ) | 코사인 값을 반환한다. |
| exp( ) | 지수 함수를 나타낸다. |
| floor( ) | 매개변수의 소수점 이하 부분을 버린다. |
| log( ) | 매개변수에 대한 로그 값을 반환한다. |
| max( ) | 매개변수 중 최댓값을 반환한다. |
| min( ) | 매개변수 중 최솟값을 반환한다. |
| pow( ) | 매개변수의 지숫값을 반환한다. |
| random( ) | 0과 1 사이의 무작위 수를 반환한다. |
| round( ) | 매개변수의 소수점 이하 부분을 반올림한다. |
| sin( ) | 사인 값을 반환한다. |
| sqrt( ) | 매개변수에 대한 제곱근을 반환한다. |
| tan( ) | 탄젠트 값을 반환한다. |
- 이벤트 당첨자 뽑기 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>당첨자 발표</title>
<style>
h1 {
border:1px solid black;
padding:10px;
background:#eee;
}
</style>
</head>
<body>
<h1>당첨자 발표</h1>
<script>
var seed = prompt("전체 응모자 수 : ","");
var picked = Math.floor((Math.random() * seed) + 1);
document.write("전체 응모자 수 : " + seed + "명");
document.write("<br>");
document.write("당첨자 : " + picked + "번");
</script>
</body>
</html>
3. 브라우저와 관련된 객체
- 자바스크립트의 내장 객체
1) window: 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다.
2) document: 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨 있다.
3) navigator: 현재 사용하는 브라우저의 정보가 들어 있다.
4) history: 현재 창에서 사용자의 방문 기록을 저장한다.
5) location: 현재 페이지의 URL 정보가 담겨 있다.
6) screen: 현재 사용하는 화면 정보를 다룬다.
- 자바스크립트의 모든 객체는 window 객체 안에 포함된다.
- window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다.
→ 프로퍼티 이름 앞에 '.window'를 붙여 사용한다.
- window 객체의 메서드
→ 기본 객체이므로 'window.'를 생략하여 사용한다.
| 종류 | 설명 |
| alert( ) | 알림 창을 표시한다. |
| blur( ) | 현재 창에서 포커스를 제거한다. |
| close( ) | 현재 창을 닫는다. |
| confirm( ) | 확인/취소 버튼이 있는 확인 창을 표시한다. |
| focus( ) | 현재 창에 포커스를 부여한다. |
| moveBy( ) | 현재 창을 지정한 크기만큼 이동한다. |
| moveTo( ) | 현재 창을 지정한 좌표로 이동한다. |
| open( ) | 새로운 창을 연다. |
| postMessage( ) | 메시지를 다른 창으로 전달한다. |
| print( ) | 현재 문서를 인쇄한다. |
| prompt( ) | 프롬프트 창에 입력한 텍스트를 반환한다. |
| resizeBy( ) | 지정한 크기만큼 현재 창의 크기를 조절한다. |
| resizeTo( ) | 동적으로 브라우저 창의 크기를 조절한다. |
| scroll( ) | 문서에서 특정 위치로 스크롤한다. |
| scrollBy( ) | 지정한 크기만큼씩 스크롤한다. |
| scrollTo( ) | 지정한 위치까지 스크롤한다. |
| sizeToContent( ) | 내용에 맞게 창의 크기를 맞춘다. |
| stop( ) | 로딩을 중지한다. |
- window.open(경로, 창 이름, 창 옵션)
1) 경로: 팝업 창에 표시할 문서나 사이트의 경로를 나타낸다.
2) 창 이름: 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있다.
→ 지정하지 않을 경우 팝업 창이 새로고침할 때마다 계속 새로 나타난다.
3) 창 옵션: left, top 속성을 사용해 위치를 정하거나 width heigth 속성을 사용해 크기를 지정할 수 있다.
→ 크기는 단위 없이 숫자만 사용하며, 지정하지 않을 경우 화면의 맨 위쪽에 나타난다.
- 최근엔 팝업 창을 레이어로 만든다.
1) <div> 태그를 사용해서 만들며, 레이어 방식을 이용해 기존 사이트 위에 팝업 창을 겹치는 형태이다.
2) Document 객체를 사용하여 만든다. (다음 장에서 다룸)
- navigator 객체에 있는 정보는 사용자가 수정할 수 없으며 가져와서 보여주는 것만 가능하다.
- 아직 표준화되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정한다.
→ 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 때문이다.
- navigator 객체 정보 살펴보기
1) option + command + J 를 눌러 콘솔 창을 열고 navigator를 입력한 후 Enter를 누른다.
2) navigator 왼쪽에 있는 ▶ 를 클릭하면 navigator 객체의 모든 정보를 한눈에 볼 수 있다.
- navigator의 주요 프로퍼티
| 종류 | 설명 |
| battery | 배터리 충전 상태를 알려 준다. |
| cookieEnabled | 쿠키 정보를 무시하면 false, 허용하면 true를 반환한다. |
| geolocation | 모바일 기기를 이용한 위치 정보를 나타낸다. |
| language | 브라우저 UI의 언어 정보를 나타낸다. |
| oscpu | 현재 운영체제 정보를 나타낸다. |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열입니다. |
- history 객체에는 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
→ 보안 문제 때문에 읽기 전용이다.
| 구분 | 설명 | |
| 프로퍼티 | length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장된다. |
| 메서드 | back( ) | history 목록에서 이전 페이지를 현재 화면으로 불러온다. |
| forward( ) | history 목록에서 다음 페이지를 현재 화면으로 불러온다. | |
| go( ) | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러온다. | |
- location 객체의 프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | hash | URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있다. |
| host | URL의 호스트 이름과 포트 번호를 담고 있다. | |
| hostname | URL의 호스트 이름이 저장된다. | |
| href | 전체 URL이다. 해당 값을 변경하면 해당 주소로 이동할 수 있다. | |
| pathname | URL 경로가 저장된다. | |
| port | URL의 포트 번호를 담고 있다. | |
| protocol | URL의 프로토콜을 저장한다. | |
| password | 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장한다. | |
| search | URL 중에서 ?로 시작하는 검색 내용을 저장한다. | |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우 username 정보를 저장한다. | |
| 메서드 | assign( ) | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져온다. |
| reload( ) | 현재 문서를 다시 불러온다. | |
| replace( ) | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다. | |
| toString( ) | 현재 문서의 URL을 문자열로 반환한다. | |
- replace( ) 메서드를 이용하면 현재 문서의 주소가 새로운 주소로 대체되므로 브라우저 창의 [뒤로] 버튼이 비활성화된다.
- screen 객체의 프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | availHeight | UI 영역을 제외한 영역의 높이를 나타낸다. |
| availWidth | UI 영역을 제외한 내용 표시 영역의 너비를 나타낸다. | |
| colorDepth | 화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타낸다. | |
| height | UI 영역을 포함한 화면 높이를 나타낸다. | |
| orientation | 화면의 현재 방향을 나타낸다. | |
| pixelDepth | 화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타낸다. | |
| width | UI 영역을 포함한 화면의 너비를 나타낸다. | |
| 메서드 | lockOrientation( ) | 화면 방향을 잠근다. |
| unlockOrientation( ) | 화면 방향 잠금을 해제한다. | |
- 팝업 창을 화면 가운데에 표시하려면 화면 너비와 높이에서 팝업 창의 너비와 높이를 뺀 값을 2로 나누어야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window 객체</title>
</head>
<body>
<p>문서를 열면 팝업 창이 표시됩니다</p>
<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>
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [JS] 문서 객체 모델(DOM) (0) | 2022.08.11 |
|---|---|
| [JS] 함수와 이벤트 (2) (0) | 2022.08.07 |
| [JS] 함수와 이벤트 (1) (0) | 2022.08.06 |
| [JS] 자바스크립트 기본 문법 (0) | 2022.08.04 |
| [JS] 자바스크립트와 첫 만남 (0) | 2022.08.03 |
댓글