JavaScript 是 Web 开发背后的高级编程语言和核心技术。脚本是一个 HTML 元素,它与 JavaScript 一起使用,以帮助使我们的网页更具交互性。
例如,脚本可以生成弹出警报框消息,或根据用户单击按钮的某些条件提供下拉菜单。此脚本可以使用 JavaScript 或 VBScript 编写。如今,大多数 Web 开发人员只使用 JavaScript 和相关框架,VBScript 甚至不受主流浏览器的支持。
有多种方法可以向 HTML 文档添加脚本。我们可以将 JavaScript 代码保存在一个单独的文件中,然后将其包含在任何需要的地方,或者也可以在 HTML 文档本身中定义功能。让我们用合适的例子逐一查看这两种情况。
语法
<script>
function Hello() {
alert("Hello, World");
}
</script>
HTML 中的 JavaScript 示例
以下是一些示例,说明如何在 HTML 页面中使用 JavaScript。本文探讨了将 HTML 页面与 JavaScript 连接的方法。
HTML 文档中的脚本
我们可以将脚本代码直接写入我们的 HTML 文档中。通常,我们将脚本代码保留在文档标题的 <script> 标签内,但是,没有限制。我们可以将脚本代码放在文档中的任何位置,但在 <script> 标签内。
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Internal Script
</title>
<script type="text/JavaScript">
function Hello(){
alert("Hello, World");
}
</script>
</head>
<body>
<input type="button"
onclick="Hello();"
name="ok"
value="Click Me" />
</body>
</html>
导入外部 JavaScript
如果开发人员要定义将在各种 HTML 文档中使用的功能,那么最好将该功能保留在单独的 JavaScript 文件中,然后将该文件包含在 HTML 文档中。
JavaScript 文件的扩展名为 .js,它将使用 <script> 标签包含在 HTML 文件中。
假设我们在 script.js 中使用 JavaScript 定义一个小函数,该函数具有以下代码:
function Hello() {
alert("Hello, World");
}
现在,让我们在下面的 HTML 文档中使用上面的外部 JavaScript 文件:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript External Script</title>
<script src="/html/script.js" type="text/JavaScript" />
</script>
</head>
<body>
<input type="button"
onclick="Hello();"
name="ok"
value="Click Me" />
</body>
</html>
JavaScript 中的事件处理程序
事件处理程序是可以针对任何鼠标或键盘事件调用的简单函数。我们可以在事件处理程序中定义任何类型的逻辑,这些逻辑可以从一行代码到 1000 行代码不等。
下面的示例说明如何编写事件处理程序。我们将在文档的标题中编写一个名为 EventHandler() 的简单函数。当任何用户将鼠标悬停在段落上时,我们将调用此函数。
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<script type="text/JavaScript">
function EventHandler(){
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover="EventHandler();">
Bring your mouse here to see an alert
</p>
</body>
</html>
从旧版浏览器中隐藏脚本
虽然现在大多数浏览器都支持JavaScript,但仍有一些较旧的浏览器不支持。如果浏览器不支持 JavaScript,则不会运行您的脚本,而是向用户显示代码。为了防止这种情况,我们可以简单地在脚本周围放置 HTML 注释,如下所示。
JavaScript 示例:
<script type="text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript 示例:
<script type="text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
HTML <noscript> 元素
对于浏览器不支持脚本的用户,或者在浏览器中禁用了脚本的用户,我们可以使用 <noscript> 标签将脚本嵌入到网页中,如以下示例所示。
JavaScript 示例:
<script type="text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript 示例:
<script type="text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
默认脚本语言
在某些情况下,我们需要包含多个脚本文件,并最终使用多个<script>标签。我们可以一次为所有脚本标签指定默认脚本语言。这样我们就不必在每次在页面中使用脚本标签时都指定语言。下面是一个示例。
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />