如何使用

在本教程中，我们将学习如何使用<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 filehash 它允许浏览器验证获取的脚本，确保如果源代码被篡改则永远不会加载代码。

示例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 次浏览

启动您的职业生涯

完成课程后获得认证

开始
广告