Screen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Screen</title>
<script type="text/javascript">
var w = window.screen.width; //해상도 너비
var h = window.screen.height;//해상도 높이
var aw = window.screen.availWidth; //실제사용가능한 너비
var ah = window.screen.availHeight; //실제 사용가능한 높이(작업표시줄 때문에 위 height보다 낮음)
var c = window.screen.colorDepth;//디스플레이 색품질 32비트 색상
//alert(w + " : " + h + "\r\n" + aw + " : " + ah + "\r\n" + c);
//자식창 -> 화면 중앙
window.open("Ex08_window.open.child.htm", "child", "width=200, height=200, left=" + (screen.width / 2 - 100) + ", top=" + (screen.height / 2 - 100));
</script>
</head>
<body>
</body>
</html>
Location
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location</title>
<script type="text/javascript">
//alert(location.href); //현재 URL
//자바스크립트 페이지 이동할떄 사용됨 ***** 페이지 이동은 이걸로 다한다.
//location.href = "Ex007_Screen.htm";
//새로고침
setInterval("location.reload()", 3000); //F5
</script>
</head>
<body>
</body>
</html>
History
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>history</title>
<script type="text/javascript">
function Prev()
{
//history.go(-1);//이전페이지
history.back();
}
function Next()
{
//history.go(+1); //다음 페이지
history.forward();
}
</script>
</head>
<body>
<input type="button" value="이전" onclick="Prev();" />
<input type="button" value="다음" onclick="Next();" />
<form action="Ex009_Ok.aspx">
<input type="text" />
<input type="submit" value="가입하기" />
</form>
</body>
</html>
History.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Ex009_Ok.aspx.vb" Inherits="Ex009_Ok" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Server</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
//데이터 입력 에러가 있다면
alert("데이터가 올바르지 않습니다.!!");
//이전페이지로 다시 돌아가기
//1. location.href
//2. history.back();
//location.href = "Ex009_history.htm";
history.back(); //회원가입 폼에서
</script>
</div>
</form>
</body>
</html>
Link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>link</title>
<script type="text/javascript">
function Test()
{
//1. BOM
//링크는 배열로 관리된다.
var link = document.links[0];
//var link = document.all.link1;//all - 익스플로러 전용
//alert(link.href);
link.href = "http://www.google.com";
link.title = "구글";
//BOM은 데이터 접근이 불가능하다(시작태그와 끝태그 사이의 내용은 불가능)
//DOM은 데이터 접근이 가능하다.
link.innerText = "구글로 이동";
}
</script>
</head>
<body>
<a href="http://www.naver.com" title="네이버">네이버로 이동</a><br />
<input type="button" value="테스트" name="link1" onclick="Test();" />
</body>
</html>
Image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>image</title>
<script type="text/javascript">
function Test()
{
var img1 = document.images["img1"];
//alert(img1.src);
//img1.width = 500;
//img1.border = 10;
//src 값을 가장 많이 건들인다.(다른이벤트와 함께 응용 한다.)
img1.src = "images/angry.png";
}
function Change1()
{
//이미지에 마우스가 오버되면 다른 이미지 변경
document.images["img2"].src = "images/cry.png";
}
function Change2()
{
//특성 자체가 변해서 원래 대로 돌아갈려면 이미지를 재정의 할수 밖에 없다.
document.images["img2"].src = "images/hehe.png";
}
function Change3(n)
{
if (n == 1)
{
document.images["img3"].src = "images/cry.png";
}
else
{
document.images["img3"].src = "images/hehe.png";
}
}
function Change4(img, n)
{
//document.images["img3"] this 자기 자신을 인자로 넘겨 버렸기 때문에 재검색할 필요가 없다.
//img
if (n == 1)
img.src = "images/cry.png";
else
img.src = "images/hehe.png";
}
function Change5(img, file)
{
img.src = "images/" + file;
}
function Change6(file)
{
//C# : object sender
//자연적으로 이벤트를 호출 하면
//함수하나로 몇개의 이미지를 전부 제어 할수 있게 된다.
event.srcElement.src = "images/" + file;
}
</script>
</head>
<body>
<img src="images/haha.png" alt="표정" name="img1" /><br />
<input type="button" value="테스트" onclick="Test();" />
<hr />
<img src="images/hehe.png" alt="표정" name="img2" onmouseover="Change1();" onmouseout="Change2();" />
<img src="images/love.png" alt="표정" name="img3" onmouseover="Change3(1);" onmouseout="Change3(0);" />
<img src="images/love.png" alt="표정" name="img4" onmouseover="Change4(this, 1);" onmouseout="Change4(this, 0);" />
<img src="images/love.png" alt="표정" name="img5" onmouseover="Change5(this, 'cry.png');" onmouseout="Change5(this, 'adore.png');" />
<img src="images/love.png" alt="표정" name="img6" onmouseover="Change6('cry.png');" onmouseout="Change6('adore.png');" />
<img src="images/cool.png" alt="표정" name="img7" onmouseover="Change6('cry.png');" onmouseout="Change6('adore.png');" />
</body>
</html>
