단비의 코딩 공부 blog

[Vanilla JS]study 8일차 - BOM 본문

javascript&jquery

[Vanilla JS]study 8일차 - BOM

황굽달 2023. 1. 27. 09:36

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
'javascript&jquery' Related Articles more