window 객체
모든 객체가 소속된 root 객체이고, 전역객체이면서 창이나 프레임을 의미한다.
-> 전역변수를 생성하고, 함수를 생성한다 라는 의미는 각각 window의 속성(변수), window의 함수를 의미한다.
alert('Hello World');
window.alert('Hello World');alert()은 브라우저가 제공하는 내장함수다.
위 2가지 호출 방식 모두 동일하게 작동하는 것으로 확인이 되는 것을 보아, 기존에 사용하는 alert()이라는 함수 호출 방식은 실은 내부적으로 window.alert()을 실행하는 것과 같은 의미다.
아래는 전역변수와 함수에 대한 예시다.
var a = 1;
alert(a);
alert(window.a);
function sum () {
return 1+1;
}
alert(sum());
alert(window.sum());위의 alert() 함수에 window. 를 명시하던 명시하지 않던 동일한 결과값이 나타난 것처럼, 이 역시 동일한 결과값을 나타낸다. 이와 같이 어떠한 개별적인 객체에 속하지 않은 전역변수 또는 함수를 만드는 것은 모두 window 객체의 속성과 함수를 만드는 것이다.
자바스크립트 내에서 작성되는 모든 코드들은 모두 window 객체 내에서 존재하며, window 객체는 브라우저 창을 대변하며 이를 제어할 수 있는 각각의 메서드(window.open(), window.close() 등등...)들을 제공한다. Javascript에서 어떤식으로 document, location, history 등을 제어할 수 있는지 확인 가능하다.
문서 객체 모델(DOM)
문서 객체 모델(Document Object Model : DOM)은 웹페이지 내의 모든 콘텐츠를 Node트리 형태의 객체로 나타내준다. 이 객체들을 이용하여 JS가 웹페이지를 동적으로 구성할 수 있도록 수정이 가능하다. 개중 document 객체는 기본 '진입점' 역할을 한다. document 객체를 이용하여 HTML 문서내의 무엇이든 변경할 수 있고, 원하는 것을 만들 수 있게 한다.
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is HTML Document</title>
</head>
<body>
<div>
<p>이곳은 window.document.getElementsByTagName("p")[0]으로 접근 가능합니다.</p>
<p>이곳은 window.document.getElementsByTagName("p")[1]로 접근 가능합니다.</p>
<p>이곳은 window.document.getElementsByTagName("p")[2]로 접근 가능합니다. 이유는 객체 접근 방식에 따라서 결과값을 배열로 반환하기 때문입니다.</p>
</div>
</body>
<script>
document.body.style.background = "red";
setTimeout(()=>{
document.getElementsByTagName("div")[0].style.backgroundColor = "#FFFFFF"; // 배열로 반환
},1500);
setTimeout(()=>{
document.getElementsByTagName("p")[0].style.color = "blue";
document.getElementsByTagName("p")[1].style.fontWeight = "bold";
},2500);
setTimeout(()=>{
var new_p = document.createElement("p");
new_p.innerText = "새로운 p태그를 추가합니다.";
document.getElementsByTagName("div")[0].appendChild(new_p);
},3500)
</script>
</html>
브라우저 객체 모델(BOM)
브라우저 객체 모델(Browser Object Model : BOM)은 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 나타낸다.
예시)
- navigator 객체는 브라우저와 운영체제에 대한 정보를 제공한다. 다양한 프로퍼티가 존재하며, 브라우저 정보를 알려주는 navigator.userAgent와 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등) 정보를 알려주는 navigator.platform, 사용자의 접속 위치를 표시하는 navigator.geolocation 등이 있다.
- location 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해줍니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM</title>
</head>
<body>
<p id="browser"></p>
<p>--- 위도 경도는 함수 완료 시간이 일정시간 소요 <b>(비동기 진행이라 콜백함수로 결과값 반영)</b></p>
<p id="x"></p>
<p id="y"></p>
</body>
<script>
document.getElementById("browser").innerHTML = "브라우저 정보 : " + navigator.userAgent;
navigator.geolocation.getCurrentPosition(function(args){
document.getElementById("x").innerHTML = "위도 : " + args.coords.latitude;
document.getElementById("y").innerHTML = "경도 : " +args.coords.longitude;
setTimeout(()=>{
if(confirm("페이지 이동을 하시겠습니까?")){
location.href='./DOM.html';
}
},1000);
});
</script>
</html>
참고링크 : https://opentutorials.org/course/1375/6619
웹브라우저와 JavaScript - 생활코딩
HTML 정보를 표현한다. HTML CSS JavaScript CSS 정보를 꾸며준다. #selected{ color:red; } HTML CSS JavaScript JavaScript HTML을 프로그래밍적으로 제어한다. #selected{ color:red; } .dark { background-color:black; color:white; } .dar
opentutorials.org
