笔记目录

概述
基本概念
函数
弹框
对象
数组
String对象
Window对象
MATH对象
DATE对象
DOM对象
事件

写在前面的：系统的学习JavaScript，以w3cschool提供的微课和文档为基准，记录自己之前不知道的知识点。学了一遍，今后就是项目中的应用和深入的学习了，笔记不断。各位仅供参考。

概述

组成
1. ECMAScript，描述了该语言的语法和基本对象。
2. 文档对象模型（DOM），描述处理网页内容的方法和接口。
3. 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
JavaScript可被放置在 HTML 页面的 <body> 和 <head> 部分中。
输出方式
1. document.write()：将内容输出到HTML文档中。
2. window.alert()：弹出警告框。
3. innerHTML：写入到HTML元素中。
4. console.log()：写入到浏览器的控制台。

基本概念

数据类型
1. 基本类型：string，number，boolean，null，undefined，symbol（ES6新增）。
2. 复杂类型：object。
3. JavaScript 中的变量是没有类型的，只有值才有。
4. 弱类型：变量可以随时持有任何类型的值。
5. undefined类型只有一个值，即undefined。
6. null类型也只有一个值，即null。
7. 当值为 0，null，undefined，空字符串时布尔值为false。 任何拥有值的字符串其布尔值为true。
转义字符
在JavaScript中，取模运算符不仅支持整数，还支持浮点数。

函数

参数规则
1. JavaScript 函数定义时参数没有指定数据类型。
2. JavaScript 函数对隐藏参数(arguments)没有进行检测。
3. JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

弹框

Alert
1. 当弹出警报框时，用户必须单击“确定”继续。
2. 警报功能采用单个参数，即弹出框中显示的文本。
3. 要在警告框中显示换行可以使用\n。
Prompt
1. 当弹出提示框时，输入输入值后，用户将不得不单击“确定”或“取消”继续。
2. 如果用户单击确定，该框将返回输入值。如果用户单击取消，该框将返回null。
3. 两个参数：前者文本框中显示的标签；后者输入框中的预设文字（可选）。
Confirm
1. 当弹出确认框时，用户必须单击“确定”或“取消”继续。
2. 如果用户单击确定，该框将返回true。如果用户单击取消，该框将返回 false。

对象

删除对象属性：delete ourDog['tails'];。
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）。
将函数关联到对象属性时不需要写括号。

数组

push()：在数组尾部压入一个元素与给数组 a[a.length]赋值是一样的。
pop()：方法用来“抛出”一个数组末尾的值。
shift()：方法用来“抛出”一个数组起始的值。
unshift()：在数组头部压入一个元素。
concat()：方法允许您连接数组并创建一个全新的数组。
slice()：方法可从已有的数组中返回选定的元素。不会修改原数组。

String对象

方法及描述

replace()

var str="Mr Blue has a blue house and a blue car and a blue hat";

// 将字符串中首次出现的blue替换成red
var n=str.replace("blue", "red"); //Mr Blue has a red house and a blue car and a blue hat

// 用正则匹配字符串中所有出现的blue并替换成red
var c=str.replace(/blue/g, "red"); //Mr red has a red house and a red car and a red hat

substring()

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。

如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

var anyString = "w3cschool";

// 输出 "w3c"
document.write(anyString.substring(0,3)+"<br>");
document.write(anyString.substring(3,0)+"<br>");
document.write(anyString.substring(3,-3)+"<br>");
document.write(anyString.substring(3,NaN)+"<br>");
document.write(anyString.substring(-2,3)+"<br>");
document.write(anyString.substring(NaN,3)+"<br>");

// 输出 "cho"
document.write(anyString.substring(4,7)+"<br>");
document.write(anyString.substring(7,4)+"<br>");

// 输出 ""
document.write(anyString.substring(4,4)+"<br>");

// 输出 "w3csch"
document.write(anyString.substring(0,6)+"<br>");

// 输出 "w3cschool"
document.write(anyString.substring(0,9)+"<br>");
document.write(anyString.substring(0,12));

Window对象

方法

MATH对象

方法
Math.floor()向下取整。
Math.random() 返回介于 0（包含） ~ 1（不包含）之间的一个随机数。

返回 min（包含）～ max（包含）之间的数字：

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

Math.round() 返回一个数字四舍五入后最接近的整数。

Math.round()并不总是舍入到远离0的方向（尤其是在负数的小数部分恰好等于0.5的情况下）

x = Math.round(20.49);   //20
x = Math.round(20.5);    //21
x = Math.round(-20.5);   //-20
x = Math.round(-20.51);  //-21

DATE对象

方法

DOM对象

选择元素

//通过 id 找元素
document.getElementById(id) 

//通过 类 找元素
document.getElementsByClassName(name) 

//通过 标签 找元素
document.getElementsByTagName(name)

元素的方法
1. element.childNodes 返回一个元素的子节点的数组。
2. element.firstChild 返回元素的第一个子节点。
3. element.lastChild 返回元素的最后一个子节点。
4. element.hasChildNodes 如果元素有任何子节点，则返回 true，否则为 false 。
5. element.nextSibling 返回相同树级别的下一个节点。
6. element.previousSibling 返回在同一树级别的上一个节点。
7. element.parentNode 返回元素的父节点。
改变元素样式
1. 可以使用元素的 style 对象来访问所有样式属性。
2. 所有CSS属性都可以使用JavaScript进行设置和修改。
3. 不能在属性名称中使用破折号（ - ）：这些替换为驼峰写法，其中复合词以大写字母开头比如: background-color属性应该被写为 backgroundColor。
添加删除节点
1. element.cloneNode() 克隆元素并返回结果节点。
2. document.createElement(element) 创建一个新的元素节点。
3. document.createTextNode(text) 创建一个新的文本节点。
4. element.appendChild(newNode) 将一个新的子节点添加到元素作为最后一个子节点。
5. element.insertBefore(node1, node2) 在节点2之前插入node1作为子节点。
6. 要删除HTML元素，必须选择元素的父项并使用 removeChild(node) 方法。
7. 另一种删除方式：使用 parentNode 属性来获取要删除的元素的父项：
```
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
```
8. element.replaceChild(newNode,oldNode) 替换元素。

事件

常见HTML事件
onchange 事件主要用于文本框。当文本框内的文本发生变化并且焦点从元素中丢失时，调用事件处理程序。
事件监听
1. addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。可以向一个元素添加许多事件处理程序。
2. 还可以将许多同一类型的事件处理程序添加到一个元素，即两个“点击”事件。
3. 使用 removeEventListener()删除事件监听。
```
<button id="demo">开始</button>

<script>
	var btn = document.getElementById("demo");
	btn.addEventListener("click", myFunction);
	
	function myFunction() {
	  alert(Math.random());
	  btn.removeEventListener("click", myFunction);
	}
</script>
```