Web-JavaScript基础

一、概述
1. 概念： 是一种脚本语言，一种解释性语言，不需要编译，直接嵌入在HTML中，由浏览器执行；

2. 作用： 用于网页和用户之间的交互；

3. 组成： 完整的javascript由ECMAScript、BOM和DOM组成；

• ECMAScript：通过ECMA-262标准化的脚本程序设计语言，它往往被称为JavaScript或JScript；
• BOM：浏览器对象模型(Browser Object Model)；
• DOM：文档对象模型l( Document Object Mode )，操作文档中的元素和内容；

4.在HTML中引入JavaScript的两种方式：

• 内嵌式：
  javascript代码必须放在script标签中，script标签可以放在html的任何地方，一般建议放在head标签里；
  格式：< script type=“text/javascript” > 写js代码 < /script >
• 外联式：
  写在另外一个文件,但是文件的后缀必须.js；
  格式：< script type=“text/javascript” src=“外部js的路径” charset=“utf-8” >< /script >

5.JavaScript与Java的区别
JavaScript是基于对象，Java是面向对象；

二、基本语法
1. 变量
1.1 命名：命名规则和java差不多；
1.2 声明：var 变量名;（只声明不赋值，默认值是undefined）
1.3 赋值：var a = 10;或var a; a = 10;

2. 基本数据类型

• undefined 声明了但未赋值
  当一个变量被声明了，却没有赋值的时候，叫做 undefined；
• Boolean 布尔
  Boolean变量有两种值，分别是true或者false；
• Number 数字
  js中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法；
• String 字符串
  与java不同的是，js中没有字符的概念，只有字符串，所以单引号和双引号，都用来表示字符串；
• null 空对象/对象不存在
• typeof 变量类型判断
  使用typeof来进行判断数据类型；

3. 比较运算符
值等：== 判断值是否相等
绝对等： === 判断值和类型是否相同

1=='1': true
1==='1': false

4. 类型转换

• 4.1 转换为Boolean
  
• 4.2 转换为字符串
  无论是Number,Boolean还是String都有一个toString()方法，用于转换为字符串；

var a = true;
alert(a.toString());

• 4.3 数字转字符串
  Number转换为字符串的时候有默认模式和基模式两种：
  toString() 默认模式，即十进制
  toString(2) 基模式，二进制
  toString(8) 基模式，八进制
  toString(16) 基模式，十六进制

• 4.4 转换为数字
  javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字；
  注：如果被转换的字符串，同时由数字和字符构成，那么parseInt会一直定位数字，直到出现非字符，例如"10abc" 会被转换为 10，“10abc8” 也是被转换成10；

• 区别

Number()和parseInt()的区别：
相同点：都可以用来进行数字的转换；
Number()：当转换的内容包含非数字的时候，会返回NaN(Not a Number)；
parseInt()：如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN；

String()和toString()的区别：
相同点：都会返回字符串，区别在于对null的处理；
String()：会返回字符串"null"；
toString()： 就会报错，无法执行；

5. 等性运算

6. 函数（匿名函数另做介绍）
6.1 定义格式：

function 函数名(参数列表){
		函数体;
	}

6.2 调用格式：
函数名(实际参数);

6.3 带返回值的函数

function 函数名(参数列表){
		...
		return ...;
	}

6.4 DOM事件中想要使用函数返回值需要在函数名前加return

例：onsubmit="return test()"

6.5 注意:
1）和Java不同的是：参数列表中只需要写参数名，不需要写参数类型，如果多个参数用","相隔；
2）函数和Java中的方法一样，不调用不运行；
3）函数调用的时候,可以传递任意个实际参数：
如果实际参数的个数 < 形式参数个数 那么多出来的形式参数默认值undefined；
如果实际参数的个数 > 形式参数个数 那么自动忽略多余的实际参数；
4）js中没有重载这个概念,如果函数名一样,后面定义的函数会覆盖前面定义的函数，也就说在前面定义的函数相当于没写；

7. 异常处理
JavaScript提供了一种try catch的错误处理机制，当有错误抛出的时候，可以catch住；

8. 事件（先做了解，更多参考HTML DOM ）

• 查找元素，返回指定 ID 的一个对象的引用：
  方法：HTML DOM getElementById()
  格式：document.getElementById(id)
• 设置或返回对象的值
  属性：HTML DOM value
  设置值格式：textObject.value=text
  返回值格式：var text = textObject.value
• HTML DOM Style 对象
  属性：Background，Border ，Margin ，List，Positioning，Printing等等；
  格式：document.getElementById(“id”).style.property=“值”

9. 对象
JavaScript中的对象是有着属性和方法的一种特殊数据类型，常见的对象有数字Number，字符串String，日期Date，数组Array，区别于基本数据类型中的类型概念；

9.1 Number对象

• new Number 创建一个数字对象
• 属性MIN_VALUE
• 属性MAX_VALUE 最小值 最大值
• 属性NaN 表示不是数字
• 方法toFixed 返回一个数字的小数表达
• 方法toExponential 返回一个数字的科学计数法表达
• 方法valueOf 返回一个数字对象的基本数字类型

9.2 String对象

• new String() 创建字符串对象
• 属性 length 字符串长度
• 方法 charAt charCodeAt 返回指定位置的字符
• 方法 concat 字符串拼接
• 方法 indexOf lastIndexOf 子字符串出现的位置
• 方法 localeCompare 比较两段字符串是否相同
• 方法 substring 截取一段子字符串
• 方法 split 根据分隔符，把字符串转换为数组
• 方法 replace 替换子字符串
• 方法 charAt方法/concat方法/substring 返回基本类型

9.3 数组对象
javascript中的数组是动态的，即长度是可以发生变化的。

• new Array 创建数组对象

数组定义格式:
		new Array();
		new Array(size);  // size 数组元素个数，数组成员默认值undefined
		new Array(element0, element0, ..., elementn);	//参数列表，为数组初始化数据

• 属性 length 数组长度

通过.length获取当前数组的长度

• for / for in 遍历一个数组

遍历有两种方式
1.结合for循环，通过下标遍历
for(i=0;i<数组名.length;i++){
...
}
2.使用增强for in循环遍历
for(i in 数组名){  
  函数名(数组名[i]);
}
在增强for in中，i是下标的意思

• 方法 concat 连接数组
• 方法 join 通过指定分隔符，返回一个数组的字符串表达
• 方法 push pop 分别在最后的位置插入数据和获取数据(获取后删除)
• 方法 unshift shift 分别在最开始的位置插入数据和获取数据(获取后删除)
• 方法 sort 对数组的内容进行排序
• 方法 sort(comparator) 自定义排序算法
• 方法 reverse 对数组的内容进行反转
• 方法 slice 获取子数组
• 方法 splice 删除和插入元素

9.4 Date对象
JavaScript使用Date对象表示日期；
new Date 创建日期对象
getFullYear
getMonth
getDate 年/月/日
getHours
getMinutes
getSeconds
getMilliseconds 时:分:秒:毫秒
getDay 一周的第几天
getTime 经历的毫秒数
setFullYear
setMonth
setDate
setHours
setMinutes
setSeconds

9.5 Math对象
Math是JavaScript的工具对象，用于常见的数学运算；

• 属性E PI 自然对数和圆周率
• 方法 abs 绝对值
• 方法 min max 最小最大
• 方法 pow 求幂
• 方法 round 四舍五入
• 方法 random 随机数

9.6 自定义对象
在JavaScript中可以自定义对象，添加新的属性，添加新的方法；

• 通过new Object()创建一个对象
• 通过function设计一种对象，然后实例化
• 通过prototype为已经存在的对象，增加新的方法

10. JS中的匿名函数
匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

10.1 匿名函数的创建

第一种方式：“=”右边的函数就是一个匿名函数，创造完毕函数后，又将该函数对象的引用赋给了double对象，通过double()再调用；
var double = function(x) { return 2* x; }
double();

第二种方式：创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数，创建即调用
(function(x, y){
    alert(x + y);  
})(2, 3);

10.2 匿名函数的使用场景：

<script type="text/javascript">
			//匿名函数的第一种情形：赋值命名再调用；
    		var fun=function(){
    			alert(1);
    		}
    		fun();
    		
    		//匿名函数的第二种情形：DOM事件的调用
    		var btn=document.querySelector("#btn");
    		btn.onclick=function(){
    			alert(1);
    		}
    		
    		//匿名函数的第三种情形：Window内置对象的调用
    		setInterval(function(){
    			alert(1);
    		}, 1000);
    		
    		//匿名函数的第四种情形：闭包
    		var obj={
	    		var name="test"；
    			say:function(){
    				alert(name);
    			}
    		}
    		obj.say();

10.3 闭包（closure）
闭包简单说是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕。

• 闭包的好处：

使用前：
function forTimeout(x, y){
    alert(x + y);
}
function delay(x , y  , time){
    setTimeout('forTimeout(' +  x + ',' +  y + ')' , time);    
}

使用后：
 function delay(x , y , time){
      setTimeout(
         function(){
             forTimeout(x , y) 
         }          
     , time);   
 }

• 闭包允许内层函数引用父函数中的变量，但是该变量是最终值

<ul>
<li>one</li>
<li>two</li>
 <li>three</li>
<li>one</li>
</ul>

var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);    
    };
}
结果：当鼠标移过每一个<li>元素时，总是弹出4，而不是我们期待的元素下标。

解决方法一：
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);    
        };                    
    })(i);
}

解决方法二：
var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){
    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标
    lists[ i ].onmouseover = function(){
        alert(this.$$index);    
    };
}

解决方法三：
function eventListener(list, index){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}

11. 调试方法

• 9.1 alert(1)
  alert(1)会弹出一个对话框，里面的内容是1。换句话说，如果弹出了1，这个位置以上的代码，都是可以运行的；当你不停的把alert(1)向下移动，当移动到某一行之后，就不再弹出，那么就证明那一行运行有问题。 这样就把问题的范围缩小了，就很容易通过肉眼观察法来定位真正问题所在。
• 浏览器的自带工具
  打开浏览器按下快捷键F12，就会出现工具页面，其中console页面用于输出一些错误和调试信息。
• 专业的编辑器
  编写代码时带有提示功能；

二、BOM浏览器对象模型
** 浏览器对象包括：**

• Window(窗口)
• Navigator(浏览器)
• Screen (客户端屏幕)
• History(访问历史)
• Location(浏览器地址)

以下仅做简单介绍，不是完整内容：

1. Window
1.1 窗口属性

• window.innerWidth ：文档显示区域的宽度
• window.innerHeight ：文档显示区域的高度
• window.outerWidth：浏览器的宽度
• window.outerHeight ：浏览器的高度

1.2 常见的弹出框
调用window的方法实现的，window是内置对象可以把window.省略掉，直接写方法名调用；

• alert ：警告框，常用于消息提示
• confirm ：确认框，常用于危险性操作的确认提示
• prompt ：输入框，很少会在实际中用到

1.3 计时器

• 1） 设置定时器：
  返回一个id值:setInterval(code,毫秒值);//周期定时器,反复周期执行
  返回一个id值:setTimeout(code,毫秒值);//一次性定时器,只会执行一次

  code:代码段： “正常js代码” 或 函数名
  millisec:时间间隔,单位是毫秒

• 2） 取消定时器：
  clearInterval(你要取消的定时器的id);//取消周期定时器
  clearTimeout(你要取消的定时器的id);//取消一次写定时器

2. Navigator
Navigator即浏览器对象，提供浏览器相关的信息；

• navigator.appName ：浏览器产品名称
• navigator.appVersion ：浏览器版本号
• navigator.appCodeName ：浏览器内部代码名称
• navigator.platform ：操作系统
• navigator.cookieEnabled ：是否启用Cookies
• navigator.userAgent ：浏览器的用户代理报头

3. Screen
Screen对象表示用户的屏幕相关信息；

• screen.width ：用户的屏幕分辨率
• screen.availWidth ：可用区域大小

4. History
History用于记录访问历史；

• history.back() ：返回上一次的访问
• history.go(-2) ：返回上上次的访问

5. Location
Location表示浏览器中的地址栏；

• location.reload() ：刷新当前页面
• location="/" ：跳转到首页
• location.assign("/") ：跳转到首页
• location.protocol ：协议（例如http:）
• location.hostname ：主机名
• location.port ：端口号(默认是80不显示)
• location.host ：主机+端口号
• location.pathname ：访问的路径
• location.hash ：锚点
• location.search ：参数列表

三、HTML DOM
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

DOM 是 W3C（万维网联盟）的标准，W3C DOM（） 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

HTML DOM 是：

• HTML 的标准对象模型（节点模型）
• HTML 的标准编程接口（对象方法和对象属性）
• W3C 标准

1. 节点
1.1 节点概念：
在 HTML DOM 中，所有事物都是节点，DOM 是被视为节点树的 HTML；

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

1.2 节点树

节点树中的节点彼此拥有层级关系，父节点（parentNode）、子节点（childNodes），和同级的子节点被称为同胞节点（nextSibling / previousSibling）。
在节点树中，顶端节点被称为根（root），每个节点都有父节点（除了根它没有父节点），一个节点可拥有任意数量的子，同胞是拥有相同父节点的节点；

1.3 详解子节点：
标签之间有任何字符、空白、换行都会产生文本元素即节点#text；

例1：
<div id="parentDiv">			
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div></div> //注意最后结束div紧靠着前一个div标签，没有换行和产生空格
 
 parentDiv的子节点有6个，nodeName分别是：#text 、DIV 、 #text  、DIV 、 #text 、DIV

例2：
<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
 </div>//注意此时div位置
 
 parentDiv的子节点有7个，nodeName分别是：#text 、 DIV 、  #text 、 DIV 、 #text 、 DIV 、 #text
  id="d1"的div子节点有1个，nodeName是：#text 

2. 方法
方法是我们可以在节点（HTML 元素）上执行的动作。
2.1 获取节点

• document.getElementById ：通过id获取元素节点，id是唯一的，所以返回是元素对象
• getElementsByTagName ：通过标签名称获取元素节点，返回的元素对象数组
• getElementsByClassName ：通过类名获取元素节点，返回的元素对象数组
• getElementsByName ：通过表单元素的name获取元素节点，返回的元素对象数组
• attributes ：获取属性节点，返回的属性对象数组
• parentNode ：获取节点（元素）的父节点，返回指定节点的父节点
• childNodes ：获取节点（元素）的子节点，返回元素对象数组

childNodes和children都可以获取一个元素节点的子节点：
childNodes 会包含文本节点
children会排除文本节点

2.2 创建节点

• createElement ：创建元素节点

  1）通过createElement创建一个新的元素节点
  2）把该元素节点，通过appendChild加入到另一个元素节点

• createTextNode：创建文本节点

  1）创建一个元素节点p (p是p标签，不是随便命名的变量名)
  2）通过createTextNode创建一个内容节点text
  3）把内容节点text，通过appendChild加入到元素节点p

• createAttribute ：创建属性节点

  1）创建一个元素节点a
  2）创建一个内容节点content
  3）把content通过appendChild加入到a
  4）通过createAttribute创建一个属性节点 href
  5）设置href值
  6）通过setAttributeNode把该属性设置到元素节点a上
  7）最后把a加入到div

2.3 插入节点

• appendChild 追加节点

  通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
  1） 创建新节点
  2） 获取父节点
  3） 通过appendChild追加

• insertBefore 在前方插入节点

  有时候，需要在指定位置插入节点，而不是只是追加在后面，这个时候就需要用到insertBefore
  1） 创建新节点
  2） 获取父节点
  3） 获取需要加入的子节点
  4） 通过insertBefore插入
  注: insertBefore的第一个参数是新元素，第二个参数是插入位置

2.4 替换节点

• replaceChild：替换节点

  与删除节点一样，替换节点也需要先获取父节点，然后通过父节点替换子节点。
  1） 获取父节点
  2） 创建子节点
  3） 获取被替换子节点
  4） 通过replaceChild进行替换
  注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点

2.5 删除节点

• removeChild ：删除元素节点

  要删除某个元素节点有两步 ：
  第一：先获取该元素的父节点
  第二：通过父节点，调用removeChild 删除该节点

• removeAttribute ：删除属性节点

  要删除某个属性节点有两步 ：
  第一：先获取该元素节点
  第二：元素节点，调用removeAttribute删除指定属性节点

• removeChild ：删除文本节点

  删除文本节点
  1）通过childNodes[0] 获取文本节点
  注:children[0] 只能获取第一个子元素节点，不能获取文本节点
  2）通过removeChild删除该文本节点
  但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。
  注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。

3. 属性
属性是节点（HTML 元素）的值，能够获取或设置。

• nodeName - 节点的名称

document的节点名称:#document
div元素节点的节点名称:DIV
div下属性id节点的节点名称:id
div下文本内容节点的节点名称:#text

• nodeValue - 节点的值

document是没有nodeValue的：null
元素节点是没有nodeValue的：null
属性节点color的nodeValue：red
内容节点的nodeValue：测试文本

• nodeType - 节点的类型
  

• innerHTML - 节点（元素）的文本值
  innerHTML和childNodes[0].nodeValue效果相同，都可以获取元素的文本内容；

• 获取属性节点的值的三种方式
  1）元素的默认属性：比如id，value，className可以通过 元素对象.id 直接访问
  2）元素的自定义属性：getAttribute(“属性名”)
  3）元素的自定义属性：attributes[“属性名”].nodeValue

• 改变样式
  通过设置一个元素节点的style属性；
  style.display ：隐藏和显示
  style.backgroundColor ：改变背景色

4. 事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应；
4.1 焦点事件

• 当组件获取焦点的时候，会触发onfocus事件
• 当组件失去焦点的时候，会触发onblur事件

4.2 鼠标事件

• 当在组件上鼠标按下的时候，会触发onmousedown事件
• 当在组件上鼠标弹起的时候，会触发onmouseup事件
• 当在组件上鼠标经过的时候，会触发onmousemove事件
• 当在组件上鼠标进入的时候，会触发onmouseover事件
• 当在组件上鼠标退出的时候，会触发onmouseout事件

4.3 键盘事件

• 当在组件上键盘按下的时候，会触发onkeydown事件
• 当在组件上键盘按下的时候，也会触发onkeypress事件
• 当在组件上键盘弹起的时候，会触发onkeyup事件

onkeydown和onkeypress的区别：
只要记得keydown和keypress都表示键盘按下，因为在不同浏览器上有不同的区别；

4.4 点击事件

• 当在组件上单击的时候，会触发onclick事件
• 当在组件上双击的时候，会触发ondblclick事件

注意！
1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
2：自定义函数不要使用click()，这是保留函数名

4.5 变化事件
当组件的值发生变化的时候，会触发onchange事件

注意： 对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点

4.6 提交事件
可以在form元素上，监听提交事件，当form元素@提交的时候，会触发onsubmit事件；

4.7 加载事件
当整个文档加载成功，或者一个图片加载成功，会触发加载事件即当body元素或者img@加载的时候，会触发onload事件；

4.8 当前组件（重点：this）
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去；

示例：
省市下拉同步案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .province{
            float: left;
        }
        .city{
            float: left;
        }
        .city option{
            display: none;
        }
    </style>
    <script>
        //先清空所有显示
        function show(province){
            var c = document.getElementsByClassName("c1");
            for(i=0;i<c.length;i++){
                (function(i){
                    c[i].style.display = "none";
                })(i)
            }
            var pindex = province.selectedIndex;//获取选中的项目index值
            var parray = province.options;//获取下拉列表的项目数组
            var pname = parray[pindex].innerHTML;//获取选中的项目的文本值
            var city = document.getElementsByName(pname);//根据类名获取对应的城市元素节点数组
            for(i=0;i<city.length;i++){
                (function(i){
                    city[i].style.display = "inline";
                    city[0].selected = "selected";
                })(i)
            }
        }
    </script>
</head>
<body>
<form>
    <div class="province">
        <select onchange="show(this)">
            <option>选择省份</option>
            <option id="p1">江苏省</option>
            <option id="p2">浙江省</option>
            <option id="p3">福建省</option>
        </select>
    </div>
    <div class="city">
        <select>
            <option class="default" >选择城市</option>
            <option class="c1" name="江苏省">南京市</option>
            <option class="c1" name="江苏省">苏州市</option>
            <option class="c1" name="江苏省">无锡市</option>
            <option class="c1" name="浙江省">杭州市</option>
            <option class="c1" name="浙江省">宁波市</option>
            <option class="c1" name="浙江省">嘉兴市</option>
            <option class="c1" name="福建省">福州市</option>
            <option class="c1" name="福建省">厦门市</option>
            <option class="c1" name="福建省">莆田市</option>
        </select>
    </div>
    <div style="clear: both;"></div>
</form>
</body>
</html>

5. JSON
JSON（JavaScript Object Notation），是一种轻量级的数据交换格式。

6. AJAX