美文网首页从零开始学前端web前端JavaScript学习笔记
(二)前端基本功:JS必记知识点+案例

(二)前端基本功:JS必记知识点+案例

作者: 越IT | 来源:发表于2016-10-10 03:19 被阅读338次

    ☆函数(function)

    函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

    function name(arguments){

    statements;

    }

    函数的声明:函数使用跟变量一样,需要 声明

    自定义函数:

    函数直接量声明:


    变量声明提升(面试易考点)

    什么是变量提升?在函数体内部,声明变量,会把该声明提升到函数体的最顶端。 只提升变量声明,不赋值。

    如下:

    案例:

    经典面试题1:

    结果是 undefined

    经典面试题2:

    undefined 9

    函数参数

    【案例】:

    *形参类似于变量来理解,所以形参同变量一样,是不加引号“”的;而实参则必须加引号!

    形参的目的是为了接受实参

    arguments是存储了函数传送过过来实参

    Javascript在创建函数的同时,会在函数内部创建一个arguments对象实例.

    arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组,访问单个参数的方式与访问数组元素的方式相同

    arguments对象的长度是由实参个数而不是形参个数决定的

    形参、实参的练习1:

    形参实参案例练习1源码:


    【案例】参数的传递的练习案例:(建议练熟,至少敲5遍!)

    案例中小图是70px*70px;大图是360px*360px(素材获取见本文末)

    HTML部分:

    CSS部分源码:

    JS部分源码:

    X形参相当于变量不加引号,实参则必须加上引号

    返回值 return


    定义:

    一个函数实际上就是一个计算过程,计算完成之后的结果就是返回值。

    定义函数的返回值:

    在函数内部用return来设置返回值,一个函数只能有一个返回值。

    同时,终止代码的执行。

    所有的自定义函数默认没有返回值;

    Return后面不要换行

    ▲案例代码:

    $封装


    算式运算符

    + - *  /  %  ^

    A++    ++后置每次自加1      先运算后自加;

    ++a     ++前置每次自加1       先自加后运算;

    案例:

    答案是77.

    解答:

    第2行为11;第3行为12;第4行为13+21+30+13=77

    * 第4行中c++为30的原因:

    这是后置++,也就是该行语句(4)执行完后才会执行c+=1这条语句

    对应的前置++也就是在该语句之前(3执行完后),执行c+=1


    ☆语句

    条件语句(if)☆

    If(条件表达式){语句;}

    If() {}else {}

    If()else if(){}else if(){} else {}


    案例:点击查询是否中奖。

    【案例】:点击输入文字“请输入内容”消失,删除文字后又出现。

    HTML部分:

    CSS部分:

    JS部分:

    案例中涉及的知识点,onfocus,onblur事件:

    获得焦点:onfocus

    失去焦点:onblur

    【案例】简单验证表单

    HTML:

    CSS:

    JS:


    案例涉及知识点:

    ·this(自己的)

    指的是本身;This主要是指事件的调用者。

    ·className类名

    $("result").className="wrong";

    ·innerHTML 更换盒子里面的内容,文字标签都换.


    ·表单更换内容 Input.value

    isNaN    nan不是一个数字      is是    是   不是一个数字

    isNaN(“12”)如果里面的不是个数字  返回true  否则   返回false

    ·方法和属性:

    方法和属性的区别:

    ·方法一律带有小括号。�Iphone.tel();

    方法给值:isNaN(“值”);

    ·属性给值一定是等号。Iphone.color = “red”;


    表单自动获得焦点:

    Txt.focus();方法

    Onfocus事件

    鼠标经过选择表单:

    方法select()选择功能

    自动获得和鼠标经过选择

    for循环

    For(var i = 0; i<100;i++) {  }  遍历

    For(;;){ }    死循环

    案例“金字塔”如图

    源码:


    ·getElementsByTagName()  获取某类标签

    getElementById() id元素   一个

    getElementsByTagName();很多个  所以是复数很多个

    **以上案例所涉及图片素材获取方式:

    百度网盘链接:http://pan.baidu.com/s/1dFcDuhF 密码:itbs

    有任何疑问请在评论区留言,咱们一起探讨与进步吧!

    相关文章

      网友评论

      • 98c5219889f2:对了,你自学的话,是网上买书学的还是,自己在网上学的,买书的话,求推荐,我现在在培训学校里面,老四讲过的东西太简陋了,我看你写的好多东西我们讲师都没有提到过,刚好最近打算买书,一直愁买不到好书
        98c5219889f2:@JokerPeng 谢谢大哥的推荐
        JokerPeng: @这个逗B不怕冷 你不知道的js
      • 98c5219889f2:大神带带我

      本文标题:(二)前端基本功:JS必记知识点+案例

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