//2016-09-30 重读菜鸟教程上JS教程同时摘录重要知识点
1.JavaScript 输出几种方式：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2.字面量就是常量，变量是可变的可通过变量名来访问。
3.JavaScript 语句向浏览器发出的命令！例如：告诉浏览器向 id="demo" 的 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. <p id="demo"></p>
<button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button> //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才会提交表单
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
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<atpos+2 || dotpos+2>=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)"死链接
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>
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();
<p id="demo"></p>
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不能自加！
<p>局部变量计数</p>
<button type="button" onclick="myFunction()">计数</button>
<p id="demo">0</p>
<script>
function myFunction() {document.getElementById("demo").innerHTML = add();}
var add = (function () {
var counter = 0;
return function () {
return counter += 10;
}
})();
</script>
实例解析：
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.事件传递方式：冒泡和捕获
<div><p></p></div>
冒泡: 如果用户点击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元素
<div id="div1">
<p>这是一个段落</p>
<p>这是第二个段落</p>
</div>
<script>
var new_p = document.createElement("p");//<p></p>
var new_p_text = document.createTextNode("我是新建段落的文本");//我是新建段落的文本
new_p.appendChild(new_p_text);//<p>我是新建段落的文本</p>
var div = document.getElementById("div1")
div.appendChild(new_p);//将<p>我是新建段落的文本</p>放到div中
</script>
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
31.JavaScript Window - 浏览器对象模型
BOM 使 JavaScript 有能力与浏览器"对话"。
js中的全局变量和HTML DOM中的document是window对象的属性
js中的全局函数是window对象的方法
Window尺寸 (不包括工具栏/滚动条)
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
其他Window方法
window.open() -- 打开新窗口
window.close() --关闭当前窗口
window.moveTo()； 移动当前窗口
window.resizeTo(); 调整当前窗口尺寸
32. Window Screen
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
33.Window Location 用于获取当前页面的地址URL,并把浏览器重定向到新的页面
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
document.write(location.href);
http://www.runoob.com/js/js-window-location.html
document.write(location.pathname);
/js/js-window-location.html
location.assign();//加载新的文档
<input type="button" value="load new document" onclick="loadNewDoc()"/>
function loadNewDoc(){
window.location.assign("http://www.w3cschool.cc");
}
34.Window History
window.history 对象包含浏览器的历史
history.back();//与在浏览器中点击后退按钮相同
history.forward();// 与在浏览器中点击向前按钮相同
35.window.navigator
//有关浏览器的信息
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
浏览器代号: Mozilla
浏览器名称: Netscape
浏览器版本: 5.0 (Windows)
启用Cookies: true
硬件平台: Win32
用户代理: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0
用户代理语言: undefined
36.js 3种弹窗
1. alert("sometext")
window.alert("sometext");
2. window.confirm("sometext");
var r=confirm("按下按钮");
if (r==true){
x="你按下了"确定"按钮!";
}
else{
x="你按下了"取消"按钮!";
}
3. window.prompt("sometext","defaultvalue");
var person=prompt("请输入你的名字","Harry Potter");//
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
36. JavaScript 计时事件 定时器
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 clearInterval(myVar);
setTimeout() - 暂停指定的毫秒数后执行指定的代码 clearTimeout(myVar);
时钟：
window.setInterval("javascript function",milliseconds);
<script>
window.onload = function(){
setInterval(function(){myTimer()},1000);//为什么这样写也可以setInterval(myTimer,1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
}
</script>