前言
说到JavaScript，大家总是会想到Java，那么，JavaScript和Java有什么关系呢？稍加了解，我们就会发现，有个鸡毛关系。之所以命名为JavaScript，可能是因为Java是当时最流行的编程语言，带有Java有助于这门新生语言的传播。
目录
初始JavaScript（JS）
JavaScript是什么？
JavaScript是世界上最流行的编程语言之一。主要在浏览器上运行。js可以用来：
- 网页开发（更复杂的特效和网页交互）
- 网页游戏开发
- 服务器开发
- 桌面程序开发
- 手机app开发
JS运行过程
- 编写的代码存储在硬盘上（外存）
- 双击html文件，浏览器会读取文件，将文件内容加载到内存中
- 浏览器会解析用户编写的代码，将代码翻译成二进制的、可以让计算机识别的指令（解释器的工作）
- 得到的二进制指令会被CPU加载并执行
JS的组成
- ECMAScript（ES）：JavaScript语法
- DOM：页面文档对象模型，对页面中的元素进行操作
- BOM：浏览器对象模型，对浏览器窗口进行操作
引入方式
- 行内式：直接嵌入到html元素的内部
- 内嵌式：写到Script标签中
- 写到单独的JS文件中
这种情况下，script标签中间不能写代码，必须空着<script src="hello.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 <span>hello js</span>';
- 不识别html标签，读取结果不保留源码中的换行符和空格；
- 在使用innerText修改标签内容时，无法识别修改内容中的标签，span标签会被当成文本进行设置。
- 使用innerHTML
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取页面内容
console.log(div.innerHTML);
// 修改页面内容
div.innerHTML = '<span>hello js</span>'
</script>
- 识别html标签。读取结果保留源码中的空格和换行；
- 同时在修改页面内容的时候，可以识别html标签，也就是可以修改页面的布局。
（2）获取/修改表单元素的属性
表单（主要指input标签）的以下属性都可以通过DOM来修改：
- value：input的值；
- disabled：禁用（禁止修改）；
- checked：复选框会使用；
- selected：下拉框会使用；
（3）获取/修改样式属性
- 修改行内样式属性
行内样式，通过style直接在标签上设置的样式。优先级很高。
通过点击事件实现字体颜色的切换（红黑之间切换）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:black">这是一个会变颜色的字体</p>
<input type="button" value="点击">
<script>
var p=document.querySelector("p");
var btu=document.querySelector("input");
// 通过函数将其与点击事件相关联
btu.onclick=function(){
var color=p.style.color;
console.log("color:"+color);
if(color=="black"){
p.style.color="red";
}else{
p.style.color="black";
}
}
</script>
</body>
</html>
- 类名样式操作
element.className = [CSS 类名];
通过点击事件切换黑夜模式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100%;
height: 600px;
color:black;
}
.white{
background-color: white;
color:black;
}
.black{
background-color: black;
color:white;
}
</style>
</head>
<body class="white">
<div id="p" class="white"><p1>模式切换</p1></div>
<script>
var p=document.querySelector("div");
p.onclick=function(){
var classname=p.className;
if(classname=="white"){
p.className="black";
}else{
p.className="white";
}
}
</script>
</body>
</html>
