从0到1：JavaScript 快速上手
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 JavaScript引入方式

在学习JavaScript语法之前，我们首先要知道在哪里写JavaScript。这一节不涉及太多编程方面的知识，而是先给大家介绍一下JavaScript的引入方式。这样大家可以知道在哪里编程，在后面的章节里，我们再给大家详细介绍编程方面的语法。

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

外部JavaScript。

内部JavaScript。

元素事件JavaScript。

实际上，JavaScript的3种引入方式，跟CSS的3种引入方式（外部样式表、内部样式表、行内样式表）非常相似。大家可以通过对比理解来加深记忆。

1.3.1 外部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标签”。对于这一点，小伙伴们别搞混了。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入外部CSS-->
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <!--引入外部JavaScript-->
    <script src="js/index.js"></script>
</head>
<body>
</body>
</html>

分析

<script src="js/index.js"></script>表示引入文件名为“index.js”的JavaScript文件，其中，文件的路径是"js/index.js"。

1.3.2 内部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>

一般情况下，简写形式用得比较多。对于上面这种写法，我们也需要了解一下，因为不少地方会采用上面这种旧的写法。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         document.write（"绿叶学习网，给你初恋般的感觉~"）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图1-7所示。

图1-7 内部JavaScript

分析

document.write（　）表示在页面输出一个内容，大家先记住这个方法，后面我们会经常用到。

1.3.3 元素属性JavaScript

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

举例：在元素事件中编写JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="按钮" onclick="alert（’绿叶学习，给你初恋般的感觉’）"/>
</body>
</html>

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

图1-8 在元素事件中编写JavaScript

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

<!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-9所示。

图1-9 在元素事件中调用函数

分析

alert（　）表示弹出一个对话框，大家先记住这个语句，后面我们会经常用到。

对于在元素属性中引入JavaScript，只需要简单了解就行，也不需要记住语法。在后面的“第11章 事件基础”中，我们再给大家详细介绍。

此外，这一节学习了两个十分有用的方法，这两个方法在后面的章节中会大量用到，这里我们先记一下。

document.write（　）：在页面输出一个内容。

alert（　）：弹出一个对话框。

上一章目录下一章