美文网首页
一名前端工程师的自学之路!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