Html 简明教程

HTML - JavaScript

JavaScript 是网络开发背后的高级编程语言和核心技术。脚本是一个 HTML 元素，它与 JavaScript 协同工作，帮助让我们的网页更具交互性。

例如，脚本可以生成一个弹出警报框消息，或根据特定条件（比如用户点击某个按钮）提供一个下拉菜单。这个脚本可以使用 JavaScript 或 VBScript 编写。如今，大多数 Web 开发者仅使用 JavaScript 和相关框架，主要浏览器甚至不支持 VBScript 。

有许多方法可以将脚本添加到 HTML 文档。我们可以将 JavaScript 代码放在一个单独的文件中，然后在需要的时候包含它，也可以在 HTML 文档本身中定义功能。让我们一个一个地看这两个案例，并提供适当的示例。

Syntax

<script>
   function Hello() {
      alert("Hello, World");
   }
</script>

Examples of JavaScript in HTML

以下是一些示例，说明如何在 HTML 页面中使用 JavaScript。这会探讨 HTML 页面与 JavaScript 连接的方式。

Script inside HTML Document

我们可以直接将脚本代码写入 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>

Import External 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>

Event Handlers in JavaScript

Event handlers 是简单的函数，可以针对任何鼠标或键盘事件进行调用。我们可以在事件处理程序中定义任何类型的逻辑，该逻辑可以从一行到 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>

Hide Scripts from Older Browsers

尽管如今大多数浏览器都支持 JavaScript，但仍有一些旧浏览器不支持。如果浏览器不支持 JavaScript，它不会运行你的脚本，而是会向用户显示代码。为了防止这种情况，我们只需按如下所示在脚本周围放置 HTML 注释。

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>

HTML <noscript> Element

对于那些浏览器不支持脚本的用户，或者在浏览器中禁用脚本的用户，我们可以使用 * <noscript>* 标记将脚本嵌入到网页中，如下例所示。

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

Default Scripting Language

当我们需要包含多个脚本文件并最终使用多个 * <script>* 标记时，可能会出现这种情况。我们可以为所有脚本标记一次指定默认脚本语言。这可以避免我们在页面中每次使用脚本标记时都指定语言。以下是示例。

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />