客户端编程javascript.ppt

《客户端编程javascript.ppt》由会员分享，可在线阅读，更多相关《客户端编程javascript.ppt（86页珍藏版）》请在三一办公上搜索。

1、JavaScript,JavaScript编程技术,JavaScript是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器Internet Explore（IE）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。JavaScript是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系统，所以说它是独立于操作平台的。JavaScript 1.0最初是在Netscape Navigator 2.0及Netscape LiveW

2、ire 1.0上实现的，目前JavaScript的版本是JavaScript 1.2。,从本质上说JavaScript和Java没有什么联系，但是同时作为语言，可以从三个角度来区别。（1）JavaScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。（2）代码格式不一样，Java代码经过编译后成为二进制文件，而JavaScript是纯文本的文件。（3）在HTML中的嵌入方式不一样。Java可以通过小应用程序嵌入HTML文件，而JavaScript可直接写入一个文本文件或HTML文件中。,网页中引入JavaScript,案例名称：第

3、一个JavaScript程序程序名称：2-24.htmdocument.write(这是以JavaScript输出的!),变量与数组,变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“var strUserName;”。,变量,案例名称：使用变量程序名称：2-25.htmvar strWelcome=欢迎您！;var iCounter=10;iCounter=iCou

4、nter+1;document.write(strWelcome);document.write(iCounter);,变量命名需要遵守以下六个规则,（1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。（2）变量名长度在0255字符之间。（3）除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。（4）不可以使用JavaScript的运算符号，例如：+，等。（5）不可以使用JavaScript用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。（6）在JavaScript中，变量名大小写是有所

5、区别的，例如：变量s12和S12是不同的两个变量。,声明数组,用new和Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象由于JavaScript区分大小写，所以Array的首字母必须是大写。,使用数组,案例名称：使用数组程序名称：2-26.htmvar arrUserName=new Array(2);arrUserName0=Bill;arrUserName1=Bob;document.write(arrUserName0);document.write();document.write(arrUserName1);document.write()

6、;,表达式与运算符,程序主要功能是运算，例如加、减、乘、除等基本操作。算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，,案例名称：算术运算符程序名称：2-27.htm document.write(3*2);document.write();document.write(3/2);document.write();document.write(3%2);/取余数,逻辑运算符,逻辑运算符包括：与运算符“&”、或运算符“|”和取反运算符“！”,案例名称：逻辑运算符程序名称：2-28.htm document.write(true,字符串运算符的使用方

7、法,案例名称：字符串运算符程序名称：2-29.htmvar strHello=网页编程;var strResult=你好，;strResult+=strHello;/等价于：strResult=strResult+strHello;document.write(strResult);,条件表达式,案例名称：条件表达式程序名称：2-30.htm a=(43)?5:7;b=(4);document.write(b);,控制语句之条件语句,JavaScript提供的语句可以分为以下4大类。（1）条件和分支语句：Ifelse语句，switch语句。（2）循环语句：for语句，dowhile语句，bre

8、ak语句和continue语句。（3）对象操作语句：new，this和with。（4）注释语句：“/”或“/*/”。,if语句,案例名称：if语句程序名称：2-31.htmvar iHour=13;if(iHour,switch语句,案例名称：switch语句程序名称：2-32.htmvar val=;var i=5;switch(i)case 3:val=三;break;case 4:val=四;break;case 5:val=五;break;default:val=不知道;document.write(val);,流控制语句之循环语句,循环语句包括：for语句、while语句，循环控制转

9、移语句continue和break语句。for语句的基本语法如下。for(初始化部分；条件部分；更新部分)语句块,for 语句,案例名称：for 语句程序名称：2-33.htmvar iSum=0;for(var i=0;i,while 语句,案例名称：while 语句程序名称：2-34.htmvar iSum=0;var i=0;while(i,break语句,案例名称：break语句程序名称：2-35.htmfor(i=1;i);,continue语句,案例名称：continue语句程序名称：2-36.htmfor(i=1;i);,forin语句,案例名称：forin语句程序名称：2-42

10、.htm var arr=new Array(3);arr0=Jack;arr1=Mike;arr2=Rose;for(i in arr)document.write(第+i+个为：+arri);,with语句,案例名称：with语句程序名称：2-43.htm with(document)write(你好世界);write(你好中国);write(再见);,JavaScript函数,函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：fun

11、ction 函数名称（参数表）语句块;,函数定义和调用,案例名称：函数定义和调用程序名称：2-37.htmfunction getSqrt(iNum)var iTemp=iNum*iNum;document.write(iTemp);getSqrt(8);,函数的返回值,案例名称：函数的返回值程序名称：2-38.htmfunction f(y)var x=y*y;return x;for(x=0;x);,事件的概念,JavaScript事件主要包括三大类的事件：超级连接事件，浏览器事件和界面事件。界面事件包括：界面事件是浏览器响应用户操作的机制。JavaScript的事件处理功能可以改变浏览器

12、响应这些操作的标准方式，这样就可以开发更具有交互性，更具有响应性和更易使用的web页面。,事件的概念,JavaScript处理事件的过程分为两个步骤：定义脚本可以处理的事件。提供将这些事件连接到用户的JavaScript代码的标准方法 JavaScript可以产生以下几种界面事件：onBlur,onChanged,onClick,onFocus,onLoad,onMouseOver,onSelect,onSubmit,onUnload,单击事件,案例名称：单击事件程序名称：2-39.htm,下拉列表,下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。,案例名称：处理下拉列表程序

13、名称：2-40.htm 北京上海广州 function func()alert(你选择了+selAddr.value);,对象处理语句,案例名称：this语句程序名称：2-41.htmfunction imgclick(oimg)alert(图片名称是：+oimg.name+rn图片地址是：+oimg.src);,JavaScript内置对象,内置对象都有自己的方法和属性，访问属性的语法是：“对象名.属性名称”。访问方法的语法是：“对象名.方法名称（参数表）”。所谓的方法就是一个普通的函数被封装到一个对象中,使用时间对象,案例名称：使用时间对象程序名称：2-44.htmvar curr=new

14、 Date();document.write(今天是);switch(curr.getDay()case 0:document.write(周日,休息了！);break;case 1:document.write(周一,需要工作！);break;case 2:document.write(周二,需要工作！);break;case 3:document.write(周三,需要工作！);break;case 4:document.write(周四,需要工作！);break;case 5:document.write(周五,需要工作！);break;case 6:document.write(周六,

15、休息了！);break;,网页时钟,使用时间对象,属性：无 方法：a、设定日期setDate(),setMonth(),setYear()；setTime()设定时间1970.1.1开始用毫秒数来计时；d、日期格式转换.Date.UTC()返回一个通用时间，距1970年1月1日午夜的毫秒。b、获取日期c、处理时区.toGMTString()将日期时间值转换为的字符串(GMT时间)；.tolocaleString()将日期时间值转换为的字符串(当地时间)。,Math对象,案例名称：使用Math对象程序名称：2-45.htmvar a=Math.sin(1);document.write(a),M

16、ath对象,Math对象是个预定义的JavaScript对象。它无法创建具体对象实例，但在任何时候运行JavaScript浏览器均可用。常数是Math的属性，函数则是Math的方法。算术常数用Math.constant访问，其是constant是下列常数之一。,Math对象,Math对象提供了18个算术函数，从舍入到创建随机数，这些函数可分为6类：舍入函数，比较函数，代数函数，对数和指数函数，三角函数，随机数产生函数。要使用某个函数，可以将其作为Math对象的方法调用。例如：pi除以2的余旋可以写成：Math.cos(Math.PI/2).abs()绝对值计算；.pow()数的幂；.sqrt(

17、)计算平方根；.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

18、对象,案例名称：使用字符串处理函数程序名称：2-46.htmvar str=I am a boy,I like programming!;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.htmvar str=I am a girl,I like catvar iCount

19、=0;for(i=0;i,JavaScript的常用函数,介绍几个常用的函数：eval()函数parseInt()函数parseFloat函数。,使用eval()函数,案例名称：使用eval()函数程序名称：2-47.htm var str=1+2+3;document.write(eval(str);,parseInt()函数和parseFloat()函数,parseInt()函数功能是从一个字符串中提出一个整数，如果遇到字符串中除了数字以外的字符，parseInt()就停止转换，返回已有的结果。如果第一个字符不是数字，parseInt()就返回“NaN”值。ParseFloat()函数和p

20、arseInt()函数相似，区别parseFloat()可以提取小数。,parseInt函数和parseFloat函数,案例名称：使用parseInt函数和parseFloat函数程序名称：2-48.htmvar a=parseInt(123China);var b=parseFloat(123.12China);document.write(a+);document.write(b);,对象层次及DOM模型,在编写脚本时，经常需要对象进行控制，对象有些是直接能看到的，如图像和表单元素，但也有很多是网页上不能直接看到的。为了使脚本有助于控制这些对象，并帮助网页作者控制不可见的大量对象，浏览器制

21、造者定义了文档对象模型。,对象层次及DOM模型,DOM,DOM（Document Object Model）是文档对象模型的缩写，文档对象模型提供了文档的定位模型。,function do_Copy()var str=frm1.txtBox1.value;frm2.txtBox2.value=str;,使用window对象,window对象是所有浏览器脚本的基础，它是浏览器自动定义的顶层对象。每个打开的窗口都定义了一个窗口对象。在编写浏览器脚本时，window对象非常重要。许多情况下，缺省为当前window对象的窗口可以省略。例如，在脚本中使用下列语句时：document.write(“wri

22、te this text to the current window.”)javascript假设引用当前窗口对象，从而实际执行下列语句：window.document.write(“write this text to the current window.”),例：编写一个网页文件。当打开该网页时，在浏览器窗口的状态栏中显示：“欢迎光临本网站”。网页文件的内容如下：范例6-1 JavaScript世界,使用window对象,function new_win()window.open(new.htm,my,toolbar=no,left=150,top=200,menubar=no,widt

23、h=150,height=150);,使用window对象,open方法的语法格式window.open(url，窗口名称，窗口属性)说明：（1）url参数是一个字符串，用于指定在新窗口中打开的文件。如果指定一个空串，则只是打开一个空白窗口。（2）窗口名称参数作为新打开窗口的标识。如果在打开的窗口没有关闭时再次使用open方法指定同样的窗口名称，则会使用已打开的窗口。（3）open方法的返回值可用来引用新窗口对象。（4）窗口属性参数用于指定新窗口的特征。这些属性是可以同时设置的。同时设置多个属性时用逗号分隔每个属性，由于整个参数作为一个字符串使用，因此需要使用引号括住。,使用location属

24、性,案例名称：使用location属性程序名称：2-51.htm function test_location()window.location=new.htm;,History对象,history是windows对象的属性，JavaScript通过它来跟踪窗口中已经访问过的URL，用此可以帮助用户在站点页面见漫游，例如：可以创建简单的方向按钮，让用户重新访问前面经过的web页面。,History对象,History对象,案例名称：使用History对象程序名称：2-52.htm function goforward()history.go(1);function goback()histor

25、y.go(-1),document对象,文档对象是window对象的一个属性。在层次结构上位于window对象的下一个层次。该对象提供对浏览器窗口中文档属性的管理和文档内容的读写等功能。,document对象,document对象,document对象,document对象最常用的方法就是write。其主要功能就是在文档中输出信息。document对象的语法格式document.write(参数1，参数2，参数n)说明（1）所有的参数都会作为HTML文件的内容传输到浏览器中。（2）在可能的情况下，多个参数可以通过“+”运算连接成为一个参数。,document对象,document对象的事件主要

26、包括：Load和Unload。这两个事件也可以在HTML的BODY标记中设置。注意：Load事件发生在文档被完全载入浏览器之后。,例：编写一个网页文件（6-4.htm）。当文档打开时显示一个欢迎光临的消息框，当文档关闭时显示一个信息：“谢谢你访问本网页！欢迎下次再来。”网页文件的内容如下：范例6-4!-function welcome()alert(欢迎光临!)function sayGoodby()alert(谢谢你访问本网页！欢迎下次再来。),/-信息工程大学,例：编写一个网页文件（6-5.htm）。要求：单击页面时可以显示一个输入提示框，让用户输入一种颜色值；然后，将其设置为网页的背景色

27、。网页文件的内容如下：范例6-5 信息工程大学,表单对象form,表单的作用主要用于收集用户的数据信息。表单在浏览器对象的结构中处于document对象的forms属性之下，因此，在引用一个表单中的元素时需要使用如下格式。Form对象的语法格式格式1：document.forms.表单名称.elements元素索引格式2：document.forms.表单名称.elements元素名称格式3：document.forms.表单名称.元素名称,表单对象form,说明forms是document对象下的一个对象，表示form对象的集合。它用于管理document对象中的所有form。当使用索引访问

28、表单中的元素时，是从0开始计算的。表单的属性主要就是表单的元素，而表单的方法主要是：submit()和reset()。表单的主要事件是submit和reset。在学习HTML时已经知道如何在网页中建立一个表单。这里将要学习如何在表单提交到服务器之前获取表单数据并对其进行有效性检验和必要的计算处理。,获取文本框和文本区域中的信息,表单中的文本框和文本区域均用于输入文字信息。文本框只能输入一行文字，文本区域则可以输入多行文字。为了获取该元素中用户输入的数据，需要访问它们的value属性。,例：编写一个网页文件（6-7.htm），建立一个表单用于输入用户的姓名和简介。当用户单击“确定”时使用消息框显

29、示用户输入的内容。网页文件的内容如下：范例6-7,姓名简介在浏览器中打开文件6-7.htm，然后输入一个用户的信息。单击“确定”按钮屏幕显示带有用户信息的消息框。,获取复选框中的信息,复选框在表单中通常用于选择输入信息。如果表单中含有多组选择信息，那么同一组信息中的每个标记的名称是相同的，以此来表明这些标记是同一组的。当用户在某组信息中选择了若干项后，程序对整个组的每个标记逐一检查其checked属性，如果值为true的，则该项被选中；否则就没有被选择。,例：编写一个网页文件（6-8.htm），让用户利用复选框选择输入其兴趣爱好。单击“确定”按钮后，用消息框显示用户的选择。网页文件的内容如下：

30、范例6-8!-function showChoices(objHobbies)var yourChoices=for(i=0;iobjHobbies.length;i+)if(objHobbiesi.checked=true)yourChoices=yourChoices+objHobbiesi.value+,alert(你的兴趣是：+yourChoices),/-请选择你的兴趣音乐读书旅行运动注意：同一组的所有选项构成一个对象数组。数组的名称就是它们的NAME属性。利用数组的length属性便可以控制逐个访问每个标记对象的checked属性。为了在事件处理函数中处理数据，该函数以作为参数，这

31、样在编写函数代码时便可以大大简化编写工作。,Web应用经典案例研究,在Web应用开发中有一些关键的动态编程技术，下面六种最常用的关键技术：动态表格常用的网页对话框动态网页框架表单验证程序控制Form表单在页面中执行客户端的可执行文件,动态表格彻底研究,对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。,表格的动态选中,三种网页对话框,在Web应用开发中，有三种形式的网页对话框：1、使用window.open打开的网页2、使用Web模式对话框3、使用Web非模式对话框,动态网页框架彻底研究,可以象对普通Windows窗口一样操作网页框架，可以最大化窗口页可以最小

32、化窗口，,表单验证,常用的表单验证有两种方式第一种是利用onsubmit事件实现验证第二种是利用普通按钮实现验证,用JavaScript处理表单数据,JavaScript在网页中最重要的应用之一就是用于表单数据的有效性检查和进行表单提交前的数据处理。,例：编写一个网页文件（6-11.htm），使用一个表单收集用户的姓名、电话和电子邮件地址。当提交表单时，如果电子邮件地址不含有符号“”则不准提交信息，并将输入焦点设置到电子邮件文本框中同时使原来的所有内容处于选中状态。网页文件的内容如下：范例6-11!-function checkEmail()if(email.indexOf()=-1)aler

33、t(电子邮件地址不合法！请重新输入)document.addr.email.focus()document.addr.email.select()return false,return true/-姓名电话电子邮件在该网页文件6-11.htm中，为了检查电子邮件地址，编写了FORM对象的SUBMIT事件处理函数checkEmail。当用户单击type为submit的按钮时，便会触发FORM对象的submit事件，从而调用checkEmail函数检查数据的有效性。,执行客户端的可执行文件,案例名称：程序控制Form表单程序名称：2-62.htmvar Shell=new ActiveXObjec

34、t(WScript.Shell);/try var cmd=mspaint.exe;/var aa=Shell.Run(cmd,1,true);/catch(e)alert(目录不存在文件！);,本章习题,1.编写E-mail注册的表单。（上机练习）2.编写程序统计1到50中所有偶数的和。（分别用for和while语句实现）3.编写程序实现：取系统时间，如果时间在6:0012:00之间，输出“早上好”；如果时间在12:0018:00，输出“下午好”；如果时间在18:0024:00之间，输出“晚上好”；如果时间在0:006:00，输出“凌晨好”。4.在字符串“I am a girl,I like dancing!”的每个字符之间加上一个字符“#”，输出字符为：“I#a#m#a#girl#,#I#like#d#a#n#c#i#n#g#!”，并统计“#”的个数。,