第01课 - - 接触JavaScript
一.学习原因
1.为什么学习JavaScript
1.基于对象、事件驱动的简单脚本语言。
2.由浏览器负责解释和执行。
3.它让网页呈现动态效果，并实现与用户交互。
2.易学性
1.只要有文本编辑器就可编写
2.可通过简单命令完成一些基础操作。
3.从何学起
起点就是处理网页，先学习基础语法与使用DOM进行简单操作。
二.插入JS
1.<script>标签
成对出现，JavaScript代码写在它们之间。
语法：（text：表示文本类型，javascript：告诉浏览器里面文本属于JavaScript语言）
<script type="text/javascript">内容</script>
2.单独创建
把HTML与JS代码分开，并单独创建一个JavaScript文件，其文件后缀通常为js，再将JS代码写在JS文件中。（JS文件中不需要<script>标签，直接编写）
语法：
<script src="路径"></script>
三.页面中的位置
可放在HTML中的任何位置，但是一般放在head和body部分中。（初始化的js放于head部分，通过事件调用执行的js代码没什么要求）
1.head位置
一般放与head中。用于初始化的JS代码一般放在head中，HTML从上至下执行，用于设置CSS样式的js代码需要在页面加载前执行。
2.body位置
网页读取到该位置时就执行。
四.基本语句、符号
JavaScript是发给浏览器的命令，，告诉浏览器该做什么。
1.“;”分号
1.通常在语句后面加上一个“;”号表示结束（需要在英文状态输入）
语句;
2.不加不会报错，但是要养成良好的编程习惯。
2.注释
提高可读性，方便自己与他人理解。
1.单行注释
//
2.多行注释
/* */
3.变量（弱类型语言（值不需指定类型））
字面意思理解为可变的量。编程角度则为用于存放某种、某些数据的容器。
命名规则：
1.字母、下划线、美元符号开始。（之后可使用数字）
2.不能是JavaScript保留字或关键字。
3.区分大小写
语法：（定义变量使用关键字var）
var 变量名
使用：（先声明后使用（可直接使用，但不规范））
var mychar;
mychar="javascript";
mychar="hello";
4.判断语句if…else…
条件满足时执行if不满足时执行else。
if(条件){
条件满足执行的语句
}else{
条件不满足执行的语句
}
5.函数
完成特定功能的一段代码，用函数封装提高了代码复用性。
定义：
function 函数名(){
函数代码;
}
函数调用：
HTML中通过点击事件调用函数:
<input type="button" onclick="函数名()" />
直接在脚本中调用:
<script>
函数名();
</script>
通过超链接调用
<a href="javascript:函数名()"></a>
N.扩展
1.type="text/javascript"
那些老旧的实例可能在<scipt>标签中使用type="text/javascript"，现在已经不必这样做了，JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。--w3cschool
第02课 - - JavaScript入门
一.JavaScript输出内容
1.document.write();
向HTML输出流中写内容，简单说就是直接在网页中输出内容。
1.字符串直接输出。
2.变量输出。
3.多项内容，加号连接输出。
4.也可输出HTML标签。例：“"<br />"”
2.消息对话框
消息对话框点击确定之前，不能执行任何操作（排它性）。输出内容可是字符串、变量。（与document.writer()类似）
alert();：
警告、消息对话框。弹出一个提示框（带有一个确定按钮）。
1.一般可用于调试程序。
confirm();：
允许用户做选择，点击返回boolean值，确定返回true，取消返回false。
prompt();：
询问用户信息，包含：确定、取消、文本框。
确定则返回文本框值，取消则返回null。
2.打开、关闭窗口
1.打开新窗口：
window.open(URL,窗口名,参数字符串);
URL：打开窗口的路径
窗口名：
_blank：新窗口打开
_slef：当前窗口打开
_top：框架网页窗口的上部打开
其他：只能打开一个同名字窗口（不能有空格）
参数字符串：
例：
window.open("2018-04-23-ContactJavaScript.html","_blank","width=1000,height=200,toolbar=yes");
2.关闭窗口：
window.close(); //关闭当前窗口（不能关闭非脚本打开的窗口）
窗口对象.close(); //关闭指定窗口
第03课 - - 了解DOM
一.认识DOM
1.DOM（文档对象模型Document Object Model）
1.定义访问、处理HTML文档的标准方法
2.DOM将HTML呈现为：元素、属性、文本 的树结构（节点树）
二.DOM方法设置元素
2.通过ID获取元素
document.getElementById("id名");
3.innerHTML属性
获取或替换HTML元素的内容。
对象.innerHTML = 值; //获取元素对象的内容，再修改。
4.object.style.property = new style;
对象.style.样式属性= "样式值"; //改变HTML元素样式
5.object.className = classname
对象.className = "样式名"; //改变元素class属性引用的样式
6.对象.removeAttribute("元素属性名");
删除元素的该属性。
第04课 - - JavaScrpt进阶
一.数组
1.创建（A要大写）
var object = new Array(); //如果参数为数字，则定义数组初始长度（可变）。
var object = new Array(值1,值2); //声明同时赋值
var object = [值1,值2]; //直接输入一个数组（字面量数组）
2.操作数组的方法
arrayObj.pop();
删除最后一个元素，返回该值
arrayObj.shift();
删除最前一个元素，返回该值
arrayObj.splice(deletePos,count);
删除从指定位置开始，指定个数的元素，数组形式返回删除的数。
arrayObj.unshift(item1,item2,…);
在开始添加一个或多个元素。
arrayObj.push(item1,item2,…);
在结尾添加一个或多个元素。
arrayObj.splice(insert,0,item1,item2,…);（与上面删除同方法，参数不同）
在指定位置插入多个元素。
arrayObj.slice(start,end);
数组形式返回数组一部分。（不包括end）
arrayObj.concat(item1,item2,…);
将多个数组或字符串连接为一个数组
arrayObj.join(separator);
返回字符串，每个元素中间用separator隔开
3.二维数组
多一对“[]”号：var object = [[1,2,…],[1,2,…],….] ;
二.事件
1.常用事件
当在使用了该事件的标签上，做出指定操作时触发。
2.值得注意：
onchange在改变文本之后，需要失焦才能触发。（相对oninput事件更好）
onload支持标签：（需要指定图片路径才算加载完成）
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> ,<style>
onunload：（估计是用不到的）
目前IE上可运行，其他大部分浏览器不行。（只适合刷新或换页面，如需在关闭页面时提示，使用：onbeforeunload）
N.扩展
1.数组声明长度
节省内存空间：如果不声明长度，默认分配32字节的长度。会浪费空间。
2.undefined
判断一个undefined的变量：（不能使用字符串比较）
未定义变量==undefined; //结果为true
第05课 - - JavaScript内置对象
一.对象
1.什么是对象
JavaScript中所有事物都是对象，如：字符串、数值、数组、函数、等。每个对象都带有属性和方法。
对象的属性：
反映该对象的某些特定的性质。
如：字符串的长度、图像的长宽、…
对象的方法：
能在该对象执行的动作。
如：表单的提交（Submit）、时间的获取（getYear）、…
2.语法：
定义对象：（使用new关键字）
例：var objectName = new Array(); 或 var objectName = [];
访问对象属性：（objectName.propertyName）
例：objectName.length; //访问对象长度，length属性
访问对象方法：（objectName.methodName()）
例：str.toUpperCase(); //返回字符串的大写
二.内置对象
1.Date日期对象
初始时间是从1900年1月1日0时开始的。
var d = new Date(); //当前电脑时间（参数可设置指定时间）
结果格式（火狐）：星期 月 日 年 时:分:秒 时区
getDay(); 返回星期0-6（0代表星期日）
2.String字符串对象
3.Math对象
1.提供对数据的数学计算。
2.可直接把Math作为对象使用。这是与Date，String对象的区别。
注意：round()方法：四舍六入，五变大。（这样更准确。为负数时会不一样）
4.Array数组对象
排序sort(方法函数)方法：
1.如果参数不指定方法函数
则按unicode码顺序排序
2.如果参数指定方法函数
方法函数比较两个值，返回一个用于说明这两个值相对顺序的数字。
例（自己定义）：
sortNum(a,b){
return ?;
}
若返回值<=-1，则表示A排在B之前。
若返回值>-1&&<1，则表示A和B相同顺序。
若返回值>=1，则表示A排在B之后。
第06课 - - BOM-window对象
一.window对象
1.window对象方法
2.计时器
setInterval()计时器：（每隔指定时间就执行（多次））
setInterval(函数名,毫秒数); 或 setInterval("函数名()",毫秒数);
clearInterval()停止计时器：
根据setInterval()方法所返回的id值，停止计时器。
clearInterval(id值);
setTimeout()计时器：（只执行一次）
clearTimeout()停止计时器
二.History对象
1.介绍
1.记录用户曾经浏览过的页面（URL）（可以实现浏览器前进与后退相似导航的功能）
2.窗口被打开的那一刻开始记录。
每个浏览器窗口、标签、框架…都有history对象与window对象关联。
3.语法：
window.history.[属性|方法] //window可以省略
2.属性、方法
back(); 相当于go(-1);（点击浏览器倒退按钮）
三.Location对象
1.介绍
1.用于获取或设置窗体的URL，并且可以用于解析URL。
2.语法：
window.location.[属性|方法] //window可省略
3.属性示意图：
2.属性、方法
四.Navigator对象
1.介绍
1.Navigator对象包含有关浏览器的信息，通常用于检查浏览器与操作系统的版本。
2.语法：
window.navigator.[属性|方法]; //window可省略
2.属性
platform：返回的是浏览器平台编译的系统。（不是自己的系统）
浏览器信息：在用户操作保证不同的浏览器显示的信息一致。
五.screen对象
1.介绍
1.用于获取用户的屏幕信息
2.语法：
window.screen.属性
2.属性
N.扩展
1.计时器
计时器的参数：
如果是“函数名()”：属于函数调用，所以需要加双引号“""”。
直接是“函数名”：则可不加双引号。
计时器返回值：
测试时第一个计时器从2开始。
之后每新建一个则加1。
第07课 - - DOM
一.认识DOM
1.介绍
1.文档对象模型Document Object Model
2.元素、属性、文本的树结构（节点树）
2.属性、方法
1.节点属性
2.遍历节点树
3.DOM操作（前2个属于document）
4.获取节点
二.属性、方法
1.方法
1.document.getElementsByName("Name")
返回指定名称的节点对象集合。（通过name获取，有可能有多个）
2.document.getELementsByTagName("Tagname")
返回指定标签名的节点对象集合。
3.节点.getAttribute("name")/节点.setAttribute("name","value");
通过元素节点属性名，获取属性的值。/通过节点属性名，设置属性值。
4.节点.appendChild(新节点对象);
需要先通过document.createElement("元素名");新建节点之后，在添加新节点。在该节点的最后一个子节点后添加。
5.节点.insertBefore(新节点对象,指定节点);
该节点的子节点中，在指定子节点前插入新子节点。
6.节点.removeChild(子节点对象);
删除该子节点返回该子节点对象（虽然在DOM树中删除了，但是还是存在内存中，彻底删除：赋值该子节点为null）
7.节点.replaceChild(新节点对象,指定节点);
替换该节点的指定节点。替换该子节点所有与之相关的属性都会被移除。
8.document.createElement("元素名");
创建元素节点，返回该元素节点对象。（需配合appendChild、insertBefore方法使用，将元素节点显示在页面）
9.节点.createTextNode("文本");
为该节点添加文本子节点。
2.属性
1.节点.nodeName：节点名称（只读）
元素节点：与标签名相同
属性节点：属性名称
文本节点：#text
文档节点：#document
2.节点.nodeValue：节点的值
元素节点：undefined或null
文本节点：文本自身
属性节点：属性的值
3.节点.nodeType：节点的类型（只读）
元素：1
属性：2
文本：3
注释：8
文档：9
4.节点.childNodes：访问子节点（数组）
返回调用节点的所有子节点列表。
（注意：节点之间的空白部分，除IE浏览器，其他浏览器会解析为文本节点）
5.节点.firstChild/lastChild：访问第一个/最后一个节点
与childNodes指定索引获得节点，相同效果。
6.节点.parentNode：获得该节点父节点
7.节点.nextSibling/previousSibling：获得同节点树层中，该节点的下\上一个节点
三.网页大小、尺寸
1.网页尺寸（还可获取DOM的元素内容高宽）
innerHeight/innerWidth：（文档对象内部高宽，包括滚动条）
clientHeight/clientWidth：（获取高宽）
scrollHeight/scrollwidth：（网页内容高宽）
offsetHeight/offsetWidth：（网页内容高度，包括滚动条、等边线。）
例：
获取文档对象内部高：document.innerHeight
获取body高：document.body.clientHeight
获取文档内容高：document.documentElement.scrollHeiht
获取body内容高：document.body.scorllHeight
2.网页卷去的距离与偏移量
scrollTop/scrollLeft：
给定对象边界与窗口目前可见内容相应最左/顶端距离
offsetTop/offsetLeft：
给定对象相对于版面或由offsetParent属性指定父坐标的相应左/顶端位置
offsetParent：
布局中设置position属性（Relative、Absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
N.扩展
1.删除子节点的for循环
每删除一个子节点，子节点列表的子节点数（长度）就会变化，所以不能动态的来获取子节点的长度。
2.各大小尺寸区别
scrollWidth：
对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：
对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：
对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
情况1：
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2：
元素的内容超过可视区，滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
