2,JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:

  • 内部脚本:将 JS代码定义在HTML页面中

  • 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中,JavaScript 代码必须位于 <script></script> 标签之间

代码如下:

alert(数据) 是 JavaScript 的一个方法,作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<script>
    alert("hello js1");
</script>
</body>
</html>

从结果可以看到 js 代码已经执行了。

==提示:==

  • 在 HTML 文档中可以在任意地方,放置任意数量的<script>标签。如下图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            alert("hello js1");
        </script>
    </head>
    <body>
    ​
    <script>
        alert("hello js1");
    </script>
    ​
    </body>
    </html>
    <script>
        alert("hello js1");
    </script>
  • 一般把脚本置于 <body> 元素的底部,可改善显示速度

    因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容,然后再展示动态的效果。

2.2 外部脚本

第一步:定义外部 js 文件。如定义名为 demo.js的文件

demo.js 文件内容如下:

alert("hello js");

第二步:在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<script src="../js/demo.js"></script>
</body>
</html>

==注意:==

  • 外部脚本不能包含 <script> 标签

    在js文件中直接写 js 代码即可,不要在 js文件 中写 script 标签

  • <script> 标签不能自闭合

    在页面中引入外部js文件时,不能写成 <script src="../js/demo.js" />

更多推荐

javascript引入方式