《Web程序设计（第二版）》-郝兴伟-电子教案 05

《《Web程序设计（第二版）》-郝兴伟-电子教案 05》由会员分享，可在线阅读，更多相关《《Web程序设计（第二版）》-郝兴伟-电子教案 05（123页珍藏版）》请在金锄头文库上搜索。

1、Web 程 序 设 计,第 1 章 Web程序设计基础 第 2 章 Web程序及运行环境 第 3 章 标记语言HTML规范 第 4 章 网页设计与制作 第 5 章 客户端编程 第 6 章 服务端编程,目 录,第 5 章 客户端编程,浏览器与客户端脚本程序 JavaScript程序设计基础 事件驱动及事件处理 对象及其操作 常用内部对象及函数 JavaScript浏览器对象模型BOM HTML文档对象模型DOM Web交互 使用AJAX技术 综合举例,Web浏览器与客户端脚本程序,Web浏览器 HTML规范文档阅读器 客户端脚本程序的解释机 JavaScript, Jscript, VBScri

2、pt等 禁止浏览器执行脚本程序 在浏览器的“Internet选项”对话框中，选择“安全”选项卡，选择“Internet”，单击“自定义级别”，在安全设置列表中，可以对“活动脚本”中选则“禁用” Web浏览器产品 Netscape, IE， Maxthon ，Firefox,脚本语言规范与主要的客户端脚本语言,浏览器脚本语言 JavaScript 的出现，网景公司（Netscape） 发布，1995年末 欧洲计算机制造协会（European Computer Manufacturing Association，ECMA）发布了名为ECMAScript Edition 1的脚本语言规范，1997年

3、6月 语法、类型、语句、关键字、保留字、运算符、对象等 1998年，微软在IE 4.0中发布了JScript 3.0，宣称成为第一个遵循ECMA规范来实现 Netscape发布其符合ECMA规范的Javascript1.3 1999年12月，ECMAScript第三版发布，该版本成为脚本程序语言所遵循的标准 JavaScript的组成部分 ECMAScript规范 文档对象模型DOM HTML文档对象模型 XML文档对象模型 浏览器对象模型BOM,在HTML中编写脚本程序,脚本程序标记 语句部分 脚本程序的位置 HTML文档头部 HTML文档体,举例-1检测浏览器中的JavaScript脚本程

4、序版本,检测浏览器中的JavaScript脚本程序版本 JavaScript检测 JavaScript检测 document.write(“浏览器支持JavaScript！“); document.write(“浏览器支持JavaScript 1.0“); document.write(“浏览器支持JavaScript 1.1“); document.write(“浏览器支持JavaScript 1.5“); ,运行结果,不同Web浏览器打开的显示结果,举例-2 JavaScript函数, function fact(n) if (n=0) return 1; else return n*fa

5、ct(n-1); fact(5) = document.write(fact(5); ,JavaScript程序设计基础,JavaScript基本符号 数据和数据类型 常量和变量 表达式和运算符 基本语句 顺序语句 分支语句 重复语句 函数,JavaScript基本符号,基本字符 字母（a、b、z，A、B、Z） 数字（0、1、9） 特殊符号（+、-、*、/、等） 关键字 关键字又称为保留字，它是由字母构成的具有固定含义的单词 如：var代表变量说明，if 表示条件语句等 标识符 表示常量、变量和函数等名称的符号。 标准标识符和用户自定义标识符 标识符的命名 用户自定义标识符必须以字母开始，由任

6、意的字母、数字和“_”组成 命名规范 注释 单行注释，以/开始 多行注释，用/* */ 序言性注释和描述性注释,数据和数据类型,数据类型 整数 实数 字符（串）型（用双引号“或单引号括起来的字符） 布尔型（True和False） 弱类型 变量不必事先声明其数据类型，可以在使用或赋值时确定其数据类型。 一个变量的类型在使用时还可以被改变 例如 var x = “hello“; x=100,常量和常量定义,常量 常量是指在程序执行过程中，其值不发生变化的量。 常量的分类 字面常量 符号常量 常量命名 常量命名有两方面的好处 ，恰当的常量名称可以增加程序的可读性；其次，使用常量名可以便于程序的维护。

7、 常量数据类型 整数常量 实数常量 字符常量 字符，如：a 字符串 ，如：“hello”、“5123”、“x+y” ， “a”,变量和变量说明,常量 所谓“变量”是指在程序执行过程中，其值发生变化的量。 每一个变量都有一个变量名，对应一个特定的内存空间。 变量说明 变量命名的一般形式是： var ; var name=“Zhangsan”; var x,y； 不需要指定数据类型 变量的作用域 局部变量 全局变量,表达式和运算符,表达式 表达式是指将常量、变量、函数、运算符和括号连接而成的式子。 表达式的分类 根据运算结果的不同，表达式可分为 算术表达式（结果为整数或实数） 字符表达式（结果为字

8、符或字符串） 逻辑表达式（结果为true或false）,运算符-1,算术运算符 双目运算符包括：+（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、&（按位与）、（右移）等 。 单目运算符有：-（取反）、（取补）、+（递加1）、-（递减1）等 关系运算符 （大于）、=（大于等于）、=（等于）和！=（不等于） 运算的运算结果为布尔值，true,false,运算符-2,逻辑运算符 ,基本语句,顺序语句 语句块 分支语句 if语句 ifelse语句 switch语句 重复语句 while语句 for语句,顺序语句,语句的执行顺序 过程式程序设计 程序从上到下，顺序执行 面向对

9、象的程序设计 事件驱动 消息映射（map） 语句块 将这多个语句用一对花括号“”和“”括起来，语句之间用分号分开，称为语句块 逻辑上的一个语句,分支结构（条件语句）-1,if语句 一般形式 if ( ) ; 逻辑功能 举例 if （a=b） max=a; min=b; ,分支结构（条件语句）-2,ifelse语句 一般形式 if ( ) ; Else ; 逻辑功能 举例 if （a=b） max=a; min=b; else max=b; min=a; ,分支结构（条件语句）-3,switch 语句 一般形式 switch () case 表达式1 语句1; break; case 表达式2

10、语句2; break; case 表达式n 语句n; break; default: 语句n+1; 逻辑功能,分支结构举例,输入两个数字，一个字符。如果字符为+,则做加法运算，如果字符为-,则做减法运算，如果字符为*,则做乘法运算，如果字符为/,则做除法运算。最后输出计算结果,程序1, var x,y,z; x=parseInt(prompt(“请输入一个正整数x=“,“); y=parseInt(prompt(“请输入一个正整数y=“,“); op=prompt(“请输入一个操作符(+，-，*，/)：“,“); if (op=+) z=x+y; if (op=-) z=x-y; if (op

11、=*) z=x*y; if (op=/) z=x/y; alert(“the result is:“+z); ,程序2, var x,y,z; x=parseInt(prompt(“请输入一个正整数x=“,“); y=parseInt(prompt(“请输入一个正整数y=“,“); op=prompt(“请输入一个操作符(+，-，*，/)：“,“); if (op=+) z=x+y; else if (op=-) z=x-y; else if (op=*) z=x*y; else if (op=/) z=x/y; alert(“the result is:“+z); ,程序3, var x,y

12、,z; x=parseInt(prompt(“请输入一个正整数x=“,“); y=parseInt(prompt(“请输入一个正整数y=“,“); op=prompt(“请输入一个操作符(+，-，*，/)：“,“); switch (op) case +: z=x+y; break; case -: z=x-y; break; case *: z=x*y; break; case /: z=x/y; break; alert(“the result is:“+z); ,重复结构-1,while循环语句 一般形式 while () ； 逻辑功能 例如,重复结构-2,for语句 一般形式 for

13、(表达式1；表达式2；表达式3) ; 逻辑功能 Step1：计算表达式1。 Step2：计算表达式2，如果结果为true，则执行循环体，然后转Step3。否则，结束循环。 Step3：计算表达式3 Step4：无条件转Step2 Step5：循环结束，执行for语句下面的语句。,举例2,输入一系列数，分别求正数和负数的和，输入0结束。,举例2javaScript程序代码, var sum1=0; var sum2=0; for (;) str=prompt(“请输入下整数（0结束）:“,“); sym=str.charAt(0); / 取字符串中的第1个字符 if (sym=-) / 如果为负

14、数 /document.write(sym); data=str.substring(1); / 取第2个字符开始到字符串结束的所有字符 x=-parseInt(data); else x=parseInt(str); if(x0) sum1 += x; else if (x“); document.write(“输入负数的和：“+sum2); ,break和continue语句,break语句 使得程序执行从for语句或while语句中跳出 例如： for (;) if break； Continue语句 使得跳过循环内剩余的语句而进入下一次循环 例如： for (;) if continu

15、e； ,函数,结构化编程 程序规模越来越大 把一个复杂的问题分解成相对独立的较小的问题，如果某个问题还比较复杂，继续划分。直到每个问题都是相对独立的比较简单的问题，然后把这些问题用函数实现。 函数定义 function () 变量说明部分; 语句（函数体）; 函数调用 函数名（实际参数）,函数举例,判断输入的字符串是否为小数,JavaScript程序代码, function isfloat(str) var int1=parseFloat(str); var int2=Math.floor(int1); if (int1int2) return true; else return false;

16、 str=prompt(“请输入一个数字:“,“); if (isfloat(str) alert(“是小数“); else alert(“不是小数“) ,事件驱动及事件处理,面向对象（Object orinted）程序设计 事件，一般是指用户的在某个操作对象上所执行的键盘或鼠标操作 消息，当某个事件发生时，将自动产生一系列的消息（Message） 事件处理程序，每个消息对应一个消息处理函数（Event Handler），从而生成一个消息影射（Message map） 事件驱动的程序执行过程 每一个程序有一个消息循环，用户的操作通过消息影射，来调用和执行相应的函数代码。 消息影射使得函数之间做到了更大程度的解耦，从而大大的增强了程序的可维护性和可扩展性。,Java