JavaScript는 객체 기반 언어로, 모든 것이 객체로 표현된다. 객체는 속성과 메서드를 가지며, 이를 통해 데이터를 구조화하고 관련 기능을 함께 사용할 수 있다. document 객체를 비롯한 다양한 내장 객체와 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)을 통해 JavaScript의 기능을 확장할 수 있다. 객체의 기본 사용법은 다음과 같다.
객체.메서드(); // 객체의 메서드를 실행
객체.속성; // 객체의 속성값을 가져옴
객체.속성 = 새로운값; // 객체의 속성값을 바꿈1. 객체의 종류
1) 내장 객체
내장 객체는 JavaScript 엔진에 기본적으로 제공되는 객체로, 필요할 때 생성하여 사용할 수 있다. 대표적인 내장 객체로는 다음과 같은 것들이 있다
- String: 문자열 관련 기능을 제공
- Date: 날짜와 시간 관련 기능을 제공
- Array: 배열 관련 기능을 제공
- Math: 수학 관련 기능을 제공
2) 브라우저 객체 모델(BOM)
브라우저 객체 모델(BOM)은 웹 브라우저의 환경과 관련된 객체를 말한다. BOM의 최상위 객체는 window이며, 다음과 같은 객체가 포함된다.
- window: 브라우저 창과 관련된 모든 객체의 상위 객체
- screen: 화면의 정보
- location: 현재 페이지의 URL 정보
- history: 브라우저의 세션 기록
- navigator: 브라우저에 대한 정보
3) 문서 객체 모델(DOM)
문서 객체 모델(DOM)은 HTML 문서의 구조를 표현한다. 최상위 객체는 <html>이며, 하위 객체로는 <head>, <body> 등이 있다. DOM을 통해 JavaScript로 HTML 요소를 조작할 수 있다.
2. 내장객체
1) 내장 객체 생성하기
// 1. Object 생성자 함수 사용
var tv = new Object();
tv.color = "white";
tv.price = 300000;
tv.info = function() {
document.write("TV color: " + this.color + "<br>");
document.write("TV price: " + this.price + "<br>");
};
// 2. 객체 리터럴 사용
var car = {
color: "black",
price: 5000000,
info: function() {
document.write("Car color: " + this.color + "<br>");
document.write("Car price: " + this.price + "<br>");
}
};
// 메서드 호출
tv.info();
car.info();
2) 날짜 관련 객체
JavaScript에서 날짜를 다루기 위해 Date 객체를 사용할 수 있다. (추가 예정)
var currentDate = new Date();
console.log("Current date and time: " + currentDate);
3) 수학 관련 객체
Math 객체는 다양한 수학 계산을 위한 메서드를 제공한다. (추가 예정)
console.log("Random number: " + Math.random());
console.log("Square root of 16: " + Math.sqrt(16));
4) 배열 관련 객체
Array 객체를 사용하면 배열을 생성하고 조작할 수 있다.
var fruits = ['apple', 'banana', 'cherry'];
fruits.push('orange'); // 배열에 요소 추가
console.log(fruits); // ['apple', 'banana', 'cherry', 'orange']
5) 문자열 관련 객체
문자열 조작을 위한 다양한 메서드를 제공하는 String 객체도 있다.
var message = "Hello, world!";
console.log(message.length); // 문자열 길이
console.log(message.toUpperCase()); // 대문자로 변환
3. 브라우저 객체 모델(BOM)
브라우저에 내장된 객체를 브라우저 객체라고 하며, window는 브라우저 객체의 최상위 객체이다.
1) window 객체
- open("URL", "새 창 이름", "새 창 옵션"): 새로운 URL 페이지를 여는 메서드
- alert(data): 경고 창을 띄우는 메서드. 확인 버튼 누르면 alert()를 사용한 다음 위치의 코드를 수행
- prompt("질문", "답변"): 입력을 받을 수 있는 대화 상자를 표시
- confirm("질문 내용"): 확인 또는 취소를 선택할 수 있는 대화 상자를 표시. 확인 버튼을 누르면 true를 반환하고 최소 버튼을 누르면 false를 반환함
- setInterval(function(){..자바스크립트 코드}, 일정 시간 간격): 특정 시간 간격으로 함수를 호출 (*clearInterval() : setInterval() 메서드 취소)
- setTimeout(function(){..자바스크립트 코드}, 일정 시간 간격): 일정 시간 후에 함수를 한 번 호출 (*clearTimeout() : setTimeout() 메서드 취소)
- moveTo(x, y) : 지정한 새 창의 위치를 이동함
- resizeTO(width, height) : 지정한 새 창의 크기를 변경함
// alert() 메서드 사용
window.alert("Hello, this is an alert!");
// setTimeout() 메서드 사용
setTimeout(function() {
alert("This alert appears after 3 seconds");
}, 3000);
2) screen 객체
- screen.width: 화면의 너비
- screen.height: 화면의 높이
- screen.availWidth: 사용 가능한 화면 너비
- screen.availHeight: 사용 가능한 화면 높이
- screen.colorDepth: 색상 깊이
console.log("Screen width: " + screen.width);
console.log("Screen height: " + screen.height);
3) location 객체
location 객체는 현재 문서의 URL 정보를 제공한다.
- location.href: 현재 URL
- location.pathname: URL의 경로
- location.reload(): 페이지를 새로 고침
console.log("Current URL: " + location.href);
location.reload(); // 페이지 새로 고침
4) history 객체
history 객체는 사용자의 세션 기록을 관리한다.
- history.back(): 이전 페이지로 이동
- history.forward(): 다음 페이지로 이동
5) navigator 객체
navigator 객체는 브라우저와 관련된 정보를 제공한다.
- navigator.userAgent: 브라우저의 사용자 에이전트 문자열
- navigator.language: 브라우저의 언어 설정
console.log("User agent: " + navigator.userAgent);
console.log("Browser language: " + navigator.language);
[참고문헌: Do It! - 자바스크립트+제이쿼리 입문 (출판사: 이지스퍼블리싱)]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript/개념] Document 객체와 객체 생성 (2) | 2024.10.23 |
|---|---|
| [JavaScript/개념] 자바스크립트 자주 사용하는 배열 메서드 (1) | 2024.10.23 |
