1.JavaScript 認識
上個世紀的1995年，當時的網景公司正憑借其Navigator瀏覽器成為Web時代開啟時最著名的第一代互聯網公司。
由于網景公司希望能在靜態HTML頁面上添加一些動態效果，于是叫Brendan Eich這哥們在兩周之內設計出了JavaScript語言。你沒看錯，這哥們只用了10天時間。
為什么起名叫JavaScript？原因是當時Java語言非常紅火，所以網景公司希望借Java的名氣來推廣，但事實上JavaScript除了語法上有點像Java，其他部分基本上沒啥關系。
2.使用
JavaScritp的基本元素是語句。一條語句代表著一條命令。通常以分號（;）結尾。
實際上分號用不用都行，只是為了增加閱讀性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>標題</title>
</head>
<body>
<script type="text/javascript">
document.writeln("hello world");
</script>
</body>
</html>
document.writeln("hello"); 僅僅是在文檔中添加了一些文字,并沒有什么明顯的效果，
我們這么演示其實是告訴大家，js的作用就是這樣通過代碼去控制界面的呈現效果。
3.數據類型
我們學習編程語言大多數都是概述 → 數據類型 → 語法 → 類
JavaScript也是一樣的,定義變量要使用到var關鍵字，在定義的同時可以為其初始化賦值。
局部變量：定義在函數中的變量稱為局部變量，只能在該函數范圍內使用。
-
全局變量：直接在script元素中定義的變量稱為全局變量，可在任意地方使用。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>標題</title> </head> <body> <script type="text/javascript"> <!-- 定義字符串 --> var str = "abc"; <!-- 定義數值 --> var num = 1; <!-- 定義布爾 --> var status = false; </script> </body> </html> 注意：
JavaScript是一種弱類型的語言，所謂弱類型,指的是他不需要明確的聲明變量的類型，可以隨意的賦值自己想聲明類型的變量，還可以根據場景在類型間自由轉換。字符類型：string類型就是java中的字符串，
var str = "abc";布爾類型：boolean類型由兩個值，true和false。
數值類型：整數和浮點數都用number類型便是。
var num = 5;
var pi = 3.14;
var color = 0x123456;
4.定義函數
定義函數其實就是我們需要用到的一些API封裝起來，這樣的話我們就不用每次使用都重新寫一遍，只需要調用函數即可。
例：定義有參函數，無參函數，有返回值函數
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>標題</title>
</head>
<body>
<script type="text/javascript">
<!-- 定義無參函數 -->
function hello(){
document.writeln("hello");
}
hello();
<!-- 定義有參函數 -->
function add(num1,num2){
document.writeln(num1+num2);
}
var num1 = 2;
var num2 = 3;
add(num1,num2);
<!-- 定義有返回值函數 -->
function getSum(num1,num2){
return (num1+num2);
}
document.writeln(getSum(num1,num2));
</script>
<hr/>
<script type="text/javascript">
hello();
</script>
</body>
</html>
5.創建對象
-
創建對象：通過new Object的方式來創建對象。
<body>
<script type="text/javascript">
var persion = new Object();
persion.name = "xioaming";
persion.age = 12;document.writeln(persion.name); document.writeln(persion.age); </script> </body> -
對象字面量：用這個可以直接定義對象及其屬性。
<body>
<script type="text/javascript">
var persion = {
name : "xiaoli",
age : 1
};
document.writeln(persion.name);
document.writeln(persion.age);</script> </body> <!-- 注意： 屬性的名稱和值時間用冒號分隔(:) 多個屬性之間用逗號分隔(,) 大括號之后必須用分號結尾(;) --> -
對象函數：使用上面的方式可以為對象添加變量，也可以為對象添加函數。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; document.writeln(persion.name); document.writeln(persion.age); document.writeln(persion.getSum()); </script> </body> <!-- 注意：方法內部使用對象屬性時，要使用this關鍵字 -->
6.使用對象
-
讀取和修改對象屬性值：一種是直接
對象.屬性名稱，一種是對象["屬性名稱"]<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; persion.name= "haha"; persion["name"] = "hehe"; document.writeln(persion.name); document.writeln(persion["name"]); </script> </body> -
枚舉對象屬性：使用for ...in 語句。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; persion.name= "haha"; persion["name"] = "hehe"; document.writeln(persion.name); document.writeln(persion["name"]); for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } </script> </body> <!-- 注意：對象.[變量名] 中括號里面的變量名不需要加雙引號 --> -
增刪對象的屬性和方法
注意： 判斷對象中是否存在某屬性用： var hasName = "name" in persion; <body> <script type="text/javascript"> var persion = { name : "xiaoli", }; <!--增加屬性和函數--> persion.age = 12; persion.getSum = function(){ return 1+2; }; for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } <!-- 刪除屬性和函數--> delete persion.name; delete persion["age"]; delete persion.getSum; for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } </script> </body>
7.運算符
| 運算符 | 說明 |
|---|---|
| ++、-- | 前置或后置自增或自減 |
| +、-、*、/、% | 加、減、乘、除、求余 |
| <、<=、>、>= | 小于、小于等于、大于、大于等于 |
| ==、！= | 相等、不相等 |
| ===、！== | 等同、不等同 |
| &&、II | 邏輯與、邏輯或 |
| = | 賦值 |
| + | 字符串連接 |
| ?: | 三元運算符 |
注意：
a：== 和 != 比較若類型不同，先償試轉換類型，再作值比較，最后返回值比較結果 。
b：而 === 和 !== 只有在相同類型下,才會比較其值。
8.顯示類型轉換
- 數值轉換為字符串：可以使用toString方法
var str = (123).toString();
| 方法 | 說明 | 返回 |
|---|---|---|
| toString() | 以十進制形式表示數值 | 字符串 |
| toString(2) toString(8) toString(16) |
以二、八、十六進制表示數值 | 字符串 |
| toFixedn() | 以小數點后有n為數字的形式表示實數 | 字符串 |
| toExponential(n) | 以指數表示法表示數值， 尾數的小數點前后分別有1位數字和n位數字 |
字符串 |
| toPrecision(n) | 用n個有效數字表示數值 | 字符串 |
-
將字符串轉換為數值：使用Number函數。
var num = Number("123");
| 函數 | 說明 |
|---|---|
| Number(str) parseFloat(str) |
生成一個整數或實數值 |
| parseInt(str) | 生成一個整數值 |
9.使用數組
注意：
a：創建數組的時候不需要聲明數組中元素的個數，JS數組會自動調整大小以便容納所有的元素。
b：不必聲明數組所含數據的類型，JS中的素組可以混合包含各種類型的數據。-
使用New創建數組
<body> <script type="text/javascript"> var array = new Array(); array[0] = "a"; array[1] = 12; array[2] = false; </script> </body> -
使用數組字面量
<body> <script type="text/javascript"> var array = ["a",12,false]; </script> </body> -
枚舉數組內容
<body> <script type="text/javascript"> var array = new Array(); array[0] = "a"; array[1] = 12; array[2] = false; for(var i = 0;i<array.length;i++){ document.writeln("array["+i+"]="+array[i]) } </script> </body> 內置的數組方法：這些方法是js對Array對象封裝好的直接調用就可以了。
| 方法 | 說明 | 返回 |
|---|---|---|
| concat(<otherArray>) | 將數組和參數所致數組的內容合并成一個新數組 | 數組 |
| jion(<separator>) | 將所有數組的元素連接成一個字符串 | 字符串 |
| pop() | 將數組當做棧使用，刪除并返回最后一個元素 | 對象 |
| push(<item>) | 將數組當做棧使用，將制定的數據添加到數組中 | void |
| reverse() | 就地反轉數組元素的次序 | 數組 |
| shift() | 類似pop，但是操作的是第一個元素 | 對象 |
| skuce(<start>,<end>) | 返回一個子數組 | 數組 |
| sort() | 對數組進行排序 | 數組 |
| unshift(<item>) | 類似樸樹，但是新元素插到數組的開頭位置 | void |
10.異常處理
JS中用trry....catch語句處理錯誤。
<body>
<script type="text/javascript">
try{
var array;
document.writeln("num="+array[4]);
}catch(e){
document.writeln("Error:"+e);
}finally{
document.writeln("請檢查你的代碼");
}
</script>
</body>
11.比較undefined和null值
JS中有兩個特殊的值：undefined和null，在視圖讀取未賦值的變量或對象沒有屬性時就是undefined值。
<body>
<script type="text/javascript">
var array = [1,2,3];
var persion = {
name:"xiaoming",
};
document.writeln("age=" + persion.age);
document.writeln("num=" + array[4]);
</script>
</body>
輸出結果：age=undefined num=undefined
null與undefined略有不同，undefined是在未定義的情況下得到的值。
null是用于表示已經賦值了一個值但是該值不是一個有效的object、string、number或boolean。
如果想檢查某個屬性是否為null或undefined，時需要用！非運算符就可以。
Undefined類型只有一個值，即undefined。當聲明的變量還未被初始化時，變量的默認值為undefined。
Null類型也只有一個值，即null。null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。
