如何使用

在本教程中，我们将学习如何使用<script>标签定义客户端JavaScript。

HTML <script>标签用于在HTML文档中声明脚本。通过它，您可以定义客户端JavaScript。用户可以直接在script标签中编写客户端JavaScript代码，或者可以使用‘src’属性将script标签指向外部JavaScript文件。

客户端JavaScript可以写在HTML文件的多个部分，例如body标签内、head标签内或元素标签内联。但是，建议只在body标签内的script标签之间编写任何JavaScript代码。

语法

<html>
<head>
</head>
<body>
   ...
   <!-- Script tag goes here -->
   <script>
      // JavaScript code
   </script>
</body>
</html>

上述语法显示了使用script标签编写JavaScript代码的推荐位置。

属性

属性 值 描述
async async 它指定脚本是异步执行的。
defer defer 它指定脚本不会生成任何内容。因此，浏览器/用户代理可以继续解析和渲染页面其余部分。
charset charset 它指定脚本使用的字符编码。
src URL 它指定外部脚本的URI/URL。
type application/ecmascript text/JavaScript text/vbscript application/JavaScript 它指定脚本语言作为内容类型或MIME类型。
crossorigin anonymous use-credentials 它指定对HTTP CORS请求的请求模式。
integrity 文件哈希 它允许浏览器验证获取的脚本，确保如果源代码被篡改则不会加载代码。

示例1

在下面的示例中，我们使用script标签定义了客户端JavaScript。我们在body标签内使用了script标签。这里的JavaScript代码将通过单击按钮来更改元素的文本。“更改文本”按钮与单击事件相关联，该事件执行“changeText()”函数。此函数使用document.getElementById()方法更改元素的内容。

<html>
<body>
   <h2>Using the <i>script tag</i> to to define client-side JavaScript</h2>
   <button onclick = "changeText()"> Change text </button>
   <div
      id = "root"
      style = "padding: 10px; background-color: bisque; border: 1px solid black">
      This element's text will change after the button click!
   </div>
   <!-- script tag -->
   <script>
      function changeText() {
         const root = document.getElementById('root')
         root.innerHTML = 'Welcome to Tutorialspoint!'
      }
   </script>
</body>
</html>

示例2

在下面的示例中，我们使用script标签定义了客户端JavaScript来更新元素的样式。我们将script标签放在body标签的末尾。script标签包含JavaScript代码，用于通过单击按钮更改元素的背景颜色。“蓝色”和“绿色”两个按钮与单击事件相关联，这些事件分别执行其各自的函数以将背景颜色分别更改为蓝色和绿色。document.getElementById()方法用于更改背景颜色。

<html>
<body>
   <h2>Using the <i>script tag</i> to define client-side JavaScript</h2>
   <button onclick = "bgBlue()" >Blue</button>
   <button onclick = "bgGreen()" >Green</button>
   <div
      id = "root"
      style = "padding: 10px; margin: 5px 0px; background-color: blue; border: 1px solid black; color: white;">
      This element's background color will change by button click!
   </div>
   <!-- script tag -->
   <script>

      // element
      const root = document.getElementById('root')
      function bgBlue() {
         root.style.backgroundColor = 'blue'
      }
      function bgGreen() {
         root.style.backgroundColor = 'green'
      }
   </script>
</body>
</html>

本教程教我们如何使用<script>标签定义客户端JavaScript。我们讨论了script标签的语法和属性。在第一个示例中，我们使用script标签并在其之间编写JavaScript代码来更改元素的内容。在第二个示例中，我们使用script标签来更改元素的背景颜色。用户可以在script标签之间编写任何JavaScript代码。建议仔细阅读示例以更好地理解主题。

更新于：2022年10月31日

281 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告