《JavaScript基本结构.ppt》由会员分享,可在线阅读,更多相关《JavaScript基本结构.ppt(18页珍藏版)》请在三一办公上搜索。
1、什么是JavaScript,脚本的基本结构 var count=0;document.write(淘宝网欢迎您!);for(i=0;i淘宝网欢迎您!);BODY部分的内容,如何使用JavaScript实现此部分内容?,什么是JavaScript,脚本的执行原理,应用服务器,IE,IE,解析HTML标签和JavaScript脚本,从服务器端下载含JavaScript的页面,返回响应,客户端请求含JS的页面,发送请求,1,用户输入,2,3,JavaScript的基本语法,变量的声明和赋值,var count;,count=5;,定义变量,赋值,“var”用于声明变量的关键字“count”变量名,v
2、ar x,y,z=10;,var count=10;,同时声明和赋值变量,声明多个变量,运算符号,运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值根据所执行的运算,运算符可分为以下类别:算术运算符+、-、*、/、%、+、-、-(求反)比较运算符=、!=、=、=逻辑运算符&、|、!,逻辑控制语句,if条件语句switch多分支语句for、while循环语句,if(条件)/JavaScript代码;else/JavaScript代码;,switch(表达式)case 常量1:JavaScript语句1;break;case 常量2:JavaScript语句2;break;.defaul
3、t:JavaScript语句3;,for(初始化;条件;增量)语句集;while(条件)语句集;,注释,单行注释以/开始,以行末结束例如:/表示JavaScript代码的开始,多行注释以/*开始,以*/结束,符号/*/指示中间的语句是该程序中的注释。例如:/*helloWorld.html 2007-9-29 第一个JavaScript程序*/,类型转换,parseInt(String)将字符串转换为整型数字 如:parseInt(“86”)将字符串“86”转换为整型值86parseFloat(String)将字符串转换为浮点型数字 如:parseInt(“34.45”)将字符串“34.45”
4、转换为浮点值34.45,什么是函数,函数的含义:类似于Java中的方法,是执行特定任务的语句块。,如何希望点击某个按钮后才显示“HelloWorld”,并能输入显示的次数,怎么办?,演示示例3:调用函数输出“HelloWorld”,什么是函数,1、在页面中放置一个文本框和一个按钮,让用户输入次数后点击按钮才显示2、把循环显示的代码放置到函数中,当点击按钮时,才调用函数显示HelloWorld经过分析,该如何解决上面问题?,使用自定义函数,如何使用函数,创建函数 function 函数名(参数1,参数2,)语句;调用函数 函数调用一般和表单元素的事件一起使用,调用格式为:事件名“函数名”;,fu
5、nction showHello()var count=document.myForm.txtCount.value;for(i=0;iHelloWorld);,表示单击此按钮时,调用函数showHello()执行,小结1,编写如左图所示,具有能对两个操作数进行加、减、乘、除运算的简易计算器。,名为myform的表单,名为divButton2的普通按钮,名为txtNum1的文本框,练习答案,练习代码,提示:加、减、乘、除四个按钮分别调用四个函数实现两个数相加、相减、相乘和相除,如何使用函数,在小结1中,4个按钮调用的函数的代码很类似,怎么优化代码?,查看小结1练习答案代码,比较4个函数,只有运
6、算符号不一样,将运算符号作为函数的参数即可。怎么用一个函数来代替4个结构相似的函数?,使用有参函数,定义有参函数,JavaScript 代码,function compute(op)var num1,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;i
7、f(op=*)document.myform.txtResult.value=num1*num2;if(op=/,定义有参函数compute(),完成计算功能,op参数代表运算符号。,调用有参函数,JavaScript 代码,调用有参函数,查看完整代码,常见错误1,function compute(op)x=5;var num1,num2;num1=parseFloat(document.myform.txtNum1.value);num2=parseFloat(document.myform.txtNum2.value);if(op=+)document.myform.txtResult.v
8、alue=num1+num2;if(op=-)document.myform.txtResult.value=num1-num2;,变量可以不声明而直接赋值。如x=5;不推荐使用,容易出错。,常见错误2,function compute(op)var Num1,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;,JavaScript大小写非常敏感,常见错误3,function compute(op)var num1,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;,需要使用parseFloat方法进行转换,否则认为是字符串,