跳到主要内容

1 JavaScript

html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互。

1.1 介绍​

通过代码/js效果演示提供资料进行效果演示，通过浏览器打开，我们点击主题5按钮，页面的主题发生了变化，所以js可以让我们的页面更加的智能，让页面和用户进行交互。

file

1.2 引入方式​

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

**第一种方式：**内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>
    alert("Hello JavaScript")
</script>

**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含&ltscript>标签
  • 引入外部js的<script>标签，必须是双标签

例子：

<script src="js/demo.js"></script>

注意：demo.js中只有js代码，没有<script>标签

接下来，我们通过VS Code来编写代码，演示html中2种引入js的方式

第一步：在VS Code中创建名为 10.JS-引入方式.html 的文件

第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>