1. 程式人生 > >python之路-----前端之js(一)

python之路-----前端之js(一)

模仿 rip 條件 整合 1-1 花括號 nvi image 討論

  一.JS發展歷史

  • 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名ScriptEase.(客戶端執行的語言)

  • Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後改名叫Javascript

  • 微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.

  • 為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會(ISO/IEC)也采納 ECMAScript 作為標準(ISO/IEC-16262)。從此,Web 瀏覽器就開始努力(雖然有著不同的程度的成功和失敗)將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.

二.JS的簡介

  JS主要由ECMAScript ,DOM,BOM三部分組成。其中ECMAScript是基礎,規定了js中的基本語法,例如變量,函數的定義。DOM是最重要的部分,它整合js,css,html,將三者關聯起來。BOM將瀏覽器和JS整合起來。

  JS的基於對象的語言,它內含眾多類,我們可以進行實例化,使用它們。

              技術分享

  js的導入方式有兩種,如下:

1 直接編寫
    <script>
        alert(hello yuan)
    </script>

2 導入文件
    <script src="
hello.js"></script>

三.ECMAScript

  3.1 功能概述   

ECMAScript 描述了以下內容:
語法 
類型 
語句 
關鍵字 
保留字 
運算符 
對象 (封裝 繼承 多態) 基於對象的語言.使用對象.

  3.2 JS 的變量,常量和標識符

    變量

      變量:用來存儲程序過程中所需要臨時保存的數據。

      js是弱類型,動態語言,對於變量的聲明不需要聲明變量類型。

      變量聲明規則:

      1.聲明變量時,如果不使用var聲明,則為全局變量。建議聲明變量時都使用 var

var a;
a=1

      2.一行可以聲明多個變量.並且可以是不同類型

var a=1,b=b,c=Date();

      3.聲明變量可以不用聲明類型

      4.變量命名,首字符只能是字母,下劃線,$美元符 三選一,余下的字符可以是下劃線、美元符號或任何字母或數字字符且區分大小寫,x與X是兩個變量 

技術分享
Camel 標記法
首字母是小寫的,接下來的字母都以大寫字符開頭。例如:
var myTestValue = 0, mySecondValue = "hi";
Pascal 標記法
首字母是大寫的,接下來的字母都以大寫字符開頭。例如:
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母(或小寫字母序列),說明該變量的類型。例如,i 表示整數,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
變量命名規則

  常量和標識符

    常量 :直接在程序中出現的數據值

  標識符:

  1. 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
  2. 常用於表示函數、變量等的名稱
  3. 例如:_abc,$abc,abc,abc123是標識符,而1abc不是
  4. JavaScript語言中代表特定含義的詞稱為保留字,不允許程序再定義為標識
技術分享
  1. 技術分享

  3.3 變量類型

技術分享技術分享

常用變量類型:
        number     -----  數值
        boolean    -----  布爾值
        string     -----  字符串
        undefined  -----  undefined
        null       -----   null  

    3.3.1 number

          技術分享

    1.不區分整型數值和浮點型數值;

    2.所有數字都采用64位浮點格式存儲,相當於Java和C語言中的double格式

    3.能表示的最大值是±1.7976931348623157 x 10308

    4.能表示的最小值是±5 x 10 -324  

    整數:
     在JavaScript中10進制的整數由數字的序列組成
     精確表達的範圍是?-9007199254740992 (-253) 到 9007199254740992 (253)
    超出範圍的整數,精確度將受影響
    浮點數:
    使用小數點記錄數據
       例如:3.4,5.6
    使用指數記錄數據
      例如:4.3e23 = 4.3 x 1023

    16進制和8進制數的表達:
    16進制數據前面加上0x,八進制前面加0;16進制數是由0-9,A-F等16個字符組成;8進制數由0-7等8個數字組成

    16進制和8進制與2進制的換算:

2進制: 1111 0011 1101 0100   <-----> 16進制:0xF3D4 <-----> 10進制:62420
2進制: 1 111 001 111 010 100 <-----> 8進制:0171724

  

    3.3.2 字符串類型

       是由Unicode字符、數字、標點符號組成的序列;字符串常量首尾由單引號或雙引號括起;JavaScript中沒有字符類型;常用特殊字符在字符串中

    的表達;
      字符串中部分特殊字符必須加上右劃線\;常用的轉義字符 \n:換行 \‘:單引號 \":雙引號 \\:右劃線

    3.3.3 布爾類型(boolean)

      Boolean類型僅有兩個值:true和false,也代表1和0,實際運算中true=1,false=0
      布爾值也可以看作on/off、yes/no、1/0對應true/false
      Boolean值主要用於JavaScript的控制語句,例如:

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

    3.3.4 NULL && Undefined類型   

    Undefined類型

      Undefined 類型只有一個值,即 undefined。

      1.當聲明的變量未初始化時,該變量的默認值是 undefined。

      2.當函數無明確返回值時,返回的也是值 "undefined";

    Null類型

      另一種只有一個值的類型是 Null,它只有一個專用值 null,即它的字面量。值 undefined 實際上是從值 null 派生來的,因此 ECMAScript 把它們定

    義為相等的。

      盡管這兩個值相等,但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值,null 則用於表示尚未存在的對象(在討論

    typeof 運算符時,簡單地介紹過這一點)。如果函數或方法要返回的是對象,那麽找不到該對象時,返回的通常是 null。

  

  3.4 運算符 

算術運算符:
    +   -    *    /     %       ++        -- 

比較運算符:
    >   >=   <    <=    !=    ==    ===   !==

邏輯運算符:
     &&   ||   !

賦值運算符:
    =  +=   -=  *=   /=

字符串運算符:
    +  連接,兩邊操作數有一個或兩個是字符串就做連接運算

    3.4.1 算術運算符

      註意1: 自加自減

        假如x=2,那麽x++表達式執行後的值為3,x--表達式執行後的值為1;i++相當於i=i+1,i--相當於i=i-1;
        遞增和遞減運算符可以放在變量前也可以放在變量後:--i

技術分享
i++ 如下代碼
    i=i
    fun(i)
    i=i+1

++i 如下代碼
    i=i+1
    fun(i)

i++先賦值,後執行,執行完成後再加1
++i 先加1,再執行
++i與i++區別
var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

      註意2: 單元運算符

- 除了可以表示減號還可以表示負號  例如:x=-y
 
+ 除了可以表示加法運算還可以用於字符串的連接  例如:"abc"+"def"="abcdef"
技術分享
js不同於python,是一門弱類型語言

靜態類型語言
    一種在編譯期間就確定數據類型的語言。大多數靜態類型語言是通過要求在使用任一變量之前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。 

動態類型語言
    一種在運行期間才去確定數據類型的語言,與靜態類型相反。VBScript 和 Python 是動態類型的,因為它們確定一個變量的類型是在您第一次給它賦值的時候。 

強類型語言
    一種總是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數,如果不明確地進行轉換 ,不能將把它當成一個字符串去應用。 

弱類型語言
    一種類型可以被忽略的語言,與強類型相反。JS 是弱類型的。在JS中,可以將字符串 12 和整數 3 進行連接得到字符串123,然後可以把它看成整數 123 ,所有這些都不需要任何的顯示轉換。 
    所以說 Python 既是動態類型語言 (因為它不使用顯示數據類型聲明),又是強類型語言 (因為只要一個變量獲得了一個數據類型,它實際上就一直是這個類型了)。
js 弱類型語言

      註意3: NaN

    var d="yuan";
    d=+d;
    alert(d);    //NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據
    alert(typeof(d));//Number

    //NaN特點:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=

    3.4.2 比較運算符

    
>   >=   <    <=    !=    ==    ===   !==

  用於控制語句時:

if (2>1){       //  3  0  false null undefined []
            console.log("條件成立!")
        }

  等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所做的與等號和非等號相同,只是它們在檢查相等性前,不執行類型轉換。

console.log(2==2);
console.log(2=="2");
console.log(2==="2");
console.log(2!=="2");

    註意1:

技術分享
var bResult = "Blue" < "alpha";
alert(bResult); //輸出 true  
    在上面的例子中,字符串 "Blue" 小於 "alpha",因為字母 B 的字符代碼是 66,字母 a 的字符代碼是 97。

比較數字和字符串

另一種棘手的狀況發生在比較兩個字符串形式的數字時,比如:

var bResult = "25" < "3";
alert(bResult); //輸出 "true"
上面這段代碼比較的是字符串 "25""3"。兩個運算數都是字符串,所以比較的是它們的字符代碼("2" 的字符代碼是 50,"3" 的字符代碼是 51)。

不過,如果把某個運算數該為數字,那麽結果就有趣了:

var bResult = "25" < 3;
alert(bResult); //輸出 "false"

這裏,字符串 "25" 將被轉換成數字 25,然後與數字 3 進行比較,結果不出所料。

總結:

    比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.
    比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.
View Code

   : 註意2:

等性運算符:執行類型轉換的規則如下:

如果一個運算數是 Boolean 值,在檢查相等性之前,把它轉換成數字值。false 轉換成 0,true 為 1。 
如果一個運算數是字符串,另一個是數字,在檢查相等性之前,要嘗試把字符串轉換成數字。 
如果一個運算數是對象,另一個是字符串,在檢查相等性之前,要嘗試把對象轉換成字符串。 
如果一個運算數是對象,另一個是數字,在檢查相等性之前,要嘗試把對象轉換成數字。 
在比較時,該運算符還遵守下列規則:

值 null 和 undefined 相等。 
在檢查相等性時,不能把 null 和 undefined 轉換成其他值。 
如果某個運算數是 NaN,等號將返回 false,非等號將返回 true。 
如果兩個運算數都是對象,那麽比較的是它們的引用值。如果兩個運算數指向同一對象,那麽等號返回 true,否則兩個運算數不等。

    3.4.3 邏輯運算符

if (2>1 && [1,2]){
    console.log("條件與")
}

// 思考返回內容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);

  

  3.5 流程控制

    流程結構一共有三種:1.順序結構 (從上到下執行) 2.循環結構 3.分支結構

    3.5.1 順序結構

<script>
    console.log(1)
    console.log(2)
    console.log(3)
    console.log(4)
</script>

//從上到下順序打印

    3.5.2 分支結構

      if-else結構

if (表達式){
   語句1;
   ......
   } else{
   語句2;
   .....
   }

  功能說明:如果表達式的值為true則執行語句1,否則執行語句2

技術分享
   <script>
        var a=1
        var b=2
        if ( a<b ){
            console.log(a+‘比‘+b+‘小‘)
        }else {console.log(a+‘比‘+b+‘大 ‘)}
    </script>
示例

    if-elif-else結構:

if (表達式1) {
    語句1;
}else if (表達式2){
    語句2;
}else if (表達式3){
    語句3;
} else{
    語句4;
}

    switch-case結構

switch基本格式
switch (表達式) {
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

            技術分享

    switch比else if結構更加簡潔清晰,使程序可讀性更強,效率更高。

  循環結構 (while;for)

    for循環

語法規則:

    for(初始表達式;條件表達式;自增或自減)
    {
            執行語句
            ……
    }

    功能說明:實現條件循環,當條件成立時,執行語句1,否則跳出循環體

    for循環的另一種用法

for( 變量 in 數組或對象)
    {
        執行語句
        ……
    }

//不建議使用該方法,會將數組內對象的屬性也遍歷出來,會造成功能錯誤

  while循環

語法規則:

while (條件){
    語句1;
    ...
}

    功能說明:運行功能和for類似,當條件成立循環執行語句花括號{}內的語句,否則跳出循環;同樣支持continue與break語句。

  異常處理

try {
    //這段代碼從上往下運行,其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 如果try代碼塊中拋出了異常,catch代碼塊中的代碼就會被執行。
    //e是一個局部變量,用來指向Error對象或者其他拋出的對象
}
finally {
     //無論try中代碼是否有異常拋出(甚至是try代碼塊中有return語句),finally代碼塊中始終會被執行。
}

//主動拋出異常 throw Error(‘xxxx‘)

python之路-----前端之js(一)