二维码
搜索 ×

JavaScript 去向

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 去向

<script> 标签

在 HTML 中，JavaScript 代码插入在<script>和</script>标签之间。

1
2
3
<script>  
document.getElementById("demo").innerHTML = "My First JavaScript";  
</script>

旧的 JavaScript 示例可能使用 type 属性：<script type="text/javascript">。
类型属性不是必需的。 JavaScript 是 HTML 中的默认脚本语言。

JavaScript 函数和事件

JavaScriptfunction是一段 JavaScript 代码，可以在“调用”时执行。

例如，当事件发生时（例如用户单击按钮时）可以调用函数。

您将在后面的章节中了解有关函数和事件的更多信息。

<head>或 <body> 中的 JavaScript

您可以在 HTML 文档中放置任意数量的脚本。

脚本可以放置在HTML 页面的<body>、 或 部分中，或两者中。<head>

<head> 中的 JavaScript

在此示例中，JavaScriptfunction被放置在<head>HTML 页面的部分中。

单击按钮时会调用（调用）该函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>

<html>  
<head>  
<script>  
function myFunction() {  
  document.getElementById("demo").innerHTML = "Paragraph changed.";  
}  
</script>  
</head>  
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>  
<button type="button" onclick="myFunction()">Try it</button>

</body>  
</html>

<body>中的 JavaScript

在此示例中，JavaScriptfunction被放置在<body>HTML 页面的部分中。

单击按钮时会调用（调用）该函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>  
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>  

<button type="button" onclick="myFunction()">Try it</button>  

<script>  
function myFunction() {  
  document.getElementById("demo").innerHTML = "Paragraph changed.";  
}  
</script>

</body>  
</html>

将脚本放置在 <body> 元素的底部可以提高显示速度，因为脚本解释会减慢显示速度。

外部 JavaScript

脚本也可以放置在外部文件中：

外部文件：myScript.js

1
2
3
function myFunction() {  
  document.getElementById("demo").innerHTML = "Paragraph changed.";  
}

当在许多不同的网页中使用相同的代码时，外部脚本很实用。

JavaScript 文件的文件扩展名为**.js**。

要使用外部脚本，请将脚本文件的名称放入标签src的 (source) 属性中<script>：

1
<script src="myScript.js"></script>

<head>您可以根据<body>需要放置外部脚本引用。

该脚本的行为就像它恰好位于<script>标签所在的位置一样。

外部脚本不能包含<script>标签。

外部 JavaScript 的优点

将脚本放在外部文件中具有一些优点：

  • 它将 HTML 和代码分开
  • 它使 HTML 和 JavaScript 更易于阅读和维护
  • 缓存的 JavaScript 文件可以加快页面加载速度

要将多个脚本文件添加到一页 - 使用多个脚本标签：

1
2
3
<script src="myScript1.js"></script>

<script src="myScript2.js"></script>

外部参考

可以通过 3 种不同的方式引用外部脚本：

  • 具有完整的 URL（完整的网址）
  • 使用文件路径（如 /js/）
  • 没有任何路径

此示例使用完整的URL链接到 myScript.js：

1
<script src="https://www.w3schools.com/js/myScript.js"></script>

此示例使用文件路径链接到 myScript.js：

1
<script src="/js/myScript.js"></script>

此示例不使用链接到 myScript.js 的路径：

1
<script src="myScript.js"></script>

推荐教程