JavaScript学习笔记(基础）

前端三大块

1. HTML：页面结构
2. CSS：页面表现—元素大小、颜色、位置、隐藏或显示、部分动画
3. JavaScript：页面行为—部分动画效果、页面与用户的交互、页面功能

JavaScript介绍
JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。
JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript（Adobe公司，需要插件）等。

JavaScript组成

1. ECMAscript javascript的语法（变量、函数、循环语句等语法）
2. DOM文档对象模型 操作html和css方法
3. BOM浏览器对象模型 操作浏览器的一些方法

JavaScript嵌入页面的方式

1. 行间事件（主要用于事件）
   
2. 页面script标签嵌入

部分关键字
break：终止switch或循环
continue：跳出循环并在顶端开始
debugger：停知执行JavaScript，并调用调试函数（如果可用）
do...while：执行语句块，并在条件为真时重复代码块
for：标记需要被执行的语句块，只要条件为真
function：声明函数
if...else：标记需要被执行的语句块，根据某个条件
return：退出函数
switch：标记需要被执行的语句块，根据不同的情况
try...catch：对语句块实现错误处理
var：声明变量

变量和数据结构

变量
JavaScript时一种弱类型语言，JavaScript的变量类型由它的值来决定。定义变量需要关键字’var’

var iNum = 123;

var sTr = 'asd';

同时定义多个变量可以用","隔开，公用一个’var’关键字

var iNum = 45, sTr = 'qwe', sCount = '68';

变量类型

5种基本数据类型：

1. number数据类型
2. string字符串类型
3. boolean布尔类型：true或false
4. undefined类型，变量声明未初始化，它的值就是undefined
5. null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

匈牙利命名风格
对象o Object 比如：oDiv
数组a Array 比如：altems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

数组方法
aList.length：获取数组长度
aList[0]：用下表操作数组的某个数据
join()：将数组成员通过一个分隔符合并成字符串
push()：在数组最后增加成员
pop()：从数组最后删除成员
unshift()：从数组前面增加成员
shift()：从数组前面删除成员
aList.reverse()：将数组反转
indexOf()：返回数组中元素第一次出现的索引值
splice()：在数组中增加成员或删除成员
aList.splice(2,1,7,8,9);从第2个元素开始，删除一个元素，然后在此位置增加7，8，9三个元素

字符串

1. 字符串合并操作：“+”
   数字与字符串相加等同于字符串相加
2. parselnt()：将数字字符串转化为整数
3. parseFloat()：将数字字符串转化为小数
4. split()：把一个字符串分隔成字符串组成的数组
5. charAt()：获取字符串中的某一个字符
6. indexOf()：查找字符串是否含有某字符
7. substring()：截取字符串 substring(start,end) 不包括end
8. toUpperCase()：字符串转大写
9. toLowerCase()：字符串转小写
   字符串反转：str2=str1.split(’’).reverse().join(’’)

JavaScript输出
JavaScript没有任何打印或者输出的函数
JavaScript显示数据：
window.alert()弹出警告框
document.write()方法将内容写道HTML文档中
innerHEML写入到HTML元素
consle.log()写入到浏览器的控制台

操作HTML元素，使用document.getElementById(id)访问某个HTML元素

JavaScript错误 - Throw和Try to Catch
try语句是您能够测试代码块中的错误
catch语句允许您处理错误
throw语句允许您创建自定义错误
finally使您能够执行代码，在try和catch之后，无论结果如何

JavaScript对象
对象因为是变量。但是对象包含很多值。
值以 名称:值 对的方式来书写
JavaScript对象是被命名值的容器

对象方法
方法是在对象上执行的动作
方法以函数定义被存储在属性中
访问对象属性 对象名.属性
访问对象方法 对象名.方法名（）

HTML DOM 文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被结构化为对象树

通过这个对象模型，JavaScript获得创建动态HTML的所有力量：
JavaScript能改变页面中的所有HTML元素
JavaScript能改变页面所有的HTML属性
JavaScript能改变页面所有的CSS样式
JavaScript能删除已有的HTML元素和属性
JavaScript能添加新的HTML元素和属性
JavaScript能对页面中所有已有的HTML事件做出反应
JavaScript能在页面创建新的HTML事件

什么是DOM?
DOM是意象W3C(World Wide Web Consortium)标准。

DOM定义了访问文档的标准：
“W3C文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本的访问、更新文档的内容、结构和样式。“

W3C DOM标准被分为3个不同的部分：
Core DOM - 所有文档类型的标准模型
XML DOM - XML文档的标准模型
HTML DOM - HTML文档的标准模型

什么是HTML DOM?
HTML DOM是HTML的标准对象模型和编程接口。它定义了：
作为对象的HTML元素
所有HTML元素的属性
访问所有HTML元素的事件的方法
所有HTML元素的事件
换言之：HTML DOM是关于如何获取、更改、添加或删除HTML元素的标准。

DOM编程界面
HTML DOM能够通过JavaScript进行访问（也可以通过其他编程语言）。
在DOM中，所有HTML元素都被定义为对象。
编程界面是每个对象的属性和方法

改变HTML元素
改变元素的inner HTML：element.innerHTML = new html content
改变HTML元素的属性值：element.attribute = new value
或element.setAttribute(attribute, value)
改变HTML的样式：element.style.property = new style

添加和删除元素
创建HTML元素：document.createElement(element)
删除HTML元素：document.removeChild(element)
添加HTML元素：document.appendChild(element)
替换HTML元素：document.replaceChild(element)
写入HTML输出流：document.write(text)

创建HTML元素（节点)
如需向HTML DOM添加新元素，您必须首先创建这个元素（元素节点），然后将其追加到已有元素。

创建一个新的< p >元素：

var para = document.createElment("p");

如需向< p >元素添加文本，则必须首先创建文本节点:

var node = document.createTextNode("这是一个新段落");

向< p >元素追加这个文本节点:

para.appendChild(node);

查找一个已有的元素：

var element = document.getElementById("div1");

向已有元素追加新元素：

element.appendChild(para);

创建新HTML元素 - insertBefore()
前面的例子中appendChild()方法，追加新元素作为父的最后一个子
除此之外还可以使用insertBefore()方法；

删除已有HTML元素
如需删除某个HTML元素，需要知晓该元素的父
找到你想要删除的子，利用其parentNode属性找到父：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换HTML元素
使用replaceChild()方法

添加事件处理程序

document.getElementById(id).onclick = function(){code}

HTMLCollection对象
getElementsByTagName()放回HTMLCollection对象
HTMLCollection对象是类数组的HTML元素列表（集合）
下面代码选取文档中的所有< p >元素：

var x = document.getElementsByTagName("p");

该集合中的元素可通过索引号进行访问。
如需访问第二个< p >元素，可以这样写：

y = x[1];

HTML HTMLCollection长度
length属性定义了HTMLCollection中元素的数量：

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

改变所有< p >元素的背景色：

var myCollection = document.getElementsByTagName("p");
for (var i=0; i<myCollection.length; i++){
	myCollection[i].style.backgroundColor = "red";    	
}

HTML DOM NodeList对象

NodeList对象是从文档中提取的节点列表（集合）
NodeList对象与HTMLCollection对象几乎相同
如使用getElementsByVlassName()方法，某些（老的）浏览器会返回NodeLiset对象而不是HTMLCollection
所有浏览器都会为childNodes属性返回NodeList对象
大多数浏览器会为querySelectorAll()方法返回NodeList对象

选取文档中的所有< p >节点：

var mayNodeList = document.querySelectorAll("p");

HTML DOM Node List长度
length属性定义节点列表中的节点数：

var myNodeList = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

HTMLCollection与NodeList的区别
HTMLCollection是HTML元素的集合
NodeList是文档节点的集合
NodeList和HTML集合几乎完全相同
HTMLCollection和NodeList对象都是类数组的对象列表（集合）
他们都有定义列表（集合）中项目数length属性
它们可以通过索引（0，1，2，3，…）像数组那样访问每个项目

访问HTMLCollection项目，可以通过它们的名称、id或索引号
访问Node List项目，只能通过他们的索引号
只有NodeList对象能包含属性节点和文本节点
节点列表不是数组
节点数组看起来像数组，但并不是
我们能够遍历节点列表并像数组那样引用其节点
不过，无法对节点使用数组方法

BOM

1. window
2. location
3. history
4. 弹出框
5. timing

window对象
所有浏览器都支持window对象，它代表浏览器的窗口
所有全局JavaScript对象，函数和变量自动成为window对象和成员
全局变量是window对象的属性
全局函数使window对象的方法
甚至（HTML DOM的）document对象也是window对象属性
window.document.getElemetById("header");
等同于：document.getElementById("header");

窗口尺寸
两个属性可用于确定浏览器窗口的尺寸
这两个属性都已像素返回尺寸：
window.innerHeight - 浏览器窗口的内高度（像素）
window.innerWidth - 浏览器窗口的内宽度（像素）

location
window.location.href 获取或者重定url地址
window.location.search 获取地址参数部分
window.location.hash 获取页面锚点或者叫哈希值

Window History
window.history对象可以不带window书写
为了保护用户的饮祀，JavaScript访问此对象存在限制
一些方法：
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器点击前进按钮

JavaScript有三种类型的弹出框：警告框、确认框和提示框

警告框
如果要确保信息传递给用户，通常会使用警告框
当警告框弹出时，用户需要单击”确定“来继续
语法:

window.alert("sometext");

window.alert()方法可以不带window前缀来写

确认框
语法：window.confirm('sometext");

var r = confirm('请按按钮");
if(r == true){
       x = '您按了确认!';
}else{
       x = '您按了取消!';
}

提示框
语法：window.prompt("sometext", "defaultText");

var person = prompt('请输入您的姓名', '比尔盖茨');
if(person != null){
        document.write('欢迎你，'+person);
}

如果需要在弹出框中显示折行，使用\n

JavaScript可以在时间间隔内执行
这就时所谓的定时时间（Timing Event）

Timing 事件
window对象允许以指定的时间间隔执行代码
这些时间间隔被成为定时时间

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数

setInterval(function, milliseconds)

每隔指定毫秒执行函数

定时器
定时器在JavaScript中的作用

1. 制作动画
2. 异步操作
3. 函数缓冲与节流

定时器类型及语法
setTimeout：只执行一次的定时器
clearTimeout：关闭只执行一次的定时器
setInterval：反复执行的定时器
clearInterval：关闭反复执行的定时器