331. (javaScript) 자바스크립트 URL API : new URL 사용해 주소 host , path, protocol , port , params 정보 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. URL API : URL을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다
        -----------------------------------------
        2. host : URL의 도메인과 포트 정보 확인
        -----------------------------------------
        3. hostname : URL의 도메인 정보 확인
        -----------------------------------------
        4. pathname : '/'와 URL의 경로 확인
        -----------------------------------------
        5. port : URL의 포트 번호 확인
        -----------------------------------------
        6. protocol : URL의 프로토콜 정보 확인
        -----------------------------------------
        7. search : URL의 매개변수 문자열 정보 확인
        -----------------------------------------
        8. URLSearchParams : URL의 매개변수 파라미터 정보 확인
        -----------------------------------------
        9. username : 도메인 이름 이전에 지정된 사용자 이름 정보 확인
        -----------------------------------------
        10. hash : '#'과 URL의 프래그먼트 식별자 정보 확인
        -----------------------------------------
        11. 참고 사이트 : 
        https://developer.mozilla.org/en-US/docs/Web/API/URL_API
        https://developer.mozilla.org/ko/docs/Web/API/URL
        -----------------------------------------
        */



        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = async function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [URL 생성 실시]
            const url = new URL("https://www.testsite.com:8080/page/test.html?name=twok");


            // [URL 속성 값 확인 실시]
            let host = url.host;
            let hostname = url.hostname;
            let pathname = url.pathname;
            let protocol = url.protocol;
            let port = url.port;
            let search = url.search;


            // [로그 출력]
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [Result]");
            console.log("---------------------------------------");
            console.log("[host] : " + host);
            console.log("---------------------------------------");
            console.log("[hostname] : " + hostname);
            console.log("---------------------------------------");
            console.log("[pathname] : " + pathname);
            console.log("---------------------------------------");
            console.log("[protocol] : " + protocol);
            console.log("---------------------------------------");
            console.log("[port] : " + port);
            console.log("---------------------------------------");
            console.log("[search] : " + search);
            console.log("=========================================");
            console.log(""); 

        }; 

        
    </script>

 

---

[결과 출력]

 

=========================================
[window onload] : [Result]
---------------------------------------
[host] : www.testsite.com:8080
---------------------------------------
[hostname] : www.testsite.com
---------------------------------------
[pathname] : /page/test.html
---------------------------------------
[protocol] : https:
---------------------------------------
[port] : 8080
---------------------------------------
[search] : ?name=twok
=========================================

---