HTML에서 JS를 사용하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에서 JS를 사용하는 방법

coldplay.xixi

Mar 04, 2021 pm 02:18 PM

htmljavascript

HTML에서 js를 사용하는 방법: 1. HTML에 JavaScript를 포함하려면 [<script>]를 사용하고, 외부 파일을 포함하려면 [<script>]를 사용할 때 src 속성을 사용합니다. 2. 모든 [<script>; ] 요소 모두 페이지 요소 내에 배치되어야 합니다. </script>

HTML에서 JS를 사용하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML 버전 4.01, DELL G3 컴퓨터.

html에서 js를 사용하는 방법:

1. <script> 요소 </script>

HTML에 JavaScript를 포함하려면 <script></script>를 사용하세요. <script></script>嵌入JavaScript

HTML 4.01 为

<script></script>定义了下列 6 个属性。

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
language：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript、JavaScript1.2或 VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是 text/javascript。实际上，服务器在传送 JavaScript 文件时使用的

MIME 类型通常是 application/x–javascript，但在type中设置这个却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：

application/javascript和application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧还是

text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

使用<script></script>元素的方式有两种：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript文件。在使用<script></script>元素嵌入JavaScript代码时，只须为<script></script>指定type属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：

<script type="text/javascript">
function fun(){
    alert("hello")
}
</script>

包含在<script>元素内部的 JavaScript 代码将被从上至下依次解释。</script>

在解释器对<script>元素内部的所</script>

有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入 JavaScript 代码时，记住不要在代码中的任何地方出现</script>字符串。如果必须出现，请使用/转义符

在使用<script>包含外部文件时使用src属性。在解析外部文件时（包括下载）会停止页面的处理。在带有src属性的<script>中间不能再嵌入其他代码，否则不会执行。</script>

2、标签的位置

按照传统的做法，所有<script>元素都应该放在页面的元素中，如:</script>

这样做或是浏览器在所有的js文件都下载解析和执行完成后才开始显示页面（浏览器遇到body才会开始呈现内容）

为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引

用放在元素中页面内容的后面，如下例所示：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

3、文档模式

doctype

混杂模式

标准模式

准标准模式

4、

这个元素可以包含能够出现在文档

中的任何 HTML 元素——<script>元素除外。包含<p>在<code><noscript>HTML 4.01은 <p><code ><script>는 다음 6가지 속성을 정의합니다. <p><ul style="list-style-type: disc;"><li><code>비동기: 선택 사항. 스크립트를 즉시 다운로드해야 하지만 다른 리소스를 다운로드하거나 다른 스크립트가 로드될 때까지 기다리는 등 페이지의 다른 작업을 방해해서는 안 된다는 것을 나타냅니다. 외부 스크립트 파일에만 유효합니다. 🎜<li>🎜<code>문자 집합: 선택 사항. src 속성을 통해 지정된 코드를 나타내는 문자 집합입니다. 이 속성은 대부분의 브라우저가 해당 값을 무시하기 때문에 거의 사용되지 않습니다. 🎜<li>🎜<code>연기: 선택 사항. 문서가 완전히 구문 분석되고 표시될 때까지 스크립트가 지연될 수 있음을 나타냅니다. 외부 스크립트 파일에만 유효합니다. IE7 및 이전 버전도 포함된 스크립트에 대해 이 속성을 지원합니다. 🎜<li>🎜<code>언어: 더 이상 사용되지 않습니다. 원래는 코드를 작성하는 데 사용되는 스크립트 언어(예: JavaScript, JavaScript1.2 또는 VBScript)를 나타내는 데 사용되었습니다. 대부분의 브라우저는 이 속성을 무시하므로 사용할 필요가 없습니다. 🎜<li>🎜<code>src: 선택 사항. 실행할 코드가 포함된 외부 파일을 나타냅니다. 🎜<li>🎜<code>유형: 선택 사항. 코드를 작성하는 데 사용되는 스크립트 언어의 콘텐츠 유형(MIME 유형이라고도 함)을 나타내는 언어에 대한 대체 속성으로 생각할 수 있습니다. text/javascript와 text/ecmascript는 모두 더 이상 사용되지 않지만 사람들은 항상 text/javascript를 사용해 왔습니다. 실제로 JavaScript 파일을 전송할 때 서버에서 사용하는 🎜🎜MIME 유형은 일반적으로 application/x–javascript이지만 이를 유형으로 설정하면 스크립트가 무시될 수 있습니다. 또한 IE가 아닌 브라우저에서는 🎜🎜application/javascript 및 application/ecmascript 값을 사용할 수 있습니다. 규칙과 최대 브라우저 호환성을 고려하여 현재 유형 속성의 값은 여전히 🎜🎜text/javascript입니다. 그러나 이 속성은 필수가 아닙니다. 이 속성을 지정하지 않으면 기본값은 여전히 text/javascript입니다. 🎜🎜 <code><script> 요소를 사용하는 방법에는 JavaScript 코드를 페이지에 직접 삽입하는 방법과 외부 JavaScript 파일을 포함하는 방법 두 가지가 있습니다. <code><script> 요소를 사용하여 JavaScript 코드를 삽입하는 경우 <code><script>에 대한 유형 속성만 지정하면 됩니다. 그런 다음 다음과 같이 요소 내부에 JavaScript 코드를 직접 배치하면 됩니다. 🎜<pre class='brush:php;toolbar:false;'>&lt;html&gt; &lt;head&gt; &lt;title&gt;Example HTML Page&lt;/title&gt; &lt;script type=&quot;text/javascript&quot; defer=&quot;defer&quot; src=&quot;example1.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; defer=&quot;defer&quot; src=&quot;example2.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;noscript&gt; &lt;p&gt;本页面需要浏览器支持（启用） JavaScript。&lt;/p&gt; &lt;/noscript&gt; &lt;/body&gt; &lt;/html&gt;</pre>🎜<script> 요소 내에 포함된 JavaScript 코드는 위에서 아래로 해석됩니다. 🎜🎜통역사가 <script> 요소 내부의 모든 코드를 평가할 때까지 페이지의 나머지 콘텐츠는 브라우저에 로드되거나 표시되지 않습니다. 🎜🎜<script>를 사용하여 JavaScript 코드를 삽입할 때 </script> 문자열이 코드 어디에도 나타나지 않도록 하세요. 반드시 있어야 한다면 / 이스케이프 문자 <code></code>를 사용하세요.🎜🎜<script>를 사용하여 외부 파일을 포함할 때 src 속성을 사용하세요. 외부 파일을 구문 분석하는 동안(다운로드 포함) 페이지 처리가 중지됩니다. src 속성이 있는 <script> 중간에는 다른 코드를 삽입할 수 없습니다. 그렇지 않으면 실행되지 않습니다. 🎜🎜🎜2. 라벨 위치🎜🎜🎜 전통적인 관행에 따르면 모든 <script> 요소는 다음과 같이 페이지 요소에 배치되어야 합니다. 🎜🎜이 경우 브라우저는 모든 js 파일을 다운로드하고 구문 분석합니다. 실행이 완료될 때까지 페이지가 표시되기 시작하지 않습니다(브라우저는 본문을 만날 때까지 콘텐츠 렌더링을 시작하지 않습니다). 최신 웹 애플리케이션은 일반적으로 모든 JavaScript 참조를 요소 뒤에 배치합니다. 다음 예와 같은 페이지 콘텐츠가 표시됩니다. 🎜rrreee🎜 이렇게 하면 포함된 JavaScript 코드가 구문 분석되기 전에 페이지 콘텐츠가 브라우저에서 완전히 렌더링됩니다. 또한 브라우저 창에 빈 페이지가 표시되는 시간이 단축되므로 사용자는 페이지를 여는 속도가 빨라지는 것을 느낄 수 있습니다. 🎜🎜🎜3. 문서 모드🎜🎜🎜doctype🎜🎜혼합 모드🎜🎜표준 모드🎜🎜준표준 모드🎜🎜🎜4. <noscript>🎜🎜🎜이 요소에는 < body> 모든 HTML 요소(<script> 요소 제외) <code><noscript> 요소에 🎜🎜이 포함된 콘텐츠는 다음 상황에서만 표시됩니다. 🎜🎜[ ] 브라우저는 스크립트를 지원하지 않습니다. 🎜🎜[ ] 브라우저는 스크립트를 지원하지만 스크립트는 장애가 있는. 🎜<p>符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下，浏览器不会呈现<noscript>中的内容。示例：<pre class='brush:php;toolbar:false;'><html> <head> <title>Example HTML Page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <noscript> <p>本页面需要浏览器支持（启用） JavaScript。</p> </noscript> </body> </html></pre><blockquote><p>相关学习推荐：<a href="https://www.php.cn/course/list/11.html" target="_blank">html视频教程</script>

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

성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는