美文网首页从零开始学前端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