Javascript函数

1、函数的概念

函数的概念:函数就是一个工具,也就是具有某个特定功能的一小段代码块

2、函数定义

方式一: 函数调用可以在任意位置

1
2
3
function 函数名() {
函数体;
}

方式二:表达式定义—先定义,后调用,函数的调用一定是在定义后

1
2
3
var fn = function() {
函数体;
};

3、函数的调用

函数名([参数]);

函数的调用还可以通过事件来调用

4、函数和事件的关系

所有的事件都会依赖与某个函数来执行

5、js 中的事件三要素

事件源 : 一般是一个名词 开关

事件 : 一般是一个动作,动词 按下

事件处理程序 : 函数的功能

6、js 中的常用事件

鼠标事件

onclick 单击

ondblclick 双击

onmouseover 鼠标划过

onmouseout 鼠标离开

onmousemove 鼠标离开

onmouseenter 鼠标划过

onmouseleave 鼠标离开

onmouseup 鼠标抬起

onmousedown 按下

键盘事件

onkeyup 键盘抬起

onkeydown 键盘按下

onkeypress 按下 + 抬起

页面事件

onload 页面加载 (页面打开)

onload 会在页面中的所有元素(img、标签、css,js….)都加载完成后再执行事件中的代码

onload 事件 在页面中只能有一个,如果有多个,后面的会将前面的覆盖

其它事件(表单)

onfocus 获取焦点

onblur 失去焦点

onchange 改变事件

onsubmit 表单提交事件

7、事件用法

1、 将事件写到标签内部 – 执行某个事件时直接调用函数

2、 找到某个元素.事件 = function(){ … } 事件源.事件 = 事件处理程序

通过 id 方式找到要操作的元素:

document.getElementById(“id 名”)

8、通过 js 操作元素的样式、属性、内容

操作样式:obj 表示要操作的标签元素

obj.style.样式名称 = “值” 样式名写法:小驼峰 fontSize backgroundColor

属性操作:

obj.属性名 = “值” 操作图片的路径: oImg.src = “”

内容操作:

操作表单的内容: obj.value = “值”

操作普通标签内容: obj.innerHTML = “值”

this 指向的是事件的触发者

小明.say = function(){

this is 小明……

}

9、函数的参数

形式参数(形参)

形参一般出现在函数定义中

形参一般是一个变量

实际参数(实参)

实参一般出现在函数调用中

实参可以是变量,常量、表达式,但要求一定要有值

参数的传递是 将实参传递给形参,传递时一一对应

当实参的个数大于形参个数时,多余的实参自动舍去

当形参的个数大于实参个数时,多余的形参值为 undefined

10、函数的种类

一般函数分为 系统函数 和 自定义函数

系统函数: alert() prompt() …….

11、函数的返回值

如果一个函数的结果 有其它用途时,可以将这个函数的结果返回

通过 return 返回函数的结果

一个函数可以没有返回值

如果函数有返回值,只能有一个

一个函数 遇到 return,return 后面的代码不会执行

12、函数中的实参副本

arguments

说明:

1、arguments 只能在函数体内部使用

2、arguments 代表的是所有的实参,和形参没有关系

3、arguments 是一个对象,而不是一个数组

4、arguments 使用时类似数组的方式 arguments[下标],下标从 0 开始

5、arguments.length 可以获取实参的个数 通过 函数名.length 获取是形参个数

13、变量的作用域(作用范围)

变量作用域: 全局变量、局部变量

全局变量:

变量从程序开始到程序结束均有效。

在函数体外面定义的变量都是全局变量。

隐式全局变量:在函数体内部没有用 var 定义的变量。

局部变量(私有变量):

在函数体内部通过 var 明确定义的变量。

局部变量的作用范围就是在该函数体内部。

所有的形参都是局部变量。

局部变量的优先权高于全局变量。

1
2
3
4
5
6
7
8
9
10
var m = 90;

function fun(m) {
m++;

alert(m);
81;
}

fun(80);

14、变量的提升

在函数体内部定义的变量,会将变量提升到函数的最顶端,只提升声明,但不赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function fun(){

alert(m);

var m = 10;

alert(m);

}

fun();

等价于:

function fun(){

var m;

alert(m);

m = 10;

alert(m);

}

fun();

15、同名函数

1
2
3
4
5
6
7
function fun() {
alert(1);
}

function fun() {
alert(2);
}

两个同名的函数,识别最后一个函数。

16、函数的递归调用

递归:函数自己调用自己

递归本质:实现了循环

求阶乘:

1
2
3
4
5
6
7
8
9
10
11
function fnFac(n) {
// 参数n 代表 循环变量 初始值

if (n == 1) {
// 循环条件

return 1;
} else {
return n * fnFac(n - 1); // n-1 步长
}
}


请忽略我的这个灵魂画师。

本文标题:Javascript函数

文章作者:Jonathon

发布时间:2018年11月10日 - 15:11

最后更新:2018年11月17日 - 14:11

原始链接:https://www.jonathon.cn/js1.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!