JS 基础知识之菜鸟教程（2016-09-30）

//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>