一、JavaScript代碼存在形式與存放位置
1. JavaScript代碼有兩種存在形式，一種是直接在html內部編寫javascript，另一種是導入JS文件。
方式一:在html內部編寫javascript
1 <script>2 function f1(){3 alert('f1')4 }5 f1();6 </script>方式二:通過文件導入
1 <script src="common.js"></script>2 <script>f2();</script>
第一行<script src="common.js"></script>，表示導入common.js文件，common.js文件的內容:
1 function f2(){2 alert('f2')3 }2、JavaScript代碼存在位置
HTML的head中
HTML的body代碼塊底部(推薦)
由於Html代碼是從上到下執行，如果放在head頭部中的js代碼耗時嚴重，就會導致用戶長時間無法看到頁面；如果放置在body代碼塊底部，那麼即使js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。
一般把js代碼放在body代碼塊的最後面
二、聲明變量/註釋/分號
JavaScript中變量的聲明是一個非常容易出錯的點，局部變量必須一個 var 開頭，如果未使用var，則默認表示聲明的是全局變量。建議使用的時候一般不要使用全局變量!否則如果代碼量比較大的時候容易出現調用混亂的問題。
1 var name = "seven" # 局部變量2 age = 18 # 全局變量
註釋:
單行註釋: //
多行註釋: /* 要註釋的內容 */
分號:
寫js代碼時，注意每一行都加分號(如下面的左圖)。
因爲產品上線時會用專門的工具將多行的代碼壓縮成單行的代碼(如下面的右圖)。如果不加分號上線時就亂套了!!
jquery.js 沒壓縮成單選的
jquery.min.js 有壓縮成單行
實例: 剛好我下載jquery時發現是jquery-3.1.1.min.js就順手截了圖。
三、數字與字符串
1. 數字(Number)
1 var age = 18; 2 或 var age = Number(18);
將字符串轉化爲數字
Number("123"); 或 parseInt("123"); 推薦
前面已經說過瀏覽器內置了JavaScript語言的解釋器，下面就來寫個超簡單的:
1 2 3 4 5 6 7 8 9 10 11 12 | <script> var age = "18"; var age_1 = parseInt(age); console.log(age); console.log(age, typeof age); //輸出:18 string 注意:typeof age 別寫錯 var age_2 ="16.6"; console.log(parseInt(age_2)); //輸出:16 console.log(parseFloat(age_2)); //輸出:16.6 var a1 = 1,a2 = 2, a3 = 3; //單行定義多個變量</script> |
運行界面截圖:
2. 字符串(String)
charAt() 根據索引取字符串的某個字符
trim() 去除空格
substring(a, b) 切片(切取大於等於a,小於b的內容)
indexOf() 獲取字符的索引
length 字符串的長度
實例請看下圖(清晰明瞭~~):
四、布爾/數組/字典
1. 布爾
Boolean(1) 返回true
Boolean(0) 返回false
2. 數組
定義數組的下面兩種方式:
1 var names = ['alex', 'tony', 'eric']2 var names = Array('alex', 'tony', 'eric')添加元素:
1 obj.push(ele) //追加2 obj.unshift(ele) //最前插入3 obj.splice(index,0,'content') //指定索引插入 (0是固定寫的)
實例請看下圖:
移除:
1 obj.pop() //數組尾部移除2 obj.shift() //數組頭部移除3 obj.splice(index,count) //數組指定位置後count個字符
切片:
1 obj.slice(start,end) //大於等於start,小於end
實例請看下圖:
合併
newArray ＝ obj1.concat(obj2)
翻轉
obj.reverse()
字符串化
obj.join('_')
長度
obj.length
字典
1 var items = {'k1': 123, 'k2': 'tony'}實例請看下圖:
更多操作請參考:http://www.shouce.ren/api/javascript/main.html
五、序列化與反序列化
序列化: JSON.stringify()
反序列化: JSON.parse()
undefined: 表示未定義值
null: 一個特殊值
六、循環
數組有兩種循環方式，字典只有一種。
1 var names = ["alex", "tony", "rain"]; 2 3 // 數組：方式一 4 for(var i=0;i<names.length;i++){ 5 console.log(i); 6 console.log(names[i]); 7 } 8 9 10 // 數組：方式二11 for(var index in names){12 console.log(index);13 console.log(names[index]);14 }15 16 var names = {"name": "alex", "age":18};17 18 19 // 字典：方式一20 for(var index in names){21 console.log(index);22 console.log(names[index]);23 }
實例請看下圖:
在瀏覽器console界面，按住shift + enter可回車後繼續寫代碼，而不是執行命令。
注意: for(var item in li){} item是索引，這與python的循環不一樣，千萬別搞混了。
七、條件語句與異常處理
1. 條件語句
1 //if條件語句 2 3 if(條件){ 4 5 }else if(條件){ 6 7 }else{ 8 9 }10 11 var name = 'alex';12 var age = 1;13 14 // switch,case語句15 switch(name){16 case '1':17 age = 123;18 break;19 case '2':20 age = 456;21 break;22 default :23 age = 777;24 }
2. 異常處理
1 try{2 3 }catch(e) {4 5 }finally{6 7 }
條件語句與異常處理與C語言和python類似，沒什麼好講的，過~~
八、函數
普通函數
匿名函數
自執行函數
1 <script> 2 //普通函數 3 function func1(arg) { 4 console.log(arg); 5 return "zcl"; 6 } 7 var ret = func1(123); 8 console.log(ret); 9 10 //匿名函數 f爲函數名11 var f = function (arg) {12 console.log(arg);13 };14 f(12345);15 16 //自執行函數:定義函數並自動執行17 (function (arg) { //自執行函數先寫()(); 再在第一個括號寫function18 console.log(1234, arg);19 })("zcl");20 </script>
運行結果:
九、面向對象
1 <script> 2 function Foo (name,age) { 3 this.Name = name; 4 this.Age = age; 5 this.Func = function(arg){ 6 return this.Name + arg; 7 } 8 } 9 var obj = new Foo('zcl', 22);10 console.log(obj.Name);11 console.log(obj.Age);12 var re = obj.Func(' good man');13 console.log(re)14 </script>