1:函数的概念和作用
定义:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
作用:可以使一段代码块重复的使用。
2:函数的编写
function funcName(){}
3:函数调用
调用:什么时候用到这个函数的功能,什么时候就去调用这个函数
调用方式:
1:手动调用。即:函数名称()。
2:事件驱动。
4:事件的概念种类及作用
1:什么是事件?
通过鼠标或者键盘在浏览器窗口或者网页元素(按钮、文本框)上执行的操作,我们称之为事件(Event)。
2:什么是事件驱动?
由事件引发的一连串程序的动作,称为事件驱动(Event-Driver)。
举个例子:人被挨打后或者听到葡萄后做出的反应。
事件类型:鼠标事件,键盘事件,网络事件等。
常用事件:onclick,ondblclick,onmouseover,onmouseout,onkeydown,onkeyup。
5:事件和循环结合打印九九乘法表。
6:函数的好处
7:参数的声明
定义:在调用函数的时候,我们可以向其传递值,这些值被称为参数。多个参数用逗号(,)分割。
8:参数的传递
应用:
1:编写一个函数,计算两个数字的和、差、积、商。
要求:使用传参的形式。
function sum (a,b) {
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
}
sum(2,1);
2:编写一个函数,计算三个数字的大小,按从小到大顺序输出。
function sort(a, b, c) {
if( a > b) {
if(a > c) {
if(b > c) {
console.log('顺序:' + a + '、' + b + '、' + c);
} else {
console.log('顺序:' + a + '、' + c + '、' + b);
}
} else {
console.log('顺序:' + c + '、' + a + '、' + b);
}
} else {
if( b > c) {
if(a > c) {
console.log('顺序:' + b + '、' + a + '、' + c);
} else {
console.log('顺序:' + b + '、' + c + '、' + a);
}
} else {
console.log('顺序:' + c + '、' + b + '、' + a);
}
}
}
1:函数创建方式
1:函数声明式。
function ( num1,num2 ) {
return num1 + num2;
}
2:函数表达式(函数字面量)。
var fun2 = function (a,b) {
return a + b;
}
3:函数构造法。
var fun3 = new Function (‘n1’,’n2’,‘return n1 + n2’);
注:函数表达式也可以指定函数名称,而函数声明是不可以省略函数名称。直接用函数表达式指定的函数 名称调用函数会报错。
2:声明式和表达式的区别
1:JS解析器如何区分是函数声明还是函数表达式?
如果一条语句是以function关键字开始,那么这段会被判定为函数声明。而函数声明是不能被立即执行的,这无疑会导致语法的错误(SyntaxError),因此就必须有一个办法,使解析器可以将之识别为函数表达式。
既然解析器识别函数定义的条件是以function关键字开始,那么只需要在function关键字前面有任何其他的运算符,就会从函数的定义转变为函数表达式。
2:如何将函数声明式转换成函数表达式?
~function(){}();
+function(){}();
-function(){}();
void function(){}();
(function(){})();
前几个转换方式开起来比较丑,通常都用最后一种来转换。
括号的作用:1确立运算优先级,2分组运算符。
3:形参和实参
形参:函数定义时声明的参数,我们称为形参(形式参数)。
function (a,b) {};
// a,b就为形参
实参:函数调用时传入的参数,我们称为实参(实际参数)。
function sum(a,b) {
return a + b;
}
sum(2,2);
// 2,2就为实参
4:arguments
定义:用来存放函数调用时传入的实参的对象(数组)。(实参列表)
// Eg:(1)
function sum (a) {
console.log(arguments); //[11,2,3]
console.log(arguments.length); //3
}
sum (11,2,3);
// Eg:(2)因为arguments类似数组 所以可以遍历
function sum (a,b,c) {
for(var i = 0;i < arguments.length;i++) {
console.log(arguments[i]) // 1 ,2,4
}
}
sum (1,2,4);
求形参长度
function sum (a,b,c,d) {
console.log(sum.length); //4
}
sum(1,2,4);
function sum (a,b,c,d) {
if (sum.length > arguments.length){
console.log('形参多了');
}else if (sum.length < arguments.length){
console.log('实参多了');
}else{
console.log('相等')
}
}
sum(1,2,3);
结论:函数调用时传入的参数数量和函数定义时声明的参数数量没有关系,唯一有关系的就是参数顺序。
不定参,实参可以比形参多,形参也可以比实参多
// Eg:(1)
function sum (a) {
document.write(a); //11
}
sum(11,2,4)
// Eg:(2)
function sum (a,b,c,d) {
document.write(a); //11
document.write(d); //undefined
}
sum(11,2,4);
举个例子:输出H5 2017888班所有学生的名字。
5:return关键字
定义:用来规定从函数返回的值。
注意事项:
1:使用return语句以后,函数会停止执行,并返回给定的值。但是整个JS代码并不会停止执行。
2:如果函数没有显式的定义return语句,那么当函数代码段执行完毕后,默认会返回undefined。
6:JS解析顺序
1:读入第一个代码块。
2:做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到第五步。
3:对var变量和function定义做预编译处理。
4:执行代码段、有错则报错。
5:如果还有下一个代码段,则读入下一个代码段,重复第二步。
6:解析结束。
应用:
1:编写任意个数字的求和、差、积、商的函数。
function every() {
var sum = 0;
var che = 1;
for(var i = 0;i < arguments.length;i++){
sum += arguments[i];
che *= arguments[i];
}
return sum +'、'+che;
}
console.log(every(1,2));
2:封装$函数。
function $(id) {
Return document.getElementById(id);
}
综合应用:
1:编写一个函数,计算任意两个数字之间所能组成的奇数个数,数字必须是个位数。比如: 计算0-3之间能组成的奇数个是01、21、31、03、13、23。
2:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加上5,然后用除以10的余数代替该数字,再将第一位和第四位交换,第二位和第三位交换,请编写一个函数,传入原文,输出密文。
函数部分小练习:
求任意两个数的和
function sum (num1,num2) {
var sum = num1 + num2;
alert(sum);
}
sum(1,2);
2, 利用递归求100的阶乘。
function product (n) {
if(n===1) {
return 1;
}
return n*product(n-1);
}
3 .
<div id="box" style="width: 100px;height: 100px;background: red;"></div>
<input type="text" value="双11大促销" id="btn" />
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var box = $('box');
var btn = $('btn');
box.ondblclick = function () {
console.log('您刚刚双击了box');
}
btn.onfocus = function(){
btn.value=''
}
btn.onblur = function() {
btn.value='双11大促销'
}
</script>
4.求两个数中的最大值
function getMax (num1,num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1999,299) );
5 // 判断两个数是否相等
function isEqual (a,b) {
alert (a == b);
}
isEqual(1,4);
6 打印一个五行无列的矩形
function rectangle () {
for(var i = 1;i <= 5;i++){
for (var j = 1;j <= 5;j++){
document.write('*');
}
document.write('<br />');
}
}
rectangle();
7.
使用函数完成任意数字阶乘的计算。
要求:页面上输入任意数字,点击按钮后计算阶乘。
function $(id) {
return document.getElementById(id);
}
var date = $('date');
var btn = $('btn');
function jiecheng(n) {
var sum = 1;
for(var i=1;i<=n;i++){
sum *= i;
}
return sum;
}
btn.onclick = function () {
var val = date.value;
console.log(jiecheng(val));
}