티스토리 뷰
객체
- 여러 변수/함수들을 주제별로 묶음
- 공통된 코드를 따로 정의시키고 필요한 것만 떼 코드를 재사용하는 방식(수정 최소화, 반복되는 코드없이 객체에 상속)
내장 객체(웹브라우저 객체, 사물, 업무, 주제)
=> 객체 특징, 속성(멤버변수), 객체 기능함수(멤버함수, 메서드)
내장 객체
window 내장객체(창 자체)
- location 내장 객체(주소 줄 입력)
- history 내장 객체(방문기록)
- document 내장객체(바디) -- form, image... / text, password, textarea / checkbox, radio
객체. 멤버변수 / 객체. 메서드( ) 호출
여기서 온점.은 주제 안에 있는 변수나 함수를 참조하겠다, 호출하겠다는 의미
window 내장객체
(window.)location.href 변수 주소줄 내용 저장
<!DOCTYPE html>
<html>
<title> window 내장객체 </title>
<script type="text/javascript">
function fun1(){
window.open("http://naver.com", "생략가능", "width=400, height=700, left=400, top=300");
}
function fun2(){
window.close();
}
</script>
<head>
</head>
<body>
<input type="button" value="창열기" onclick="fun1()">
<input type="button" value="창닫기" onclick="fun2()">
</body>
</html>
location 내장객체
location.href - 변수 주소줄 내용 저장
location.reload() - 함수( ) 새로고침
<!DOCTYPE html>
<html>
<head>
<title>location 내장객체</title>
<script type="text/javascript">
function fun1() { // href 주소줄 내용 저장하는 변수
// 주제(location)안에 들어있는 변수(href)
alert(location.href);
}
function fun2() {
// test.html페이지로 이동 메시지 출력, 주소줄 내용을 test.html 변경
alert("test.html 페이지로 이동");
location.href="test.html";
}
function fun3() {
// 새로고침 => 같은 페이지를 서버에서 새롭게 가져오기
location.reload();
}
</script>
</head>
<body>
<!-- html으로 주소 변경하는 방법 -->
<a href="test.html">하이퍼링크 html태그</a>
<!-- js에선 웹브라우저주소를 이렇게 변경-->
<input type="button" value="주소 내용" onclick="fun1()">
<input type="button" value="메시지 출력, 주소 내용변경" onclick="fun2()">
<input type="button" value="새로고침" onclick="fun3()">
</body>
</html>
history 내장객체
history.length 변수 방문한 개수 저장
history. back( ) - 함수( ) 뒤로 이동
history.forward( ) - 함수( ) 앞으로 이동
history.go(-1) - 함수 한 칸 뒤로 이동(양수는 앞)
<!DOCTYPE html>
<html>
<head>
<title> history 내장객체 </title>
<script type="text/javascript">
function fun1() {
alert("방문기록 개수 : " + history.length);
}
function fun2() {
alert("뒤로가기")
history.back();
}
function fun3() {
alert("앞으로가기")
history.forward();
}
function fun4() {
alert("2칸 뒤로 가기")
history.go(-2); // 음수 뒤, 양수 앞
}
</script>
</head>
<body>
<input type="button" value="방문개수" onclick="fun1()">
<input type="button" value="뒤로가기" onclick="fun2()">
<input type="button" value="앞으로가기" onclick="fun3()">
<input type="button" value="2칸 뒤로 가기" onclick="fun4()">
</body>
</html>'배운 것 기록 > web' 카테고리의 다른 글
| [html] table (0) | 2022.05.02 |
|---|---|
| [html] 특수 문자 태그, 목록 (0) | 2022.05.02 |
| [js] 자바스크립트 코드 넣는 방법 (0) | 2022.05.01 |
| [js] 변수, 함수 (0) | 2022.04.29 |
| jsp (0) | 2022.04.27 |
댓글