HTML DOM의 Location port 속성은 현재 URL에서 지정된 포트 번호를 반환하거나 새로 설정하는 데 사용됩니다. 만약 URL에 포트 번호가 명시적으로 지정되어 있지 않다면, 이 속성은 빈 문자열을 반환하며 포트 정보가 화면에 나타나지 않을 수 있습니다.
문법(Syntax)
Location port 속성의 기본 문법은 다음과 같습니다.
1. port 속성 값 반환하기
location.port
2. port 속성 값 설정하기
location.port = portNumber
예제(Example)
아래 예제를 통해 Location port 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다. 사용자가 입력한 URL에서 포트 번호를 추출하여 화면에 출력하는 간단한 폼 기반 데모입니다.
<!DOCTYPE html>
<html>
<head>
<title>Location port</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-port</legend>
<label for="urlSelect">현재 URL:</label>
<input type="url" size="30" id="urlSelect" value="https://www.example.com:2544/aboutUs/CTO.htm">
<input type="button" onclick="getport()" value="포트 가져오기">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var urlSelect = document.getElementById("urlSelect");
function getport(){
divDisplay.textContent = 'URL 포트: '+location.port;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'포트 가져오기' 버튼을 클릭하기 전 화면입니다. URL 입력란에 포트 번호(2544)가 포함된 주소가 미리 설정되어 있습니다.
'포트 가져오기' 버튼을 클릭한 후 화면입니다. 버튼 클릭 시 getport() 함수가 실행되어 현재 URL의 포트 번호인 2544가 div 영역에 출력됩니다.
정리
Location port 속성은 웹 개발에서 현재 페이지의 프로토콜, 호스트명과 함께 URL 구성 요소를 분석할 때 유용하게 활용됩니다. 특히 개발 환경과 운영 환경이 서로 다른 포트를 사용하는 경우, 자바스크립트로 조건 분기를 처리할 때 자주 사용됩니다. 참고로 기본 포트(HTTP는 80, HTTPS는 443)가 사용되는 경우에는 포트 번호가 URL에 명시되지 않으므로 이 속성은 빈 문자열을 반환한다는 점을 기억해 두면 좋습니다.