可以灵活地在HTML文档中的任何位置包含JavaScript代码。但是,在HTML文件中包含JavaScript的最佳方法如下:<
脚本在<head>...</head>部分。
脚本在< body> ...</body>部分。
脚本在< body> ...</body>和< head> ...</head>部分。
外部文件中的脚本,然后包含在< head> ...</head>中部分。
在下一节中,我们将看到如何以不同的方式将JavaScript放入HTML文件中。
如果您想在某个事件上运行脚本,例如当用户点击某个地方时,那么您将把该脚本放在头部中,如下所示;
<html> <head> <script type = "text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </body> </html>
如果您需要在页面加载时运行脚本以便脚本在页面中生成内容,则脚本将进入文档的<body>部分。 在这种情况下,您将不会使用JavaScript定义任何函数。 看看下面的代码。
<html> <head> </head> <body> <script type = "text/javascript"> <!-- document.write("Hello World") //--> </script> <p>This is web page body </p> </body> </html>
您可以将JavaScript代码完全放在<head>和<body>部分中,如下所示 :
<html> <head> <script type = "text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> <script type = "text/javascript"> <!-- document.write("Hello World") //--> </script> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </body> </html>
As您开始使用JavaScript进行更广泛的工作,您可能会发现在某些情况下您在网站的多个页面上重复使用相同的JavaScript代码。
您不限于在多个HTML文件中维护相同的代码。 脚本标记提供了一种机制,允许您将JavaScript存储在外部文件中,然后将其包含在HTML文件中。
以下是一个示例,说明如何您可以使用脚本标记及其 src 属性在HTML代码中包含外部JavaScript文件。
<html> <head> <script type = "text/javascript" src = "filename.js" ></script> </head> <body> ....... </body> </html>
要使用外部文件源中的JavaScript,您需要在扩展名为".js"的简单文本文件中编写所有JavaScript源代码,然后包含该文件,如上所示。
例如,您可以在 filename.js 文件中保留以下内容,然后您可以使用 sayHello 包含filename.js文件后在HTML文件中的功能。
function sayHello() { alert("Hello World") }