1. 程式人生 > >二 JavaScript基礎語法

二 JavaScript基礎語法

2.1編寫JavaScript程式碼
1)由unicode字符集編寫
2)語句:表示式,關鍵字,運算子組成;大小寫敏感;使用分號結束.
2.2常量,識別符號和關鍵字
1)常量: 直接在程式中出現的資料值(字面量),用完了就丟了.如:alert("hello");
2) 識別符號: 由不以數字開頭的字母,數字,下劃線,$組成.常用於表示函式,變數等的名稱.不能和保留關鍵字重複,如break,if等.
3) 關鍵字:只有系統才能用的識別符號.
2.3 變數
1) 變數宣告:使用關鍵字var宣告變數,如var x,y;
注意事項: 以 var 關鍵字宣告,宣告的時候不確定型別,變數的型別以賦值為準.
例如: var x,y,z; x=10; y="maryy" z=true;
2) 變數初始化:使用等號賦值
注意事項: 沒有初始化的變數則自動取值為 undefined,如:var count=0;
3) 變數命名同識別符號的規則,大小寫敏感.
2.4 資料型別
1) 基本型別: number 數字,string 字串,boolean 布林
2) 特殊型別: null 空, undefined 未定義.
3) 複雜型別: array 陣列, object 物件.
2.5 string 資料型別
1) 表示文字: 由unicode字元,數字,標點符號組成的序列.
2) 首尾由單引號或者雙引號括起來.
3) 特殊字元需要轉義,用轉義字元\, 如:\n,\\,\',\".
例如: var a="歡迎來到\'JavaScript世界\'";
注意事項:可用在正則表示式,只允許錄入漢字[^\u4e00-\u9fa5$],每個漢字都有轉義符.
2.6 number型別
1) 不區分整形數值和浮點型數值:所有數字都採用64位浮點格式儲存,類似於double格式.
2) 整數: 16進位制前面加上0x,8進位制前面加上0.
3) 浮點數: 使用小數點記錄資料,如:3.4,5.6;使用指數記錄資料,如:4.3e23=4.3x10^23
2.7 boolean 資料型別
1) 僅有兩個值:true和false;實際運算中true=1,false=0
2) 多用於結構控制語句.
2.8 資料型別的隱式轉換
1) JavaScript 屬於鬆散型的程式語言
(1) 變數在宣告時,不需要指定資料型別.
(2) 變數由賦值操作指定資料型別.
2)不同型別資料在計算過程中會自動進行轉換.
(1) 數字+字串:數字轉換為字串.
(2) 數字+布林值:true轉換為1,false轉換為0.
(3) 字串+布林值:布林值轉換為字串true或者false
(4) 布林值+布林值:布林值轉換為1或者0.
例如: var s="a"; 
 var n=1;
 var b1=true;
 var b2=false;
 alert(s+n);//a1;
 alert(s+b1);//atrue;
 alert(n+b1);//2;
 alert(b1+b2);//1
2.9 資料型別轉換函式
1) 轉換方式:
(1) 隱式轉換: 直接轉,預設的規則.
(2) 顯式轉換: 利用轉換的方法.
注意事項: 不建議用隱式轉換.
2) 顯示轉換:
(1) toString:轉換成字串,所有的資料型別都可以轉為String型別.
(2) parseInt: 強制轉換為整數,如果不能轉換,則返回NaN.
例如: parseInt("6.12")=6 (四捨五入)
(3) parseFloat: 強制轉換成浮點數,如果不能轉換,則返回NaN.
例如: pageFloat("6.12")=6.12
(4) typeof:查詢數值當前型別,返回 string/number/boolean/object.
例如:typeof("test"+3)="string"
3) NaN: not a number,非常特殊,它不是數字,所以任何數跟它都不相等,甚至NaN本身也不等於NaN
4) isNaN(str): is not a number 判斷文字是否為數值,false 為數值,true 為非數值.
5) 案例:
eg1:轉換函式:得到錄入數值的整數部分.
<input type="text" id="txtData">
    <input type="button" value="得到錄入資料的整數部分" onclick="getInt();">
    <script type="text/javascript">
    function getInt(){
    var str=document.getElementById("txtData").value;
    if(isNaN(str)){
    alert("請輸入一個數字值");
    }else{
    var data=parseInt(str);
    alert("整數部分為:"+data)
    }
    }
    eg2:計算一個數的平方
    <input type="text" id="txtData">
    <input type="button" value="計算平方" onclick="getSquare();">
    <script type="text/javascript">
    function getSquare(){
    var str=document.getElementById("txtData").value;
    if(isNaN(str)){
    alert("請輸入一個數字值");
    }else{
    var data=parseFloat(str);
    var result=data*data;
    alert("該數的平方為:"+result)
    }
    }
    </script>
2.10 特殊型別
1) null: null在程式中代表無值或者無物件.可以通過給一個變數賦值null來清除變數的內容.
2) undefined: 聲明瞭變數但從未賦值,或這個物件屬性不存在.
2.11 算數運算子
1) + - * / %
(1) - : 可以表示減去,也可以表示負號
(2) + : 可以表示加法,也可以表示字串連線.
2) ++  --
i++ <=> i=i+1        i-- <=> i=i-1;
2.12 關係運算
1) 用於判斷資料之間的大小關係 : >  <  >=  <=  ==  != 
注意事項: "=="比較的是值(內容) .
2) 關係表示式的值是 boolean型別( true或者false)
3) 嚴格相等 : "===" 型別 數值都相等.
4) 非嚴格相等: !==.
2.13 邏輯運算
1) 邏輯非 !  邏輯與 &&    邏輯或||
2) 邏輯運算操作均為boolean表示式
b1     b2b1&&b2 b1||b2!b1
falsefalsefalsefalsetrue
falsetruefalsetruetrue
truefalsefalsetruefalse
true truetruetruefalse
2.14 條件運算子
1) 條件運算子又稱:"三目"或"三元"運算子
2) 語法:boolean 表示式?表示式1:表示式2
(1) 先計算boolean表示式的值,如果為true,則整個表示式的值為表示式1的值.
(2) 如果為false,則整個表示式的值為表示式2的值.
eg:猜數字:
    <input type="text" onblur="guessNumber(this.value);">
    <script type="text/javascript">
    function guessNumber(str){//內建結果
    var result=10;
    if(isNaN(str)){
    alert("請輸入一個數字值");
    }else{
    var data=parseFloat(str);
var info=data>=result?"大了":"小了";
alert(info);
    }
    }
    </script>
 2.15 流程控制語句
 程式預設情況下,順序執行,改變或者控制執行順序
 1) if語句: 
 (1) if(表示式){
 語句塊1
 }else{
 語句塊2
 }
 (2) if(表示式1){
 語句塊1
 }else if(表示式2{
 語句塊2
 }else{
 語句塊3
 }
    2)switch-case語句
    switch(表示式){
    case 值 1:語句1;break;
    case 值 2:語句2;break;
    default:語句3;
    }
    3) for語句
    for(初始化;條件;增量){
    語句;
    }
    注意事項:初始化中的區域性變數用var宣告.
    4) while 語句
    while(條件){
    語句1;
    }
    注意事項:使用break或者continue終止迴圈.
    eg:階乘計算
     <input type="button" value="求10的階乘" onclick="getFac();">
    <script type="text/javascript">
    function getFac(){
    var result=1;
    for(var i=1;i<10;i++){
    result*=i;
    }
    alert("10的階乘為:"+result);
    }
    </script>