《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-12

第十二章表单、其它对象的应用目标理解表单、其它对象的应用范围。掌握表单、其它对象的应用技术。概述、专业术语表单最主要的应用是保存、处理、传送数据，响应Web控件发生的事件。其它对象的应用。这些对象包括Navigator、History以及其它一些方法。术语词汇表定义在此章节中使用的术语简易计算器计算器的制作简易计算器计算器的制作——设计界面<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处理函数<scriptlanguage="JavaScript">varst=0;//用于记录计算结果

varopertr;//用于保存运算符

//根据传入的参数的不同进行不同的处理

functioncount(t){ //代码

}

//运算,将结果保存在变量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>简易计算器计算器的制作——运行导航栏水平导航下拉菜单栏的制作导航栏制作主要分为三大部分：HTML部分、CSS部分和JavaScript部分。下面我们首先看一下它的html部分。示例代码12-2效果如下导航栏接下来我们编写相关的JavaScript函数示例代码见课本12-3效果如下导航栏functionsetMouseActions(node){ node.onMouseOver=function() //当鼠标悬浮在此节点上时触发鼠标悬浮事件调用function()函数

//function()是匿名函数标识

{this.getElementsByTagName("ul")[0].style.display="block"; //显示此li节点下的第一个ul标签内容} node.onMouseOut=function() //当鼠标移开此节点时触发onMouseOut事件调用function()函数

{this.getElementsByTagName("ul")[0].style.display="none"; //隐藏此li节点下的第一个ul标签内容}}级联效果在网页中实现级联效果请看相关的代码部分见课本12-3效果如下总结本章介绍了对象的综合应用。通过本章的学习，可以使大家掌握JavaScript通过表单等对象来处理数据、控制输入以及实现网站