HTML에 자바스크립트를 추가하는 방법-프런트엔드 Q&A-php.cn

HTML에 자바스크립트를 추가하는 방법

WBOY

풀어 주다： 2023-05-21 09:04:07

원래의

2995명이 탐색했습니다.

JavaScript는 웹 개발에 널리 사용되는 객체 기반 및 이벤트 중심 스크립팅 언어입니다. 웹 페이지는 JavaScript를 통해 더욱 상호 작용적이고 동적으로 만들어질 수 있으며, 개발 중에 페이지의 기능을 구현하기 위해 HTML에 JavaScript 코드를 추가해야 하는 경우가 많습니다.

이 글에서는 내부 스크립트, 외부 스크립트, 인라인 스크립트를 포함하여 HTML에 JavaScript를 추가하는 방법을 소개합니다.

1. 내부 스크립트

내부 스크립트는 HTML 페이지에 직접 JavaScript 코드를 작성하는 것을 의미합니다. 이 방법은 간단한 대화형 효과와 같이 코드 양이 적은 상황에 적합합니다. 다음은 내부 스크립트를 사용하여 마우스를 놓았을 때 텍스트 색상을 변경하는 예입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部脚本示例</title>
</head>

<body>
    <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">鼠标放上去改变颜色</h1>
</body>

</html>

로그인 후 복사

이 예에서는 onmouseover 및 onmouseout 이벤트를 통해 HTML 요소 h1에 JavaScript 코드를 직접 추가하여 마우스를 놓거나 멀리 이동하면 텍스트 색상이 각각 빨간색과 검은색으로 변경됩니다.

2. 외부 스크립트

외부 스크립트는 JavaScript 코드를 별도의 파일에 저장한 후 HTML 페이지를 통해 소개합니다. 이 방법은 코드의 양이 많거나 여러 페이지를 공유해야 하는 상황에 적합하며 코드의 유지 관리성과 재사용성을 향상시킬 수 있습니다. 다음은 외부 JavaScript 파일을 HTML 페이지에 도입하는 예입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <script src="example.js"></script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

로그인 후 복사

이 예에서는 <script>标签的src 속성을 통해 외부 JavaScript 파일의 경로를 지정한 다음 파일의 JavaScript 코드를 HTML에 도입합니다. 파일을 생성하여 코드 재사용을 달성합니다.

3. 인라인 스크립트

인라인 스크립트는 HTML 태그의 속성에 JavaScript 코드를 작성하는 것을 의미합니다. 이 방법은 JavaScript를 사용하여 일부 특정 대화형 효과를 구현해야 하고 이 태그에서만 작동해야 하는 상황에 적합합니다. 다음은 인라인 스크립트를 사용하여 버튼 클릭 시 프롬프트 상자를 팝업시키는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内脚本示例</title>
</head>

<body>
    <button onclick="alert('Hello World!')">点击这里弹出提示框</button>
</body>

</html>

로그인 후 복사

이 예제에서는 onclick 이벤트를 통해 HTML 버튼 요소에 JavaScript 코드를 직접 추가하여 프롬프트 상자가 팝업되도록 했습니다. 버튼을 클릭했을 때.

위의 세 가지 방법을 사용하면 HTML에 JavaScript 코드를 추가하여 보다 대화형이고 동적인 웹 페이지를 만들 수 있습니다. 실제 개발에서는 필요에 따라 JavaScript 코드를 추가하는 해당 방법을 선택하고 코드의 가독성, 유지 관리성 및 재사용성에 주의하십시오.

위 내용은 HTML에 자바스크립트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!