《網(wǎng)頁(yè)設(shè)計(jì)與制作》PPT課件.ppt

JavaScript基礎(chǔ) JavaScript內(nèi)容介紹 客戶(hù)端和服務(wù)器端腳本語(yǔ)言JavaScript概述基本語(yǔ)法流程控制函數(shù)和事件內(nèi)置對(duì)象文檔對(duì)象模型 網(wǎng)頁(yè)的腳本語(yǔ)言 客戶(hù)端的腳本語(yǔ)言在瀏覽器上運(yùn)行的Javascript服務(wù)器端的腳本語(yǔ)言在服務(wù)器上運(yùn)行后把結(jié)果發(fā)送到客戶(hù)端Jsp asp php等等 JavaScript概述 JavaScript是客戶(hù)端腳本語(yǔ)言 是一種基于對(duì)象 Object 和事件驅(qū)動(dòng) EventDriven 的腳本語(yǔ)言 JavaScript認(rèn)為文檔和顯示文檔的瀏覽器都是由不同的對(duì)象組成的集合 這些對(duì)象具有一定的屬性 你可以對(duì)這些屬性進(jìn)行修改或計(jì)算 JavaScript的基本特點(diǎn) 腳本語(yǔ)言基于對(duì)象簡(jiǎn)單性動(dòng)態(tài)性跨平臺(tái)性 JavaScript與Java的區(qū)別 JavaScript和Java是兩個(gè)公司開(kāi)發(fā)的不同產(chǎn)品Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言而JavaScript是Netscape公司的產(chǎn)品 其目的是為了擴(kuò)展其瀏覽器功能現(xiàn)在JavaScript已被標(biāo)準(zhǔn)化為ECMAScript 主流的瀏覽器都支持 認(rèn)識(shí)JavaScript functionsum vars1 document f1 s1 value vars2 document f1 s2 value vars3 Number s1 Number s2 document f1 s3 value s3 效果演示 示例說(shuō)明 在標(biāo)識(shí)標(biāo)簽對(duì)之間就可加入JavaScript腳本代碼 其中的language屬性指明這段代碼是用JavaScript來(lái)編寫(xiě)的 JavaScript可以直接嵌入到html中通過(guò)瀏覽器直接運(yùn)行的 Html中嵌入JavaScript代碼的方式 放在標(biāo)簽中 推薦使用 放在標(biāo)簽中 JavaScript中的注釋 JavaScript中的注釋和Java基本一致 也分為單行和多行注釋 注釋信息僅僅做為說(shuō)明來(lái)使用 在程序的解釋和運(yùn)行中是被忽略的 單行注釋 使用 符號(hào)對(duì)單行信息進(jìn)行注釋多行注釋 使用 對(duì)多行信息進(jìn)行注釋例子 下面的alert 是彈出一個(gè)對(duì)話(huà)框 下面的alert 是彈出一個(gè)對(duì)話(huà)框 alert 這是第一個(gè)JavaScript例子 JavaScript基本語(yǔ)法 數(shù)據(jù)類(lèi)型變量及類(lèi)型轉(zhuǎn)換表達(dá)式和運(yùn)算符數(shù)組 數(shù)據(jù)類(lèi)型 字符串 abc hello 你好 數(shù)字 包括整數(shù)數(shù)字和浮點(diǎn)型數(shù)字布爾值 true和false空值 null未定義值 undefined 變量及類(lèi)型轉(zhuǎn)換 變量的聲明 使用var來(lái)聲明變量varstr 你好 類(lèi)型轉(zhuǎn)換 字符 數(shù)字Number Number 1 數(shù)字 字符String String 1 表達(dá)式和運(yùn)算符 算術(shù)運(yùn)算符 比較運(yùn)算符 邏輯運(yùn)算符 流程控制 順序 按照程序編寫(xiě)的順序來(lái)執(zhí)行條件if 條件 語(yǔ)句1elseif 條件 else語(yǔ)句nswitch 表達(dá)式 caselabel1 語(yǔ)句1 break caselabeln 語(yǔ)句n break default 語(yǔ)句n 1 循環(huán)for 初值 條件 更新 語(yǔ)句 do 語(yǔ)句 while 條件 while 條件 語(yǔ)句 函數(shù) 函數(shù)在JavaScript中的函數(shù)可以簡(jiǎn)單理解為一組語(yǔ)句 用來(lái)完成一系列工作創(chuàng)建函數(shù)function函數(shù)名 參數(shù)1 參數(shù)2 參數(shù)N 函數(shù)體 語(yǔ)句集 事件調(diào)用函數(shù) 事件 就是Web頁(yè)面在瀏覽器處于活動(dòng)狀態(tài)時(shí)發(fā)生的各種事情 如 瀏覽器加載 卸載一個(gè)頁(yè)面 用戶(hù)單擊鼠標(biāo) 移動(dòng)鼠標(biāo) 以及按下鍵盤(pán)的某個(gè)鍵事件調(diào)用函數(shù) 當(dāng)發(fā)生了某個(gè)事件之后去調(diào)用函數(shù)進(jìn)行處理的方式 事件調(diào)用函數(shù)的格式 on事件名 事件處理函數(shù) 主要的事件調(diào)用函數(shù) 事件調(diào)用函數(shù)舉例 functionclickme alert 按鈕被點(diǎn)擊 演示效果 JavaScript中的對(duì)象 內(nèi)置對(duì)象JavaScript將一些非常常用的功能預(yù)先定義成對(duì)象 用戶(hù)可以直接使用 這種對(duì)象就是內(nèi)置對(duì)象瀏覽器對(duì)象網(wǎng)頁(yè)和瀏覽器本身的各種元素在JavaScript程序中的體現(xiàn)它使JavaScript可以定位 改變內(nèi)容以及展示HTML頁(yè)面的所有元素自定義對(duì)象JavaScript允許用戶(hù)自定義對(duì)象進(jìn)行使用 常見(jiàn)內(nèi)置對(duì)象 Math數(shù)學(xué)對(duì)象提供了進(jìn)行所有基本數(shù)學(xué)計(jì)算的功能和常量的屬性和方法Date日期對(duì)象提供了獲取 設(shè)置日期和時(shí)間的屬性和方法String字符串對(duì)象提供了對(duì)字符串進(jìn)行處理的屬性和方法Array數(shù)組對(duì)象用來(lái)創(chuàng)建數(shù)組 內(nèi)置對(duì)象舉例 alert Math abs 1 返回絕對(duì)值alert Math round 3 8 返回四舍五入之后的整數(shù)alert Math random 返回0和1之間的一個(gè)偽隨機(jī)數(shù)效果演示 瀏覽器對(duì)象 窗口對(duì)象 Window Window對(duì)象處于對(duì)象層次的最頂端 它提供了處理瀏覽器窗口的方法和屬性 位置對(duì)象 Location Location對(duì)象提供了與當(dāng)前打開(kāi)的URL一起工作的方法和屬性 它是一個(gè)靜態(tài)的對(duì)象 歷史對(duì)象 History History對(duì)象提供了與歷史清單有關(guān)的信息 文檔對(duì)象 Document document對(duì)象包含了與文檔元素 elements 一起工作的對(duì)象 它將這些元素封裝起來(lái)供編程人員使用 文檔對(duì)象模型 window screen history document location frame archors links area forms applets images plugins text textarea password radio reset submit checkbox button select option file 各種瀏覽器對(duì)象形成了一種層次模型 我們稱(chēng)其為文檔對(duì)象模型 DocumentObjectModel 簡(jiǎn)稱(chēng)DOM 瀏覽器對(duì)象的引用方式 對(duì)應(yīng)于文檔對(duì)象模型中的層次關(guān)系 JavaScript對(duì)瀏覽器對(duì)象的引用是逐層引用例如 在引用forms對(duì)象時(shí) 使用window document forms通過(guò)對(duì)象的name屬性來(lái)引用例如 引用一個(gè)name屬性是form1的表單對(duì)象 使用window document form1 數(shù)組型瀏覽器對(duì)象的引用在文檔對(duì)象模型中 有些對(duì)象屬于數(shù)組型對(duì)象 如document對(duì)象下一層的images links forms等對(duì)象 在引用這種數(shù)組對(duì)象時(shí) 可以使用對(duì)象在數(shù)組中的位置 下標(biāo) 來(lái)引用例如 window document forms 0 表示引用文檔中的第一個(gè)表單 注 Window對(duì)象作為文檔對(duì)象模型中的最頂層對(duì)象 JavaScript認(rèn)為它是默認(rèn)的 因此可以不寫(xiě)出來(lái) 如 window document forms可以寫(xiě)成document forms window對(duì)象 介紹 Window對(duì)象也就是窗口對(duì)象 處于文檔對(duì)象模型的最頂層 代表當(dāng)前瀏覽器窗口 主要介紹兩個(gè)方法 open url windowname windowfeature 功能 打開(kāi)一個(gè)新的窗口參數(shù)說(shuō)明 url 要打開(kāi)窗口的url地址Windowname是新打開(kāi)窗口的名稱(chēng)Windowfeatures是新窗口的實(shí)際特性 窗口的外觀(guān) 可選項(xiàng)Windowfeatures的可能參數(shù) height窗口的高度width窗口的寬度menubar是否有菜單scrollbars是否有滾動(dòng)條resizable窗口大小是否可以改變close 功能 關(guān)閉窗口 window對(duì)象 示例 functioncreatwindow window open 1 html mywindow menubar no height 200 width 300 functionclosewindow window close 演示效果 window的三種對(duì)話(huà)框方法 alert 方法彈出一個(gè)顯示信息的警示對(duì)話(huà)框alert 您好 confirm 方法彈出帶有提示信息的確認(rèn)對(duì)話(huà)框confirm 確認(rèn)刪除嗎 prompt 方法彈出一個(gè)帶有輸入信息的對(duì)話(huà)框name prompt 請(qǐng)輸入你的名字 document對(duì)象 document對(duì)象是JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)各種功能中最常用的基本對(duì)象之一 它代表瀏覽器窗口中的文檔 可以用來(lái)處理文檔中包含的html元素 如表單 圖像 超鏈接等 write 作用 向文檔中寫(xiě)入文本舉例說(shuō)明document write 歡迎大家 效果演示 document對(duì)象 續(xù) getElementsByName 通過(guò)html標(biāo)簽的name屬性來(lái)獲得一些元素對(duì)象返回的是具有相同name屬性的html元素對(duì)象數(shù)組getElementById 通過(guò)html標(biāo)簽的id屬性來(lái)獲得一個(gè)html元素對(duì)象返回具有該id屬性的html元素對(duì)象functioncheck varname document getElementsByName name varage document getElementById age alert name 0 value alert age value 示例效果