Html 简明教程

HTML - JavaScript

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

JavaScript is a high level programming language and core technology behind web developments. A script is an HTML element that works with JavaScript to help make our webpages more interactive.

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

For example, a script could generate a pop-up alert box message, or provide a dropdown menu based on certain conditions such user clicked a button. This script could be written using JavaScript or VBScript. Nowadays, only JavaScript and associated frameworks are being used by most web developers, VBScript is not even supported by major browsers.

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

There are multiple ways of adding scripts to the HTML document. We can keep JavaScript code in a separate file and then include it wherever it’s needed, or it is also possible to define functionality inside the HTML document itself. Let’s see both cases one by one with suitable examples.

Syntax

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

Examples of JavaScript in HTML

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

Following are some example that illustrate use of JavaScript in a HTML page. This explore what are the ways to connect a HTML page with JavaScript.

Script inside HTML Document

我们可以直接将脚本代码写入 HTML 文档中。通常，我们将脚本代码保存在文档的头部内，置于 <script> 标签中，但是，没有限制。我们可以在文档的任意位置添加脚本代码，但必须在 <script> 标签内。

We can write the script code directly into our HTML document. Usually, we keep script code in the header of the document inside the <script> tag, however, there is no restriction. We are allowed to put the script code anywhere in the document but inside the <script> tag.

<!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 文档中。

If developers are going to define a functionality that will be used in various HTML documents, then it’s better to keep that functionality in a separate JavaScript file and then include that file in the HTML documents.

JavaScript 文件的扩展名是 .js ，它将使用 <script> 标签包含在 HTML 文件中。

A JavaScript file will have an extension as .js and it will be included in HTML files using the <script> tag.

考虑我们在 script.js 中使用 JavaScript 定义一个小函数，该函数的代码如下：

Consider we define a small function using JavaScript in script.js which has following code:

function Hello() {
   alert("Hello, World");
}

现在，让我们在以下 HTML 文档中使用上述外部 JavaScript 文件：

Now, let’s make use of the above external JavaScript file in our following HTML document:

<!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 行代码不等。

Event handlers are simple functions which can be called against any mouse or keyboard event. We can define any kind of logic inside our event handler which can vary from a single to 1000s line of code.

以下示例解释如何编写事件处理程序。我们将在文档的头部编写一个名为 EventHandler() 的简单函数。当任何用户将鼠标悬停在段落上时，我们将调用此函数。

Following example explains how to write an event handler. We are going to write one simple function named EventHandler() in the header of the document. We will call this function when any user brings mouse over a paragraph.

<!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 注释。

Although most browsers these days’ support JavaScript, but still some older browsers don’t. If a browser doesn’t support JavaScript, instead of running your script, it would display the code to the user. To prevent this, we can simply place HTML comments around the script as shown below.

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

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

HTML <noscript> Element

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

For users whose browsers do not support scripts, or for those who have disabled scripts in their browsers, we can embed scripts into the web page using the <noscript> tag as illustrated in the below example.

<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>* 标记时，可能会出现这种情况。我们可以为所有脚本标记一次指定默认脚本语言。这可以避免我们在页面中每次使用脚本标记时都指定语言。以下是示例。

There may be a situation when we are required to include multiple script files and ultimately using multiple <script> tags. We can specify a default scripting language for all the script tags at once. This saves us from specifying the language every time we use a script tag within the page. Below is the example.

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