Web技術(shù)基礎(chǔ)第一章

第1章Javascript基礎(chǔ)

Javascript是一種小型的，輕量級的，面向?qū)ο蟮?，跨平臺的腳本語言，是目前最流行的客戶端編程語言

Javascript的作用是表單有效性的驗證、動態(tài)顯示內(nèi)容、動態(tài)改變文本格式、動態(tài)改變元素位置等

Javascript是一種解釋性的語言，是HTML網(wǎng)頁的一部分存在，隨著網(wǎng)頁內(nèi)容的豐富，功能強大，基于瀏覽器的應(yīng)用已經(jīng)成為趨勢。Javascript能做什么表單數(shù)據(jù)驗證動態(tài)HTML用戶交互數(shù)據(jù)綁定少量數(shù)據(jù)查找Ajax核心技術(shù)（Asynchronous

Javascript

+XML)Javascript如何實現(xiàn)動態(tài)效果

要實現(xiàn)動態(tài)效果，需要訪問和控制瀏覽器部件和頁面文檔中元素的途徑，使Javascript能夠訪問和控制它們，需要使用BOM(Browser

Object

Model)和DOM(DocumentObject

Model)和瀏覽器事件模型

BOM由一組對象組成，它們提供了訪問瀏覽器各種功能部件的途徑，例如瀏覽器窗口本身，瀏覽器歷史等

DOM創(chuàng)建了一組按順序、層次訪問文檔中各種元素的結(jié)構(gòu)化方法。在DOM中，每個元素都成為Javascript可以訪問的對象，既可以讀，也可以改變屬性值Javascript的歷史和發(fā)展

Javascript最初稱為Livescript語言，是由NetScape公司的Brendan

Erich開發(fā)的，是NetScape

Navigator

2.0腳本語言，為了推廣它，用了流行語言Java.

Microsoft推出IE,由于沒有授權(quán)，微軟公司的支持的腳本是Jscript,實際是Javascript的克隆

1997年，Javascript

1.1提交給ECMA(European

Computer

Manufacturer’s

Association),ECMA專門成立第39技術(shù)委員會來制定Javascript標準，并于1997年6月發(fā)表了第一個正式規(guī)范ECMA-262，由于授權(quán)問題，將其命名為ECMAscript.

ECMA網(wǎng)站：http://www.ecma-/publications/standards/Standard.htJavascript與ECMAscriptECMAscript只是一種語言規(guī)范，描述了腳本語言的語法、類型、屬性、方法和對象等內(nèi)容，而Javascript則是實現(xiàn)

Javascript不是唯一實現(xiàn)ECMAscript規(guī)范的語言，F(xiàn)lash中使用的Actionscript也是ECMAscript的一種實現(xiàn)ECMAscript與瀏覽器無關(guān)Javascript語言的特點安全性：

Javascript是一種安全性高的語言，它只能通過瀏覽器實現(xiàn)網(wǎng)絡(luò)的訪問和動態(tài)交互，可以有效地防止通過訪問本地硬盤或者將數(shù)據(jù)存入到服務(wù)器，而對網(wǎng)絡(luò)文檔或者重要數(shù)據(jù)進行不正當?shù)牟僮?。Javascript語言的特點易用性：

Javascript是一種腳本的編程語言，沒有嚴格的數(shù)據(jù)類型，同時是采用小段程序的編寫方式來實現(xiàn)編程的。Javascript語言的特點動態(tài)交互性：

在HTML中嵌入Javascript小程序后，提高了網(wǎng)頁的動態(tài)性。Javascript可以直接對用戶提交的信息在客戶端做出回應(yīng)。Javascript的出現(xiàn)使用戶與信息之間不再是一種瀏覽與顯示的關(guān)系，而是一種實時、動態(tài)、可交互式的關(guān)系。Javascript語言的特點跨平臺性：

它的運行環(huán)境與操作系統(tǒng)沒有關(guān)系，它是一種依賴瀏覽器本身運行的編程語言，只要安裝了支持Javascript瀏覽器，并且能正常運行瀏覽器的電腦，就可以正確地執(zhí)行

Javascript程序。Javascript常用元素Javascript程序Javascript程序網(wǎng)頁效果數(shù)據(jù)類型基本類型：數(shù)值、字符串、布爾、未定義和空復(fù)合型：數(shù)組、對象和函數(shù)數(shù)值型

數(shù)值型包括整數(shù)和浮點數(shù)，所有的數(shù)均被作為

64位的浮點數(shù)處理。數(shù)值可以用十進制或十六進制表示（0x)特殊數(shù)據(jù)NaN,表示不是數(shù)字字符串型由單引號或雙引號括起來的字符串

在雙引號中使用單引號或在單引號中使用雙引號時不需用轉(zhuǎn)義

在雙引號中使用雙引號或單引號中使用單引號時需用轉(zhuǎn)義例如：”The

boy

is

name‘John’.”“The

boy

is

name\”John\”.

”\b

//退格

\f

//換頁 \n

//換行

\r

//回車\’//單引號/”//雙引號\\//\\x

XX//十六進制數(shù)表示的符號\uXXXX//四位十六進制表示的二進制字符布爾型、undefineed和null兩個可取值：true和false，不區(qū)分大小寫

當一個對象的屬性不存在或變量定義后從未賦值，則返回undefined

不能通過比較來判斷是否變量是undefined,只能通過字符串來比較例如：if(a==undefined)

//errorif(typeof(a)==undefined)

//errorif(typeof(a)=“undefined”)

//right

null是一個值,表示該變量沒有保存有效的數(shù)值、字符串、布爾值、數(shù)組或?qū)ο?，可以用其清除變量的?nèi)容數(shù)組不要求數(shù)組類型相同數(shù)組長度可以動態(tài)變化

不支持多維數(shù)組，但支持數(shù)組嵌套，即數(shù)組中的元素可以是數(shù)組數(shù)組定義一、通過Array構(gòu)造函數(shù)定義var

name=new

Array(num);name[0]=元素1；name[1]=元素2；var

name=new

Array();//個數(shù)由賦值個數(shù)決定(3)var

name=new

Array(元素1，元素2，…..)二、直接賦值var

name=[元素1，元素2，….];數(shù)組元素與長度數(shù)組中元素類型可以不同長度可以動態(tài)變化var

arr=new

Array(3);可以賦值的個數(shù)超過3個

可以用delete刪除數(shù)組中的元素，如果輸出被刪除的元素，則顯示undefined數(shù)組嵌套不支持多維數(shù)組，但支持嵌套 var

arr=new

Array(3); arr[0]=[‘xiao’,3,45]; arr[1]=4;arr[2]=“hi”;document.writer(arr[0][0]);var

arr=[

[‘xiao’,3,45],[4,5,6],“hi”];嵌套可以是多層的不支持類似于c的定義與賦值變

量使用var定義一次可以定義一個或幾個變量變量名必須以字母或下劃線開始區(qū)分大小寫重復(fù)定義變量時，后面的覆蓋前面的

在函數(shù)之外定義的變量為全局變量，在函數(shù)內(nèi)省略var定義的變量也是全局變量

當函數(shù)中定義的局部變量與全局變量重名時，局部變量覆蓋全局變量數(shù)據(jù)類型轉(zhuǎn)換

Javascript是弱數(shù)據(jù)類型語言，可以根據(jù)賦值的類型確定數(shù)據(jù)類型表達式中自動實現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換

布爾型轉(zhuǎn)換：數(shù)值0或NaN為false,字符串空串為false,undefined,null為false,布爾值true轉(zhuǎn)換為數(shù)值時，false為0，轉(zhuǎn)換為字符串是為”true”和”false”

ParseInt()和ParseFloat()強制將字符串轉(zhuǎn)換成數(shù)值，左至右提取數(shù)值，遇到非數(shù)值為止。如果全部是非數(shù)

值，則返回NaN.函

數(shù)定義：function

function_name(參數(shù)列表）{

codesreturn;

}

調(diào)用函數(shù)時，如果實參數(shù)的個數(shù)少于形參數(shù)個數(shù)時，缺少的用undefined代替，如果多于形參數(shù)的個數(shù)，則忽略

參數(shù)可以通過arguments屬性訪問。函數(shù)定義中，關(guān)鍵字arguments代表一個與當前函數(shù)對象對應(yīng)的數(shù)組對象型屬性，實參列表中每個參數(shù)是arguments的一個元素，定義函數(shù)時可以不制定參數(shù)名稱，而在調(diào)用時用arguments訪問調(diào)用時指定的各個參數(shù)函

數(shù)function

showInfo(){

if(arguments.length==1)documesnt.write(“您好！”+arguments[0]);if(arguments.length==2)document.write(showInfo.arguemts[0]+”今年”+showInfo.arguments[1]+”歲”);}

showInfo(“小黑“);showInfo(“小黑“,23);函

數(shù)在調(diào)用函數(shù)時，如果將基本數(shù)據(jù)類型變量作為函數(shù)參數(shù)，直接將值傳遞給函數(shù)，函數(shù)內(nèi)的操作對原變量沒有影響。如果將復(fù)合類型變量作為函數(shù)參數(shù)時，傳遞給函數(shù)的是存儲地址，將改變函數(shù)外的原變量值例：var

arrName={“Li”,”Zhang”,”Wang”};newName=“He”;functionchangeName(arrA,name){

code;

}changeName(arrName,newName);函

數(shù)

不支持函數(shù)重載，即如果定義了兩個名字相同的函數(shù)，則后面的覆蓋前面的。函數(shù)作為數(shù)據(jù)使用： function

getCube(num1){

return

num1*num1*num1；}var

a=getCube;var

b=a(20);var

arr=Array();arr[0]=getCube;var

c=arr[0](30);匿

名

函

數(shù)

當函數(shù)被作為數(shù)據(jù)使用時，函數(shù)定義可以直接被指定給變量，數(shù)組元素，對象屬性等，而不需要指定名稱var

obj=new

object;obj.func=function(num)

{

returnnum*num*num;}var

n=obj.func(20);函數(shù)作為函數(shù)的參數(shù)函數(shù)作為函數(shù)的參數(shù)<script

language="Javascript">function

getCube(num1){ return

num1*num1*num1;}var

a

=

getCube;var

b

=

a(20);var

arr

=

Array();arr[0]

=

getCube;var

c

=

arr[0](30);document.write(b+","+c);var

obj=new

Object; //定義一個對象obj.func

=

function(num)

{return

num*num*num;};var

n

=obj.func(20);document.write("<br>"+n);函數(shù)作為函數(shù)的參數(shù)function

getMax(number_arr){var

max

=

number_arr[0];for(var

i=0;i<number_arr.length;i++){ if(max

<

number_arr[i])max

=

number_arr[i];

}return

max;

}function

getMin(number_arr){var

min

=

number_arr[0];for(var

i=0;i<number_arr.length;i++){ if(min

>

number_arr[i])min

=

number_arr[i];

}return

min;

}函數(shù)作為函數(shù)的參數(shù)function

getSum(number_arr){var

sum

=

0;for(var

i=0;i<number_arr.length;i++){

sum

+=

number_arr[i];

}return

sum;

}function

getAvg(number_arr){var

sum

=

0;for(var

i=0;i<number_arr.length;i++){ sum

+=

number_arr[i];

}return

sum/number_arr.length;

}函數(shù)作為函數(shù)的參數(shù)function

getResult(func){

var number_arr

=

new

Array();for(var

i=1;i<arguments.length;i++)number_arr[i-1]

=

arguments[i];return

func(number_arr);

}var

max

=

getResult(getMax,3,4.5,6,1,23);var

min

=

getResult(getMin,3,4.5,6,1,23);var

sum

=

getResult(getSum,3,4.5,6,1,23);var

avg

=

getResult(getAvg,3,4.5,6,1,23);document.write("max:"+max);document.write("min:"+min);document.write("sum:"+sum);document.write("avg:"+avg);</script>函數(shù)對象的屬性與方法

函數(shù)對象的屬性有argument,它表示函數(shù)所接受的參數(shù)，argument.length表示函數(shù)實際接受的參數(shù)個數(shù)，length表示函數(shù)定義時參數(shù)的個數(shù)

Javascript函數(shù)對象擁有一些通用的內(nèi)建方法，如value()和toString(),它們功能相同，返回函數(shù)定義代碼function

showInfo(name,age){document.write(name+”今年”+age+”歲“）；

}alert(showInfo.toString)());函數(shù)對象的屬性與方法call()與apply()使函數(shù)象調(diào)用其他對象的方法一樣

var

obj=new

object();showInfo.call(obj,”xiao”,24);上述代碼等同于：var

obj=new

Object();obj.func=showInfo;obj.func(“xiao”,24);showInfo.apply(obj,[“xiao”,24]

);函數(shù)對象的屬性與方法自定義屬性和方法function

getsum()//定義一個函數(shù)對象{

getsum.sum=0;for(var

i=0;i<arguments.length;i++)getsum.sum+=arguments[i];

return

getsum.sum;

}getsum(4,5,6);//函數(shù)必須先被調(diào)用，產(chǎn)生實體alter(“sum”+getsum.sum);//才能對函數(shù)屬性調(diào)用函數(shù)對象的屬性與方法

當將函數(shù)定義賦予函數(shù)對象的屬性后，便為函數(shù)定義了方法function

hello(theName){

=theName;hello.welcome=function(){

alert(“welcome:”+);

};hello.bye=function()

{

alert(“Bye!”);

};

}hello(“xiao”);hello.welcome();函數(shù)對象的屬性與方法<script

language="Javascript">function

showInfo(name,age){document.write(name+"今年"+age+"歲");}

alert(showInfo.toString());var

obj=new

Object;showInfo.call(obj,"小軒",24);function

getSum(){getSum.sum

=

0;for(var

i=0;i<arguments.length;i++)getSum.sum

+=

arguments[i];return

getSum.sum;

}getSum(4,5,6);alert("sum:"+getSum.sum);函數(shù)對象的屬性與方法function

getAcc(){for(var

i=0;i<arguments.length;i++)getAcc.sum

+=

arguments[i];return

getAcc.sum;

}getAcc.sum=0;//靜態(tài)屬性getAcc.show

=

function(){alert("The

sum

is:"+getAcc.sum)};getAcc.show();getAcc(2,3);

getAcc(4,5,6);

getAcc(8);alert("sum:"+getAcc.sum);function

hello(theName){

=

theName;hello.welcome

=

function()

{alert("welcome

to

ourweb:"+);

};hello.bye=function(){alert("Bye!");};}

hello("小軒");hello.welcome();</script>嵌套函數(shù)<script

language="Javascript">function

dealNum(){var

number_arr

=

arguments;//這里省略var關(guān)鍵字,定義全局變量getMax=function()/*求最大值,getMax是全局變量*/{ var

max

=

number_arr[0];for(var

i=0;i<number_arr.length;i++){ if(max

<

num