1. 程式人生 > >JavaScript基礎總結(一)

JavaScript基礎總結(一)

1.簡介

       js是一種基於物件和事件驅動的並具有相對安全性的客戶端指令碼語言。也是一種廣泛用於web客戶端開發的指令碼語言,常用來給html網頁新增動態功能,如響應使用者的各種操作。
       主要的目的是為了解決伺服器端語言遺留的速度問題,為客戶提供更流暢的瀏覽效果。

2.javaScript的特點

1)是解釋性語言:所有的語言都必須轉換為機器語言,也就是程式設計師寫出的程式碼,要翻譯為機器語言才可以用。

       2)語法結構與java和c++ 十分的相似。

       3)基於物件的語言 

       4)跨平臺性:只與瀏覽器有關,與操作環境無關 

3.優缺點

    優點:

      1)在客戶端進行 資料驗證,節省伺服器資源

      2)使網頁更加友好

      3) 支援分散式的運算和處理(客戶端),不需要網路和伺服器的參與

    缺點:

      1)瀏覽器相容性問題

      2)不能讀寫開啟和儲存計算機上的檔案 

4.引入javaScript三種方式:

   1)使用<Script></Script>標籤內部樣式

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>js使用方式2:內部js</title>  
    <script type="text/javascript">  
        //宣告一個函式(整個文件都可以使用)  
        function surprise() {  
            alert('恭喜你中了一百萬')/*彈出框*/  
        }  
    </script>  
</head>  
<body>  
<input type="button" value="點選有驚喜" onclick="surprise()"><!--呼叫函式-->  
<input type="button" value="點選" onclick="surprise()">  
</body>  
</html>  

    2)使用外部js檔案

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>js使用方式3:外部js</title>  
    <!--很多html頁面都可以呼叫js4.js頁面-->  
    <script src="../../js/js4.js" type="text/javascript" charset="utf-8">  
    </script>  
</head>  
<body>  
<input type="button" value="點選" onclick="test()">  
</body>  
</html> 

    3)直接寫在HTML標籤中的行內樣式。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>js使用方式1:行內js</title>  
</head>  
<body>  
<input type="button" value="點選有驚喜" onclick="javascript:alert('哈哈哈哈')">  
<!--onclick:點選觸發一個事件,alert:彈出一個對話方塊-->  
</body>  
</html>

5.js語法:

     1)區分大小寫
     2)注意變數,函式等命名規範
     3)每行程式碼以分號結束

6.資料型別與變數

   1)全域性變數與區域性變數

      區域性:指的的是在特定的區域塊內使用,全域性是在整個區域可以使用

      在函式的外部:加var和不加var 都是全域性變數

      在函式的內部,加var是區域性變數,不加var 是全域性變數 

     在函式外部定義一個全域性變數和在函式內部定義一個相同的全域性變數,在函式外部,使用的話,函式內部的全域性變數會覆蓋函式外部的全域性變數。

    2)資料型別

    A.基本型別:數字型別、字串型別、布林型別

     a.數字型別 (number):js中的所有數字型別均為浮點型別

      基本運算子:+、-、*、/、%、Math物件

      特殊值:NaN、Infinity等

      判斷函式:isNaN()和isFinite()

      可以使用typeof運算子檢視資料型別

     b.字串型別(string):用單引號或雙引號括起來,在js與html一起使用的時候建議使用單引號。

     常用屬性與方法:

     加號:+、 長度:length

     方法:charAt(i)、substring(i、j)、substr(i、j)、indexOf(i、j)、split()

     c. 布林值(boolean):使用true和false

     轉換(boolean轉換常常是自動進行的):

     數字環境中: 
     true -> 1 、 false -> 0 
     0 -> false 、非 數 字 -> true 
 
     字串環境:
     true -> "true"   false -> "false "

     空字串  -> false 、 非空字串  -> true 

     其他環境:

     null 、 undefined 轉 換 為 false 

     非空物件轉換為 true 
 

   B.複合型別:物件(物件、函式、陣列等)

    注:函式是物件、物件與陣列相似但不相同

     a.物件(object):js中物件是已命名的資料的集合(即數值有名字,好似鍵值對。這些資料即為屬性,資料名為屬性名)

     利用構造方法建立物件:
     ->new語法

     ->一旦建立了物件就可以隨意的為其新增屬性

     物件的直接量JSON(JavaScript Object Notation)

    var o  = {}; //Object物件
    var o  = {
   name:"張三"
sayHello:function(){
Alert("你好")
}
}
     在js中物件可以作為關聯陣列使用
o.name
o.sayHello()
o["name"]
o["sayHello"]()

    b.陣列 (Array):陣列與物件類似,但不太相同。陣列是數值有序集合 

    陣列的建立與使用 

    -> new 語法

    -> 直接使用索引下新增成員、引用成員 

    陣列的直接量 

    var arr = [ ] . 

    c.函式(function):函式是一個可以執行的JavaScript程式碼片段,函式沒有過載

    1.系統函式 

   ParseInt();轉換為整數  45.9a轉換為45;a6轉換返回為NaN(Not a Number)
   isNaN(判斷是不是數字)
   typeof(var);判斷是什麼資料型別

   eval(“5+2”);計算表示式值

   2.自定義函式

   Function 函式名(){javaScript程式碼}

   Function 函式名(引數1,引數2){javaScript程式碼  return 返回值(可選)}

   3.js中函式的呼叫:

   事件名=“函式名(傳遞的引數值)“;
   函式名(傳遞的引數值);
   匿名函式:
   匿名函式的宣告:
   Var 變數名=function(引數){  函式體  return 返回值;} ;
   呼叫

   變數名(引數)

   4.函式的引數

   當實際引數的個數大於形式引數的個數,多餘的實際引數會被省略掉;

   當實際引數的個數小於形式引數的個數,形式引數多餘的個數就會被定義為NaN

  C.無型別:null、undefined

   null表示空,沒有引用物件

   undefined表示未定義,不存在 
   -> 定義變數未賦值 
   -> 返回只有return 

   -> 未定義的屬性 

   null與undefined的比較 

   = =視兩個相同 , 一 般使用= = = 和!= = 進行判斷 

   undefined不是js的保留字,是ecmascropt的標準 
   寫類庫時可以在開始的時候使用程式碼var undefined; 保證其可用