Javascript入门阶段——方法function

1.课程大纲

• 方法的定义和调用
• 创建并调用飞机移动方法

2.1 认识方法

• 方法（函数）就像一块积木
• 调用方法就像使用积木搭建一辆汽车
• 上图中，我们用一块一块的积木拼成了一辆汽车。那每一块积木都是事先制造好的，有其固定的使用方式和要拼接的位置，有的做轮子，有的做车头。方法就像是一块积木，也需要我们事先写好它的功能；调用方法就像是使用积木搭建一辆汽车，我们只要把创建好的方法拿过来在需要的位置使用就可以了

2.2 创建方法

• 情景1:早上起来,妈妈给我一碗清汤面
  
• 创建方法就像妈妈做饭(cook)
• 创建妈妈做饭方法,代码如下

function cook(){
	alert("一碗清汤面");
}

• function定义方法关键字
• cook方法名,可以自己指定,和变量的命名规则相同
• 在两个大括号之间写方法要实现的功能

2.3 调用方法

• 调用方法就像我说:“妈妈,给我一碗清汤面”
• 调用妈妈做饭的方法。调用妈妈做饭的代码如下:

cook();

• 调用方法:方法名(),例如:cook()

2.4 方法的执行顺序

• 从这里开始
• 根据方法名找到对应方法
• 执行方法中的每一行代码

2.5 创建方法说一句你想说的话

• 创建一个名为say的方法,代码如下:

function say(){
	alert("我想去游乐场");
}

• 调用say方法,代码如下:

say();

• 调用say方法,显示效果如下:

2.6 方法的返回值

• 方法的返回值就像妈妈把一碗清汤面递给我。请看如下代码:

function cook(){
	return "一碗清汤面";
}
var e = cook();
alert("吃"+e);

• 在方法的大括号中使用关键字return返回方法要返回信息，例如"一碗清汤面"
• 声明变量e用来接收方法的返回值

2.7 计算两个数的和

• 创建名为sum的方法,代码如下:

function sum(){
	return 73+27;
}

• 调用sum方法,并声明变量s接收方法的返回值,代码如下:

var s = sum();

• 在警告框中显示两个数的和, 代码如下:

alert("73+27="+s);

• 显示效果如下:
  
• 当调用sum()方法后，执行sum方法中的内容，即返回73+27的结果100。返回值由变量s接收，变量s的值为100。所以，警告框中显示的是73+27=100。

2.8 方法的参数

• 情景2:早上起来,妈妈给我一碗清汤面,加一个荷包蛋
• 方法的参数就像我要加荷包蛋
• 请看如下代码:

function cook(str){
	return "一碗清汤面" + str;
}
var c = cook("加荷包蛋");
alert(c);

• 在创建方法时，括号中的变量称为形式参数（简称形参）。上面创建cook()方法时的str就是形参。在调用方法时，方法名后面括号中的变量或表达式称为实际参数（简称实参）。如调用 cook()方法时传入的“加荷包蛋”。
• 调用cook()方法，并声明变量c接收方法的返回值。在小括号内填写要传入的实际参数"加荷包蛋",即给形式参数str赋值

2.9 今天吃水饺

• 创建为cook方法,代码如下:

function cook(str){
	return str;
}

• 调用cook方法,传入参数"水饺",并声明变量e接收cook方法的返回值, 代码如下:

var e = cook("水饺");

• 在警告框中显示今天吃水饺,代码如下:

alert("今天吃"+e);

• 调用代码运行结果如下:
  

2.10 向方法传两个参数

function say(name,str){
	return name+":"+str;
}
var s = say("小明","我想去游乐场");
alert(s);

• 代码执行过程如下
• 定义say()方法,该方法有两个参数name和str;
• 声明变量s,接收方法的返回值,给name和str分别赋值为"小明"和"我想去游乐场"。

注意:如果是两个或两个以上的参数,每个参数都用逗号(,)进行分隔

2.11 使用方法计算两个数的和

• 创建名为sum()方法,且有两个参数,代码如下:

function sum(a,b){
	return a+b;
}

• 调用sum()方法.传入参数"8"和"7",并声明变量s接收sum()方法的返回值,代码如下:

var s = sum(8,7);

• 在警告框中显示传入的两个参数的和, 代码如下:

alert(s);

• 代码运行结果如下:
  

2.12 创建飞机移动的方法,代码如下:

var x = 0;
var y = 0;
function step(){
	ctx.drawImage(enemy, x, y);
	y = y + 3;
}

• 创建飞机移动方法step()。
• 在step()方法中先画出飞机,然后让飞机的y坐标在自身的基础上增加3,实现飞机的向下移动.
  .
• 在定时器中调用飞机移动的方法step(),便可在画布上画出飞机并且飞机y坐标的值每隔10亳秒在自身的基础上増加3,进而实现飞机的向下移动，代码如下:

setInterval(function(){
	step();
},10);