Day3：函数的定义、分支结构
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：本意退出方法！
退出同时，可返回数据！
<!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>
<!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>
<!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中一切赋值都是值传递！
注：变量的使用也采用就近原则，函数内部有此变量的先使用函数内部的变量，相反则沿作用域链向上爬找变量
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、函数作用域：函数作用域和变量的作用域完全一样
<!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>
注：函数的作用域在调用方法的时候创建，方法执行完立即销毁！
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编码
<!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对字母不会转换，因为字母就是单字节
<!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转后的字符串转换回原文-解码
<!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
<!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对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
eval("alert('111')");
</script>
</head>
<body>
</body>
</html>
<!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：输入分数确定等级
<!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以上偏胖
编写程序实现功能
<!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、输出：应收金额，找零
<!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折优惠
<!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>
假如输入金额不够支付应收金额，将出现负数
<!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>
浙公网安备 33010602011771号