《客户端编程》PPT课件.ppt

2019年8月1日,1,第三章 客户端编程,2019年8月1日,2,本节课的内容：,什么是脚本语言 JavaScript概述 JavaScript嵌套HTML的方式 JavaScript基本语法 事件触发和处理 对象的基础知识 JavaScript的对象模型 window 对象 document 对象 form 对象,2019年8月1日,3,1、什么是脚本语言,脚本语言源于UNIX操作系统 应用于web页面的脚本语言有javaScript、VBScript和用于编写CGI脚本的perl、shellScript等 根据脚本程序执行的地点不同分为服务器端脚本和客户端脚本，javaScript、VBScript既可以作为客户端脚本语言，又可作为服务器端脚本语言。,2019年8月1日,4,2、JavaScript 概述,HTML仅仅是一种标记语言，它能作的事情有限。 用HTML建立的文档是静态的。不能处理客户端的活动。 Scripting 使Web页变成动态的。 目前比较流行的脚本语言是JavaScript、Perl、VBScript。,2019年8月1日,5,JavaScript是一种潜入在HTML文件中的脚本语言，由Netscape公司在1995年的Netscape2.0中推出，最初称为Mocha，后来又改为LiveScript，95年Java语言出现后，引进java的有关概念，又改为JavaScript JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，可以开发客户端的应用程序。,2019年8月1日,6,JavaScript 的特性： JavaScript脚本是由一系列的程序指令语句组成。 是事件驱动的，用户在网页上的某个动作就是一个事件，由嵌入网页中的脚本对这个事件作出响应。 是平台独立的，不论什么机器只要装有支持JavaScript的浏览器就可以正常运行 不涉及耗时的编译， 没有复杂的语法和规则集合 是基于对象而不是面向对象的，本身已经有创建好的对象，是不完全的面向对象，不支持分类、继承、封装等特性 支持诸如：switchcase、Ifelse、while 、 for、 do while等之类的构造 安全性、动态性，区分大小写，使用分号组合语句,2019年8月1日,7,JavaScript 和 Java JavaScript 是由客户机进行解释的, 而 Java 在服务器上进行编译. JavaScript 是解释性语言, 而 Java 代码是在执行前先被编译。 不象Java, JavaScript.不需要声明变量的数据类型 不象Java, JavaScript 能够存取浏览器对象和功能 JavaScript 多数用于客户端的活动，有有限的对象、方法、属性和数据类型是不可扩展的。这与Java 的类和方法是不同的。,2019年8月1日,8,两种语言间的异同作如下比较： 基于对象和面向对象 解释和编译 强类型和弱类型 代码格式不一样 嵌入方式不一样 ,2019年8月1日,9,Javascript的代码样例 P23 3-1 执行解释 Javascript 中的注释 / /*这里注释*/,2019年8月1日,10,JavaScript的注释 /语句 单行注释，JavaScript将忽略这一行后面的语句。 /* 语句集 */ 注释多行，JavaScript将忽略/*和*/之间的所有语句。,2019年8月1日,11,Javascript程序运行环境,软件环境： Windows 95/98或Windows NT。 Netscape Navigator x.0或Internet Explorer x.0。 用于编辑HTML文档的字符编辑器(Notepad等)或HTML文档编辑器。 硬件环境： 基本内存32M。 CRT至少需要256颜色，分辨率在640X480以上。 CPU至少133以上。 鼠标和其它外部设备（根据需要选用）。,2019年8月1日,12,3、JavaScript嵌套在HTML中的方式,3.1 在HTML中嵌套 JavaScript JavaScript 程序在 HTML 文档中运行 JavaScript 语句放在 语句标签对内 JavaScript 代码可以放在HTML文件中的任何位置,2019年8月1日,13, 页标题 HTML文本 HTML文本 ,2019年8月1日,14,3.2 JavaScript 源文件,可以一个外部文件包括脚本 假如： 代码比较复杂 计划经常修改该代码 计划在多个页面中使用使用相同的代码 这是有用的 文件的扩展名为 .js 外部文件的引用（两个属性） ,2019年8月1日,15,JavaScript大小写敏感，若要几行代码写在一行中各语句间以分号分隔，习惯上在每一个语句之后以分号结束，但不是必须。 在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（使True或False表示）和空值,4、JavaScript语法,2019年8月1日,16,在JavaScript的基本类型中的数据可以是常量，也可以变量。,2019年8月1日,17,常量 整型常量 实型常量 布尔值 字符型常量 空值 特殊字符,2019年8月1日,18,变量的定义 变量的主要作用是存取数据、提供存放信息的容器。 变量的命名 变量以字母开头，中间可以出现数字除下划线作为连字符外，变量名称不能有空格、加号、减号、逗号或其它符号。 不能使用JavaScript中的关键字作为变量。,2019年8月1日,19,变量的类型 如同其它编程语言,JavaScript允许你声明变量并使用存储在它们中的值，不过不需要去专门声明变量的数据类型。（P25） 由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。 JavaScript可以自动确定存储在变量中的数据类型。,2019年8月1日,20,JavaScript用关键字var声明变量或直接使用赋值的形式声明变量。 Var str; Num1=20 Num2=3.0e10,2019年8月1日,21,声明变量通过关键字var,如下： var var1,var2; 在声明同时赋值给它，如： var var1=10; var var2=“hello”; var var3=true; 变量的长度可由length函数获得，如： var len=var2.length;,2019年8月1日,22,赋值运算符：= += -= *= /= %= 算术运算符： + - * / + % - 字符串运算符：+ 如：“abcd”+”efg” 逻辑运算符和关系运算符 =, !=, , ! , a ? value1: value2 / 结果为value1,2019年8月1日,23,在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合。 表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。,2019年8月1日,24,语法格式如下 function 函数名（形参表） 函数体; return 表达式; ,函数的编写,2019年8月1日,25,函数由关键字function定义。 参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。 在JavaScript中可通过arguments.length来检查参数的个数。 调用方式： 函数名(实参) 函数名对大小写是敏感的。,2019年8月1日,26,当函数没有返回值时，可以使用return语句不带参数的形式。 当函数有返回值时，需要使用return语句，格式： return 表达式 例如3-1 注意：函数定义位置和函数参数,2019年8月1日,27,函数简例 function factor(num) var i,fact=1; for (i=1;i document.write(“调用factor函数，5的阶乘等于：“,factor(5),“。“); ,2019年8月1日,28,变量的作用域 局部变量：变量可在声明它的函数中被访问， 全局变量：变量在函数体以外被声明，则可以在整个页面被访问到。 在函数内用var声明的变量是局部变量而在函数外用var声明的变量是全局变量 在函数内未用var声明的变量是全局变量，当函数内用var声明的变量和全局变量同名，他们就像两个不同名的变量。 例3-2变量作用域示例,2019年8月1日,29, 变量作用域示例 var i, j=10; /全局变量 function output( ) var j=0; /局部变量 i=100; /全局变量 j+; j+; document.write(“ j=“,j); document.write(“ i=“,i); i+; ,2019年8月1日,30, document.write(“调用函数output()前，i无定义，不能引用！“); document.write(“j的初始值=“,j,“); document.write(“调用output()，观察函数的输出！“); output(); document.write(“调用output()后，观察函数对i,j的影响：i=“,i,“ j=“,j); ,2019年8月1日,31,程序控制结构,在任何一种语言中，程序控制是必须的，它能使得整个程序顺利的按程序设计者希望的方式和顺序执行。 下面是JavaScript常用的程序控制结构及语句，因为缺省情况下，程序是按照语句的顺序来依次执行的，所以顺序结构就是通过语句的顺序实现的。 其他两种结构，分别是： 分支结构 循环结构,2019年8月1日,32,分支结构 if（表述式） 语句段； else 语句段； 若表达式为true，则执行语句段；否则执行语句段。,2019年8月1日,33,嵌套结构 if (condstmt1) statement1 else if (condstmt2) statement2 else if (condstmt3) statement3 else statement4 ,2019年8月1日,34,Switch(变量名) Case 值1: 语句段1 Case 值2: 语句段2 default: 语句段n Switch分支语句用来实现多支判断，根据变量名指定的变量的变量值和case语句后面的值是否相等来决定是否执行后面的语句，如果都不相等，则执行default后面的语句。,2019年8月1日,35,循环流程 for(初始化；条件；更新） statement 例3-3 使用for循环语句计算10！,2019年8月1日,36, var i,factor; factor=1; for (i=1;i ,2019年8月1日,37,While（条件） 语句 比如： n=0; x=0; while(n3) n+; x+; ,2019年8月1日,38,break语句 结束当前的while,for 以及do while 循环的执行，并把程序的控制交给下一条语句。 continue语句 结束当前while,for以及do while循环，并开始下一轮循环。,2019年8月1日,39,基本概念 JavaScript是基于对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。而对事件进行处理的程序或函数，我们称之为事件处理程序,5、事件触发和处理,2019年8月1日,40,事件处理程序 在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。,2019年8月1日,41,事件驱动 单击事件 onclick 改变事件 onchange 选中事件 onselect 获得焦点事件 onfocus 失去焦点 onblur 载入文件 onload 卸载文件 onunload 鼠标左键按下 onmousedown 鼠标左键抬起 onmouseup 获取鼠标 onmouseover 失去鼠标 onmouseout,2019年8月1日,42,事件是为动作响应时出现的通知。此通知的处理代码称为事件处理程序。 在javascript中可以为指定对象的各种事件设置相对应的事件处理程序。 如: 按钮的onClick,onLoad,onunload,onMouseOver,onMouseOut 下拉框的onChange, onClick,2019年8月1日,43,设置事件的方法，在指定对象的代码中加入类似属性 例3-4,2019年8月1日,44, 事件触发和事件处理 var Images=new Array( ); Images0=“dot1.jpg“; Images1=“check.gif“; function changeImg(ImgIndex) document.imgs.src=ImagesImgIndex; ,2019年8月1日,45, 软件设计 ,2019年8月1日,46,6 对象的基础知识,在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。,2019年8月1日,47,2019年8月1日,48,this关键字 this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，为此JavaScript提供了一个用于将对象指定当前对象的语句this。,2019年8月1日,49,对象属性的引用可由下列三种方式之一实现： 使用点运算符 通过对象的下标实现引用 通过字符串的形式实现 例程 P32,2019年8月1日,50,对象下标：,2019年8月1日,51,字符串的形式 ：,2019年8月1日,52,常用对象的属性和方法,JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要自己用脚本编写程序来实现这些功能。这正是基于对象编程的真正目的。 在JavaScript提供了string（字符串）、math（数值计算）和date（日期）三种对象和其它一些相关的方法 。,2019年8月1日,53,常用内部对象 串对象 该对象只有一个属性，即length。string对象的方法共有个，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。 例程 P33、34,2019年8月1日,54,算术函数的Math对象 Math中提供了个属性，它们是数学中经常用到的常数、以为底的自然对数、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根为SQRT2。 主要方法有：绝对值：abs()、正弦余弦值：sin(),cos()、反正弦反余弦 :asin(), acos()、正切反正切：tan(),atan()、四舍五入：round()、平方根：sqrt()、基于几方次的值：Pow(base,exponent)。 直接使用Math对象，不必用new创建一个对象,2019年8月1日,55,日期及时间对象 Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。 使用date之前先要用new创建一个对象,2019年8月1日,56,数组对象 数组对象Array是一个对象的集合，其内可以放置不同类型的对象，数组的每一个成员对象都有一个下标，用来标明数组中的位置，下标从0开始,2019年8月1日,57,数组的定义 Var 数组名=new Array() Var 数组名=new Array(元素个数) Var 数组名=new Array(元素1,元素2) 例程 P36 Array.html,2019年8月1日,58,例3-5：创建一个登录页面，它接收客户的帐户ID和口令，如果客户留下任何字段空白，在点击Submit按钮后，应显示一条信息。,2019年8月1日,59,接收数据的用户界面,2019年8月1日,60,获得输入框的值用属性value，如：txtAccountID.value 事件：代表一个动作的产生。如单击鼠标按钮、双击鼠标、文字的改变等等。 当一个事件发生时，系统所做的操作是调用一个函数来完成处理。如： onClick、 onChange 等。,2019年8月1日,61,创建用户界面, Earnest Bank Earnest Bank Banking Online Login information: ,2019年8月1日,62, Account ID Password ,2019年8月1日,63,prompt( ) 语法： prompt(”提示信息“ )； 功能：请求用户在对话框中的文本字段中进行输入，并将其用户输入的结果返回。 alert( ) 语法： alert (”用户信息“ )； 功能：供用户通信的简单方法，用OK按钮在对话框中显示消息。,2019年8月1日,64,function checkValues() var AccountID; var AccountIDLength; var passw; var passLength; AccountID=txtAccountID.value; AccountIDLength=AccountID.length; assw=pass.value; passLength=passw.length; if (AccountIDLength=0)|(passLength=0) alert(“你必须同时输入登录名和口令字”); ,2019年8月1日,65,【例3-6】 数字钟的设计, 数字钟 function aClock( ) var now=new Date( ); var hour=now.getHours( ); var min=now.getMinutes( ); var sec=now.getSeconds( ); var timeStr=“ “+hour; timeStr+=(min=12)?“ P.M.“:“ A.M.“;,2019年8月1日,66,document.clock_form.clock_text.value=timeStr; clockId=setTimeout(“aClock( )“,1000); 当前时间是： ,2019年8月1日,67,例3-7、开发Web 站点，当用户访问该站点时能显示向他们致敬的个性化信息。当用户退出时应显示告别的信息。当用户访问该站点时，此站点应接收用户的名。,2019年8月1日,68,识别要使用的事件处理程序,onLoad onUnLoad 例： ,识别显示消息的方法,Prompt() 接收用户的名 alert() 显示信息,2019年8月1日,69,代码：,var visitor_name = “; function greet_visitor() visitor_name=prompt(“请输入你的名字：“, ); alert(“欢迎 “ + visitor_name + “光临 !“); function farewell_visitor() alert(“感谢 “ + visitor_name + “ 访问我们网页!“); ,2019年8月1日,70,7、JavaScript 的对象模型,2019年8月1日,71,navigator,window,Array(3.0),Date,Math,String,history,document,location,frame,link,form,anchor,Image(3.0),reset,radio,button,checkbox,hidden,password,text,textarea,select,submit,2019年8月1日,72,JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（window）对象来完成，而输出可通过文档（document）对象的方法来实现。,8、window 对象,2019年8月1日,73,window对象是JavaScript 对象层次的最高层的对象，可以在脚本程序中隐式的引用window 对象。即输出时不用Window.document.Write()每当打开浏览器窗口都有一个相关的window 对象，每个window 对象都与特定的WEB网页相关，而这个网页的结构都反映在window 对象的Document对象中，每个window 都与URL页相关，而这个URL反映在window 对象的Location对象中，每个window 对象都有一个显示在这个窗口前的历史信息，这些信息存储在window 对象的History对象中.,2019年8月1日,74,window 对象相关属性,2019年8月1日,75,方法,2019年8月1日,76,2019年8月1日,77, var sWindowName; function fnNewWindow() alert(“新窗口在进行中.”); sWindowName=open(“,“Window“,“scrollbars=1, status=1“); status=“单击新窗口选择“; ,2019年8月1日,78, 又如例3-4 P41,2019年8月1日,79,文档对象是非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。,9、document 对象,2019年8月1日,80,document中三个主要的对象 anchor锚对象 链接links对象 窗体（Form）对象 文档对象中的属性 激活的链接颜色：alinkcolor 链接颜色：linkcolor 浏览过后的颜色：VlinkColor 背景颜色：bgcolor 前景颜色：Fgcolor 文档对象的基本元素 表单属性 锚属性 链接属性,2019年8月1日,81,属于 window 的对象,每个窗口都与一个文档对象有关 为处理当前文档资料提供了若干属性，诸如: location Lastmodified 为处理当前文档资料提供了若干方法，诸如： Open()和Close()启动和停止缓冲输出,调用Open打开文档进行写操作，调用Close()关闭写操作 Clear()清除文档窗口 Write()和Writeln()相同,2019年8月1日,82,属性 描述 linkColor 表示未被连接的颜色的串值 alinkColore 表示活动连接颜色的串值 vlinkColor 表示被访问连接的颜色的串值 bgColor 表示文档背景颜色 fgColor 表示文档前景颜色 Location 表示当前URL的串值 Title 表示 与 标签之间文本的串值,Document 对象相关属性,2019年8月1日,83,Document 对象相关方法,2019年8月1日,84,Ex2, var sWindowName; function fnNewWindow() alert(“新窗口在进行中.“); sWindowName=open(“,“Window“,“scrollbars=1,status=1“); status=“单击新窗口选择“; sWindowName.document.writeln(“受欢迎的联机银行业务“); sWindowName.document.bgColor=“pink“; sWindowName.document.fgColor=“Green“; ,2019年8月1日,85, 又如例3-4 P38,2019年8月1日,86,9、Form对象,属于文档对象的子对象，这就是表单form对象 标记有三个参数， Name表单的名字 method: 可以为get或post Action 提交表单数据时发送到的目的地,2019年8月1日,87,【例2-10】 、创建一个页面， 包括Login按钮，当客户点击 Login 按钮时，应显示登录页面，该页面应接受帐户ID和口令，应有一个 Sub