객체 개념
- 변수와 함수의 집합
- Javascript : Prototype 기반의 객체지향언어
- 객체를 원형(prototype) 형태로 생성하고, 그 안에 기능을 위한 변수나 함수를 추가하는 방법으로 그룹화 하는 개념
- 객체는 자주 사용하게 될 기능들을 묶어서 외부의 스크립트 파일로 분리해 내는 용도로 주로 사용
- 이렇게 만든 스크립트 파일은 여러개의 HTML파일에 의해서 참조하여 재사용 가능
내장 객체
- 자바스크립트가 미리 정의한 객체
Number
- 숫자와 관련된 기능 제공
| Number() | 문자 >> 정수 & 실 |
| isNan() | 문자열이 숫자형식이 아니면 true, 숫자형식이면 false -> Not-A-Number(숫자가 아님) |
| isInteger | 값이 정수인지 확인 |
| parseFloat(string) | parseInt() : 문자 >> 정수 |
| parseInt(string, radix) | parseFloat() : 문자 >> 실수 // Java 에는 parseFloat(), parseDouble() 2개 |
Boolean
- Boolean 값(true 또는 false)을 처리하는 데 사용
| Boolean() | 값을 Boolean 으로 변환 |
Array
- 배열을 생성하고 조작하는 데 사용
Array 객체 주요 메서드
| concat | 배열 합치기 새로운 배열 생성 원본 유지 |
기존 배열에 요소를 추가해 시로운 배열 생성 |
| join("구분자") | 배열을 문자열로 변환 구분자 defualt 쉼표(,) |
배열 요소를 문자열로 합침 구분자 지정 가능 |
| push | 배열 요소 뒤에 추가 | 배열의 맨 끝에 새로운 요소 추가 후 새로운 length 반환 |
| unshift | 배열 요소 앞에 추가 | 배열의 맨 앞에 새로운 요소 추가 |
| pop | 뒤 배열 요소 삭제 (삭제 보다는 꺼내기) | 배열의 마지막 요소를 꺼내 그 값을 결과로 반환 |
| shift | 앞 배열 요소 삭제 (삭제 보다는 꺼내기) | 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환 |
| splice | 배열 요소 추가 / 삭제 원본 변경 splice(index); index 부터 끝까지 값 가져오기 splice(index, 삭제 개수) splice(index, 삭제 개수, "추가할 요소") |
배열에 요소를 추가 or 삭제 |
| slice | 배열 요소 꺼내기 원본 유지 slice(index); index ~ 끝 까지 값 꺼내오기 slice(index1, index2); index1 ~ (index2 - 1) 까지 값 꺼내오기 |
배열에서 특정한 부분만 잘라 냄 |
| every | 배열의 모든 요소가 주어진 함수에 대해 참이면 true 반환 거짓이면 false 반환 |
|
| filter | 배열 요소 중에서 주어진 필터링 함수에 대해 true 인 요소만 골라 새로운 배열 생성 | |
| forEach | 배열의 모든 요소에 주어진 함수 실행 | |
| indexOf | 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음 | |
| reverse | 배열의 배치 순서를 역순으로 바꿈 | |
| sort | 배열 요소를 지정한 조건에 따라 정렬 | |
| toSrting | 배열에서 지정한 부분을 문자열로 반환 이때 각 요소는 쉼표(,)로 구분 |
⚒️ 예제
| // JavaScript\webapp\js | |
| exam21.html | 배열, 내장 객체 |
| exam21-1.html | 객체 배열 메서드; concat, join,push, unshift, pop, shfit, splice, slice |
String
- 문자열을 조작하는 데 사용
| String.prototype.charAt(index) | 지정된 인덱스의 문자 반환 |
| String.prototype.concat(...strings) | 문자열을 연결하여 새로운 문자열 반환 |
| String.prototype.includes(searchString) | 문자열이 지정된 문자열을 포함하는지 확인 |
| String.prototype.replace(search, replacement) | 문자열에서 검색된 값을 지정된 값으로 교체 |
| String.prototype.toUpperCase() | 문자열 >> 대문 |
| String.prototype.toLowerCase() | 문자열 >> 소문자 |
Math
- 수학 관련 함수와 상수 제공
| Math.random() | 0 이상 1 미만의 난수 반환 |
| Math.floor(x) | 소수점 올림, 정수 반환 |
| Math.ceil(x) | 소수점 버림, 정수 반환 |
| Math.round(x) | 소수점 반올림, 정수 반환 |
Date
- 날짜와 시간을 다루는 데 사용
| Date.now() | 현재 시간을 밀리초 단위로 반환 |
| Date.prototype.getFullYear() | 연도 반환 |
| Date.prototype.getMonth() | 월 반환 |
| Date.prototype.getDate() | 일 반환 |
| Date.prototype.toISOString() | 날짜를 ISO 8601 형식의 문자열로 반환 |
⚒️ 예제
| JavaScript\webapp\js | |
| exam22.html | timer; getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes(), getSeconds() |
| exam22-1.html | timer |
웹 브라우저 객체
- 웹 브라우저에서 사용하는 정보도 미리 객체로 지정되어 있음
- 웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 그 밑으로 하위 요소에 해당하는 객체들이 나타남
- 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며, 그 밑에 각각 다른 하위 객체가 있음
 |
 |
주요 내장 객체
| window | 브라우저 창이 열릴 때마다 하나씩 생성 브라우저 창 안의 요소 중에서 최상위에 위치 |
| document | 웹 문서마다 하나씩 있음 <body> 태그를 만나면 생성 HTML 문서의 정보 담겨 있음 |
| navigator | 현재 사용하는 브라우저의 정보 담겨 있음 |
| history | 현재 창에서 사용자의 방문 기록 저장 |
| location | 현재 페이지의 URL 정보 담겨 있음 |
| screen | 현재 사용하는 화면 정보 다룸 |
window
- 웹 브라우저의 상태 제어, 자바스크립트의 최상위에 위치
- 자바스크립트의 모든 객체는 window 객체 안에 포함된다
alert() 문이나 prompt() 문은 window 객체의 메서드이므로 원래는 window.alert() 라고 해야 한다
하지만window 객체는 기본 객체이므로 window. 을 생략하고 alert() 만 사용할 수 있다
1. <a> 태그에서 onclick 이 있을 경우에는 onclick를 먼저 수행하고 href로 이동하는 액션을 취한다
<a href=" http://www.naver.com/" onclick="alert('hi');">TEST1</a>
2. onclick에서 return false가 있을 경우 href로 이동하는 액션을 취하지 않게 된다
<a href=" http://www.naver.com/" onclick="alert('hi'); return false;">TEST2</a>
3. <a> 태그에서 onclick 이 있을 경우에는 onclick를 먼저 수행하고 href로 이동하는 액션을 취하는데,
href="#"로 호출 함수를 숨겨버렸기 때문에 페이지가 이동하지 않게 된다
갈 곳을 잃어버린 브라우저는 페이지의 상단으로 이동해버린다
<a href="#" onclick="alert('hi');">TEST1</a>
window 객체 프로퍼티
| document | 브라우저 창에 표시된 웹 문서에 접근 가능 |
| frameElement | 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소 반환, 반대로 포함되어 있지 않으면 null 반환 |
| innerHeight | 내용 영역의 높이 |
| innerWidth | 내용 영역의 너비 |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지 반환 |
| location | window 객체의 위치 또는 현재 URL |
| name | 브라우저 창의 이름을 가져오거나 수정 |
| outerHeight | 브라우저 창의 바깥 높이 |
| outerWidth | 브라우저 창의 바깥 너비 |
| pageXOffset | 스크롤했을 때 수평으로 이동하는 픽셀 수; == scrollX |
| pageYOffset | 스크롤했을 때 수직으로 이동하는 픽셀 수; == scrollY |
| parent | 현재 창이나 서브 프레임의 부모 |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리 |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리 |
| scrollX | 스크롤했을 때 수평으로 이동하는 픽셀 수 |
| scrollY | 스크롤했을 때 수직으로 이동하는 픽셀 수 |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지 반환 |
window 객체 메서드
| alert() | 알림 창 표시 |
| blur() | 현재 창에서 포커스 제거 |
| close() | 현재 창 닫기 |
| confirm() | [확인], [취소] 버튼이 있는 확인 창 표시 |
| focus() | 현재 창에 포커스 부여 |
| moveBy() | 현재 창을 지정한 크기만큼 이동 |
| moveTo() | 현재 창을 지정한 좌표로 이동 |
| open() | 새로운 창 열기 |
| postMessage() | 메시지를 다른 창으로 전달 |
| print() | 현재 문서 인쇄 |
| prompt() | 프롬프트 창에 입력한 텍스트 반환 |
| resizeBy() | 현재 창의 크기를 지정한 크기만큼 조절 |
| resizeTo() | 브라우저 창의 크기를 동적으로 조절 |
| scroll() | 문서에서 특정 위치로 스크롤 |
| scrollBy() | 지정한 크기만큼씩 스크롤 |
| scrollTo() | 지정한 위치만큼 스크롤 |
| sizeToContent() | 창의 크기를 내용에 맞게 맞춤 |
| stop() | 로딩 중지 |
⚒️ window 객체 예제
| // JavaScript\webapp\js | |
| exam23.html open.html |
open() - 새 창 열기, 팝업 창 열기 |
| exam24.html | open(), reload(), confirm(), 인증번호 새로 받기 |
DOM(Document Object Model; 문서 객체 모델)
window의 하위 객체 (window: 브라우저와 관련된 객체)
- 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
- 일반적으로 웹 문서에 삽입하는 요소는 미리 객체로 만들어져 있음
- 웹 문서 자체 (document 객체)
- 웹 문서에 포함된 이미지(image 객체), 링크, 텍스트 필드 등
DOM 트리 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Tree</title>
</head>
<body>
<h1>Do it!</h1>
<img src="../image/mangom.jpeg" alt="mangom">
</body>
</html>
- HTML 요소의 계층 구조
- DOM 트리의 계층 구조
- DOM 트리와 노드의 종류
DOM 구성 기본 원칙
- 모든 HTML 태그는 요소(element) 노드이다
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다
- HTML 태그에 있는 자식 노드인 속성(attribute) 노드이다
- 주석은 주석(comment) 노드이다
DOM 요소에 접근 & 내용 수정
getElement-* 함수 사용
document.getElementById("id명");
document.getElementByClassName("class명");
document.getElementByTagName("태그명");
- 속성 id=""로 지정된 Element 얻어오기
let heading = document.getElementsById('heading'); // id 선택자 사용
- 속성 class="" 로 지정된 Element 얻어오기
let bright = document.getElementsByClass('bright'); // class 선택자 사용
- 태그 <> Element 얻어오기
let images = document.getElementsByClassName('img'); // 타입 선택자 사용
querySelector-* 함수 사용
document.querySelector(선택자);
document.querySelectorAll(선택자);
- 선택자로 element 1개 얻어오기
document.querySelector('#heading');
document.querySelector('img');
- 선택자로 element 여러 개 얻어오기
document.querySelectorAll('#small-pic > img');
웹 요소의 내용을 가져와서 수정
요소.innerText = 내용;
요소.innerHTML = 내용;
요소.textContent = 내용;myTag.innerText = result;
⚒️ 예제
| // JavaScript/webapp/js | |
| exam19.html | 자바스크립트 함수 호출하기 |
| exam19-1.html | |
| exam19-2.html | |
| exam19-3.html | |
자세한 내용 >> jQuery DOM
navigator
- 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온•오프라인 등의 여러 정보 담겨 있음
- 사용자가 수정할 수 없는 정보
- 가져와서 보여줄 수만 있음
Navigator 객체 프로퍼티
| battery | 배터리 충전 상태 |
| cookieEnabled | 쿠키 정보를 무시하면 false, 허용하면 true 반환 |
| geolocation | 모바일 기기를 이용한 위치 정보 |
| loanguage | 브라우저 UI의 언어 정보 |
| oscpu | 현재 운영체제 정보 |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열 |
userAgent 프로퍼티
사용자 에이전트 문자열
사용자의 웹 브라우저 정보를 서버에 보낼 때 사용
// Chrome userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
// Edge userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.0.0
// Firefox userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:116.0) Gecko/20100101 Firefox/116.0
userAgent(사용자 에이전트 문자열) 종류
| 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 | 사파리브라우저의 빌드 번호 |
history
- 방문한 URL 정보 저장
- 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됨
- history 객체 메서드: 방문한 URL 을 앞뒤로 이동하며 페이지를 불러옴
- 읽기 전용(보안 문제 때문)
history 객체 프로퍼티
| length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수 저장 |
history 객체 메서드
| back() | history 목록에서 이전 페이지를 현재 화면으로 불러옴 |
| forward() | history 목록에서 다음 페이지를 현재 화면으로 불러옴 (다음 페이지가 없으면 아무것도 하지 않는다) |
| go() | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴 ex) history.go(1); 다음 페이지 가져옴 ex) history.go(-1); 이전 페이지 불러옴 |
| // JavaScript\webapp\js | |
| exam25.html examHistory.html |
history.forward(), history.back() - 페이지 이동 |
location
- 브라우저의 주소 표시줄과 관련된 객체
- 현재 문서의 URL 주소 정보 포함
- 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서 지정 가능
location 객체 프로퍼티
| hash | URL 중에서 #로 시작하는 해시 부분의 정보 |
| host | URL의 호스트 이름과 포트 번호 |
| hostname | URL의 호스트 이름 |
| herf | 전체 URL; 이 값을 변경하면 해당 주소로 이동 가능 |
| pathname | URL 경로 |
| port | URL의 포트 번호 |
| protocol | URL의 프로토콜 |
| password | 도메인 이름 앞에 username 과 password 를 함게 입력해서 접속하는 사이트의 URL일 경우에 password 정보 저장 |
| search | URL 중에서 ?로 시작하는 검색 내용 저장 |
| username | 도메인 이름 앞에 username 과 password 를 함게 입력해서 접속하는 사이트의 URL일 경우에 username 정보 저장 |
location 객체 메서드
| assign() | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴 |
| reload() | 현재 문서를 다시 불러옴 |
| replace() | 현재 문서의 URL 을 지우고 다른 URL 의 문서로 교체 |
| toString() | 현재 문서의 URL 을 문자열로 반환 |
| // JavaScript\webapp\js | |
| exam24.html | open(), reload(), confirm(), 인증번호 새로 받기 |
screen
- 웹 사이트에 접속하는 사용자의 서로 다른 화면 크기나 정보를 알아낼 때 사용하는 객체
- screen 객체 메서드 : 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할
- 풀 스크린 상태일 때나 방향 전환을 할 수 있는 앱에서 사용
screen 객체 프로퍼티
| availHeight | UI 영역(예를 들어 윈도우의 작업 표시줄이나 맥의 독)을 제외한 영역의 높이 |
| availWidth | UI 영역을 제외한 내용 표시 영역의 너비 |
| colorDepth | 화면에서 픽셀을 랜더링할 때 사용하는 색상 수 |
| height | UI 영역을 포함한 화면의 높이 |
| orientation | 화면의 현재 방향 |
| pixelDepth | 화면에서 픽셀을 랜더링할 때 사용하는 비트 수 |
| width | UI 영역을 포함한 화면의 너비 |
screen 객체 메서드
| lockOrientation() | 화면 방향 잠금 |
| unlockOrientation() | 화면 방향 잠금 해제 |
사용자 정의 객체
사용자가 필요할 때마다 정의하는 객체
let book = {
title: "자바스크립트",
pages: 500,
}
⚒️ 예제
| JavaScript\webapp\js | |
| exam20.html calc.js |
calc 객체를 사용하여 간단한 계산기 구현 |
객체와 인스턴스
자주 사용하는 요소는 미리 객체로 정의되어 있고, 필요할 때마다 인스턴스를 만들어서 사용
- new 예약어
- 객체의 인스턴스를 만들 때 사용
- new 객체명
let now = new Date();
document.write("현재 시각은 " + now);
// 결과 : 현재 시각은 Wed Aug 21 2024 14:53:09 GMT+9000 (한국 표준시)
- 프로퍼티 & 메서드 ; 객체마다 있음
- 프로퍼티 : 객체의 특징이나 속성 (객체 내부에 존재하는 값)
- 메서드 : 객체에서 할 수 있는 동작
- 인스턴스명.함수();
let now = new Date();
document.write(`현재 시각은 ${now.toLocaleString()}`); // 로컬 형식으로 표현하기
// 결과 : 현재 시각은 2024.8.21. 오후 2:58:04
'WEB > JavaScript' 카테고리의 다른 글
| 함수 & 이벤트 (0) | 2024.08.21 |
|---|---|
| Map (0) | 2024.08.18 |
| JavaScript 개요 (0) | 2024.08.18 |
