JavaScript引入方式 - JavaScript

在学习JavaScript语法之前，我们首先要知道在哪里写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标签”。对于这一点，小伙伴们别搞混了。

举例：

<!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>

分析：

二、内部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>

浏览器预览效果如图所示。

分析：

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

三、元素属性JavaScript

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

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


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="按钮" onclick="alert('绿叶学习，给你初恋般的感觉')"/>
</body>
</html>

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

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


在线测试
<!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>

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

分析：

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

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

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

（1）document.write()：在页面输出一个内容。
（2）alert()：弹出一个对话框。