第五讲JavaScript编程技术一

第三讲JavaScript(上)4.1－4.2基本语法与网页事件处理2***温故***温故根据样式表定义的位置不同，可分为哪三类？什么时候使用行内样式，如何使用？什么场合使用内嵌样式，如何使用？什么场合使用独立样式文件，如何使用？选择符有哪些类型？class选择符如何定义和使用？id选择符如何定义和使用？作业中的问题4个样式可以放在一个样式表文件中定义，不必写4个样式文件一般定义CLASS选择符或ID选择符，而不使用标记选择符。未使用独立样式表文件3*知新*理解什么是JavaScript将JavaScript嵌入到HTML中基本语法变量、数据类型和运算符JavaScript的流程控制JavaScript函数JavaScript常用对象网页事件处理标记click鼠标事件标记onchange事件键盘事件4什么是JavaScript?什么是JavaScriptJavaScript是由Netscape公司开发并在浏览器中执行的脚本语言。可以嵌入到Html文件中，增加网页动态效果或数据合法性验证。它是基于对象（ObjectBased）。与Java名字类似，实际上无关。基于事件驱动（EventDriver）。当客户在主页中执行了某种操作，比如按下鼠标、移动窗口、选择菜单等，将会引起相应的事件响应。主要功能网页特效：光标动画、动态广告等数据验证：登录、注册、调查表5JavaScript用于数据验证64.1.1将JavaScript嵌入网页（重点）将JavaScript脚本嵌入HTML网页的方式有三种：SCRIPT标记块形式－用SCRIPT标记将语句嵌入文档独立js脚本文件形式－将JavaScript文件链接到HTML文档具体事件属性方式－通过事件属性与HTML结合SCRIPTlanguage=JavaScriptdocument.write(欢迎来到JavaScript世界);/SCRIPTSCRIPTlanguage=JavaScriptsrc=文件名.js/SCRIPTinputtype=buttononclick=i=20;i=i+100;alert(i)value=clickme/7Script标记块JavaScript代码htmlheadtitleJavaScript脚测试/title/headbodyscriptlanguage=JavaScriptdocument.writeln(欢迎来到JavaScript世界);/scriptp尽情享受学习快乐！！/p/body/html脚本代码设置语言document.write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口8使用外部JS文件JavaScript代码(4-1.htm)HTMLHEADTITLE使用外部文件/TITLESCRIPTlanguage=JavaScriptSRC=4-1.js/SCRIPT/HEADBODYP以上文本是通过访问外部JavaScript文件显示的/BODY/HTMLdocument.write(h1独立js文件嵌入/h1);JavaScript代码(4-1.js)94.1.2变量、声明变量vara;a=10;“var”－用于声明变量的关键字“a”－变量名varx,y,z=10;vara=10;同时声明和初始化变量：声明变量与赋值声明多个变量：变量名必须以字母或下划线（_）开头，可以包含数字、从A至Z的大小写字母，区分大小写。10变量定义实例(4-5.html)htmlheadtitle许三多哲学/title/headbodyh1活着就要做有意义的事/h1scriptlanguage=javascriptvari=2;varj=h+i+有意义就是好好活/h+i+;document.writeln(j);i=3;j=h+i+有意义就是好好活/h+i+;document.writeln(j);/script/body/html11JavaScript中消息对话框(重点)用于和用户交互的消息对话框有三个：alert(警告信息);prompt(提示信息,初始值);confirm(确认消息);12例：声明变量HTMLHEADTITLE使用变量/TITLESCRIPTLANGUAGE=Javascriptvarx;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+BR);//+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);/SCRIPT/HEAD/HTML定义变量赋值输出prompt(提示信息,默认值)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消返回空字符串。13变量a、b和c只能在其各自的函数中被访问变量的作用域脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数1、函数2和函数3访问全局变量gg全局变量允许不用var关键字进行声明，但局部变量则必须以此关键字来声明14数据类型及常量数据值：整数、浮点数字符串型字符串文字放在一对匹配的单引号(')或双引号()中。字符串中可以包含双引号，该双引号两边需加单引号，也可以包含单引号，该单引号两边需加双引号。如：I'mastudent、'herf=注意：JavaScript中没有单独的字符类型，表示单个字符时只能用单字符的字符串形式，如：\n、A布尔：true、false空：null表示无值或无对象15运算符运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符算术运算符说明示例+加、字符串连接a=5+8-减a=8-5/除a=20/5*乘a=5*19%取模－两个数相除的余数10%3=1++自加，将操作数的值加1。--自减，将操作数的值减1。16比较运算符比较运算符运算符说明示例==等于。如果两个操作数相等，则返回真。a==b!=不等于。如果两个操作数不相等，则返回真。Var2!=5大于。如果左边的操作数大于右边的操作数，则返回真。Var1var2小于。如果左边的操作数小于右边的操作数，则返回真。Var2var1=小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。Var2=4Var2=var1=大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。Var1=5Var1=var217运算符逻辑运算符运算符值说明与(&&)expr1&&expr2只有当expr1和expr2同为真时，才返回真。否则，返回假。或(||)expr1||expr2如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。非(!)!expr如果表达式为真，则返回假。如果为假，则返回真。18if语句if-else语句if嵌套语法格式：if(条件){//JavaScript代码;}4.1.3JavaScript流程控制if(条件){//JavaScript代码;}else{//JavaScript代码;}if(条件1){if(条件2){//JavaScript代码;}}19switch语句switch(表达式){case常量1:JavaScript语句;break;case常量2:JavaScript语句;break;...default:JavaScript语句;}多分支语句20循环控制语句for循环do-whilewhile21格式如下例：vari;for(i=0;i10;i++){//循环体语句;}for(varn=1;n20;n++){//循环体语句}for循环如何实现22例：for循环的应用－打印金字塔直线HTMLHEADTITLEfor循环演示/TITLESCRIPTlanguage=JavaScriptdocument.write(H2align=center打印金字塔直线/H2);for(vari=0;i100;i=i+5)document.write(HRalign=centerwidth=+i+%);/SCRIPT/HEADBODY/BODY/HTML当i=5时，HRalign=centerwidth=5％23while循环while(循环条件){//语句；}do－while循环do{//语句；}while(循环条件);while和do－while循环244.1.4JavaScript函数(重点)定义函数，一般放在HTML文档的head/head之间，格式：function函数名(参数名1,参数名2,…){语句;}调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝函数名(参数值1,参数值2,…);例：functionsum(one,two){varresult=one+two;returnresult;}INPUTname=addtype=buttonvalue=加法onClick=sum(2,5)将计算结果返回调用者函数调用25例－利用函数操作表单对象要求：输入购买数量和出价金额后，单击“计算看看”按钮，则在“预计总价”文本框内显示总价钱。分析：编写函数实现计算功能，点击按钮时调用函数。问题：如何获取和设置输入文本框的值？输入框是表单元素，访问表单元素的方法如下：document.表单名.表单元素名.元素属性名，如：formname=myforminputtype=textname=num/form赋值：document.myform.num.value=1200;取值：varx=document.myform.num.value;26HEADSCRIPTlanguage=JavaScriptfunctioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;document.calc.total.value=parseFloat(numb1)*parseFloat(numb2);}/SCRIPT/HEAD为表单元素赋值并显示…INPUTname=getAnswerTYPE=buttononClick=calcu()value=计算看看添加单击事件，单击按钮时调用“calcu()”函数例－函数操作表单功能实现获取表单中输入的数据定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function函数名(参数列表){//JavaScript语句；}parseFloat([数字串])是类型转换函数27内置对象－Date对象Date对象提供了灵活的操作时间和日期的方法创建日期对象：newDate([参数])星期的天数与月份数都是从0开始表示，如：第0月是1月如果没有参数，表示当前日期和时间，例：vartoday=newDate()28Date对象的主要方法方法说明getDate()返回Date对象中月份中的天数，其值介于1至31之间getDay()返回Date对象中的星期几，其值介于0至6之间getHours()返回Date对象中的小时数，其值介于0至23之间getMinutes()返回Date对象中的分钟数，其值介于0至59之间getSeconds()返回Date对象中的秒数，其值介于0至59之间getMonth()返回Date对象中的月份，其值介于0