互聯(lián)網軟件開發(fā)與應用chapPPT課件

1 網頁設計與制作 主講 狼哥QQ 1107095361 2 開始學習JavaScript 3 為什么要學習JavaScript VBScript和JavaScript兩種腳本語言有不同的特性 都掌握可以揚長避短 VBScript和JavaScript結合編程是ASP解決方案的一種理想選擇 JavaScript是一種通用的 基于原型的 面向對象的腳本語言 JavaScript設計目標是在不占用很多系統(tǒng)和網絡資源的情況下 可以在頁面做完整的程序 4 JavaScript是一種Script腳本語言 所謂的腳本語言就是可以和HTML語言混合使用的語言 VBScript也是Script語言中的一種 但是VBScript只有微軟的瀏覽器InternetExplore IE 才能完全支持 而JavaScript則不管是什么瀏覽器都可以運行 這也是JavaScript的一個優(yōu)點 JavaScript是一種高級的腳本描述性語言 并不需要依賴于特定的機器和操作系統(tǒng) 所以說它是獨立于操作平臺的 JavaScript1 0最初是在NetscapeNavigator2 0及NetscapeLiveWire1 0上實現(xiàn)的 目前JavaScript的版本是JavaScript1 2 JavaScript概述 5 JavaScript是由網景公司開發(fā)的一種跨平臺 面向對象 object oriented 的網頁腳本語言 WebScriptLanguage 是目前流行的網頁特效設計語言 JavaScript代碼可直接嵌入HTML文件中 隨網頁一起傳送到客戶端瀏覽器 然后通過瀏覽器來解釋執(zhí)行 JavaScript概述 6 什么是JavaScript腳本語言 1 腳本語言 ScriptingLanguage 由ASCII碼構成 可直接用任何的文本編輯器開發(fā)完成 是一種不必事先編譯 只要利用適當?shù)慕忉屍?Interpreter 就可以執(zhí)行的簡單的解釋式程序 2 JavaScript JavaScript是由網景公司開發(fā)的一種跨平臺 純面向對象 object oriented 式的網頁式腳本語言 WebScriptLanguage JavaScript代碼可直接嵌入HTML文件中 隨網頁一起傳送到客戶端瀏覽器 然后通過瀏覽器的解釋器來解釋執(zhí)行 JavaScript概述 7 腳本編寫語言基于對象的語言簡單性安全性動態(tài)性跨平臺 JavaScript的特點 JavaScript概述 8 制作網頁特效提供表單前端驗證窗口動態(tài)操作提高系統(tǒng)工作效率 JavaScript的功能 JavaScript概述 9 JavaScript概述 利用JavaScript可以增強網頁的交互性 控制各種瀏覽器對象利用JavaScript還可以實現(xiàn)對用戶所輸入的數(shù)據(jù)進行有效驗證 從而減輕服務器的負擔JavaScript必須放在與標記之間 以便將腳本代碼與HTML標記區(qū)分開來Script塊可以放在HTML中與之間 也可以放在與之間 10 JavaScript與Java的區(qū)別 從本質上說JavaScript和Java沒有什么聯(lián)系 但是同時作為語言 可以從下面的角度來區(qū)別 1 JavaScript是解釋型的語言 當程序執(zhí)行的時候 瀏覽器一邊解釋一邊執(zhí)行 而Java是編譯型的語言 必須經過編譯才能執(zhí)行 2 代碼格式不一樣 Java代碼經過編譯后成為二進制文件 而JavaScript是純文本的文件 3 在HTML中的嵌入方式不一樣 Java可以通過小應用程序嵌入HTML文件 而JavaScript可直接寫入一個文本文件或HTML文件中 11 JavaScript編寫客戶端腳本 語法格式 12 在網頁中加入JavaScript 要在你的網頁中使用JavaScript 你首先必須要知道該將它放在哪兒 其實很簡單 只要在你的網頁 HTML文件 中插入和標記對 你就可以在這兩個標記隊之間插入你的JavaScript代碼了 例如 alert Helloworld 13 在網頁中加入JavaScript 另外 你也可以將JavaScript代碼放在另一個單獨的文件里 然后在網頁 HTML文件 中使用 SRC 此單獨文件的路徑 地址 URL 來使用此單獨文件里的JavaScript程序代碼 一般將這個單獨的文件保存為擴展名為 JS的文件 14 Javascript程序 在網頁打開時 彈出消息窗 window alert HelloMyJS 15 事件 在網頁打開時 彈出廣告 functiondd window open form2 htm 16 JAVASCRIPT語法基礎 基本的數(shù)據(jù)類型數(shù)值型 整數(shù)和實數(shù) 字符串型用 括起來的布爾型TRUE和FALSE空值NULL變量的申明方法VARMytest 17 Javascript 表達式 數(shù)學運算表達式 關系運算表達式 字符表達式 邏輯表達式 18 JavaScript語法基礎 語句 注釋 使用 來注釋一個單行 和 可以注釋多行 循環(huán) for do while等等 條件語句 if else switch case 19 條件分支語句 1 if 條件表達式 語句體1 else 語句體2 20 條件分支語句 2 Switch 表達式 case值1 語句體1 break case值2 語句體2 break default 語句體 21 循環(huán)控制語句 for i 1 ijavascript 應用舉例 簡單購物系統(tǒng) 22 JavaScript的事件處理 主要內容1 事件 Event 鼠標或鍵盤的動作稱為事件 2 事件驅動 EventDriver 由事件引發(fā)的一連串程序的動作 稱為事件驅動 3 事件處理程序 EventHandler 對事件進行處理的程序或函數(shù) 4 事件處理程序語法 23 JavaScript的事件處理 1 常見事件 24 JavaScript的事件處理 2 事件處理程序語法將事件處理程序直接嵌入HTML標記符中例如 嵌入 中直接寫在對象后面例如 document onLoad alert 這是事件處理程序 25 JavaScript的事件處理 3 應用舉例例 請輸入基本資料 姓名 26 JavaScript包含兩類函數(shù) 系統(tǒng)函數(shù)用戶自定義函數(shù) JavaScript函數(shù) JavaScript編程基礎 27 函數(shù) functionfun number if number 0 return1 elsereturn 1 28 JavaScript的常用對象 JavaScript是面向對象編程的 所謂 對象化編程 意思是把JavaScript能涉及的內容分成大大小小的對象 對象下面還可繼續(xù)劃分對象直至非常詳細 所有的編程都以對象為出發(fā)點 小到一個變量 大到網頁文檔 窗口甚至屏幕 都是對象 JavaScript的對象可以是一段文字 一幅圖片 一個表單等 每個對象有特定的屬性 方法和事件 對象的屬性是反映該對象某些特定的性質的 如字符串長度 圖像的高寬 文本框的文字等 對象的方法能對該對象做一些操作 如表單的 提交 窗口的 滾動 等 對象的事件能響應發(fā)生在對象上的事情 如提交表單產生表單的 提交事件 點擊產生 點擊事件 不是所有的對象都有以上三個性質 有些沒有事件而只有屬性 29 JavaScript提供了一些非常有用的常用內部對象和方法 用戶不需要用腳本來實現(xiàn)這些功能 這正是基于對象編程的真正目的 主要有JavaScript提供的Window 窗口 string 字符串 math 數(shù)值計算 和Date 日期 內置對象等 內置對象都有自己的方法和屬性 訪問屬性的語法是 對象名 屬性名稱 訪問方法的語法是 對象名 方法名稱 參數(shù)表 所謂的方法就是一個普通的函數(shù)被封裝到一個對象中 JavaScript內置對象 30 下面是一個文檔對象樹 31 JavaScript對象及其層次關系 Window Frame Document Location History Cookie Anchor Applet Area Form Image Link Layer CheckBox Radio Submit Hidden Passward FileUpload Text Textarea Select Reset Button Option 32 Window對象 Window對象是瀏覽器對象中大部分對象的祖先 下面列出一些常用Window對象的方法 1 open URL windowName parameterList open 方法創(chuàng)建一個新的瀏覽器窗口 并在新窗口中載入一個指定的URL地址 2 close close 方法關閉一個瀏覽器窗口 3 alert 彈出一個消息框 4 confirm 彈出一個確認框 5 promt 彈出一個提示框 6 setTimeout expression time 定時設置 在一定的時間后自動執(zhí)行expression的代碼 使用time設置時間 單位是毫秒 7 clearTimeout timer 取消利用setTimeout的定時設置 8 setIntervel expression time 設定一個時間間隔 可以定時反復的自動執(zhí)行expression描述的代碼 使用time設置時間 單位是毫秒 33 Date對象 Date對象提供了兩類方法 從系統(tǒng)中獲得當前的時間和日期 設置當前時間和日期 下表列出了常用的方法 34 String對象字符串對象 一般利用String對象提供的函數(shù)來處理字符串 String對字符串的處理主要提供了下列方法 1 charAt idx 第一個字符位置是 0 返回指定位置處的字符 2 indexOf Chr 返回指定子字符串的位置 從左到右 找不到返回 1 3 lastIndexOf chr 返回指定子字符串的位置 從右到左 找不到返回 1 4 toLowerCase 將字符串中的字符全部轉化成小寫 5 toUpperCase 將字符串中的字符全部轉化成大寫 35 其它對象 1 Document對象 含有當前網頁的各種特性 例如標題 背景及使用的語言等 2 Math對象 數(shù)學對象 既是儲存數(shù)據(jù)運算方法包 又是儲存通用常量的屬性包 3 Location對象 含有當前網頁的URL地址 4 History對象 含有以前訪問過的網頁的URL地址 5 Forms對象 是從屬于瀏覽器對象document的一個數(shù)組 為處理表單及其中的界面對象提供屬性和方法 每一個表單是這個數(shù)組中的一個單獨元素 6 Anchors對象 是從屬于瀏覽器對象document的一個數(shù)組 為處理錨提供屬性和方法 每一個錨就是這個數(shù)組中的一個元素 7 Links對象 是從屬于瀏覽器對象document的一個數(shù)組 為處理超級連接提供屬性和方法 每一個超級連接就是這個數(shù)組中的一個元素 36 基于以上特點 JavaScript在網頁設計中得到了廣泛的應用 例1 一個簡單的JavaScript程序 運行結果如下圖所示 JavaScriptDemo1document writeln 歡迎使用JavaScript document writeln document writeln 悄悄的我走了 正如我悄悄的來 document writeln 我揮一揮衣袖 不帶走一片云彩 37 例2 創(chuàng)建一個按鈕 當單擊該按鈕時在對話框中顯示系統(tǒng)時間 functionshowdate alert Date JavaScript示例 38 例3 顯示頁面 等3秒鐘或點 開始 按鈕都進入頁面 自動執(zhí)行的例子functionNewWindow varmy open toolbar yes menubar yes width 600 heigth 200 若單擊開始按鈕或等待3秒鐘自動進入頁面 39 例4 折疊菜單 如果已顯示了子菜單 則折疊 否則展開子菜單 動態(tài)折疊菜單BODY font size 12pt A font size 10pt red color red menu color blue cursor hand indent margin left 0 3in functionmenuChange varsrc varsubId src window ev