《網(wǎng)頁設(shè)計與制作（HTML+CSS+JavaScript）》課件-CORE-12

第十二章表單、其它對象的應(yīng)用目標(biāo)理解表單、其它對象的應(yīng)用范圍。掌握表單、其它對象的應(yīng)用技術(shù)。概述、專業(yè)術(shù)語表單最主要的應(yīng)用是保存、處理、傳送數(shù)據(jù)，響應(yīng)Web控件發(fā)生的事件。其它對象的應(yīng)用。這些對象包括Navigator、History以及其它一些方法。術(shù)語詞匯表定義在此章節(jié)中使用的術(shù)語簡易計算器計算器的制作簡易計算器計算器的制作——設(shè)計界面<formname="sc"> <inputtype="text"name="box"size=15><br> <inputtype="button"value="7"> <inputtype="button"value="8"> <inputtype="button"value="9"><br> <inputtype="button"value="4"> <inputtype="button"value="5"> <inputtype="button"value="6"><br> <inputtype="button"value="1"> <inputtype="button"value="2"> <inputtype="button"value="3"><br> <inputtype="button"value="0"> <inputtype="button"value="+"> <inputtype="button"value="-"><br> <inputtype="button"value="*"> <inputtype="button"value="/"> <inputtype="button"value="="></form>簡易計算器計算器的制作——編寫js處理函數(shù)<scriptlanguage="JavaScript">varst=0;//用于記錄計算結(jié)果

varopertr;//用于保存運算符

//根據(jù)傳入的參數(shù)的不同進行不同的處理

functioncount(t){ //代碼

}

//運算,將結(jié)果保存在變量st中

functionoper(){ //代碼

}</script>簡易計算器計算器的制作——給界面按鈕添加事件處理<formname="sc"> <inputtype="text"name="box"size=15><br> <inputtype="button"value="7"onClick="count(7)"> <inputtype="button"value="8"onClick="count(8)"> <inputtype="button"value="9"onClick="count(9)"><br> <inputtype="button"value="4"onClick="count(4)"> <inputtype="button"value="5"onClick="count(5)"> <inputtype="button"value="6"onClick="count(6)"><br> <inputtype="button"value="1"onClick="count(1)"> <inputtype="button"value="2"onClick="count(2)"> <inputtype="button"value="3"onClick="count(3)"><br> <inputtype="button"value="0"onClick="count(0)"> <inputtype="button"value="+"onClick="count(‘+’)"> <inputtype="button"value="-"onClick="count(‘-’)"><br> <inputtype="button"value="*"onClick="count(‘*’)"> <inputtype="button"value="/"onClick="count(‘/’)"> <inputtype="button"value="="onClick="count(‘=‘)"></form>簡易計算器計算器的制作——運行導(dǎo)航欄水平導(dǎo)航下拉菜單欄的制作導(dǎo)航欄制作主要分為三大部分：HTML部分、CSS部分和JavaScript部分。下面我們首先看一下它的html部分。示例代碼12-2效果如下導(dǎo)航欄接下來我們編寫相關(guān)的JavaScript函數(shù)示例代碼見課本12-3效果如下導(dǎo)航欄functionsetMouseActions(node){ node.onMouseOver=function() //當(dāng)鼠標(biāo)懸浮在此節(jié)點上時觸發(fā)鼠標(biāo)懸浮事件調(diào)用function()函數(shù)

//function()是匿名函數(shù)標(biāo)識

{this.getElementsByTagName("ul")[0].style.display="block"; //顯示此li節(jié)點下的第一個ul標(biāo)簽內(nèi)容} node.onMouseOut=function() //當(dāng)鼠標(biāo)移開此節(jié)點時觸發(fā)onMouseOut事件調(diào)用function()函數(shù)

{this.getElementsByTagName("ul")[0].style.display="none"; //隱藏此li節(jié)點下的第一個ul標(biāo)簽內(nèi)容}}級聯(lián)效果在網(wǎng)頁中實現(xiàn)級聯(lián)效果請看相關(guān)的代碼部分見課本12-3效果如下總結(jié)本章介紹了對象的綜合應(yīng)用。通過本章的學(xué)習(xí)，可以使大家掌握JavaScript通過表單等對象來處理數(shù)據(jù)、控制輸入以及實現(xiàn)網(wǎng)站