브라우저 정보 객체
history 객체
- history 객체 속성
history 객체 속성에는 방문했던 URL 주소의 개수를 저장하는 length 속성이 있다.
브라우저의 이전 페이지 버튼 클릭 시 이전 페이지로 이동하는 현상
history.length 값
<body>
<script>
function historyCount()
{
var urlCount = history.length;
document.write("현재까지 방문 횟수는 " + urlCount + "군데 입니다." + "<p>");
}
</script>
<button onclick="historyCount()">방문 횟수</button>
</body>- history 객체 메소드
history 객체는 방문했던 웹사이트의 URL 정보를 저장하고 있음.
뒤로, 앞으로 버튼 클릭 시 해당 사이트로 이동 가능
go() 메소드의 경우 전달인자로 숫자 지정.
go(-1)이면 back()과 동일 효과, go(1)이면 forward()와 동일 효과.
<body>
<script>
function historyCount()
{
var urlCount = history.length;
document.write("현재까지 방문 횟수는 " + urlCount + "군데 입니다." + "<p>");
}
function goBack()
{
history.back();
}
function goForward()
{
history.forward();
}
</script>
<button onclick="historyCount()">방문 횟수</button>
<button onclick="goBack()">뒤로</button>
<button onclick="goForward()">앞으로</button>
</body>
navigatior 객체
브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체
- navigator 객체 속성
대표적인 navigator 객체의 속성 정보들
브라우저의 코드명을 표시하는 형태
<script>
document.write("appcodeName : " + navigator.appCodeName + "<p>");
document.write("appName : " + navigator.appName + "<p>");
document.write("appVersion : " + navigator.appVersion + "<p>");
document.write("platform : " + navigator.platform + "<p>");
document.write("userAgent : " + navigator.userAgent + "<p>");
</script>
screen 객체
screen 객체는 운영체제의 화면 크기 정보, 사용 색상 수 등의 정보들이 포함된다.
- 속성 정보 사용 형태
<script>
document.write("width : " + screen.width + "<p>");
document.write("height : " + screen.height + "<p>");
document.write("availwidth : " + screen.availWidth + "<p>");
document.write("availheight : " + screen.availHeight + "<p>");
for(var name in screen)
{
document.write(name + " : " + screen[name] + "<p>");
}
</script>
도큐먼트 객체
document 객체
- document 객체 속성
document 객체로 사용할 수 있는 속성
<body>
<script>
var colorValue;
function backColor()
{
colorObj = document.getElementById("colorValue");
document.bgColor = colorObj.value;
}
function textColor()
{
colorObj = document.getElementById("colorValue");
document.fgColor = colorObj.value;
}
</script>
<h1>배경색과 글자색을 변경합니다.</h1>
색상 입력 : <input type="text" id="colorValue" value="black"><p>
<button onclick="backColor()">배경색 변경하기</button>
<button onclick="textColor()">글자색 변경하기</button>
</body>
<body>
<script>
var colorValue;
function changeTitle()
{
docObj = document.getElementById("titleValue");
document.title = docObj.value;
}
function printInfo()
{
alert("문서가 최근 바뀐 날짜 : " + document.lastModified);
alert("현재 URL : " + document.URL);
alert("문서 제목 : " + document.title);
}
</script>
<h1>배경색과 글자색을 변경합니다.</h1>
색상 입력 : <input type="text" id="titleValue" value="새문서"><p>
<button onclick="changeTitle()">타이틀 변경하기</button>
<button onclick="printInfo()">문서 정보 출력하기</button>
</body>
- document 객체로 사용할 수 있는 메소드
팝업 윈도우는 새로운 문서이므로 document 객체의 메소드를 사용하여 문서를 작성한다.
<script>
var newWin;
function newOpen()
{
newWin = window.open('', '', 'width = 350, height = 600');
newWin.document.open();
newWin.document.write("<h1><center>베스트 셀러</center></h1>");
newWin.document.write("<img src='12.jpg' width=300 height=460>");
newWin.document.close();
}
function newClear()
{
newWin.document.open();
newWin.document.clear();
newWin.document.close();
}
</script>
<h1>새 문서 직접 만들기</h1>
<button onclick="newOpen()">새 문서 열기</button>
<button onclick="newClear()">문서 지우기</button>
참고
문자열 안에 문자열 출력하기
큰 따옴표("") 안에 또 따옴표("")를 써야할 경우 작은 따옴표('')를 사용
반대의 경우에는 따옴표를 바꾸어 써주면 된다.
anchor 객체
-
anchor 객체를 사용하는 형태
document 객체의 하위 객체이다.
anchor 정보는 배열 형태로 저장되어야 한다.
<a href="#">와<a name="">같이 서로 지정된 링크에 대한 정보를 가지고 있는 객체들
-
anchor 객체의 속성
<a href="#MFC">MFC 시스템 프로그램</a><p>
<a href="#API">win32 기반 API 프로그래밍</a><p>
<a href="#C++">C++ 프로그래밍</a><p>
<hr>
<br><br><br><br><br><br><br><br>
<a name="MFC">MFC 시스템 프로그래밍</a><p>
<img src="mfc.jpg"><br>
<a name="API">win32 기반 API 프로그래밍</a><p>
<img src="api.jpg"><br>
<a name="C++">C++ 프로그래밍</a><p>
<img src="c++.jpg"><br>
<script>
document.write("anchor 개수 : " + document.anchors.length + "<br>");
for(var i = 0; i < document.anchors.length; i++)
{
document.write(document.anchors[i].name + "<br>")
}
</script>
link 객체
-
link 객체를 사용하는 형태
document 객체의 하위 객체이다.
link 정보는 배열 형태로 저장된다.
-
link 객체의 속성
image 객체
-
image 객체를 사용하는 형태
image 객체는<img>태그와 같은 이미지 요소들과 연관이 있다.
<img>태그와 같이 문서 상에 삽입된 이미지를 모두 탐색한다.
<image>정보는 배열 형태로 저장된다.
-
image 객체의 속성
<h1><center>베스트 셀러</center></h1>
<img src="mfc.jpg">
<img src="api.jpg">
<img src="c++.jpg">
<hr>
<script>
document.write("image 개수 : " + document.images.length + "<br>");
for(var i = 0; i < document.images.length; i++)
{
document.images[i].border = "10";
document.images[i].width = "210";
document.images[i].height = "300";
}
for(var i = 0; i < document.images.length; i++)
{
document.write(document.images[i].border + "<br>");
document.write(document.images[i].width + "<br>");
document.write(document.images[i].height + "<br>");
}
</script>
폼 객체
폼 객체란
폼 형태는 대표적으로 회원가입 페이지를 보면 된다.
자바스크립트를 이용하여 각 필드의 요소들을 제어할 수 있다.
-
폼 객체
폼 객체는 document 객체의 하위에 있는 내장 객체로써 기존<form>태그를 자바스크립트로 정의한 것이다.
document.폼 이름.속성(메소드) -
폼 객체의 계층 구조도
도큐먼트 객체 하위에 폼 객체가 위치. -
폼 객체의 속성
name, method, action, target은 각각 <form> 태그 안에서 사용되는 속성들
elements는 요소들의 전체 리스트로 배열 형식
length는 전체 리스트의 개수
<form name = "test">
<input type="button" name="btn1" value="첫번째 버튼">
<input type="button" name="btn2" value="두번째 버튼">
</form>
<script>
document.write("name : " + document.test.name + "<p>");
document.write("method : " + document.test.method + "<p>");
document.write("length : " + document.test.length + "<p>");
document.write("elements[0].name : " + document.test.elements[0].name + "<p>");
document.write("elements[1].name : " + document.test.elements[1].name + "<p>");
document.write("elements[0].value : " + document.test.elements[0].value + "<p>");
document.write("elements[1].value : " + document.test.elements[1].value + "<p>");
</script>
method를 설정해주지 않으면 기본적으로 get방식이 채택된다.
알고 쓰자!