도큐먼트 열기
- 윈도우에 출력된 문서요소를 제거하고 새로운 문서를 받아들일 준비를 의미
- 현재 브라우저 윈도우 상의 HTML 문서를 지우고 정상적으로 새로운 문서를 출력하기 위한 것
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
var win = null;
function showHTML() {
//win이 널 값이거나 win을 닫아줬을 때, 새 창을 열어준다.
//win.closed는 창을 닫았을 때도 계속해서 사용하기 위함으로써 주었다.
if (win == null || win.closed)
win = window.open("", "outWin", "width=500, height=400, scrollbars=yes");
//open()메소드는 현재 도큐먼트에 관한 모든 정보를 가진 객체
win.document.open();
//write()메소드를 이용해 HTML문서를 출력
win.document.write(srcTxt.value);
//close()를 하지 않을 경우 경우에 따라서 write()를 이용한 HTML텍스트가 출력되지 않을 수 있다.
win.document.close();
}
</script>
</head>
<body bgcolor="yellow">
<h3>간단한 html 문서 연습장 만들기</h3>
<hr>
아래의 텍스트 창에 html문서를 작성해 보세요
그리고 아래 버튼을 클릭해 보세요
새 창에 아래에 작성한 html 문서를 출력할 것입니다.<p>
//이 textarea가 html문서의 출력된다
<textarea id="srcTxt" rows=15 cols=50></textarea><p>
<!-- 버튼의 또 다른 사용방법 -->
<button onclick="showHTML()">HTML문서 출력하기</button>
</body>
</html>
innerHTML, outerHTML, innerText, outerText 비교하는 예
innerHTML - 모든 HTML 텍스트 스트링을 가진다. 가장 많이 쓰인다.
outerHTML - 전체 HTML태그를 포함하는 텍스트 스트링을 가진다
innerText - 출력된 문서상의 텍스트 정보만을 지칭, 객체 내부의 텍스트 스트링
outerText - 브라우저 상에서 객체 전체가 출력된 문서 공간의 텍스트
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>innerHTML, outerHTML, innerText, outerText 비교하는 예</title>
</head>
//html열자마자 textarea에 div값이 출력 된다
<body bgcolor="yellow" onload="srcTxt.value=objDiv.outerHTML">
<h3>innerHTML, innerTEXT, outerHTML, outerTEXT 비교하는 예</h3>
<hr>
<div id="objDiv" style="background-color:cyan">
<p>아래 링크와 버튼에서 액세스 되는 <b>div</b> 객체 입니다.</p>
</div>
<p>위의 태그는 다음과 같습니다.</p><br>
<textarea id="srcTxt" rows="5" cols="50"></textarea>
<hr>
다음 버튼을 클릭하면 위의 div객체 내의 속성을 보여줍니다.<br>
<a href = "javascript:alert(objDiv.innerHTML)">div의 innerHTML</a><br>
<a href = "javascript:alert(objDiv.outerHTML)">div의 outerHTML</a><br>
<a href = "javascript:alert(objDiv.innerText)">div의 innerText</a><br>
<a href = "javascript:alert(objDiv.outerText)">div의 outerText</a><br>
<hr>
아래 창에 입력하여 변경하면 위의 div객체의 내용이 변하는 것을 확인할 수 있습니다.<br>
변경하고자 하는 innerTEXT를 입력하세요<br>
<input type="text" id="inText" value="테스트 innerText">
//div에 innerText로 textbox의 값을 넣어준다
<button onclick = "objDiv.innerText=inText.value">변경</button><br>
변경하고자 하는 outerTEXT를 입력하세요<br>
<input type="text" id="outText" value="테스트 outerText">
//div에 outerText로 textbox의 값을 넣어준다
<button onclick = "objDiv.outerText=outText.value">변경</button>
</body>
</html>
메뉴에 마우스를 올리면 메뉴가 선택된 상태로 변하는 예
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//이미지 배열에 이미지를 넣어준다.
//마우스 오버하면 해당 이미지로 변한다
imgOver = new Array(3)
imgOver[0] = new Image();
imgOver[0].src = "apple.gif";
imgOver[1] = new Image();
imgOver[1].src = "banana.gif";
imgOver[2] = new Image();
imgOver[2].src = "strawberry.gif";
//오버하지 않았을 때 이미지
imgOut = new Array(3)
imgOut[0] = new Image();
imgOut[0].src = "strawberry.gif";
imgOut[1] = new Image();
imgOut[1].src = "apple.gif";
imgOut[2] = new Image();
imgOut[2].src = "banana.gif";
function mOver(n) {
document.images[n].src = imgOver[n].src
}
function mOut(n) {
document.images[n].src = imgOut[n].src
}
</script>
</head>
<body>
<center>
<table border=0>
<tr>
<td width="200" height="80" align=center>
<img src="strawberry.gif" onmouseover="mOver(0)" onmouseout="mOut(0)">
</td>
</tr>
<tr>
<td width="200" height="80" align=center>
<img src="apple.gif" onmouseover="mOver(1)" onmouseout="mOut(1)">
</td>
</tr>
<tr>
<td width="200" height="80" align=center>
<img src="banana.gif" onmouseover="mOver(2)" onmouseout="mOut(2)">
</td>
</tr>
</table>
</center>
</body>
</html>
'Study > JavaScript' 카테고리의 다른 글
| [javaScript] Dom Script (0) | 2019.05.16 |
|---|---|
| [javaScript] Document 실습 (0) | 2019.05.16 |
| [javaScript] Form (0) | 2019.05.16 |
| [javaScript] 정규표현식, 이벤트, 이벤트핸들러, 이벤트 버블 실습 (0) | 2019.05.16 |
| [javaScript] 정규 표현식, 이벤트, 이벤트 핸들러, 이벤트 버블 (0) | 2019.05.16 |
