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

第2章JavaScript基础理解JavaScript中变量的概念理解JavaScript中的数据类型了解数据类型的转换学习目标010203掌握JavaScript的条件语句掌握JavaScript的循环语句掌握函数的定义及其调用040506本章任务任务1显示变量数据类型任务2根据成绩给出学生考评任务3实现猜数游戏任务4制作简易计算器任务1显示变量数据类型任务描述如何在页面显示变量的数据类型？演示任务1：在页面显示变量的数据类型任务分析在页面显示变量数据类型需要以下步骤：1.声明变量2.为变量赋值3.使用typeof方法显示数据类型名称实现思路变量变量以字母或下划线开头区分大小写可以包含数字、字母变量的声明和赋值varcount;count=5;定义变量赋值

“var”－用于声明变量的关键字“count”－变量名varx,y,z=10;varcount=10;同时声明和赋值变量声明多个变量示例示例示例示例声明变量

document.write("<h1>淘宝相机竞拍</h1>"); varprice=1000; varaddPrice=prompt("相机竞拍，请出一口价:","1"); vartotal=price+addPrice; document.write(“<h2>你购买相机的价格："+total+”</h2>”);定义变量并赋值赋值输出示例变量的作用域变量a、b和c只能在其各自的函数中被访问可由函数1、函数2和函数3访问脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c全局变量test根据编程目的决定将变量声明为全局变量还是局部变量数据类型数值型整型、浮点型字符串型单引号或双引号引起来布尔型true,falseNull、undefined弱类型，区分大小写，句尾分号非强制要求。类型转换toString()：把其他类型转换成字符串如:varnum=35;num.toString()parseInt(String)、parseFloat(String)将字符串转换为整型、浮点型如:parseInt(“34.45”)将字符串“34.45”转换为浮点值34.45基本数据类型转换Boolean(value)：把值转换为布尔型，如Boolean(“”)返回false、Boolean(“-1”)返回trueNumber(value)：将值转换为数值型String(value)：把值转换为字符串toFixed()：把值按照指定的小数位返回数字的字符串表示运算符算术运算符+、-、*、/、%、++、--比较运算符==、!=、>、>=、<、<=逻辑运算符&&、||、！条件运算符？：document.write("<h1>淘宝相机竞拍</h1>");

varprice=1000;

varaddPrice=prompt("相机竞拍，请出一口价:","1"); vartotal=price+parseFloat(addPrice); document.write(“<h2>你购买相机的价格："+total+”</h2>”);“+”号的用法100

1000100

?bugPrompt函数返回输入的字符串+字符串相连：1000+”100”示例任务实现document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");varwidth,height=160,name="Timmy";vardate=newDate();vararrlist=newArray();document.write(typeof(width)+"</br>");document.write(typeof(height)+"</br>");document.write(typeof(name)+"</br>");document.write(typeof(true)+"</br>");document.write(typeof(null)+"</br>");document.write(typeof(date)+"</br>");document.write(typeof(arrlist));定义时间日期对象定义数组练一练使用prompt语句完成加法运算练习任务2根据成绩给出学生考评任务描述提示用户输入成绩，根据成绩给出学生的考评：如果成绩在90-100分，考评为“优”，如果成绩在80-89分之间，考评为“良”，成绩如果在70-79分之间，考评为“中”，成绩如果在60-69分之间，考评为“及格”，否则为“不及格”。演示任务2：根据成绩给出学生考评任务分析实现思路使用输入语句提示用户输入成绩，并将该成绩进行转换成数值类型使用if条件语句或switch结构判断用户输入的成绩在哪个区间范围使用输出语句将评价等级输出条件语句if条件语句switch多分支语句if(条件){//JavaScript代码;}else{//JavaScript代码;}switch(表达式){case常量1: JavaScript语句1; break; case常量2: JavaScript语句2; break; ... default:JavaScript语句3;}任务实现document.write("<h1>成绩评定</h1>"); varscore=Number(prompt("请输入你的成绩:","")); varleval;//成绩等级 if(isNaN(score)) { alert("你输入的不是数字"); }else{ if(score<0||score>100){ alert("你输入的成绩不在有效范围"); }else{ //采用多分支结构来实现 switch(parseInt(score/10)){ case10: case9: leval="优秀"; break; case8: leval="良好"; break; case7: leval="中等"; break; case6: leval="及格"; break; default: leval="不及格"; break; } document.write("<h2>你的成绩评定为："+leval+"</h2>"); } }score保存成绩使用Number()或parseInt()对输入的成绩进行类型转换，转换失败返回NaN判断用户输入的数是否为数字，isNaN()判断参数是否是NaN:返回true说明是NaN则不是一个数字返回false不是NaN则是数字练一练使用prompt和控制语句设计四则运算练习任务3实现猜数游戏任务描述系统随机生成一个1-100之间的数，然后让玩家猜该数。若玩家猜对该数，游戏则结束；若玩家猜得不对，则计算机告知玩家，数字猜大了还是小了；并提示玩家是否继续游戏，玩家点击确定则继续游戏，否则退出游戏。演示任务3：猜数游戏任务分析实现思路由系统生成一个1-100之间的随机整数提示用户输入一个1-100之间的整数，并将用户输入的数转换为整型将用户输入的数与随机生成的数进行比较，如果相等则提示猜对了，否则给出提示，并询问用户是否继续游戏如果用户在提示框中点击确定则使用循环重复第一步，直到用户点击取消退出游戏1.循环语句for语句while语句for…in语句中断循环语句for(初始化;条件;增量){

语句集;

}while(条件)do{{语句集

语句集;}while();}for(变量in对象){

语句集;

}break语句continue语句任务实现varnum=Math.floor(Math.random()*100+1);

do{varguess=parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：",""));if(guess>num){ alert("^_^,你猜的数字大了"); go_on=confirm("是否继续游戏？");}elseif(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.在脚本中通过元素事件调用，格式：事件名=函数名；如何使用函数functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;i<count;i++)document.write("<H2>HelloWorld</H2>");}示例定义一个showHello函数，通过三种方式调用该函数。<inputtype="submit"name="Submit"value="显示HelloWorld"onClick="showHello()">在<script>标签对中添加语句：showHello();在<script>标签对中添加语句：window.onload=showHello;三种调用方式表示单击此按钮时，调用函数showHello()执行如何使用函数把showHello定义成有参函数，使用prompt()提示用户每次输出信息的行数，然后将prompt()方法返回的值作为参数传递给函数showHello如何使用函数示例把showHello定义成有参函数，使用prompt()提示用户每次输出信息的行数，然后将prompt()方法返回的值作为参数传递给函数showHellofunctionshowHello(count){ for(vari=0;i<count;i++){ document.write("<h3>HelloEverybody!</h3>"); }}<inputtype=“button”name=“btn”id=“btn”value=“输入显示信息的次数"onclick="showHello(prompt('请输入显示信息的次数：'，''))"/>整个语句类似赋值语句：varshowHello=变量值;匿名函数匿名函数定义的整个语句可以像值一样赋给一个变量进行保存，也可以将它赋给一个事件触发，因此可用变量名或事件名调用匿名函数把showHello改为匿名函数示例varshow=function(count){ for(vari=0;i<count;i++){ document.write("<h3>HelloEverybody!</h3>"); }};<inputtype="button"name="btn"id="btn"value="输入显信息的次数"onclick="show(prompt('请输入显示信息的次数：'，''))"/>整个语句类似赋值语句：varshow=变量值;匿名函数匿名函数定义的整个语句可以赋给某个变量，该变量可以作为函数的参数进行传递定义计算数的平方的匿名函数，使用事件名调用该函数匿名函数匿名函数定义的整个语句可以赋给某个变量，该变量可以作为函数的参数进行传递定义计算数的平方的匿名函数，使用事件名调用该函数示例<scripttype="text/javascript">window.onload=function(){ document.getElementById("btn").onclick=function(){ varcount=prompt("请输入计算的数:"); alert(count+"的平方值是："+count*count); } }</script></head><body> <inputtype="button"name="btn"id="btn"value="计算数的平方值"/></body>document.getElementById(“btn”)表示获取页面id为“btn”的按钮元素onclick指触发按钮的单击事件时调用匿名函数window.onload是页面加载时触发的事件，此处定义了一个匿名函数简单了解获取文本框值的方法document.表单名.文本框名.valuedocument.getElementById(id).value从文本框中获取的值都是字符串，若进行加减，都要进行类型转换。任务实现使用有参函数在简易计算器中4个按钮调用的函数的代码很类似，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来代替4个结构相似的函数？定义有参函数JavaScript代码<scriptlanguage="JavaScript">functioncompute(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>定义有参函数compute()，完成计算功能，op参数代表运算符号。调用有参函数<formaction=""method="post"name="myform"id="myform">……<tr><td><inputname="addButton2"type="button“ id="addButton2"value="＋"onClick="compute('+'