《JavaScript(課件).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《JavaScript(課件).ppt（31頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、JavaScript教程 JavaScript是由 Netscape公司開(kāi)發(fā)并隨 Navigator導(dǎo)航者一起發(fā)布的、 介于 Java 與 HTML之間、 基于對(duì)象事件驅(qū)動(dòng)的編程語(yǔ) 言，正日益受到全球的關(guān)注。 因它的開(kāi)發(fā)環(huán) 境簡(jiǎn)單，不需要 Java編譯器，而是直接運(yùn) 行在 Web瀏覽器中，而因倍受 Web設(shè)計(jì)者 的所愛(ài) 例 1：編寫(xiě)第一個(gè) JavaScript程序 / JavaScript Appears here. document.write(“歡迎來(lái)到 JS世界！ ”); alert(這是第一個(gè) JavaScript例子 !); 練習(xí) 1：編寫(xiě)第一個(gè) JavaScript程序 通過(guò) ja
2、vascript實(shí)現(xiàn)以下頁(yè)面效果： 1.頁(yè)面輸出：“你好！” 2.彈出對(duì)話框：對(duì)話框內(nèi)容為“歡迎光臨我 的小站！” 變量、表達(dá)式 例 2 var r=2, pi=3.14; document.write(半徑為 2的圓的面積為： + pi*r*r); 注：不同類(lèi)型的變量都通過(guò) var定義 JavaScript程序控制結(jié)構(gòu) 順序 選擇 循環(huán) 選擇 if語(yǔ)句（ 1） 基本格式 if（表述式） 語(yǔ)句段； 功能：若表達(dá)式為 true，則執(zhí)行語(yǔ)句段。 基本格式 if（表述式） 語(yǔ)句段； . else 語(yǔ)句段； . 功能：若表達(dá)式為 true，則執(zhí)行語(yǔ)句段； 否則執(zhí)行語(yǔ)句段。 選擇 if語(yǔ)句（ 2） 循環(huán)
3、 while 基本格式 while（條件） 循環(huán)體 var i =1; while( i 3) document.write( i ); i = i + 1; 程序結(jié)果是什么？ 循環(huán) For循環(huán) 基本格式 for（表達(dá)式 1；表達(dá)式 2；表達(dá)式 3） 循環(huán)體 for(var i=0; i5; i+) document.write(“i的值為： ” + i); 程序結(jié)果是什么？ JavaScript函數(shù)使用 例 3 var x=20, y=22; function sum() return x+y; document.write(x + y的值為： + sum(); 練習(xí) 2：函數(shù)的使用 在 j
4、avascript中： 1.定義變量 r初值為 3，變量 pi初值為 3.14； 2.定義函數(shù) area()求圓的面積； 3.在頁(yè)面輸出圓的面積。 var x=20, y=22; function sum() return x+y; document.write(x + y的值為： + sum(); 練習(xí) 2參考 var r=3, pi=3.14; function area() return pi*r*r document.write(圓的面積為： + area(); JavaScript函數(shù)使用 例 4 function sum(x,y) return x+y; document.writ
5、e(x + y的值為： + sum(3,6); 注意！參數(shù)前不需要加 var JavaScript教程 第 10章 JavaScript核心對(duì)象 基于對(duì)象的 JavaScript語(yǔ)言 JavaScript語(yǔ)言是基于對(duì)象的（ Object-Based）， 而不是面向?qū)ο蟮模?object-oriented）。之所以 說(shuō)它是一門(mén)基于對(duì)象的語(yǔ)言，主要是因?yàn)樗鼪](méi)有提 供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z(yǔ)言的許多 功能。而是把其它語(yǔ)言所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來(lái)， 從而形成一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)。 雖然 JavaScript語(yǔ)言是一門(mén)基于對(duì)象的，但它還是 具有一些面向?qū)ο蟮幕咎卣?。它可以根?jù)需要?jiǎng)?chuàng) 建自己
6、的對(duì)象，從而進(jìn)一步擴(kuò)大 JavaScript的應(yīng)用 范圍，增強(qiáng)編寫(xiě)功能強(qiáng)大的 Web文檔。 數(shù)組對(duì)象 (1)創(chuàng)建數(shù)組 var myArray=new Array (3); (2)數(shù)組賦值 myArray0=“Jim” ； myArray1=“Tom” ； myArray2=“Kate” ； var myArray=new Array(“Jim”,”Tom”,”Kate”); 數(shù)組應(yīng)用 例 5 var myArray = new Array(Jim,Tom,Kate); document.write(數(shù)組的長(zhǎng)度為： + myArray.length + ); for(var i=0; imyAr
7、ray.length; i+) document.write(myArrayi + ); 練習(xí) 3：數(shù)組 在 javascript中： 利用數(shù)組，在頁(yè)面輸出以下內(nèi)容： * * * 用日期對(duì)象創(chuàng)建日期 功能：提供一個(gè)有關(guān)日期和時(shí)間的對(duì)象。 創(chuàng)建日期 （ 1） var myDate1=new Date() （ 2） var myDate2=new Date(2012， 3， 7) 獲取日期的時(shí)間方法 getFullYear(): 以四位數(shù)返回年數(shù) getMonth():返回月數(shù)（ 011） getDate():返回 當(dāng) 月的幾號(hào) getDay():返回星期幾（ 06） 日期對(duì)象的應(yīng)用 例 6 va
8、r date = new Date(); document.write(date + ); document.write(date.getFullYear() + 年 + (date.getMonth()+1) + 月 + date.getDate() + 日 + 星期 + date.getDay(); 宿主對(duì)象 窗口對(duì)象 (Window) 文檔對(duì)象 (Document) JavaScript窗口及輸入輸出 JavaScript是基于對(duì)象的腳本編程語(yǔ)言，那 么它的輸入輸出就是通過(guò)對(duì)象來(lái)完成的。其 中有關(guān)輸入可通過(guò)窗口（ Window）對(duì)象來(lái) 完成，而輸出可通過(guò)文檔（ document）對(duì) 象的
9、方法來(lái)實(shí)現(xiàn)。 窗口對(duì)象的方法 alert():彈出帶有指定信息和確定按鈕的警告框。 confirm():彈出帶有指定詢問(wèn)信息的確認(rèn)對(duì)話框，并 有確定和取消按鈕。 prompt():產(chǎn)生一個(gè)輸入窗口，返回輸入值。 注： Windows窗口對(duì)象是所有對(duì)象的父對(duì)象，代表一個(gè)瀏 覽器窗口。引用 windows對(duì)象的屬性或方法是，可直接引 用，不必通過(guò)對(duì)象名引用。 Window對(duì)象的應(yīng)用 例 7 var name; name = prompt(請(qǐng)輸入你的名字 ); if(confirm(準(zhǔn)備好考試了嗎？ ) alert(name + 你好，下面開(kāi)始考試！ ); 。 document對(duì)象 輸出 : doc
10、ument.write() document.writeln() 說(shuō)明： write()和 writeln()方法都是用于向?yàn)g覽 器窗口輸出文本字串； 二者的唯一區(qū)別就是 writeln()方法自動(dòng) 在文本之后加入回車(chē)符。 簡(jiǎn)單的輸入、輸出 例 8 var name; name = prompt(請(qǐng)輸入你的名字 ); document.write(name + ，你好，下面開(kāi) 始考試！ ); 練習(xí) 4 簡(jiǎn)單輸入輸入 （ 1）彈出輸入框，詢問(wèn)信息為“請(qǐng)輸入姓名” ,將用 戶輸入姓名存放在 name變量中； （ 2）同時(shí)彈出警告框，內(nèi)容為：“ XX，你好，下面 開(kāi)始考試?！?（ 3）在頁(yè)面輸出，當(dāng)前日期。 事件 例 9 現(xiàn)在 的時(shí)間是 ? 事件 例 10 div background- color:green;width:120px;height:20px;padding:40px;col or:#ffffff; function mOver(obj)obj.innerHTML=謝謝 function mOut(obj)obj.innerHTML=把鼠標(biāo)移到上面 把鼠標(biāo)移到上面 練習(xí) 4 事件練習(xí) 在頁(yè)面中設(shè)計(jì)個(gè)高寬都為 100px的黃色塊，當(dāng)鼠標(biāo)懸 停在上面的時(shí)候，塊內(nèi)出現(xiàn)文本“你好！”當(dāng)鼠標(biāo)離 開(kāi)的時(shí)候，塊內(nèi)的文本消失。
JavaScript(課件).ppt
