前端基礎（JavaScript）

阿新 • • 發佈：2017-08-07

model final lower closed vbs 字符 var 顯示不同

JavaScript概述

JavaScript的歷史

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是規範.

View Code

ECMAScript

盡管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

核心（ECMAScript） 
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的. 


簡單地說，ECMAScript 描述了以下內容：

語法 
類型 
語句 
關鍵字 
保留字 
運算符 
對象 (封裝 繼承 多態) 基於對象的語言.使用對象.

View Code

技術分享

二 JavaScript的基礎

2.1 JS的引入方式

1 直接編寫
    <script>
        alert(‘hello yuan‘)
    </script>
2 導入文件
    <script src="hello.js"></script>

View Code

2.2 JS的變量、常量和標識符

2.2.1 JS的變量

x=5
y=6
z=x+y

在代數中，我們使用字母（比如 x）來保存值（比如 5）。通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 11。在 JavaScript 中，這些字母被稱為變量。

那麽如何在JS中定義使用變量呢？



1、聲明變量時不用聲明變量類型. 全都使用var關鍵字;

var a; 
<br>a=3;



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


var name="yuan", age=20, job="lecturer";

3、聲明變量時 可以不用var. 如果不用var 那麽它是全局變量



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

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

View Code

2.2.2 常量和標識符

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

標識符：

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

技術分享

2.3 JS的數據類型

技術分享

 /*       
        number     -----  數值
        boolean    -----  布爾值
        string     -----  字符串
        undefined  -----  undefined
        null       -----   null  
      
 */

View Code

一個變量如果只申明未賦值，會打印出undefined（Python中會報錯找不到）

2.3.1 數字類型(number)

技術分享

不區分整型數值和浮點型數值;
所有數字都采用64位浮點格式存儲，相當於Java和C語言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±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

View Code

2.3.2 字符串類型(string)

是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；常用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；常用的轉義字符 \n:換行 \‘:單引號 \":雙引號 \\:右劃線

2.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;
      }

View Code

2.3.4 Null & Undefined類型

Undefined類型

Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

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

Null類型

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

盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那麽找不到該對象時，返回的通常是 null。

2.4 運算符

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

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

邏輯運算符：
     &&   ||   ！

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

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

2.4.1 算術運算符

註意1: 自加自減

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

var i=10;
console.log(i++);10
console.log(i);11
console.log(++i);12
console.log(i);12
console.log(i--);12
console.log(--i);10

View Code

註意2: 單元運算符

- 除了可以表示減號還可以表示負號  例如：x=-y
 
+ 除了可以表示加法運算還可以用於字符串的連接  例如："abc"+"def"="abcdef"

js不同於python，是一門弱類型語言（Python強類型，雖然不需要指定變量類型，但是變量定義之後類型固定，而js會根據使用的實際情況對變量類型進行一定的更改）

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

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

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

弱類型語言
一種類型可以被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，可以將字符串 ‘12‘ 和整數 3 進行連接得到字符串‘123‘，然後可以把它看成整數 123 ，所有這些都不需要任何的顯
示轉換。 

所以說 Python 既是動態類型語言 (因為它不使用顯示數據類型聲明)，又是強類型語言 (因為只要一個變量獲得了一個數據類型，它實際上就一直是這個類型了)。

靜態類型語言 \ 動態類型語言 \ 強類型語言 \ 弱類型語言

註意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,除了!=

NaN:not a number

2.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");

View Code

註意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碼,如果最高位相等,繼續取第二位比較.

字符串、數字比較

註意2：

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

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

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

等性運算符

2.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);

View Code

2.5 流程控制

順序結構(從上向下順序執行)
分支結構
循環結構

2.5.1 順序結構

    <script>
        console.log(“星期一”);
        console.log(“星期二”);
        console.log(“星期三”);
    </script>

View Code

2.5.1 分支結構

if-else結構：

if (表達式){
   語句１;
   ......
   } else{
   語句２;
   .....
   }

View Code

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

示例：

var x= (new Date()).getDay();
        //獲取今天的星期值，0為星期天
        var y;

        if ( (x==6) || (x==0) ) {
            y="周末";
        }else{
            y="工作日";
            }
        
        console.log(y);

        /*等價於

        y="工作日";
        if ( (x==6) || (x==0) ) {
        y="周末";
        }
        console.log(y);  */

View Code

if-elif－else結構：

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

View Code

示例：

var score=window.prompt("您的分數:");

if (score>90){
    ret="優秀";
}else if (score>80){
    ret="良";
}else if (score>60){
    ret="及格";
}else {
    ret = "不及格";

}
alert(ret);

View Code

switch-case結構

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

View Code

技術分享

示例：

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定義";
}

View Code

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

2.5.2 循環結構

技術分享

循環語句流程圖

for循環：

語法規則：

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

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

for循環的另一種形式：（js的遍歷循環，遍歷的是索引值，而不是相應的各個內容，要得到各個內容，需要 arr[index]）

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

while循環：

語法規則：

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

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

var i=1;
while (i<=7) {
    document.write("<H"+i+">hello</H "+i+"> ");
    document.write("<br>");
    i++;
}
//循環輸出H1到H7的字體大小

2.5.3 異常處理

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

View Code

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

三 JavaScript的對象

簡介：

在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript"); 
//創建字符串對象
var cc=new Date();
//創建日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象
</script>

技術分享

3.1 String對象

字符串對象創建

字符串創建(兩種方式)
① 變量 = “字符串”
② 字串對象名稱 = new String (字符串)

var str1="hello world";
var str1= new String("hello word");

字符串對象的屬性和函數

 x.length                    －－－－獲取字符串的長度

 x.toLowerCase()        －－－－轉為小寫
 x.toUpperCase()        －－－－轉為大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index為要獲取的字符索引

x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，如果沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果為"world"
                        alert(str3);     // 結果為15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操作字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果為"cd"
                            
                            alert(str3); //結果為"efgh"
                            
                            alert(str4); //結果為"cdefg"
                            
                            alert(str5); //結果為"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果為"二"
                                
x.concat(addstr)         －－－－    拼接字符串

View Code

前端基礎（JavaScript）

model final lower closed vbs 字符 var 顯示不同 JavaScript概述 JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Sc

前端基礎（JavaScript）

JavaScript概述

JavaScript的歷史

ECMAScript

二 JavaScript的基礎

2.1 JS的引入方式

2.2 JS的變量、常量和標識符

2.2.1 JS的變量

2.2.2 常量和標識符

2.3 JS的數據類型

2.3.1 數字類型(number)

2.3.2 字符串類型(string)

2.3.3 布爾類型(boolean)

2.3.4 Null & Undefined類型

2.4 運算符

2.4.1 算術運算符

2.4.2 比較運算符

2.4.3 邏輯運算符

2.5 流程控制

2.5.1 順序結構

2.5.1 分支結構

2.5.2 循環結構

2.5.3 異常處理

三 JavaScript的對象

3.1 String對象

字符串對象創建

字符串對象的屬性和函數

相關推薦