第四周：JS进阶+复习

目录

一、JS作用域

1.分类

2.变量的作用域

二、JS对象

1.什么是对象

2.为什么需要对象

3.调用对象

4.创建对象的三种方式

5.遍历对象

6.内置对象

 7.随机数字

三、Web API    

（一）基本认识

(二)获取DOM对象

（三）操作元素内容

（四）操作元素属性

---

一、JS作用域

作用域就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，减少命名冲突。

1.分类

• 全局作用域：整个script标签中，或者是一个单独的js文件
• 局部作用域（函数作用域）：在函数内部起效果和作用

2.变量的作用域

• 全局变量：在全局作用域下的变量，函数内部也能使用。
• 局部变量：在局部作用域下的变量，只能在函数内部使用。

注意：在函数内部没有声明，直接赋值的变量也是全局变量。函数的形参也可以看成局部变量

区别：全局变量只有在浏览器关闭时才会销毁，比较占用内存资源。局部变量当程序执行完就会销毁，比较节约内存资源。

二、JS对象

1.什么是对象

①对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

②对象是由属性和方法组成的

• 属性：事物的特征，在对象中用属性表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

2.为什么需要对象

        js中的对象表达结构更清晰，更强大（类似结构体）

3.调用对象

• 调用对象的属性：①对象名.属性名②对象名[ ' 属性' ]
• 调用对象的方法：对象名.方法名（）      注意加小括号

4.创建对象的三种方式

（1）利用对象字面量创建对象

        格式：var 对象名 = {属性名：值，属性名：值......}

        注意：{}里可放属性或方法，用逗号隔开。方法冒号后面跟的是匿名函数

eg:创建一个obj对象并调用

var obj={
    name:'张三',
    age:18,
    sex:'男',
    sayhi:function(){
        console.log('hi');
    }
}
console.log(obj.name);
console.log(obj['sex']);
obj.sayhi();

（2）利用 new Object 创建对象

格式：var 对象名 = new Object();

var obj = new Object();
obj.name='张三';
obj.age=18;
console.log(obj.name);

(3)利用构造函数创建对象

 为什么：利用函数的方法，重复一些相同的代码，把这个函数称为 构造函数。

把对象里面一些相同的属性和方法抽象出来封装到函数里面

格式如下

//构造格式
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){}
}
//调用
new 构造函数名();//调用函数返回的是一个对象

eg:这里构造了一个函数并且调用，最后在控制台打印出：张三   sing1   19

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.sing = function(sing){
        console.log(sing);
    }
}
var zs = new Person('张三',18,'男');
console.log(zs.name);
zs.sing('sing1');
var ls = new Person('李四',19,'男');
console.log(ls.age);

注意：构造函数首字母大写，调用构造函数必须使用new,只要调用了函数就创建一个对象。 

5.遍历对象

for(let k in obj){
    console.log(k);//输出属性名
    console.log(obj[k]);//输出属性值
}

6.内置对象

数学内置对象,eg:

console.log(Math.PI);//3.141592653589793
console.log(Math.ceil(1.1));//2  
console.log(Math.floor(1.1));//1
console.log(Math.round(1.1));//1  四舍五入
console.log(Math.round(-1.5));//-1

 7.随机数字

Math.random()取[0,1)之间的小数，下面是一个示例

console.log(Math.floor(Math.random()*11));//随机取[0,10]之间的整数
//随机抽人
let arr=['张三','李四','王二','麻子'];
let random = Math.floor(Math.random()*arr.length);//0,1,2,3
console.log(arr[random]);//随机输出名字
// 生成N-M之间的随机数
function getRandom(M,N){
    return  Math.floor(Math.random()*(M-N+1))+N
}
console.log(getRandom(4,8));//打印4到8之间的随机数

 eg:猜数字游戏

//猜数字游戏
function getRandom(M,N){//生成一个随机整数
    return  Math.floor(Math.random()*(M-N+1))+N
}
let random = getRandom(1,10)
while(true){
    let num = +prompt('猜猜数字是多少')//用户输入数字
    if(num>random){
        alert('你猜大了')
    }
    else if(num<random){
        alert('你猜小了')
    }
    else{
        alert('猜对了！');
        break;
    } 
}

增加次数限制改成for循环

//下面增加次数限制
let flag=true;
for(let i=0;i<3;i++){
    let num = +prompt('猜猜数字是多少(你有三次机会)')//用户输入数字
    if(num>random){
        alert('你猜大了')
    }
    else if(num<random){
        alert('你猜小了')
    }
    else{
        alert('猜对了！')
        flag=false
        break
    }
}
if(flag){
    alert('次数用完，游戏失败')
}

补充：变量声明

var let const

const是不变的，优先使用，其次是let

数组和对象用const声明

注意：基本数据类型中当变量是会变的不能用const，数组中可以（地址不变） 

三、Web API    

（一）基本认识

1.作用和分类

作用：使用js取操作HTML和浏览器

分类：DOM（文档对象模型）和BOM（浏览器对象模型）

2.什么是DOM

作用：开发网页内容特效和实现用户交互

3.DOM树

• 将html文档以树状结构直观表现出来，称之为文档树或DOM树
• 描述网页内容关系的模型
• 作用：文档树直观地体现标签与标签之间的关系

4.DOM对象

• 浏览器根据html标签生成的js对象
• 所有的标签属性都可以在树上找到
• 修改这个属性会自动映射到标签身上

DOM核心思想：把网页当作对象处理

document对象：是DOM里提供的一个对象，网页的所有内容都在document里，它提供的属性和方法都是用来访问和操作网页内容的，如document.write

(二)获取DOM对象

根据CSS选择器来获取

1.选择匹配的第一个元素(只选择第一个)

可以直接修改样式

document.querySelector('CSS选择器')

2. 选择多个

document.querySelectorAll('')

得到的是一个伪数组，没有pop,push等方法，要得到每个对象要用for循环

（三）操作元素内容

1.对象.innerText属性

将文本内容添加（更新）到任意标签位置。显示纯文本，不解析标签

eg:在body中输入以下语句，浏览器会把div里显示的内容改为234

    <div class="box">111</div>
    <script>
        const box = document.querySelector('.box')
        box.innerText = 234;
    </script>

2.元素.innerHTML

会解析标签

eg: 下面这段最终显示的字是加粗的

    <div class="box">111</div>
    <script>
        const box = document.querySelector('.box')
        box.innerHTML = '<strong>更换内容并且加粗</strong>';
    </script>

（四）操作元素属性

1.操作元素常用属性

常见属性如：href,src,title等

语法：对象.属性 = 值

eg:

    <img src="./4.8-1.jpg">
    <script>
        const img = document.querySelector('img')
        img.src = './4.8-2.jpg'
    </script>

2.操作元素样式属性

①通过style属性操作CSS

语法：对象.style.样式属性 = 值

eg:会改变盒子的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width:200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')//获取元素
        box.style.width = '300px'//注意单位
        box.style.backgroundColor = 'red'
        box.style.border = '4px solid blue'
        //注意：若属性有短横线，用小驼峰命名法
    </script>
</body>
</html>

②通过类名修改属性

通过操作类名（className）操作CSS

适用于修改的样式比较多，会覆盖前面的属性，

保留原来属性：  ' 原来的类名 新类名 '

语法：元素.className = '  '

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .box {
            width:300px;
            height: 300px;
            background-color: red;
            margin: auto;
        }
    </style>
</head>
<body>
    <div ></div>
    <script>
        const div = document.querySelector('div')
        div.className = 'box'//不用加点
    </script>
</body>
</html>

③通过classList操作控制CSS属性（常用）

语法：

追加：元素.classList.add('类名')

删除：元素.classList.remove('类名')

切换：元素.classList.toggle('类名')    有就删掉，没有就加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width:200px;
            height: 200px;
            background-color: red;
            color:black
        }
        .active{
            margin: auto;
            background-color: black;
            color:white;
        }
        .new {
            margin: auto;
            color:white;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
    <script>
        const box = document.querySelector('.box')
        box.classList.add('active')
        box.classList.remove('active')
        box.classList.toggle('new')
    </script>
</body>
</html>

3.操作表单元素属性

如点击眼睛出现密码框密码,全选按钮等

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

表单属性中添加就有效果，移除就没有效果，一律使用布尔值 表示，如果true代表了该属性，如果是false代表移除了该属性

比如：disabled、checked、selected 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox">
    <button>点击</button>
    <script>
        // const uname=document.querySelector('input') //获取元素
        // console.log(uname.value);//打印出“输入”
        // uname.value='电脑111'//设置表单的值
        // uname.type='password'//切换成密码框
        // const ipt=document.querySelector('input')
        // console.log(ipt.checked);//若没有默认勾选则输出false
        //  ipt.checked=true//勾选该复选框
        const button=document.querySelector('button')
        button.disabled=true//禁用按钮
        console.log(button.disabled)
    </script>
</body>
</html>

4.自定义属性

自定义属性：在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取

dataset是一个集合，获取所有的data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const one = document.querySelector('div')
        console.log(one.dataset.id);//1
        console.log(one.dataset);//1,1234
    </script>
</body>
</html>

（五）倒计时-间歇性函数

1.开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数，单位ms，一旦开始永不停歇

定时器返回的是一个id数字

2.关闭定时器

格式

       let 变量名 = setInterval(函数,间隔时间)
       clearInterval(变量名)

        let n=setInterval(fn,1000)
        function fn(){
            console.log('一秒执行一次');
        }
        clearInterval(n)

3.一个简单的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn"disabled>我已经阅读并同意用户使用协议(5)</button>
    <script>
        //获取元素
        const btn=document.querySelector('.btn')
        let i=5;
        //开启定时器
        let n=setInterval(function() {
            i--;
            btn.innerHTML=`我已经阅读并同意用户使用协议(${i})`
            if(i===-1){
                clearInterval(n);
                btn.disabled=false;
                btn.innerHTML="同意"
            }
        },1000)

    </script>
</body>
</html>