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

ECMAScript

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

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

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

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

JavaScript引入方式

Script標簽內寫代碼

<script>
  // 在這裏寫你的JS代碼
</script>

引入額外的JS文件

<script src="myscript.js"></script>

JavaScript語言規範

註釋

// 這是單行註釋

/*
這是
多行註釋
*/

結束符

JavaScript中的語句要以分號（;）為結束符

JavaScript語言基礎

變量聲明

JavaScript的變量名可以使用_，數字，字母，$組成，不能以數字開頭。

聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";
var age = 18;

註意：

變量名是區分大小寫的

推薦使用駝峰式命名規則

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

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

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

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

常量與標識符

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

標識符：

由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成

常用於表示函數、變量等的名稱

例如：_abc,$abc,abc,abc123是標識符，而1abc不是

JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符

JavaScript數據類型

JavaScript擁有動態類型

var x;  // 此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串 

數字類型

JavaScript不區分整型和浮點型，就只有一種數字類型

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

轉換數字常用方法

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

字符串

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

字符串對象創建

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

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

字符串的常用方法

 x.length         －－－－獲取字符串的長度
 x.toLowerCase()        －－－－轉為小寫
 x.toUpperCase()        －－－－轉為大寫
 x.trim()               －－－－去除字符串兩邊空格       
 x.trimLeft()     －－－－去除字符串左邊空格
 x.trimRight()    －－－－去除字符串右邊空格

－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index為要獲取的字符索引
x.indexOf(findstr,index)   －－－－查詢字符串元素的位置，找不到返回-1
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)         －－－－    拼接字符串

拼接字符串一般使用“+”

布爾類型

區別於Python，true和false都是小寫

Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布爾值也可以看作on/off、yes/no、1/0對應true/false

var a = true;
var b = false;

數組

類似於Python中的列表

數組創建的三種方式

創建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

創建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

創建方式3:
var arrname = new Array(長度); 
            //  初始化數組對象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";

數組的使用方法

// join方法
x.join(bystr)       －－－－將數組元素拼接成字符串

                var arr1=[1, 2, 3, 4, 5, 6, 7];
                var str1=arr1.join("-");
                alert(str1);  //結果為"1-2-3-4-5-6-7"

// concat方法
x.concat(value,...)    －－－－連接數組
                  var a = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回結果為1,2,3            
                  alert(b.toString());  //返回結果為1,2,3,4,5

// 數組排序-reverse sort
//x.reverse()
//x.sort()

var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];

arr1.reverse(); //顛倒數組元素
alert(arr1.toString());  // toString()把數組轉換為字符串，並返回結果
//結果為444,111,12,32

arr1.sort();    //排序數組元素
alert(arr1.toString());
//結果為111,12,32,444

//------------------------------
arr=[1,5,2,100];

//arr.sort();
//alert(arr);
//如果就想按著數字比較呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);

alert(arr);

function IntSort(a,b){
    return a-b;
}

// 數組切片操作
//x.slice(start, end)
//x代表數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引為0
//start、end可為負數，-1代表最後一個數組元素
//end省略則相當於從start位置截取以後所有數組元素

var arr1=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//結果為"c,d" 
alert(arr3.toString());
//結果為"e,f,g,h"
alert(arr4.toString());
//結果為"c,d,e,f,g"

// 刪除子數組
//x. splice(start, deleteCount, value, ...)
//x代表數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數可以省略       
        
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//a變為 [1,4,5,6,7,8]

a.splice(1,1);
alert(a.toString());//a變為[1,5,6,7,8]

a.splice(1,0,2,3);
alert(a.toString());//a變為[1,2,3,5,6,7,8]

// 數組的push和pop
//push pop這兩個方法模擬的是一個棧操作

//x.push(value, ...)  壓棧
//x.pop()             彈棧      
//x代表數組對象
//value可以為字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除

var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果為"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果為"1,2,3,4,5,6,7"
arr1.pop();  // pop可以取到刪除的值
alert(arr1);
//結果為"1,2,3,4,5"

// 數組的shift和unshift
//x.unshift(value,...)
//x.shift()
//x代表數組對象
//value可以為字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //結果為"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //結果為"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //結果為"4,5,1,2,3"

總結js的數組特性

//  js中數組的特性
         //java中數組的特性,  規定是什麽類型的數組,就只能裝什麽類型.只有一種類型.
         //js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制.
         //js中的數組特性2: js中的數組,長度是隨著下標變化的.用到多長就有多長.
         var arr5 = [‘abc‘,123,1.14,true,null,undefined,new String(‘1213‘),new Function(‘a‘,‘b‘,‘alert(a+b)‘)];
        /*  alert(arr5.length);//8
         arr5[10] = "hahaha";
         alert(arr5.length); //11
         alert(arr5[9]);// undefined */

對象

在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>

創建一個類似字典的對象

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

null和undefined

Undefined類型

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

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

Null類型

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

盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象。如果函數或方法要返回的是對象，那麽找不到該對象時，返回的通常是 null。

類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"
console.log(typeof([11,22]));  // object
console.log(typeof("123"));  // string

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句

運算符

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

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

邏輯運算符：
     &&   ||   ！

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

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

i++先賦值再計算
++i先計算再賦值

===強等於，既判斷值也判斷類型

註意1：

比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.

比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較

註意2：

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

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

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

js不同於python，是一門弱類型語言

靜態類型語言

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

動態類型語言

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

強類型語言

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

弱類型語言

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

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

流程控制

if-else

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

if-else if-else

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

switch

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

default為上面條件都不滿足時的默認值

如果不加break則會從符合條件的開始一直執行到break

for

for (var i=0;i<10;i++) {
  console.log(i);
}

for循環的另一種形式
for( 變量 in 數組或對象)
    {
        執行語句
        ……
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b
// 條件成立取a，不成立取b

初識JS 基本語法.基本運算符