Day3:函数的定义、分支结构
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1、简述ECMAScript和JavaScript的关系 答:ECMAScript是标准,JavaScript和JScript是两家公司根据标准做出来的实现。 2、可以在哪些地方编写JavaScript代码 答: (1)事件里面,例如onclick里面 (2)<script></script>标签里面 (3).js文件里面 3、下列表达式的值为true的是哪个 (1)null instanceof Object 检查左边的数据是否通过右边类型创建出来的 false (2)undefined instanceof Object //false (3)null==undefined //true (4)null===undefined //false (5)NaN==NaN //false 4、 var str="Hello"; str>10 //false str>10000 //false 解释: 关系运算中,字符串比数字,字符串转为数字 NaN和任何数据比较,永远返回false 今后只要可能判断NaN时,用isNaN(x) 5、 var a=10; var b=10; console.log(a++>++b);相当于b=b+1;//11console.log(a>b);//false a=a+1;//11 console.log('a='+a);//11 console.log('b='+b);//11 6、 使用变量出错的情况:没有申明的变量参与运算就会出错 var userAge=10; var userName; A、console.log(userAge++>10&&userName=='tom');//false B、console.log(userAge++>=10&&userName=='tom');//false C、console.log(++userAge<10||userName=='tom');//false D、console.log(++userAge>10||userName=='tom');//true
一、函数的定义(方法)
1、定义:封装执行一项专门任务的步骤的代码序列
2、语法:
(1)申明:
function 方法名(参数列表){
方法体:步骤清单
return 返回值
}
(2)调用:
方法名(参数值列表)
(3)参数:
方法内独有的变量,接收传入数据,在方法内处理,从而让方法变得灵活
如何申明方法参数:不用var!参数只有方法被调用时才自动创建
(4)返回值:
是方法执行完成后,由方法返回的一个数据
(5)定义返回值:
不用变量,直接用return 值!
return:本意退出方法!
退出同时,可返回数据!
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function buy(what){ what="香碰碰的"+what; return what; } var jy=buy('饺子'); console.log(jy); </script> </head> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function add(a,b){ return a+b; } var a=parseInt(prompt('请输入第一个数:')); var b=parseInt(prompt('请输入第二个数:')); console.log(add(a,b)); </script> </head> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var a=5; var b=3; var c=8; function bj(a,b,c){ var max=a; max=max>b?max:b; max=max>c?max:c; return max; } console.log(bj(a,b,c)); </script> </head> </html>
3、作用域:一个变量的可用范围
(1)全局作用域:直接放在全局作用域中的变量叫全局变量,今后只要希望所有作用域共用的变量都要声明在全局作用域
window对象:是整个网页的全局作用域对象
(2)局部(函数)作用域:声明在方法内部的变量或者方法的参数变量都叫局部变量
(3)值传递:将一个变量的值赋值给另一个变量,这个过程其实是将原变量的值复制一份给新变量,js中一切赋值都是值传递!
注:变量的使用也采用就近原则,函数内部有此变量的先使用函数内部的变量,相反则沿作用域链向上爬找变量
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1、函数作用域中的变量(局部变量)只在当前函数内可访问到,离开此范围就无法访问了。 function add(){ var sum=1+2; //局部变量 console.log(sum); //正确 } console.log(sum); //脚本错误 2、全局作用域的变量(全局变量)在代码的任何位置都可以访问到,在最外层定义的变量就是全局变量 var sum=0; function add(){ sum=1+2; console.log(sum); //正确 3 } console.log(sum); //正确 3 3、未使用var声明的变量是全局变量(强烈建议不要这样玩) function add(){ sum=1+2; //全局变量 } add(); console.log(sum);//正确 对未声明的变量赋值:js会自动在全局创建该变量,避免如下的全局污染: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var sum=20; function add1(){ sum=10; console.log(sum);//10 } add1(); console.log(sum);//10 </script> </head> </html>
4、函数作用域:函数作用域和变量的作用域完全一样
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var card=10; function buy(what,card){ card-=3; console.log("余额"+card); //7 } buy('dd',card); console.log(card);//10 </script> </head> </html>
注:函数的作用域在调用方法的时候创建,方法执行完立即销毁!
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1、方法参数和方法外的变量有什么关系? 答:没有任何关系,方法参数,依据方法内部的处理逻辑至少需要几个数据才可正常执行。 2、方法返回值是必须的吗? 答:不是,需要根据方法调用者的需要!如果方法调用者需要明确返回一个结果,就定义返回值!否则,可以不定义返回值!有返回值的方法可以当做一个值用,但是,当方法的返回值在后续程序中可能反复使用,这个时候就必须用变量接住。 例如: alert()不需要返回值 3、鄙视题: (1) var num=0; function f1(){ var num=100; console.log(num); //100 } f1(); console.log(num); //0 (2) var num=0; function f1(num){ num=100; console.log(num); //100 } f1();//不传参数,一点儿问题没有,反之,如果方法参数一个没有定义,f1(1,2)照样可以 console.log(num);//0
5、自定义函数:自己定义的函数就是自定义函数,以上均是
6、全局函数:ECMAScript定义了标准,由各浏览器厂商已经实现的函数,咱们直接调用
例如:
isNaN()
parseInt()
farseFloat()
isFinite():判断指定数字是否超过有限制
encodeURI():将url中的非法字符转为单字节符号-编码
注:浏览器url是不允许输入汉字的,会自动转换成单字节的utf-8编码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var kword="张东"; var url="http://www.baidu.com/s?wd="; //对非法字符编码为单字节 //不会修改原字符串 //必须用变量接住方法返回值 kword=encodeURI(kword); console.log(kword); console.log(url+kword); </script> </head> <body> </body> </html>
补充:
unicode编码:每个字符2字节
utf-8编码:字母、数字单字节,汉字3字节
所以encodeURI对字母不会转换,因为字母就是单字节
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var kword="kfc"; var url="http://www.baidu.com/s?wd="; //对非法字符编码为单字节 //不会修改原字符串 //必须用变量接住方法返回值 kword=encodeURI(kword); console.log(kword); console.log(url+kword); </script> </head> <body> </body> </html>
decodeURI():将encodeURI转后的字符串转换回原文-解码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var kword="李春雨"; var url="http://www.baidu.com/s?wd="; //对非法字符编码为单字节 //不会修改原字符串 //必须用变量接住方法返回值 kword=encodeURI(kword); console.log(kword); console.log(url+kword); console.log('欢迎'+decodeURI(kword)); </script> </head> <body> </body> </html>
url规定参数值中,再次出现保留字(URL已经只用的字符),就是非法:
保留字:/ ? $ : ...
encodeURI不能对单字节进行编码
encodeURIComponent():对统一资源标识符(url)进行编码,并返回编码后的url字符串,它可以对多字节的汉字和单字节的字符都可以进行编码,所以以后用它进行编码就可以,不用去使用encodeURI
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var kword="http://www.baidu.com"; var url="http://www.baidu.com/s?wd="; //对非法字符编码为单字节 //不会修改原字符串 //必须用变量接住方法返回值 kword=encodeURIComponent(kword); console.log(kword); console.log(url+kword); console.log('欢迎'+decodeURIComponent(kword)); </script> </head> <body> </body> </html>
decodeURIComponent():解码
eval():计算并执行以字符串表示的JavaScrit代码,它可以将后台返回的字符串转换成一个js对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> eval("alert('111')"); </script> </head> <body> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var input = prompt('请输入一段js代码'); console.log(typeof input); eval(input); </script> </head> <body> </body> </html>
二、分支结构
定义:程序在运行过程中,可以在不同的情况下执行不同的语句
1、顺序
2、分支
(1)if...结构:1件事,要么做,要么不做
if(逻辑表达式){
语句
}
当if语句块中只有一条语句时,可以省略大括号,但如果将来代码发生变化,不注意,很可能出现错误,强烈建议不要这么写,以后只要有if就加大括号
(2)if...else...结构:2件事,二选一执行
if(逻辑表达式){
语句块1
}else{
语句块2
}
(3)else if结构:多件事,多选一执行
if(条件1){
满足条件1执行的代码
}else if(条件2){
满足条件2执行的代码
}else if(条件n){
满足条件n执行的代码
}else{
以上条件都不满足时,默认执行的代码
}
如果前一个条件已经满足,那么后续else if不再执行
需求1:输入分数确定等级
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var score=parseInt(prompt('请输入分数')); if(score>=90){ document.write('A'); }else if(score>=80){ document.write('B'); }else if(score>=60){ document.write('C'); }else{ document.write('D') } </script> </head> <body> </body> </html>
需求2:体重健康指数(克莱托指数)计算公式如下:
体重(kg)/(身高*身高)(m)
20-25正常,20以下偏瘦,25以上偏胖
编写程序实现功能
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var tz=parseFloat(prompt('请输入体重:')); var sg=parseFloat(prompt('请输入身高:')); var cs=tz/(sg*sg).toFixed(2); if(cs>25){ console.log('偏胖'); }else if(cs>=20){ console.log('正常'); }else{ console.log('偏瘦'); } </script> </head> <body> </body> </html>
注:if判断中默认必需有一个boolean值,若出现不是boolean的类型,则会自动转换,以下值默认都会转换成false
if(0){}
if(null){}
if(undefined){}
if(NaN){}
if(""){}
if(0.0){}
3、循环
需求1:编写一个收银台收款程序,根据商品单价、购买数量以及收款金额计算并输出应收金额和找零
分析:
1、请用户输入:单价,数量,收款金额,保存在变量中
2、计算:
应收金额=单价*数量
找零=收款金额-应收金额
3、输出:应收金额,找零
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var price=parseFloat(prompt('请输入单价:')); var count=parseFloat(prompt('请输入数量:')); var money=parseFloat(prompt('请输入收款金额:')); var ys=price*count; var zl=money-ys; document.write("应收"+ys+"找零"+zl); </script> </head> <body> </body> </html>
需求2:总价大于或等于500时,享受8折优惠
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var price=parseFloat(prompt('请输入单价:')); var count=parseFloat(prompt('请输入数量:')); var money=parseFloat(prompt('请输入收款金额:')); var ys=price*count; ys=ys>=500?ys*0.8:ys; var zl=money-ys; document.write("应收"+ys+"找零"+zl); </script> </head> <body> </body> </html>
假如输入金额不够支付应收金额,将出现负数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var price=parseFloat(prompt('请输入单价:')); var count=parseFloat(prompt('请输入数量:')); var money=parseFloat(prompt('请输入收款金额:')); var total=price*count; if(total>=500){ total=total*0.8 } document.write("应收金额:"+total.toFixed(2)); if(money>=total){ var change=money-total; document.write("找零:"+change.toFixed(2)); }else{ var change=total-money; document.write("还差:"+change.toFixed(2)); } </script> </head> <body> </body> </html>