JS的组成
JS由ECMAscript(es)，dom，bom组成
ECMAScript: (3/5/6/7)它是JS语言的标准,规定了JS的编程语法和基础核心知识
DOM: document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法
BOM: browser object model 浏览器对象模型 ,提供了很多操作浏览器 的属性方法,而这些方法都存放在window浏览器对象上
JS的使用
在 HTML 中，JS 代码必须位于 <script> 与 </script> 标签之间。
旧的 JS例子也许会使用 type 属性：<script type="text/javascript">。。type 属性不是必需的。JS 是 HTML 中的默认脚本语言。
JS代码块可以放在head，body标签中，或者html标签之外（不推荐），最好放在body和html标签之间，这样可以减少页面呈现时间，有更好的用户体验。
JS代码同样可以外部引用，使用src属性配置路径（绝对路径，相对路径，同文件夹不加路径也可）
<script src="https://域名/js/javascript1.js"></script>
<script src="/js/javascript1.js"></script>
<script src="javascript1.js"></script>
JS输出
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台
JS数据类型
Undefined、Null、Boolean、Number和String，Object（包含数组，函数等等，本质是无序键值对）
var firstName; // undefined
var bool = true; // boolean
var obj = null; // null
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var dogs = ["a", "b", "c"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象 访问：x.firstName or x['firstName']
JS字面量和变量
3
3.33
"string"
'string'
var a = 1;
var b = "123";
JS注释和标识符
//我是单行注释123
/*12334
我是多行注释
*/
在大多数编程语言中，合法名称的规则大多相同。
在 JS 中，变量命名必须是数字、字母、下划线（-）或美元符号（$）。
首字母不能为数字(不推荐$和_开头，这往往会产生冲突，比如jquery)。
变量命名可以遵循大小驼峰法则，并且大小写敏感
var firstName = 1;
var FirstName = 2;
JS的运算符“+”
//数字和数字
var x = 3 + 5;//8
//字符串和字符串
var x = "a" + " " + "b";//"a b"
//数字和字符串，顺序问题
var x = "8" + 3 + 5;//"835"
var x = 3 + 5 + "8";//"88"
JS的typeof
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number" 整数小数都是number
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" 数组即对象
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
JS事件
| 事件名 | 事件介绍 |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
JS事件触发的重要属性，方法
event.clientX
event.clientY
event.screenX
event.screenY
event.type//返回事件名称
event.stopPropagation()//阻止事件冒泡
event.preventDefault()//阻止默认事件
JS字符串方法
length属性返回字符串长度
var str = '123456';
var len = str.length;
转义字符
’
"
\
\n 换行
\r 回车
字符串搜索
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。
search和indexOf
search() 方法搜索特定值的字符串，并返回匹配的位置
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。
字符串切片
slice(start, end) //提取字符串的某个部分并在新字符串中返回被提取的部分，如果某个参数为负，则从字符串的结尾开始计数
substring(start, end) //substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引
substr(start, length) //substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。
字符串替换
replace('old','new')//返回的是新字符串，只替换首个匹配，可以使用正则
大小写转换
toUpperCase()//转大写
toLowerCase()//转小写
字符串连接，类似+
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
去除字符串两端空白符
var str = " Hello World! ";
alert(str.trim());
字符串转数组
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
字符串索引
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
str[0]; // 返回 H
// []索引的缺陷
/*
不适用 Internet Explorer 7 或更早的版本
它让字符串看起来像是数组（其实并不是,字符串一创建就不可变）
如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）
*/
JS== 和 ===
== 基本类型比较的是值，对象比较的是地址
=== 不但比较值还比较类型
NaN - 非数值 和 Infinity无穷大
NaN 的类型还是数，typeof NaN 返回 number
数字+NaN = NaN
字符串+NaN = 字符串
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
Infinity还是数字类型
除以 0（零）也会生成 Infinity：
var x = 2 / 0; // x 将是 Infinity
var y = -2 / 0; // y 将是 -Infinity
Number方法
toString() 以字符串返回数值。 所有 JavaScript 对象都拥有 toString() 方法
toFixed() 返回字符串值，它包含了指定位数小数的数字，toFixed(2)就是保留两位小数（四舍五入）
toPrecision() 返回字符串值，它包含了指定长度的数字
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
强制类型转换(全局方法)
Number() 方法
parseInt() 方法 解析一段字符串并返回数值。允许空格。只返回首个数字
parseFloat() 方法 解析一段字符串并返回数值。允许空格。只返回首个数字(浮点)
数组属性方法
基本方法
var cars = [1,2,3,4,5,6];
var x = cars.length; // length 属性返回元素的数量
var y = cars.sort(); // sort() 方法对数组进行排序
var a = cars[0]; // 索引 值为1
cars.forEach(myFunction) //遍历数组，可以使用函数作为参数
cars.push(7); //在数组结尾加一个元素 返回新数组的长度
cars.pop(); //pop() 方法从数组中删除最后一个元素 返回“被弹出”的值
cars.shift(); //删除首个元素
cars.unshift(8); //增加元素到数组首位
cars.splice(2, 0, 9, 10) // 可用于向数组添加新项 第一个参数（2）定义了应添加新元素的位置 第二个参数（0）定义应删除多少元素 其余参数定义要添加的新元素 返回一个包含已删除项的数组
delete cars[0]; // 把 数组 中的首个元素改为 undefined 留下未定义的空洞（不推荐使用）
Array.isArray(cars); // 返回 true 判断是否为数组 如果直接用typeof，返回的是oject
cars instanceof Array; //返回 true 另一种判断方法
使用 splice() 来删除元素
js删除数组任意索引元素用delete会留下undefined空洞，而使用splice(x, 1);方法就可以删除索引为x的元素，并且不留空洞
数组转字符串
var lst = [1,2,3];
lst.join(','); // '1,2,3'
合并（连接）数组
如果直接使用+号，返回的不是连接的数组，而是数组元素的字符串
[1]+[2,3,4]
"12,3,4"
concat方法 不会更改现有数组，它总是返回一个新数组 可以使用任意数量的数组参数
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // 将arr1、arr2 与 arr3 连接在一起
数组切片
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
数组和对象的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是特殊类型的对象，具有数字索引。
数组排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 对 fruits 中的元素进行排序 按字符串顺序对值进行排序
fruits.reverse(); // 反转元素顺序
//数字排序 sort方法如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"
//比值函数
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
//使用相同的技巧对数组进行降序排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
//随机排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});