1.JavaScript 認識
上個世紀的1995年,當時的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時代開啟時最著名的第一代互聯(lián)網(wǎng)公司熏纯。
由于網(wǎng)景公司希望能在靜態(tài)HTML頁面上添加一些動態(tài)效果记劝,于是叫Brendan Eich這哥們在兩周之內(nèi)設計出了JavaScript語言。你沒看錯,這哥們只用了10天時間油猫。
為什么起名叫JavaScript?原因是當時Java語言非常紅火柠偶,所以網(wǎng)景公司希望借Java的名氣來推廣情妖,但事實上JavaScript除了語法上有點像Java,其他部分基本上沒啥關系诱担。
2.使用
JavaScritp的基本元素是語句毡证。一條語句代表著一條命令。通常以分號(;)結(jié)尾蔫仙。
實際上分號用不用都行料睛,只是為了增加閱讀性。
<!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的作用就是這樣通過代碼去控制界面的呈現(xiàn)效果。
3.數(shù)據(jù)類型
我們學習編程語言大多數(shù)都是概述 → 數(shù)據(jù)類型 → 語法 → 類
JavaScript也是一樣的,定義變量要使用到var關鍵字施籍,在定義的同時可以為其初始化賦值居扒。
局部變量:定義在函數(shù)中的變量稱為局部變量,只能在該函數(shù)范圍內(nèi)使用丑慎。
-
全局變量:直接在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"; <!-- 定義數(shù)值 --> var num = 1; <!-- 定義布爾 --> var status = false; </script> </body> </html>
注意:
JavaScript是一種弱類型的語言竿裂,所謂弱類型,指的是他不需要明確的聲明變量的類型玉吁,可以隨意的賦值自己想聲明類型的變量,還可以根據(jù)場景在類型間自由轉(zhuǎn)換腻异。字符類型:string類型就是java中的字符串进副,
var str = "abc";
布爾類型:boolean類型由兩個值,true和false悔常。
數(shù)值類型:整數(shù)和浮點數(shù)都用number類型便是影斑。
var num = 5;
var pi = 3.14;
var color = 0x123456;
4.定義函數(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>標題</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>
-
對象字面量:用這個可以直接定義對象及其屬性障涯。
<body>
<script type="text/javascript">
var persion = {
name : "xiaoli",
age : 1
};
document.writeln(persion.name);
document.writeln(persion.age);</script> </body> <!-- 注意: 屬性的名稱和值時間用冒號分隔(:) 多個屬性之間用逗號分隔(,) 大括號之后必須用分號結(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)部使用對象屬性時唯蝶,要使用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", }; <!--增加屬性和函數(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.運算符
運算符 | 說明 |
---|---|
++粘我、-- | 前置或后置自增或自減 |
+、-痹换、*征字、/、% | 加娇豫、減匙姜、乘、除冯痢、求余 |
<氮昧、<=、>浦楣、>= | 小于袖肥、小于等于、大于振劳、大于等于 |
==椎组、!= | 相等澎迎、不相等 |
===庐杨、!== | 等同夹供、不等同 |
&&、II | 邏輯與仁堪、邏輯或 |
= | 賦值 |
+ | 字符串連接 |
?: | 三元運算符 |
注意:
a:== 和 != 比較若類型不同哮洽,先償試轉(zhuǎn)換類型,再作值比較弦聂,最后返回值比較結(jié)果 鸟辅。
b:而 === 和 !== 只有在相同類型下,才會比較其值氛什。
8.顯示類型轉(zhuǎn)換
- 數(shù)值轉(zhuǎn)換為字符串:可以使用toString方法
var str = (123).toString();
方法 | 說明 | 返回 |
---|---|---|
toString() | 以十進制形式表示數(shù)值 | 字符串 |
toString(2) toString(8) toString(16) |
以二、八匪凉、十六進制表示數(shù)值 | 字符串 |
toFixedn() | 以小數(shù)點后有n為數(shù)字的形式表示實數(shù) | 字符串 |
toExponential(n) | 以指數(shù)表示法表示數(shù)值枪眉, 尾數(shù)的小數(shù)點前后分別有1位數(shù)字和n位數(shù)字 |
字符串 |
toPrecision(n) | 用n個有效數(shù)字表示數(shù)值 | 字符串 |
-
將字符串轉(zhuǎn)換為數(shù)值:使用Number函數(shù)。
var num = Number("123");
函數(shù) | 說明 |
---|---|
Number(str) parseFloat(str) |
生成一個整數(shù)或?qū)崝?shù)值 |
parseInt(str) | 生成一個整數(shù)值 |
9.使用數(shù)組
注意:
a:創(chuàng)建數(shù)組的時候不需要聲明數(shù)組中元素的個數(shù)再层,JS數(shù)組會自動調(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)容合并成一個新數(shù)組 | 數(shù)組 |
jion(<separator>) | 將所有數(shù)組的元素連接成一個字符串 | 字符串 |
pop() | 將數(shù)組當做棧使用,刪除并返回最后一個元素 | 對象 |
push(<item>) | 將數(shù)組當做棧使用蛋济,將制定的數(shù)據(jù)添加到數(shù)組中 | void |
reverse() | 就地反轉(zhuǎn)數(shù)組元素的次序 | 數(shù)組 |
shift() | 類似pop棍鳖,但是操作的是第一個元素 | 對象 |
skuce(<start>,<end>) | 返回一個子數(shù)組 | 數(shù)組 |
sort() | 對數(shù)組進行排序 | 數(shù)組 |
unshift(<item>) | 類似樸樹,但是新元素插到數(shù)組的開頭位置 | 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渡处,在視圖讀取未賦值的變量或?qū)ο鬀]有屬性時就是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)賦值了一個值但是該值不是一個有效的object、string川尖、number或boolean登下。
如果想檢查某個屬性是否為null或undefined,時需要用叮喳!非運算符就可以被芳。
Undefined類型只有一個值,即undefined馍悟。當聲明的變量還未被初始化時畔濒,變量的默認值為undefined。
Null類型也只有一個值锣咒,即null侵状。null用來表示尚未存在的對象,常用來表示函數(shù)企圖返回一個不存在的對象毅整。