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