# JavaScript
JavaScript 是 web 开发者必学的三种语言之一：
- *HTML* 定义网页的内容
- *CSS* 规定网页的布局
- *JavaScript* 对网页行为进行编程
## 什么是JavaScript？
JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在[HTML](https://baike.baidu.com/item/HTML)（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript的组成：
- 核心（*ECMAScript*）
- 文档对象模型（*DOM*）
- 浏览器对象模型（*BOM*）
JavaScript的特点：
- 脚本语言
- 基于对象
- 简单
- 动态性
- 跨平台性
JavaScript的引入方式：
在HTML文件中引入JS有两种方式:第一种:内嵌式.将JS代码直接嵌入HTML页面中。则该JS代码只对本页面有效。
使用方法：在HTML页面中使用<script></script>标签引入。如下：
```javascript
<script>
</script>
```
第二种：外联式。独立称为一个以.js为后缀的文件，并在HTML页面中引入.
```javascript
<script src="../js/文件名.js" type"text/javascript" charset="utf-8"></script>
```
## JS基本语法
### 1 定义变量
#### 1）变量命名
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
#### 2）变量的声明
var 变量名;//JS变量可以不声明，直接使用。默认值:undefined
#### 3）变量的取值
var 变量名 =值;//JS变量是弱类型，即同一个变量可以洗存放不同类型数据。
```javascript
var num = 'string';//单引号与双引号都可以表示字符串
```
### 2 数据类型
#### 六种数据类型
- ***undefined***:Undefined类型只有一个值，即undefined.l 当声明的变量未初始化时，该变量的默认值是 undefined。
- ***Null类型*** :另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
- ***Boolean类型*** :它有两个值 true 和 false （即两个 Boolean 字面量）。
- ***Number类型*** :任何数字都是number类型。
- ***String类型*** ：字符或字符串。
- ***Object类型*** ：对象类型，
```
String字符串：
--在js中字符串需要使用引号引起来
--使用双引号或单引号都可以，但不能混着用
--引号不能嵌套，双引号不能放双引号，单引号不能放单引号，但两者可以相互嵌套
```
### 3 运算符
#### 1）算数运算符
| 运算符 | 描述 |
| ------ | ------ |
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 求余数 |
| ++ | 累加 |
| -- | 递减 |
#### 2）赋值运算符
| 运算符 | 描述 |
| ------ | -------------- |
| = | 赋值 |
| += | 先加再赋值 |
| -= | 先减再赋值 |
| *= | 先乘再赋值 |
| %= | 先求余数再赋值 |
| /= | 先除再赋值 |
#### 3）比较运算符
| 运算符 | 描述 |
| ------ | ------------------------------- |
| == | 判断是否等于 |
| === | 不进行数据类型转换,判断是否相等 |
| != | 判断不等于 |
| > | 大于 |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
#### 4）逻辑运算符
| 运算符 | 描述 |
| ------ | :---------------------------------------------: |
| && | 逻辑与。两个表达式均为true则结果为true |
| \|\| | 逻辑或。两个表达式只要有一个为true,则结果为true |
| ! | 取反。 |
### 4 基本操作
#### 1) 获取页面元素
javascript主要是通过三种方法获取：
```javascript
var id=document.getElementById("id") //根据元素ID值获取
var name=document.getElementsByName("name") //根据元素NAME属性值获取，得到一个数组，需遍历
var tarname=document.getElementsByTarName("tarname") //根据元素名获取，得到一个数组，需遍历
```
#### 2) 输出操作
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 弹出警告框
- 使用 document.write() 向页面中写内容
- 使用 innerHTML 输出HTML 元素
- 使用 console.log() 写入浏览器控制台
```html
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
document.write(5 + 6);
alert("你好！")；
console.log("20")//日志会写入浏览器控制台，不会显示在页面上
</script>
</body>
</html>
```
### 5 类型转换
#### 1) 其他类型转换为Number
```javascript
/*
* 将其他的数据类型转换为Number
* 转换方式一：
* 使用Number()函数
* - 字符串 --> 数字
* 1.如果是纯数字的字符串，则直接将其转换为数字
* 2.如果字符串中有非数字的内容，则转换为NaN
* 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
* - 布尔 --> 数字
* true 转成 1
* false 转成 0
*
* - null --> 数字 0
*
* - undefined --> 数字 NaN
*
* 转换方式二：
* - 这种方式专门用来对付字符串
* - parseInt() 把一个字符串转换为一个整数
* - parseFloat() 把一个字符串转换为一个浮点数
*/
var a = "123";
//调用Number()函数来将a转换为Number类型
a = Number(a);
a = '1358';
a=parseInt(a);
/*
* parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数
*/
a = "123.456";
a = parseFloat(a);
/*
* 如果对非String使用parseInt()或parseFloat()
* 它会先将其转换为String然后在操作
*/
```
#### 2) 强制转换
```javascript
/*
* 强制类型转换
* - 指将一个数据类型强制转换为其他的数据类型
* - 类型转换主要指，将其他的数据类型，转换为
* String Number Boolean
*
*/
a = undefined;
a = String(a); // "undefined" 强制转换
```
### 6 进制
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//2 8 16 10
//0b 开头 0B 表示二进制 。
//0 开头 表示 8进制
//0x 开头 0X 表示16进制
var a = 12;
var b = 070;
//alert(b); 56
var date1 = new Date();
//alert(Boolean(date1));
//当一个字符串 做 - * / 运算的时候 也会自动转换成 number 类型 。
var str = "123";
result = str/1;
//alert( typeof result)
//alert(result)
var result = 1 + +"2" +3 ;
alert(result)
//++ --
</script>
</head>
<body>
</body>
</html>
```
### 7 超链接
超链接作用：1、跳转页面 2、找到锚点 3、发送邮件，打电话 4、触发JavaScript...
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/test.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
function cn(){
alert("内部的JS")
}
//超链接 1.跳转页面 2.找到锚点 3.发送邮件，打电话 4.触发javaScript...
</script>
</head>
<body>
<p id='#'>首部</p>
<button onclick="alert('你点我了。!')">点我</button>
<a href="javascript:on()">点我</a>// 触发js
<a href="javascript:alert('点我了 。。走你')">点我</a>
<a href="http://www.baidu.com">百度</a>// 跳转页面
<a href='#'>haha</a> //找到锚点
</body>
</html>
```
### 8 标识符
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 标识符
* - 在JS中所有的可以由我们自主命名的都可以称为是标识符
* - 例如：变量名、函数名、属性名都属于标识符
* - 命名一个标识符时需要遵守如下的规则：
* 1.标识符中可以含有字母、数字、_、$
* 2.标识符不能以数字开头
* 3.标识符不能是ES中的关键字或保留字
* 4.标识符一般都采用驼峰命名法
* - 首字母小写，每个单词的开头字母大写，其余字母小写
* helloWorld xxxYyyZzz
*
* - JS底层保存标识符时实际上是采用的Unicode编码，
* 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符
*/
/*var if = 123;
var 小明 = 123;
console.log(if);*/
</script>
</head>
<body>
</body>
</html>
```
### 9 区分大小写
```javascript
/* var variable
var a
var A
* 1.JS中严格区分大小写
* 2.JS中每一条语句以分号(;)结尾
* - 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
* 而且有些时候，浏览器会加错分号，所以在开发中分号必须写
* 3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化
*
*/
```
## JS进阶用法
### 1 创建对象
```javascript
<script type="text/javascript">
/*
new 表示在堆中新开辟一个空间 。
*
* */
//方式一 用new关键字创建obj对象
var obj = new Object();
obj.name = "tom";
obj.age = 20;
//alert(obj.name)
//方式二 直接用var创建对象，对象中也可以创建对象
//在js中，数组用[]裹起来，数组之间用，隔开
var obj2 = {
name:"张三",
age:20,
friend:[{
name:"tom",
age:30
},{
name:"tom2",
age:30
},{
name:"tom3",
age:30
},{
name:"tom4",
age:30
}],
var:"abc",
play:function(a,b){
alert("玩游戏!"+(a+b))
}
}
//alert(obj2.name)
//obj2.play(10,20)
//alert(obj2.friend.name);
//alert(obj2.var)
//alert("haha" in obj2);
var abc = "123";
var efg = "234";
efg = "hhh";
//alert(abc);
//alert(efg);
var jack = obj2;
jack.name="杰克";
//alert(obj2.name);
//alert(abc==efg);
alert(jack == obj)
</script>
```
### 2 创建函数
**函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块**
#### 1) 两种声明方法
```javascript
//在函数中 如果变量没有用var 声明 。 在调用完一次函数之后，会把这个变量 提升成全局变量。
//1、声明式函数
function 函数名(["参数列表"]){
//函数体
}
<script>
test(12);
function test(age){
console.log(age);}
//test(12)
</script>
//2、赋值式函数
var 函数名 = function(["参数列表"]){
//函数体
}
<script>
var gh = function(name) {
alert(name)
}
gh("tim");
</script>
```
#### 2) 调用函数
```javascript
// 直接调用
函数名(实参列表);
<script>
function my (a, b) {
return a * b;
}
my (10, 2);
// my (10, 2) 返回 20
</script>
//在方法中调用
定义名称.函数名();
<script type="text/javascript">
var myObject = {
firstName: "zhang",
lastName: "san",
fullName: function() {
return this.firstName+""+this.lastName;
}}
alert(myObject.fullName());
</script>
//在构造函数中调用 用new关键字创造一个对象，这个对象继承了函数的方法和属性
<script type="text/javascript">
function Function(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new Function(“zhang", “san");
x.firstName;
</script>
//递归调用 在函数内部调用函数本身
function 函数名(){
代码
函数名();
}
<script type="text/javascript">
function sum(num) {
if(num <= 1) {
return 1;
} else {
return num + sum(num - 1);
}}
console.log(sum(5));
</script>
```
#### 3) 参数
参数类型 ：
形参：定义函数时使用的参数，接收调用该函数时传递的参数
实参：调用函数时传递给函数的实际参数
#### 4) 直执行函数
```javascript
//( 函数 )( 函数的参数 。 ) 用括号括起来的函数表示直接调用自己，就会直接执行这个函数
// (function a(){
// alert("哈哈")
// })();
(function b(c,d){
alert(c+d)
})(10,20);
```
### 3 continue break return
```javascript
//return 1. 表示方法的返回值 。 2. 表示跳出方法 。
function sum(a,b,c){
return a+b+c;
alert("123");
}
//var r = sum(10,20,30);
//alert(r);
//continue 只能用在循环结构 。 结束本次循环回到循环头部继续下次循环。
//break 表示强制跳出本层循环 。 只跳一层循环。
//当return 用在循环结构中的时候，不管多少层循环 。 直接全部跳出 。
```
### 4 this用法
```javascript
<script type="text/javascript">
var a = 10;
function fun(){
//this 谁调用方法，this就代表这个方法的调用者 。
alert( "哈哈" );
alert(this.a)//this 带指 window对象 。
}
fun();//window.
var obj = {
name:"张三",
play:function(){
alert("张三 play...");
alert(this.name) //this指obj这个对象
}
}
obj.play();
</script>
```
### 5 原型函数prototype 构造函数constructor
**构造函数，就是提供一个生成对象的模板，并描述对象的基本结构的函数**
构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写
构造函数和普通函数的区别在于：调用方式不一样
普通函数的调用方式：直接调用 person();
构造函数的调用方式：需要使用new关键字来调用 new Person();
```javascript
<script type="text/javascript">
//构造函数
function Person(name){
this.name=name
}
//每个函数都有一个原型函数
Person.prototype.toString = function(){
return "这个对象的名字是:"+this.name;
}
var p1 = new Person("张三");
alert(p1);
</script>
<script type="text/javascript">
//JS类 。
function Person(){
}
//prototype 类名.protorype 可以访问到类的原型对象 。
Person.prototype.a="哈哈";
var p1 = new Person();
var p2 = new Person();
//类拿到原型对象 。 类名(构造器名称).prototype
// 对象.__proto__ 通过这个去拿到原型对象 。
// 10W 中国
alert(Person.prototype == p1.__proto__);
p1.__proto__.a="呵呵";
alert(p2.__proto__.a);
</script>
```
### 7 数组
```javascript
//声明一维数组 需要用到 new Array()
<script type="text/javascript">
var arr = new Array();
arr[0]=1;
arr[1]=2;
arr[2]=3;
arr[3]=4;
arr[4]=5;
arr.length=10;
for(var s in arr){
alert(s);
}
//alert(arr.length)
</script>
//声明二维数组
<script type="text/javascript">
//int [] arr = new int [5];
var obj = new Object();
obj.name = "张三。";
var arr = [10,120,32,23,12,true,false,"132",obj];
var arr2 = [[1,2,3],[4,5,6,7,8],[9,0]];
//alert(arr2[0].length)
//alert(arr2[1].length)
// for (var i=0;i<arr2.length;i++) {
// for (var j=0;j<arr2[i].length;j++) {
// alert(arr2[i][j]);
// }
// }
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
//push向数组后加入数据
var result2 = arr.pop();
//pop 删除并返回最后一个数组元素
//alert(result2);
</script>
//sort 进行排序操作
<script type="text/javascript">
arr = [5,4,2,1,3,6,8,7];
//
arr.sort(function(a,b){
//升序排列
return a - b;
//降序排列
//return b - a;
});
console.log(arr);
</script>
```
## JS DOM操作
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="btn">我是一个按钮</button>
<!--
我们可以在事件对应的属性中设置一些js代码，
这样当事件被触发时，这些代码将会执行
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>
-->
<!---->
<script type="text/javascript">
/*
* 浏览器已经为我们提供 文档节点 对象这个对象是window属性
* 可以在页面中直接使用，文档节点代表的是整个网页
*/
//console.log(document);
//获取到button对象
var btn = document.getElementById("btn");
// innerTEXT =
// innerHTML =
//修改按钮的文字
btn.innerHTML = "I'm Button";
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){
alert("你还点~~~");
};
</script>
</body>
</html>
```
```html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
* 读取到一行就运行一行,如果将script标签写到页面的上边，
* 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
* 会导致无法获取到DOM对象
*/
/*
* onload事件会在整个页面加载完成之后才触发
* 为window绑定一个onload事件
* 该事件对应的响应函数将会在页面加载完成之后执行，
* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
*
*/
window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<!--<script type="text/javascript">
/*
* 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
*/
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("hello");
};
</script>-->
</body>
</html>
```
## JS BOM操作
```javascript
BOM DOM EcmaScript ...
ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，
那么BOM（浏览器对象模型）才是真正的核心。
BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而
控制浏览器的各种行为。
window對象是BOM的核心 ，它表示一个浏览器的实例。
在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。
全局作用域：
window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。
* - BOM对象
* Window
* - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
* Navigator
* - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
* Location
- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History
* - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
* 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
* 而且该操作只在当次访问时有效
/* window.history
* length
* - 属性，可以获取到当成访问的链接数量
*/
//alert(history.length);
/*
* back()
* - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
*/
//history.back();
/*
* forward()
* - 可以跳转下一个页面，作用和浏览器的前进按钮一样
*/
//history.forward();
/*
* go()
* - 可以用来跳转到指定的页面
* - 它需要一个整数作为参数
* 1:表示向前跳转一个页面 相当于forward()
* 2:表示向前跳转两个页面
* -1:表示向后跳转一个页面
* -2:表示向后跳转两个页面
*/
* Screen
* - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
*
*
* 这些BOM对象在浏览器中都是作为window对象的属性保存的，
* 可以通过window对象来使用，也可以直接使用
*
*
* window.location
* /*
* 如果直接将location属性修改为一个完整的路径，或相对路径
* 则我们页面会自动跳转到该路径，并且会生成相应的历史记录
*/
//location = "http://www.baidu.com";
//location = "01.BOM.html";
/*
* assign()
* - 用来跳转到其他的页面，作用和直接修改location一样
*/
//location.assign("http://www.baidu.com");
/*
* reload()
* - 用于重新加载当前页面，作用和刷新按钮一样
* - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
*/
//location.reload(true);
/*
* replace()
* - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
* 不会生成历史记录，不能使用回退按钮回退
*/
location.replace("01.BOM.html");
```
## JSON
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理
-->
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
/*
* JSON ...
*
* var obj = [{
* "name":"zhangsan1",
* "age":"20"
* },{
* "name":"zhangsan2",
* "age":"20"
* }]
*
* JSON
* - JS中的对象只有JS自己认识，其他的语言都不认识
* - JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
* 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
* - JSON
* - JavaScript Object Notation JS对象表示法
* - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
* 其他的和JS语法一致
* JSON分类：
* 1.对象 {}
* 2.数组 []
*
* JSON中允许的值：
* 1.字符串
* 2.数值
* 3.布尔值
* 4.null
* 5.对象
* 6.数组
*/
//创建一个对象
var arr = '[1,2,3,"hello",true]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';
/*
* 将JSON字符串转换为JS中的对象
* 在JS中，为我们提供了一个工具类，就叫JSON
* 这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
*/
var json = '{"name":"孙悟空","age":18,"gender":"男"}';
/*
* json --> js对象
* JSON.parse()
* - 可以将以JSON字符串转换为js对象
* - 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
*/
var o = JSON.parse(json);
var o2 = JSON.parse(arr);
//console.log(o.gender);
//console.log(o2[1]);
var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
/*
* JS对象 ---> JSON
* JSON.stringify()
* - 可以将一个JS对象转换为JSON字符串
* - 需要一个js对象作为参数，会返回一个JSON字符串
*/
var str = JSON.stringify(obj3);
//console.log(str);
/*
* JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
*/
var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';
JSON.parse(str3);
</script>
</head>
<body>
</body>
</html>
```
