자바스크립트와 객체
객체
: 프로그램에서 인식할 수 있는 모든 대상
- 문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지, 링크, 텍스트 필드도 모두 객체
- 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체, navigator, history, location, image, link.....
- 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의 되어 있음
객체의 인스턴스 만들기
자바스크립트에서 객체는 참조 형태로 사용해야 함
즉, 객체 자체가 아니라 인스턴스 형태로 만들어 사용
프로퍼티
: 객체의 특징이나 속성
매서드
: 객체에서 할 수 있는 동작
객체 인스턴스 만들기
→ new 객체명
객체의 프로퍼티와 메서드 사용하기
→ 객체명.프로퍼티
→ 객체명.매서드
▽ 자바스크립트의 내장 객체
| 종류 | 설명 |
| window | 브라우저 창 |
| document | 웹 페이지마다 하나씩 있으며 <body> 태그를 만나면 만들어짐 HTML 문서의 정보가 담겨있음 |
| navigator | 현재 사용하는 브라우저의 정보가 들어 있음 |
| history | 현재 창에서 사용자의 방문 기록을 저장 |
| location | 현재 페이지의 URL정보가 담겨있음 |
| screen | 현재 사용하는 화면 정보 다룸 |
마무리 문제 ♥♡
1. 주어진 조건을 참고하여 스크립트 소스를 채워서 완성하세요.
!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현재 시각은?</title>
<style>
p {
margin-top:20px;
font-size:1.2em;
text-align: center;
}
.display {
font-size:1.5em;
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p>현재 시각 <span id="current" class="display"></span></p>
<script>
setInterval(displayNow, 1000);
function displayNow() {
var now = new Date();
var currentTime = now.toLocaleTimeString();
document.querySelector("#current").innerHTML = currentTime;
}
</script>
</body>
</html>
2. [현재 시간 보기] 버튼을 클릭하면 현재 시간이 있는 파일을 팝업 창으로 나타나게 만들어 보세요. 이때 팝업창의 너비는 400px, 높이는 200px이고 브라우저의 중앙에 보이게 합니다.
↓
<!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{
width:200px;
margin:50px auto;
}
button {
border:1px solid #ccc;
background:#fff;
padding:20px 30px;
}
</style>
</head>
<body>
<div id="container">
<button id="bttn">현재 시간 보기</button>
</div>
<script>
document.getElementById('bttn').onclick = displayTime;
function displayTime(){
var left = (screen.availWidth - 400) / 2;
var top = (screen.availHeight - 200) / 2;
var opt = "left=" + left + ",top=" + top + ",width=" + 400 + ",height=" + 200;
window.open("current.html", "", opt);
}
</script>
</body>
</html>'HTML_CSS_JavaScript' 카테고리의 다른 글
| 웹 사이트 시작 화면 만들기 (0) | 2023.03.15 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑩ (0) | 2023.03.15 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑧ (0) | 2023.03.09 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑦ (0) | 2023.03.08 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |