BOM(Browser Object Model)
: 브라우저와 관련된 객체를 뜻함.
: Window, Location, History, Navigator, Screen
<!DOCTYPE html>
<!--
BOM(Browser Object Model)
: 브라우저와 관련된 객체를 뜻함.
: Window, Location, History, Navigator, Screen
-->
<html>
<head>
<meta charset="UTF-8">
<title>Window 객체</title>
</head>
<body>
<script type="text/javascript">
alert("window object"); //window. 생략가능
window.alert("window object2");
console.log("window object3");
window.console.log("window object4");
window.open("https://www.google.com", "openWindow", "width=500, height=300")
</script>
</body>
</html>창 위치이동
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var newWindow = window.open("https://www.google.com", "google", "width=500, height=600");
//위치 조정
newWindow.moveTo(50,50);
for (var i = 0; i < 1000; i++) {
newWindow.moveBy(1,1);
}
//사이즈 조절
newWindow.resizeTo(500,600);
for (var i = 0; i < 200; i++) {
new window.resizeBy(-1,-1);
}
</script>
</body>
</html>
onload() 사용
<!DOCTYPE html>
<!--
* onload() 이벤트 : 호출된 웹문서가 모두 완료된 후 자동으로 실행.
-->
<html>
<head>
<meta charset="UTF-8">
<title>window.onload()</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
console.log("First");
};
</script>
<script type="text/javascript">
console.log("Second");
</script>
<script type="text/javascript">
console.log("Third!");
</script>
</body>
</html>
*DOM(Document Object Model)
- 웹문서(테그)와 관련된 객체를 뜻함.
* JS이용해서 html 테그 객체를 생성, 추가, 삭제, 이동 등의 작업을 할수 있음.
<!DOCTYPE html>
<!-- *DOM(Document Object Model)
- 웹문서(테그)와 관련된 객체를 뜻함.
* JS이용해서 html 테그 객체를 생성, 추가, 삭제, 이동 등의 작업을 할수 있음.
-->
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 노드 이용하기</title>
</head>
<body>
<script type="text/javascript">
/* javascript를 이용해서 문서만들기
: DOM HTML API를 이용한 HTML 문서 요소 접근
*/
window.onload = function() {
// 새로운 Element 객체를 생성함.
var elementNode = document.createElement("p"); //createElement 테그이름 입력
// 새로운 TextNode 객체를 생성함.
var textNode = document.createTextNode("javascript & jsp");
// 자식노드 객체를 추가함.
elementNode.appendChild(textNode);
document.body.appendChild(elementNode);
};
</script>
</body>
</html>
텍스트 노드와 이미지노드 이용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 노드와 이미지노드 이용하기</title>
</head>
<body>
<script type="text/javascript">
/* var imgNode = document.createElement("img");
imgNode.src = "./img/logo.png";
imgNode.width = "170";
imgNode.height = "67";
document.body.appendChild(imgNode); */
//방법 2 동일한 결과
var imgNode = document.createElement("img");
imgNode.setAttribute("src", "./img/logo.png");
imgNode.setAttribute("width", "170");
imgNode.setAttribute("height", "67");
document.body.appendChild(imgNode);
</script>
</body>
</html>
innerHTML속성 이용하기
Node.innerHTML : 문서에 HTML 텍스트 문자열을 기술하면
간단히 새로운 내용을 추가할수 있음.
Javascript를 이용해서 객체 선택하기
id 속성값을 이용해서 객체 선택하기
document.getElementById("id속성값")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript를 이용해서 객체 선택하기</title>
</head>
<body>
<script type="text/javascript">
/* id 속성값을 이용해서 객체 선택하기
document.getElementById("id속성값")*/
window.onload = function() {
var str = "";
str += "<p id='jstitle'> javascript & jsp </p>";
str += "<img id='logoImg', src='./img/logo.png',";
str += "width='170', height='67'>";
document.body.innerHTML = str;
var titleNode = document.getElementById("jstitle");
titleNode.innerHTML = "JS & jsp";
var logoNode = document.getElementById("logoImg");
logoNode.setAttribute("src","./img/img02.jpg");
logoNode.setAttribute("width", 297);
logoNode.setAttribute("height", 124);
};
</script>
</body>
</html>
JS를 이용해서 객체 삭제하기
부모객체를 찾은 다음 부모객체에서 자식객체를 삭제한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS를 이용해서 객체 삭제하기</title>
</head>
<body>
<script type="text/javascript">
/* 부모객체를 찾은 다음 부모객체에서 자식객체를 삭제한다. */
window.onload = function() {
var str = "";
str += "<p id='jstitle'> javascript & jsp </p>";
str += "<img id='logoImg', src='./img/logo.png',";
str += "width='170', height='67'>";
document.body.innerHTML = str;
var titleNode = document.getElementById("jstitle");
titleNode.parentNode.removeChild(titleNode);
var logoNode = document.getElementById("logoImg");
logoNode.parentNode.removeChild(logoNode);
};
</script>
</body>
</html>JS를 이용해서 CSS 적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS를 이용해서 CSS 적용하기</title>
</head>
<body>
<script type="text/javascript">
/* style속성을 이용해서 css 적용 */
window.onload = function() {
var str = "";
str += "<p id='jsTitle'> Javascript & jsp </p>";
str += "<img id='logoImg', src='./img/logo.png'>";
document.body.innerHTML = str;
var titleNode = document.getElementById("jsTitle");
titleNode.style.fontSize = "3em";
titleNode.style.border = "1px, solid, #ff0000";
var logoNode = document.getElementById("logoImg");
logoNode.style.width = "179px";
logoNode.style.height = "67px";
};
</script>
</body>
</html>노드타입이 엘리멘트인 노드의 이름을 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>노드타입이 엘리멘트인 노드의 이름을 출력</title>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
//HTML 문서가 파싱되고 외부 컨텐츠 로딩이 완료되면
//웹 브라우저는 load 이벤트를 발생하는데,
//이벤트 헨들러로 등록된 함수가 실행됨.
window.onload = function() {
//id값이 "result"인 div테그를 찾아서
//innerHTML 속성(프로퍼티)에 html문자열 값을 저장함.
var result = document.getElementById('result');
result.innerHTML = printTegs(document);
};
//주어진 노드 객체의 모든 자식노드 중 노드타입이 엘리멘트인 노드의 이름을 출력함.
function printTegs(node) {
var tags = '';
// 노드타입이 엘리먼트인지를 검사
if(node.nodeType == Node.ELEMENT_NODE){
//nodeName 프로퍼티에 저장되어 있는 노드의 이름을 tags 변수에 저장함.
tags += node.nodeName + '<br/>';
}
// 자식노드 객체들에 대한 NodeList 객체를 저장함.
var children = node.childNodes;
// NodeList 객체의 length 프로퍼티 이용해 printTags함수를 재귀호출 함.
for (var i = 0; i < children.length; i++) {
//printTags함수에 NodeList객체에 담긴 자식노드 항목들을 전달하여
//실행된 결과를 tags 변수에 문자열 집합연산을 통해 저장함.
tags += printTegs(children[i]);
}
return tags;
};
</script>
</body>
</html>
자바스크립트를 이용하여 DOM 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
<label>
웹 사이트 : <br/>
<input type="text" id="siteName" size="50"/><br/>
</label>
<label>
URL : <br/>
<input type="text" id="url" size="50"/><br/>
</label>
<input type="button" id="btnAdd" value="추가"/>
<input type="button" id="btnCancel" value="취소"/>
</form>
<div id="result">
</div>
<script type="text/javascript">
/* 이벤트 : 마우스, 버튼, 양식 전송, 웹페이지 로드, 포커스...
이벤트 형식 :
이벤트 이름 이벤트 헨들러
----- -------------
xxx.onclick = function() {}
------- --
이벤트 속성 이벤트 연결
*/
window.onload = function() {
var btnAddElement = document.getElementById("btnAdd");
var btnCancelElement = document.getElementById("btnCancel");
btnAddElement.onclick = add;
btnCancelElement.onclick = cancel;
};
//버튼 btnAdd를 클릭하면 이함수를 호출함
function add() {
//id 속성값이 'siteName', 'url', 'result'인 엘리먼트를 찾아 참조함.
var siteNameElement = document.getElementById("siteName");
var urlElement = document.getElementById("url");
var resultElement = document.getElementById("result");
//<a></a> 새로운 Element 객체를 생성함.
var anchorElement = document.createElement('a');
//<a href="url value"></a>
anchorElement.href = urlElement.value;
//siteNameElement에 저장된 값으로 텍스트노드를 저장함.
var newTextNode = document.createTextNode(siteNameElement.value);
//<a href="url value"></a> 엘리먼트의 자식노드로 방금전에 만든 텍스트노드를 추가함.
//화면에 텍스트를 보이게끔함
anchorElement.appendChild(newTextNode);
//<br/> 엘리먼트를 생성함
var brElement = document.createElement("br");
//resultElement의 자식노드로 anchorElement와 brElement 추가함.
resultElement.appendChild(anchorElement);
resultElement.appendChild(brElement);
//추가버튼 누르면 비워짐
siteNameElement.value = '';
urlElement.value = '';
};
//버튼 btnCancel를 클릭하면 이함수를 호출함
function cancel() {
//id속성값이 'siteName', 'url' 인 엘리먼트를 찾아 참조함
var siteNameElement = document.getElementById("siteName");
var urlElement = document.getElementById("url");
//입력 필드를 초기화함.
siteNameElement.value = '';
urlElement.value = '';
};
</script>
</body>
</html>
