《网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源5JavaScript编程电子课件》由会员分享，可在线阅读，更多相关《网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源5JavaScript编程电子课件（102页珍藏版）》请在金锄头文库上搜索。
1、,网页设计与制作课程开发组制作,主讲人：阚宝朋 管曙亮,本章要点,单元5 JavaScript编程,任务1 下拉菜单的设计 任务2 表格美化的设计 任务3 表单验证的设计,引例描述,学习计划： 第一步：学习JavaScript基础，综合HTML与CSS技术完成下拉菜单的设计。 第二步：系统学习DOM对象树与相关事件，实现表格美化的设计。 第三步；综合运用JavaScript技术，实现表单验证的设计。,任务1 下拉菜单的设计,【任务陈述】 本任务将综合HTML、CSS、JavaScript技术设计水平方向排列的一级菜单、垂直方向上下拉的二级菜单，鼠标移入或移出事件控制二级菜单显示或隐藏。,实例,
2、任务1 下拉菜单的设计,【知识准备】 5.1 DHTML简介,使用JavaScript、VBScript、Document Object Modle（DOM）、layers或者CSS等技术。 运用JavaScript脚本，实现根据用户的动作对html页面作出的响应。 根据DOM对象事件驱动机制，实现页面元素的鼠标事件、键盘事件。 CSS是DOM中的一部分，使用脚本语言能够改变CSS中的一些属性，从而，使页面能产生许多显示效果,任务1 下拉菜单的设计,【知识储备】 5.2 JavaScript简介,Javascript是一种基于对象和事件驱动并具有安全性能的脚本语言，使用它的目的是与HTML超文
3、本标记语言一起实现在Web客户端与Web服务端进行交互。 Javascript是一种比较简单的编程语言，向Web页面的HTML文件增加一段脚本，不需要单独编译，当一个支持Javascript浏览器打开这个页面时，它会读出这个脚本并执行其指令。 通过编写Javascript脚本实现Web客户端页面菜单设计、幻灯片设计、表格的美化、表单的验证等等，让用户有及时操作体验和赏心悦目的视觉享受。,任务1 下拉菜单的设计,5.2 JavaScript简介,JavaScriptJavaScript的编辑与运行 Hello JavaScript! document.write(“Hello“); docume
4、nt.write(“JavaScript！ /*注释*/“); /*注释*/ document.write(“JavaScript 很精彩！“); window.alert(“Hello JavaScript！“); /可简写为alert(“Hello JavaScript！“); ,任务1 下拉菜单的设计,5.3 JavaScript特点,JavaScript是一种解释性的脚本编写语言。 Javascript是基于对象的语言。 简单性（语句结构与数据类型） 安全性（不允许直接访问客户端和服务端文件） 动态性（实现对客户端事件的响应） 跨平台性（与浏览器有关、与操作系统无关）,任务1 下拉菜单
5、的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,一、数据类型与常量 JavaScript中有四种基本的数据类型： 数值型，包括整型和实型 如：120，35.23; 字符串型，用引号包围的文本 如：“我是字符串1“,我是字符串2 布尔型，只有两者取值 如：true、false。 空值，表示从未赋值的值，只有一种取值 如：null。,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,二、变量的定义 变量定义作用： 明确指出变量的名称、变量的类型及其变量的作用域。 变量的命名规则： （1）变量名必须以字母或下划线开头，中间可以出现数字、字母或
6、下划线。变量名称中不能有空格、(+)、(-)、(,)或其它符号以免引起误解。其它（如函数、属性等）需要命名的也与此相似。 （2）不能使用JavaScript中的关键字作为变量。 （3）注意变量名字能代表其存储数据的意义，见名知义，增强可读性，以节省程序调试与开发的时间。,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,三、变量的作用域 JavaScript中变量的作用域有全局变量和局部变量之分。 全局变量 定义在所有函数体之外，其作用范围是所有的函数； 局部变量 定义在函数体之内，只在该函数内可见，其它函数则不能访问它。 全局变量与局部变量同名 同名局部变
7、量所在函数内会屏蔽全局变量，而优先使用局部变量。,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,变量作用域的演示 document.write(“全局变量与局部变量的演示:“); var myname = “张三“; document.write(“函数外：myname=“ + myname+“); function myfun() var myname; myname = “李四“; document.write(“函数内：myname=“ + myname + “); myfun(); document.write(“函数外：myname=“ + m
8、yname + “); ,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,四、数组 数组是用来存储和操作一批具有相同类型数据的数据类型，数组是对象类型的，有多种预定义的方法以方便程序员使用。 数组的定义与初始化 1）单纯创建数组 var menus=new Array(); 2）创建数组的同时规定数组大小 var menus =new Array(4); 3）直接初始化 直接初始化的方法如下： var menus =new Array(“首页“,“专业建设“,“师资队伍“,“教学条件“,“改革建设“); 这里就直接初始化了数组，也可以采用如下方法初始化。
9、var menus =“首页“,“专业建设“,“师资队伍“,“教学条件“,“改革建设“;,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,二维数组 二维数组的定义是在一维数组基础上定义的，即当一维数组的元素又都是一维数组时，就形成了二维数组。 二维数组的初始化 var submenus =new Array( new Array(), new Array(“建设目标“,“建设建设“,“培养队伍“), new Array(“负责人“,“队伍结构“,“任课教师“,“教学管理“,“合作办学“) ); 以上的代码也可以表示下列等价代码： var submenus
10、=new Array(); submenus0= ; submenus1= “建设目标“,“建设建设“,“培养队伍“; submenus2= “负责人”,“队伍结构”,“任课教师”,“教学管理”,“合作办学”; 以上代码还可以这样写： var submenus = ,“建设目标“,“建设建设“,“培养队伍“, “负责人“,“队伍结构“,“任课教师“,“教学管理“,“合作办学“;,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,数组元素的访问 通过数组名和下标访问数组元素 。 一维数组的元素使用数组名和下标来访问。 格式为：一维数组名下标 二维数组的元素必须
11、使用数组名和两个下标来访问，第一个为行下标，第二个为列下标。 格式为：二维数组名行下标 列下标 数组元素的下标不能出界，否则会显示“undefined”（空值）。,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,数组的属性与方法 数组的属性只有一个，就是length属性。 数组的方法 数组常用方法,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,数组方法的使用示例 var menus = new Array(“首页“, “专业建设“, “师资队伍“); /toString()：把数组转换成一个字符串，返回该串 docu
12、ment.write(menus.toString(); document.write(“); /join()：把数组转换成一个用符号连接的字符串，返回该串 document.write(menus.join(“); document.write(“); /shift()：将数组头部的一个元素移出，返回移除元素 document.write(menus.shift(); document.write(“); document.write(menus.toString(); document.write(“);,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式
13、,五、运算符与表达式 运算符的作用 用于操作数据特定符号的集合叫运算符，运算符操作的数据叫操作数，运算符与操作数连接后的式子叫表达式，运算符也可以连接表达式构成更长的表达式。,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,五、运算符与表达式 （1）算术运算符,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,五、运算符与表达式 （2）关系运算符,任务1 下拉菜单的设计,5.4 JavaScript常量、变量、数组、运算符和表达式,五、运算符与表达式 （3）逻辑运算符,任务1 下拉菜单的设计,5.4 JavaScript
14、常量、变量、数组、运算符和表达式,（4）逗号运算符 逗号运算符可以连接几个表达式，表达式的值为最右边表达式的值。逗号运算符的运算优先级最低。 （5）赋值运算符 赋值运算符不仅实现了赋值功能，由它构成的表达式也有一个值，值就是赋值运算符右边的表达式的值，赋值运算符的优先级很低，仅次于逗号运算符。 （6）条件运算符 条件运算符是三元运算符，使用该运算符可以方便地由条件逻辑表达式的真假值得到各自对应的取值。或由一个值转换成另外两个值，使用条件运算符嵌套多个值。,任务1 下拉菜单的设计,5.5 程序控制结构,结构化程序有三种基本结构，它们是：顺序结构、分支结构和循环结构。 顺序结构：从前到后顺序执行语
15、句或语句块。 分支结构 ：有选择的执行语句或语句块。 循环结构：多次执行语句或语句块 一、分支结构 二、循环结构 三、continue语句 四、break语句,任务1 下拉菜单的设计,5.6 函数的定义与引用,函数的作用 函数为程序设计人员提供了方便，在进行复杂的程序设计时，通常是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数，从而使各部分充分独立，任务单一，可重复使用，程序清晰、易懂、易读、易维护。 函数是拥有名字的一系列JavaScript语句的有效组合。只要这个函数被调用，就意味着这一系列JavaScript语句按顺序被解释执行。 为了使函数具有通用性，给函数添加
16、形式参数列表，以接受外部提供的实际参数列表，并在函数中使用这些参数。,任务1 下拉菜单的设计,5.6 函数的定义与引用,一、函数的定义 函数的定义是使用function关键字实现的,格式如下： function 函数名(形式参数列表) 函数体语句块 JavaScript中的函数可以有返回值，也可以没有返回值. 返回值是通过return关键字加表达式实现的。 /函数的定义 function Level (level) return (level = 1 ? “优“ : level = 2 ? “良“ : level = 3 ? “中“ : ,任务1 下拉菜单的设计,5.6 函数的定义与引用,二、函数的调用 函数必须使用函数名并提供相应的实际参数列表完成调用。在没有提供相应的实际参数列表时，缺省参数按未定义(undefined常量)处理。 /函数的定义 function Level(level) va
