计算机应用技术第3章-JavaScript语法基础.pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,第,2,章,JavaScript,基础,理解,JavaScript,中变量的概念,理解,JavaScript,中的数据类型,了解数据类型的转换,学习目标,01,02,03,掌握,JavaScript,的条件语句,掌握,JavaScript,的循环语句,掌握函数的定义及其调用,04,05,06,本章任务,任务,1,显示变量数据类型,任务,2,根据成绩给出学生考评,任务,3,实现猜数游戏,任务,4,制作简易计算器,任务,1,显示变量数据类型,任务描述,如何在页面显示变量的数据类型？,演示任务,1,：在页面显示变量的数据类型,任务分析,在页面显示变量数据类型需要以下步骤：,1.,声明变量,2.,为变量赋值,3.,使用,typeof,方法显示数据类型名称,实现思路,变 量,变量,以字母或下划线开头,区分大小写,可以包含数字、字母,变量的声明和赋值,var count;,count=5;,定义变量,赋值,“,var”,用于声明变量的关键字,“,count”,变量名,var x,y,z=10;,var count=10;,同时声明和赋值变量,声明多个变量,示例,示例,示例,示例,声明变量,document.write(,淘宝相机竞拍,);,var price=1000;,var addPrice=prompt(,相机竞拍，请出一口价,:,1);,var total=price+addPrice;,document.write(“,你购买相机的价格：,+total+”);,定义变量并赋值,赋 值,输 出,示例,变量的作用域,变量,a,、,b,和,c,只能,在其各自的函数中,被访问,可由函数,1,、函数,2,和函数,3,访问,脚本,函数,function1,局部变量,a,函数,function2,局部变量,b,函数,function3,局部变量,c,全局变量,test,根据编程目的决定将变量声明为全局变量还是局部变量,数据类型,数值型,整型、浮点型,字符串型,单引号或双引号引起来,布尔型,true,false,Null,、,undefined,弱类型，区分大小写，句尾分号非强制要求。,类型转换,toString(),：把其他类型转换成字符串,如,:var num=35;num.toString(),parseInt(String),、,parseFloat(String),将字符串转换为,整型、,浮点型,如,:parseInt(“34.45”),将字符串“,34.45”,转换为浮点值,34.45,基本数据类型转换,Boolean(value),：把值转换为布尔型，如,Boolean(,“”,),返回,false,、,Boolean(“-1”),返回,true,Number(value),：,将,值,转换为数值型,String(value),：把值转换为字符串,toFixed(),：,把值按照指定的小数位返回数字的字符串表示,运算符,算术运算符,+,、,-,、*、,/,、,%,、,+,、,-,比较运算符,=,、,!=,、,、,=,、,、,num),alert(_,你猜的数字大了,);,go_on=confirm(,是否继续游戏？,);,else if(guess num),alert(_,你猜的数字小了,);,go_on=confirm(,是否继续游戏？,);,else,alert(,恭喜你，猜对了，幸运数字是：,+num);,break;,while(go_on);,alert(,谢谢参与游戏！,);,产生,1,100,之间的随机整数,练一练,输入打印行数，打印输出由*组成的直角三角形。,练习,任务,4,制作简易计算器,任务描述,在页面实现简易计算器，用户在页面输入第一个数和第二个数，点击相应操作符将操作结果显示在计算结果文本框中。,演示任务,4,：简易计算器,任务分析,实现思路,设计静态页面。,获取用户输入文本框的值。,使用函数定义对应的加、减、乘、除操作。,单击按钮时调用函数。,什么是函数,函数的含义：类似于,Java,中的方法，是执行特定任务的语句块。,函数有两种：,JavaScript,自带的系统函数,(,例如,IsNaN,函数,),、,用户自定义函数,function,函数名,(,参数,1,参数,2,，,),语句,;,return ,返回值,;,自定义函数语法,调用函数：三种情况,1.,函数调用和表单元素的事件一起使用，格式：事件名“函数名,(),”,;,2.,在脚本中直接调用，格式：函数名,();,3.,在脚本中通过元素事件调用，格式：事件名,=,函数名；,如何使用函数,function showHello(),var count=document.myForm.txtCount.value;,for(i=0;icount;i+),document.write(HelloWorld);,示例,定义一个,showHello,函数，通过三种方式调用该函数。,在,标签对中添加语句：,showHello();,在,标签对中添加语句：,window.onload=showHello;,三种调用方式,表示单击此按钮时，调用函数,showHello(),执行,如何使用函数,把,showHello,定义成有参函数，使用,prompt(),提示用户每次输出信息的行数，然后将,prompt(),方法返回的值作为参数传递给函数,showHello,如何使用函数,示例,把,showHello,定义成有参函数，使用,prompt(),提示用户每次输出信息的行数，然后将,prompt(),方法返回的值作为参数传递给函数,showHello,function showHello(count),for(var i=0;icount;i+),document.write(Hello Everybody!);,整个语句类似赋值语句：,var showHello=,变量值,;,匿名函数,匿名函数定义的整个语句可以像值一样赋给一个变量进行保存，也可以将它赋给一个事件触发，因此可用变量名或事件名调用匿名函数,把,showHello,改为匿名函数,示例,var show=function(count),for(var i=0;icount;i+),document.write(Hello Everybody!);,;,整个语句类似赋值语句：,var show=,变量值,;,匿名函数,匿名函数定义的整个语句可以赋给某个变量，该变量可以作为函数的参数进行传递,定义计算数的平方的匿名函数，使用事件名调用该函数,匿名函数,匿名函数定义的整个语句可以赋给某个变量，该变量可以作为函数的参数进行传递,定义计算数的平方的匿名函数，使用事件名调用该函数,示例,window.onload=function(),document.getElementById(btn).onclick=function(),var count=prompt(,请输入计算的数,:);,alert(count+,的平方值是：,+count*count);,document.getElementById(“btn”),表示获取页面,id,为“,btn”,的按钮元素,onclick,指触发按钮的单击事件时调用匿名函数,window.onload,是页面加载时触发的事件，此处定义了一个匿名函数,简单了解获取文本框值的方法,document.,表单名,.,文本框名,.value,document.getElementById(id).value,从文本框中获取的值都是字符串，若进行加减，都要进行类型转换。,任务实现,使用有参函数,在简易计算器中,4,个按钮调用的函数的代码很类似，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来代替,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 ;,if(op=*),document.myform.txtResult.value=num1*num2 ;,if(op=/&num2!=0),document.myform.txtResult.value=num1/num2 ;,定义有参函数,compute(),，完成计算功能，,op,参数代表运算符号。,调用有参函数,调用有参函数,练一练,根据素材制作如图所示页面，在页面输入第一个数和第二个数，单击,+,（加）、,-,（减）、*（乘）、,/,（除）按钮时，实现两个数的相应运算,养成良好的编程习惯,命名风格,函数主要是用来实现功能，通常用“动词,+,名词是”形式,变量名通常是用来存储数据，通常用,”,名词“或”形容词,+,名词“形式,变量名以小写字母开头，对于多个词的情况，如果没有分隔符，则从第二个开始每个词语第一个字母大写。,类的命名通常是使用名词，类名应该以大写字母开头。,注释,单行注释以,/,开始，以行末结束,例如：,/,表示,JavaScript,代码的开始,多行注释以,/*,开始，以*,/,结束，符号,/*/,指示中间的语句是该程序中的注释。,例如：,/*,helloWorld.html,2007-9-29,第一个,JavaScript,程序,*,/,总结,掌握,JavaScript,中“弱类型”的含义,能熟练运用,JavaScript,中的各种逻辑控制语句：,if,条件语句、,switch,多分支语句、,for/while/do while,循环语句,掌握函数的创建和调用方法,学会使用,JavaScript,的几个方法：,document.write(),、,alert(),、,prompt(),、,parseInt()parseFloat(),