1. 初识 JavaScript

JavaScript 历史

  • 布兰登 · 艾奇（Brendan Eich, 1961 年~）。
  • 1995 年利用 10 天完成 JavaScript 设计。
  • 网景公司最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。

JavaScript 是什么

  • JavaScript 是世界上最流行的编程语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由 js 解释器（js 引擎）逐行来进行解释并执行
  • 现在也可以基于 Node.js 技术进行服务器端编程

JavaScript 的作用

  • 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
  • 网页特效
  • 服务端开发（Node.js）
  • 桌面程序（Electron）
  • App(Cordova)
  • 控制硬件-物联网（Ruff）
  • 游戏开发（cocos2d-js）

HTML/CSS/JS 的关系

HTML/CSS 标记语言–描述类语言

  • HTML 决定网页结构和内容（决定看到什么），相当于人的身体
  • CSS 决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆

JS 脚本语言–编程类语言

  • 实现业务逻辑和页面控制（决定功能），相当于人的各种动作

浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

  • 渲染引擎：用来解析 HTML 与 CSS，俗称内核，比如 Chrome 浏览器的 blink，老版本的 webkit
  • JS 引擎：也称为 JS 解释器，用来读取网页中的 JavaScript 代码，对其处理后运行，比如 Chrome 浏览器的 V8

ps：浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎（解释器）来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

JS 的组成

1. ECMAScript

ECMAScript 是由 ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ps：ECMAScript 规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准。

2. DOM — 文档对象模型

文档对象模型（Document Object Model，简称 DOM ），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

3. BOM — 浏览器对象模型

BOM（Browser Object Model，简称 BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS 的引入方式

1. 行内 js，直接写到元素内部

1
<input type="button" value="提交" onclick="alert('提交成功')" />

  • 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），如：onclick

  • 注意单双引号的使用：在 HTML 中推荐使用双引号， JS 中推荐使用单引号

  • 可读性差，在 HTML 中编写 JS 大量代码时，不方便阅读

  • 引号易错，引号多层嵌套匹配时，非常容易弄混

  • 特殊情况下使用

2. 内嵌式 js，与 CSS 内嵌式引入相同

1
2
3
<script>
  alert('提交成功');
</script>
  • 可以将多行 JS 代码写到<script> 标签中
  • 内嵌 JS 是学习时常用的方式

3. 外部引入 js 文件

先创建一个后缀为 .js 的文件，比如 my.js

代码内容直接写进 my.js 中，然后引入

1
<script src="my.js"></script>
  • 利于 HTML 页面代码结构化，把大段 JS 代码独立放到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS 文件的 script 标签中间不可以写代码
  • 适合于 JS 代码量比较大的情况，常用于开发

JavaScript 输入输出语句

为了方便信息的输入输出，JS 中提供了一些输入输出语句，其常用的语句如下：

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器淡出输入框，用户可以输入 浏览器

2. 变量

什么是变量

变量相当于一个装东西的盒子。

变量是用于存放数据的容器，通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间。

变量的使用

  1. 声明变量

    1
    2
    // 声明变量
    var age; // 声明一个 名称为 age 的变量
    • var 是一个 JS 关键词，用来声明变量（variable 变量的意思），使用该语法声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
    • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

  2. 赋值

    1
    age = 10; // 给 age 这个变量赋值为 10
    • = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
    • 变量值是程序员保存到变量空间的值

  3. 变量的初始化

    1
    var age = 18; // 声明变量同时赋值为18

    ​ 声明一个变量并赋值，称之为变量的初始化。

变量语法扩展

  1. 更新变量

    一个变量被重新赋值后，它原有的值就会被覆盖，变量将以最后一次赋的值为准。

    1
    2
    var age = 18;
    age = 81; // 最后的结果就是81，因为18被覆盖了

  2. 同时声明多个变量

    同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

    1
    2
    3
    var age = 18,
      name = 'littleluo',
      sex = 'male';

  3. 声明变量特殊情况

    情况 说明 结果
    var age; console.log(age); 只声明 不赋值 undefined
    console.log(age) 不声明 不赋值 直接使用 报错
    age = 10; console.log(age); 不声明 只赋值 10

变量命名规范

  • 由字母（A-Za-z）、数字（0-9）、下划线（ _ ）、美元符号（$）组成，如：usrAge，num01，_name
  • 严格区分大小写。 var app; 和 var App; 是两个变量
  • 不能以数字开头。18age 是错误的
  • 不能是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。不建议使用拼音简写
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

交换两个变量值

1
2
3
4
5
6
7
8
9
10
11
12
13
// js 是编程语言有很强的逻辑性，实现这个要求的思路：先怎么做后怎么做
// 1. 需要创建一个临时变量来帮助我们
// 2. 把 apple1 给我们的临时变量 temp
// 3. 把 apple2 里面的苹果给 apple1
// 4. 把临时变量里面的值 给 apple2
var temp; // 声明一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边的 apple1 赋值给左边的变量 temp
apple1 = apple2;
apple2 = temp;
console.log(apple1); // 输出结果为 红苹果
console.log(apple2); // 输出结果为 青苹果

3. 数据类型

数据类型简介

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。 JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

1
2
var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串

在代码运行时，变量的数据类型是由 JS 引擎 ‘根据 = 右边变量值的数据类型来判断’ 的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

1
2
var x = 6; // x 为数字
var x = 'Bill'; // x 为字符串

数据类型的分类

简单数据类型 和 复杂数据类型（object）

简单数据类型 说明
Number 数字型，包含 整型值和浮点型值，如 21、0.21 0
Boolean 布尔值类型，如 true、false，等价于 1 和 0 false
String 字符串类型，如 ‘哈喽’ 注意：JS 里面，字符串都带引号 ‘’
Undefined var a; 声明了变量 a 但是没有给值，此时 a = undefined undefined
Null var a = null; 声明了变量 a 为空值 null

数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数（浮点数）。

1
2
var age = 20; // 整数
var Age = 3.14; // 小数（浮点数）

  • 数字型进制

    1
    2
    3
    4
    5
    6
    7
    // 最常见的进制有二进制、八进制、十进制、十六进制
    // 1. 八进制数字序列范围：0~7
    var num1 = 07; // 对应十进制的 7
    var num2 = 019; // 对应十进制的 19
    var num3 = 08; // 对应十进制的 8
    // 2. 十六进制数字序列范围：0~9 以及 A~F
    var num = 0xa;

  • 数字型范围

    1
    2
    3
    // JavaScript 中数值的最大值和最小值
    alert(Number.MAX_VALUE); // 1.7976931348623157e+308
    alert(Number.MIN_VALUE); // 5e-324

  • 数字型三个特殊值

    1
    2
    3
    alert(Infinity); // Infinity
    alert(-Infinity); // -Infinity
    alert(NaN); // NaN
    • Infinity，代表无穷大，大于任何数值
    • -Infinity，代表无穷小，小于任何数值
    • NaN，Not a number，代表一个非数值

  • isNaN()

    1
    2
    3
    4
    5
    6
    7
    // 用来判断一个变量是否为非数字的类型，返回 true 或 false
    // isNaN(x)	 如果 x 是数字，返回 false，不是则返回 true
    var usrAge = 21;
    var isOK = isNaN(userAge);
    console.log(isNaN); // 输出结果为 false，21 不是一个非数字
    var usrName = 'andy';
    console.log(isNaN(userName)); // 输出结果为 true， "andy" 是一个非数字

字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号 ‘’

1
2
3
4
5
var strMsg = 'Hello,World.'; // 使用双引号表示字符串
var strMsg2 = '你好，世界'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = Hello,
  World; // 报错，没使用引号，会被认为是 js 代码，且 js 没有这些语法

因为 HTML 标签里面的属性使用的是双引号， JS 这里更推荐使用 单引号

字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

1
2
3
4
var strMsg = "Hello,'World'";	// 可以用""包含''
var strMsg2 = 'Hello,"World"';	// 也可以用''包含""
// 常见错误
var badQuotes = 'What on earth?" // 报错，不能 单双引号搭配
字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，称之为转义符。

转义符都是以 \ 开头，常用的转义符以及其说明如下：

转义符 解释说明
\n 换行符， n 是 newline 的意思
\ \ 斜杠\
\‘ ‘ 单引号
\“ “ 双引号
\t tab 缩进
\b 空格，b 是 blank 的意思
字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的 length 属性可以获取整个字符串的长度。

1
2
var strMsg = 'Hello,World!';
alert(strMsg.length); // 显示 12
字符串拼接
  • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
1
2
3
4
5
6
//1. 字符串"相加"
alert('Hello' + ' ' + 'World'); // 输出结果为 Hello World
//2. 数值字符串"相加"
alert('520' + '1314'); // 输出结果为 5201314
//3. 数值字符串 + 数值
alert('11' + 12); // 输出结果为 1112

+ 号总结口诀： 数值相加，字符相连

字符串拼接加强
1
2
3
4
5
console.log('Littleluo' + 520); // 只要有字符就会相连  输出结果为 Littleluo520
var age = 18;
// console.log('Littleluo age岁啦');       // 这样不行哦
console.log('Littleluo' + age); // Littleluo18
console.log('Littleluo' + age + '岁啦'); // Littleluo18岁啦
  • 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
  • 变量是不能添加引号的，因为加引号的变量会变成字符串

布尔型 Boolean

布尔类型有两个值：true 和 false，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型想加的时候，true 的值为 1，false 的值为 0。

1
2
console.log(true + 1); // 输出结果为 2
console.log(false + 1); // 输出结果为 1

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined（如果进行相连或者相加时，注意结果）

1
2
3
4
5
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 的值，里面存的值为空

1
2
3
4
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型
1
2
3
4
5
6
7
8
9
10
var num = 10;
console.log(typeof num); // 输出结果为 number
var str = 'Littleluo';
console.log(typeof str); // 输出结果为 string
var flag = true;
console.log(typeof flag); // 输出结果为 boolean
var vari = undefined;
console.log(typeof vari); // 输出结果为 undefined
var timer = null;
console.log(typeof timer); // 输出结果为 object
字面量

字面量实在源代码中一个固定值的表示发，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：1, 2, 3 // 数字型
  • 字符串字面量：’Hello World’, “前端 Web” // 字符串型
  • 布尔字面量：true, false // 布尔型

数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

转换为字符串

方式 说明 案例
toString() 转换成字符串 var num = 1; alert(num.toString());
String() 强制转换 转换成字符串 var num = 1; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num + ‘我是字符串’);
  • toString() 和 String 使用方式不一样。
  • 三种转换方式，更推荐使用第三种加号拼接字符串转换方式，这一种方式也称为隐式转换。

转换为数字型（重点）

方式 说明 案例
parseInt(string) 函数 将 string 类型转换成整数数值型 parseInt(‘78’)
parseFloat(string) 函数 将 string 类型转换成浮点数数值型 parseFloat(‘3.14’)
Number() 强制转换函数 将 string 类型转换为数值型 Number(‘12’)
js 隐式转换(- * /) 利用算术运算隐式转换为数值型 ‘12’ - 0
  • 注意 parseInt 和 parseFloat 单词的大小写

转换为布尔型

方式 说明 案例
Boolean() 函数 其他类型转换成布尔值 Boolean(‘true’);
  • 代表空、否定的值会被转换为 false，如” “、0、NaN、null、undefined
  • 其余值都会被转换为 true
1
2
3
4
5
6
7
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('你好')); // true
console.log(Boolean(12)); // true

4. 运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。

JavaScript 中常用的运算符有：

  • 算术运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

算术运算符

算术运算符使用的符号，用于执行两个变量或值的算术运算。

运算符 描述 实例
+ 加 10 + 20 = 30
- 减 10 - 20 = -10
* 乘 10 * 20 = 200
/ 除 10 / 20 = 0.5
% 取余数（取模）,返回除法的余数 9 % 2 = 1

浮点数的精度问题

浮点数值的最高精确度是 17 位小数，但在进行算术计算时其精确度不如整数。

1
2
var result = 0.1 + 0.2; // 结果不是 0.3，而是 0.30000000000000004
console.log(0.07 * 100); // 结果不是 7，  而是 7.000000000000001

表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给我们，称为返回值

递增和递减运算符

如果需要反复给数字变量添加或减去 1，可以使用 递增（ ++ ）和递减（ – ）运算符来完成。

在 JavaScript 中，递增（ ++ ）和递减（ – ）既可以放在变量前面，也可以放在变量后面。

放在变量前面时，称为前置递增（递减）运算符。

放在变量后面时，称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

前置递增运算符

++num 前置递增，就是自加 1，类似于 num = num + 1

使用口诀：先自加，后返回值

1
2
3
4
5
var age = 10;
++age; // 相当于 age = age + 1
console.log(age); // 返回结果为 11
var p = 10;
console.log(++p + 10); // 返回结果为 21

后置递增运算符

num++ 后置递增，就是自加 1，类似于 num = num + 1

使用口诀：先返回原值，后自加

1
2
3
var age = 10;
console.log(age++ + 10); // 结果为 20
console.log(age); // 结果为 11

比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

运算符 说明 案例 结果
< 小于号 1 < 2 true
> 大于号 1 > 2 false
>= 大于等于号（大于或者等于） 2 >= 2 true
<= 小于等于号（小于或者等于） 3 <= 2 false
== 判等号（会转型） 37 == 37 true
!= 不等号 37 != 37 false
=== !== 全等 要求值和 数据类型都一致 37 === ‘37’ false

逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。开发中经常用于多个条件的判断

逻辑运算符 说明 案例
&& “逻辑与”，简称”与” and true && false
|| “逻辑或”，简称”或” or true || false
! “逻辑非”，简称”非” not ! true
  1. 逻辑与 && 两侧值都为 true，结果才是 true 只要一侧为 false，结果就为 false
1
2
console.log(3 > 2 && 2 > 3); // 左边为 true，右边为 false，结果返回 false
console.log(3 > 2 && 2 < 3); // 两边都为 true，结果返回 true
  1. 逻辑或 || 两侧值都为 false，结果才是 false 只要一侧为 true，结果就为 true
1
2
console.log(3 > 5 || 3 > 2); // 左边为 false，右边为 true，结果返回 true
console.log(3 > 5 || 3 < 2); // 左边为 false，右边为 false，结果返回 false
  1. 逻辑非 ! 也叫作取反符，用来取一个布尔值相反的值

非真既假，非假既真

1
console.log(!true); // 结果返回 false

短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

  1. 逻辑与
  • 语法：表达式 1 && 表达式 2
  • 如果第一个表达式的值为真（true），则返回表达式 2
  • 如果第一个表达式的值为假（false），则返回表达式 1
1
2
3
4
console.log(123 && 456); // 结果返回 456
console.log(0 && 123); // 结果返回 0
console.log(0 && 123 && 456); // 结果返回 0
console.log(123 && 456 && 789); // 结果返回 789
  1. 逻辑或
  • 语法：表达式 1 || 表达式 2
  • 如果第一个表达式的值为真（true），则返回表达式 1
  • 如果第一个表达式的值为假（false），则返回表达式 2
1
2
3
console.log(123 || 456); // 结果返回 123
console.log(0 || 456); // 结果返回 456
console.log(123 || 456 || 789); // 结果返回 123

逻辑中断会影响我们程序运行的结果

1
2
3
var num = 0;
console.log(123 || num++); // 结果返回 123
console.log(num); // 结果返回 0

赋值运算符

概念：用来把数据赋值给变量的运算符

赋值运算符 说明 案例
= 直接赋值 var usrName = ‘我是值’;
+=、-= 加、减一个数 后再赋值 var age = 10; age += 5; // 15
*=、/=、%= 乘、除、取模 后再赋值 var age = 2; age *= 5; // 10 
1
2
3
4
var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

运算符优先级

优先级 运算符 顺序
1 小括号（） （）
2 一元运算符 ++ – !
3 算术运算符 先 * /% 后 + -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符 ,
  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高