（二）前端基本功：JS必记知识点+案例

☆函数（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

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