這一節我們將學習一部分javascript語言基礎，如果說html提供給我們認識內容的辦法，CSS選擇器提供給我們獲取內容的辦法，那么JavaScript就是把它們付諸于實踐，得到可供多多貓使用的結果，這篇javascript教程重在知道如何實現一個操作和這個操作帶來的結果，次在完全理解。如果你想對JavaScript做一個完整的學習請百度`javascript教程` ## 值的聲明 ```javascript //名字（Mike），為字符串，可用單引號也可以用雙引號包裹 var name = 'Mike' ; var name = "Mike" ; //1個等號作用是把右邊的值賦予給左邊變量，賦值之后，name的值就是Mike了 //年齡（18歲），為數字型 var age=18 ; //是女孩兒嗎（true/false），為邏輯型 var is_girl = true ; //是的 var is_girl = false ; //不是 //全部家人（爸爸、媽媽和Mike），為數組 var family = ["爸爸","媽媽","Mike"] ; //賦予father的值是family[0]的值，也就是字符串"爸爸"（數組中第0個就是非程序猿理解的第1個） var father = family[0] ; //賦予mother的值是family[1]的值即字符串"媽媽" var mother = family[1] ; //爸爸和媽媽的詳細信息，為對象（key-value鍵值對，這種對應樣式） var father_info = {"name" : "爸爸", "age" : 35} ; var mother_info = {"name" : "媽媽", "age" : 40} ; //賦予father_name的值是"爸爸"字符串 var father_name = father_info.name ; //以上是插件示例中常用的賦值方法。也可以寫成以下 var father_name = father_info["name"] ; //賦予father_age的值是35數字型 var father_age = father_info.age ; //或者寫成 var father_age = father_info["age"] ; //我們如果要修改爸爸的年齡為40歲，怎么辦呢？ //方法1 father_info.age = 40 ; //方法2 father_info["age"] = 40 ; //整個家庭的信息，這是一個對象中有數組，數組中又有對象的示例 var family_info = { "Address" : "中華路108號", "everyone_info" : [ {"name" : "爸爸", "age" : 40} , {"name" : "媽媽", "age" : 40} , {"name" : "Mike", "age" : 18} ] }; 1. 上面這個是一個比較復雜的對象示例，它包含了[全部家人]數組，數組中是Mike,Mike爸爸和Mike媽媽的詳細信息。 2. 對象和數組結合起來就能用來描述比較復雜的東西 ``` <br> ## 運算 ```javascript //求和，c的值是11 var a = 5; var b = 6; var c = a + b; //自加，就是自身+1 var a = 1; //方法1，這種就是最正常的 var b = a + 1; //a=1,b=2 //方法2,這種寫法a會先給b賦值，然后自己再自加 var b = a++; //a=2,b=1 //方法3，這種a會先自加，然后再給b復制 var b = ++a; //a=2,b=2 ``` 上面是整數型的加法運算，減法寫法同上，把加號換成減號即可 <br> ## 邏輯循環 邏輯判斷涉及到幾個運算符，分辨是 1. 大于，運算符是 `>` 2. 小于，運算符是`<` 3. 等于，運算符是`==` 注意了，這里是兩個`=`，因為單個的代表賦值 4. 不等于，運算符是`!=` ```javascript //下面使用的 console.log(x)函數是用來把結果輸出到屏幕，可忽略 //判斷語句 var a = 5; var b = a > 5; //此時當然是false if (b) { //如果a是真的就會執行這個括號里面的內容 } if (a == 5) //true { //如果a是真的就會執行這個括號里面的內容 } else { //否則執行這里的內容 } //循環輸出數組的內容 var family = ['爸爸','媽媽'] //每次運行，i++一次，當i不符合i < 2的條件時就會退出循環 for (var i = 0; i < 2; i++) { console.log(family[i]); //這里會依次輸出爸爸，媽媽兩個 } //i每次循環都會自加一次，為位置坐標，從0開始 for (var i in family) { console.log(family[i]); //這里會依次輸出爸爸，媽媽兩個 } //使用的時候，可替換family和item兩個，其他固定 family.forEach(function(item){ console.log(item); //這里會依次輸出爸爸，媽媽兩個 }); ``` <br> ## 字符串操作 1. 查找判斷字符串是否存在，主要用到`indexOf`函數，注意大小寫 ```javascript //查找字符串中是否有"hello" var str = "hello world"; //字符串位置是從0開始的，如果找到了就返回首字母匹配的位置，沒找到就返回-1 var a = str.indexOf("hello"); // a = 0; var a = str.indexOf("wor"); // a = 6; //判斷str中是否存在hello字符串 if (str.indexOf("hello") != -1) //如果找到了 { console.log(item); //如果找到了就會執行到這里 } ``` 2. 替換字符串中的某些內容，主要用到`replace`函數 ```javascript var str = "hello world"; //把hello替換成fuck，a 就變成了 "fuck world" var a = str.replace("hello","fuck"); ``` 3. 轉換字符串到整數型，主要用到`parseInt`函數 ```javascript var strPage = '123'; var page = parseInt(str); //這樣就轉成整數了 ``` 這里有人會問把字符串轉成整形有什么作用呢？這里舉個例子來說明一下： 我們有時候需要從網頁中提取書的頁數，然后利用上面講到的for循環來讓頁數自加組合成不同頁數的網址，比如： http://www.xxx.com/page/1, http://www.xxx.com/page/2 假設我們提取的頁數是24頁 ```javascript for (var page = 1; page < 24 ; page++) ``` 如代碼所示，這個24必須是整數型，但是我們提取的頁碼是`"24"`這樣的字符串類型,所以必須轉換。 **只有對應的類型才能做對應的操作，整數型才能做加減乘除等操作**