[JS] Location 객체

16542 단어 JavaScriptJavaScript

링크의 정보 가져오기

Location 객체를 통해 다양한 것들을 할 수 있다.
아래의 코드를 통해 protocol, host, port, pathname, search, hash의 정보를 가져올 수 있다.

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <h1>console.log()</h1>
        <p>개발자 도구를 이용하여 console를 확인하세요. (Chrome: F12)</p>
        <p><input type="button" value="protocol" onclick="protocol()"></p>
        <p><input type="button" value="host" onclick="host()"></p>
        <p><input type="button" value="port" onclick="port()"></p>
        <p><input type="button" value="pathname" onclick="pathname()"></p>
        <p><input type="button" value="search" onclick="search()"></p>
        <p><input type="button" value="hash" onclick="hash()"></p>

        <script>
            function protocol(){
                console.log(location.protocol);
            }

            function host(){
                console.log(location.host);
            }

            function port(){
                console.log(location.port);
            }

            function pathname(){
                console.log(location.pathname);
            }

            function search(){
                console.log(location.search);
            }

            function hash(){
                console.log(location.hash);
            }
        </script>
    </body>
</html>

예제 코드 결과

search는 링크 뒤에 오는 ?id=~~~와 같은 정보를 가져온다.
hash는 #앵커링크의 정보를 가져온다.

하이퍼링크, 새로 고침

location 객체를 통해 페이지를 이동시킬 수도 있고, 새로 고침할 수도 있다.

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <input type="button" value="Potato-Y GitHub로 이동하기" onclick="href()">
    <input type="button" value="새로고침 하기" onclick="reload()">
    <script>
        function href() {
            //.href를 입력하지 않아도 작동한다.
            location.href = 'https://github.com/Potato-Y';
        }

        function reload() {
            location.reload();
        }
    </script>

</body>

</html>
Java의 정적 바인딩 및 동적 바인딩 이해
알고리즘 완주하지 못한 선수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage