Web技術基礎第一章

第1章Javascript基礎

Javascript是一種小型的，輕量級的，面向對象的，跨平臺的腳本語言，是目前最流行的客戶端編程語言

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

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

Javascript

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

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

Object

Model)和DOM(DocumentObject

Model)和瀏覽器事件模型

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

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

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

Erich開發(fā)的，是NetScape

Navigator

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

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

1997年，Javascript

1.1提交給ECMA(European

Computer

Manufacturer’s

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

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

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

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

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

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

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

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

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

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

在雙引號中使用單引號或在單引號中使用雙引號時不需用轉義

在雙引號中使用雙引號或單引號中使用單引號時需用轉義例如：”The

boy

is

name‘John’.”“The

boy

is

name\”John\”.

”\b

//退格

\f

//換頁 \n

//換行

\r

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

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

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

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

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

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

//right

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

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

name=new

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

name=new

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

name=new

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

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

arr=new

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

可以用delete刪除數組中的元素，如果輸出被刪除的元素，則顯示undefined數組嵌套不支持多維數組，但支持嵌套 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ū)分大小寫重復定義變量時，后面的覆蓋前面的

在函數之外定義的變量為全局變量，在函數內省略var定義的變量也是全局變量

當函數中定義的局部變量與全局變量重名時，局部變量覆蓋全局變量數據類型轉換

Javascript是弱數據類型語言，可以根據賦值的類型確定數據類型表達式中自動實現數據類型轉換

布爾型轉換：數值0或NaN為false,字符串空串為false,undefined,null為false,布爾值true轉換為數值時，false為0，轉換為字符串是為”true”和”false”

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

值，則返回NaN.函

數定義：function

function_name(參數列表）{

codesreturn;

}

調用函數時，如果實參數的個數少于形參數個數時，缺少的用undefined代替，如果多于形參數的個數，則忽略

參數可以通過arguments屬性訪問。函數定義中，關鍵字arguments代表一個與當前函數對象對應的數組對象型屬性，實參列表中每個參數是arguments的一個元素，定義函數時可以不制定參數名稱，而在調用時用arguments訪問調用時指定的各個參數函

數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);函

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

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

code;

}changeName(arrName,newName);函

數

不支持函數重載，即如果定義了兩個名字相同的函數，則后面的覆蓋前面的。函數作為數據使用： 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);匿

名

函

數

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

obj=new

object;obj.func=function(num)

{

returnnum*num*num;}var

n=obj.func(20);函數作為函數的參數函數作為函數的參數<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);函數作為函數的參數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;

}函數作為函數的參數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;

}函數作為函數的參數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>函數對象的屬性與方法

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

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

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

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

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]

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

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

getsum.sum=0;for(var

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

return

getsum.sum;

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

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

hello(theName){

=theName;hello.welcome=function(){

alert(“welcome:”+);

};hello.bye=function()

{

alert(“Bye!”);

};

}hello(“xiao”);hello.welcome();函數對象的屬性與方法<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);函數對象的屬性與方法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>嵌套函數<script

language="Javascript">function

dealNum(){var

number_arr

=

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

max

=

number_arr[0];for(var

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

<

num