# Location 객체

## URL 가져오기

* 윈도우의 문서 URL을 변경하거나 분서의 위치와 관련해서 다양한 정보를 얻을 수 있음
* location.href : 현재 윈도우의 URL 알아내기
* URL의 의미에 따라서 별도의 프로퍼티도 제공(location.protocol, location.host 등)
* <http://testurl.org:8080/home/1?id=123#hash>
  * http : protocol
  * testurl.org : host
  * :8080 : port
  * /home/1 : pathname
  * ?id=1 : search
  * \#hash : 북마크

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1>Location 객체</h1>
  <h2>url전체(href)</h2>
  <script> 
    document.write(location.href);
  </script>
  <h2>protocol</h2>
  <script>
    document.write(location.protocol);
  </script>
  <h2>host</h2>
  <script>
    document.write(location.host);
  </script>
  <h2>port</h2>
  <script>
    document.write(location.port);
  </script>
  <h2>pathname</h2>
  <script>
    document.write(location.pathname);
  </script>
  <h2>search</h2>
  <script>
    document.write(location.search);
  </script>
  <h2>hash</h2>
  <script>
    document.write(location.hash);
  </script>
</body>
</html>
```

{% embed url="<https://codepen.io/hyeongkyupark/pen/dyvjyZg>" %}

## URL 변경하기

* location.href 또는 location에 값을 대입하면 현재 웹페이지의 주소를 변경함
* location.reload() : 페이지 새로고침

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <input type="button" value="change" onclick="fn_clickHandler('change')">
  <input type="button" value="reload" onclick="fn_clickHandler('reload')">
  <script>
    function fn_clickHandler(value) {
      if(value === 'change') {
      // url 이동
        location.href = 'https://www.naver.com/'
      } else {
      // 페이지 새로고
        location.reload();
      }
    }
  </script>
</body>
</html>
```

{% embed url="<https://codepen.io/hyeongkyupark/pen/rNyrNrY>" %}
