12表单、其它对象的应用（课件）-《网页设计与制作》同步教学（南开大学出版社）

第十二 章 表单、其它对象的应用 目标 理解表单、其它对象的应用范围。 掌握表单、其它对象的应用技术。 概述、专业术语 表单最主要的应用是保存、处理、传送数据，响应Web控件发生的事件 。 其它对象的应用。这些对象包括Navigator、History以及其它一些方法。 术语词汇表 定义在此章节中使用的术语 简易计算器 计算器的制作 简易计算器 计算器的制作——设计界面 <form name="sc"> <input type="text" name="box" size=15><br> <input type="button" value=" 7 " > <input type="button" value=" 8 " > <input type="button" value=" 9 " ><br> <input type="button" value=" 4 " > <input type="button" value=" 5 " > <input type="button" value=" 6 " ><br> <input type="button" value=" 1 " > <input type="button" value=" 2 " > <input type="button" value=" 3 " ><br> <input type="button" value=" 0 " > <input type="button" value=" + " > <input type="button" value=" - " ><br> <input type="button" value=" * " > <input type="button" value=" / " > <input type="button" value=" = " > </form> 简易计算器 计算器的制作——编写js处理函数 <script language="JavaScript"> var st=0; //用于记录计算结果 var opertr; //用于保存运算符 //根据传入的参数的不同进行不同的处理 function count(t) { //代码 } //运算,将结果保存在变量st中 function oper() { //代码 } </script> 简易计算器 计算器的制作——给界面按钮添加事件处理 <form name="sc"> <input type="text" name="box" size=15><br> <input type="button" value=" 7 " onClick="count(7)" > <input type="button" value=" 8 " onClick="count(8)" > <input type="button" value=" 9 " onClick="count(9)" ><br> <input type="button" value=" 4 " onClick="count(4)" > <input type="button" value=" 5 " onClick="count(5)" > <input type="button" value=" 6 " onClick="count(6)" ><br> <input type="button" value=" 1 " onClick="count(1)" > <input type="button" value=" 2 " onClick="count(2)" > <input type="button" value=" 3 " onClick="count(3)" ><br> <input type="button" value=" 0 " onClick="count(0)" > <input type="button" value=" + " onClick="count(‘+’)" > <input type="button" value=" - " onClick="count(‘-’)" ><br> <input type="button" value=" * " onClick="count(‘*’)" > <input type="button" value=" / " onClick="count(‘/’)" > <input type="button" value=" = " onClick="count(‘=‘)" > </form> 简易计算器 计算器的制作——运行 导航栏 水平导航下拉菜单栏的制作 导航栏制作主要分为三大部分：HTML部分、CSS部分和JavaScript部分。 下面我们首先看一下它的html部分。 示例代码12-2 效果如下 导航栏 接下来我们编写相关的JavaScript函数 示例代码见课本12-3 效果如下 导航栏 function setMouseActions(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通过表单等对象来处理数据、控制输入以及实现网站上一些常见功能的方法。 练习与思考 实现一个用户注册页面，要有完善的表单验证。 上面我们制作的是水平导航下拉菜单栏，那么怎么制作一个垂直的导航菜单栏呢？ 学员回顾 函数的编写，利用表单布局页面。 在HTML文件中导入外部的JSS和CSS文件。 通过表单等对象来处理数据、控制输入。 $$