JavaScript基本结构.ppt

什么是JavaScriptHTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=0;document.write(淘宝网欢迎您！);for(i=0;i5;i++)document.write(H2淘宝网欢迎您！/H2);/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML如何使用JavaScript实现此部分内容？什么是JavaScript•脚本的执行原理应用服务器IEIE解析HTML标签和JavaScript脚本从服务器端下载含JavaScript的页面返回响应客户端请求含JS的页面发送请求1用户输入23JavaScript的基本语法类型转换注释控制语句运算符号变量基本语法变量的声明和赋值varcount;count=5;定义变量赋值“var”－用于声明变量的关键字“count”－变量名varx,y,z=10;varcount=10;同时声明和赋值变量声明多个变量运算符号•运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值•根据所执行的运算，运算符可分为以下类别：–算术运算符+、-、*、/、%、++、--、-(求反)–比较运算符==、!=、、=、、=–逻辑运算符&&、||、！逻辑控制语句•if条件语句•switch多分支语句•for、while循环语句if(条件){//JavaScript代码;}else{//JavaScript代码;}switch(表达式){case常量1:JavaScript语句1;break;case常量2:JavaScript语句2;break;...default:JavaScript语句3;}for(初始化;条件;增量){语句集;}while(条件){语句集;}注释单行注释以//开始，以行末结束例如：SCRIPTlanguage=“javascript”//表示JavaScript代码的开始多行注释以/*开始，以*/结束，符号/*……*/指示中间的语句是该程序中的注释。例如：/*helloWorld.html2007-9-29第一个JavaScript程序*/类型转换•parseInt(String)将字符串转换为整型数字如:parseInt(“86”)将字符串“86”转换为整型值86•parseFloat(String)将字符串转换为浮点型数字如:parseInt(“34.45”)将字符串“34.45”转换为浮点值34.45什么是函数•函数的含义：类似于Java中的方法，是执行特定任务的语句块。如何希望点击某个按钮后才显示“HelloWorld”，并能输入显示的次数，怎么办？演示示例3：调用函数输出“HelloWorld”什么是函数1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWorld经过分析，该如何解决上面问题？使用自定义函数如何使用函数•创建函数function函数名(参数1,参数2，…){语句;}•调用函数函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名”;functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;icount;i++)document.write(H2HelloWorld/H2);}INPUTtype=submitname=Submitvalue=显示HelloWorldonClick=showHello()表示单击此按钮时，调用函数showHello()执行小结1•编写如左图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。名为myform的表单名为divButton2的普通按钮名为txtNum1的文本框练习答案练习代码提示：加、减、乘、除四个按钮分别调用四个函数实现两个数相加、相减、相乘和相除如何使用函数•在小结1中，4个按钮调用的函数的代码很类似，怎么优化代码？查看小结1练习答案代码•比较4个函数，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来代替4个结构相似的函数？使用有参函数定义有参函数JavaScript代码HEADSCRIPTlanguage=JavaScriptfunctioncompute(op){varnum1,num2;num1=parseFloat(document.myform.txtNum1.value);num2=parseFloat(document.myform.txtNum2.value);if(op==+)document.myform.txtResult.value=num1+num2;if(op==-)document.myform.txtResult.value=num1-num2;if(op==*)document.myform.txtResult.value=num1*num2;if(op==/&&num2!=0)document.myform.txtResult.value=num1/num2;}/SCRIPT/HEAD定义有参函数compute()，完成计算功能，op参数代表运算符号。调用有参函数JavaScript代码FORMaction=method=postname=myformid=myform……TRTDINPUTname=addButton2type=button“id=addButton2value=＋onClick=compute('+')/TDTDINPUTname=subButton2type=buttonid=subButton2value=－onClick=compute('-')/TDTDINPUTname=mulButton2type=button“id=mulButton2value=×onClick=compute('*')/TDTDINPUTname=divButton2type=buttonid=divButton2value=÷onClick=compute('/')/TD/TR……/FORM调用有参函数查看完整代码常见错误1SCRIPTlanguage=javascriptfunctioncompute(op){x=5;varnum1,num2;num1=parseFloat(document.myform.txtNum1.value);num2=parseFloat(document.myform.txtNum2.value);if(op==+)document.myform.txtResult.value=num1+num2;if(op==-)document.myform.txtResult.value=num1-num2;}/SCRIPT变量可以不声明而直接赋值。如x=5;不推荐使用，容易出错。常见错误2SCRIPTlanguage=javascriptfunctioncompute(op){varNum1,num2;num1=parseFloat(document.myform.txtNum1.value);num2=parseFloat(document.myform.txtNum2.value);if(op==+)document.myform.txtResult.value=num1+num2;if(op==-)document.myform.txtResult.value=num1-num2;}/SCRIPTJavaScript大小写非常敏感常见错误3SCRIPTlanguage=javascriptfunctioncompute(op){varnum1,num2;num1=document.myform.txtNum1.value;num2=document.myform.txtNum2.value;if(op==+)document.myform.txtResult.value=num1+num2;if(op==-)document.myform.txtResult.value=num1-num2;}/SCRIPT需要使用parseFloat方法进行转换，否则认为是字符串