前端--javaScript之簡單介紹_ZenDei技術網路在線

一.javaScript(以下簡稱js)的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟體中).後將其改名ScriptEase.(客戶端執行的語言) Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Net ...

一.javaScript(以下簡稱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是規範.

二.ECMAScript

儘管ECMAScript是一個重要的標準,但他並不是js唯一的部分,當然,也不是唯一被標準化的部分.實際上,一個完整的js實現是由以下3個不同部分組成的:

核心(ECMAScript)

文檔對象模型(DOM) Document object model(整合js,css,html)

瀏覽器對象模型(BOM)Broswer object model(整合js和瀏覽器)

js在開發中絕大多數情況是基於對象的,也是面向對象的.

簡單地說,ECMAScript描述了一下內容:

語法

類型

語句

關鍵字

保留字

運算符

對象(封裝,繼承,多態)基於對象的語言,使用對象.

三.js基礎

1.js的引入方式

　　1.直接編寫:

<script>
    alert("hello world!")
</script>

　　2.導入文件:

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

2.js的變數

　　1.聲明變數時不用聲明變數類型,全部使用var關鍵字

var a = 3;

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

var name = "corn" , age = 21;

　　3.變數命名,首字母只能是字母,下劃線,美元符號$,三選一,餘下的字元可以是任意字元,且區分大小寫

3.常量和標識符

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

標識符:

　　1.由不是數字開頭的字母,數字,下劃線(_),美元符號($)組成

　　2.常用於表示函數,變數等的名稱

　　3.例如:_abc.$abc,abc,abc123是標識符,而1abc不是

　　4.js語言中代表特定含義的詞稱為保留字,不允許程式再定義為標識符

關鍵字:

4.js的數據類型

數據類型有:

number        ------　　數值
boolean       ------　　布爾值
string        ------　　字元串
undefined     ------　　undefined
null          ------　　null

數字類型:

　　不區分整型數值和浮點型數值

字元串類型(string):

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

字元串中特殊部分必須加上右斜杠\;常用的轉義字元 \n:換行\` ; \':單引號 ; \":雙引號 ; \\:右斜杠

布爾類型(boolean):

Boolen類型僅有兩個值:true和false,也代表1和0,實際運算中true = 1,false = 0

布爾值也可以看作on/off,yes/no,1/0對應true/false

Boolean值主要用於js的控制語句,例如:

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

Null和Undedined類型

Undefined類型

1.Undefined類型只有一個值,即undefined.當聲明的變數未初始化時,該變數的預設值是undefined.

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

Null類型

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

儘管這兩個值相等,但它們的含義不同.undefined是聲明瞭變數但未對其初始化時賦予該變數的值,null則用於表示尚未存在的對象(在討論typeof運算符時,簡單的介紹過這一點).如果函數或者方法要返回的是對象時,返回的通常是null.

四.運算符

運算符分類

算數運算符：
    +   -    *    /     %求餘       ++ 自增       -- 自減　　　　(++i:先計算後賦值,i++:先賦值後計算)

比較運算符：
    >  >=  <   <=  !=  ==  === !== 等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所做的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。

邏輯運算符：
     &&   ||   ！

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

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

五.流程式控制制

順序結構(從上向下執行)

分支結構

迴圈結構

分支結構:

　　1.if.....else結構

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

　　2.if.....else if.....else結構

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

　　3.switch.....case結構

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case字句通常都會加break語句,否則程式會繼續執行後續case中的語句.

迴圈結構:

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

六.string對象(字元串)

1.字元串對象的創建

字元串創建(兩種方式)

　　1)變數 = "字元串"

　　2)字元串對象名稱 = new String(字元串)

//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new String('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object類型
          console.log(typeof (s1)); //string類型

2.字元串對象的屬性和函數

-------屬性
x.length         －－－－獲取字元串的長度

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


－－－－字元串查詢方法

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

x.indexOf(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)         －－－－    拼接字元串

方法的使用

<script>
//        ========================
//        字元串對象的創建有兩種方式
//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new String('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object類型
          console.log(typeof (s1)); //string類型

//        ======================
//        字元串對象的屬性和方法
//           1.字元串就這麼一個屬性
        console.log(s.length);  //獲取字元串的長度

//           2.字元串的方法
        console.log(s.toUpperCase()) ; //變大寫
        console.log(s.toLocaleLowerCase()) ;//變小寫
        console.log(s1.trim());  //去除字元串兩邊的空格(和python中的strip方法一樣，不會去除中間的空格)
////           3.字元串的查詢方法
        console.log(s.charAt(3));  //獲取指定索引位置的字元
        console.log(s.indexOf('f')); //如果有重覆的，獲取第一個字元的索引,如果沒有你要找的字元在字元串中沒有就返回-1
        console.log(s.lastIndexOf('f')); //如果有重覆的，獲取最後一個字元的索引
        var str='welcome to the world of JS!';
        var str1 = str.match('world');  //match返回匹配字元串的數組，如果沒有匹配則返回null
        var str2 = str.search('world');//search返回匹配字元串從首字元位置開始的索引，如果沒有返回-1
        console.log(str1);//列印
        alert(str1);//彈出
        console.log(str2);
        alert(str2);


//        =====================
//        子字元串處理方法
        var aaa='welcome to the world of JS!';
        console.log(aaa.substr(2,4)); //表示從第二個位置開始截取四個
        console.log(aaa.substring(2,4)); //索引從第二個開始到第四個，註意顧頭不顧尾
        //切片操作（和python中的一樣，都是顧頭不顧尾的）
        console.log(aaa.slice(3,6));//從第三個到第六個
        console.log(aaa.slice(4)); //從第四個開始取後面的
        console.log(aaa.slice(2,-1)); //從第二個到最後一個
        console.log(aaa.slice(-3,-1));


//        字元串替換、、
        console.log(aaa.replace('w','c')); //字元串替換，只能換一個
        //而在python中全部都能替換
        console.log(aaa.split(' ')); //把字元串按照空格分割
        alert(aaa.split(' ')); //把字元串按照空格分割
        var strArray = aaa.split(' ');
        alert(strArray[2])
    </script>

七.Array對象(數組)

1.創建數組的三種方式

創建方式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]="星期六";

2.數組的屬性和方法

//        ====================
//        數組對象的屬性和方法
          var arr = [11,55,'hello',true,656];
//      1.join方法
        var arr1 = arr.join('-'); //將數組元素拼接成字元串，內嵌到數組了，
        alert(arr1);                //而python中內嵌到字元串了
//        2.concat方法(鏈接)
        var v = arr.concat(4,5);
        alert(v.toString())  //返回11,55,'hello',true,656,4,5
//        3.數組排序reserve  sort
//        reserve:倒置數組元素
        var li = [1122,33,44,20,'aaa',2];
        console.log(li,typeof (li));  //Array [ 1122, 33, 44, 55 ] object
        console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string
        alert(li.reverse());  //2,'aaa',55,44,33,1122
//         sort :排序數組元素
        console.log(li.sort().toString()); //1122,2,20,33,44,aaa  是按照ascii碼值排序的
//        如果就想按照數字比較呢?（就在定義一個函數）
//        方式一
        function intsort(a,b) {
            if (a>b){
                return 1;
            }
            else if (a<b){
                return -1;
            }
            else{
                return 0;
            }
        }
        li.sort(intsort);
        console.log(li.toString());//2,20,33,44,1122,aaa

//        方式二
        function Intsort(a,b) {
            return a-b;
        }
        li.sort(intsort);
        console.log(li.toString());
        // 4.數組切片操作
        //x.slice(start,end);
        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"
//        5.刪除子數組
        var a = [1,2,3,4,5,6,7,8];
        a.splice(1,2);
        console.log(a) ;//Array [ 1, 4, 5, 6, 7, 8 ]
//        6.數組的push和pop
//        push:是將值添加到數組的結尾
        var b=[1,2,3];
        b.push('a0','4');
        console.log(b) ; //Array [ 1, 2, 3, "a0", "4" ]

//        pop；是講數組的最後一個元素刪除
        b.pop();
        console.log(b) ;//Array [ 1, 2, 3, "a0" ]
        //7.數組的shift和unshift
        unshift: 將值插入到數組的開始
        shift: 將數組的第一個元素刪除
        b.unshift(888,555,666);
        console.log(b); //Array [ 888, 555, 666, 1, 2, 3, "a0" ]

        b.shift();
        console.log(b); //Array [ 555, 666, 1, 2, 3, "a0" ]
//        8.總結js的數組特性
//        java中的數組特性：規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.
//        js中的數組特性
//            js中的數組特性1：js中的數組可以裝任意類型,沒有任何限制.
//            js中的數組特性2： js中的數組,長度是隨著下標變化的.用到多長就有多長.
    </script>

八.日期

1.創建data對象

創建date對象
//        方式一：
        var now = new Date();
        console.log(now.toLocaleString()); //2017/9/25 下午6:37:16
        console.log(now.toLocaleDateString()); //2017/9/25
//        方式二
        var now2 = new Date('2004/2/3 11:12');
        console.log(now2.toLocaleString());  //2004/2/3 上午11:12:00
        var now3 = new Date('08/02/20 11:12'); //2020/8/2 上午11:12:00
        console.log(now3.toLocaleString());

        //方法3：參數為毫秒數
        var nowd3=new Date(5000);
        alert(nowd3.toLocaleString( ));
        alert(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT

2.data對象的方法---獲取日期和時間

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完整年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

九.math對象(數學相關的)

//該對象中的屬性方法 和數學有關.
   

abs(x)    返回數的絕對值。
exp(x)    返回 e 的指數。
floor(x)對數進行下舍入。
log(x)    返回數的自然對數（底為e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入為最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

十.Function對象(重點)

1.函數的定義

function 函數名 (參數){ <br>    函數體;

    return 返回值;

}

功能說明：

可以使用變數、常量或表達式作為函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類可以表示開發者定義的任何函數。

用 Function 類直接創建函數的語法如下：

var 函數名 = new Function("參數1","參數n","function_body");

雖然由於字元串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行為與用 Function 類明確創建的函數行為是相同的。

示例：

var  func2 = new Function('name',"alert(\"hello\"+name);");
    func2('haiyan');

註意:js函數載入執行與python不同,它是整體載入完才會執行,所以執行函數放在函數聲明上面或下麵都可以:

f();//----->OK
      function f(){
       console.log("hello")
      }
f();//----->OK

2.Function對象的屬性

如前所說,函數屬於引用類型,所以它們也有屬性和方法.

比如,ECMAScript定義的屬性 length聲明瞭函數期望的參數個數

alert{func1.length}

3.Function的調用

//    ========================函數的調用
    function fun1(a,b) {
           console.log(a+b)
    }
    fun1(1,2);// 3
    fun1(1,2,3,4); //3
    fun1(1); //NaN
    fun1(); //NaN
    console.log(fun1())

//    ===================加個知識點
    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,除了!=

    =============一道面試題、、
    function a(a,b) {
        console.log(a+b);
    }
    var a=1;
    var b=2;
    a(a,b)   //如果這樣的話就會報錯了，不知道是哪個a了。

4.函數的內置對象arguments

//    函數的內置對象arguments,相當於python中的動態參數
    function add(a,b){
        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]
    }
    add(1,2)
//     ------------------arguments的用處1 ------------------
    function ncadd() {
        var sum = 0;
        for (var i =0;i<arguments.length;i++){
//            console.log(i);//列印的是索引
//            console.log(arguments);//Arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 項… }
            console.log(arguments[i]);//1,2,3,4,5
            sum +=arguments[i]
        }
        return sum
    }
    ret = ncadd(1,2,3,4,5,6);
    console.log(ret);


//     ------------------arguments的用處2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

5.匿名函數

/    =======================
    // 匿名函數
    var func = function(arg){
        return "tony";
    };

// 匿名函數的應用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

6.RegExp對象

//RegExp對象

//創建正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配後停止)和i(忽略大小寫)

// 用戶名只能是英文字母、數字和_，並且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

// 創建RegExp對象方式（逗號後面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配響應的字元串
var s1 = "bc123";

//RegExp對象的test方法，測試一個字元串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

// 創建方式2
// /填寫正則表達式/匹配模式（逗號後面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String對象與正則結合的4個方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字元串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字元串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字元串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字元串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫


// 註意事項1：
// 如果regExpObject帶有全局標誌g，test()函數不是從字元串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值預設為0，所以第一次仍然是從字元串的開頭查找。
// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字元串中本次匹配內容的最後一個字元的下一個索引位置。
// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。
// 因此，當我們使用test()函數執行了一次匹配之後，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。
// 如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。

var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('xxxfoo'); // 還是返回true
// 所以我們在使用test()方法校驗一個字元串是否完全匹配時，一定要加上^和$符號。

// 註意事項2(說出來你可能不信系列)：
// 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test("undefined"), 並且/undefined/.test()預設返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true