Javascript - 用法

首页 / JavaScript / Placement

可以灵活地在HTML文档的任何位置包含JavaScript代码,但是,在HTML文件中包含JavaScript的最优选方式如下-

  • 脚本在<head>...</head>标签中

  • 脚本在<body>...</body> 标签中

  • 脚本在<body>...</body> 和 <head>...</head>标签中.

  • 加载外部脚本,然后将其包含在<head> ... </ head>部分中。

无涯教程将看到如何以不同方式将JavaScript放置在HTML文件中。

在head标签中

如果您想让脚本在某些事件上运行,如当用户单击某处时,则可以将该脚本放在头部,如下所示:

<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标签中

如果您需要一个脚本来在页面加载时运行,以便该脚本在页面中生成内容,则该脚本将进入文档的<body>部分。看一下下面的代码。

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

此代码将产生以下输出-

Hello World

This is web page body

在body和head中

您可以将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>

加载外部脚本

当您开始更广泛地使用JavaScript时,您可能会发现在某些情况下会在网站的多个页面上重复使用相同的JavaScript代码。

您不受限于在多个HTML文件中维护相同的代码。 script 标签提供了一种机制,可让您将JavaScript存储在外部文件中,然后将其包含到HTML文件中。

这是一个示例,说明如何使用 script 标签及其 src 属性在HTML代码中包含外部JavaScript文件。

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

要从外部文件源使用JavaScript,您需要将所有JavaScript源代码写在扩展名为".js"的简单文本文件中,然后如上所示包含该文件。

如,您可以将以下内容保留在 filename.js 文件中,然后在包含filename.js文件后在HTML文件中使用 sayHello 函数。

function sayHello() {
   alert("Hello World")
}

这一章《Javascript - 用法》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

相关文章

Service Mesh实践指南 -〔周晶 - 6讲〕

爱上跑步 -〔钱亮 - 13讲〕

分布式金融架构课 -〔任杰 - 30讲〕

eBPF 核心技术与实战 -〔倪朋飞 - 37讲〕

更改路径时react 路由dom不起作用

在另一个方法的内部函数中调用 this.method()

使用按钮单击保存项目变量

如何在准确的时间运行谷歌应用脚​​本?

TSX 文件无法呈现导入的 React 组件

使用 jquery-confirm 确认框停止回发,似乎无法获得返回值(webfo...

视频推荐〔JavaScript - 24-函数形参和实参匹配问题〕

更多视频 »
好记忆不如烂笔头。留下你的足迹吧 :)