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