下载掌阅APP，畅读海量书库
立即打开
1.3 JavaScript引入方式
在学习JavaScript语法之前，我们首先要知道在哪里写JavaScript。这一节不涉及太多编程方面的知识，而是先给大家介绍一下JavaScript的引入方式。这样大家可以知道在哪里编程，在后面的章节里，我们再给大家详细介绍编程方面的语法。
想要在HTML中引入JavaScript，一般有3种方式。
外部JavaScript。
内部JavaScript。
元素事件JavaScript。
实际上，JavaScript的3种引入方式，跟CSS的3种引入方式（外部样式表、内部样式表、行内样式表）非常相似。大家可以通过对比理解来加深记忆。
外部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"。
内部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（）表示在页面输出一个内容，大家先记住这个方法，后面我们会经常用到。
元素属性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（）：弹出一个对话框。