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