js中的script用法
摘要：
一、Script标签的基本用法
二、Script标签的属性
  1.src属性
  2.defer属性
  3.async属性
  4.type属性
三、内部样式表和内部脚本的区别
四、Script标签的优缺点
五、实战案例
正文：
js中的script用法
在HTML中，Script标签用于引入JavaScript代码，使得网页具有交互功能。本文将详细介绍Script标签的基本用法、属性以及实战案例。
一、Script标签的基本用法
在HTML文档中，通过在`<head>`或`<body>`标签内插入`<script>`标签，可以引入JavaScript代码。例如：
```html
<!DOCTYPE html>
<html>
<head>
  <title>Script用法示例</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p id="demo">点击这里更改文本</p>
  <script>
    // 这里的JavaScript代码将在页面加载后执行
    ElementById("demo").innerHTML = "文本已更改";
  </script>
</body>
</html>
```
二、Script标签的属性
1.`src`属性
`src`属性用于指定外部JavaScript文件的路径。例如：
```html
<script src="example.js"></script>
```
2.`defer`属性
`defer`属性表示脚本延迟执行，直到文档加载完成。例如：
```html
<script defer src="example.js"></script>
```
3.`async`属性
`async`属性表示脚本异步执行，不影响页面的加载。例如：
```html
<script async src="example.js"></script>
```
4.`type`属性
`type`属性用于指定脚本的类型，默认值为`text/javascript`。例如：
```html
<script type="application/javascript" src="example.js"></script>
```
三、内部样式表和内部脚本的区别
内部样式表主要用于设置HTML元素的样式，而内部脚本主要用于编写JavaScript代码。两者之间的区别在于它们所处的位置和作用不同。
1.位置：内部样式表位于`<head>`标签内，而内部脚本位于`<body>`标签内。
2.作用：内部样式表主要用于美化页面，如设置字体、颜、布局等；内部脚本主要用于实现网页的交互功能，如响应事件、操作DOM等。
四、Script标签的优缺点
1.优点
  - 易于维护：将JavaScript代码放在HTML中，便于统一管理和维护。
  - 代码复用：可以通过外部文件引入，实现代码的复用和模块化。
2.缺点
  - 影响页面加载：外部脚本需要等待页面加载完成后才能执行，可能导致页面加载速度变慢。
  - 兼容性问题：某些旧版本的浏览器可能不支持`defer`和`async`属性。
五、实战案例
以下是一个简单的实战案例，通过`<script>`标签实现页面加载时弹出欢迎提示框：
```html
<!DOCTYPE html>
<html>
script在html中的用法<head>
  <title>Script实战案例</title>
</head>
<body onload="welcome()">
  <h1>欢迎来到我的网站</h1>
  <p>加载完成后，点击下面的按钮查看提示框</p>
  <button onclick="showAlert()">点击我</button>
  <script>
    function welcome() {
      alert("欢迎来到我的网站！");
    }
    function showAlert() {
      alert("感谢您的点击！");
    }
  </script>
</body>
</html>
```
通过这个案例，我们可以看到JavaScript代码在实际应用中的作用。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。