1. 初识JS

1.1 什么是JS语言

javascript是一种运行在客户端 的脚本语言

客户端： 即接受服务的一端，与服务端相对应，在前端开发中，通常客户端指的就是浏览器。

脚本语言： 也叫解释型语言，特点是执行一行，解释一行，如果发现报错，代码就停止执行。

1.2 JS的三个组成部分

javascript的三个组成部分：ECMAScript、BOM、DOM

ECMAScript： 定义了javascript的语法规范。

BOM： 一套操作浏览器功能的API。

DOM： 一套操作页面元素的API。

1.3 script 标签

1、script标签的书写方式

书写Javascript代码有两种方式，第一种是直接在script标签中书写，第二种是将代码写在js文件中，通过script的src属性进行引入。

直接在script中书写javascript代码：

<!-- type="text/javascript" 可以省略 -->
<script type="text/javascript">
    alert("今天天气真好呀");
</script>

通过script标签引入一个JS文件，需要指定src属性:

<!-- 表示引用了test.js文件，并且script标签内不可以继续写代码 -->
<script src="test.js"></script>

如果script标签指定了src属性，说明是想要引入一个js文件，这个时候不能继续在script标签中写js代码，即便写了，也不会执行。

2、script标签的书写位置

script标签的书写位置，原则上来说，可以在页面中的任意位置书写。

写在head标签中，style标签之后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
    <!-- 写在这里 -->
    <script src="demo.js"></script>
</head>
<body>
</body>
</html>

浏览器有一个特性，就是在遇到<body>标签时才开始呈现内容。如果在head里面引用js文件的话，意味着必须要等到全部的javascript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容。如果文件数量一旦过多，将会影响页面加载速度，此时页面有可能会在加载完成前一片空白。

写在</body>标签的前面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <!-- 写在这里 -->
    <script src="demo.js"></script>
</body>
</html>

在解析javascript代码之前，页面的内容已经完全呈现在浏览器当中了，用户会明显感觉页面加载变快了。

1.4 js中输入输出语句

console.log 控制台输出日志
console.dir 对象的形式打印一个对象
document.write 往页面中写入内容
alert 弹框警告
confirm 确认框
prompt 输入框

1.5 注释

不被程序执行的代码。用于程序员标记代码，在后期的修改，以及他人的学习时有所帮助，在JS中，分为单行注释和多行注释以及文档注释。

单行注释

//这是单行注释，只能注释一行

多行注释

/*
    这是多行注释，不能嵌套
*/

文档注释

/**
 * 求圆的面积
 * @param r {number} 圆的半径
 * @returns {number} 圆的面积
 * 这是文档注释
 */
function getArea (r) {
    return Math.PI * r * r;
}

注释的作用

模块划分，方便代码查找和维护
用于解释复杂代码的逻辑，方便维护和后期开发。

初识JavaScript