Web前端之Javascript詳解20180330

標籤：填充   sub   nts   hello   個數   編譯   else   除了   客戶   

一、javascript概述

javascript是基於對象和事件的指令碼語言。

特點：

1.安全性(不允許直接存取本地硬碟(因為是被遠端瀏覽器解釋))，它可以做的就是資訊的動態互動

2.跨平台性(只要可以解釋JS的瀏覽器都可以執行，和平台(系統)無關),java被虛擬機器解析所以也不需要依賴平台。

 

二、javascript與Java不同

1.JS是Netscape公司的產品，Java早期是SUN公司的產品

2.JS是基於對象(也就說對象都已經封裝好了)和事件驅動的，Java是物件導向

3.JS只需解釋就可以執行(js在用戶端,只要可以解釋JS的瀏覽器都可以執行)，Java需要先編譯成位元組碼檔案，再執行

4.JS是弱類型(非嚴謹的,甚至不寫分號都可以,規範來說還是要寫)，Java是強型別(嚴謹的)。

比如JAVA定義了8種資料類型(5種基本,3種引用)，而js根本就沒有資料類型

對於注釋，js也是使用/**/和//

 

三、javascript與html的結合方式

想要將其他代碼融入到html中，都是以標籤的形式。script標籤可以存放在頁面的任意位置，無論是在head裡，body裡，還是在head body之間，或者在head body之外都是可以的。

1.js代碼存放在標籤對<script type="text/javascript>..</script>中

2.使用script標籤的src屬性引入一個js檔案。(方便後期維護，擴充，獨立出來提高了複用與封裝性，方便多個頁面引用)

例：<script src="test.js" type="text/javascript"></script>

註：規範中script標籤中必須加入type屬性。

 

四、文法

alert("123");//這個是win系統提供的，可以直接放在js中，效果是彈出一個對話方塊。

一門程式設計語言的基本要素有：變數，語句，函數，資料結構(數組等)，類似進階語言還有，操作資料對象(io)，操作網路對象(socket)等等

 

1.變數

定義變數使用關鍵字var，弱類型即是不用指定具體的資料類型

例：

var x=3;

x="abc";//或者x=‘abc‘也可以，表示js裡面都是字串，沒有字元的概念，所以單雙引號都可以

alert(x);//結果顯示abc

var y;

alert(y);//結果顯示undefined

注意，js中特殊的常量值：undefined，當變數沒有初始化就被使用，該變數值就是undefined，類似Java中null。

注意，由於js裡面沒有類型的概念，所以在運算的時候不涉及到類型轉換，比如:3250/1000*1000，js的結果就是3250，而不是3000。

 

2.語句(與Java語句格式相同)

1).判斷結果(if語句)

注意：var x=3;

         if(x==4)//可以進行比較運算

         if(x=4)//可以進行賦值運算，而且可以同樣進行判斷，不報錯

         因為在js中0就是false，非0就是true(通常用1表示)。也就是空就是假,非空就是真

         所以if(x==4)結果是true;

2).選擇結果(switch語句)

注意，js的case後面，可以是字串

3).迴圈結構(while語句，do..while語句，for語句)。

例：

for(var x=0;x<3;x++)

{

         alert("x="+x);

}

var sum="";

for(var x=1;x<=4;x++)

{

         if(x==4)

                   sum=sum+"x="+x;//連接字串

         else

                   sum=sum+"x="+x+",";

}

alert(sum);

//寫到頁面中去的方法：

document.write("<font color=‘red‘>"+sum+"</font>");//html中的部分要用引號包括，js中的不用

注意，不同的是，沒有了具體資料類型的限制，使用時要注意。

注意，js出錯時，會在網頁的狀態列裡面出現一個黃色的驚嘆號，點擊後會有提示在哪裡出錯了。

注意，js在運算式中，邏輯與使用&&

 

用表格形式顯示一個99乘法表：

table,table td{

         border: #0000ff double 1px;

         width:600px;

}

                            document.write("<table>");

                            for(var x=1; x<=9; x++){

                                     document.write("<tr>");

                                     for(var y=1; y<=x; y++){

                                               document.write("<td>"+y+"*"+x+"="+y*x+"</td>");

                                     }

                                     document.write("</tr>");

                            }

                            document.write("</table>");

 

3.數組

方便操作多元素的容器，可以對其中的元素進行編號。

特點：可以存任意元素，長度是可變的

格式：

var arr =new Array();//new完就可以隨時往這個數組裡面填充元素。

arr[0] = "hello";

arr[1] = 123;

var arr =[4,1,6,8];

arr[6]=100;//這樣會改變數組的長度，長度變為7，中間沒有定義的部分為undefined

var arr = {‘hello‘,123,true,"abc"};

可以存放任意類型的資料，但是規範上最好還是同類型的，方便操作。

通過遍曆即可對數組進行基本操作

for(var x=0;x<arr.length;x++)

{

         alert(arr[x]);

}

 

4.函數

由於沒有資料類型，所以不涉及到傳回型別，以及參數類型。

1).一般函數

格式(一般函數定義方式)：

         function 函數名(形式參數...)

{

         執行語句;

         (return 傳回值;)

}

代碼：

                            function add(x,y){

                                    

                                     return x+y;

                            }

                           

                            var sum = add(4,5);

 

注意，js也有全域變數和局部變數，這方面的使用也和java的一樣。

注意，js沒有重載形式，定義兩個參數，傳一個也不會有錯，如下：

fuction show(x,y)

{

         alert(x+‘,‘+y);

}

show(3);//結果顯示3,undefined

同時，正因為如此，當定義的傳參少了，但是傳入的更多時，也不會有錯，還會接收到，接收到一個名為arguments的數組中，(這個數組每個函數都有，不需要手動去定義)

例：

fuction show()

{

         for(var x=0;x<arguments.length;x++)

                   alert(arguments[x]);

}

show(3,4,5,7);//結果顯示3,4,5,7

雖然可以這麼做，但是從規範上來說，需要哪些都定義在參數上，這樣閱讀性才好。

 

注意，函數本身在js中就是一個對象，函數名就是這個對象的名字，函數名就指向了這個函數對象，所以：

var x=show;//這個不會調用show方法，而是表示x指向show所指向的一個函數對象

alert(x);//這樣就會把整個函數內容列印出來

 

2).動態函數

js中內建了一個函數對象Function

所以定義函數，可以類似定義對象的形式：

var 函數名 = new Function("形參","形參",...,"函數內部代碼");

例：

var show = new Function("x","y","var sum=x+y;return sum;");

var sum = show(5,2);

特點：

定義的時候，參數和函數體都可以作為變數向內傳遞。

即，動態函數，參數以及函數體都可以通過參數進行傳遞，可以動態指定。

動態函數，相對少見一些。

 

3).匿名函數

定義與使用格式：

var 變數名 = function()

{

 

}

變數名();

 

js還是基於事件驅動的，所以匿名函數往往可以作為一個事件的處理方式而存在。所以說在定義事件屬性的行為時較為常用。

例：

視窗的資料一載入完畢會有一個onload事件，它可以直接等於一個匿名函數，這樣就可以通過匿名函數來處理這個事件。

即，

window.onload = function()

{//匿名函數就類似匿名對象一樣，所以可以賦值

         alert("onload over");

}

這是一種簡化的寫法，也可以這麼寫：

fuction method()

{

         alert("onload over");

}

window.onload = method;//不是傳回值所有不能有括弧，用對象賦值

 

5.對象

js中沒有class這類關鍵字，js是通過函數的形式建立對象出來。也就是說JS除了已經提供的內建對象(如document對象)外，也可以自訂對象

例：

function Person()

{//類似建構函式

         alert("Person inti");

}

var p = new Person();//定義一個Person對象，此時建構函式Person()會被調用

p.name ="133";//定義(增加)Person對象的屬性

p.age =22;//定義成員變數

p.eat= function()

{//定義(增加)Person對象的行為，定義成員函數

         alert("eat");

}

p.eat();//對象中函數被調用。

 

注意，建構函式裡也可以增加並初始化屬性：

function Person(name,age)

{//類似建構函式

         this.name=name;

         this.age=age;

}

var p= new Person("lisi",90);//執行個體化對象時傳入初始化值

alert(p.name);

alert(p["name"]);//這樣也可以，效果和前面一樣，這種方式的好處在於可以往p裡面傳遞參數

 

注意，對象即上面的p可以單獨出來封裝到一個js檔案，其他頁面可以通過引用這個檔案，就可以訪問該對象即p對象。這樣就可以實現一個js檔案被多個頁面使用，消滅了重複性代碼。

注意，如果在引用js檔案的頁面中，new了一個與js檔案中對象所屬類一樣的對象，那麼這個對象只可以訪問到類中的屬性，而無法訪問到js中的對象，即便兩個對象名字一樣(就近原則)。

 

JS用於操作對象的語句：

1).with語句

格式：

         with(對象)

         {//這個地區內可以直接使用該對象的任意屬性和方法

         }

應用：當調用一個對象中多個成員時，為了簡化調用，編碼"對象."這種格式的重複書寫。

或者說，用來確認某一對象所作用的範圍。

例：

function Person(name,age)

{//類似建構函式

         this.name=name;

         this.age=age;

}

var p= new Person("lisi",90);//執行個體化對象時傳入初始化值

with(p)

{

         alert(name,age);

}

2).for(...in...)語句

用於遍曆對象或者數組

例：

遍曆對象：

function Person(name,age)

{//類似建構函式

         this.name=name;

         this.age=age;

}

var p= new Person("lisi",90);//執行個體化對象時傳入初始化值

for(s in p)

{

         alert(s+":"+p[s]);//s是屬性名稱，p[s]就是對應的屬性值，由於p裡面沒有s屬性，所以不能使用stu.s

}

遍曆數組：

var arr={5,1,2,3};

for(x in arr)

{

         alert(arr[x]);//x是數組的下標。

}

 

6.js內建對象(已有對象)

查看內建對象，可以查看js手冊。

比如object對象，new的時候傳入值也可以定義對象，只不過這種方式用的很少

1).String對象

String對象一般不用new來建立，直接var str=""這種形式建立即可，也就是說String對象可用字串文字顯示建立。

至於該對象的屬性和方法可以查看手冊。

其中bold方法會給字串加上b標籤,

fontcolor則給字串在html中加上顏色，

link方法會把當前字串變成一個超連結

substring方法取開始位和結束位，不包含結束位

substr方法，從開始位開始指定長度，長度比字串長度長，則長度使用字串長度

match方法，Regex中會用到

代碼：

var str ="abcde";

var y=str.bold();

document.write(y);

var z=str.fontcolor("red");

document.write(z);

alert(z);

var a=str.link("http://www.baidu.com");

document.write(a);

var i=str.substring(2,4);//結果cd，不包含第四個

var j=str.substr(2,4);//結果cde，只有三個那麼長，所以長度變為3，如果夠的話那就cdef

 

注意擷取字串長度時，沒有方法，只有屬性

 

2).Math對象

是一個固有對象，提供基本數學函數和常數。

也就是說可以直接使用，可以使用.的形式來使用屬性和方法，

格式：

         Math.[{屬性|方法}]

比如，

其中的random方法，用於擷取隨機數.

代碼：

var d =Math.random()*10+1;

 

3).Global對象

一些常用的方法會封裝在這個對象中，這個對象是一個固有對象，也就是可以直接使用，但是這種直接使用是不需要寫Global的，直接寫其內部的屬性和方法就行了。

比如，

其中的parseInt方法，當其參數裡的字串沒有字串時，會返回NaN,至於判斷這個傳回值可以用其中的isNaN方法，

例：

parseInt("abc") //返回NaN

parseInt("12abc") //返回12

如上個的隨機數中就可以用這個方法取整

注意，parseInt還可以傳入基數參數，表示按照哪種進位進行解析，

例：

var num=parseInt("110",2);//結果num等於6

 

類似於parseInt還有把數字轉換為字串的方法toString，不過該方法是固定方法(全域方法)不在global對象中，可以直接使用(每一個變數都有的方法)，

例：

var x=6;

var num =x.toString(2);//結果num=“110”，2是基數，注意不能直接寫成6.toString

//

 

4).Date對象

對象內的方法可以單獨擷取年月日，也可以直接使用對象，new返回的對象也是一串字串。

例：

var d = new Date();

alert(d);//直接顯示日期資訊

with(d)

{

         var month=(getMouth()+1);

         month = (mouth>9)?month;"0"+mount;//月份小於9的拼湊成兩位顯示

         alert(getYear()+"年"+mouth+"月"+getDate()+"日 星期" +getDay());

}

5).所有內建對象都有的prototype屬性

返回物件類型原型的引用，也就是說返回對象的引用，這個屬性的用途在於，可以通過返回對象引用的形式，給該對象添加新的屬性和方法。

代碼：

function getMax()

{

         var max = this[0];

         for(var i=0;x<this.length;x++)

         {

                   if(this[x]>max)

                            max=this[x];

         }

         return max;

}

 

Array.prototype.getZuiDa =getMax;//getMax為定義好的方法，這樣就給Array對象增加了新的方法，方法名為getZuiDa

var arr={1,23,8,9};

var x=arr.getZuiDa();//由於前面增加了新的方法，所以定義的數組對象都可以使用新增加的方法

alert(x);

 

arr.sort();//排序

for(y in arr)

{

         alert(arr[y]);

}

 

Web前端之Javascript詳解20180330