[ex18~22] screen, location, history, collection, link

대장쿵야 2023. 4. 25. 09:02

ex18

screen 객체
- window 객체의 자식
- 화면 정보 제공

//현재 보고 있는 화면의 크기 > 모니터 해상도 (배율에 따라 다르게 나옴)
console.log(window.screen.availWidth); //1536
console.log(window.screen.availHeight); //824

console.log(window.screen.colorDepth); //24bit color
console.log(window.screen.orientation); //ScreenOrientation {anger: 0, type: 'landscape-primary', onchange: null}

ex19

location 객체

- window의 자식

- 현재 창의 페이지(URL)와 관련된 조작

<body>
    <!-- ex19_location.html -->

    <form name="form1">
        <input type="button" name="btn1" value="확인">
    </form>

    <script>

        window.document.form1.btn1.onclick = m1;

        function m1() {

            //href > reference a hyperlink
            // console.log(window.location.href);

            //JavaScript + 페이지 이동
            // window.location.href = 'https://naver.com';

            // console.log(window.location.host); //127.0.0.1:5500
            // console.log(window.location.hostname); //127.0.0.1
            // console.log(window.location.protocol); //http:
            // console.log(window.location.port); //5500

            //window.location.reload(); //새로 고침(F5)
            // window.location.href = 'ex19_location.html'; //새로 고침

            // window.location.replace('https://naver.com');
            window.location.href = 'https://naver.com';


            //window.location.href > ***제일 많이 씀
            //window.location.reload()
            //window.location.replace()
        }
    </script>
</body>
</html>

ex20

history 객체

- window의 자식

- 브라우저의 탐색 기록(history) 영역 접근하는 객체

<body>
    <!-- ex20_history.html -->

    <form name="form1">
        <input type="button" name="btn1" value="뒤로 가기">
        <input type="button" name="btn2" value="앞으로 가기">
        <input type="button" name="btn3" value="2단계 뒤로 가기">
        <input type="button" name="btn4" value="2단계 앞으로 가기">
    </form>

    <script>

        //history 객체
        //- window의 자식
        //- 브라우저의 탐색 기록(history) 영역 접근하는 객체

        // window.document.form1.btn1 > window(만) 생략 가능

        document.form1.btn1.onclick = m1;
        document.form1.btn2.onclick = m2;
        document.form1.btn3.onclick = m3;
        document.form1.btn4.onclick = m4;

        //ex20 > 네이버 > 다음 > ex20 > 구글 > yes24
        function m1() {
            window.history.back(); //뒤로 가기
        }

        function m2() {
            history.forward(); //앞으로 가기
        }

        function m3() {
            history.go(-2);
        }

        function m4() {
            history.go(2);
        }

    </script>
</body>

ex21

내장 배열(컬렉션), collection
- 문서 코드를 기반으로 자동 생성되는 배열을 제공한다.

1. window.document.images > 문서내의 모든 <img> 태그
2. window.document.links > 문서내의 모든 <a href=""> 태그
3. window.document.anchors > 문서내의 모든 <a name=""> 태그
4. window.document.forms > 문서내의 모든 <form> 태그
5. window.document.forms[index].elements > 특정 폼태그 내의 모든 입력태그
6. window.document.forms[index].select.option > <option> 태그
7. window.document.all > 문서상의 모든 태그(비표준 MS)

<body>
    <!-- ex21_collection.html -->
    <h1>이미지</h1>

    <img src="images/catty01.png">
    <img src="images/catty02.png">
    <img src="images/catty03.png" name="cat3">
    <img src="images/catty04.png">
    <img src="images/catty05.png">

    <h1>링크+앵커</h1>
    <a href="#1" name="link1">링크1</a>
    <a href="#2">링크2</a>
    <a href="#3">링크3</a>
    <a name="a1">앵커1</a>
    <a name="a2">앵커2</a>

    <h1>폼</h1>
    <form name="form1">
        <input type="text" name="txt1">
        <input type="text" name="txt2">
        <input type="text" name="txt3">
    </form>
    
    <form>
        
    </form>

    <script>

        // console.log(document.images.length);

        // for (var i=0; i<5; i++) {
        //     console.log(document.images[i].src);
        //     //http://127.0.0.1:5500/javascript/images/catty01.png
        // }

        // document.images[0].width = 300;
        // document.images['cat3'].width = 300;

        // console.log(document.links.length);
        // console.log(document.links[0].href);
        // console.log(document.links['link1'].href);

        // console.log(document.anchors.length);
        // console.log(document.anchors[0].name);
        // console.log(document.anchors['a1'].name);

        // document.form1
        // document.forms[0]
        // console.log(document.forms.length);

        //form1태그의 자식태그
        // console.log(document.form1.elements.length);
        // document.form1.txt1.value = "홍길동";
        // document.form1.elements[1].value = '아무개';

        //all > 문서상의 모든 <form> + 입력 태그 + 이미지 + 링크
        //all > 문서상의 모든 태그
        console.log(document.all.length); //26

    </script>
</body>
</html>

ex22

Link

<body>
    <!-- ex22_link.html -->

    <h1>링크</h1>

    <a href="https://naver.com" name="link1">네이버</a>
    <hr>
    <button type="button" name="btn1">확인</button>

    <script>

        document.all.btn1.onclick = m1;

        function m1() {

            // link1의 속성값을 네이버 > 구글로 조작
            document.links['link1'].href = 'http://google.com';
            // 새창에서 열림
            document.links['link1'].target = '_blank';
            document.links['link1'].title = '구글로 이동합니다';

            //DOM
            // document.links['link1'].innerText = '구글'; //비표준(MS)
            document.links['link1'].textContent = '구글'; //표준

        }

    </script>

</body>
</html>