JavaScript是一种轻量级的脚本语言，可插入HTML页面，由浏览器执行。

使用<script>标签可以在HTML中插入JavaScript。

JavaScript基础

输出：

1 2	document.write("<h1>标签h1</h1>"); console.log("hello"); // 控制台输出

JavaScript代码按照编写顺序执行。

单行注释和多行注释形式与C/C++相同。

变量定义：

1 2	var x = 10; var y = x + 5;

数据类型：

var string = "hello"; // 字符串
var i1 = 10; // 数字
var flag = true; // 布尔
var arr = [1, 2, 3, 4]; // 数组
var arr = new Array(1, 2, 3, 4); // 数组定义2
var arr = new Array(); // 数组定义3
arr[0] = 1; arr[1] = 2; arr[2] = 3; arr[3] = 4;
document.write(arr[2]); // 下标从0开始
var n = null; // 空类型
var r; // 未定义
i1 = null; // 通过赋值为null清除类型

运算符：

基本与C相同。

字符串可以直接用+拼接。

“==”："100" == 100值为true。

“===”："100" == 100值为false。

“!=”与”!==”同理。

条件语句：

与C相同。

var i = 10;
if (i >= 10) {
	document.write("i>=10");
} else {
    document.write("i<10");
}

var i = 5;
switch (i) {
    case 1:
        break;
    case 2:
        break;
    default:
        break;
}

循环：

与C基本相同。

var i = [1, 2, 3, 4, 5, 6];
for (var j = 0; j < 6; j++) {
	document.write(i[j]);
}
var j;
for (j in i) {
    document.write(i[j]);
}

while (...) {
	...
}
do {
    ...
} while (...);

跳转语句：

continue、break。与C相同。

函数：

function fun(a, b) {
	var sum = a + b;
	return sum;
}
var v1 = demo(20, 10);
alert(v1); // 弹出框

函数既可以在JavaScript脚本中被调用，也可以在HTML中调用。

1	<button onclick="fun()">按钮</button>

局部变量与全局变量：

在函数中定义的为局部变量，在外定义的都是全局变量。

类似python。

JavaScript异常捕获

try {
	alert(str);
} catch (err) {
	alert(err);
}

捕获str未定义错误。

用throw语句可以抛出自定义错误。

JavaScript事件

JavaScript允许在HTML事件被侦测到时执行代码。

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载
onunload	关闭网页事件
onselect	文本框选中事件
onfocus	光标聚焦事件
onblur	移开光标事件

DOM

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

DOM HTML tree

操作HTML元素

改变HTML输出流

在文档加载完成之后再使用document.write()会覆盖原文档。
寻找元素

document.getElementById("pid")通过id定位元素。

document.getElementsByTagName("p")通过标签定位元素。
改变HTML内容

属性innerHTML为元素内容。
改变HTML属性

属性attributes为元素属性集合。

可以直接通过.color/.href等方式直接修改属性。

操作CSS

1	document.getElementById("div").style.background = "blue";

DOM EventListener

addEventListener()方法用于向指定元素添加事件句柄。

1	document.getElementById("btn").addEventListener("click", function(){alert("hello!")});

可以添加多个事件句柄，事件句柄之间不会覆盖。

removeEventListener()方法用于移除指定事件句柄。

事件流

事件流描述页面中接收事件的顺序。

事件冒泡：从最内层向外依次接收。

事件捕获：从最外层向内依次接收。

事件处理

HTML事件处理

直接添加到HTML结构中

<button id="btn" onclick="fun()">按钮</button>
<script>
    function fun() {
        alert("Hello");
    }
</script>

DOM 0级事件处理

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){alert("Hello");};
    btn.onclick = null;
</script>

DOM 2级事件处理

btn.addEventListener()，参数分别为事件名、事件处理函数、布尔值（true为事件捕获/false为事件冒泡）。

事件对象

在触发DOM事件时会产生一个对象，称为事件对象event。

<script>
	document.getElementById("btn").addEventListener("click", fun);
    function fun(event) { // 获得事件对象
        alert(event.type);
    }
</script>

type属性：获取事件类型
target属性：获取事件目标
stopPropagation()方法：阻止事件冒泡
preventDefault()方法：阻止事件默认行为

JavaScript对象

自定义对象

people = new Object(); // 创建自定义对象
people.name = "iwen";
people.age = "30";

var people = {name:"iwen", age:"30"}; // 创建自定义对象

function people(name, age) {
    this.name = name;
    this.age = age;
}
var son = new people("iwen", 30); // 创建自定义对象

String字符串对象

字符串可以使用单引号或双引号创建。

length属性：字符串长度
indexOf()方法：返回子串位置
match()方法：正则表达式匹配，返回匹配串
replace()方法：替换子串
toUpperCase()/toLowerCase()：大小写转换
split()方法：分割字符串，返回一个数组

Date日期对象

1	var date = new Date(); // 获取当前日期对象

getFullYear()方法：获取年份
getTime()方法：获取毫秒数
setFullYear()方法：设置时间
getDay()方法：获取星期

Array数组对象

concat()方法：合并数组
sort()方法：排序，参数可传cmp函数
push()方法：在末尾追加元素
reverse()方法：翻转

Math对象

用于执行常见的算术任务。

Math.round()：四舍五入
Math.random()：产生一个从0到1的随机数
Math.max()/Math.min()：最大值/最小值
Math.abs()：绝对值

DOM对象控制HTML

方法与属性：

getElementsByName()：根据name获取元素
getElementsByTagName()：根据标签获取元素
getAttribute()：获取元素属性
setAttribute()：设置元素属性
childNodes：子节点
parentNode：父节点
createElement()：创建元素节点
createTextNode()：创建文本节点
insertBefore()：插入节点
appendChild()：添加结点
removeChild()：删除节点
offsetHeight：网页尺寸

浏览器对象

浏览器对象模型（Browser Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象。

window对象

window对象是BOM的核心，指当前的浏览器窗口。

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。

HTML DOM的document也是window对象的属性。

innerHeight属性：浏览器窗口内部高度
innerWidth属性：浏览器窗口内部宽度
open()方法：打开新窗口，第一个参数为URL
close()方法：关闭窗口

计时事件

var t = setInterval(function() {
    alert("hello");
}, 5000); // 重复执行

clearInterval(t); // 停止重复

var t = setTimeout(function() {
    close();
}, 1000); // 延时执行

clearTimeout(t); // 停止该延时执行

History对象

window.history对象包含浏览器历史记录url的集合。

history.back()方法：返回上一页面
history.forward()方法：返回下一页面
history.go()方法：跳转某一页面，-1为上一页面，1为下一页面

Location对象

window.location对象用于获得当前页面的地址，并把浏览器重定向到新的页面。

hostname属性：返回web主机的域名
pathname属性：返回当前页面的路径和文件名
port属性：返回web主机的端口
protocol属性：返回所使用的web协议
href属性：返回当前页面的URL
assign()方法：加载新的文档

Screen对象

window.screen对象包含有关用户屏幕的信息。

availWidth属性：可用屏幕宽度
availHeight属性：可用屏幕高度
Height属性：屏幕高度
Width属性：屏幕宽度