HTML에서 js를 호출하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML에서 js를 호출하는 방법

May 15, 2023 pm 04:42 PM

HTML이 JS를 호출하는 방법

HTML(Hypertext Markup Language)과 JS(JavaScript)는 웹 개발에서 가장 기본적이고 중요한 두 가지 기술입니다. HTML은 주로 웹페이지의 구조와 레이아웃을 담당하고, JS는 주로 웹페이지의 기능과 상호작용을 담당합니다. 웹 개발에서는 HTML에서 JS를 호출하여 양식 유효성 검사, 콘텐츠의 동적 로딩 등과 같은 웹 페이지의 다양한 기능을 구현해야 하는 경우가 많습니다. 이 기사에서는 HTML이 JS 메소드를 호출하는 방법을 소개합니다.

HTML에서 JS를 호출하는 세 가지 방법

HTML에서 JS를 호출하는 세 가지 주요 방법은 인라인, 내부 및 외부입니다.

Inline

Inline은 JS 코드를 HTML 태그에 직접 삽입하는 것입니다. 예:

&lt;button onclick=&quot;alert('你点击了按钮')&quot;&gt;点击我&lt;/button&gt;

로그인 후 복사

이 버튼을 클릭하면 onclick 속성으로 인해 프롬프트 상자가 나타납니다. 실행되는 것은 임베디드 JS 코드입니다. 이 방법은 간단하지만 유지 관리에 도움이 되지 않으며, 코드 양이 많으면 매우 번거로워집니다. onclick属性执行的是一段内嵌的JS代码。这种方式虽然简单，但是不利于维护和管理，当代码量较大时，会变得非常繁琐。

内部式

内部式是将JS代码写在HTML文档的<head>标签或<body>标签中的<script>标签中，例如：

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;内部式&lt;/title&gt;
    &lt;script&gt;
      function test() {
        alert('你点击了按钮');
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button onclick=&quot;test()&quot;&gt;点击我&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

这个例子中，我们将JS代码写在了<head>标签中，并定义了一个名为test的函数。然后在HTML中的按钮标签中，通过onclick调用test函数。这种方式比内联式更易于维护和管理。

外部式

外部式是将JS代码放在独立的JS文件中，然后在HTML文档中通过<script>标签引入。假设我们将JS代码写在一个名为test.js的文件中，那么在HTML中的调用方式如下：

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;外部式&lt;/title&gt;
    &lt;script src=&quot;test.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button onclick=&quot;test()&quot;&gt;点击我&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

这样，HTML会向服务器请求test.js

내부 스타일은 JS 코드를 <head> 태그 또는 에 작성하는 것입니다. HTML 문서 <script> 태그 예:

이 예에서는 태그에 JS 코드를 작성하고 A 함수를 정의합니다. 테스트로 명명되었습니다. 그런 다음 HTML의 버튼 태그에서 onclick을 통해 test 함수를 호출합니다. 이 접근 방식은 인라인보다 유지 관리가 더 쉽습니다.

<script>

test.js

test.js 파일을 열고 그 안에 있는 JS 코드를 실행합니다. 이 방법은 내부 방법보다 모듈화되고 분리되어 있으며 유지 관리성이 더 높습니다. 🎜🎜요약🎜🎜 HTML이 JS를 호출하는 세 가지 방법에는 모두 장점과 단점이 있습니다. 인라인 스타일은 간결하고 명확하지만 유지 관리에 도움이 되지 않습니다. 내부 스타일은 유지 관리가 더 쉽지만 코드가 너무 복잡해질 수 있습니다. 외부 스타일은 모듈식이며 분리되어 있으며 유지 관리 가능성이 가장 높습니다. 🎜🎜실제 응용 프로그램에서는 보다 효율적이고 안정적이며 유지 관리하기 쉬운 코드를 달성하기 위해 프로젝트의 실제 상황에 따라 가장 적절한 호출 방법을 선택해야 합니다. 🎜

위 내용은 HTML에서 js를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.