Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- git
- jQuery
- JS
- github
- 코딩공부
- 팝업레이어
- asp
- IP차단
- 프론트앤드키워드
- JSP
- 바닐라 자바스크립트
- 웹표준
- SQLD후기
- 바닐라스크립트
- Slide
- 마우스커서
- 애니메이션
- 웹접근성
- 바닐라자바스크립트
- sqld
- 텍스트조절
- 웹개발키워드
- 기초
- VANILLA
- TweenMax.js
- CSS
- SQL
- 로또 회차
- sqld52회차
- Python
Archives
- Today
- Total
단비의 코딩 공부 blog
[Vanilla JS]study 8일차 - BOM 본문
1. window 객체의 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<style>
body{height: 3000px;}
</style>
<script>
//window : 창 객체
//모든 객체는 속성과 메서드를 갖고 있다.
//속성문법 : 객체명.속성명
//메서드문법 : 객체명.메서드명()
//innerWidth : 스크롤바나 제목표시줄 등은 제외한 영역
//outerWidth : 스크롤바나 제목표시줄 등은 포함한 영역
var w1 = window.innerWidth;
var w2 = window.outerWidth;
document.write('innerWidth : ' + w1 + '<br>');
document.write('outerWidth : ' + w2 + '<br>');
</script>
</head>
<body>
</body>
</html>
2. window객체의 메서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<style>
body{height: 3000px;}
</style>
<script>
//window : 창 객체
//모든 객체는 속성과 메서드를 갖고 있다.
//속성문법 : 객체명.속성명
//메서드문법 : 객체명.메서드명()
//open(url,name,specs,replase) : 기본적으로는 새창을 여는 매서드
//1. url : 새창으로 띄우고싶은 html의 주소
//2. name : url을 어디에 띄우고 싶은지 작성
// - _blank : 기본값, 새창으로 띄우기
// - _self : 현재 창으로 띄우기
// - _parent : 아이프레임의 부모가 되는 페이지에 띄우기
//3. specs : 창에 대한 특징 기술
// - width : 새창의 가로폭 지정
// -height : 새창의 높이 지정
//4. replase : 현재페이지의 주소 내역(history)를 가져가면 true, 그렇지 않으면 false
window.open('https://ezenac.co.kr','','width=300,height=300');
</script>
</head>
<body>
</body>
</html>
3. window객체의 메서드2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<style>
body{height: 3000px;}
</style>
<script>
//window : 창 객체
//모든 객체는 속성과 메서드를 갖고 있다.
//속성문법 : 객체명.속성명
//메서드문법 : 객체명.메서드명()
//moveTo(x,y) : 창을 절대적 위치로 이동
//moveBy(x,y) : 칭을 상대적으로 위치 이동
var w1 = window.open('','','width=300,height=300');
var w2 = window.open('','','width=300,height=300');
w1.moveTo(10,10);
w2.moveTo(10,00);
</script>
</head>
<body>
</body>
</html>
4. window객체의 매서드3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<style>
body{height: 3000px;}
</style>
<script>
//window : 창 객체
//모든 객체는 속성과 메서드를 갖고 있다.
//속성문법 : 객체명.속성명
//메서드문법 : 객체명.메서드명()
//moveTo(x,y) : 창을 절대적 위치로 이동
//moveBy(x,y) : 칭을 상대적으로 위치 이동
//resizeTo(w,h) : 창을 절대적 크기로 변환
//resizeBy(w,h) : 창을 상대적 크기로 변환
//close() : 창을 닫는 메서드
//scrollTo() : 창의 스크롤바 위치를 절대적으로 이동
//scrollBy() : 창의 스크롤바 위치를 상대적으로 이동
var w1 = window.open('','','width=300,height=300');
w1.moveTo(10,10);
//1초마다 위치 이동
setInterval(function(){
w1.moveBy(10,10);
}, 1000);
</script>
</head>
<body>
</body>
</html>
5. screen객체의속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//screen : 운영체제의 화면 객체
//메서드는 없고 속성만 존재
//새창을 300X300짜리를 띄운 후 5초뒤에 풀스크린으로 처리
var win = window.open('','','width=300,height=300');
win.moveTo(0,0);
setTimeout(function(){
var w = screen.width; //사용자가 화면에 해상도 가로폭 담는 변수
var h = screen.height; //사용자 화면의 해상도 높이 담는 변수
win.resizeTo(w,h);
}, 5000);
</script>
</head>
<body>
</body>
</html>
6. location객체의속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//location : 주소표시줄 객체
//모든 객체는 속성과 메서드를 갖고 있음
//속성문법 : 객체명.속성명
// 객체명.속성명 = 값;
//메서드문법 : 객체명.메서드명();
//href : 현재 페이지 주소를 반환하는 속성
alert(location.href);
//5초뒤에 네이버로 이동
setTimeout(function(){
location.href = 'https://www.naver.com'
}, 5000)
</script>
</head>
<body>
</body>
</html>
7. location객체의메서드1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//location : 주소표시줄 객체
//모든 객체는 속성과 메서드를 갖고 있음
//속성문법 : 객체명.속성명
// 객체명.속성명 = 값;
//메서드문법 : 객체명.메서드명();
//assign(url) : 주소표시줄을 매개변수값으로 변경하는 메서드
//5초뒤에 네이버로 주소이동
setTimeout(function(){
location.assign('https://www.naver.com');
}, 5000);
</script>
</head>
<body>
</body>
</html>
8. location객체의메서드2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//location : 주소표시줄 객체
//모든 객체는 속성과 메서드를 갖고 있음
//속성문법 : 객체명.속성명
// 객체명.속성명 = 값;
//메서드문법 : 객체명.메서드명();
//reload() : 주소를 새로 고침하는 메서드
//1초마다 [n]초가 지났습니다. 라는 문구를 출력하고 10초뒤 새로고침하시오.
var num = 1;
setInterval(function(){
document.write(num + '초가 지났습니다.<br>');
num++ //1초씩 증가
}, 1000);
setTimeout(function(){
location.reload(); //새로고침 처리
}, 10001)
</script>
</head>
<body>
</body>
</html>
9. navigator객체의속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//navugator : 브라우저 정보객체
//appName : 브라우저의 이름반환
alert(navigator.appName);
//userAgent : 사용자의 에이전트 헤더값을 반환
alert(navigator.userAgent);
</script>
</head>
<body>
</body>
</html>
10. navigator객체의 메서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//javaEnabled() : 브라우저가 java를 사용할 수 있는지를 true/false로 반환
alert(navigator.javaEnabled());
</script>
</head>
<body>
</body>
</html>
11. 모바일기기인식코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
var mobile_keys = ['iPhone', 'Android','SAMSUNG'];
//모바일 기기명이 맞는지 한개씩 확인
for(var i in mobile_keys){
//match(문자열) : String객체의 메서드 - 매개변수의 문자열을 갖고 있다면 true를 반환
//브라우저 에이전트 정보에 mobile_keys의 값이 하나라도 있다면
if(navigator.userAgent.match(mobile_keys[i])){
alert('모바일기기에서 접속하셨습니다.');
}
}
</script>
</head>
<body>
</body>
</html>
12. history객체의 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//history객체 : 주소내역객체
//length : 현재 브라우저 창의 기록목록에 있는 url의 개수
alert(history.length);
</script>
</head>
<body>
</body>
</html>
13. history객체의 매서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//history객체의 메서드
//1. back() : 기록목록 중 이전목록으로 이동
//2. forward() : 기록목록 중 다음목록으로 이동
//3. go(n) : 기록목록을 n번째로 찾음 - 음수를 쓰면 이전으로, 양수를 쓰면 다음으로 처리
</script>
</head>
<body>
</body>
</html>
'javascript&jquery' 카테고리의 다른 글
[Vanilla JS]study 10일차 - DOM2 (0) | 2023.03.10 |
---|---|
[Vanilla JS]study 9일차 - DOM (0) | 2023.03.06 |
[Vanilla JS]study 7일차 - 기본내장객체 로또생성하기 (0) | 2023.01.11 |
[jquery]버튼 클릭 시 텍스트 크기 조절 (0) | 2022.12.23 |
[Vanilla JS]study 6일차 - 객체와 기본내장객체 (0) | 2022.12.09 |