05_BOM(2)

05_BOM.pdf

0.48MB

---

 

 

window.onload()

• 윈도우 객체가 로드 완료되면 자동으로 onload에 설정되어 있는 함수를 실행

• 윈도우 객체 로드 완료 : 모든 태그가 화면에 나타난 때

 

window.onload = function(){

                        로직구성 또는 작성된 함수 호출

}

---

 

#bom.html

.onload함수 테스트를 위해서 <script></script>를 상단에 작성한다.

    <script>
        //script가 위에 위치하고 있기 때문에
        //html이 아직 실행되지 않아서 id"p3"을 호출하면 에러가 발생한다.
        
        var p3 = document.getElementById("p3");

        function func8() {
            p3.innerHTML = "버튼클릭!"
        }
    </script>


    <p id="p3"></p>
    <button onclick="func8();">onload</button>
    <hr>
    <hr>

[onload]버튼 onclick="func8();"

코드수정 (변수 p3 - window.onload사용)

    <script>
    
        //모든 load가 끝나고 나면 작동
        window.onload = function() {
            p3 = document.getElementById("p3");
        }

        function func8() {
            p3.innerHTML = "버튼클릭!"
        }

    </script>

    <p id="p3"></p>
    <button onclick="func8();">onload</button>
    <hr>
    <hr>

[onload]버튼 onclick="func8();"

---

 

 

 

 

screen 객체

client 운영체제 화면에 대한 속성값을 가지는 객체

속성	내용
height	화면 높이
width	화면 너비
availWidth	실제 화면에서 사용 가능한 너비
availHeight	실제 화면에서 사용 가능한 높이
colorDepth	사용 가능한 색상 수
pixelDepth	한 픽셀당 비트 수

---

#bom.html

    <style>
        .pp {
            border: 5px solid black;
            height: 150px;
            width: 400px;
            font-size: 70px;
            color: dodgerblue;
        }

    </style>

    <p id="p4" class="pp" style="font-size: 15px;"></p>
    <button onclick="func9();">screen객체</button>
    <hr>
    <hr>

[screen]버튼 onclick="func9();"

    <script>
        function func9() {
            var p4 = document.getElementById("p4");
            var str = "";
            str += "화면 높이값 : " + screen.height + "<br>";
            str += "화면 너비 : " + screen.width + "<br>";
            str += "실제 사용가능한 높이 : " + screen.availHeight + "<br>";
            str += "실제 사용가능한 너비 : " + screen.availWidth + "<br>";
            str += "사용 가능한 색상수 : " + screen.colorDepth + "<br>";
            str += "한 픽셀당 비트 수 : " + screen.pixelDepth;
            p4.innerHTML = str;
        }
    </script>

---

 

 

 

 

location 객체

• 브라우저의 주소표시줄(URL)과 관련된 객체

• 프로토콜 종류, 호스트 이름, 문서위치등의 정보를 가짐

메소드	내용
href	문서 URL 주소
reload()	현재 문서 새로고침
assign(‘주소’)	새로운 페이지 로드 → 뒤로가기 가능
replace(‘주소’)	현재페이지를 새 페이지로 교체 → 뒤로가기 불가능

---

    <button onclick="func12();">href()-네이버로</button>
    <button onclick="func13();">reload()-새로고침</button>
    <button onclick="func14();">assign()</button>
    <button onclick="func15();">replace()</button>
    <hr>
    <hr>

---

    <script>
        function func11() {
            location.hash = "bottom";
        }

        function func12() {
            location.href = "http://www.naver.com";
        }

        function func13() {
            location.reload();
        }

        function func14() {
            location.assign("http://www.naver.com");
        }

        function func15() {
            location.replace("http://www.naver.com");
        }
    </script>

---

 

 

 

navigator 객체

브라우저에 대한 정보를 가지는 객체

속성	내용
geolocation	위도와 경도 출력

---

    <p id="pp1"></p>
    <button onclick="func16();">위도경도 확인</button>

 

---

    <script>
        var lat;
        var lng;
        
        
        window.onload = function() {
            navigator.geolocation.getCurrentPosition(showYourLocation);
        }

        function showYourLocation(position) {
            lat = position.coords.latitude;
            lng = position.coords.longitude;
        }

        function func16() {
            console.log(lat);
            console.log(lng);
        }
    </script>