第七讲(下)DHTML介绍-计算机网络安全与防护的-互联网软件开发课件.ppt

《第七讲(下)DHTML介绍-计算机网络安全与防护的-互联网软件开发课件.ppt》由会员分享，可在线阅读，更多相关《第七讲(下)DHTML介绍-计算机网络安全与防护的-互联网软件开发课件.ppt（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、互联网软件开发互联网软件开发授课人：罗显刚授课人：罗显刚授课人：罗显刚授课人：罗显刚电电电电话：话：话：话：QQQQ：EmailEmail：1414二月二月二月二月20232023第七章：第七章：DHTML介绍介绍内容提纲内容提纲1、DHTML概述概述2、文档对象模型、文档对象模型3、JavaScript介绍介绍7.3.1 JavaScript概述什么是JavaScriptJavaScript是一种基基于于对象象的的脚脚本本语言言，用于开发基于客户端和基于服务器的Internet应用程序 脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。脚本程序既可以在服务器端运行（称为服务器端

2、脚本，例如ASP脚本、PHP脚本等），也可以直接在浏览器端运行（称为客户端脚本）。JavaScript是平台无关的语言，几乎被所有浏览器支持，所以已经成为客户端脚本的标准。7.3.1 JavaScript概述JavaScript的特点（1）1.JavaScript是一种脚本语言语法和规则没有可编译的编程语言那样严格和复杂，主要用于格式化文本和使用可编程语言编写的已编译好的组件。2.JavaScript是基于对象的语言 面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如，“日期”对象。3.JavaScript是事件驱动的

3、语言JavaScript是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。7.3.1 JavaScript概述JavaScript的特点（2）4.JavaScript较高的安全性JavaScript不能将数据存储在Web服务器或用户的计算机上，更不能对用户文件进行修改或删除操作。5.JavaScript是平台无关的语言JavaScript则并不依赖于具体的计算机平台（虽然有一些限制），它只与解释它的浏览器有关。不论使用Macintosh还是Windows，或是UNIX版本的NetscapeNavigator，JavaScript都可正常运行。7.3.

4、1 JavaScript概述JavaScript的功能JavaScript的功能总体可以归结为两类：交互性交互性使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。动态性性JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使WEB页看上去活泼诱人。7.3.1 JavaScript概述JavaScript与Java语言的比较1.Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户方并由客户方解释执行。2.JavaScript是基于对象的，它自身具有已创建完毕的对象而J

5、ava则是面向对象的，对象必须从类中创建。3.JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplets则是由文档引用，其代码以字节代码的形式保存在另一个独立的文件中。7.3.1 JavaScript概述JavaScript与Java语言的比较（2）4.在HTML文档中，用标识标明JavaScript脚本；而Javaapplets则用标识来标明。5.JavaScript采用弱类型；而Java则采用强类型。6.JavaScript采用动态联编；而Java，则采用静态联编。7.2.2 JavaScript的使用JavaScript的使用JavaScript作为客户端程序嵌入

6、网页的方法：方式一：直接在HTML中添加JavaScript代码(HTML页面任意位置)JavaScript代码；方式二：导入JavaScript文件(写在标记中)l方式三:在程序处理中直接使用javascript相关函数 onclick=7.2.2 JavaScript的使用使用外部文件 祝学有所成!document.write(嗨！你好吗？)E3-2-2.js7.2.2 JavaScript的使用在事件处理程序中使用JavaScript JavaScript示例 7.2.3 JavaScript基本语法JavaScript变量（1）JavaScript支持以下几种数据类型数据类型描述数字型

7、(Number)整数或实数逻辑型或布尔型(Boolean)True或False字符串型(String)如“Hello World”，“123.4”空型(null)表示空值的特殊关键字 创建变量示例:uvar anumber=137;/变量的值是一个数 uvar result=true;uvar astring=“1”;/变量的值也可以是一个字符串 uvar astring1=“hello”;7.2.3 JavaScript基本语法JavaScript变量（2）变量的作用域Function1、Function2和Function3都可以访问脚本全局变量Function1局部变量aFunction

8、2局部变量bFunction3局部变量c7.2.3 JavaScript基本语法JavaScript运算符赋值操作符：u=、+=、-=、*=、/=、%=、=、=、&=、=、|=；条件运算符：ustatus=(age=18)?“true:“false；算术运算符：u+、-、*、/、%、+和-，y=+x；位逻辑运算符：u&、|、;、逻辑运算符：u&、|、!条件运算符：u=、=、=、!=；连接操作符+用于连接两个字符串（字符串运算符）：ux=Hello;y=World!;x+y 为 Hello World!7.2.3 JavaScript基本语法表达式表达式用于在不同上下文中操作和计算变量。表达式是

9、任意一组有效的文字、变量和运算符，其计算结果为一个值。表达式类型算术：计算结果为一个数字逻辑：计算结果为一个布尔值字符串：计算结果为一个字符串表达式通过运算符组合变量和文字。7.2.3 JavaScript基本语法JavaScript语句条件语句if else语句switch语句循环语句while循环语句do while循环语句break和continue语句进一步控制循环break语句提供无条件跳出当前出循环结构的功能。continue语句的作用是终止当次循环，跳转到循环的开始处继续执行下一次的循环。7.3.3 JavaScript内置对象JavaScript被称为是“基于对象的”语言.Ja

10、vaScript程序中可操作的对象有三种：1）JavaScript提供的内置对象（array、date、math、screen）2）浏览器对象(window、document、form)3）程序中自定义的对象(new)。一个对象包含两个元素：1）属性property（变量）2）方法method（函数）要访问对象属性，必须指定对象名及属性：objectName.propertyName 要访问对象方法，必须指定对象名及方法：objectName.method()7.3.3 JavaScript内置对象JavaScript内置对象例子-documentdocument 是对应一个.html文档的对

11、象，浏览器读进文档后生成；document.writeln(“hello”)是这个对象的一个方法，输出带换行的字符串；document.location 是该对象的一个属性，含有它的URL。7.3.3 JavaScript内置对象数组对象（Array）格式：var variable=new Array(n1,n2,)属性：length，它指明了数组的长度。方法：join()将数组值连接变为一个字符串；reverse()将数组值倒序；sort()将对数组值进行排序;举例：emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David G

12、reene;document.write(emp.length+);document.write(emp.join()+);document.write(emp.reverse().join()+);document.write(emp.sort().join()+;二维数组：7.3.3 JavaScript内置对象日期对象用法：DateObject=new Date(parameters)常用方法：a、设定日期setDay()setMonth()setYear()；setTime()设定时间，开始用毫秒数来计时b、日期格式转换.Date.UTC()返回一个通用时间，距1970年1月1日午夜的

13、毫秒。c、获取日期 .Date.getDay().Date.getMonth().Date.getYear()d、处理时区.tolocaleString()将日期时间值转换为的字符串(当地时间);.toGMTString()将日期时间值转换为的字符串(GMT时间)7.3.3 JavaScript内置对象Math对象Math对象包含用来进行数学计算的属性和方法，其属性也就是标准数学常量，其方法则构成了数学函数库。l属性：Math.E：为自然对数的底(约为2.718)；Math.PI：为圆周率(约为3.14159)；Math.LN10：l方法：Math.abs()绝对值计算；Math.pow()数

14、的幂；Math.sqrt()计算平方根；.cos()、.sin()、.tan()、.acos、.asin()、.atan()、max();7.3.4 JavaScript中的事件事件对象的概念事件可以由用户生成，也可以由系统生成每个事件都有与之相关联的Event对象Event 对象提供下列信息：事件类型事件发生时光标的位置Event 对象可以用作事件处理程序的一部分7.3.4 JavaScript中的事件事件的生命周期事件的生命周期通常包含下列阶段：1.与发生的事件相关联的用户操作或条件2.立即更新 Event 对象以反映事件的状态3.触发事件4.调用相关联的事件处理程序5.事件处理程序执行其

15、操作并返回7.3.4 JavaScript中的事件事件处理程序事件处理程序有两种表现形式：（1）在HTML标记中执行事件处理程序 如：（2）以属性的形式出现的事件处理程序 object.eventhandler=function;如：window.onload=OpenWindow;function OpenWindow()7.3.4 JavaScript中的事件主要有以下一些事件：lonLoad：在网页或图像装载时发生 示例lonUnload：在退出或关闭网页文件时发生lonclick：单击鼠标左键时发生 示例lonBlur：在网页中的某个对象失去激活状态时发生，常用在表单元素中 示例lonFocus：在网页的某个对象刚刚被激活时产生，它与onBlur正好相反 lonMouseover/onMouseout：在鼠标移动到/离开某个对象上时发生 lonSelect：在文本域中的某段文字被选中时发生lonChange：在表单中的文本域中的内容发生变化时发生 示例lonSubmit：在表单提交之前执行此事件，常用于对表单内容进行验证 lonMouseDown/onMouseUp：当鼠标在某个对象上按下/抬起时发生 lonAbort：当浏览器在装载图像过程中突然中断时发生lonError：在网页文件或图像不能正常装载时发生？