# JavaScript
JavaScrip是互联网上最流行的脚本语言，这门语言可用于HTML和web。
## 一、JavaScript用法
如需在HTML页面中插入JavaScrip，需使用<script></script>标签。
通常会将JavaScript放于head部分或页面底部，不会干扰页面的内容。也可以把脚本保存到外部文件中，文件扩展名为.js。使用时对该文件进行引用。
## 二、JavaScript输出
```html
<!--
1.使用window.alert()弹出警告框
2.使用document.write()方法将内容写到HTML文档中
3.使用innerHTML写入到HTML元素中
4.使用console.log()写入到浏览器的控制台
-->
<script type="text/javascript">
window.alert(5+6);
document.write('1230');
document.getElementById('demo').innerHtml='456';
console.log("我是控制台日志");
</script>
```
## 三、JavaScript语法
### 1、变量
- 变量命名
1.变量必须由字母、下划线、美元符号开头
2.变量命名可以添加数字
3.变量名称对大小写敏感
- 声明变量
使用var关键字声明变量。变量声明时可以同时进行赋值，未赋值的变量默认为undefined。
### 2、数据类型
在JS中一共有六种数据类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值 返回类型是object
Undefined 未定义
Object 对象 引用数据类型
JS中可以表示的数字的最大值
Number.MAX_VALUE 1.7976931348623157e+308
Number.MIN_VALUE 5e-324 大于0的最小值
如果使用Number表示的数字超过了最大值，则会返回一个Infinity表示正无穷
NaN是一个特殊的数字 也是Number类型
### 3、数据类型转换
将其他数据转换为Number
1.使用Number()函数
-字符串-->数字
1.如果是纯数字的字符串，则直接将其转换为数字
2.如果字符串中有非数字的内容，则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
-布尔-->数字
true为1 false为0
-null-->数字 0
-undefined-->数字 NaN
2.针对字符串转数字
parseInt() parseFloat()
强制类型转换
String Number Boolean
将其他数据类型转换为String
1.调用被转换数据类型的toString()方法
该方法不会改变原变量，只会将转换的结果返回
null和undefined没有toString方法
2.调用String()函数
对于Number和Boolean实际上就是调用toString()方法
对于null和undefined会直接转换，不会调用方法
当一个字符串做- * /运算的时候也会自动转换成number类型
### 4、运算符
&逻辑与 |逻辑或 运算时表达式无论左边结果如何右边始终会参与运算 java中才有
&&短路与 ||短路或 当左边表达式结果已经能决定最终结果时右边表达式就不再进行运算
&&当左边为false 右边true或false无关紧要 于是不进行判断
||当左边为true
== 忽略数据类型判断两边的值是否相等
===全等 考虑数据类型
!!对任何数据进行两次取反操作可将其转换为布尔类型
三元(目)运算
(表达式)?结果1:结果2
### 5、进制
```html
<script type="text/javascript">
//2 8 16 10
//0b 开头 0B 表示二进制 。
//0 开头 表示 8进制
//0x 开头 0X 表示16进制
var a = 12;
var b = 070;
//alert(b); 56
</script>
```
### 6、超链
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/on.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//作用：1.跳转页面 2.找到锚点 3.发送邮件，打电话 4.触发javascript
document.write("<a href='http://www.baidu.com'>百度</a>");
</script>
</head>
<body>
<button onclick="alert('你点我了')">点我</button>
<a href="javascript:on()">点我触发外部js</a>
<a href="javascript:alert('点我了')">点我吧</a>
</body>
</html>
```
### 7、标识符
在JS中所有的可以由我们自主命名的都可以称为是标识符
例如：变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则：
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般都采用驼峰命名法
- 首字母小写，每个单词的开头字母大写，其余字母小写
JS底层保存标识符时实际上是采用的Unicode编码，
所以理论上讲，所有的utf-8中含有的内容都可以作为标识符
## 四、JavaScript函数与对象
JavaScript使用关键字function定义函数。函数可以通过声明定义，也可以是一个表达式。
函数声明后不会立即执行，在我们需要时进行调用。
### 1、对象的使用
```html
<script type="text/javascript">
var jack = {
name:"jack",
age:20,
friends:[
{name:"tom",age:20},
{name:"luli",age:30}
],
play:function(a,b){
alert(a+b);
}
};
for (var i = 0;i < jack.friends.length;i++) {
alert(jack.friends[i].name);
}
//alert(jack.friends.length);
jack.play(10,20);
//将jack指向的堆内存地址赋给obj 即两者指向同一块内存
//obj对象对地址的name进行修改后 jack的属性也会发生改变
var obj = jack;
obj.name = "tom";
alert(jack.name);
</script>
```
### 2、函数调用
- 函数表达式可以存储在变量中
```html
<script type="text/javascript">
function a(){
alert("aaaa");
}
//输出的是haha
var a = "haha";
alert(a);
//方法执行输出aaaa alert(s)为undefined
var s = a();
alert(s);
</script>
```
- 匿名函数自调用
```html
<script type="text/javascript">
//参数可以传对象
function test(a){
alert(a.name);
alert(a.age);
}
var a = {
name:"张三",
age:20,
play:function(){
return "haha";
}
}
test(a);
//匿名函数自调用
(function (c,d){
alert(c+d)
})(10,20);
</script>
```
### 3、函数中声明变量
```html
<script type="text/javascript">
var a ="tom";
function on(){
//在函数中，如果变量没有用var声明 在调用完一次函数之后，这个变量会被提升成全局变量
b = 20;
var a = "inner a";
alert(a);
alert(window.a);
//alert(b);
}
//alert(window.b);
on();
alert(b);//此时b会在window对象中找 等同window.b
</script>
```
### 4、工厂方法
```html
<script type="text/javascript">
fun4();
function fun4(){
alert("111111");
}
//工厂方法
function createPerson(name,age,address){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.address = address;
return obj;
}
var r1 = createPerson("张三",20,"北京市朝阳区");
alert(r1.name);
</script>
```
### 5、原型与构造函数
构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写
构造函数和普通函数的区别在于：调用方式不一样
普通函数的调用方式：直接调用 person();
构造函数的调用方式：需要使用new关键字来调用 new Person();
```html
<script type="text/javascript">
function Person(){
}
//类名.prototype可以访问到类的原型对象 原型对象的属性为全局属性，所有对象都可以使用
Person.prototype.a="哈哈";
var p1 = new Person();
var p2 = new Person();
//对象._proto_也可以拿到原型对象 可以对对象的属性值进行修改
alert(Person.prototype == p1.__proto__);
alert(p1.a);
p1.__proto__.a="呵呵";
alert(p2.a);
</script>
```
### 6、数组、方法
JavaScript中同一数组可以存放不同类型的数据。
- 创建数组
```html
<script type="text/javascript">
var arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[4] = 5;
</script>
```
- 数组的遍历
```html
//遍历二维数组
for (var i = 0;i < arr2.length;i++) {
for (var j = 0;j < arr2[i].length;j++) {
alert(arr2[i][j]);
}
}
```
- 数组方法
```html
<script>
/**
* shift() 删除首个数组元素，其他元素向前移 返回结果为被删除的首个元素
* unshift() 往数组开头添加新元素 其他元素向后移 返回新数组的长度
* toString() 把数组转换为字符串，每个数组元素用逗号分隔
* join() 也可以将所有数组元素结合为一个字符串 括号里可以添加参数规定每个字符间的分隔符 如join("*")
* pop() 将数组最后的元素删除并返回
* push() 向数组最后新增一个元素 返回新数组的长度
* splice(index,length,parameter1,parameter2) index定义新添加元素的位置 length定义从该位置开始删除原数组几项数据 其余参数定义要添加的新元素
* concat() 通过拼接两个数组创建一个新数组并返回 不会改变现有数组
* slice() 1个参数 从给定索引值(包括)开始复制后面的元素创建新数组 2个参数 从第一个参数给定的索引值(包括)到第二个参数给定索引位置(不包括)复制创建新数组
*/
//arr指向新的内存空间
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
alert(result);
var result2 = arr.shift();
alert(result2);
//数组排序
arr = [5,8,1,6,3,5,9,7,2];
arr.sort(function(a,b){
//升序排列
return a - b;
//降序排列
//return b - a;
});
console.log(arr);
</script>
```
### 7、循环
```html
<script type="text/javascript">
//return 1.表示方法的返回值 2.表示跳出方法
function sum(a,b,c){
//后面123不会执行
return a+b+c;
alert(123);
}
var r =sum(10,20,30);
alert(r);
//continue 只能用在循环结构 结束本次循环回到循环头部继续下次循环
//break 表示强制跳出本层循环 多层循环只会跳出当前一层
//return 用在循环结构中时 不管有多少层循环嵌套 全部跳出
function cc(){
alert("方法开始");
for (var i = 0;i < 5;i++) {
if (i==2) {
continue;//开始 0 1 3 4 结束 只跳出本次循环 不输出2 接着继续开始循环
}
alert(i);
}
alert("方法结束");
}
cc();
function bb(){
alert("方法开始");
for (var i = 0;i < 5;i++) {
if (i==2) {
break//开始 0 1 结束 直接跳出当前循环并结束本层循环 后面都不再输出
}
alert(i);
}
alert("方法结束");
}
bb();
function rr(){
alert("方法开始");
for (var i = 0;i < 3;i++) {
for (var j = 0;j < 5;j++) {
if (j==2) {
return;//开始 00 01 直接跳出方法 所有循环不再执行 方法结束语句都不会输出
}
alert(i+""+j);
}
}
alert("方法结束");
}
rr();
</script>
```
### 8、字符串方法
```html
<script type="text/javascript">
/**所有字符串方法都会返回新字符串，不会修改原始字符串
* 字符串是不可变的：字符串不能更改，只能替换
* length 返回字符串的长度
* indexOf() 返回字符串中指定文本首次出现的索引 区分大小写 未找到返回-1
* 可以传入两个参数，第二个参数表示从该索引处开始查找
* lastIndexOf()
* search() 与indexOf()功能相同
* search()无法设置第二个参数
* indexOf()无法使用正则表达式
* slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
* 一个参数: 从索引处开始裁取剩余部分 负数则从结尾开始数
* 两个参数：起始索引(包括)，终止索引(不包括) 如a,b a<b
* 两个参数为负数时，则从字符串结尾处开始计数 如-a,-b a>b 从后数b处到a(不包括)处
* substring() 类似于slice() 不接受负数参数
* substr() 类似于slice()
* 如果加第二个参数则规定的是被裁取的长度
* replace() 用新的字符串替代指定字符串 返回新的字符串 不改变之前的字符串
* 只替换一次 首次匹配到的字符串
* 第一个参数为将要被替换的字符串 第二个参数为替换进去的新字符串
* 使用正则表达式/i可取消对大小写的敏感 如"China"参数写作/CHINA/i
* 使用正则表达式/g可替换所有匹配到的字符串
* toUpperCase() 把字符串转换为大写返回新的字符串 不改变原字符串
* toLowerCase() 转小写
* concat() 连接两个或多个字符串 可用于代替加运算符
* trim() 删除字符串两端的空白符
* charAt() 返回字符串指定下标的字符串 一个字符
* charCodeAt() 返回字符串中指定索引的字符unicode编码
* split() 将字符串转换为数组
* 一个参数 给定分隔符 如果省略则返回整个字符串 如果是""，则分隔每个单个字符
*/
var str = "The full name of China is the People's Republic of China."
//var pos = str.lastIndexOf("China");//返回51
//var pos = str.indexOf("China");返回17
//var pos = str.indexOf("China",10);//也返回17 从索引值为10处开始查找 但返回的还是找到的结果在字符串中的位置
//var pos = str.lastIndexOf("China",50)//还是17
//var pos = str.search("China");
//var pos = str.slice(4,10)
//var pos = str.replace("China","USA");将第一个China替换为USA
//var pos = str.replace(/CHINA/i,"USA");忽略大小写
//var pos = str.replace(/China/g,"USA");两个China都被替换成USA
//var pos = str.toUpperCase();
//var pos = str.concat(" ","111");
//var pos = str.charAt(0);
//var pos = str.charCodeAt(0);
//var pos = str.split(" ");//本例字符串之间是用空格分隔的，如果这里参数给","则不会将字符串分隔，数组中只会有一个成员
alert(pos);
//alert(str); 未被改变
//alert(pos[0]);
</script>
```
## DOM操作
JavaScript一般通过三种方式获取DOM对象
var id=document.getElementById("id") //根据元素ID值获取
var name=document.getElementsByName("name") //根据元素NAME属性值获取，得到一个数组，需遍历
var tarname=document.getElementsByTarName("tarname") //根据元素名获取，得到一个数组，需遍历
```html
<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>
```
## 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");
```
