1.js的組成

• ECMAScript：核心
• dom：文件物件模型
• bom：瀏覽器物件模型

2.js的引入方式

<script>
    //js程式碼
</script>
<script type="text/javascript" src="js/myJs.js><script>

3.js變數和資料型別

var num = 1;
1.	變數名規範類同於java
2.	每句話結束建議寫分號
3.	單引號和雙引號都可以表示字串，主要用於區分。

var num = 1;   //number
num = "str";   //string
num = true;    //boolean
var a;         //undefined
a=null;        //null
a=["aa","bb","cc"]; //array
a={"name":"zs","age":12}; //object
//提示框
//alert(typeof a);
//alert(a[0]);
alert(a.name);

型別轉換:
var b = 1;
var c = true;  //true 1  false 0
//alert(b+c);  //2
c = null;    //null 0
//alert(b+c);
var d;
//alert(b+d);  //NaN not a number
var e = "abc";
alert(d+e);
 

4.運算子

• 算術運算子（除法保留小數）

• 數值運算子

• 比較運算子

給定x=5,下面的表格解釋了比較運算子

alert(a==b);  //==比較內容

alert(a===b); //比較內容比較型別

• 邏輯運算子

• 三元運算子

var max = a > b? a：b

5.流程控制

for(var i in arr){
	console.log(arr[i]);
}

6.函式

1）自定義函式

//無參無返回值函式宣告
			function test(){
				console.log("函式執行了");
			}
			//函式呼叫
			//test();
			function calc(a,b){
				return a + b;
			}
			var sum = calc(1,3);
			//console.log(sum);
			
			function calc2(a,b,c){
				console.log(a+b);
				console.log(c);
			}
			//calc2(1,2);
			
			//calc2(1,2,3,4);
			
			(function(a,b){
				console.log(a+b);
			})(1,2);
 

2）內建函式

console.log(parseInt(a)+parseInt(b));
			console.log(parseFloat(a)+parseFloat(b));
			var c = "abc";
			var d = 1;
			console.log(isNaN(a));		
			
			d = "2+3*4";
			console.log(eval(d));
			
			//var jsObj = {"name":"zs","age":12};
			//json(js物件字串形式)
			var json = '{"name":"zs","age":12}';
			//將json轉換為js物件
			//var obj = JSON.parse(json);
			//型別轉換
			var obj = eval("("+json+")");
			console.log(obj);

parseInt():轉換字串為整型資料
parseFloat():轉換字串為浮點型資料
isNaN():判斷是否為非字串
eval():實現字串表示式的計算或者型別轉換
 

7.物件

面嚮物件語言，賦予了進行屬性和方法的擴充套件方式

String物件:字串
Array物件: 陣列
Date物件: 獲取時間
  var date = new Date();
			
			var year = date.getYear();
			var year1 = date.getFullYear();  //完整年份
			var mon = date.getMonth();   //月份  0-11
			var dayofweek = date.getDay();  //星期  0-6
			var day = date.getDate();
			var hour = date.getHours();
			var min = date.getMinutes();
			var sec = date.getSeconds();
			
			var str = year1+"-"+(mon+1)+"-"+day+" "+hour+":"+min+":"+sec;
			//console.log(str);
			document.getElementById("div1").innerHTML = str;

8.Bom

控制瀏覽器行為。

Windows：控制視窗行為（開啟，關閉，提示框，視窗資訊獲取等）

console.log(window.innerHeight);
			console.log(window.innerWidth);
			
			//開啟新視窗
			var newWindow =window.open("http://www.baidu.com","baidu","width=200px,height=200px,left=200px,top=200px");
			//關閉視窗
			newWindow.close();
			
			var bool = confirm("確認刪除嗎?");
			console.log(bool);
			
			var name = prompt("請輸入您的姓名","張三");
			console.log(name);
			
			//只執行一次
			var timeoutId = setTimeout(function(){
				console.log("boom");
			},2000);
			//取消timeout
			clearTimeout(timeoutId);
			
			var i = 10;
			var id = setInterval(function(){
				i--;
				console.log(i);
			},1000);
			
			clearInterval(id);

document:

         封裝整個html文件的資訊。

Location:

    封裝當前的url的資訊。

9.Dom

HTML DOM 定義了用於 HTML 的一系列標準的物件，以及訪問和處理 HTML 文件的標準方法。

• 獲取節點

//通過id值獲取元素節點
			var oDiv = document.getElementById("div1");		
			//console.log(oDiv);
			var aDiv = document.getElementsByTagName("div");
			//console.log(aDiv[0]);
			//通過class值獲取元素
			document.getElementsByClassName("");
			//通過name屬性值獲取
			document.getElementsByName();

• 獲取/修改元素節點文字

//獲取文字內容
var val = oDiv.innerHTML;
console.log(val);
//設定內容
oDiv.innerHTML="哈哈";
			
var val2 = oDiv.innerText;
console.log(val2);
oDiv.innerText="aa";

• 獲取/修改元素節點屬性

節點物件.attrName=值

Class特殊:
  oDiv.className="green";

• 修改元素的樣式

節點物件.style.樣式=值
oDiv.style.fontSize="20px";

10.事件

• ui事件

    load事件:  頁面載入事件

    scroll事件:  文件滾動事件

• 滑鼠事件

    單擊事件:  click

    雙擊事件: dblclick

    滑鼠移過事件: mouseover

    滑鼠移出事件: mouseout

• 鍵盤事件

    onkeydown

    onkeyup

    onkeypress

• 焦點事件

    onfocus

    onblur

• 其他事件

    onchange