JavaScript
1.JavaScript概述与基础语法
JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言
运行环境：1.独立安装的JS解释器(Node JS)
解释型：运行之前不需要编译，运行之前不会检查错误，直到碰到错误为止
编译型：对源码进行编译，还能检查语法错误（C/C++）
1.1 JS组成
完整的JS由三部分组成：
1. 核心(ECMAScript)
2. 文档对象模型(DOM,Document Object Model)
3. 浏览器对象模型(BOM,Browser Object Model)
1.2 JS特点
1.开发工具简单，记事本即可
2.无需编译，直接由JS引擎负责执行
3.弱语言由数据来决定数据类型
4.面向对象
1.3 浏览器内核的作用
负责页面内容的渲染，内核主要由两部分组成：
1.内容排版引擎解析HTML和CSS
2.脚本解释引擎解析JavaSript
1.4 JS脚本嵌入在HTML页面中执行的步骤
1.4.1 将JS代码嵌入在元素"事件中"
onclick：当单击元素时所做的操作
<div id="" onclick="JS代码">xxx</div>
<html>
<body>
<button onclick="console.log('Hello World');">
打印消息
</button>
</body>
</html>
注意单引号双引号的使用
1.4.2 将JS代码嵌入在<script>标记中
<script></script>允许出现在网页的任意位置处
<html>
<body>
<script>
document.write('<b>欢迎<b>')
console.log("脚本执行结束了...")
</script>
</body>
<html>
1.4.3 将JS代码写在外部脚本文件中(**.js)
1. 创建js文件，并且编写JS代码
2. 在页面中引入js文件
<script src="js文件路径"></script>
注意：<script src=""></script>标记中间不允许出现任何内容，出现就是错误的
2. JS语法规范
2.1 语句 允许被JS引擎所解释的代码，使用分号来表示结束
console.log() document.write()
大小写敏感
console.log()正确 Console.log()错误
英文标点符号
console.log("")正确 console.log(“”)错误
由表达式、关键字、运算符组成
2.2 注释
单行注释：//
多行注释：/**/
sublime text中为Ctrl+/
2.3 变量
内存：保存程序在运行过程中，所需要用到的数据。8bit(比特是表示信息的最小单位)=1 byte
变量：就是内存中一段存储空间名：内存空间的别名，可以自定义值：保存在内存空间中的数据
2.3.1变量的声明
声明：var 变量名； var userName;
赋值： var userName=25.5;
变量名=值
一次性声明多个变量：
var 变量名1，变量名2...变量名n
var stuName="PP.XZ",stuAge=25,stuHeight=50;
2.3.2 变量名命名规范
1. 不允许使用JS的关键字和保留关键字
2. 由字母、数字、下划线以及$组成
var stuName;
var stuName1;
var stu_name;
var stu$name;
3. 不能以数字开头
4. 尽量见名知意
5. 可以采用"驼峰命名法"
变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符大写
var stuName
2.3.3 变量的使用
var stuName="小猪佩奇"
console.log(stuName)
2.3.4 变量的存取操作
1.获取变量的值-GET操作
var userPwd='123456'
console.log(userPwd)
document.write(userPwd)
var newPwd = userPwd;
2. 保存(设置)变量的值-SET操作
var oldPwd='123'
oldPwd='456'
oldPwd=newPwd
3. 数据类型
3.1 原始类型(基本类型)
1） 数字类型——number类型
可以表示32位的整数以及64位的浮点数
整数：32位即4字节
浮点数：即小数，64位，8字节
2） 布尔类型——bool
作用：表示条件的结果
取值：true：真，肯定的结果
false：假，否定的结果
3） 字符串类型——string类型
由Unicode字符、数字、标点组成
4） 空——null
5） 未定义——undefined
1.声明变量未赋值
2.访问对象不存在的属性
3.2 数据类型转换
弱类型：由数据来决定变量的数据类型是什么——JS语言数据类型为弱类型
var stu; //undefined
stu=25; //number
stu="15" //string
3.2.1 隐式转换
自动转换，由JS在运算过程中，自己转换的操作，不需要人为参与
函数：typeof() 或 typeof
var num1 = 15
var s = typeof(num1); 获取num1的数据类型
var s1 = typeof num1; 获取num1的数据类型
NaN：
Not a Number 不是一个数字
isNaN：判断数据是否为非数字
结果为boolean类型：true——不是一个数字
false——是一个数字
注：所有的数据类型与string做加法运算时，最后的 结果都为string
3.2.2 强制转换
1. toString()
作用：将任意的数据类型转换为string类型
用法：变量.toString(）
2. parsesInt（）
作用：获取指定数据的整数部分
用法：var result=parseInt(数据)
注意：parseInt从左到右依次转化，碰到第一个非整数类型，则停止
若第一个字符就是非整数字符，则结果为NaN
3. parseFloat()
作用：将指定数据转换成小数
用法：var result=parseFloat(数据)
同样，一旦碰到非数字则停止转换，第一个为非数字会输出NaN
4. Number()
作用：将一个字符串解析为NaN
语法：var result=Nmuber(数据)
注意：数据中一旦包含非数字字符，则一律输出NaN
4. 运算符与表达式 略，只谈重点，类似python
== 判断等于——不比较类型，只比较数值
!= 不等于——数值不等于
=== 全等于——除了数值之外，连同类型也会一起比较
!== 不全等——类型也不同
5. 函数：
function 函数名(参数列表声明){
//代码块(函数体，功能体，方法体)
return 值;
}
、
6. 循环 与c语言相同
while(boolean表达式){循环体语句}
for(表达式1;表达式2;表达式3){}
7. 数组
创建：var arr=[] var arr=new Array()
添加：arr[1]=值 arr[5]=值
7.1 数组转字符串
String(arr)：将arr中每个元素转为字符串，用逗号分隔
arr.join(连接符)：将arr中的每个元素转为字符串，用自定义字符串连接
固定套路：1.chars.join("") ->无缝连接
2.判断数组是空数组 chars.join("")==""
3.将数组转化为也没面元素的内容
"<开始标签>"+
arr.join("</结束标签><开始标签>")
+"</结束标签>"
7.2 拼接和选取
不直接修改原数组，而返回新数组！
1. concat() 拼接两个或更多的数组，并返回结果
var newArr=arr1.contact(值1，值2，值3)
arr1不变 newArr为拼接后
2.slice() 返回现有数组的一个子数组
var subArr=arr.slice(starti,endi+!)
选取arr中starti位置开始，到endi结束的所有元素组成新数组返回——原数组保持不变
复制数组：arr.slice(0,arr.length+1)
3.splice 直接修改原数组
删除：
arr.splice(starti,n);
删除arr中starti位置开始的n个元素不考虑含头不含尾
var deletes=arr.splice(starti,n;)
返回值deletes保存了删除的元素组成的临时数组
插入：
arr.splice(starti,0,值1,值2,...)
在arr中starti位置，插入新值1、值2...原starti位置的值以及在其之后的值向后顺移
替换：
其实就是删除旧的，插入新的
arr.splice(starti,n,值1,值2,...)
先删除arr中starti位置的n个值，再再starti位置插入新值
强调：删除的元素个数和插入的新元素数不必一致
8. DOM——document object model
DOM是W3C(万维网联盟)的标准，是中立于平台的和语言的接口，它允许程序
和脚本动态地访问和更新文档的内容、结构和样式。
对网页进行增删改查的操作。
8.1.DOM查找
8.1.1 按id属性，精确查找一个元素对象(效率非常高)
var elem=document.getElementById("id")
强调：getElementById只能用在document上
问题：不是所有元素都有id
<ul id="myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</li>
<li id="m3">联系我们</li>
</ul>
var ul = document.getElementById('myList');
console.log(ul);
8.1.2 按标签名查找
var elems=parent.getElemengtsByTagName("tag");
查找指定parent节点下的所有标签为tag的子代节点
强调：1.可用再任意父元素上
2.不仅查直接子节点，而且查所有子代节点
3.返回一个动态集合，即使只找到一个元素，也返回集合必须用[0],取出唯一元 素
问题：不但找直接，而且找所有子代
<ul id="myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</li>
<li id="m3">联系我们</li>
</ul>
var ul = document.getElementById('menuList');
var list=ul.getElementsByTagName('li');
console.log(list);
8.1.3 通过name属性查找
document.getElementByName('name属性值')
可以返回DOM树种具有指定name属性值的所有子元素集合
<form id="registerForm">
<input type="checkbox" name="boy"/>
<input type="checkbox" name="boy"/>
<input type="checkbox" name="boy"/>
</form>
var list = document.getElementsByName('boy');
console.log(typeof list);
8.1.4 通过class查找
查找父元素下指定class属性的元素
var elems=parent.getElementsByClassName('class属性值')
有兼容性问题：IE9+
<div id="news">
<p class="mainTitle">新闻标题1</p>
<p class="subaTitle">新闻标题2</p>
<p class="mainTitle">新闻标题3</p>
</div>
var div=document.getElementById('news');
var list = div.getElementsByClassName('mainTitle');
console.log(list);
8.1.5 通过CSS选择器查找
元素选择器 类选择器 ID选择器
后代选择器 子代选择器 群组选择器
8.1.5.1 只找一个元素：（selector为选择器）
var elem = parent.querySelector("selector")
强调：1.selector支持一切css中的选择器
2.如果选择器匹配的有多个，只返回第一个
8.1.5.2 找多个
var elems=parent.querySelectorAll("selector")
强调：selector API 返回的是非动态集合
9.DOM标准
核心DOM：可操作一切结构化文档的API，包括HTML和XML，万能繁琐
HTML DOM：专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行了简化，不是万能简单
开发：先用简单的，再用复杂的补充——以实现效果为目标
9.1 核心DOM——4个操作
读取属性值：
1.先获得属性节点对象，再获得节点对象的值：
var attrNode = elem.attributes[下标/属性名]；
var attrNode = elem.getAttributeNode(属性名)
attrNode.value——属性值
2.直接获得属性值
var value = elem.getAttribute("属性名")
修改属性值：
elem.setAttribute("属性名",value)
var h1=document.getElementById("a1");
h1.setAttribute("name",zhangji);
判断是否包含指定属性：
var bool=elem.hasAttribute("属性名") //true或者false
element,getElementById("bt1").hasAttribute("onclick") //组合用法
移除属性：
elem.removeAttribute("属性名") 移除属性
<a id="alink" class="slink" href="javascript:void(o)" onclick="jump()">百度搜索</a>
var a = document.getElementById('alink')
a.removeAttribute('class')
9.2 修改样式
内联样式：elem.style.属性名="值"
强调：属性名为去横线变驼峰表示
例如：css:background-color——backgroundColor
list-style-type——listStyleType
10. DOM添加
10.1.添加元素的步骤
10.1.1创建空元素
var elem=document.createElement("元素名")
var table = document.createElement('table')
console.log(table)
10.1.2.1设置关键属性
元素.属性名=值
a.innerHTML="go to mooc"
a.href="http://tmooc.cn"
<a href="http://tmooc.cn"> go to tmooc</a>
10.1.2.2设置关键样式
a.style.opacity="1"
a.style.cssText="width:100px;height:100px;"
10.1.3将元素添加到DOM树
parentNode.appendChild(childNode)
可用于将一个父元素追加最后一个子节点
var div=document.creatElement('div')
var txt=document.creatTextNode('版权声明') // 声明一段文本
div.appendChild(txt) // 将txt的内容放入div
document.body.appendChild(div)
parentNode.insertBefore(newChild,existingChild)
用于在父元素中的指定子节点之前添加一个新的子节点
<ul id="menu">
<li> 首页 </li>
<li> 联系我们 </li>
</ul>
var ul=document.getElementById('menu')
var newLi=document.createElement('li')
ul.InsertBefore(newLi,ul.lastChild)
10.2 添加元素优化：
尽量少的操作DOM树——每次修改DOM树都会导致重新layout
解决：
1.如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面上
2.如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中。再将文档片段整体添加到页面
文档片段：内存中，临时保存多个平级子元素的虚拟父元素。用法和普通父元素完全一致
1.创建片段
var frag=document.createDocumentFragment();
2.将子元素临时追加到frag中
frag.appendChild(child);
3.将frag追加到页面
parent.appendChild(frag);
强调：append之后，frag自动释放，不会占用元素
11.BOM
Browser Object Model：专门操作浏览器窗口的API——没有标准、兼容性问题
11.1 对象
windows：代表整个窗口
hstory：封装当前窗口打开后，成功访问过的历史url记录
navigator：封装浏览器配置信息
document：封装当前正在加载的网页内容
location：封装了当前窗口正在打开的url地址
screen：封装了屏幕的信息
event：定义了网页中的事件机制
11.2 获取当前窗口大小
完整当前窗口大小：
window.outerWidth/outerHeight
文档显示区大小：
window.innerWidth/innerHeight
11.3定时器——让程序按指定时间间隔自动执行任务，实现网页动态效果、计时功能
11.3.1 周期性定时器
让程序按指定时间间隔反复自动执行一项任务
setInterval(exp,time)：周期性触发代码exp
exp：执行语句
time：时间周期，单位为毫秒
setInterval(function(){console.log("Hellow World");},1000}
停止定时器
1.给定时器取名
var timer=setInterval(function(){console.log("Hello World");},1000)
2. 停止定时器
clearInterval(timer)
11.3.2 一次性定时器——让程序延迟一段时间执行
setTimeout(exp,time)：一次性触发代码exp
exp：代码语句
time：间隔时间，单位为毫秒
setTimeout(function(){alert("恭喜过关");},3000);
选择：只要反复执行，就选周期性定时器
只要只执行一次，就用一次性定时器
