# JavaScript 组成

由 ECMScript、DOM、BOM 三大部分组成

# 基本语法

# 输入输出语句

输入输出

	alert(msg);// 浏览器弹出警示框
	console(msg);// 浏览器控制台打印输出信息
	prompt(info);// 浏览器弹出输入框，用户可以输入

# 声明变量

声明变量

	var name;
	let name;
	const pi = 3.14159;// 常量

var 和 let 声明的变量数据类型可以变化

# 数据类型

分为五大类数字类型、字符串类型、布尔类型、undefined (未定义) 和 null (空)

数据类型

	var num = 10;// 数字类型
	var str = '字符串';// 字符串类型
	var str = '字符串'+100+'条';// 字符串拼接
	var bool = true;// 布尔类型
	var un = undefined;//undefined
	var NULL = null;//null

# 创建数组

数组

	var arr = new Array();// 第一种
	var array = [];// 第二种

# 函数

函数使用分为两步: 声明函数和调用函数
其中声明函数形式为

function 函数名 (形参 1, 形参 2...) {
// 函数体
return 返回值
}
调用函数形式为
函数名 (实参 1, 实参 2...);

函数

	// 声明函数
	function printf(str) {
	cons0le.log(str);
	return 12;
	}
	// 调用函数
	var num = printf('hello world!');

另一种声明函数形式 (匿名函数)

vae 变量名 function (形参 1, 形参 2...){
// 函数体
}
调用函数方式
变量名 (实参 1, 实参 2...);

匿名函数

	// 声明函数
	var num = function printf(str) {
	cons0le.log(str);
	return 12;
	}
	// 调用函数
	num('hello world!');

# 对象

对象由属性和方法组成。
构造对象有三种方法，分别是利用对象字面量创建对象、利用 new object 创建对象、利用构造函数创建对象。

创建对象前两种方法

	// 利用对象字面量创建对象
	var obj = {
	name: '列怒欺',
	age: 22,
	sec: '男',
	printf:function (str) {
	cons0le.log(str);
	return 12;
	}
	}
	// 利用 new object 创建对象
	var obj = new object();
	obj.name = '列怒欺';
	obj.age = 22;
	obj.sec = '男';
	obj.printf = function (str) {
	cons0le.log(str);
	return 12;
	}

其中利用构造函数创建对象格式为

function () 构造函数名 (形参 1, 形参 2...) {
this. 属性 = 值；
this. 方法 = function () {}
}
new 构造函数名 (实参 1, 实参 2...);

构造函数创建对象

	// 利用构造函数创建对象
	function Star(name,age,sex)
	{
	this.name = name;
	this.age = age;
	this.sex = sex;
	this.printf = function (str) {
	cons0le.log(str);
	return 12;
	}
	// 调用函数生成对象
	var obj = new Star('列怒欺',22,'男');

# for in 语句

作用是遍历对象属性

for in语句

	// 声明对象
	var obj = new object();
	obj.name = '列怒欺';
	obj.age = 22;
	obj.sec = '男';
	obj.printf = function (str) {
	cons0le.log(str);
	return 12;
	}

	for(var k in obj) {
	console.log(k);// 打印对象属性
	}

# 文档对象模型 (DOM)

主要作用是操作页面元素

# 获取元素

获取元素

	var id = document.getElementById('IDName');// 根据 id 获取元素
	var tag = document.getElementSByTagName('TagName');// 根据标签名获取元素
	var class = document.getElementsByClassName('ClassName');// 根据类名获取元素
	var selector = document.querySelector('SelectorName');// 返回指定选择器的第一个元素
	var selector = document.querySelectorAll('SelectorName');// 返回指定选择器的所有元素
	var body = document.body;// 获取 body 元素
	var html = document.documentElement;// 获取 html 元素

# 事件基础

事件三要素：事件源、事件类型、事件处理程序

点击事件

	var btn = document.getElementById('btn');
	// 事件源事件类型事件处理程序
	btn.onclick = function() {
	aleret('hello');
	}

# 操作元素

主要用 innerText 和 innerHTML (常用) 以及 img、input 等其它操作。

操作元素

	var div = document.getElementById('div');
	div.innerText = '修改元素内容';
	div.innerHTML = '修改元素内容';

# 自定义属性值

自定义属性值

	<div id="demo" index="1" class="nav"></div>

	//div.getAttribute (' 自定义属性值 ');
	div.getAttribute('index');// 获取自定义属性值
	//div.setAttribute (' 属性值 ',' 值 ');
	div.setAttribute('index','2');// 修改自定义属性值
	//div.removeAttribute (' 自定义属性值 ');
	div.removeAttribute('index');// 移除自定义属性

# 节点属性

节点属性有元素节点、文本节点和属性节点，这里主要是元素节点

获取父节点

	var childNode = document.querySelector('SelectorName');// 先得到子节点
	childNode.parentNode;// 得到父节点

获取子节点

	var parentNode = document.querySelector('SelectorName');// 先得到父节点
	parentNode.childNode;// 得到子节点

获取第一个子元素和最后一个子元素

	var parentNode = document.querySelector('SelectorName');// 先得到父节点
	parentNode.firstElementChild;// 获取第一个子元素
	parentNode.lastElementChild;// 获取最后一个子元素

创建与添加节点

	var Node = document.CreateElement('div'); // 创建节点
	var pos = document.querySelector('SelectorName');// 得到放置节点位置
	pos.appendChild(Node);// 在 pos 处添加节点

删除和复制节点

	var parentNode = document.querySelector('SelectorName');// 先得到父节点
	parentNode.removeChild(parentNode.childNodeName);// 删除父节点的子节点

	var clone = childNode.CloneNode();// 克隆节点并返回变量
	parentNode.appendChild(clone);// 添加节点

若 CloneNode () 括号里参数为空，则为浅拷贝，只复制标签，不复制内容，含参数 true, 为深拷贝，复制内容和标签。

# 浏览器对象模式 (BOM)

主要作用是进行浏览器与页面的交互

# windows 对象常见事件

# 窗口加载事件

load 需等页面全部加载完才能显示，而 DOMcontentLoaded 是只要 DOM 加载完就显示，不需要页面元素全加载完，会更快一些

窗口加载事件

	windows.addEventListener("load",function(){
	// 可以放函数体或嵌套函数
	});
	windows.addEventListener("DOMcontentLoaded",function(){
	// 可以放函数体或嵌套函数
	});

# 调整窗口大小事件

调整窗口大小事件

	windows.addEventListener("resize",function(){
	// 可以放函数体或嵌套函数
	});

	windows.onresize = function(){
	// 可以放函数体或嵌套函数
	}

# 定时器

设置定时器语法

windows.setTimeout(调用函数,[延迟的毫秒数]);延迟的毫秒数不写默认为0,单位为毫秒,调用函数可直接写函数或函数名

清除定时器语法

windows.clearTimeout(timeoutID);timeoutID是setTimeout函数返回的变量

使用 setInterval () 定时器回调函数

windows.setInterval(回调函数,[间隔的毫秒数]);

停止 setInterval () 定时器回调函数

windows.clearInterval(timeoutID);

定时器

	// 设置定时器
	var timer = windows.setTimeout(function(){
	// 可以放函数体或嵌套函数
	},0);
	// 清除定时器
	clearTimeout(timer);
	// 定时器使用回调函数
	var set = setInterval(function(){
	// 可以放函数体或嵌套函数
	},100)
	// 停止 setInterval () 定时器
	clearInterval(set);

JavaScript