美文网首页
一名前端工程师的自学之路!Js篇(11-20更新)

一名前端工程师的自学之路!Js篇(11-20更新)

作者: 自律更自由 | 来源:发表于2017-11-20 19:41 被阅读31次

看到标题能进来的小伙伴,我也就不废话,先推荐一本必买的书《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哈哈

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

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

你都看到这里了,不点个关注嘛~

相关文章

网友评论

      本文标题:一名前端工程师的自学之路!Js篇(11-20更新)

      本文链接:https://www.haomeiwen.com/subject/oykbvxtx.html