JavaScrip编程技术.ppt

JavaScript编程技术,内容摘要,理解JavaScript语言基本特征掌握如何将 JavaScript 嵌入到 HTML 中理解变量、数据类型和运算符掌握 流程控制语句理解网页文档对象模型理解浏览器对象模型理解各种JavaScript典型应用,JavaScript是在浏览器端执行的脚本语言，嵌套在HTML程序中，通过控制网页中各种标记的样式变化增加网页动态效果；或对页面数据进行合法性验证。,什么是JavaScript,Jeny,Jeny 想创建一个电子邮件帐户,J*24US,帐户 Id：密码：年龄：国家：,*,这样，JavaScript 将验证数据并给出错误信息（如有）,3.1 JavaScript基本语法3.1.1 JavaScript程序结构,和CSS与HTML文件结合方法类似，JavaScript文件可以通过三种途径和HTML文件结合：JavaScript独立脚本文件形式、标记块形式、具体的事件属性方式。,1、独立js脚本文件形式如果有独立文件4-1.js document.write(Hello BITS!)document代表浏览器中的当前HTML网页，write是输出到当前文档。,文件4-1.HTML 比特塞威斯 欢迎光临比特塞威斯公司 Hello BITS!this is bits 通过标记引入外界js脚本文件，适用于js文件中的程序通用性较高的情况，所有页面都可调用。,2、通过标记与HTML结合 比特塞威斯 欢迎光临比特塞威斯公司 document.write(Hello BITS!)this is bits 适用于重用度不高的情况，当前页面中可以被重用。,3、通过事件属性与HTML结合 比特塞威斯 欢迎光临比特塞威斯公司 this is bits 事件处理性程序语句直接写在事件属性中，不需要标记。,3.1.2 JavaScript中的变量,变量是构成程序语言的基本元素，JavaScript中变量以var关键字声明。var strName;var i=0;类型后期确定机制,比特塞威斯 欢迎光临比特塞威斯公司 var i=1;var head1=hello bits;document.write(head1);i=2;head1=hello bits;document.write(head1);,var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法,10020?bug,+字符串相连：100+”200”,200,var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示,parseFloat()函数将字符串转换为float数据 parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(not a number),验证上例 var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示,变量练习,数组-1,声明数组 var 数组名=new Array(数组大小);例：var emp=new Array(3)添加元素 emp0=“AA;emp1=“BB;emp2=“CC;,emp,也可以声明数组并赋初值：例：var emp=new Array(“AA”，“BB”，“CC”)；,使用数组var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;document.write(数组emp中的数据为:);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组-2,数组-3,常用属性 length：返回数组中元素的个数常用方法,var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组-4,转义字符,和C语言一样，js也有转义字符，常用的就是：“n”,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 根据所执行的运算，运算符可分为以下类别：算术运算符 比较运算符 逻辑运算符,算术运算符,算术运算符-1,实现步骤：1.使用DreamWeaver设计页面2.指定各个文本框的名称3.切换为代码视图，编写脚本代码4.浏览并调试,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;,计算总价并显示,添加单击事件，单击按钮时调用“calcu()”函数,算术运算符-2,获取表单中输入的数据：document.表单名.表单元素名.value,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function 函数名(参数列表)/JavaScript语句；,比较运算符-1,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500)alert(购买总价超过500n支付时将赠送超级Q币2枚！);.其他代码略，同上例,比较运算符-2,购买总价超过500，赠送超级Q币2枚！,逻辑运算符-1,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500).其他代码略，同上例,逻辑运算符-2,5001000 之间，赠送超级Q币两枚；10002000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。,3.1.3 JavaScript流程控制,1、分支控制语句（条件语句）,if(条件)JavaScript代码;,语法：,if 语句-1,如果要执行多个语句，必须将这些语句放在一对大括号()内。但如果只要执行一个语句，则可以省略大括号,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=).其他代码略，同上例,If语句-2,如果输入框中的数据用户漏填了，出现NaN的 bug 为什么呢?,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=),If-else语句,提示没有填写购买数量或者竞拍价格?,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=).,嵌套If语句,购买数量无意中输入负数，出现 bug 怎么办?,switch 语句-1,switch(表达式)case 常量1:JavaScript语句;break;case 常量2:JavaScript语句;break;.default:JavaScript语句;,语法：,switch语句-2,var f=document.calc.pay.value;/支付方式代号 var grade;/折扣率 var total=parseFloat(numb1)*parseFloat(numb2);switch(parseInt(f)case 1:grade=0.6;/打6折优惠 break;case 2:.同理其他方式打7折、八折 case 4:grade=0.9;/打9折优惠 break;default:alert(请重新选择支付方式！);return;var money=total*grade;/根据折扣率，计算实际总价 document.calc.result.value=money;alert(您享受了+grade*10+折优惠！);.,银行转帐 打6折电话支付 打7折邮政汇款 打8折Q币支付 打9折,下拉列表框pay的选项和值,2、循环语句,for循环 do-while while,for循环例：var i;for(i=0;i10;i+)/语句;,for 循环,For 循环演示document.write(打印金字塔直线);for(var i=0;i);,for 循环,如何实现,当i=5 时，,while循环 while(循环条件)/语句；dowhile循环 do/语句；while(循环条件);,while和dowhile循环,先执行，后判断循环条件,.myfont font-size:150;color:#c99c96;font-family:Webdings/产生埃及图像的特殊字体 document.write(每个字符都对应一个漂亮的埃及图像);do var c=prompt(输入一个字符，输入N 或n停止,A);document.write(+c+);while(c!=N,while和dowhile循环,输入一个字符，直到N停止，用哪个循环,3.1.4 JavaScript 函数,内置函数 eval 函数：用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,var str1=prompt(“输入一个表达式，我给您计算,1+1);var result=eval(str1);document.write(str1+=+result);var x=prompt(输入一些数据,0);if(isNaN(x)alert(x+不是一个数字);else alert(x+是一个数字);,自定义函数,定义函数：function 函数名(参数1,参数2，)语句;调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名”;,function sum(one,two)var result=one+two;return result;,表示单击此按钮时，调用函数sum()执行,函数的应用,num1,num2,result,定义函数,定义函数compute()，完成计算的功能。op参数代表运算符号,调用函数,第一个数 第二个数 计算结果,JavaScript 函数练习,验证教材P73示例。,3.1.5 JavaScript 中的常用对象,对象是属性和/方法的组合属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车,对象：汽车,属性：型号：法拉利颜色：绿色,方法：前进、刹车、倒车,1.Date 对象,Date方法的分组：,用作 Date 方法的参数的整数：,Set 方法：,Get 方法：,To 方法：,Parse 方法和 UTC 方法,如何实现,var now=new Date();var hour=now.getHours();if(hour=0,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,Date 对象应用实例,Date 对象应用实例,var myTime=setTimeout(“disptime()”,1000);设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟。,设置样式：无边框的文本框,Onload()事件，页面加载就调用函数：disptime（显示时间）,Date对象练习,验证上例,2.Math 对象,Math.random()：产生01的随机小数Math.round()：四舍五入取整，如9.34 取整为9,如何实现,自动刷新 document.write(2秒自动刷新，随机显示图片);var i=0;i=Math.round(Math.random()*8+1);document.write();,假定随机产生的数字i=3，上述代码即为：显示第三幅图片（3.jpg）,每隔2秒刷新网页,Math.round(Math.random()*8+1)产生1-9的数字,MATH对象方法练习,验证上例,3.String 对象,创建字符串有两种不同方法：使用 var 语句 var newstr=“这是我的字符串创建 String 对象var newstr=new String(“这是我的字符串),String相关函数,属性：length方法：charAtindexOfsubstrtoLowerCaseeval,String对象方法练习,验证上例,JavaScript 事件,3.2 网页事件处理,JavaScript 事件处理程序,JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是：事件名=JavaScript 代码函数 表示鼠标按下时，将调用执行函数check()。,onFocus和onBlur 事件-1,function myfun1()if(document.myform.card.value=请注意格式：10 xxxxxx)document.myform.card.value=;function myfun2()var a=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();,文本框获得鼠标焦点时（onFocus）调用的函数：清空卡号文本框,文本框失去鼠标焦点时（onBlur）调用的函数：判断格式是否正确,focus()方法再次获得焦点，即鼠标光标回到卡号文本框,卡号：密码：,onFocus和onBlur 事件-2,添加事件处理,onMouseOver和onMouseDown事件,图片切换 低价转让哈士奇弟弟 移过来看看俺啊,添加事件处理：切换图片,onMouseOver=src=dog2.jpg 表示本图片的图片名称替换为dog2.jpg。请注意：由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。,网页事件练习,验证上例,3.3 网页浏览器对象,http:/,Window 窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,浏览器对象的分层结构,Window 对象属性,1.Window 对象,Window 对象方法,Window 对象应用示例1,function openwindow()window.open(google.htm);function closewindow()window.close();,使用 Open 方法打开新窗口,使用 Close 方法关闭窗口,添加单击事件,因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);其他方法也是如此。,Window 对象应用示例2,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许 location：是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；,我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);,function openwindow()open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,使用 Open 方法打开广告新窗口,添加页面加载事件,Document 对象属性,2.Document 对象,Document对象方法,getElementById(id)返回指定元素的引用 getElementsByName(elementName)返回name=elementName的所有XHTML元素对象的列表 getElementsByTagName(name)返回文档中所有匹配的元素的集合 createComment(data)创建XHTML注释 createElement(name)创建指定类型的新元素 createTextNode(text)创建一个纯文本结点 element方法：getAttribute(id)返回指定属性的值 setAttribute(id,value)给属性赋值 removeAttribute(id)移除指定属性和它的值 getElementsByTagName(name)返回结点内所有匹配的元素的集合,Document 对象 应用实例1,无标题文档function change(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,1.插入一个层Layer1，z-index=1；2.层中插入一幅图片。,Document 对象 应用实例2,3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：var myclocksetTimeout（”move()”,500）;if()clearTimeout（myclock）;,function move()document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=Math.random()*500;setTimeout(move(),1000);随机漂浮的广告,定义层图片移动的函数move(),每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果,getElementById(“ID名称”)方法：根据ID名称获取HTML元素，这里表示获取层对象Layer1。left和top表示层Layer1的左边距和上边距，设定为随机的值。,3.Location对象,Location 对象属性,方法,Location 对象应用示例,下拉菜单menu1,function jump()location.href=document.myform.menu1.value;.-请选择季节景色-春天美景 夏天一色,根据用户的选择，修改跳转的网址,添加选项改变事件,4.History对象,history 对象方法,Back()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；,