자바스크립트 하이퍼링크 사용 방법
하이퍼링크는 서로 다른 페이지, 서로 다른 웹사이트를 연결하는 웹페이지의 공통 요소이며, 자바스크립트는 웹페이지에 동적인 인터랙티브 효과를 추가하는 데 편리함을 제공합니다. 이 둘을 결합하면 웹페이지를 더욱 역동적이고 실용적으로 만들 수 있습니다. 이 기사에서는 JavaScript 하이퍼링크의 사용법과 구현을 자세히 소개합니다.
1. 기본 지식
HTML에서 하이퍼링크는 아래와 같이 태그를 사용하여 정의됩니다.
그 중 href 속성은 하이퍼링크가 가리키는 URL을 식별합니다. 현재 페이지의 앵커 지점에 대한 하이퍼링크를 가리켜야 하는 경우 아래와 같이 "#" 기호와 앵커 이름을 URL로 사용할 수 있습니다.
2. JavaScript 하이퍼링크 구현 방법
경우에 따라 하이퍼링크 점프를 금지하고 실행만 해야 하는 경우도 있습니다. 일부 JavaScript 코드. 이때 PreventDefault() 메소드를 사용하여 기본 점프 동작을 방지할 수 있습니다. 예:
위 코드에서 onclick 이벤트의 event.preventDefault() 문 핸들러 함수는 기본 점프 전송을 방지할 수 있으며 나중에 JavaScript 코드를 추가할 수 있습니다.
어떤 경우에는 사용자 작업이나 데이터 상태에 따라 점프 링크를 동적으로 생성하기 위해 하이퍼링크의 href 속성을 동적으로 수정해야 할 수도 있습니다. 예:
<script></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">document.querySelector("#myLink").addEventListener("click", function(){ var targetUrl = "http://www.example.com?id=" + getUserId(); this.href = targetUrl; });</pre><div class="contentsignin">로그인 후 복사</div></div> <p></script>
위 코드에서는 addEventListener() 메서드를 통해 클릭 이벤트 핸들러가 myLink 하이퍼링크에 추가됩니다. 사용자가 링크를 클릭하면 JavaScript 코드는 현재 사용자 ID를 기반으로 대상 URL을 가져오고 myLink 하이퍼링크의 href 속성을 대상 URL로 설정합니다.
경우에 따라 새 창에서 하이퍼링크를 열어야 하는 경우가 있습니다. 이때 window.open() 메서드를 사용하여 메서드에 대상 URL과 미리 설정된 창 특성을 전달할 수 있습니다. 예:
위 코드에서 onclick 이벤트 핸들러가 호출됩니다. window.open() 메소드에 대상 URL과 _blank 속성을 전달하여 링크를 새 창에서 엽니다.
어떤 경우에는 페이지의 기준점으로 이동하기 위해 하이퍼링크를 클릭한 후 페이지 스크롤 위치를 변경해야 합니다. 이때 하이퍼링크의 href 속성에 앵커 이름을 지정하고 JavaScript 코드를 추가하여 페이지의 스크롤 위치를 변경할 수 있습니다. 예:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
