javascript基礎入門教程_第1頁
javascript基礎入門教程_第2頁
javascript基礎入門教程_第3頁
javascript基礎入門教程_第4頁
javascript基礎入門教程_第5頁
已閱讀5頁，還剩114頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

JavaScript主要內容了解JavaScriptJavaScript入門語言基礎內置對象對象與DOM圖像處理框架表單與事件處理一、了解JavaScript

1.了解JavaScript2.JavaScript與Java

3.JavaScript與Java不同點

4.JavaScript工作流程

5.JavaScript可以做什么

6.JavaScript不可以做什么了解JavaScript是一種基于對象和事件驅動并具有安全性的解釋性語言，其目的就是增強Web客戶交互。彌補了HTML的缺陷。頁面標準行為表示CSS結構HTML……JavaScript與Java處于兩家不同的公司，屬于兩種完全不同的產品。Java是SUN公司推出的新一代面向對象的程序設計語言，特別適合Internet應用程序開發，前生是Oak語言。JavaScript是Netscape公司的產品，是一種可嵌入到WEB當中的基于對象和事件驅動的解釋性語言，前生是LiveScript。JavaScript與Java不同點基于對象和面向對象解釋和編譯強變量和弱變量代碼格式不一樣嵌入方式不一樣靜態聯編和動態聯編

（對象引用在運行時進行檢查，對象引用必須在編譯時的進行）JavaScript工作流程請求ClientWebServerHtml文檔………….ISAPI執行結果+html形成模板文本JavaScirpt可以做什么使網頁更具有交互性，給用戶提供更好，更令人興奮的體驗。確保用戶在表單中輸入有效的信息，可以節省你的業務開支。即時創建HTML頁面。還可以處理表單，設置cookie，創建基于Web的應用程序。JavaScirpt不可以做什么不允許讀寫客戶機器上的文件。不允許寫服務器上的文件。不能關閉不是由它打開的窗口。不能從來自另一個服務器的已經打開的網頁中讀取信息。二.JavaScript入門1.腳本寫在哪里？2.第一個JavaScript程序3.在腳本中寫注釋4.彈出對話框5.關閉一個瀏覽器窗口

腳本寫在哪里？

<HTML><HEAD>……...</HEAD><BOYD>……...</BODY></HTML>HTML文檔<SCRPT>functionHELLO(){………….}</SCRIPT>src=…第一個JavaScript程序<html><head><scriptlanguage="javascript">functionAge(){document.write(“Iam20!");}</script></head><bodyonload="Age()"></body></html>在腳本中寫注釋兩種注釋示例/*…*/與//…/*ThisisanexampleofalongJavaScriptcomment.Notethecharactersatthebeginningendingofthecomment.*/FunctionEmg(){//ThisiswriteMessage.……}彈出對話框三種對話框

<script>functionDialogBox(){}</script>//alert(‘welcome!’);一個按鈕//confirm(‘canyouspeakenglish?’);兩個按鈕prompt(“howoldareyou?”,”23”);有默認回答，兩個按鈕關閉一個瀏覽器窗口兩種關閉方式標簽關閉與按鈕關閉<ahref="javascript:self.close()">關閉窗口</a><script>functionNVGClose(){window.close();}</script><inputtype="button"value="關閉"onclick=“NVGClose()">三.語言基礎1.基本數據類型

——常量2.基本數據類型——變量3.轉義字符4.表達式5.運算符6.控制語句7.JavaScript函數8.錯誤處理基本數據類型

——常量

整型只能儲存整數。可以是正整數、0、負整數，可以是十進制、八進制、十六進制。八進制數的表示方法是在數字前加“0”，如“0123”表示八進制數“123”。十六進制則是加“0x”：“0xEF”表示十六進制數“EF”。浮點型即“實型”，能儲存小數。有資料顯示，某些平臺對浮點型變量的支持不穩定。沒有需要就不要用浮點型。字符串型是用引號“”“”、“‘’”包起來的零個至多個字符，而且單雙引號可嵌套使用。布爾型常用于判斷，只有兩個值可選：true（表“真”）和false（表“假”）。true和false是JavaScript的保留字。它們屬于“常數”。基本數據類型——變量變量的命名

變量的命名有以下要求：

1.只包含字母、數字和/或下劃線；

2.要以字母開頭；

3.不能太長；

4.不能使用JavaScript中的關鍵字作為變量；變量是區分大小寫的，例如，variable和Variable是兩個不同的變量變量需要聲明沒有聲明的變量不能使用，否則會出錯：“未定義”。聲明變量可以用：

var<變量>[=<值>]變量作用域。全局變量是定義在所有函數體之外，其作用范圍是整個函數；而局部變量是定義在函數體之內，只對其該函數是可見的，而對其它函數則是不可見的。

轉義字符由于一些字符在屏幕上不能顯示，或者JavaScript語法上已經有了特殊用途，在要用這些字符時，就要使用“轉義字符”。

轉義字符用斜杠“\”開頭：\‘

單引號、\“

雙引號、\n換行符、\r回車。于是，使用轉義字符，就可以做到引號多重嵌套：’Micro說：”這里是\“JavaScript教程\”

。

表達式表達式在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常又叫稱一個叫表達式來完成，可以說它是變量、常量、布爾及運算符的集合，因此表達式可以分為算術表述式、字串表達式、賦值表達式以及布爾表達式等。

varm=1+9;varm=“hello”+”world”;varm=100;varm=false;運算符

1算術運算符

JavaScript中的算術運算符有單目運算符和雙目運算符。

雙目運算符：

+（加）、-（減）、*（乘）、/（除）、%（取模）、|（按位或）、&(按位與)、<<（左移）、>>（右移）、>>>（右移，零填充）。

單目運算符：

-（取反）、~（取補）、++（遞加1）、--（遞減1）。2比較運算符

比較運算符它的基本操作過程是，首先對它的操作數進行比較，然后再返回一個true或False值，有８個比較運算符:

<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。

3布爾邏輯運算符

!（取反)、&=（與之后賦值）、&（邏輯與）、|=（或之后賦值）、|（邏輯或）、^=（異或之后賦值）、^（邏輯異或）、?:（三目操作符）、||（或）、==(等于)、|=(不等于)。控制語句第一種是選擇結構1.單一選擇結構（if）2.二路選擇結構（if/else）3.內聯三元運算符?:4.多路選擇結構（switch）第二種類型的程序控制結構是循環結構。1.由計數器控制的循環（for）2.在循環的開頭測試表達式（while）3.在循環的末尾測試表達式（do/while）4.對對象的每個屬性都進行操作（for/in）條件語句基本格式

if（表述式）

語句段１；

else

語句段２；

功能：若表達式為true，則執行語句段１；否則執行語句段２。

三元運算符基本格式條件表達式“?<語句1>:<語句2>”，當<條件>為真時執行<語句1>，否則執行<語句2>

eg：varm=5;varn=3;varbol=(m>n)?m:n;多目選擇基本格式——解決多種條件判斷

switch(e){

caser1:（注意：冒號）

...

break;

caser2:

...

break;

[default:

...]

}循環語句for基本格式

for（初始化；條件；增量）

{語句集；}

功能：實現條件循環，當條件成立時，執行語句集，否則跳出循環體

循環語句while基本格式

while（條件）

語句集；

該語句與For語句一樣，當條件為真時，重復循環，否則退出循環。*break和continue語句

與C++語言相同，使用break語句使得循環從For或while中跳出，continue使得跳過循環內剩余的語句而進入下一次循環。

do-while循環基本格式

do{……}while(條件);

功能：do...while循環與while循環相似，在循環的末尾檢查條件，它總是至少運行一次。for…in循環JScript提供了一種特別的循環方式來遍歷一個對象的所有用戶定義的屬性或者一個數組的所有元素。for...in循環中的循環計數器是一個字符串，而不是數字。它包含當前屬性的名稱或者當前數組元素的下標。

//創建具有某些屬性的對象

varmyObject=newObject(); myO="James"; myObject.age="22"; myObject.phone="5551234"; //枚舉（循環）對象的所有屬性

for(propinmyObject){//顯示"Theproperty'name'isJames"，等等。

window.alert("Theproperty'"+prop+"'is"+myObject[prop]);}JavaScript函數Function函數名（參數,變元）{

函數體;.

Return表達式;

}

說明：

當調用函數時,所用變量或字面量均可作為變元傳遞。

函數由關鍵字Function定義。

函數名：定義自己函數的名字。

參數表，是傳遞給函數使用或操作的值，其值可以是常量，變量或其它表達式。

通過指定函數名（實參）來調用一個函數。

必須使用Return將值返回。

函數名對大小寫是敏感的JavaScript函數在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個或幾個。那么怎樣才能確定參數變量的個數呢？在JavaScript中可通過arguments.Length來檢查參數的個數。

Functionfunction_Name(exp1,exp2,exp3,exp4){ Number=function_Name.arguments.length; if(Number>1）

document.wrile(exp2); if(Number>2) document.write(exp3); if(Number>3) document.write(exp4); }錯誤處理基本語句try/throw/catchtry{

語句塊…thrownewError(“…”);}catch(errMsg){alert(errMsg.message);}eg:functionAge(){try{ varm="age";varn=20;document.write(parseInt(m)+n);//拋出語句

thrownewError("notavalidnumber"); }catch(errMsg){alert(errMsg.message);}}四、內置對象1.對象化編程2.對象的基本知識3.內置對象4.String字符串5.Array數組6.Math7.Date日期8.全局對象9.自定義構造函數10.自定義對象11.expando屬性12使用原型對象13.數組對象14.With語句對象化編程JavaScript語言是基于對象的（Object-Based），而不是面向對象的（object-oriented）。之所以說它是一門基于對象的語言，主要是因為它沒有提供象抽象、繼承、重載等有關面向對象語言的許多功能。而是把其它語言所創建的復雜對象統一起來，從而形成一個非常強大的對象系統。雖然JavaScript語言是一門基于對象的，但它還是具有一些面向對象的基本特征。它可以根據需要創建自己的對象，從而進一步擴大JavaScript的應用范圍，增強編寫功能強大的Web文文件。對象的基本知識對象是可以從JavaScript“勢力范圍”中劃分出來的一小塊，可以是一段文字、一幅圖片、一個表單（Form）等等。每個對象有它自己的屬性、方法和事件。對象的屬性是反映該對象某些特定的性質的，例如：字符串的長度、圖像的長寬、文字框（Textbox）里的文字等等；對象的方法能對該對象做一些事情，例如，表單的“提交”(Submit)，窗口的“滾動”(Scrolling)等等；而對象的事件就能響應發生在對象上的事情，例如提交表單產生表單的“提交事件”，點擊連接產生的“點擊事件”。不是所有的對象都有以上三個性質，有些沒有事件，有些只有屬性。引用對象的任一“性質”用“<對象名>.<性質名>”這種方法。內置對象MicrosoftJscript提供了11個內部（或“內置”）對象。它們是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error以及String對象。每一個對象有相關的方法和屬性，這在語言參考中有詳細的描述。String字符串屬性length

用法：<字符串對象>.length；返回該字符串的長度。方法charAt()

用法：<字符串對象>.charAt(<位置>)；返回該字符串位于第<位置>位的單個字符。注意：字符串中的一個字符是第0位的，第二個才是第1位的，最后一個字符是第length-1位的。

charCodeAt()

用法：<字符串對象>.charCodeAt(<位置>)；返回該字符串位于第<位置>位的單個字符的ASCII碼。

fromCharCode()

用法：String.fromCharCode(a,b,c...)；返回一個字符串，該字符串每個字符的ASCII碼由a,b,c...等來確定。

String字符串indexOf()

用法：<字符串對象>.indexOf(<另一個字符串對象>[,<起始位置>])；該方法從<字符串對象>中查找<另一個字符串對象>（如果給出<起始位置>就忽略之前的位置），如果找到了，就返回它的位置，沒有找到就返回“-1”。所有的“位置”都是從零開始的。

lastIndexOf()

用法：<字符串對象>.lastIndexOf(<另一個字符串對象>[,<起始位置>])；跟indexOf()相似，不過是從后邊開始找。

split()

用法：<字符串對象>.split(<分隔符字符>)；返回一個數組，該數組是從<字符串對象>中分離開來的，<分隔符字符>決定了分離的地方，它本身不會包含在所返回的數組中。例如：'1&2&345&678'.split('&')返回數組：1,2,345,678。關于數組，我們等一下就討論。

String字符串substring()

用法：<字符串對象>.substring(<始>[,<終>])；返回原字符串的子字符串，該字符串是原字符串從<始>位置到<終>位置的前一位置的一段。<終>-<始>=返回字符串的長度（length）。如果沒有指定<終>或指定得超過字符串長度，則子字符串從<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串，則返回空字符串。

substr()

用法：<字符串對象>.substr(<始>[,<長>])；返回原字符串的子字符串，該字符串是原字符串從<始>位置開始，長度為<長>的一段。如果沒有指定<長>或指定得超過字符串長度，則子字符串從<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串，則返回空字符串。

toLowerCase()

用法：<字符串對象>.toLowerCase()；返回把原字符串所有大寫字母都變成小寫的字符串。

toUpperCase()

用法：<字符串對象>.toUpperCase()；返回把原字符串所有小寫字母都變成大寫的字符串。Array數組數組的定義方法：var<數組名>=newArray();這樣就定義了一個空數組。以后要添加數組元素，就用：<數組名>[<下標>]=...;注意這里的方括號不是“可以省略”的意思，數組的下標表示方法就是用方括號括起來。如果想在定義數組的時候直接初始化數據，請用：var<數組名>=newArray(<元素1>,<元素2>,<元素3>...);Array數組例如，varmyArray=newArray(1,4.5,‘Hi’);定義了一個數組myArray，里邊的元素是：myArray[0]==1;myArray[1]==4.5;myArray[2]==‘Hi’。但是，如果元素列表中只有一個元素，而這個元素又是一個正整數的話，這將定義一個包含<正整數>個空元素的數組。注意：JavaScript只有一維數組！千萬不要用“Array(3,4)”這種愚蠢的方法來定義4x5的二維數組，或者用“myArray[2,3]”這種方法來返回“二維數組”中的元素。任意“myArray[...,3]”這種形式的調用其實只返回了“myArray[3]”。要使用多維數組，請用這種虛擬法：varmyArray=newArray(newArray(),newArray(),newArray(),...);其實這是一個一維數組，里邊的每一個元素又是一個數組。調用這個“二維數組”的元素時：myArray[2][3]=...;Array數組屬性length

用法：<數組對象>.length；返回：數組的長度，即數組里有多少個元素。它等于數組里最后一個元素的下標加一。所以，想添加一個元素，只需要：myArray[myArray.length]=...。方法join()

用法：<數組對象>.join(<分隔符>)；返回一個字符串，該字符串把數組中的各個元素串起來，用<分隔符>置于元素與元素之間。這個方法不影響數組原本的內容。

reverse()

用法：<數組對象>.reverse()；使數組中的元素順序反過來。如果對數組[1,2,3]使用這個方法，它將使數組變成：[3,2,1]。

slice()

用法：<數組對象>.slice(<始>[,<終>])；返回一個數組，該數組是原數組的子集，始于<始>，終于<終>。如果不給出<終>，則子集一直取到原數組的結尾。

sort()

用法：<數組對象>.sort([<方法函數>])；使數組中的元素按照一定的順序排列。如果不指定<方法函數>，則按字母順序排列。在這種情況下，80是比9排得前的。如果指定<方法函數>，則按<方法函數>所指定的排序方法排序。<方法函數>比較難講述，這里只將一些有用的<方法函數>介紹給大家。mathMath對象，提供對數據的數學計算。用法為“Math.<名>”這種格式。屬性E返回常數e(2.718281828...)。LN2返回2的自然對數(ln2)。LN10返回10的自然對數(ln10)。LOG2E返回以2為低的e的對數(log2e)。LOG10E返回以10為低的e的對數(log10e)。PI返回π（3.1415926535...)。SQRT1_2返回1/2的平方根。SQRT2返回2的平方根。math方法abs(x)返回x的絕對值。

acos(x)返回x的反余弦值（余弦值等于x的角度），用弧度表示。

asin(x)返回x的反正弦值。

atan(x)返回x的反正切值。

atan2(x,y)返回復平面內點(x,y)對應的復數的幅角，用弧度表示，其值在-π到π之間。

ceil(x)返回大于等于x的最小整數。

cos(x)返回x的余弦。

exp(x)返回e的x次冪(ex)。

floor(x)返回小于等于x的最大整數。

mathlog(x)返回x的自然對數(lnx)。

max(a,b)返回a,b中較大的數。

min(a,b)返回a,b中較小的數。

pow(n,m)返回n的m次冪(nm)。

random()返回大于0小于1的一個隨機數。

round(x)返回x四舍五入后的值。

sin(x)返回x的正弦。

sqrt(x)返回x的平方根。

tan(x)返回x的正切。

Date日期這個對象可以儲存任意一個日期，從0001年到9999年，并且可以精確到毫秒數（1/1000秒）。在內部，日期對象是一個整數，它是從1970年1月1日零時正開始計算到日期對象所指的日期的毫秒數。如果所指日期比1970年早，則它是一個負數。所有日期時間，如果不指定時區，都采用“UTC”（世界時）時區，它與“GMT”（格林威治時間）在數值上是一樣的。定義一個日期對象：

vard=newDate();

這個方法使d成為日期對象，并且已有初始值：當前時間。Date日期如果要自定初始值，可以用：

vard=newDate(99,10,1);

//99年10月1日

vard=newDate('Oct1,1999');//99年10月1日等等方法。

方法以下有很多“g/set[UTC]XXX”這樣的方法，它表示既有“getXXX”方法，又有“setXXX”方法。“get”是獲得某個數值，而“set”是設定某個數值。如果帶有“UTC”字母，則表示獲得/設定的數值是基于UTC時間的，沒有則表示基于本地時間或瀏覽期默認時間的。Date日期g/set[UTC]FullYear()

返回/設置年份，用四位數表示。如果使用“x.set[UTC]FullYear(99)”，則年份被設定為0099年。g/set[UTC]Year()返回/設置年份，用兩位數表示。設定的時候瀏覽器自動加上“19”開頭，故使用“x.set[UTC]Year(00)”把年份設定為1900年。g/set[UTC]Month()返回/設置月份。g/set[UTC]Date()返回/設置日期。g/set[UTC]Day()返回/設置星期，0表示星期天。g/set[UTC]Hours()返回/設置小時數，24小時制。g/set[UTC]Minutes()返回/設置分鐘數。g/set[UTC]Seconds()返回/設置秒鐘數。g/set[UTC]Milliseconds()返回/設置毫秒數。

Date日期g/setTime()

返回/設置時間，該時間就是日期對象的內部處理方法：從1970年1月1日零時正開始計算到日期對象所指的日期的毫秒數。如果要使某日期對象所指的時間推遲1小時，就用：“x.setTime(x.getTime()+60*60*1000);”（一小時60分，一分60秒，一秒1000毫秒）。getTimezoneOffset()

返回日期對象采用的時區與格林威治時間所差的分鐘數。在格林威治東方的市區，該值為負，例如：中國時區（GMT+0800）返回“-480”。toString()

返回一個字符串，描述日期對象所指的日期。這個字符串的格式類似于：“FriJul2115:43:46UTC+08002000”。toLocaleString()

返回一個字符串，描述日期對象所指的日期，用本地時間表示格式。如：“2000-07-2115:43:46”。toGMTString()

返回一個字符串，描述日期對象所指的日期，用GMT格式。toUTCString()

返回一個字符串，描述日期對象所指的日期，用UTC格式。parse()

用法：Date.parse(<日期對象>)；返回該日期對象的內部表達方式。全局對象

全局對象從不現形，它可以說是虛擬出來的，目的在于把全局函數“對象化”。在MicrosoftJScript語言參考中，它叫做“Global對象”，但是引用它的方法和屬性從來不用“Global.xxx”（況且這樣做會出錯），而直接用“xxx”。方法eval()

把括號內的字符串當作標準語句或表達式來運行。

isFinite()

如果括號內的數字是“有限”的（介于Number.MIN_VALUE和Number.MAX_VALUE之間）就返回true；否則返回false。

isNaN()

如果括號內的值是“NaN”則返回true否則返回false。

parseInt()

返回把括號內的內容轉換成整數之后的值。如果括號內是字符串，則字符串開頭的數字部分被轉換成整數，如果以字母開頭，則返回“NaN”。

全局對象parseFloat()

返回把括號內的字符串轉換成浮點數之后的值，字符串開頭的數字部分被轉換成浮點數，如果以字母開頭，則返回“NaN”。

toString()

用法：<對象>.toString()；把對象轉換成字符串。如果在括號中指定一個數值，則轉換過程中所有數值轉換成特定進制。

escape()

返回括號中的字符串經過編碼后的新字符串。該編碼應用于URL，也就是把空格寫成“%20”這種格式。“+”不被編碼，如果要“+”也被編碼，請用：escape('...',1)。

unescape()

是escape()的反過程。解編括號中字符串成為一般字符串。

自定義構造函數我們已經知道，Array()，Image()等構造函數能讓我們構造一個變量。其實我們自己也可以寫自己的構造函數。自定義構造函數也是用function。在function里邊用this來定義屬性。function<構造函數名>[(<參數>)]{

...

this.<屬性名>=<初始值>;

...

}然后，用new構造函數關鍵字來構造變量：var<變量名>=new<構造函數名>[(<參數>)];構造變量以后，<變量名>成為一個對象，它有它自己的屬性——用this在function里設定的屬性。自定義構造函數例如，下面的示例為pasta對象定義了構造函數。注意this關鍵字的使用，它指向當前對象。//pasta是有四個參數的構造器。functionpasta(grain,width,shape,hasEgg){this.grain=grain;//是用什么糧食做的？

this.width=width;//多寬？（數值）

this.shape=shape;//橫截面形狀？（字符串）

this.hasEgg=hasEgg;//是否加蛋黃？（boolean）

this.toString=pastaToString;//這里添加toString方法（如下定義）。

//注意在函數的名稱后沒有加圓括號；

//這不是一個函數調用，而是對函數自身的引用。}自定義構造函數//實際的用來顯示past對象內容的函數。functionpastaToString(){//返回對象的屬性。

return"Grain:"+this.grain+"\n"+"Width:"+this.width+"\n"+"Shape:"+this.shape+"\n"+"Egg?:"+Boolean(this.hasEgg);}自定義對象<script

language="javascript">

functionStudent(name){

this.name=name;

this.getName=getName;}

functiongetName(){

return

this.name;}

functionButton1_onclick(){

vars=newStudent("lijie",20,"asdad","13971212");

alert(s.getName());

alert(s.name);}</script>使用自己的對象定義了對象構造器后，用new運算符創建對象實例。varspaghetti=newpasta("wheat",0.2,"circle",true);//將調用toString()并顯示spaghetti對象的屬性。window.alert(spaghetti);expando屬性可以給對象實例添加屬性(expando屬性)以改變該實例，但是用相同的構造器生成的其他對象定義中并不包括這些屬性，而且除非你特意添加這些屬性那么在其他實例中并不顯示出來。spaghetti.color="palestraw";spaghetti.drycook=7;spaghetti.freshcook=0.5;varchowFun=newpasta("rice",3,"flat",false);//chowFun對象或其他現有的pasta對象//都沒有添加到spaghetti對象的三個新屬性。使用原型對象如果要將對象所有實例的附加屬性顯示出來，必須將它們添加到構造函數或構造器原型對象中。例如：將屬性‘foodgroup’加到pasta原型對象中，這樣pasta對象的所有實例都可以有該屬性，包括那些已經生成的實例。

totype.foodgroup="carbohydrates"現在spaghetti.foodgroup、chowFun.foodgroup，等等均包含值“carbohydrates”。使用原型對象例如，如果想要能夠刪除字符串的前后空格（與VBScript的Trim函數類似），就可以給String原型對象創建自己的方法。Stotype.trim=function(){//用正則表達式將前后空格用空字符串替代。

returnthis.replace(/(^\s*)|(\s*$)/g,"");}vars="leadingandtrailingspaces";//顯示"leadingandtrailingspaces(35)"window.alert(s+"("+s.length+")");//刪除前后空格s=s.trim();//顯示"leadingandtrailingspaces(27)"window.alert(s+"("+s.length+")");數組和對象通常，使用點運算符“.”訪問對象的屬性。例如，myObject.aProperty也可以用索引運算符“[]”訪問對象的屬性。在這里，是把對象看作一個關聯數組。關聯數組是一種數據結構，它可以動態地將任意的數據的值與任意的字符串相關聯。例如

myObject["notavalididentifier"]="Thisisthepropertyvalue"; myObject[100]="100";索引“[]”字符串文字能被作為數據處理在運行之前并不知道屬性名稱時，這個差異會有用（比如基于用戶輸入構造對象時）。要想從一個關聯數組提取所有的屬性，必須用for…in循環。數組和對象由于所有的數組也是對象，也支持expando屬性。請注意，雖然如此，添加的屬性并不以任何方式與length屬性相交互。例如：//三個元素的數組varmyArray=newArray(3);myArray[0]="Hello";myArray[1]=42;myArray[2]=newDate(2000,1,1);window.alert(myArray.length);//顯示數組的長度3myArray.expando="JScript!";//添加某些expando屬性myArray["anotherExpando"]="Windows";//仍然顯示3，因為兩個expando屬性，并不影響長度。window.alert(myArray.length);with語句為一個或一組語句指定默認對象。 用法：with(<對象>)<語句>;with語句通常用來縮短特定情形下必須寫的代碼量。在下面的例子中，請注意Math的重復使用：

x=Math.cos(3*Math.PI)+Math.sin(Math.LN10);

y=Math.tan(14*Math.E);當使用with語句時，代碼變得更短且更易讀：

with(Math){

x=cos(3*PI)+sin(LN10);

y=tan(14*E);

}五.對象與DOM1、宿主對象2、瀏覽器對象(Navigator)3、屏幕對象(screen)4、窗口對象(Windows)5、位置對象(Location)6、歷史對象(History)7、文檔對象(Document)8、文檔DOM9、DOM結構圖10、添加節點11、刪除節點12、插入節點13、替換節點宿主對象使用瀏覽器的內部對象系統（宿主對象）,可實現與HTML文檔進行交互。它的作用是將相關元素組織包裝起來，提供給程序設計人員使用，從而減輕編程人的勞動，提高設計Web頁面的能力。瀏覽器對象(Navigator)

提供有關瀏覽器的信息屏幕對象(screen)

反映了當前用戶的屏幕設置窗口對象(Windows) Window對象處于對象層次的最頂端，它提供了處理Navigator窗口的方法和屬性。位置對象(Location) Location對象提供了與當前打開的URL一起工作的方法和屬性，它是一個靜態的對象。歷史對象(History) History對象提供了與歷史清單有關的信息。文檔對象(Document) document對象包含了與文檔元素(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。瀏覽器對象(Navigator)屬性：appCodeName：返回瀏覽器的代碼名，IE返回MozillaappName：返回瀏覽器名，IE返回“MicrosoftInternetExplorer”appVersion：返回瀏覽器版本，包括版本號、語言、操作平臺等language：返回瀏覽器編譯語言platform：返回操作平臺Navigator對象的plugin屬性－以數組表示已安裝的外掛程序

description外掛程序模塊的描述

filename外掛程序模塊的文件名

length外掛程序模塊的個數

name外掛程序模塊的名稱瀏覽器對象(Navigator)Eg:<Script> varlen=navigator.plugins.length; with(document) { write("你的瀏覽器共支持"+len+"種外掛插件：<BR>"); write("<TABLEBORDER=0>") write("<CAPTION>外掛插件清單</CAPTION>") write("<TR><TH><TH>名稱<TH>描述<TH>文件名") for(vari=0;i<len;i++) write("<TR><TD>"+i+ "<TD>"+navigator.plugins[i].name+ "<TD>"+navigator.plugins[i].description+ "<TD>"+navigator.plugins[i].filename); }</Script>屏幕對象(screen)屬性screen對象－屏幕對象，描述屏幕的顯示及顏色屬性

availHeight屏幕區域的可用高度

availWidth屏幕區域的可用寬度

colorDepth顏色深度256/816/1632M/32 height屏幕區域的實際高度

width屏幕區域的實際寬度屏幕對象(screen)Eg：

<Script> if(screen.width<800||screen.colorDepth<8) { varmsg="本網站最佳瀏覽模式為800*600*256"; alert(msg); }</Script>窗口對象(Windows)屬性：

name：窗口名稱

status：改變狀態欄的信息

self：當前窗口

top：最頂端的框架頁

parent：窗口所屬的框架頁窗口對象(Windows)Eg：<Script> functioncfm() {

if(confirm("確定離開么?")) //關閉當前窗口,下面兩個方法都可以

//window.close(); self.close(); else returnfalse } </Script>窗口對象(Windows)window對象的open()方法：打開一個新窗口 參數：

alwaysLowered是否將窗口顯示的堆棧后推一層

alwaysRaised是否將窗口顯示的堆棧上推一層

dependent是否將該窗口與當前窗口產生依存關系

fullscreen是否滿屏顯示

directories是否顯示連接工具欄

location是否顯示網址工具欄

menubar是否顯示菜單工具欄

scrollbars是否顯示滾動條窗口對象(Windows)

status是否顯示狀態欄

titlebar是否顯示標題欄

toolbar是否顯示標準工具欄

resizable是否可以改變窗口的大小

screenX窗口左邊界距離

screenY窗口上邊界距離

top窗口上邊界

width窗口寬度

height窗口高度

left窗口左邊界

outerHeight窗口外邊界的高度

personalbar是否顯示個人工具欄位置對象(Location)屬性：

hash錨點名稱

host主機名稱

hostnamehost:port href完整的URL字符串

pathname路徑

port端口

protocol協議

search查詢信息方法：

reload()重新加載

replace()用指定的網頁取代當前網頁，并且當按下瀏覽器的“后退”鍵時將不能返回原先的網頁位置對象(Location)Eg:<inputtype="button"value="連接到163"onClick="location.href=''"><inputtype="button"value="刷新頁面"onclick="location.reload()"/><inputtype="button"value="替換頁面"onclick="location.replace('2.html')"/>歷史對象(History)屬性：

current當前歷史記錄的網址

length存儲在記錄清單中的網址數目

next下一個歷史記錄的網址

previous上一個歷史記錄的網址方法：

back()回到上一個歷史記錄中的網址（和按下“后退”鍵等效）

forward()回到下一個歷史記錄中的網址（和按下“前進”鍵等效）

go(整數或URL)前往歷史記錄中的網址（如果整數x>0，則前進x個地址，如果整數x<0，則后退x個地址，如果x=0，則刷新當前頁面）歷史對象(History)Eg:<ahref="history.go(-2)">后退兩頁</a><ahref="history.back()">后退一頁</a><ahref="history.forward()">前進一頁</a><ahref="history.go(2)">前進兩頁</a>文檔對象(Document)屬性：

linkColor設置超鏈接的顏色

alinkColor作用中的超鏈接的顏色

vlinkColor鏈接的超鏈接顏色

links以數組索引值表示所有超鏈接

URL該文件的網址

anchors以數組索引值表示所有錨點

bgColor背景顏色

fgColor前景顏色

classes文件中的class屬性

cookie設置cookiedomain指定服務器的域名

formName以表單名稱表示所有表單文檔對象(Document)屬性：

forms以數組索引值表示所有表單

images以數組索引值表示所有圖像

layers以數組索引值表示所有layerembeds文件中的plug-inapplets以數組索引值表示所有appletplugins以數組索引值表示所有插件程序

referrer代表當前打開文件的網頁的網址

tags指出HTML標簽的樣式

title該文檔的標題

width該文件的寬度（px）

lastModified文件最后修改時間文檔對象(Document)方法：

open()打開文檔

close()關閉文檔，停止寫入數據

clear()清空文檔

write()向文檔寫入數據

writeln()向文檔寫入數據并換行文檔DOMDOM(DocumentObjectModel)文檔對象模型，規范于2000年11月，盡管這個規范已經發布了好多年，但是當期使用的許多瀏覽器任然只具有不完整的DOM-2的支持，好消息是，當今的大多數網上沖浪者都使用IE6+,Firefox或Safari，而這些瀏覽器都能很好的運行這些腳本。我們將Javascript稱為”組合式（snap-together）語言“，因為可以將對象，屬性和方法組合在一起來構建出javascript應用程序。還有一種看待HTML頁面的方式：將它看做由節點（node）組成的樹結構。DOM結構圖<html><head><title>Mypage</title></head><body></body><p>Thisistextonmypage</p></html>htmlbodyheadptitle“Mypage”“Thisistextonmypage”texttext添加節點Eg：<html><head><scriptsrc="E:\script01.js"></script></head><body><form><p><textareaid="textArea"rows="5"cols="30"></textarea></p><inputtype="submit"value="Addsometexttothepage"/></form></body></html>添加節點window.onload=initAll;functioninitAll(){document.getElementsByTagName("form")[0].onsubmit=function(){returnaddNode();}}functionaddNode(){ varinText=document.getElementById("textArea").value;varnewText=document.createTextNode(inText);varnewGraf=document.createElement(“p”);newGraf.appendChild(newText);vardocBody=document.getElementsByTagName("body")[0];docBody.appendChild(newGraf); returnfalse;}添加節點varnewText=document.createTextNode(inText);//使用createTextNode()方法創建一個新的文本節點（名為newText），它將包含在textArea中找到的文本。varnewGraf=document.createElement(“p”);//createElement()方法使用創建一個新的元素節點，()里的內容可以是任何HTML容器。newGraf.size=“15”//給屬性添加節點newGraf.appendChild(newText);//將新文本添加到新段落中，我們調用appendChild().vardocBody=document.getElementsByTagName("body")[0];//為了把節點添加到文檔的body中，需要查明body的位置。這個getElementsByTagName()方法調用會給出頁面上的每個body標簽。如果頁面符合標準，那么應該只有一個body標簽。[0]屬性是第一個body標簽，我們將它存儲在docBody中。docBody.appendChild(newGraf);//將其追加的docbody中。刪除節點varallGrafs=document.getElementsByTagName("p");if(allGrafs.length>1){ varlastGraf=allGraffs.item(allGrafs.length-1)vardocBody=document.getElementsByTagName("body")[0]

docBody.removeChild(lastGraf)}插入節點.insertBefore(newnode,oldnode)釋：父節點下的.insertBefore()方法中，在原始節點前插入新的節點。替換節點.replaceChild(newnode,oldnode)釋：父節點下的.replaceChild()方法中，用新節點替換原始的節點。六.圖像處理1.翻轉器（rollover）2.低級翻轉器3.高級翻轉器4.鏈接式翻轉器5.三狀態翻轉器翻轉器（rollover）JavaScript實現的一種常見且有效的效果是，當用戶將鼠標移動到圖像上時，改變網頁上的圖像，從而讓頁面對用戶的操作做出反應。這種稱為翻轉器（rollover）的效果很容易實現，而且有許多可以應用它的場合低級翻轉器<ahref=""onmouseover="document.arrow.src='arrow_on.jpg'"onmouseout="document.arrow.src='arrow_off.jpg'"><imgsrc="arrow_off.jpg"border="0"name="arrow"id="arrow"alt="arrow"/></a>

onmouseover="document.arrow.src='arrow_on.jpg'"

onmouseout="document.arrow.src='arrow_off.jpg'"釋：當鼠標移動到圖片上或離開，<imgsrc=>重定向到另一張圖片缺點：察覺到延遲，需要下載高級翻轉器window.onload=setup;functionsetup(){ varthisImage=document.images[0];//獲取圖像

thisImage.outImage=newImage();//定義圖像的屬性為一圖像

thisImage.outImage.src=thisImage.src;//定義屬性指向的地址

thisImage.onmouseout=rollout;//調用事件

thisImage.overImage=newImage();

thisImage.overImage.src="arrow_on.jpg"; thisImage.onmouseover=rollover;}高級翻轉器functionrollout(){ this.src=this.outImage.src;}functionrollover(){ this.src=this.overImage.src;}優點：一次性將圖片下載到客戶段的內存當中，不會出現延時。鏈接式翻轉器window.onload=setup;functionsetup(){ varthislinks=document.links[0];//獲取鏈接對象

thislinks.thisImage=document.images[0];//定義屬性

thislinks.outImage=newImage();

thislinks.outImage.src=thisImage.src;

thislinks.onmouseout=rollout;

thislinks.overImage=newImage();

thislinks.overImage.src="arrow_on.jpg";

thislinks.onmouseover=rollover;}鏈接式翻轉器functionrollout(){ this.thisImage.src=this.outImage.src;}functionrollover(){ this.thisImage.src=this.overImage.src;}三狀態翻轉器三狀態翻轉器就是在高級翻轉器中加入一條點擊的過程中出現的圖片；thisImage.onclickImage=newImage();thisImage.onclickImage.src="圖片地址";thisImage.onclick=rollClick;functionrollClick(){this.src=this.onclickImage.src;}七.框架1、框架概述2、一個簡單的框架3、防止頁面顯示在框架中4、迫使站點顯示在框架中5、創建和裝載動態框架6、在框架間共享函數7、用javascript裝載iframe框架概述框架由至少三個HTML頁面組成。第一個頁面稱為框架集（frameset），它設置每個子框架的尺寸。框架集在JavaScirpt中稱為頂層頁面（top）或父頁面（parent）。框架集left框架content框架一個簡單的框架<html><head></head><framesetcols="30%,70%"><framesrc="1.html"name="left"id="left"

scrolling="yes"noresize/><framesrc="2.html"name="content"id="content"/></frameset></html>scrolling：是否顯示滾動條noresize:是否允許調整框架大小防止頁面顯示在框架中搶劫我的頁面新聞網頁貼吧知道MP3圖片視頻

幫助

高級

空間hao123|更多>>

把百度設為首頁企業推廣|搜索風云榜|關于百度|AboutBaidu?2008Baidu使用百度前必讀京ICP證030173號百度一下if(top.location!=self.location){top.location.replace(self.location);}注意：直接用top.location!=self.locationIE的Back按鈕不能用防止迫使站點顯示在框架中varframesetPage="frameset3.html";varcurrPage=justTheFilename(self.location.pathname);if(top.location==self.location&&framesetPage!=currPage){ self.location.replace(framesetPage+"?"+currPage);}檢查top.location是否與self.location相同迫使站點顯示在框架中window.onload=chgFrame;functionchgFrame(){ if(top.location==self.location&&document.location.search){ varlinkURL=justTheFilename(document.location.search); varcontentWin=document.getElementById("content").contentWindow; varcurrURL=justTheFilename(contentWin.location.pathname); if(currURL!=linkURL){ contentWin.location.replace(linkURL); } }}迫使站點顯示在框架中functionjustTheFilename(thisFile){ if(thisFile.indexOf("/")>-1){ thisFile=thisFile.substring(thisFile.lastIndexOf("/")+1); } if(thisFile.indexOf("?")==0){ thisFile=thisFile.substring(1); } returnthisFile;}創建和裝載動態框架window.onload=initLinks;functioninitLinks(){ for(vari=0;i<document.links.length;i++){ document.links[i].onclick=writeContent; document.links[i].thisPage=i+1; }}functionwriteContent(){ varnewText="<h1>Youarenowlookingatpage"+this.thisPage+".<\/h1>";

varcontentWin=parent.document.getElementById("content").contentWin

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論