JavaScript三种引入方式

JavaScript简介

JavaScript，就是我们通常所说的JS。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。

我们都知道，前端最核心的3个技术是HTML、CSS和JavaScript。其中3者区别如下。

HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。

单纯只有HTML和CSS的页面一般只供用户浏览，而JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果。HTML和CSS只是描述性的语言，单纯使用这两个没办法做出那些特效，而必须使用编程的方式来实现，也就是使用JavaScript。

JavaScript引入方式

想要在HTML中引入JavaScript，一般有3种方式。

  • （1）外部JavaScript
  • （2）内部JavaScript
  • （3）元素事件JavaScript

实际上，JavaScript的3种引入方式，跟CSS的3种引入方式（外部样式表、内部样式表、行内样式表）是非常相似的。

一、外部JavaScript

外部JavaScript，指的是把HTML代码和JavaScript代码单独放在不同文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码。

外部JavaScript是最理想的JavaScript引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都是使用外部JavaScript。

示例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script src="index.js"></script>
</head>
<body>
    <!--2、在body中引入-->
    <script src="index.js"></script>
</body>
</html>

说明：

在HTML中，我们可以使用“script标签”引入外部JavaScript文件。在script标签中，我们只需用到src这一个属性。src，是“source（源）”的意思，指向的是文件路径。

对于CSS来说，外部CSS文件只能在head中引入。不过对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。

此外还需要注意一点，引入外部CSS文件使用的是“link标签”，而引入外部JavaScript文件使用的是“script标签”。

二、内部JavaScript

内部JavaScript，指的是把HTML代码和JavaScript代码放在同一个文件中。其中JavaScript代码写在<script> </script>标签对内。

示例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script>
        ……
    </script>
</head>
<body>
    <!--2、在body中引入-->
    <script>
        ……
    </script>
</body>
</html>

说明：

同样的，内部JavaScript文件不仅可以在head中引入，也可以在body中引入。一般情况下，我们都是在head中引入。

实际上<script></script>是一种简写形式，它其实等价于：

<script type="text/javascript">
    ……
</script>
三、元素属性JavaScript

元素属性JavaScript，指的是在元素的“事件属性”中直接编写JavaScript或调用函数。

示例1：在元素事件中编写JavaScript

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="按钮" onclick="alert('博客园')"/>
</body>
</html>

当我们单击按钮后，浏览器预览效果如图所示。

示例2：在元素事件中调用函数

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes() 
        {
            alert("博客园");
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>

当我们单击按钮后，浏览器预览效果同示例1。

posted @ 2021-09-02 16:27  夏虫语冰&  阅读(1257)  评论(0)    收藏  举报