前端三剑客：一文入门JavaScript
前言
说到JavaScript，大家总是会想到Java，那么，JavaScript和Java有什么关系呢？稍加了解，我们就会发现，有个鸡毛关系。之所以命名为JavaScript，可能是因为Java是当时最流行的编程语言，带有Java有助于这门新生语言的传播。
目录
初始JavaScript（JS）
JavaScript是什么？
JS运行过程
JS的组成
引入方式
输入输出
JS基础语法
【1】变量
（1）创建变量
（2）动态类型
【2】基本数据类型
（1）number数字类型
（2）string
（3）boolean
（4）undefined和null
【3】运算符
【4】数组
（1）创建数组
（2）获取数组元素
（3）新增数组元素
（4）删除数组元素
（5）遍历数组
【5】函数
（1）函数定义
（2）变量作用域
【6】对象
（1）创建对象
（2）属性获取
JS（Web API）
【1】什么是Web API
【2】获取元素
【3】操作元素
（1）获取/修改元素内容
（2）获取/修改表单元素的属性
（3）获取/修改样式属性
初始JavaScript（JS）
JavaScript是什么？
JavaScript是世界上最流行的编程语言之一。主要在浏览器上运行。js可以用来：
- 网页开发（更复杂的特效和网页交互）
- 网页游戏开发
- 服务器开发
- 桌面程序开发
- 手机app开发
JS运行过程
- 编写的代码存储在硬盘上（外存）
- 双击html文件，浏览器会读取文件，将文件内容加载到内存中
- 浏览器会解析用户编写的代码，将代码翻译成二进制的、可以让计算机识别的指令（解释器的工作）
- 得到的二进制指令会被CPU加载并执行
JS的组成
- ECMAScript（ES）：JavaScript语法
- DOM：页面文档对象模型，对页面中的元素进行操作
- BOM：浏览器对象模型，对浏览器窗口进行操作
引入方式
- 行内式：直接嵌入到html元素的内部
- 内嵌式：写到Script标签中
- 写到单独的JS文件中
这种情况下，script标签中间不能写代码，必须空着
输入输出
- prompt：弹出一个输入框
- alert：弹出一个警示对话框，输出结果
- console.log：在控制台上打印日志
JS基础语法
与Java语法进行比对，主要罗列出其中与Java语法不同的地方。
【1】变量
（1）创建变量
创建变量时没有类型的区分，统一使用关键字"var"。JavaScript还支持使用let定义变量。
“+”字符串拼接，“\n”换行
var name = 'zhangsan';
var age = 20;（2）动态类型
- JS的变量类型是在程序运行过程中才确定的；
- 随着程序的运行，变量的类型可能发生改变。
C、C++、Java等静态类型语言，变量在创建的时候类型就已经确定，不能在运行时发生改变，如果尝试改变，会编译错误。
【2】基本数据类型
JS中内置的几种数据类型：
- number：数字。不区分整数和小数
- boolean
- string
- undifined：表示未定义的值
- null：表示空值
（1）number数字类型
JS中不区分整数和浮点数。
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头特殊的值：
- Infinity：无穷大；
- -Infinity：负无穷大；
- NaN：表示当前结果不是一个数字。
【注】
- 字符串+数字，不是NaN；而是一个拼接的字符串，会将数字隐式转换为字符串。
- 使用isNaN函数判断是不是一个非数字。
（2）string
字符串需要使用引号引起来，单引号/双引号都可。当字符串中本身含有引号时，推荐单双引号搭配使用，也可以使用转义字符。
var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号使用string的length属性来求长度。
字符串拼接（使用+号）：
- 可以字符串与字符串拼接，也可以字符串与数字拼接；
- 但是两个数字进行加运算是数字间的运算。
（3）boolean
参与运算时当作1和0来看待。
（4）undefined和null
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10
- 如果一个变量没有进行初始化，结果就是undefined，是undefined类型。undefined和字符串进行相加，进行字符串的拼接；和数字相加，结果为NaN。（表示变量未初始化）
- null表示当前的变量是一个“空值”（表示变量值为空）
【3】运算符
运算符、条件语句、循环语句和Java的语法基本相等，这里略过，主要描述它们的不同之处。
比较运算符：
- ==（比较想等）会进行隐式的类型转换
- ===不会进行隐式的类型转换
- !=进行隐式的类型转换
- !==不进行隐式的类型转换
【4】数组
（1）创建数组
JS数组不要求元素是同一个类型。
// 使用new关键字创建
var arr = new Array();
//使用字面量方式创建
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"（2）获取数组元素
通过下标进行访问：
- 如果下标超过数组范围，结果为undefined；
- 不要给数组名直接赋值，此时数组就变成一个普通元素。
（3）新增数组元素
- 通过修改length新增：此时末尾新增的元素都为undefined；
- 通过下标新增：下标超过数组范围时，会在指定位置插入新元素，此时超出部分的其他元素为undefined；
- 使用push函数追加元素；
（4）删除数组元素
使用splic函数删除元素。
var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]（5）遍历数组
for(var i of arr){
console.log(i);
}【5】函数
（1）函数定义
- 可以通过function来定义函数
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
- 函数需要在调用后才会执行
- 函数的定义和调用的先后顺序没有要求（但是变量必须先定义后使用）
- 函数的实参和形参个数可以不相等（如果实参比形参多，多出来的参数不参与运算；如果实参比形参少，此时少的形参值为undefined。）
- 也可以通过函数表达式来定义函数
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}形如使用function（）{}定义了一个匿名函数，然后将这个匿名函数用一个变量来表示。就可以通过这个变量来调用函数。
（2）变量作用域
分为全局变量和局部变量，作用域和java中变量类似。但需要注意的是，函数体中，不加var的变量是全局变量。
function test() {
num = 100;
}
test();
console.log(num);
// 执行结果
100【6】对象
（1）创建对象
- 使用字面量创建对象
var a={
属性名1：属性值1，
属性名2：属性值2，
}
- 属性和方法通过键值对来组织；
- 方法的值是一个匿名函数；
- 创建的对象可以随时添加属性。
- 使用new Object创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}（2）属性获取
可以通过以下两种方式来获取属性：
- 对象变量名.属性名
- 对象变量名['属性名']
JS（Web API）
【1】什么是Web API
JS可以分为三大部分：
- ECMAJavaScript：就是上面的基础语法部分；
- DOM API：操作页面结构
- BOM API：操作浏览器
Web API就包含DOM和BOM。
【2】获取元素
| 函数名 | 作用 |
| querySelector（selectors） | 获取某个元素，保证选择器只能筛选一个元素 |
| querySelectorAll（selectors） | 获取多个元素 |
- selectors为CSS中的选择器类型；
- 可以放在任意元素上，调用这个方法的元素将作为本次查找的根元素；
- 需要返回与css选择器匹配的所有元素列表时，需要使用第二个函数；
- 使用第一个函数，选择器有多个匹配元素时，返回的是匹配的第一个元素。
【3】操作元素
（1）获取/修改元素内容
- 使用innerText
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js hello js';
- 不识别html标签，读取结果不保留源码中的换行符和空格；
- 在使用innerText修改标签内容时，无法识别修改内容中的标签，span标签会被当成文本进行设置。
- 使用innerHTML
hello world
hello world
- 识别html标签。读取结果保留源码中的空格和换行；
- 同时在修改页面内容的时候，可以识别html标签，也就是可以修改页面的布局。
（2）获取/修改表单元素的属性
表单（主要指input标签）的以下属性都可以通过DOM来修改：
- value：input的值；
- disabled：禁用（禁止修改）；
- checked：复选框会使用；
- selected：下拉框会使用；
（3）获取/修改样式属性
- 修改行内样式属性
行内样式，通过style直接在标签上设置的样式。优先级很高。
通过点击事件实现字体颜色的切换（红黑之间切换）：
Document
这是一个会变颜色的字体
- 类名样式操作
element.className = [CSS 类名];
通过点击事件切换黑夜模式：
Document
模式切换
