HTML - JavaScript

上一页
下一页

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" />
请注意，您仍可以通过在<script>标签中指定语言来覆盖默认值。
本页
上一页
下一页