브라우저에 내장된 객체를 ‘브라우저 객체’라고 합니다. window는 브라우저 객체의 최상위 객체이
며, window 객체에는 하위 객체가 포함되어 있습니다. 즉, 계층적 구조로 이루어져 있으며, 이를 브
라우저 객체 모델(BOM, Browser Obejct Model)이라고 합니다
<title> window 객체 </title>
<style>
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<p>
<img src="images/window_object_1.jpg" usemap="#intro"
alt="신간 책 소개" />
<map name="intro" id="intro">
<area shape="rect" coords="230,368,280,390" href="#" alt="창 닫기"
onclick="window.close();" />
<!-- onclick = 클릭시 입력값으로 동작이 된다 ("윈도우 창이 닫힌다") -->
</map>
</p>
</body>
</html>
<title> window 객체 </title>
<script>
window.open("winpopup.html", "pop1", "width=400, height=400, left=300, top=50");
//윈도우창으로 새창을 띄움 ("winpopup.html의 주소를 새창으로 띄움, , 가로세로길이, 왼쪽위 여백")
</script>
</head>
<body>
<h1>이지스 퍼블리싱</h1>
</body>
</html>
alert( )
경고 창을 나타낼 때 사용
alert("이메일 형식이 잘못되었습니다."); //경고창이 뜨게 해라!
prompt( )
질의응답 창을 나타낼 때 사용합니다
let userEmail = prompt("당신의 이메일 주소는?", "");
confirm( )
확인/취소 창을 나타낼 때 사용
confirm ("정말로 삭제하시겠습니까?");
일정한 시간 간격으로 코드 실행할 때의 메소드
☘️ setInterval ( ) : 일정한 시간 간격으로 코드를 반복 실행
☘️ setTimeout ( ) : 일정한 시간 후에 코드를 실행하고 종료
☘️ clearInterval ( ) : setInterval 메서드 제거
☘️ clearTimeout ( ) : setTimeout 메서드 제거
<script>
let addNum = 0;
let subNum = 1000;
let auto_1 = setInterval(function () {
addNum++; //3초에 1번씩 addNum을 증가시켜라
console.log("addNum: " + addNum);
}, 3000);
var auto_2 = setInterval(function () {
subNum--; //3초에 1번씩 을 감소시켜라
console.log("subNum: " + subNum);
}, 3000);
</script>
</head>
<body>
<h1>일정 시간 간격으로 값 증감시키기</h1>
<p> 콘솔 패널을 열어 확인하세요.</p>
<button onclick="clearInterval(auto_1)">증가 정지</button>
<button onclick="clearInterval(auto_2)">감소 정지</button>
</body>
</html>
clearInterval( ) 메서드는 setInterval( ) 메서드를 취소시킨다!
location 객체
사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체
현재 URL에 대한 정보(속성)와 새로 고침(reload) 메서드를 제공
☘️ 사용자 브라우저의 URL 경로 값을 가져옵니다.
location.href;
☘️ 주소로 변경
location.href = "http://www.naver.co.kr";
☘️ 새로고침
location.reload( );
history 객체
사용자가 방문한 사이트의 기록을 남기고
이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공
☘️ 기록을 남긴 총 수량
history.length;
☘️ 다음 방문 사이트로 이동
history.forward( )
☘️ 방문한 사이트 중 바로 이전의 사이트로 이동
history.back( );
☘️ 방문한 사이트 중 두 단계 이전에 방문한 사이트로 이동
history.back(2);
☘️ 이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동
history.go(이동 숫자)
'JavaScript' 카테고리의 다른 글
| Promise / async / await / get / post (0) | 2023.11.18 |
|---|---|
| 자바스크립트 : JS 변수 (0) | 2023.10.06 |
| 자바스크립트의 시작 : JS코드란? (0) | 2023.10.06 |
