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

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