//2016-09-30 重读菜鸟教程上JS教程同时摘录重要知识点
1.JavaScript 输出几种方式：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2.字面量就是常量，变量是可变的可通过变量名来访问。
3.JavaScript 语句向浏览器发出的命令！例如：告诉浏览器向  的 HTML 元素输出文本 "你好 Dolly"
document.getElementById("demo").innerHTML = "你好 Dolly";
4.如果重新声明 JavaScript 变量，该变量的值不会丢失：
var carname = 'Volvo'
var carname;
console.log('carname='+carname)//carname=Volvo
5.创建数组的三种方式
方式1：类似java
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
方式2：类似java
var cars=new Array("Saab","Volvo","BMW");
方式3：json格式创建(推荐)
var cars=["Saab","Volvo","BMW"];
6.创建对象，json方式(推荐)
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
取值：
var firstname = person.firstname;
var firstname = person['firstname'](推荐)
7. JavaScript 对象是拥有属性和方法的数据。属性就是眼睛能看到的东西类似化学中的物体的物理性质
例如：汽车的属性，颜色，品牌，型号，合资与否等等属性(汽车参数配置中的都是属性)
汽车的方法，就是这个东西能干什么? 上路开，刹车，载人等等方法
8.如果变量在函数内没有声明(没有使用 var 关键字)，该变量为全局变量。(这个是错误的我测试过)
function fun() {
carname = 'BMW'
console.log("carname++++"+carname)
}
console.log("carname---"+carname)//提示undefined
fun();
9.局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。
10.HTML 事件是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为！
浏览器页面加载完成， onload
HTML元素改变， onchange
按钮被点击 onclick
11.
现在的时间是??
现在的时间是? //this代表的是button标签对象
12. 字符串创建2种方式
推荐：var x = "John"; typeof x // 返回 String
var y = new String("John"); typeof y // 返回 Object
alert(x===y)//false,3等号是绝对相等，数据类型&&值都必须相等，switch(c)用的是就是3等！！！
alert(x==y)//true, 2等号是相对相等，值相等即可，不考虑数据类型
13.For/In 循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25};
var txt = '';
for (x in person){// x 为 fname lname age
txt += person[x];
}
console.log(txt)//JohnDoe25
14. js中的类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object,数组是一种特殊的对象类型
typeof {name:'John', age:34} // 返回 object
typeof function () {} // 返回 function
var person = null; // 返回 object 值为 null(空)
typeof myCar // 返回 undefined (如果 myCar 没有声明)
null === undefined // false
null == undefined // true
15. JavaScript 类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
JavaScript 数据类型： string number boolean object function null undefined
String(Date()) ||Date.toString()//将日期转换为字符串,这个叼！！！
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
Number(false) // 返回 0
Number(true) // 返回 1
Number(new Date()) // 返回 1404568027739
new Date().getTime()// 返回 1404568027739
16.自动类型转换
16.1：当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
16.2：当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法
// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
// if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
17. JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
if (typeof myObj !== "undefined" && myObj !== null) //正确
if (myObj !== null && typeof myObj !== "undefined") //错误，抛出异常
18.表单验证，当onsubmit为true才会提交表单
姓: 
function validateForm(){//验证账号不能不输入
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("姓必须填写");
return false;
}
}
function validateFormEmail(){//验证邮箱
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
19.JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据 。
JSON.parse(jsonStr) //JSON 字符串---》 JavaScript 对象。
JSON.stringify(jsonObj) //JavaScript ---》JSON 字符串。
20. href="#"定位锚点 与href="javascript:void(0)"死链接
点我没有反应的!
点我定位到指定位置!
...
尾部定位点
21. 函数创建的两种方式，函数必须调用才会执行
方式1：var x = function (a, b){return a * b}; //匿名函数赋值给了变量，那么可以通过变量名来访问
方式2：function x(a, b){return a * b};
方式3：var x = new Function("a", "b", "return a * b"); //内置的 JavaScript 函数构造器(Function())严重不推荐
调用：
var z = x(4, 3);
22. 自调用函数 ---(函数)();
(function(){var x = "hello"; alert(x)})();
23.隐式参数对象 Arguments
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
24.this关键字，this指向函数执行时的当前对象
1).当函数没有被自身的对象调用时， this 的值就会变成全局对象,在web浏览器中全局对象是window对象
function myFunction(){return this;}
myFunction(); // 返回 window 对象 ，默认等于window.myFunction();
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName ;//谁调用了funnName方法，this就是谁！此处this就是myObject
}
}
document.getElementById("demo").innerHTML = myObject.fullName(); //我调用了fullName方法
2).使用new调用函数，如果函数调用前使用了 new 关键字, 则是调用了构造函数，创建一个新对象，新对象会继承构造函数的属性和方法
// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe");
x.firstName
3). call() 和 apply() 是预定义的函数方法
var myObj = [1,2,3];
var myObj = '';
var myObj = {name: "ckang", money: 8888888}; //我测试的三个对象都可以
function myFunction(a, b) {
return a * b;
}
console.log(myFunction.call(myObj,10,2));
function myApplyFunction(a, b) {
return a * b ;
}
var args = [50,2];
console.log(myApplyFunction.apply(myObj,args))
25. JavaScript 闭包
计数器困境：全局变量，任何方法都能访问都可以随意更改，局部变量counter不能自加！
局部变量计数
计数
0
function myFunction() {document.getElementById("demo").innerHTML = add();}
var add = (function () {
var counter = 0;
return function () {
return counter += 10;
}
})();
实例解析：
1.自我调用函数只执行一次，初始化计数器为0；
2.add 变量 = function(){return counter+=10;} 即return回来的东西给了变量add，如果想要结果那么需要调用变量指向的匿名函数
3.这就是闭包
26. HTML DOM (文档对象模型) 本质是一棵树 Document,RootElement,Element,Attribute,Text
当网页被加载时，浏览器会创建页面的文档对象模型
DOM树：Document --Root element -- Element(head(title(text)),body(a(attribute,text),h1(text)))
js可以改变所有的HTML元素及其属性，CSS样式，所有事件作出反应。
27. 事件 默认冒泡 userCapture = false
1.事件传递方式：冒泡和捕获
冒泡: 如果用户点击p，p的事件先被触发，后触发div的点击事件
捕获：与冒泡相反！
同个元素添加不同类型的事件：注意不能要on
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
跨浏览器解决方法：
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
28.JavaScript HTML DOM 元素(节点)
1. 创建新HTML元素
 
 
这是一个段落
这是第二个段落
 
 
var new_p = document.createElement("p");//
var new_p_text = document.createTextNode("我是新建段落的文本");//我是新建段落的文本
new_p.appendChild(new_p_text);//
我是新建段落的文本
var div = document.getElementById("div1")
div.appendChild(new_p);//将
我是新建段落的文本
放到div中 
 
2. 删除已有的HTML元素 两种方式
第一种
div.removeChild(document.getElementById("p2"))//删除p2元素，从父级元素删除子元素
第二种：先找到需要被删除的元素，然后找到它的父node，再删除！(推荐)
var p1 = document.getElementById("p1")
p1.parentNode.removeChild(p1);
29.JavaScript 基于 prototype，而不是基于类的。
30.JavaScript Window - 浏览器对象模型BOM
1.获取浏览器窗口的宽度和高度的通用方法 1904 ： 997
function getWindowWidth() { //该例显示浏览器窗口的高度和宽度：(不包括工具栏/滚动条)
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
function getWindowHeight() { //该例显示浏览器窗口的高度和宽度：(不包括工具栏/滚动条)
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
2.screen
var screenW = screen.availWidth;//1920
var screenH = screen.availHeight;//1040