📝 JavaScript
🖥️ 1. Object Model
- 웹브라우저의 구성요소들은 하나하나가 객체화 되어 있다.
- 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.
- 이 객체들은 서로 계층적인 관계로 구조화되어 있다.
- BOM, DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류
1-1. window
window.내장객체이름.함수이름(파라미터);
내장객체이름.함수이름(파라미터);
**모든 객체가 window 안에 내장되어 있기 때문에, window 생략 가능
window 객체는 DOM을 포함한 브라우저의 창을 나타낸다.
자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.
1-2. DOM
Document Object Model
- document를 관장하는 모델 (웹페이지의 내용을 제어한다)
1-3. BOM
Browser Object Model
- 웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다.
- BOM은 전역객체인 Windows의 프로퍼티와 메소드들을 제공하는 수단이다.
📝 예제
EX) window
<!-- 브라우저의 창을 제어하는 것과 관련된 open() 함수가
window객체에 직접적으로 포함되어 있다. -->
<body>
<h1>window 객체</h1>
<h3>open 메소드 확인</h3>
<div>
<a href="#" onclick="open1(); return false;">새로운 창 열기</a><br/>
<!-- href와 onclick 속성의 충돌을 방지하기 위해서
onclick 속성에 이벤트 함수를 호출한 뒤
return false; 구문을 추가하여 실행을 중단하도록 처리한다. -->
<a href="#" onclick="open2(); return false;">팝업창 열기</a><br/>
<a href="#" onclick="open3('https://www.naver.com'); return false;">팝업창 열기2</a>
</div>
<script>
function open1(){
window.open( 'open.html' );
}
function open2(){
window.open( 'open.html', '', 'width=300, height=500m, scrollbars=no' );
}
function open3(url){
window.open( url, '', 'width=300, height=500m, scrollbars=no' );
}
</script>
</body>
<!-- 새로운 브라우저 창을 열 경우
window.open("페이지 url"); -->
<!-- 팝업창 형태로 창을 열 경우
window.open("페이지 url", "창이름:", "옵션"); -->EX)
<body>
<h1>새로 열린 창</h1>
<a href="#" onclick="window.close(); return false;">창 닫기</a>
</body>
<!--
현재 창 닫기
window.close();
self.close();
-->EX) navigator
<body>
<script>
let info = "<h1>웹 브라우저 정보 확인</h1>";
info += "<p>브라우저 이름 : " + navigator.appName + "</p>";
info += "<p>브라우저 코드명 : " + navigator.appCodeName + "</p>";
info += "<p>플랫폼 정보 : " + navigator.platform + "</p>";
info += "<p>사용자 정보 : " + navigator.userAgent + "</p>";
info += "<p>브라우저 정조 : " + navigator.appVersion + "</p>";
document.write(info);
</script>
</body>
EX) location
<!-- 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티
이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고,
문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. -->
<body>
<script>
console.log(location);
console.log(location.toString());
console.log(location.href);
</script>
</body>EX) location
<body onload="authNo()">
<!--
1. 페이지를 최초로 load시 랜덤 인증번호 5자리가 id auth 세팅
(onload, document.getElementById(해당id).innerHTML = 값;)
2. 인증번호 새로 받기버튼 클릭시, 페이지 새로고침
(location.reload())
-->
<p>
고객님의 인증번호는
<strong id="auth">00000</strong> 입니다.
</p>
<input type="button" value="인증번호 새로 받기"
onclick="refresh()"/>
<script>
function authNo(){
// 5자리 인증번호를 id값이 auth인 요소에게 출력
let value = "";
for( let i=0; i<5; i++ ){
value += random(0,9);
}
document.getElementById("auth").innerHTML= value;
}
function random(n1, n2){
return parseInt(Math.random() * (n2-n1+1)) + n1;
}
function refresh(){
location.reload();
}
</script>
</body>EX) history
<body>
<h1>History 객체</h1>
<a href="history2.html">페이지 이동</a>
<a href="#" onclick="history.forward(); return false;">앞 페이지로 이동</a>
</body>EX) history
<body>
<h1>History 객체</h1>
<a href="#" onclick="history.back(); return false;">이전 페이지로 이동</a>
</body>