一名前端工程师的自学之路！Js篇（11-20更新）

看到标题能进来的小伙伴，我也就不废话，先推荐一本必买的书《JavaScript高级程序与设计》。今天接着上一篇文章还是分享最基础入门的一些Js的知识。

1、函数的概念

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

---

2、函数定义

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

function 函数名(){

函数体;

}

方式二：表达式定义---先定义，后调用，函数的调用一定是在定义后

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明确定义的变量。

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

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

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

var m = 90;

function fun(m){

m++;

alert(m); 81

}

fun(80);

---

14、变量的提升

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

function fun(){

alert(m);

var m = 10;

alert(m);

}

fun();

等价于：

function fun(){

var m;

alert(m);

m = 10;

alert(m);

}

fun();

---

15、同名函数

function fun(){

alert(1);

}

function fun(){

alert(2);

}

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

---

16、函数的递归调用

递归：函数自己调用自己

递归本质：实现了循环

求阶乘：

function fnFac(n){ // 参数n 代表 循环变量 初始值

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

return 1;

}else{

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

}

}

画画水平有点low哈哈

---

最后推广一下自己的小程序，如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

自律更自由，一只喜欢锻炼的程序猿，嘿嘿。

你都看到这里了，不点个关注嘛～