day12
流程控制（语句）
分支
if () {
}
if () {
} else {
}
if () {
} else if () {
} else if () {
} else {
}
switch () {
case break;
case break;
default:
}
循环
while () {
}
do {
} while()
#适合遍历 指定次数循环
for (var i = 0; 循环条件; 循环变化) {
}
其他语句
continue
break
return
try {
} catch () {
} finally {
}
'use strict'
函数
定义方式
function 函数名(参数) {
}
var 函数名 = function(参数){
}
参数
-
形参和实参
-
参数的默认值
demo('utf-8') -
可变长参数
arguments
返回值
回调函数
自调函数
(function(){
})()
#作用域
笔记
1. JS作用域
1.1 全局作用域和局部作用域
-
函数外面声明的就是 全局作用域
-
函数内是局部作用域
-
全局变量可以直接在函数内修改和使用
-
变量，使用
var是声明，没有var是使用变量。 如果在函数内使用var来声明变量，在函数内会覆盖同名的全局变量
1.2 变量提升
-
在变量声明之前 去使用变量 会得到 undefined ，而不是报错 预读
-
函数内，如果声明了跟全局变量同名的局部变量， 在声明之前使用改变量，得到undefined( 该变量已经是局部的啦)
1.3 作用域链
-
当一个作用域 使用某个变量时，先从本作用域中找， 如果没有去父作用域，再没有，父作用域的父作用域，一直到 全局作用域。 构成了一个作用域链
1.4 闭包
-
通常需要 函数中 返回一个 函数
-
目的 把一个局部作用域的 数据 让外层的作用域使用
1.5 ES6 新增一 块状作用域
-
let关键字也可以声明变量，同var一样 -
但是
let关键字声明的变量，会在结构语句中产生 块状作用域 同局部作用域 -
ES6建议 使用let代替 var
2. JS对象
2.1 构造函数和对象
构造就是类
function User([参数]) {
this.属性 = 值;
this.属性 = 值;
this.方法 = function(){
}
}
#实例一个对象
new 构造函数();
如果构造函数没有参数 可以 不加()
对象.constructor 数字的话：12..constructor或者（12）.constructor
2.2 JS原型和原型链 了解
原型
-
每个对象 都有原型 （原型仍然是一个对象）
-
对象可以继承原型的属性和方法
-
__proto__所有对象都有该属性， 该属性指向该对象的原型
原型链
-
原型作为对象 也有原型
-
原型的原型的原型 就构成了 原型链
-
使用对象中某个属性的时候，先从对象中找，如果没有，从原型上找，原型如果也没有，继续向上找，知道顶层 （顶层的原型对象是一个 类型(类)(构造函数)是Object 的对象）
2.4 JS对象属性的调用
. 点
obj.name
obj.age
[] 中括号
obj['name']
obj['age']
obj['user-name']
任意的对象 都可以在对象实例化完成后， 添加属性和方法
2.4 Object 构造函数
js内建的构造方法 叫 Object
var obj = new Object()
josn方式定义对象
var obj = {属性：值, 属性:值} // new Object的简写
obj的构造含 是 Object
3. 实用技巧
3.1 从页面中获取元素
document.getElementById() 根据ID的值
document.getElementsByTagName() 根据标签名
document.getElmenntsByClassName() 根据class的值
document.getElementsByName() 根据name属性的值
document.querySelector(css选择器) 返回满足条件的第一个 元素对象
document.querySelectorAll(css选择器) 返回所有满足条件元素组成的 类数组对象
3.2 给元素绑定事件
先获取元素
ele.onclick = function(){
}
获取元素的类数组对象， 遍历，挨个给每个元素绑定事件
3.3 修改元素的CSS样式
ele.style.css属性名
ele.style.background
ele.style.border
ele.style.backgroundColor
ele.style['background-color']
3.4 设置元素的class值
ele.className 可以赋值，也可以获取
ele.classList.add(‘值’) 添加一个class值
ele.classList.remove(‘值’) 删除一个class值
ele.classList.toggle(‘值’) 自动切换一个class值(有就删除，没有就添加)
3.5 事件
onclick 单击
ondblclick 双击
oncontextmenu 右击
onmouseover/onmouseenter 鼠标悬浮到元素上
onmouseout/onmouseleave 鼠标离开元素
onmousemove 鼠标在上面移动
onmousedown 鼠标的按键按下
onmouseup 鼠标的按键抬起
3.6 JS定时
单次定时
setTimeout(fn, delay)
clearTimeout() 清除定时
多次定时
setInterval(fn, dealy)
clearInterval() 清除定时
总结
1. 作用域
2. 对象
-
构造函数 实例化对象
-
对象的原型 原型链
3 Object 类型
-
类似于python的字典
-
键值对
作页
-
进度条效果
-
倒计时效果 （选做） （距离世界末日还有 23天1小时4分2秒）
-
