函数的概念
函数就是代码块，可以多次调用，很容易实现模块化编程。
函数的好处
1）减少代码开发时间
2） 模块化编程
3) 可以重复使用
函数的定义(重点)
形式1 function fn(){
// 函数体内功能代码
}
function－－－为声明函数的关键字，指出这是一个函数
fn －－－－－－是函数的名称，类似于永来存储函数的变量
() －－－－－－为函数的参数，多个参数用 , 隔开
{} －－－－－－放置函数体，用于执行时，所要编译的代码段
函数调用
函数名();
fn() ;
直接写函数名 加上 小括号“()”
例1:声明一个函数并且调用
// function fn(){}
// 函数名的规则和变量一样
function fn(){
document.write('枝上柳绵吹又少,天涯何处无芳草');
}
// 函数的调用
//函数名()
fn();
函数的参数(重点)
形式3 function fn(参数1,参数2,....,参数N){
// 函数体内功能代码
}
初体验:值的传递
// 参数的位置要一一对应
// 形参的个数和实参的一样多
//param1,param2,param3 就是形参,我们在函数后面仅仅声明,没有赋值
function fn(param1,param2,param3){
document.write(param1+'<br />');
document.write(param2+'<br />');
document.write(param3);
}
// 函数调用时,传递的就是实参
fn('岂曰无衣','赳赳老秦','共赴国难');
例1:输入成绩判断级别
// :输入成绩判断级别
function ji(score){
if(score>90){
alert('优秀了');
}else if(score>70){
alert('良好了');
}else if(score>60){
alert('及格了');
}else{
alert('回去烤红薯');
}
}
// 调用函数,且传入成绩
//ji(50);
ji(200);
例2:输入两个数比较大小
// 传入两个数字比较大小
//1 参数之间使用,隔开
// 2 函数接受参数时,按照位置的对应关系来的
function bi(a,b){
if(a>b){
document.write(a+'是大的,'+b+'是小的');
}else{
document.write(b+'是大的,'+a+'是小的');
}
}
// 调用的时候,传入参数,多个参数用,隔开
// 调用的时候,注意传入参数的顺序
// bi(23,45);
bi(89,3);
脚下留心:函数有预编译（预加载）的过程，可以实现调用在前，声明再后
总结:
1 声明函数
function 函数名(参数1,参数2,参数3,....){
函数体
}
2 调用函数
函数名(1,2,3);
脚下留心
1、函数名的命名规范和变量的命名规范一样
2、函数可以放在任何地方，前提必须在同一个网页中才可以调用
3、小括号里面的参数可以写多个起占位作用，可以在函数体内直接当变量使用，称之为：形参；当调用函数传递的真正的数据称之为：实参
使用函数打印九九乘法表
function createNine(){
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+i*j +" ")
}
document.write("<br>");
}
}
createNine()
事件与函数的关系(了解)
函数是通过函数名来调用的
一般函数的调用要结合“事件”来调用
调用的方式：
方法一（通过HTML标签调用）：<标签 事件=”函数名()”/>
方法二（JS调用）：对象.事件=函数
例1:直接使用onclick在行内绑定函数
<!-- onclick就是事件 当点击事件时调用函数 fn()-->
<input type="button" name="" onclick="fn()" value="点我" id="btn">
<script>
function fn(){
alert('what are you你在弄啥嘞');
}
例2:直接在id上绑定事件
<input type="button" id="btn" value="点击">
function show(){
alert(1111);
}
btn.onclick = show;
练习与应用
- 编写一个函数，计算两个数字的和、差、积、商
要求：使用传参的形式
function fn(num1,num2){
var sum1 = num1+num2;
var sum2 = num1-num2;
var sum3 = num1*num2;
var sum4 = num1/num2;
document.write('两个数的和是'+sum1);
document.write('<br />');
document.write('两个数的差是'+sum2);
document.write('<br />');
document.write('两个数的积是'+sum3);
document.write('<br />');
document.write('两个数的商是'+sum4);
}
2定义一个函数：传递一个参数，判断该数字是否是一个“素数/质素”。
如果是，就输出“数字xx是素数”，否则就输出“数字xx不是素数”
function pan(num){
// 3 添加数字类型的判断
// 质数(素数)只能被1和本身整除,不能被其他数整除
// 记录被整除的次数
var count = 0;
// 需要把小于这个数的都循环一次,判断取余是否为0
for(var i=2;i<num;i++){
// 使用参数除以每一个小于它的整数,看能否除尽
if(num%i==0){
// 能被整除,说明非素数,就要记录一次
count++;
}
}
// 如果没有被整除的记录,说明这就是素数
if(count==0){
document.write('这个是素数'+num);
}
}
pan(53);
讲解
函数的两种创建方式：声明式和赋值式(重点)
通过关键字function声明：
function fn(){}
通过变量赋值（匿名函数）：
var fn = function(){};
这种方式下，虽然这个函数没有名字，但是这个函数赋值给了fn，因此通过变量fn也能调用到这个函数
以上两种声明方式等价
基本使用
// 声明一个变量,赋值的是函数
var p = function(){
document.write('Hello JS');
}
// 匿名函数的调用
p();
都可以使用 函数名/变量名＋() 调用执行
例1:使用函数将一个人年龄姓名,拼接输出
<script>
var p = function(name,age){
document.write("姓名：" + name + "，年龄" + age);
}
// 调用p方法
p('张三',19);
</script>
函数的返回值（return）(重点)
return是无条件退出当前方法/函数，并且返回数据（注：如果没有数据返回undefined）
不仅可以返回值,还可以终止程序的执行
例1:创建一个比较大小的函数,且返回比较结果
function maxNum(num1,num2)
{
// 比大小功能
if(num1 > num2)
{
// document.write(num1);
return num1;
}else{
// document.write(num2);
return num2;
}
}
var funReturnVal = maxNum(3,0);
console.log(funReturnVal); // 3
var funReturnVal = maxNum(9,8);
console.log(funReturnVal); // 9
例2:验证return终止代码的继续执行
function fn(){
document.write('今儿下雨了<br />');
return '下的真大';
document.write('淅沥沥,哗啦啦');
}
var res = fn();
document.write(res)
形参和实参(重点)
形参和实参都可以有多个，用逗号隔开，多个形参和实参之间必须相互一一对应
function fn(a,b,c){ //a = 1, b = 2, c = 3
console.log(a+b+c); //6
}
fn(1,2,3);
如果形参和实参不一致：
形参的数量比实参的数量多，多出来的形参，为undefined；
形参的数量比实参的数量少，多出来的实参，传递到arguments对象中；
形参的数量与实参的数量相等，一一对应。
例: 将年龄和姓名动态的输出如 姓名XX,年龄XX
<script>
// 创建一个方法【动态】输出人的姓名和年龄信息
function p(name,age){
document.write("姓名：" + name + "，年龄" + age);
}
// 调用p方法
p('张三',19);
document.write("<hr />");
// 调用p方法
p('李四', 30);
</script>
总结
1、形参的顺序必须和实际参数一一对应
2、形参的个数必须和实参的个数一样多
参数的默认值(重点)
给函数的参数设置默认值,代用函数的时候,这个参数是不用传值的.
// 参数的默认值:就是在设置参数的时候给一个值
// 当后面调用函数,这个参数可以不用传参
function fn(name,age=18,sex='女'){
document.write('我的女朋友叫'+name+',年龄是'+age+',性别是'+sex)
}
// fn('刘亦菲',32,'女');
//fn('贾玲',31)
// 有默认值的参数,调用时不用传递参数
fn('小姐姐',23);
系统函数(记忆)
注：NaN（表示非数字）
parseInt(data) - 将字符串转化为整数（类型为：number）
document.write(parseInt('11')); // 11
Number(data) - 将字符串转化为数字（类型为：number)
document.write(Number(11)); // 11
document.write(Number(11.2)); // 11.2
document.write(Number('11')); // 11
document.write(Number('11sdsf')); // NaN
脚下留心：data只能是数字，否则会返回NaN（非数字）
isNaN(data) - 判断data是否非数字(了解)
如果直接给定字符串,内部的转化机制,参考Number();
document.write(isNaN(11)); // false
document.write(isNaN(11.2)); // false
document.write(isNaN('11.2')); // false
document.write(isNaN('11sdsf')); // true
document.write(isNaN('sdsf11')); // true
document.write(isNaN('11.2sdsf')); // true
document.write(isNaN('sdsf11.2')); // true
脚下留心：
1、true - 非数字，false - 是数字
2、data只能是数字，否则返回（true）表示非数字
parseFloat(data) - 将字符串转化为浮点数（类型为：number)
document.write(parseFloat('11')); // 11
document.write(parseFloat('11sdsf')); // 11
document.write(parseFloat('sdsf11')); // NaN
document.write(parseFloat('11.2sdsf')); // 11.2
document.write(parseFloat('sdsf11.2')); // NaN
脚下留心：
1、首字母必须是数字，否则返回（NaN）表示非数字
Math.random() 产生随机数
产生0-1之间的随机数,但是不包含0和1
// 随机数的产生,验证码的效果
var num1 = parseInt(Math.random()*10);
var num2 = parseInt(Math.random()*10);
var num3 = parseInt(Math.random()*10);
var num4 = parseInt(Math.random()*10);
document.write(num1 +' '+num2+' '+num3+' '+num4);
Math.ceil() 即向上取整
var num1 = 3.45567;
var num2 = Math.ceil(num1);
document.write(num2);
Math.floor 即向下取整
var num3 = Math.floor(num1);
document.write(num3); // 3
toFixed()保留两位小数
var num =2.446242342;
num = num.toFixed(2);
console.log(num);
多学一招:
保留两位小数的做法
var num5 = parseInt(num1*100)/100;
document.write(num5);
拓展(了解)
函数可以作为参数
通常，我们把作为参数传递的函数叫做回调函数
function fn1(fn){
document.write('热不热');
// 因为参数是函数,所以可以直接调用
fn();
}
var bear = function(){
alert('好热,好热,扎啤一杯');
}
fn1(bear);
函数可以作为返回值
在js高级中，闭包会使用到。
function fn(){
return function(){
alert('小龙虾配扎啤');
}
}
var bear = fn();
/**
bear = function(){
alert('小龙虾配扎啤');
}
*/
bear();
总结:
函数的声明方式:
有名函数 function fn(){}
匿名函数 function(){}
return 返回函数的值,在哪里调用,就返回到哪里,终止函数的继续执行
形参和实参:形参和实参的位置要一一对应
参数的默认值:形参声明的时候设置默认值,调用的时候不用传.
随机数 Math.random()
网友评论