第五讲.客户端编程javascriptppt课件

.,JavaScript,JavaScript编程技术,JavaScript是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器InternetExplore（IE）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。JavaScript是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系统，所以说它是独立于操作平台的。JavaScript1.0最初是在NetscapeNavigator2.0及NetscapeLiveWire1.0上实现的，目前JavaScript的版本是JavaScript1.2。,从本质上说JavaScript和Java没有什么联系，但是同时作为语言，可以从三个角度来区别。（1）JavaScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。（2）代码格式不一样，Java代码经过编译后成为二进制文件，而JavaScript是纯文本的文件。（3）在HTML中的嵌入方式不一样。Java可以通过小应用程序嵌入HTML文件，而JavaScript可直接写入一个文本文件或HTML文件中。,网页中引入JavaScript,案例名称：第一个JavaScript程序程序名称：2-24.htmdocument.write(这是以JavaScript输出的!),变量与数组,变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“varstrUserName;”。,变量,案例名称：使用变量程序名称：2-25.htmvarstrWelcome=欢迎您！;variCounter=10;iCounter=iCounter+1;document.write(strWelcome);document.write(iCounter);,变量命名需要遵守以下六个规则,（1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。（2）变量名长度在0255字符之间。（3）除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。（4）不可以使用JavaScript的运算符号，例如：+，等。（5）不可以使用JavaScript用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。（6）在JavaScript中，变量名大小写是有所区别的，例如：变量s12和S12是不同的两个变量。,声明数组,用new和Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象由于JavaScript区分大小写，所以Array的首字母必须是大写。,使用数组,案例名称：使用数组程序名称：2-26.htmvararrUserName=newArray(2);arrUserName0=Bill;arrUserName1=Bob;document.write(arrUserName0);document.write();document.write(arrUserName1);document.write();,表达式与运算符,程序主要功能是运算，例如加、减、乘、除等基本操作。算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，,案例名称：算术运算符程序名称：2-27.htmdocument.write(3*2);document.write();document.write(3/2);document.write();document.write(3%2);/取余数,逻辑运算符,逻辑运算符包括：与运算符“varstrResult=你好，;strResult+=strHello;/等价于：strResult=strResult+strHello;document.write(strResult);,条件表达式,案例名称：条件表达式程序名称：2-30.htma=(43)?5:7;b=(4);document.write(b);,控制语句之条件语句,JavaScript提供的语句可以分为以下4大类。（1）条件和分支语句：Ifelse语句，switch语句。（2）循环语句：for语句，dowhile语句，break语句和continue语句。（3）对象操作语句：new，this和with。（4）注释语句：“/”或“/*/”。,if语句,案例名称：if语句程序名称：2-31.htmvariHour=13;if(iHour,switch语句,案例名称：switch语句程序名称：2-32.htmvarval=;vari=5;switch(i)case3:val=三;break;case4:val=四;break;case5:val=五;break;default:val=不知道;document.write(val);,流控制语句之循环语句,循环语句包括：for语句、while语句，循环控制转移语句continue和break语句。for语句的基本语法如下。for(初始化部分；条件部分；更新部分)语句块,for语句,案例名称：for语句程序名称：2-33.htmvariSum=0;for(vari=0;i,while语句,案例名称：while语句程序名称：2-34.htmvariSum=0;vari=0;while(i,break语句,案例名称：break语句程序名称：2-35.htmfor(i=1;i);,continue语句,案例名称：continue语句程序名称：2-36.htmfor(i=1;i);,forin语句,案例名称：forin语句程序名称：2-42.htmvararr=newArray(3);arr0=Jack;arr1=Mike;arr2=Rose;for(iinarr)document.write(第+i+个为：+arri);,with语句,案例名称：with语句程序名称：2-43.htmwith(document)write(你好世界);write(你好中国);write(再见);,JavaScript函数,函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：function函数名称（参数表）语句块;,函数定义和调用,案例名称：函数定义和调用程序名称：2-37.htmfunctiongetSqrt(iNum)variTemp=iNum*iNum;document.write(iTemp);getSqrt(8);,函数的返回值,案例名称：函数的返回值程序名称：2-38.htmfunctionf(y)varx=y*y;returnx;for(x=0;x);,事件的概念,JavaScript事件主要包括三大类的事件：超级连接事件，浏览器事件和界面事件。界面事件包括：界面事件是浏览器响应用户操作的机制。JavaScript的事件处理功能可以改变浏览器响应这些操作的标准方式，这样就可以开发更具有交互性，更具有响应性和更易使用的web页面。,事件的概念,JavaScript处理事件的过程分为两个步骤：定义脚本可以处理的事件。提供将这些事件连接到用户的JavaScript代码的标准方法JavaScript可以产生以下几种界面事件：onBlur,onChanged,onClick,onFocus,onLoad,onMouseOver,onSelect,onSubmit,onUnload,单击事件,案例名称：单击事件程序名称：2-39.htm,下拉列表,下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。,案例名称：处理下拉列表程序名称：2-40.htm北京上海广州functionfunc()alert(你选择了+selAddr.value);,对象处理语句,案例名称：this语句程序名称：2-41.htmfunctionimgclick(oimg)alert(图片名称是：++rn图片地址是：+oimg.src);,JavaScript内置对象,内置对象都有自己的方法和属性，访问属性的语法是：“对象名.属性名称”。访问方法的语法是：“对象名.方法名称（参数表）”。所谓的方法就是一个普通的函数被封装到一个对象中,使用时间对象,案例名称：使用时间对象程序名称：2-44.htmvarcurr=newDate();document.write(今天是);switch(curr.getDay()case0:document.write(周日,休息了！);break;case1:document.write(周一,需要工作！);break;case2:document.write(周二,需要工作！);break;case3:document.write(周三,需要工作！);break;case4:document.write(周四,需要工作！);break;case5:document.write(周五,需要工作！);break;case6:document.write(周六,休息了！);break;,网页时钟,使用时间对象,属性：无方法：a、设定日期setDate(),setMonth(),setYear()；setTime()设定时间1970.1.1开始用毫秒数来计时；d、日期格式转换.Date.UTC()返回一个通用时间，距1970年1月1日午夜的毫秒。b、获取日期c、处理时区.toGMTString()将日期时间值转换为的字符串(GMT时间)；.tolocaleString()将日期时间值转换为的字符串(当地时间)。,Math对象,案例名称：使用Math对象程序名称：2-45.htmvara=Math.sin(1);document.write(a),Math对象,Math对象是个预定义的JavaScript对象。它无法创建具体对象实例，但在任何时候运行JavaScript浏览器均可用。常数是Math的属性，函数则是Math的方法。算术常数用Math.constant访问，其是constant是下列常数之一。,Math对象,Math对象提供了18个算术函数，从舍入到创建随机数，这些函数可分为6类：舍入函数，比较函数，代数函数，对数和指数函数，三角函数，随机数产生函数。要使用某个函数，可以将其作为Math对象的方法调用。例如：pi除以2的余旋可以写成：Math.cos(Math.PI/2).abs()绝对值计算；.pow()数的幂；.sqrt()计算平方根；.cos、.sin()、.tan()、.acos、.asin()、.atan();,String对象,一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。（1）charAt(idx)：第一个字符位置是“0”，返回指定位置处的字符。（2）indexOf(Chr)：返回指定子字符串的位置，从左到右，找不到返回1。（3）lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回1。（4）toLowerCase()：将字符串中的字符全部转化成小写。（5）toUpperCase()：将字符串中的字符全部转化成大写。,String对象,案例名称：使用字符串处理函数程序名称：2-46.htmvarstr=Iamaboy,Ilikeprogramming!;a=str.charAt(7);b=str.indexOf(a);c=str.lastIndexOf(a);d=str.toUpperCase();document.write(a+);document.write(b+)document.write(c+)document.write(d+),案例2-5：字符串扫描统计,案例名称：使用字符串处理函数程序名称：string.htmvarstr=Iamagirl,IlikecatvariCount=0;for(i=0;i,JavaScript的常用函数,介绍几个常用的函数：eval()函数parseInt()函数parseFloat函数。,使用eval()函数,案例名称：使用eval()函数程序名称：2-47.htmvarstr=1+2+3;document.write(eval(str);,parseInt()函数和parseFloat()函数,parseInt()函数功能是从一个字符串中提出一个整数，如果遇到字符串中除了数字以外的字符，parseInt()就停止转换，返回已有的结果。如果第一个字符不是数字，parseInt()就返回“NaN”值。ParseFloat()函数和parseInt()函数相似，区别parseFloat()可以提取小数。,parseInt函数和parseFloat函数,案例名称：使用parseInt函数和parseFloat函数程序名称：2-48.htmvara=parseInt(123China);varb=parseFloat(123.12China);document.write(a+);document.write(b);,对象层次及DOM模型,在编写脚本时，经常需要对象进行控制，对象有些是直接能看到的，如图像和表单元素，但也有很多是网页上不能直接看到的。为了使脚本有助于控制这些对象，并帮助网页作者控制不可见的大量对象，浏览器制造者定义了文档对象模型。,对象层次及DOM模型,DOM,DOM（DocumentObjectModel）是文档对象模型的缩写，文档对象模型提供了文档的定位模型。,functiondo_Copy()varstr=frm1.txtBox1.value;frm2.txtBox2.value=str;,使用window对象,window对象是所有浏览器脚本的基础，它是浏览器自动定义的顶层对象。每个打开的窗口都定义了一个窗口对象。在编写浏览器脚本时，window对象非常重要。许多情况下，缺省为当前window对象的窗口可以省略。例如，在脚本中使用下列语句时：document.write(“writethistexttothecurrentwindow.”)javascript假设引用当前窗口对象，从而实际执行下列语句：window.document.write(“writethistexttothecurrentwindow.”),例：编写一个网页文件。当打开该网页时，在浏览器窗口的状态栏中显示：“欢迎光临本网站”。网页文件的内容如下：范例6-1JavaScript世界,使用window对象,functionnew_win()window.open(new.htm,my,toolbar=no,left=150,top=200,menubar=no,width=150,height=150);,使用window对象,open方法的语法格式window.open(url，窗口名称，窗口属性)说明：（1）url参数是一个字符串，用于指定在新窗口中打开的文件。如果指定一个空串，则只是打开一个空白窗口。（2）窗口名称参数作为新打开窗口的标识。如果在打开的窗口没有关闭时再次使用open方法指定同样的窗口名称，则会使用已打开的窗口。（3）open方法的返回值可用来引用新窗口对象。（4）窗口属性参数用于指定新窗口的特征。这些属性是可以同时设置的。同时设置多个属性时用逗号分隔每个属性，由于整个参数作为一个字符串使用，因此需要使用引号括住。,使用location属性,案例名称：使用location属性程序名称：2-51.htmfunctiontest_location()window.location=new.htm;,History对象,history是windows对象的属性，JavaScript通过它来跟踪窗口中已经访问过的URL，用此可以帮助用户在站点页面见漫游，例如：可以创建简单的方向按钮，让用户重新访问前面经过的web页面。,History对象,History对象,案例名称：使用History对象程序名称：2-52.htmfunctiongoforward()history.go(1);functiongoback()history.go(-1),document对象,文档对象是window对象的一个属性。在层次结构上位于window对象的下一个层次。该对象提供对浏览器窗口中文档属性的管理和文档内容的读写等功能。,document对象,document对象,document对象,document对象最常用的方法就是write。其主要功能就是在文档中输出信息。document对象的语法格式document.write(参数1，参数2，参数n)说明（1）所有的参数都会作为HTML文件的内容传输到浏览器中。（2）在可能的情况下，多个参数可以通过“+”运算连接成为一个参数。,document对象,document对象的事件主要包括：Load和Unload。这两个事件也可以在HTML的BODY标记中设置。注意：Load事件发生在文档被完全载入浏览器之后。,例：编写一个网页文件（6-4.htm）。当文档打开时显示一个欢迎光临的消息框，当文档关闭时显示一个信息：“谢谢你访问本网页！欢迎下次再来。”网页文件的内容如下：范例6-4信息工程大学,例：编写一个网页文件（6-5.htm）。要求：单击页面时可以显示一个输入提示框，让用户输入一种颜色值；然后，将其设置为网页的背景色。网页文件的内容如下：范例6-5信息工程大学,表单对象form,表单的作用主要用于收集用户的数据信息。表单在浏览器对象的结构中处于document对象的forms属性之下，因此，在引用一个表单中的元素时需要使用如下格式。Form对象的语法格式格式1：document.forms.表单名称.elements元素索引格式2：document.forms.表单名称.elements元素名称格式3：document.forms.表单名称.元素名称,表单对象form,说明forms是document对象下的一个对象，表示form对象的集合。它用于管理document对象中的所有form。当使用索引访问表单中的元素时，是从0开始计算的。表单的属性主要就是表单的元素，而表单的方法主要是：submit()和reset()。表单的主要事件是submit和reset。在学习HTML时已经知道如何在网页中建立一个表单。这里将要学习如何在表单提交到服务器之前获取表单数据并对其进行有效性检验和必要的计算处理。,获取文本框和文本区域中的信息,表单中的文本框和文本区域均用于输入文字信息。文本框只能输入一行文字，文本区域则可以输入多行文字。为了获取该元素中用户输入的数据，需要访问它们的value属性。,例：编写一个网页文件（6-7.htm），建立一个表单用于输入用户的姓名和简介。当用户单击“确定”时使用消息框显示用户输入的内容。网页文件的内容如下：范例6-7,姓名简介在浏览器中打开文件6-7.htm，然后输入一个用户的信息。单击“确定”按钮屏幕显示带有用户信息的消息框。,获取复选框中的信息,复选框在表单中通常用于选择输入信息。如果表单中含有多组选择信息，那么同一组信息中的每个标记的名称是相同的，以此来表明这些标记是同一组的。当用户在某组信息中选择了若干项后，程序对整个组的每个标记逐一检查其checked属性，如果值为true的，则该项被选中；否则就没有被选择。,例：编写一个网页文件（6-8.htm），让用户利用复选框选择输入其兴趣爱好。单击“确定”按钮后，用消息框显示用户的选择。网页文件的内容如下：范例6-8!-functionshowChoices(objHobbies)varyourChoices=for(i=0;i请选择你的兴趣音乐读书旅行运动注意：同一组的所有选项构成一个对象数组。数组的名称就是它们的NAME属性。利用数组的length属性便可以控制逐个访问每个标记对象的checked属性。为了在事件处理函数中处理数据，该函数以.hobbies作为参数，这样在编写函数代码时便可以大大简化编写工作。,Web应用经典案例研究,在Web应用开发中有一些关键的动态编程技术，下面六种最常用的关键技术：动态表格常用的网页对话框动态网页框架表单验证程序控制Form表单在页面中执行客户端的可执行文件,动态表格彻底研究,对表格单元格的添加删除修改并对其进行移动以及拷贝等操作