




已閱讀5頁,還剩36頁未讀, 繼續免費閱讀
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第1章 JavaScript語言入門1 為什么學習JavaScript提要:Javascript是學習腳本語言的首選。她兼容性好,絕大多數瀏覽器均支持Javascript,而且她功能強大,實現簡單方便,入門簡單,即使是程序設計新手也可以非常快速容易地使用JavaScript進行簡單的編程。Javascript是由Netscape公司創造的一種腳本語言。為便于推廣,被定為javascript,但是javascript與java是兩門不相干的語言,作用也不一樣。作為一門獨立的編程語言,javascript可以做很多的事情,但它最主流的應用還是在Web上創建動態網頁(即網頁特效)。Javascript在網絡上應用廣泛,幾乎所有的動態網頁里都能找到它的身影。目前流行的AJAX也是依賴于Javascript而存在的。Javascript與Jscript也不是一門相同的語言,Jscript和vbscript是微軟開發的兩種腳本語言,微軟,Netscape公司以及其他語言開發商為減少web開發者的兼容麻煩,所以成立ECMA,該組織專門制定腳本語言的標準和規范。ECMA制定的標準腳本語言叫做 ECMAScript,Javascript符合ECMA的標準,其實Javascript也可以叫做ECMAScript.Jscript也ECMA的標準,但用戶較少。vbscript僅局限在微軟的用戶,Netscape不支持。概括地說,JavaScript就是一種基于對象和事件驅動,并具有安全性能的腳本語言,腳本語言簡單理解就是在客戶端的瀏覽器就可以互動響應處理程序的語言,而不需要服務器的處理和響應,當然JavaScript也可以做到與服務器的交互響應,而且功能也很強大。而相對的服務器語言像asp php jsp等需要將命令上傳服務器,由服務器處理后回傳處理結果。對象和事件是JavaScript的兩個核心。JavaScript可以被嵌入到HTML文件中,不需要經過Web服務器就可以對用戶操作作出響應,使網頁更好地與用戶交互;在利用客戶端個人電腦性能資源的同時,適當減小服務器端的壓力,并減少用戶等待時間。2 將JavaScript 插入網頁的方法與在網頁中插入CSS的方式相似,使用標簽在網頁中插入Javascript代碼。使用下面的代碼可以在網頁中插入JavaScript: .language=javascript表示使用JavaScript腳本語言,腳本語言還有vbscript、jsscript等,如果沒有language屬性,表示默認使用JavaScript腳本。其中的.就是代碼的內容。例如: document.write(我是菜鳥我怕誰!);JavaScript使用document.write來輸出內容。將會輸出在網頁上輸出:我是菜鳥我怕誰!學過編程的人應該知道,“我是菜鳥我怕誰!”兩側雙引號代表字符串的意思。不過不理解這個概念也無所謂,學到后面就知道什么時候應該加雙引號,什么時候不需要加了。有些瀏覽器可能不支持JavaScript,我們可以使用如下的方法對它們隱藏JavaScript代碼。 里的內容對于不支持JavaScript的瀏覽器來說就等同于一段注釋,而對于支持JavaScript的瀏覽器,這段代碼仍然會執行。至于“/”符號則是JavaScript里的注釋符號,在這里添加它是為了防止JavaScript試圖執行-。不過通常情況下,現在的瀏覽器幾乎都支持JavaScript,即使是不支持的,也會了解如何合理地處理含有JavaScript的網頁。JavaScript的插入位置不同,效果也會有所不同,還可以像CSS一樣,將JavaScript保存成一個外部文件,這些內容會在下一節討論。3 插入JavaScript的位置JavaScript腳本可以放在網頁的head里或者body部分,而且效果也不相同。(1)放在body部分的JavaScript腳本在網頁讀取到該語句的時候就會執行,例如:(2)在head部分的腳本在被調用的時候才會執行,例如:.通常是在.定義函數,通過調用函數來執行head里的腳本。(3)也可以像添加外部CSS一樣添加外部JavaScript腳本文件,其后綴通常為.js。例如:如果很多網頁都需要包含一段相同的代碼,那么將這些代碼寫入一個外部JavaScript文件是最好的方法。此后,任何一個需要該功能的網頁,只需要引入這個js文件就可以了。注意:腳本文件里頭不能再含有標簽。注:放在body里的函數是一個例外,它并不會被執行,而是等被調用時才會執行。關于函數與調用的概念將在后面講到。4 JavaScript 語句本節介紹Javasctipt中的語句,語句是編程的一個基本概念。先來看看我們之前例子。例子中的 document.write(我是菜鳥我怕誰!);就是一個JavaScript語句,它可以告訴瀏覽器做出一個特定任務。特別的,這個語句是叫瀏覽器書寫出一段內容。我們已經知道,document.write的功能是輸出文本,所以上面那個語句就是讓瀏覽器輸出“我是菜鳥我怕誰!”。在JavaScript中,一行的結束就被認定為語句的結束。但是最好還是要在結尾加上一個分號“;”來表示語句的結束。這是一個編程的好習慣,事實上在很多語言中句末的分號都是必須的。看看下面這個代碼塊document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);5 JavaScript 注釋 HTML、CSS里都有注釋,JavaScript里自然也有注釋,而且分為單行注釋與普通注釋兩種。5.1單行注釋插入單行注釋的符號是“/”/ 我是注釋,我是注釋document.write(我是菜鳥我怕誰?); 5.2多行注釋多行注釋以/*開始,以*/結束。/*誰說菜鳥不會編程?菜鳥不但會編程還有書寫注釋的良好習慣*/document.write(我是菜鳥我怕誰?);相信你已經了解注釋的作用了。HTML的注釋不會被瀏覽器作為HTML解釋,CSS注釋也不會被瀏覽器解釋。同理,JavaScript的注釋也不會被執行。注釋的作用就是記錄自己在編程時候的思路,以便以后自己閱讀代碼時可以馬上找到思路。同樣,注釋也有助于別人閱讀自己書寫的JavaScript代碼。總之書寫注釋是一個良好的編程習慣。6 JavaScript 變量 (1)什么是變量在代數中,我們會遇到下面的基礎問題,如果a的值為5,b的值為6,那么a與b的和是多少?在這個問題中,我們就可以把a和b看做變量,再設置一個變量c來保存a與b的和。那么,上面的這個問題就可以用如下的JavaScript代碼表示:/ 計算a + b的和a = 5;/給變量a賦值b = 5;/給變量b賦值c = a + b;/c 為 a + b 的和document.write(c);/輸出c的值執行結果:10在上面的例子中,我們用到了三個變量:a,b,c。這些都是變量的名字,在JavaScript中,我們需要用變量名來訪問這個變量。在JavaScript中,變量名有如下規定: 變量名區分大小寫,A與a是兩個不同變量。 變量名必須以字母或者下劃線開頭。(2)聲明變量我們可以用var聲明變量,比如:var a ; /聲明一個變量aa = 5 ; /給變量賦值其實在第一個例子中我們已經看到了,JavaScript中可以不聲明變量直接賦值。不過先聲明變量是一個良好的編程習慣。 (3)給變量賦值來看一個上面出現過的語句:a = 5 ; 這個語句怎么讀出來呢?“a等于5”?對不起,不對。應該是“讓a等于5”,說得專業一點,這叫“給a賦值”。我們之前已經提到過,a是變量,是可以變的,所以從某種角度來說,它不等于任何值,只是暫時的等于某個值。來看下面這個例子,進一步熟悉一下賦值與等于的關系:a = 5;/讓a等于5,a的值暫時等于5a = 6;/讓a等于6,a的值暫時等于6 再次強調,如果JavaScript是你學習的第一門編程語言,一定要注意區分“等于”和“賦值”這兩個不同的概念。(4)變量的數據類型其實,在JavaScript中,變量是無所不能的容器,你可以吧任何東西存儲在變量里,例如:var quanNeng1 = 123;/數字var quanNeng2 = 一二三/字符串其中,quanNeng2這個變量存儲了一個字符串,字符串需要用一對引號括起來。變量還可以存儲更多的東西,例如數組,對象,布爾值等等,我們會在后面介紹這些內容。7 JavaScript操作符7.1運算操作符 操作符是用于在JavaScript中指定一定動作的符號,其中算術操作符主要用來完成類似加減乘除的工作。 (1)操作符舉例看下面這段JavaScript代碼。c = a + b;其中的=和+都是操作符。JavaScript中還有很多這樣的操作符,例如,加減乘除是JavaScript中比較基本的幾個操作符,它們的意義與在數學中沒有什么差別。JavaScript中最常見的操作符是賦值操作符“=”,上一節我們已經強調過,它不是等于。(2)操作符的優先級我們都知道,在數學中,“a + b * c”這個式子中,乘法將先于加法運算。同樣,在JavaScript中,這個式子會按相同的順序執行。我們稱之為“優先級”,即“*”的優先級高于“+”。與數學中一樣,改變運算順序的方法是添加括號,JavaScript中改變優先級的方法也是添加括號。例如:(a +) * c(3)字符串的連接在JavaScript中,“+”不知代表加法,同樣也可以使用它來諒解兩個字符串,例如:example = 烏 + 龜;在上面的例子中,example將包含“烏龜”這個字符串。這是由于“+”完成了“烏”和“龜”的連接,當然了,你也可以把這種行為理解成字符串的加法。(4)自加一,自減一操作符這里我們來看兩個非常常用的運算符,自加一“+”;自減一“-”。首先來看一個例子:a = 5;a+;/a的值變為6a-/a的值有變回5上面的例子中,a+使得a的值在原來的基礎上增加1,a-則讓a在現在的基礎上在減去1。所以,其實“a+”也可以寫成“a = a + 1”;/等同于a+(5)復合操作符延續上面的例子,其實“a = a + 1”還可以寫成:a += 1;/將a的值加1之后再賦給a這樣把運算和賦值結合到一起的操作符叫做復合操作符。上面我們看到的是加法與賦值的結合,JavaScript中還有其它的符合運算符:a += b;/ a = a + ba -= b;/ a = a - ba *= b;/ a = a * ba /= b;/ a = a / b 7.2比較操作符和邏輯操作符 操作符是用于在JavaScript中指定一定動作的符號。(1)比較操作符比如:“=”符號,它是一個比較操作符,它表示的意思就是“相等嗎?”。例如:a=b表示:“a與b的值相等嗎?”在JavaScript中,這樣的比較操作符有很多,下面就列出這些操作符以及它們的含義。 “” a大于b嗎? “=” a大于等于b嗎? “b”在JavaScript中還表示為ab;數學中的“b大于a,b小于c”是“aba & 你可能已經猜到了,“&”是而且的意思。if(條件1 & 條件2)/代碼只有條件1、2同時滿足,代碼才會得到執行。類似的操作符還有“或者(|)”和“非(!)”if(條件1 | 條件2)/代碼 “|”表示或者的意思,只要條件1或2中有一個滿足,代碼就會得到執行。if(!條件)/代碼“!”表示非,也就是不是的意思,只有條件不滿足的時候,代碼才會得到執行。8 JavaScript流程控制語句 8.1 if else語句(如果,否則) if else是所有編程語言里都有的功能,它使得程序具有簡單的判斷能力。在介紹if之前,讓我們先來了解一下布爾值這個概念。(1)布爾(Bool)值在變量一節中,我們曾經說過,變量可以用來存儲布爾值。哪么布爾值的作用究竟是什么呢?簡單的說,布爾值的作用就是用來表示“真的假的”。所以布爾值其實只有兩種取值:真(true)和假(false)。(2) if else結構其實“if else”的意思和字面意思是一樣的,就是“如果”、“否則”。還是讓我們來看一個使用if的例子吧。Var hobby = “VbScript”;if (hobby = “JavaScript”) document.write(有發展);我們來解釋一下這段代碼。首先是一個“if”,它后面緊跟著一個括號,括號里則是一個條件,確切地說是一個布爾值。當條件成立的時候,這個值是true,“”里的語句將會得到執行;否則這個值是flase,“”里的語句將被忽略。具體到我們的例子,因為hobby 變量的值是“VbScript”,所以不做回答。如果hobby變量的值是“JavaScript”,則回答“有發展”。注意“=”這個符號,這個符號用來判斷左右兩邊是否相等。下一節會詳細地介紹。如果你的愛好不是JavaScript,那么沒有任何輸出。如果你希望它能對這種情況做出反應,我們可以請else來幫忙,看下面的代碼:var hobby = JavaScriptif (hobby = JavaScript) document.write(有發展);else/如果愛好不是JavaScriptdocument.write(沒有評價);上面的代碼用到了“else”,它會給if添加一種“否則”的狀態。當hobby不是“JavaScript”的時候,它會表明“沒有評價”。(3)if else嵌套如果想做更多的判斷,可以用if的嵌套,看下面的代碼。var hobby = JavaScriptif ( hobby = JavaScript) document.write(有發展);else if ( hobby = football)/如果愛好是足球。/注意:這個if是嵌套在上一個if else中的else中的document.write(我X);else/既不是JavaScript又不是足球document.write(沒有評價);第二個if只有在第一個if的條件不成立的時候才有機會執行。8.2 JavaScript Switch語句 當有很多種選項的時候,switch比if else使用更方便。上一節我們已經看到,利用if else可以讓程序具有基本的判斷能力,而使用嵌套的if else則可以讓程序對多種情況進行判斷。但是當情況的種類比較多的時候,使用switch語句將更加合適。比如要實現如下功能的程序:輸入一個學生的考試成績,我們按照每十分一個等級將成績分等,程序將根據成績的等級做出不同的評價。很明顯,用if else可以實現這樣的程序,但是代碼會很復雜。而如果使用switch語句,代碼則會簡單一些,首先來看一下思路,再把它翻譯成JavaScript。思路:1. 將分數轉化為特定等級以便于switch處理。2. 判斷分數屬于哪種等級。3. 根據分數等級做出評價:例如低于60給出掛科評價。 翻譯成JavaScript就是如下代碼(注意注釋):/首先,我們用score變量來存儲分數,假設為65 var score = 65;/用分數除以10,parseInt的作用是把它轉換為整數,/暫時不用深究,()內最后的結果為6 switch (parseInt(score / 10) /switch開始實現判斷過程,case 6得到滿足 case 0: case 1: case 2: case 3: case 4: case 5:/根據不同的等級做出不同的行為。/冒號后面的語句就是行為/case0到5的行為都是下面這個語句 degree = 恭喜你,又掛了!; break; case 6: degree = 勉強及格; break; case 7: degree = 湊合,湊合 break; case 8: degree = 不錯,不錯; break; case 9: case 10: degree = 高手高手,佩服佩服; /end of switch 記得在每個case所執行的語句里添加上一個break語句。為了理解break的作用,我們來看看如果沒有break會怎么樣: switch (parseInt(score / 10) case 0: case 1: case 2: case 3: case 4: case 5: degree = 恭喜你,又掛了!; case 6: degree = 勉強及格; case 7: degree = 湊合,湊合 case 8: degree = 8錯,8錯; case 9: case 10: degree = 高手高手,佩服佩服; /end of switch 在上面的代碼中,如果成績是50分,那么score/10就是5,則case 5后面的語句將會得到執行,同樣,case6、7等等后面的語句都會得到執行。也就是說,我們會得到:”恭喜你,又掛了!勉強及格湊合,湊合8錯,8錯高手高手,佩服佩服“這樣沒有意義的評價。這就是swtitch語句的執行邏輯,當發現某個case滿足后,該switch中在該case后的所有語句都會得到執行。第一個例子中的break就是為了讓switch”停下來“。8.3 JavaScript For 循環 所謂循環,就是重復執行一段代碼。前面我們已經看到了,if else和switch是JavaScript具有了判斷的能力,但是電腦的判斷能力和人比起來差遠了。電腦更擅長一件事情不停地重復。我們在JavaScript中把這叫做循環。for語句結構如下:for(初始條件;判斷條件;循環后動作) 循環代碼讓我們來看一個簡單的例子吧:有十個菜鳥報數,“菜鳥1號、菜鳥2號”。有了for循環,很少的代碼就可以實現十個菜鳥的報數。var i=1;for (i=1;i=10;i+)document.write(菜鳥+i+號);結果如下:菜鳥1號菜鳥2號菜鳥3號菜鳥4號菜鳥5號菜鳥6號菜鳥7號菜鳥8號菜鳥9號菜鳥10號在上面那個例子中,循環恰好執行了10次,那么和“for (i=1;i=10;i+)”一句中的10是不是10次的意思呢?下面我們就來看看for循環的工作機制。首先i=1叫做初始條件,也就是說從哪里開始,特別的,我們的例子從i=1開始。出現在第一個分號后面的i=10表示判斷條件,每次循環都會先判斷這個條件是否滿足,如果滿足則繼續循環,否則停止循環,繼續執行for循環后面的代碼。你可能想問了,我們設定了i=0,豈不是永遠都小于等于10嗎?來看第三個部分。最后的i+表示讓i在自身的基礎上加1,這時每次循環后的動作.也就是說,每次循環結束,i都會比原來大1,執行若干次循環之后,i=10的條件就不滿足了,這時循環結束。for循環后面的代碼將得到執行。8.4 JavaScript While循環 while循環重復執行一段代碼,直到某個條件不再滿足。 (1)while循環的結構:while(判斷條件)循環代碼 其實while循環和for循環的作用都是重復執行代碼,例如下面這段代碼,和上一節for循環的輸出結果完全沒有區別。先來讀讀例子的代碼,下面會解釋為什么這個循環會和上一節的for循環等價。var i=0;while (i=10)document.write(菜鳥+i+號);document.write();i=i+1;看起來好像比for循環少了點東西啊,只有一個判斷條件啊。其實這個循環也是有初始條件的,只不過在之前就已經定義好了,例如上面例子中的var i=0;,至于變量i的增大,則是放到了循環體里面,其實這個過程和for沒有什么區別,也是變量i不斷變大,直到判斷條件不滿足,則循環結束。(2)do while循環的結構do wile結構的基本原理和while結構是基本相同的,但是它保證循環體至少被執行一次。因為它是先執行代碼,后判斷條件。例子如下: i = 0; do document.write(The number is + i); document.write(); i+; while (i = 5)8.5 JavaScript Break 與 Continue Break可以跳出循環,Continue跳過本次循環。(1)breakbreak語句可以讓循環中途停止,直接執行后面的代碼。格式如下:while (i10)if(特殊情況)break;循環代碼那么,當特殊情況發生的時候,循環就會立即結束。看看下面的例子,我們的菜鳥7號到10號在寢室打游戲var i=0;for (i=0;i=10;i+)if (i=6)break;/如果i是6的話就退出循環。document.write(菜鳥+i+號);當i=7的時候循環就會結束,不會輸出后面循環的內容。(2)continuecontinue的作用是僅僅跳過本次循環,而整個循環體繼續執行。它的格式如下:while (判斷條件)if(特殊情況)continue;循環代碼上面的循環中,當特殊情況發生的時候,本次循環將被跳過,而后續的循環則不會受到影響,來看看下面的例子:菜鳥6號外出學習JavaScript去了。var i=0for (i=0;i=10;i+)if (i=3)continue;document.write(The number is + i);document.write();上面的代碼中,i=6的那次循環將被跳過.8.6 JavaScript For.In循環 Javascript中的for in循環通常用來遍歷數組首先要了解什么是數組,所謂數組,其實就是一個保存了一組類似變量的一個集合。我們來看一個保存了愛好的數組實例:var x;var hobbies = new Array();/創建一個新的數組hobbies0 = JavaScript;hobbies1 = CSS;hobbies2 = 籃球;for (x in hobbies)/數組中的每一個變量document.write(hobbiesx + );輸出結果如下:JavaScriptCSS籃球我們來分析一下上面的例子:var hobbies = new Array();一句創建了一個新的數組。hobbies0 = JavaScript;以及之后的兩句則是給hobbies數組賦值。這與我們之前見過的變量賦值不太一樣,hobbies后面多出一個0,這個是變量的索引。我們之前已經說了,數組是變量的集合,因此我們在賦值之前需要指明給數組中的哪一個變量賦值。在這里,0表示的是hobbies數組所包含的第一個變量,沒錯,數組的索引是從0開始的,開始可能有點別扭,慢慢就習慣了。最后的for in循環就很好理解了,for (x in hobbies)/數組中的每一個變量 document.write(hobbiesx + ); 表示遍歷hobbies數組的所有變量,并且將他們逐一輸出。9 JavaScript 彈出框 JavaScript中有三種彈出框:警告(alert)、確認(confirm)以及提問(prompt)。9.1警告(alert)在訪問網站的時候,你遇到過這樣的情況嗎?“咚”的一聲,一個小窗口出現在你面前,上面寫著一段警示性的文字,或是其它的提示信息。如果你不點擊確定,你就不能對網頁做任何的操作。沒錯,這個“咚”的小窗口就是alert干的。下面的代碼是一段使用alert的實例。 alert(我是菜鳥我怕誰);9.2確認(confirm)確認框用于讓用戶選擇某一個問題是否符合實際情況。來看下面的代碼:我們用confirm(你是菜鳥嗎?)向訪客提問,變量r則保存了訪客的回應,它只可能有兩種取值:true或false。沒錯,它是一個布爾值。confirm后面的語句則是我們對訪客回答做出的不同回應。 var r=confirm(你是菜鳥嗎); if (r=true) document.write(彼此彼此); else document.write(佩服佩服); 9.3提問(prompt)prompt和confirm類似,不過它允許訪客隨意輸入回答。我們來修改一下之前switch的例子,我們根據分數來做出不同的評價,不過那段程序并不完整,它根本就沒問我們分數,而是假設我得了65分。這太不公平了。現在我么就可以用prompt來向訪客提問,用score存儲用戶輸入的回答,其余的事情就都由后面的switch來完成了。 function judge() var score;/分數 var degree;/分數等級 score = prompt(你的分數是多少?) if (score 100) degree = 耍我?100分滿!; else switch (parseInt(score / 10) case 0: case 1: case 2: case 3: case 4: case 5: degree = 恭喜你,又掛了!; break; case 6: degree = 勉強及格; break; case 7: degree = 湊合,湊合 break; case 8: degree = 8錯,8錯; break; case 9: case 10: degree = 高手高手,佩服佩服; /end of switch /end of else alert(degree); prompt( )方法除了可以給出提示信息外,還可以給出初始值,格式如下:prompt(“提示信息”,“初值”)10 JavaScript 函數 通常情況下,函數是完成特定功能的一段代碼。把一段完成特定功能的代碼塊放到一個函數里,以后就可以調用這個函數啦,這樣就省去了重復輸入大量代碼的麻煩。還記得我們上一節所使用的alert嗎?其實它就是一個函數,他是JavaScript提供的函數。一個函數的作用就是完成一項特定的任務。如果沒有函數時,完成一項任務可能需要五行、十行、甚至更多的代碼。每次需要完成這個任務的時候都重寫一遍代碼顯然不是一個好主意。這是我們就可以編寫一個函數來完成這個任務,以后只要調用這個函數就可以了。10.1定義一個函數說了這么多,那么究竟如何定義一個函數呢?看看下面的格式:function 函數名()函數代碼;函數由關鍵字Function定義,把“函數名”替換為你想要的名字,把“代碼”替換為完成特定功能的代碼,函數就定義好了。了解了如何定義函數,我們就來自己編寫一個實現兩數相加的簡單函數吧。首先給函數起一個有意義的名字:“add2”,它的代碼如下:function add2() sum = 1 + 1; alert(sum);10.2函數的調用函數定義好了,如何調用呢?其實可以通過很多種方法調用上面的函數,我們這里使用最簡單的函數調用方式按鈕的點擊事件,JavaScript事件會在后面介紹。試著點擊下面的按鈕調用定義好的函數:function add2()sum = 1 + 1; alert(sum);通過button按鈕的鼠標單擊事件onclick調用add2()函數。10.3帶參數的函數上述Add2()函數不能實現任意指定兩數相加。其實,函數的定義可以是下面的格式:function(參數1,參數2,參數3)部分函數代碼按照這個格式,我們的函數應該寫成:function add2(x,y) sum = x + y; alert(sum);x和y則是我們函數的兩個參數,調用函數的時候,我們就可以通過這兩個參數把兩個加數傳遞給函數了。例如,add2(3,4)會求3+4的和,add2(56,65)則會求出56和65的和。“再等等!這函數沒有用啊,這里只是把結果alert出來,我想對結果做些處理怎么辦啊?”10.4帶返回值的函數好吧,我們把alert(sum)一行改成下面的代碼:return sum;return后面的值叫做返回值。使用下面的語句調用函數就可以將這個返回值存儲在變量中了。result = add2(3,4);該語句執行后,result變量中的值為7。值得說明的是,我們的函數中,參數和返回值都是數字,其實它們也可以是字符串等其它類型。 11 JavaScript事件 我們之前提到過函數的調用。函數定義之后,默認是不會執行的,這時候就需要一些事件來觸發這個函數的執行。JavaScript很多有很多事件,例如鼠標的點擊、移動,網頁的載入和關閉。我們先來定義一個函數,再看幾個事件的實例。統一的示例函數:function displaymessage()alert(我是菜鳥我怕誰!); 函數的事件很簡單,只是顯示一條消息。11.1點擊事件使用點擊事件調用,需要給元素設置onclick屬性。示例代碼如下: onclick調用函數由于設置了onclick=displaymessage(),因此點擊按鈕則會調用函數。窗體頂端11.2鼠標經過、移出事件使用鼠標經過事件調用函數的代碼如下:鼠標滑過調用函數當鼠標經過按鈕時,觸發onmouseover事件,將會調用函數displaymessage()。使用鼠標移出事件調用函數的代碼如下: 鼠標移出調用函數把鼠標移動到這個按鈕里面,當再移動出去時,觸發onmouseout 事件,將會調用函數displaymessage()。11.3更多事件JavaScript中還有很多事件,完整的列表可以看看/learn/view/p/3/o/0/doc/jsref_events/。下面的列表列舉了可以插入HTML標簽中來定義事件動作的屬性,具體的用法請參考上面的網站。屬性事件發生時機onabort圖片下載被打斷時onblur元素失去焦點時onchange框內容改變時onclick鼠標點擊一個對象時ondblclick鼠標雙擊一個對象時onerror當加載文檔或圖片時發生錯誤時onfocus當元素獲取焦點時onkeydown按下鍵盤按鍵時onkeypress按下或按住鍵盤按鍵時onkeyup放開鍵盤按鍵時onload頁面或圖片加載完成時onmousedown鼠標被按下時onmousemove鼠標被移動時onmouseout鼠標離開元素時onmouseover鼠標經過元素時onmouseup釋放鼠標按鍵時onreset重新點擊鼠標按鍵時onresize當窗口或框架被重新定義尺寸時onselect文本被選擇時onsubmit點擊提交按鈕時onunload用戶離開頁面時12 JavaScript 特殊字符 JavaScript中有一些特殊的字符,如果想要在字符串中使用,需要加上一個反斜線。 我們在之前已經看過好多應用字符串的例子,如果現在想輸出內容將是:小明說:我是菜鳥我怕誰?。該怎么辦呢?雙引號被當作javascript標記字符串開始和結束的符號,我們怎么能在字符串里引入雙引號呢?看看下面這個例子。 document.write(小明說:我是菜鳥我怕誰?。);我們在雙引號前面加上一個反斜線就可以了。在JavaScript中有很多這樣具有功能的特殊字符,如果需要把它們插入字符串都需要在前面加上一個反斜線。特殊字符列表JavaScript特殊字符代碼代碼輸出單引號雙引號&與符號反斜線n換行r回車t制表符b后退f走紙換頁13 JavaScript 指導準則 (1)在書寫JavaScript的過程中,應該記住它是區分大小寫的,變量名和函數名都區分大小寫。比如:Var A=1;Var a=2; A和a是兩個不同的變量。(2)代碼中多余的空格是被忽略的。例如下面兩個語句a=b+c;a = b + c ;他們是等價的。(3)”表示本行未完前面已經說過,瀏覽器讀到一行末尾會自動判定本行已經結束,不過我們可以通過在行末添加一個“”來告訴瀏覽器本行沒有結束。document.write(Hello World!)和document.write(我是菜鳥我怕誰!)是完全一樣的。14 JavaScript 對象化編程 JavaScript 是使用“對象化編程”的,或者叫“面向對象編程”的。所謂“對象化編程”,意思是把 JavaScript 能涉及的范圍劃分成大大小小的對象,對象下面還繼續劃分對象直至非常詳細為止,所有的編程都以對象為出發點,基于對象。小到一個變量,大到網頁文檔、窗口甚至屏幕,都是對象。JavaScript對象是可以是一段文字、一幅圖片、一個表單(Form)等等。每個對象有它自己的屬性、方法和事件。對象的屬性是反映該對象某些特定的性質的,例如:字符串的長度、圖像的長寬、文字框(Textbox)里的文字等等;對象的方法能對該對象做一些事情,例如,表單的“提交”(Submit),窗口的“滾動”(Scrolling)等等;而對象的事件就能響應發生在對象上的事情,例如提交表單產生表單的“提交事件”,點擊連接產生的“點擊事件”。不是所有的對象都有以上三個性質,有些沒有事件,有些只有屬性。引用對象的任一“性質”用“.”這種方法。JavaScript對象有:基本對象、全局對象、文檔對象。下面我們一一介紹。14.1基本對象(1)String 字符串對象我們在之前的學習中已經就在使用字符串對象對象了,聲明一個字符串對象的方法就是直接賦值。比如:var s = 我有個7個字符;定義了s這個字符串之后,我們就有了一個字符串對象,我們可以訪問它的屬性,使用它的方法。屬性length 用法:.length;返回該字符串的長度。方法charAt() 用法:.charAt();返回該字符串位于第位的單個字符。注意:字符串中的一個字符是第 0 位的,第二個才是第 1 位的,最后一個字符是第 length - 1 位的。ch
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 團章測試題及答案
- 2025年連帶責任擔保協議范本
- 2025年債權轉讓和投資協同協議
- 2025年聯合品牌策劃營銷合作共贏協議書
- 2025年合作伙伴關系框架協議全文
- 2025年長期訂閱策劃協議示例
- 企業法律風險的預防的背景意義及必要性
- 2025年婚姻解除協議書模板及操作策劃詳述
- 2025年化學品物流協同管理協議
- 教師教育內容的優化與能力提升的關系
- 2024年陜西省西安市中考數學試題卷(含答案逐題解析)
- 食品安全體系FSSC22000-V6版標準要求及內審員培訓教材
- DZ∕T 0272-2015 礦產資源綜合利用技術指標及其計算方法(正式版)
- 生命科學簡史智慧樹知到期末考試答案章節答案2024年中國科學技術大學
- 24春國家開放大學《土地資源學》形考作業1-4參考答案
- 人教版八年級數學下冊期末試卷培優測試卷
- 2024土地代耕代種協議書
- (2024年)肺栓塞的護理課件
- 《水電工程巖爆風險評估技術規范》(NB-T 10143-2019)
- 刑事書記員培訓課件
- 預防術中低體溫Pdca 課件
評論
0/150
提交評論