这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
持续更新, 可作为初学者的学习路线, 可参考以下, 学习进度也不是特别赶!
用自己的理解, 简单又全面概括基础知识点, 大部分内容为白话文内容, 基础中的基础 方便加深理解!
巩固学习 JavaScript 基础知识, 加深理解记忆, 打牢地基才能筑高楼! 加油
如需更详细了解学习- 推荐查看 MDN-JavaScript 文档, (红宝书/白皮书/
蓝皮书/..)进行学习进阶!
更多阅读: 前文更新回顾
【重学JS】每天学习巩固基础: 【day1】
开始今天的学习! 接上文-继续梳理更新今天的知识点
1、前文回顾-梳理知识点
- 函数 ：
- 函数参数 ：
- 形参和实参
- 接收函数实参副本 ：
arguments
function fn() {
// ...
}
fn(2, 3, 4, 5, 6)
- 函数返回值：
- 通过
return返回有且只有一个 - 一个函数遇到
return后面语句不执行 - 在函数体内部使用
return
- 通过
2、变量的作用域
2.1 作用域 ： 作用范围
全局变量：
作用范围 ： 整个程序 从开始到结束 变量均有效
在函数外面定义的变量（有无 var 都是全局的） 显式全局变量
在函数体内部没有用 var 定义的变量 隐式的全局变量
2.2 作用域链 **：
变量首先在函数体内部向上查找，
- 如果在函数体内部查找到，就返回（说明该变量就是一个局部变量），
- 否则继续向函数体外部查找 如果找到, 操作的就是全局变量如果函数内部和外部都没有找到,
判断这个变量定义是否有 var
- 有
var就是局部变量, - 没有
var就是全局变量
查找的这个过程 就叫做作用域链
2.3 局部变量：
作用范围 ：
- 局部变量只在该函数体内部有效
- 跳出函数体局部变量自动销毁
在函数体内部通过 var 明确定义的变量
所有的形式参数都是局部变量
2.4 变量提升 ：
在函数体内部用 var 声明的变量, 会将变量提升到函数体的最顶端,
只提升声明但不赋值
function fn() {
alert(num)
var num = 20
}
等价于:
function fn() {
var num
alert(num) // undefined
num = 20
}
- 实际项目中 ：
- 一般使用局部变量
- 为了防止全局变量污染
- 尽量避免出现全局变量
3、函数递归调用
- 函数自己调用自己 (缺点是 消耗性能)
- 递归的本质 ： 实现了循环
- 递归在执行时，由于反复调用函数，就会不停的开辟存储空间 导致 执行效率低
function fn(n){ // n 循环变量 n 会有一个初始值 实参值
if( n == 1 ){ // 终值 循环条件
return 1;
}else{
return n*fn(n-1); n*fn(n-1) // 循环体 步长：n-1
}
}
function fn(n){
var fac = 1;
for(var i = 1 ; i <= n ; i++){
fac \*= i;
}
return fac;
}
4、函数和事件的关系
- 事件 ： 对元素的某种操作
- 事件三要素：
- 事件源 ： 一般是一个名词 静止的
- 事件 : 一般是一个动词
- 事件处理程序 : 一般是一个函数 对事件源处理的结果
函数和事件关系 ： 所有的事件 一般都要依赖于函数执行
5、事件种类
5.1 鼠标事件
- onclick 单击
- ondblclick 双击
- oncontextmenu 右击
- onmouseover 移入
- onmouseout 移出
- onmouseenter 移入
- onmouseleave 移出
- onmousemove 移动
- onmousewheel 滚轮
- onmousedown 按下
- onmouseup 抬起
5.2 键盘事件
- onkeyup 抬起
- onkeydown 按下
- onkeypress 按下+抬起
5.3 表单事件
- onfocus 获取焦点
- onblur 失去焦点
- onsubmit 表单提交
- onchange 改变
5.4 页面事件
- onload 页面加载事件
window.onload= function(){
这里的代码什么时候执行：
需要等到页面所有元素都加载完成后执行
}
6、事件如何操作页面元素 ( js 对元素的操作 )
- 操作样式
obj.style.样式 = 值 注意 : 复合属性 小驼峰式写法 比如 ： fontSize
- 操作属性
<img src=""> src 叫 img 元素的属性
obj.属性名 = 值
-
操作内容
- 如果是表单 obj.value = “值”;
- 非表单操作 ：obj.innerHTML = “值”;
加油, 追梦人
学习就是一个不断进行的过程, 坚持下去, 定有收获!
日积月累, 巩固基础, 早进大厂!
坚持很不容易, 坚持很久更不容易
Calm Down & Carry On!
