JavaScript项目式实例教程（第2版）课件 项目3、4 统计成绩单 循环结构-注册页面设计 事件_第1页
JavaScript项目式实例教程（第2版）课件 项目3、4 统计成绩单 循环结构-注册页面设计 事件_第2页
JavaScript项目式实例教程（第2版）课件 项目3、4 统计成绩单 循环结构-注册页面设计 事件_第3页
JavaScript项目式实例教程（第2版）课件 项目3、4 统计成绩单 循环结构-注册页面设计 事件_第4页
JavaScript项目式实例教程（第2版）课件 项目3、4 统计成绩单 循环结构-注册页面设计 事件_第5页
已阅读5页，还剩69页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目三统计成绩单——循环结构设计一个程序，要求能不断弹出输入成绩对话框。在输入成绩时，检测输入数据的合法性，如果输入的不是数字或输入内容为空，给出错误信息，继续弹出成绩对话框输入成绩，只到用户输入一个截止符号"!"为止。最后在页面上打印所有输入的有效成绩，打印的格式为每行4个。统计所有成绩的平均分、最高分、最低分并打印输出。最后输出一个链接“是否有不及格”。用户点击该链接，如果成绩中有不及格的，则弹出对话框提示没有不及格成绩。若有不及格成绩，则弹出对话框提示有不及格成绩。项目情境初步了解数组的概念和使用方法。初步了解对象的概念。熟悉Math数学对象的应用。熟悉循环结构的使用方法。熟悉变量的作用域学习目标分别计算并打印输出1+2+3+...+100和1×2

×3×...×100的值。任务1累加和累乘1、循环结构1.1、while语句while(<逻辑表达式>)<语句块>1.2、do...while语句do<语句块>while(<逻辑表达式>);2、死循环【相关知识】在<head>标签内部输入以下代码：<scripttype="text/javascript">varsum=0; //总和sumvarf=1; //总乘积fvari=1; //计数iwhile(i<=100) { sum=sum+i; f=f*i; i++; } document.write("1+2+3+...+100="+sum+"<br/>1×2×3×...×100="+f);</script>【任务实现】随机的给出10个0到100之间（包含0和100）的整数，统计这10个数中的最大值和最小值。任务2最大和最小值1、数组1.1、数组的概念数组是一些数据元素（element）的集合，每个数据元素在数组中都有一个编号，通过编号可以引用这些数据元素。这些数据元素可以是不同的数据类型，例如数字型、字符串型、布尔型等，设置还可以是一个数组。每个数组都有一个名称，其命名规则和变量的命名规则相同。【相关知识】1.2、数组的定义1.2.1、使用构造函数方式有三种，分别是：newArray()newArray(<数组元素的个数>)newArray(<数组元素1的值>[,数组元素2的值]...)1.2.2、直接定义方式有两种，一种是用一对空的中括号定义一个空数组，然后再为数组元素赋值。另一种方式是在一对中括号中，放入数组元素值，并用逗号隔开。【相关知识】2、for语句for(初始化变量;逻辑表达式;改变变量表达式)<语句块>3、for...in语句for(变量in对象或者数组)<语句块>4、循环的嵌套无论哪种循环结构，都可以相互之间使用嵌套，这与判断结构的嵌套类似。【相关知识】5、对象5.1、对象的概念对象有三要素：属性、方法和事件。5.2、使用属性和方法引用或修改对象的属性：对象.对象的属性对象[对象的属性]//其中，“对象的属性”要使用双引号或单引号括起来调用对象的方法：对象.对象的方法名([参数列表])【相关知识】5.3、Math对象【相关知识】属性描述E返回算术常量e，即自然对数的底数（约等于2.718）。LN2返回2的自然对数（约等于0.693）。LN10返回10的自然对数（约等于2.302）。LOG2E返回以2为底的e的对数（约等于1.414）。LOG10E返回以10为底的e的对数（约等于0.434）。PI返回圆周率（约等于3.14159）。SQRT1_2返回返回2的平方根的倒数（约等于0.707）。SQRT2返回2的平方根（约等于1.414）。【相关知识】方法描述abs(x)返回数的绝对值。acos(x)返回数的反余弦值。asin(x)返回数的反正弦值。atan(x)以介于-PI/2与PI/2弧度之间的数值来返回x的反正切值。atan2(y,x)返回从x轴到点(x,y)的角度（介于-PI/2与PI/2弧度之间）。ceil(x)对数进行上舍入。cos(x)返回数的余弦。exp(x)返回e的指数。floor(x)对数进行下舍入。log(x)返回数的自然对数（底为e）。max(x,y)返回x和y中的最高值。min(x,y)返回x和y中的最低值。pow(x,y)返回x的y次幂。random()返回0～1之间的随机数。round(x)把数四舍五入为最接近的整数。sin(x)返回数的正弦。sqrt(x)返回数的平方根。tan(x)返回角的正切。toSource()返回该对象的源代码。valueOf()返回Math对象的原始值。在<head>标签对中输入以下代码：<scripttype="text/javascript">varele=[];for(vari=0;i<10;i++){ ele[i]=Math.round(Math.random()*100); document.write(ele[i]+"");}vare_max=ele[1];vare_min=ele[1];for(vari=0;i<10;i++){ if(ele[i]>e_max) { e_max=ele[i]; } if(ele[i]<e_min) { e_min=ele[i]; }}document.write("<br/>最大值："+e_max+"<br/>最小值："+e_min);</script>【任务实现】有一个字符串"Iamastudent",用循环语句查找第一个字母"t"在字符串中的位置。任务3循环的跳转1、字符串对象1.1、创建字符串对象使用构造函数String()创建字符串对象，方式是：newString(str)或者String(str)其中str参数是字符串变量或者具体的字符串的值。【相关知识】1.2、属性和方法【相关知识】属性描述constructor对创建该对象的函数的引用length字符串的长度prototype允许您向对象添加属性和方法【相关知识】方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的Unicode编码。concat()连接字符串。indexOf()检索字符串。lastIndexOf()从后向前搜索字符串。localeCompare()用本地特定的顺序来比较两个字符串。match()找到一个或多个正则表达式的匹配。replace()替换与正则表达式匹配的子串。search()检索与正则表达式相匹配的值。slice()提取字符串的片断，并在新的字符串中返回被提取的部分。split()把字符串分割为字符串数组。strike()使用删除线来显示字符串。substr()从起始索引号提取字符串中指定数目的字符。substring()提取字符串中两个指定的索引号之间的字符。toLocaleLowerCase()把字符串转换为小写。toLocaleUpperCase()把字符串转换为大写。toLowerCase()把字符串转换为小写。toUpperCase()把字符串转换为大写。toSource()代表对象的源代码。toString()返回字符串。valueOf()返回某个字符串对象的原始值。2、循环的跳转2.1、break语句在循环中，它的作用是结束循环的执行。即使循环的次数还没有执行完，也不再执行。2.2、continue语句continue语句只能用于循环中，是结束当前正在执行的这次循环，跳入下一次循环。【相关知识】在<head>标签内部输入以下代码：<scripttype="text/javascript">varstr="Iamastudent";varstr_len=str.length;variPos=0;for(vari=0;i<str_len;i++){if(str.charAt(i)=="t"){iPos=i+1;break;}}document.write("字符串"+str+"中的第一个字母t的位置为"+iPos);【任务实现】任务4“项目三”的实现1、函数1.1、自定义函数function函数名称([参数列表]){ [语句块][return<返回值>]}【相关知识】1.2、函数参数函数名称([参数值列表]);对于形参和实参还需要注意以下几点：①形参与实参要一一对应，也就是传递的顺序要一致。②形参的个数与实参的个数原则上要求一致。如果形参的个数大于实参的个数，则多余的形参的值将被赋予undefined(表示未定义)，如果形参的个数小于实参的个数，则多余的实参将被舍弃。③用于定义形参的变量不能添加关键字var,直接写变量名即可。④形参只能是变量，不能是一个表达式。【相关知识】1.3、系统函数也叫内置函数，是JavaScript内部定义好的函数，能完成一些特定的功能，用户不必知道它是如何实现的，只要直接调用就可以了。前面我们已经学习的例如数学函数、parseInt()、parseFloat()、isNaN()等都是系统函数。【相关知识】2、变量的作用域变量的作用域就是变量的有效作用范围。这个范围有两种：全局和局部。在函数定义之外声明的变量是全局变量，该变量在整个持续范围内都可以访问和修改。在函数定义内声明的变量是局部变量，它不能被该函数外的任何事物访问。但是，必须注意的是，在函数内部声明一个局部变量时一定要使用关键字var，否则还是一个全局变量。一个局部变量的名称可以与某个全局变量的名称相同，但这是完全不同和独立的两个变量。【相关知识】1、要不断弹出成绩输入对话框，没有规定输入次数，所以要使用while循环。2、当输入“!”就结束输入，所以while循环的开始条件是输入字符串不等于“!”。3、要对成绩进行打印和统计，每输入一个成绩就先存储到数组中。【任务分析】1、在<body>标签对中编写超级链接“是否有不及格”的代码，并为其添加onclick事件，在事件中调用一个自定义函数check()。此函数的功能是查找是否有不及格的成绩：<ahref="#"onclick="check()">是否有不及格</a>【任务实现】2、在<head>标签对中输入以下代码：<scripttype="text/javascript">varscore=0;//存放当前输入的成绩vari=1;//输入次数计数varele=[];//存放最终的成绩while(score!="!"){ score=prompt("请输入第"+i+"个成绩：",0); if(!isNaN(score)&&score!=""&&score!="!") { ele[i]=Number(score); i++; } elseif(score!="!") { alert("输入的成绩无效！"); }}document.write("输入的成绩列表：<br/>");【任务实现】for(vari=1;i<ele.length;i++){ document.write(ele[i]+""); if(i%4==0) { document.write("<br/>"); }}vare_max=ele[1];//存储最高分vare_min=ele[1];//存储最低分varsum=0;//存储分数总和，以便统计平均分for(vari=1;i<ele.length;i++){ sum+=ele[i]; if(ele[i]>e_max) { e_max=ele[i]; } if(ele[i]<e_min) { e_min=ele[i]; }}【任务实现】vareverage=Math.round(sum/(ele.length-1)*10)/10;document.write("<br/>平均分数："+everage+"<br/>最高分："+e_max+"<br/>最低分："+e_min);functioncheck(){ varflag=0;//标志，flag=0时无不及格，flag=1时有不及格

for(vari=1;i<ele.length;i++) { if(ele[i]<60) { flag=1; break; } } if(flag==0) { alert("没有不及格成绩。"); } else { alert("有不及格成绩。"); }}</script>【任务实现】项目四注册页面设计——事件设计一个简单的用户注册页面。页面需求如下：填写的信息有姓名、年龄、和城市，且都是必填信息，“城市”文本框只读。当鼠标移入“姓名”或者“年龄”文本框时，光标自动落入文本框内。当鼠标移入“城市”文本框时，文本框中显示文字“请选择城市”。“年龄”文本框中只能输入数字，当焦点落在此文本框中时，按非数字键无法键入。点击“请选择城市”下列列表框，可以选择一个城市。当选择了一个城市后，在“城市”文本框中显示该城市。如果没有填写姓名，点击“提交”按钮提交表单时，会弹出提示框“姓名未填写，不能提交！”。如果没有填写“年龄”，点击“提交”按钮提交表单时，会弹出提示框“年龄未填写，不能提交！”。如果没有选择城市，点击“提交”按钮提交表单时，则弹出提示框“城市未选择，不能提交！”。项目情境理解事件的概念。掌握事件的触发机制。掌握常用事件的应用。学习目标点击页面上的“问候”按钮，弹出两个对话框，分别显示“你好!”和“早上好”。要求不得将事件以及触发代码写在“问候”按钮的标签中，做到代码与标签分离。任务1在代码中设置对象处理事件1、为对象事件赋值属性的设置方式：对象.属性=属性的值;为事件设置要触发的行为动作：对象.事件=函数名称;或者对象.事件=function(){

[函数体];}【相关知识】2、浏览器与事件事件都是由浏览器产生的，而不是由javascript产生的。因此不同的浏览器产生的事件可能不同，就是相同的浏览器不同的版本所产生的事件也有可能不同。因此，对于某个事件在某个浏览器上能正常运行，但在另一个浏览器上就无效。3、加载和卸载事件加载事件为onload，是指加载（打开）页面完毕时产生的事件，卸载事件为onunload，是指卸载（关闭、刷新或者跳转到其他页面）网页时产生的事件。另外在卸载页面前还会触发onbeforeunload事件。【相关知识】4、预加载对象处理事件window.onload=function(){

对象.事件=函数名称;}或者window.onload=function(){

对象.事件=function(){ [函数体];}}【相关知识】在<body>标签内部输入以下代码：<inputtype="button"name="bt1"id="bt1"value="问候"/><scripttype="text/javascript">functionhello(){ alert('你好！'); alert('早上好！');}bt1.onclick=hello;</script>【任务实现】页面上显示一个“跳转到百度”的超级链接，点击该链接弹出一个询问是否跳转的对话框，如图4.4所示。如果点击“确定”按钮，浏览器打开百度首页，如果点击“取消”按钮，浏览器不跳转，仍旧停止本页。任务2事件处理中的返回值取消事件处理的默认动作【相关知识】元素事件描述<a>onclick单击跳转到元素的href属性指定的URL<form>onsubmit、onreset提交表单、重置表单documentoncontextmenu单击鼠标右键可以显示一个快捷菜单1、在页面中制作一个超级链接，标签id为link。代码如下：<aid="link"href="">跳转到百度</a>【任务实现】2、在<head>标签对中输入如下JavaScript代码：<scripttype="text/javascript">window.onload=function(){ link.onclick=function() { varsel=confirm("真的要跳转吗？") if(!sel) { returnfalse; } }}</script>【任务实现】页面上有一个表单，内部有一个文本框，一个“提交”按钮。用户必须在文本框中输入姓名，点击“提交”按钮，表单才能提交跳转到ok.html,否则表单不提交。任务3表单提交事件对象层次模型【相关知识】1、在页面上设计表单界面，HTML代码如下：<formname="form1"method="post"action="ok.html">

姓名：<inputtype="text"name="txtName"id="txtname"><inputtype="submit"name="button"id="button"value="提交"></form>【任务实现】2、在<head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ form1.onsubmit=function() { if(form1.txtName.value=="") { alert("请填写姓名！"); returnfalse; } }}</script>【任务实现】页面上有一张小狗的图片，当鼠标放置到该图片上时，变成另一张小狗的图片；当鼠标移开时，图片恢复成原来小狗图片；当在图片上单击鼠标左键时，弹出对话框，提示信息“汪汪”。任务4鼠标事件鼠标事件【相关知识】事件类型事件描述鼠标移动onmousemove当鼠标在对象上移动时触发onmouseout当鼠标离开对象时触发onmouseover当鼠标移入到对象上时触发鼠标点击onclick当单击鼠标左键时触发ondblclick当双击鼠标左键时触发onmousedown当鼠标键按下的瞬间触发onmouseup当鼠标键按下然后又释放的瞬间触发1、在页面上放置第一张小狗，HTML代码如下：<body><imgid="dog1"src="images/dog1.jpg"></body>【任务实现】2、在<head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ dog1.onmouseover=function() { dog1.src="images/dog2.jpg"; } dog1.onmouseout=function() { dog1.src="images/dog1.jpg"; } dog1.onmousedown=function() { alert("汪汪！"); }}</script>【任务实现】页面上有两个文本框，在第一个文本框中每输入一个字符，第二个文本框中就显示该字符对应在键盘上的键码值。第一个文本框中只能输入5个字符。任务5键盘事件1、键盘事件【相关知识】事

件描

述onkeydown当按下键盘上的键时触发（能识别功能键，不区分大小写按键）onkeyup当松开键盘上的键时触发（能识别功能键，不区分大小写按键）onkeypress当按下键盘上的键时触发（不能识别功能键，区分大小写按键）2、event事件对象event(事件)对象代表事件状态，如事件发生的元素，键盘状态，鼠标状态，鼠标位置和鼠标按钮的状态。【相关知识】2.1event对象兼容性处理IE浏览器有event对象，但是FF火狐浏览器没有event对象，在该浏览器中，可以通过给函数的参数传递event对象。可以使用以下方法：function函数名(ev){varoEvent=ev||event;//使用oEvent代替window.event}或者对象=function(ev){varoEvent=ev||event;//使用oEvent代替window.event}【相关知识】2.2event对象属性【相关知识】属性描述

altKey设置或获取Alt键的状态。

altLeft设置或获取左Alt键的状态。

Button设置或获取用户所按的鼠标按钮。

clientX设置或获取鼠标指针位置相对于窗口客户区域的x坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY设置或获取鼠标指针位置相对于窗口客户区域的y坐标，其中客户区域不包括窗口自身的控件和滚动条。

ctrlKey设置或获取Ctrl键的状态。

ctrlLeft设置或获取左Ctrl键的状态。

fromElement设置或获取事件发生时激活或鼠标将要离开的对象。

keyCode设置或获取与导致事件的按键关联的Unicode按键代码。

offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。

offsetY设置或获取鼠标指针位置相对于触发事件的对象的y坐标。

propertyName设置或获取对象上发生更改的属性名称。

（接上表）【相关知识】repeat获取onkeydown事件是否正在重复。

returnValue设置或获取事件的返回值。

screenX设置或获取获取鼠标指针位置相对于用户屏幕的x坐标。

screenY设置或获取鼠标指针位置相对于用户屏幕的y坐标。

shiftKey设置或获取Shift键的状态。

shiftLeft设置或获取左Shift键的状态。

srcElement设置或获取触发事件的对象。

toElement设置或获取用户要将鼠标指针移动指向的对象的引用。

type从event对象中获取事件名称。

wheelDelta设置或获取滚轮按钮滚动的距离和方向。

x设置或获取鼠标指针位置相对于父文档的x像素坐标。

y设置或获取鼠标指针位置相对于父文档的y像素坐标。2.3event.button的值及其含义【相关知识】值描

述0按下鼠标左键1按下鼠标中间键（滚轮）2按下鼠标右键1、在页面上设置两个文本框，HTML代码如下：<body>字符：<inputtype="text"id="text1">键码：<inputtype="text"id="text2"></body>【任务实现】2、在<head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ text1.onkeydown=function(ev) { varoEvent=ev||event; text2.value=oEvent.keyCode; if(this.value.length>=5) { returnfalse; } }}</script>【任务实现】页面中有一个文本框，要求输入正确格式的电子邮件地址，如果电子邮件地址格式不正确，则给出错误提示信息，表单不能提交。任务6用正则表达式验证电子邮件地址格式1、正则表达式正则表达式又称规则表达式（RegularExpression），是一种文本模式，包括普通字符（如a～z之间的字母）和特殊字符（也叫元字符或限定符）。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。正则表达式不是JavaScript语言特有的，它是独立于语言之外的一种文本模式。许多程序设计语言（如PHP、Python、C#、Java等语言）都支持利用正则表达式进行字符串操作。【相关知识】2、RegExp对象RegExp对象表示正则表达式，是由普通字符和特殊字符（也叫元字符或限定符）组成的文字模板，用于对字符串执行模式匹配。创建RegExp对象的方式：（1）使用字面量创建RegExp对象的语法格式如下：var变量=/正则表达式/匹配模式;（2）使用构造函数创建RegExp对象的语法格式如下：var变量=newRegExp("正则表达式","匹配模式");【相关知识】3、RegExp对象的常用方法【相关知识】方

法描

述exec()检索字符串中指定的值，返回找到的值，并确定其位置test()检索字符串中指定的值，返回true或false4、支持正则表达式的String对象的方法【相关知识】方

法描

述search()在字符串中检索指定的子字符串，或者检索与正则表达式匹配的子字符串，并返回第1个匹配的子字符串在字符串中的起始位置match()在字符串中检索指定的值，或者找到一个或多个正则表达式的匹配replace()替换与正则表达式匹配的子字符串split()把字符串分割为字符串数组1、在页面中设置一个文本框和一个“提交”按钮，HTML代码如下：<body>输入邮箱</br><formname="form1"method="post"action="ok.html">

邮箱：<inputname="email"type="text">*<inputtype="submit"name="btn"id="btn"value="提交"></form></body>【任务实现】2、在<head></head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ form1.onsubmit=function() { varreg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/; if(!reg.test(form1.email.value)) { alert("邮箱地址格式不正确！"); returnfalse; } }}</script>【任务实现】任务7“项目四”的实现this关键字JavaScript中，this关键字有很多用法，一般指的是当前的对象。比如下列语句中的this指的就是文本框本身。<inputtype="text"id="txtname"onMouseDown="this.value='点击鼠标'">【相关知识】在本项目中，当表单控件得到鼠标焦点时，操作鼠标或敲击键盘都需要检查其中的值，所以需要用到鼠标事件和键盘事件。在“年龄”文本框中不允许输入非数字的值和在条件不符合时不允许提交表单都需要用到事件的返回值。检查输入的年龄值是否为数字还要用到Event对象。【任务分析】1、在<body>标签对中编写表单代码：<body>注册</br><formname="form1"method="post"action="ok.html">

姓名：<inputname="username"type="text">*

年龄：<inputname="age"type="text"id="age">* <selectname="sel_city"><optionvalue="0">请选择城市</option><optionvalue="北京">北京</option><optionvalue="上海">上海</option><optionvalue="广州">广州</option> </sele

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论