从零开始学前端 - 9. JavaScript 基础

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

---

一、JavaScript 简介

1. 简介

  JavaScript 简称 JS , 是属于 Web 的脚本语言，由它来控制网页的 行为层。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中。
  JS 可以说是包含了三个方面：ECMAScript 、 DOM 和 BOM；其中 JS 的核心是 ECMAScript ，描述了该语言的语法和基本对象；DOM 描述了处理网页内容的方法和接口；BOM 描述了与浏览器进行交互的方法和接口。

2. 什么是脚本语言？

  脚本语言是一种解释性的语言,是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。
  传统的计算机语言比如说 Java 和 C 都需要在编写完成之后进行编译，只有编译成二进制代码之后，计算机才能执行。而脚本语言只需要借助解释器即可直接运行，比如 JS 只需要借助于浏览器就能直接运行。
  脚本语言极大地简化了“开发、部署、测试和调试”的周期过程,能够随时部署，而不需要耗时的编译/打包过程。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些.

3. 特点

• javascript 是一种弱类型、动态类型、解释型的脚本语言。
• 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为；
• 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构层、表现层和行为层的分离；
• 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）；
• Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。
• 可以实现 WEB 页面的人机交互。

4. 名词解释

• 弱类型：类型检查不严格，偏向于容忍隐式类型转换。

• 强类型：类型检查严格，偏向于不容忍隐式类型转换。

• 动态类型：运行的时候执行类型检查。

• 静态类型：编译的时候就知道每个变量的类型。

• 解释型：程序不需要编译，程序在运行的时候才翻译成机器语言，每执行一次都要翻译一次，因此效 - 率比较低，但是跨平台性好。

• 编译型：程序在执行之前需要一个专门的翻译过程，把程序编译为机器语言的文件，运行时直接使用编译的结果就行了。

• 标记语言：标记语言的存在就是用来被读取(浏览)的，而其本身是没有行为能力的，在标记语言里你会看到<和>这些尖括号，这是用来写出“层次”和”属性”的，换句话说，它是被动的。并不具备与访问者互动的能力。

• 编程语言：它是具有逻辑性和行为能力，这是主动的。说通俗一点，它是有思想的。

• 脚本语言：它介于标记语言和编程语言之间，脚本语言不需要编译，可以直接用，由解释器来负责解释。

二、书写位置

  <script> 标签用于引入 JS 代码。它既可以在页面中直接使用，也可以通过 src 属性引入外部 JS 文件。
<script> 属性：

属性	效果
language	用来指定 <script> 标签中的脚本类型，已废弃
type	指定脚本类型，默认为 text/javascript
src	指定外部的 JS 文件地址

1. 外部

  首先需要创建一个 JS文件（后缀名为.js），然后在 html 文件内使用 script 标签引入 js 文件。这种方式也是我们工作中最常用的引用方式。

<script src="../js/index.js"></script>

2.内部

<script type="text/javascript">
    // Js代码
</script>

如果要引入多个存在依赖关系的 JS 文件时，要严格注意引入顺序。我们推荐将 <script> 标签放在页面的底部，因为：

• HTML代码从上到下执行，先加载CSS，避免 HTML 出现无样式状态；
• 尽快的将网页呈现给用户，减少浏览者的等待时间，避免因为 JS 代码块阻塞网页的呈现；
• JS 如果放在页面顶部，容易出现获取不到页面元素等问题；

三、JavaScript 基本语法

3.1 基本语法

• 严格区分大小写。例如 a 和 A是两个完全不同的变量。
• 命名时的第一个字符必须是以字母、英文下划线_、美元符号$。
• 一般我们采用小驼峰命名法，构造函数采用大驼峰命名法；
• 每一条 JS 语句都应使用分号结尾；

小驼峰命名法：第一个单词的首字母要小写，后面其他单词的首字母要大写。例：firstSeond，userName。
大驼峰命名法：第一个单词的首字母要大写，后面其他单词的首字母要大写。例：FirstSeond，UserName。

3.2 注释

3.2.1 单行注释

// 单行注释 

3.2.2 多行注释

/*
多行注释 
多行注释 
*/ 

3.2.3 方法注释

  方法注释在我们真正工作的时候可以说是最常用的一种注释了，不仅可以提高代码的可读性和维护性。在我们使用时，也能给我们带来相应的提示。

/*方法说明
 * @method 方法名
 * @param { 参数类型 } 参数名 参数说明
 * @return { 返回值类型 } 返回值说明
*/
/* 根据用户 ID 获取用户名
* @method getUserNameById
* @param {String} userId 用户Id
* @return {String} userName 返回用户名
*/ 
function getUserName(userId) { 
	return userId;
}

vsCode提示：

Webstorm提示：

3.3 严格模式

  顾名思义，严格模式（strict mode）就是在严格的条件下运行。通过 "use strict" 指令触发。"严格模式"体现了 Javascript 更合理、更安全、更严谨的发展方向，包括 IE 10 在内的主流浏览器，都已经支持它。同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的 Javascript 做好铺垫。

3.4 保留字和关键字

  关键字和保留字被统称为保留关键字。关键字是 JS 本身已经使用了，具有一定特殊的含义的从单词。保留字是 JS 目前还没有使用，但为了以后扩展而预先保留出来的单词。两者基本上可以看做没有区别，都不能用来当变量名、方法名等。但可以通过一些办法来避免这个问题，比如说我们不能直接使用关键字 case 来命名变量，但可以使用 myCase 来规避。
  这些单词不需要一上来就全部记忆，因为有很多单词是我们接下来会学到的内容，而且目前的编辑器也会在你使用它们的时候进行提示。

以上仅为 JS 中部分保留关键字，更多请 点击这个查看更多 。

四、变量与常量

4.1 变量

  变量指的就是在程序运行过程中可以发生改变的量。JS 的变量是松散类型的，我们不需要像 C 或者 Java 等语言在命名变量的时候声明它的数据类型，也就是说，JS 的变量可以保存任何类型的数据。
  JS 的变量通过关键字 var 进行定义，后面跟上变量名，例：

var name;	// 声明一个名为 name 的变量。该变量可以储存任何类型的值，未赋值时是一个特殊的值： undefined 。

  我们一般会在声明变量的同时对它进行赋值，赋值时使用运算符 =，例：

var name = "她不美却常驻我心";	// 声明一个名为 name 的变量，并给它赋值为 "她不美却常驻我心""。

  我们可以同时声明多个变量并赋值，每个变量之间使用英文逗号进行分隔，例：

var name = "她不美却常驻我心" , sex:"男" , home:"https://blog.csdn.net/qq_39506551";

  JS 中存在声明提前的现象，我们在后续单独一个章节内详细讲解。

4.2 常量

  常量指的就是在程序运行时不会发生改变的量，一般我们定义一个常量之后，就不允许对它进行更改了。我们在命名时，会将常量名全部大写，例：

var MAX = 100;

• 实际上我们通过关键字 var 声明的依然是一个变量，ES6 新增关键字 const 专门用来定义常量，来解决这个问题。

五、*数据类型

  通常大家都说 JS 拥有六种基本数据类型：Number、String、Boolean、undefined、Null、Object，这说的是在 ES5 的规范下。ES6的时候，新增了一种 Symbol 类型。
  数据类型可以分为两种：引用数据类型和基本数据类型，我们在初学时可以不用在意这一点，这要记住 JS 中只有 Object 是引用数据类型，其余都是基本数据类型。
  每一个数据类型会在有一个专门的章节进行讲解。这里先记住 JS 中所有的数据类型。

名称	含义
Number	数字
String	字符串
Boolean	布尔值
undefined	未定义值
Null	空值
Object	对象
Symbol	唯一值

5.1 Number

  数字类型就是数学上的数字，JS 中不区分 整数（int）和浮点数（float）。但是浮点数在计算时存在精度丢失的问题，这是因为在 JS 设计时采用的算术标准规则问题，所有采用这个规则的语言都会有相同的问题。（具体是哪个规则忘记了，并不重要，有兴趣可以自行百度，我们只需要记住浮点数之间的计算并不精确就行了）。后续我们在详细解释。

5.2 String

  字符串就如同字面意思，就是一些字符组合在一起。JS中，只要是被引号包裹住的，就是字符串。注意单引号中不能包含单引号，双引号之间不能包含双引号。

5.3 Boolean

  Boolean 指的就是布尔值，只有 真true 和 假false 两个值。它的最大用途就是在程序中进行逻辑判断。

5.4 undefined

  如果一个变量已经被声明了，但是没有进行赋值操作，那么这个变量现在的值就是 undefined ，表示一个未定义的值。

5.5 Null

  我们知道，每一个值在存储的时候，系统会给它分配一定的内存空间。而如果一个值为 null 的话，则表示系统并没有给它分配内存空间。

5.6 Object

  Object（对象）是在所有的编程语言中都十分重要的一个概念，对于所有的事物我们可以把他们看作是一个对象（也就是传说中的万物皆对象），而每一个事物都有自己的表示的属性和对于某一信息作出的相应的操作。而这些东西就变成了事物的属性和方法。
  对象是无特定顺序的值的数组，是一种特殊的数据类型，可以包含多个属性和方法。
  初学者在理解对象的时候往往是十分困难的，我们不用着急，慢慢的学习后总会理解的。

---

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

---

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。

都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。