前端JavaScript自学复盘D5

已于 2023-01-13 11:11:38 修改
阅读量325 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2022-12-04 16:28:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s1335937517/article/details/128002882
版权

js基础课程终于学完，博客也复盘完成，进入下一阶段js web api (dom和 bom 操作)。

JavaScript对象

1.对象的基本概念

1.1 什么是对象？

对象（object）：JavaScript里的一种数据类型可以理解为是一种无序的数据集合*用来描述某个事物。

例如描述一个人：

人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能

如果用多个变量保存则比较散，用对象比较统一

1.2 对象的特征

包括静态特征（事物的属性）和动态特征（事物的行为与功能）

比如描述 班主任 信息：

静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示

动态行为 (点名, 唱, 跳, rap) => 使用函数表示

1.3 对象有什么特点？

（1）无序的数据的集合

（2）可以详细的描述描述某个事物

2.对象使用

2.1. 对象声明语法

在这里插入图片描述

2.2. 对象组成

在这里插入图片描述
由属性和方法组成，属性与方法之间用英文符号“，”隔开

2.2.1 属性

2.2.1.1 属性概念

数据描述性的信息称为属性， 属性是信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…

2.2.1.2 属性的特征与注意事项

1）属性都是成对出现的，包括属性名和值，它们之间使用英文符号“: ”分隔；

2）多个属性之间使用英文符号“, ”分隔；

3）属性就是依附在对象上的变量（外面是变量，对象内是属性）；

4） 属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。

2.2.1.3 属性声明
		 let 对象名 = {
        	     属性名1 :属性值1 ,
	             属性名2 :属性值2 ,
	             属性名3 :属性值3 ,
	            .................,
	             属性名n :属性值n ,
        	}

例：

<script>
        let goods = {
            brands : '小米',
            name : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆'

        }
    </script>
2.2.1.4 属性访问
2.2.1.4.1 属性访问的概念

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。

简单理解就是获得对象里面的属性值。

2.2.1.4.2 属性访问的方法
属性访问方法1

语法

对象名.属性名

实例

let goods = {
            //属性
            brands : '小米',
            name : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆',
            }
// 方法1  对象名.属性名
        document.write(goods.brands)
        document.write(goods.num)

在这里插入图片描述

属性访问方法2

语法

对象名['属性名']

实例：

let goods = {
            //属性
            brands : '小米',
            name : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆',
            }
        //方法2 对象名['属性名']
        document.write(goods['weight'])
        document.write(goods['address'])

在这里插入图片描述
属性就是依附在对象上的变量（外面是变量，对象内是属性），直接输出属性名会报错，因为浏览器不知道是哪个对象的属性

 //直接输出属性名
 console.log(brands)

在这里插入图片描述

2.2.1.5 属性小结
1. 对象属性有顺序吗？

没有

2. 属性和值用什么符号隔开？多个属性用什么隔开？

属性和值用 ; 隔开

多个属性用，逗号隔开

3.对象访问属性有哪两种方式？

点形式 对象.属性

“ []” 形式 对象[‘属性’]

4. 两种方式有什么区别？

点后面的属性名一定不要加引号

“ [] ”里面的属性名一定加引号

后期不同使用场景会用到不同的写法

2.2.2 对象中的方法

2.2.2.1 方法的概念

数据行为性的信息称为方法，即对象的功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…

2.2.2.2 方法的特征与注意事项
  1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数
  4. 方法名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
2.2.2.3 方法的声明

与属性基本类似，和匿名函数有相似之处

匿名函数声明语法为

let 函数名 = function (形参) {函数体}
方法的声明语法为
 方法名 : function (形参) {函数体}

方法的声明类似于将匿名函数的 ‘let’去掉，将函数名与function (形参) {函数体}之间的等号替换成 ‘ ：’

实例

let goods = {
            //属性
            brands : '小米',
            name : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆',
            //方法
            //（1） 打电话
            tel :function(){
                prompt( '请输入电话号码')
            },
            // //(2) 聊天
            chat : function(str) {
                alert(str)
            },
           
        
        }
2.2.2.4 对象中的方法访问
概念：

声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。

语法:
对象名.方法名()

注意： 千万别忘了给方法名后面加小括号

实例

（续）对象方法声明实例
对象中的方法调用

 goods.tel()
 goods.chat('水韵江苏，江南如诗如画！')

在这里插入图片描述
在这里插入图片描述

2.2.2.5 对象方法可以传递参数吗？

可以，跟函数使用方法基本一致。

3.操作对象

对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法：

在这里插入图片描述

3.1 查询对象

查询对象的本质就是在对象中将对象的属性和方法进行访问，
语法就是对象属性访问和对象方法访问的语法，具体内容如上（2.对象的使用）

3.2 对象的改操作

语法

1） 修改属性对应的值
语法
对象.属性 = 新值

实例

let mp4 = {
            //属性
            brands: 'Sony/索尼',
            price : '￥330',
            //方法 方法名: function(){}
            sing : function(){
                document.write('我爱你就像老鼠爱大米！')
            },
            watch : function(video){
                console.log(video)
            }

        }
        document.write(mp4.brands)
        document.write(mp4.price)
        //修改属性对应的值
        mp4.price = '￥260'
        document.write(mp4.price)

在这里插入图片描述

2）修改方法内容
语法
对象名.方法名 = function(){修改后的函数内容}

实例

  <script>
         let mp4 = {
            //属性
            brands: 'Sony/索尼',
            price : '￥330',
            //方法 方法名: function(){}
            sing : function(){
                document.write('我爱你就像老鼠爱大米！')
            },
            watch : function(video){
                console.log(video)
            }

        }
        // document.write(mp4.brands)
        // document.write(mp4.price)
        //修改属性对应的值
        // mp4.price = '￥260'
        // document.write(mp4.price)
        mp4.sing()
        //修改对象的方法内容
        mp4.sing = function(){
            document.write('天青色等烟雨而我在等你')
        }
        mp4.sing()

在这里插入图片描述

3.3 对象的增操作

JavaScript可以非常方便动态地新增属性或者方法，动态添加与直接定义是一样的，只是语法上更灵活，会去对象里查找并判断是否有将要添加的新属性或新方法。

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

3.3.1 对象添加新的属性以及属性的值

 case 1 : 如果对象中存在这个将要新增的属性，则更新相应属性的值，而不更新属性，
 即只进行修改属性操作；
 
 case 2 : 如果对象中不存在这个将要新增的属性，则新增该属性以及该属性对应的值，
 即进行新增属性操作。

let mp4 = {
            //属性
            brands: 'Sony/索尼',
            price : '￥330',
            //方法 方法名: function(){}
            sing : function(){
                document.write('我爱你就像老鼠爱大米！')
            },
            watch : function(video){
                console.log(video)
            }

        }
        //对象的新增属性与值
        //JavaScript可以非常方便动态地新增属性或者方法，会去对象里查找是否有将要添加的新属性
        //case 1 : 如果对象中存在这个将要新增的属性，则更新相应属性的值，而不更新属性，即只进行修改属性操作
        //case 2 : 如果对象中不存在这个将要新增的属性，则新增该属性以及该属性对应的值，即进行新增属性操作
        //新增mp4的型号
        mp4.xh = 'M2018'
        console.log(mp4.xh);
        document.write(mp4.brands)
        //新增mp4的品牌
        mp4.brands = '功能'
        console.log(mp4.brands)

在这里插入图片描述

3.3.2 对象添加新的方法

case 1 : 如果对象中存在这个将要新增的方法，则更新相应方法的函数体（即：方法包裹的代码），而不更新方法名，
即只进行修改函数体（即：方法包裹的代码）操作；
 
case 2 : 如果对象中不存在这个将要新增的方法，则新增该方法名以及该方法对应的函数体（即：方法包裹的代码）
 即进行新增方法操作。

实例：

let mp4 = {
            //属性
            brands: 'Sony/索尼',
            price : '￥330',
            //方法 方法名: function(){}
            sing : function(){
                document.write('我爱你就像老鼠爱大米！')
            },
            watch : function(video){
                console.log(video)
            }

        }

case 1:新增mp4既有方法sing（）

//case 1 : 新增mp4既有方法sing（）
        mp4.sing = function () {
            document.write('You are beautiful !')
        }
        mp4.sing()

在这里插入图片描述
case 2 : 新增 mp4 方法play()

 //case 2 : 新增 mp4 方法play()
        mp4.play = function (s){
            alert(s)
        }
        mp4.play("Let's play games !" )

在这里插入图片描述

3.3.3. 对象的增操作总结

如何动态添加属性和方法？

对象如果有这个属性或方法相当于进行修改操作

对象如果没有这个属性或方法相当于动态添加一个属性或方法

3.4. 对象的删除操作（了解)

删除属性

语法： delete 对象名.属性名

实例

 let mp4 = {
            //属性
            brands: 'Sony/索尼',
            price : '￥330',
            //方法 方法名: function(){}
            sing : function(){
                document.write('我爱你就像老鼠爱大米！')
            },
            watch : function(video){
                console.log(video)
            }

        }

删除属性price

//删除属性price
       
        delete mp4.price
        console.dir(mp4

在这里插入图片描述

4.遍历对象

4.1 对象与数组遍历的区别

（1）对象没有像数组一样的length属性,所以无法确定长度

（2）对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

4.2 遍历对象的具体方法

语法


  for (let k in 对象名){}
k是什么？

使用 for k in obj,k 是获得对象的属性名

k是对象中代表所有属性名的变量，可以不用k在for-in做变量，k相当于对象中任意属性的属性名，k可以换成a、b、c、e等任意变量名，但是一般用k或key,这样就与键值对有关了，便于理解和使用。

对象名[k] 是获得 属性值

 		 //定义 city 对象
        let city = {
            cityName : '南京',
            cityProvience: '江苏',
            cityTel: '025',
            cityAge : 100


        }
        // for in 循环语句
        //语法
        // for (let k in 对象名){}

        for (let k in city){
            //k是什么？
            // k是对象中代表所有属性名的变量，
            //可以不用k在for-in做变量，k可以换成a、b、c、e等任意变量名，
            //但是一般用k或key,这样就与键值对有关了，便于理解和使用
            console.log(k);
            }

在这里插入图片描述

循环遍历获取对象的属性名

for in 打印输出k

 //定义 city 对象
        let city = {
            cityName : '南京',
            cityProvience: '江苏',
            cityTel: '025',
            cityAge : 100


        }
        // for in 循环语句
        //语法
        // for (let k in 对象名){}

        for (let k in city){
            //k是什么？
            // k是对象中代表代表所有属性名的变量，
            //可以不用k在for-in做变量，k可以换成a、b、c、e等任意变量名，
            //但是一般用k或key,这样就与键值对有关了，便于理解和使用
            console.log(k);
            }

在这里插入图片描述

循环遍历输出属性的值

//k是在 for (let k in 对象名){}中代表所有属性名的变量
对象名[k]

实例

 //定义 city 对象
        let city = {
            cityName : '南京',
            cityProvience: '江苏',
            cityTel: '025',
            cityAge : 100


        }
        // for in 循环语句
        //语法
        // for (let k in 对象名){}

        for (let k in city){
            //k是什么？
            // k是对象中代表所有属性名的变量，
            //可以不用k在for-in做变量，k可以换成a、b、c、e等任意变量名，
            //但是一般用k或key,这样就与键值对有关了，便于理解和使用
            //console.log(k);
            //循环遍历输出属性的值
            console.log(city[k])

        }

在这里插入图片描述

注意：对象名.k、对象名[‘k’]、对象名[k]三者的区别

实例：city[k]、city[‘k’]、city.k的区别
在 for (let k in 对象名){}中，k 等价于’cityName’ 、等价于’cityProvince’ 、等价于 ‘cityTel’ 、等价于 ‘cityAge’，是代表对象中所有属性名的变量；
对象名.k与对象名[‘k’]中，k代表对象city中的k属性，不是代表对象中所有属性名的变量，因此报错

//定义 city 对象
        let city = {
            cityName : '南京',
            cityProvience: '江苏',
            cityTel: '025',
            cityAge : 100


        }
        // for in 循环语句
        //语法
        // for (let k in 对象名){}

        for (let k in city){
            //k是什么？
            // k是代表对象中所有属性名的变量，
            //可以不用k在for-in做变量，k可以换成a、b、c、e等任意变量名，
            //但是一般用k或key,这样就与键值对有关了，便于理解和使用
            //console.log(k);
            //循环遍历输出属性的值
           console.log(city[k])
            //注意：对象名.k、对象名['k']、对象名[k]三者的区别
            //实例：city[k]、city['k']、city.k的区别
           // 在 for (let k in 对象名){}中，k 等价于'cityName' 、等价于'cityProvince' 、等价于 'cityTel' 、等价于 'cityAge'，是代表对象中所有属性名的变量

           // 对象名.k与对象名['k']中，k代表对象city中的k属性，不是代表对象中所有属性名的变量，因此报错
          
           console.log(city.k)
           console.log(city['k']);
           
           


        }

在这里插入图片描述

4.3 遍历对象小结

4.3.1. 遍历对象用那个语句？

for in

4.3.2. 遍历对象中, for k in obj,获得对象属性是那个，获得值是那个？

获得对象属性是 k

获得对象的属性值是 obj[k]

5.内置对象

5.1 什么是内置对象？

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。
我们之前用过的document.write()和 console.log()也是JavaScript内置对象的方法。

5.2 内置对象 Math

Math对象是JavaScript提供的一个“数学高手”对象,提供了一系列做数学运算的方法

Math 常见的方法

random：生成0-1之间的随机数（包含0不包括1，即[0,1)）

ceil：向上取整

floor：向下取整 正数：返回的是本身整数位的整数，负数：返回的是比本身整数为小一位的整数 floor

round : 就近取整 (.5往大取整)

 max：找最大数

min：找最小数

pow：幂运算

abs：绝对值

参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

实例

1.random（）方法 取随机数，PI属性参与计算

		// 圆周率 Π
        console.log(Math.PI)
        //随机数 返回的是0~1之间的小数，能得到0 ，但得不到 1
        console.log(Math.random());

在这里插入图片描述
2.ceil：向上取整、floor：向下取整、round :就近取整 (.5往大取整)对比与理解

正数情况

  //正数情况：
        //向上取整 返回的是比本身整数为大一位的整数 ceil
        console.log(Math.ceil(2.1)); //ceil 3
        console.log(Math.ceil(2.5)); // ceil 3
        console.log(Math.ceil(2.8)); // ceil 3
        console.log('-------------------------------')
         //向下取整 正数：返回的是本身整数位的整数，负数：返回的是比本身整数为小一位的整数 floor
        console.log(Math.floor(2.1)); // floor 2
        console.log(Math.floor(2.5)); // floor 2
        console.log(Math.floor(2.8)); // floor 2
        console.log('-------------------------------')
         //就近取整 (.5往大取整) 返回的是整数
        console.log(Math.round(2.1)); // round 2
        console.log(Math.round(2.5)); // round 3
        console.log(Math.round(2.8)); // round 3
        console.log('-------------------------------')

在这里插入图片描述
负数情况

 //负数情况：
         //就近取整 (.5往大取整) 返回的是整数
        console.log(Math.round(-2.1)); // round -2
        console.log(Math.round(-2.5)); // round -2
        console.log(Math.round(-2.8)); // round -3
        console.log('-------------------------------')
        //向上取整 返回的是比本身整数为大一位的整数 ceil
        console.log(Math.ceil(-2.1)); //ceil -2
        console.log(Math.ceil(-2.5)); // ceil -2
        console.log(Math.ceil(-2.8)); // ceil -2
        console.log('-------------------------------')
         //向下取整 正数：返回的是本身整数位的整数，负数：返回的是比本身整数为小一位的整数 floor
        console.log(Math.floor(-2.1)); // floor -3
        console.log(Math.floor(-2.5)); // floor -3
        console.log(Math.floor(-2.8)); // floor -3
        console.log('-------------------------------')

在这里插入图片描述

3.最大值Math.max,Math.min,取(1, 5, 9, 45)中的最大值和最小值

//最大值和最小值
        console.log(Math.max(1,6,7,78,9))
        console.log(Math.min(1,6,7,78,9))

在这里插入图片描述

5.3 生成任意范围随机数（固定套路）

1. 如何生成0-10的随机数呢？

Math.floor(Math.random() * (10 + 1))

2. 如何生成5-10的随机数？

Math.floor(Math.random() * (5 + 1)) + 5

3. 如何生成N-M之间的随机数？

Math.floor(Math.random() * (M - N + 1)) + N

实例

  1. 求的是 N-M 之间的一个随机数公式
    生成1~10之间的随机数
		//求的是 N-M 之间的一个随机数公式
        //生成1~10之间的随机数
        let random = Math.floor( Math.random() * (10 - 1 +1)) + 1
        console.log(random);

在这里插入图片描述
2.封装一个函数在min~max随机生成一个数

第一次编写代码

     function randomGet (min,max){
              let num = Math.floor(Math.random()*(max - min + 1))+1
        }
       let no = randomGet(1,99)
       console.log( no )

bug :
在这里插入图片描述
bug 分析 ：javaScript中函数无返回值时，函数默认返回undefined
修复方式 ：直接返回生成随机数的值

修复后的代码

 //封装一个函数在min~max随机生成一个数
        function randomGet (min,max){
              return Math.floor(Math.random()*(max - min + 1))+1
        }
       let no = randomGet(1,99)
       console.log( no )
       let no1 = randomGet(8,99)
       console.log( no1 )

在这里插入图片描述
3.需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号

②： 数组[随机数] 生成到页面中

我的代码

思路

 1. 定义数组变量存放名字
 2. 声明随机点名函数，在函数中，将数组序号与生成随机数公式进行绑定
 3. 调用函数获取并打印输出生成随机的名字，并保存到变量中。

// 1. 定义数组变量存放名字
     let name =  ['赵云','黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] 
       // 2.声明随机点名函数，在函数中，将数组序号与生成随机数公式进行绑定
       function randomGet (min,max){
              return name [Math.floor(Math.random()*(max- min + 1))+1]
        }
        //3.调用函数获取并打印输出生成随机的名字，并保存到变量中。
       let getName = randomGet(0,name.length-1)

       console.log( getName )

参考代码

思路分析

1.声明随机数函数；
2.定义数组；
3.生成随机数作为数组索引号；
4.将随机数渲染到页面中。

 // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']

        // 生成1个随机数 作为数组的索引号
        let random = getRandom(0, arr.length - 1)
        // console.log(random)
        document.write(arr[random])

在这里插入图片描述
优化 ：
参考代码返回的随机数是数组的随机索引号，在后期给这个需求做优化时会更方便和灵活，具有较高的可复用性，操作时仅需利用数组的索引号做修改，即可实现对数组的操作，比如在进行实例4的不重复显示时，仅需调用数组的索引号对数组进行删除操作即可实现需求，而我的代码直接返回的结果是数组里的值，不利于对生成随机数后对数组进行操作。

		// 1. 定义数组变量存放名字
     	let name =  ['赵云','黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] 
       // 2.声明随机点名函数，在函数中，将数组序号与生成随机数公式进行绑定
       function randomGet (min,max){
              return Math.floor(Math.random()*(max- min + 1))+1
        }
        //3.调用函数获取并打印输出生成随机的名字，并保存到变量中。
       let getName1 = randomGet(0,name.length-1)

       console.log( name[getName1] )

4.随机点名案例改进

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是不
允许重复显示

分析：

1.声明随机数函数；
2.定义数组；
3.生成随机数作为数组索引号；
4.将随机数渲染到页面中；
5.数组中删除刚才抽中的索引号。

 <script>
        // 1. 定义数组变量存放名字
     let name =  ['赵云','黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] 

       // 2.声明随机点名函数，在函数中，将数组序号与生成随机数公式进行绑定
       function randomGet (min,max){
              return Math.floor(Math.random()*(max- min + 1))+1
        }
        //3.调用函数获取并打印输出生成随机的名字，并保存到变量中。
       let getName1 = randomGet(0,name.length-1)

       console.log( name[getName1] )
        name.splice(getName1,1 )
        console.log(name)
    
       
    </script>

在这里插入图片描述
5.需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字

①：如果大于该数字，就提示，数字猜大了，继续猜

②：如果小于该数字，就提示，数字猜小了，继续猜

③：如果猜对了，就提示猜对了，程序结束

思路分析


1.声明函数生成随机数
2.定义变量存放生成的随机数
3.定义变量存放用户输入的数字
4.循环条件判断用户输入的数字大小，并给予用户猜的数字大小与随机数大小比较提示信息,直到用户输入正确为止，就结束弹窗

我的第一次代码bug分析

代码

 // 1.声明函数生成随机数
        function randomGet (min,max){
              return Math.floor(Math.random()*(max - min + 1))+1
        }
        //2.定义变量存放生成的随机数
        let num = randomGet (1,10)
        //测试：获取生成的随机数
        alert (num)
        // 3. 定义变量存放用户输入的数字
        let number = +prompt ('请输入1~10之间的任意数字')
        // 4.循环条件判断用户输入的数字大小，并给予用户猜的数字大小与随机数大小比较提示信息,直到用户输入正确为止，就结束弹窗
     while (true ){
        if (number > num){
                alert('数字猜大了，继续猜')
            }else if (number < num){
                alert('数字猜小了，继续猜'）
            }else{
                alert('恭喜你，猜对了！')
                break
                
            }
     }

bug分析：我的代码在获取用户输入数字与随机数比较时，若用户输入的数字大于或小于随机数，会一直弹出输入数字的大小提示信息，不能让用户继续输入数字继续猜，原因是我没有让num变量重新接收存放用户输入的数字。修复措施是若用户输入的数字大于或小于随机数，让num重新赋值

修复后的代码

 // 1.声明函数生成随机数
        function randomGet (min,max){
              return Math.floor(Math.random()*(max - min + 1))+1
        }
        //2.定义变量存放生成的随机数
        let num = randomGet (1,10)
        //测试：获取生成的随机数
        alert (num)
        // 3. 定义变量存放用户输入的数字
        let number = +prompt ('请输入1~10之间的任意数字')
        // 4.循环条件判断用户输入的数字大小，并给予用户猜的数字大小与随机数大小比较提示信息,直到用户输入正确为止，就结束弹窗
     while (true ){
        if (number > num){
                alert('数字猜大了，继续猜')
                 number = +prompt ('请输入1~10之间的任意数字')
            }else if (number < num){
                alert('数字猜小了，继续猜')
                number = +prompt ('请输入1~10之间的任意数字')
            }else{
                alert('恭喜你，猜对了！')
                break
                
            }
     }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

参考代码对比分析
参考代码将用户输入放在循环体中，用户输入数字，就循环判断与随机数之间的大小，直到输入数字大小才可退出，无需在分支语句给用户输入的数字重新赋值，使代码更加简化，提高了代码执行效率。

 <script>
        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 生成 1~10 之间的随机数
        let random = getRandom(1, 10)
        ///测试：获取生成的随机数
        alert(random)
        // 3. 用户输入 不断的弹框直到输入正确为止
        while (true) {
            let num = +prompt('请您输入一个数字：')
            // 如果输入的大于随机数就提示猜大了
            if (random < num) {
                alert('私密马赛，你猜大了')
            } else if (random > num) {
                alert('比亚乃， 你猜小了')
            } else {
                alert(' 萨卡迪卡，正确')
                break   // break 退出循环  return 退出函数
            }
            // 如果输入的小于随机数就提示猜小了
            // 如果输入的正好就提示正确
        }
    </script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码优化
1.按照参考代码将用户输入放在循环体中
2.将用户输入数字与随机数大小比较信息放在提示信息中，让提示信息更加人性化。

<script>
        // 1.声明函数生成随机数
        function randomGet (min,max){
              return Math.floor(Math.random()*(max - min + 1))+1
        }
        //2.定义变量存放生成的随机数
        let num = randomGet (1,10)
        //测试：获取生成的随机数
        alert (num)
        // 3.循环条件判断用户输入的数字大小，并给予用户猜的数字大小与随机数大小比较提示信息,直到用户输入正确为止，就结束弹窗
     while (true ){

         //  定义变量存放用户输入的数字
        let number = +prompt ('请输入1~10之间的任意数字')

        //判断用户输入的数字大小，并给予用户猜的数字大小与随机数大小比较提示信息
        if (number > num){
                alert(`${number} > ${num},数字猜大了，继续猜!`)
            }else if (number < num){
                alert(`${number} < ${num} ,数字猜小了，继续猜!`)
            }else{
                alert('恭喜你，猜对了！')
                break
                
            }
     } 
        
        
    </script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

6.综合案例

6.1 学生列表

6.1.1. 案例补充知识（数组对象）

数组里面可以放任何的数据类型,可以放数字、字符串、boolean型数据、null、数组、对象。
不过在实际开发中数组主要只存放对象，把这种存放在数组中的对象叫做数组对象。

1）定义数组对象
let 数组名 =[{对象1},{对象2},{对象3}......{对象n}]

实例

 //数组里面可以放任何的数据类型,可以放数字、字符串、boolean型数据、null、数组、对象
        let arr = [1,'pink',true, undefined, null,{},[]]
        console.log(arr)
        //数组对象
        let students = [
            {name: '小明', age: 18, gender: '男', hometown: '河北省'},
            
            {name: '小红', age: 19, gender: '女', hometown: '河南省'},

            {name: '小刚', age: 17, gender: '男', hometown: '山西省'},

            {name: '小丽', age: 18, gender: '女', hometown: '山东省'}

        ]
2）访问数组中的某一个对象？
        语法：数组名[数组索引号]

例：访问students数组中第一个对象

 //访问students数组中第一个对象
    console.log(students[0])

在这里插入图片描述

3）获取数组对象属性的值
语法：数组名[数组索引号].对象属性名

例：怎样在students中得到小明的名字？

 console.log(students[0].name)

在这里插入图片描述

4）遍历数组，并输出数组对象中某一个属性的值

语法

for(let i = 0; i< 数组名.length; i++){
            //遍历输出数组对象中某一个属性的值
            document.write(数组名[i].对象属性名)
        }

实例：
输出学生数组对象的姓名和年龄的属性值

for(let i = 0; i< students.length; i++){
            //遍历输出数组对象中某一个属性的值
            document.write(students[i].name)
            document.write(students[i].age)
        }

在这里插入图片描述
6.1.2 案例需求
需求：根据以上数据渲染生成表格
在这里插入图片描述
6.1.3 案例分析与代码思路
6.1.3.1静态部分
分为主题、段落和表格，三大模块。
html 代码部分
（1）用h1标签放“学生信息”四个字;
（2）用p标签放”将数组中存储的学生信息,以表格的形式输出到网页中“这一段文字;
（3）用table放表格信息，其中用caption标签放表格主题"学生列表"，再用thead和tbody分别将表格为表格的头部和表格内容;
（4）在thead中用tr包裹th用来放表格字段标题（序号、姓名、年龄、性别、家乡）
（5）在thbody中用tr包裹td用来放表格字段标题对应的表格数据

CSS代码部分
（1）清除默认样式；
（2）给h1,p,table标签设置margin值，使其等距排列；
（3）调小p标签和h1标签的间距，并设置字体大小与文字颜色；
（4）给table标签设置border-collapse:collapse,便于通过css给tr、th与td添加边框属性；
（5）给caption标签根据图示设置样式；
（6）给tr、th与td添加边框属性，并设置宽高，使其水平居中，并根据图示给tr、th与td单独设置样式；
（7）给表格字段标题（序号、姓名、年龄、性别、家乡）单独设置背景色。

**6.1.3.2 JavaScript部分**

1.定义students数组对象

let students = [
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },
        { name: '小红', age: 19, gender: '女', hometown: '河南省' },
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
        { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]；

  1. 打印不需要变化的部分（表格的头部（< table>）、表格主题标签和表格字段（属性名）)

  2. 中间的行遍历数组，然后填充对象数据

  3. 打印table标签尾部< /table>

6.1.4 案例代码
6.1.4.1静态部分
HTML代码

  <h1>学生信息</h1>
    <p>将数组中存储的学生信息,以表格的形式输出到网页中</p>
    <table>
        <caption>学生列表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>02</td>
                <td>小红</td>
                <td>19</td>
                <td>女</td>
                <td>河南省</td>
            </tr>
            <tr>
                <td>03</td>
                <td>小刚</td>
                <td>17</td>
                <td>男</td>
                <td>山西省</td>
            </tr>
            <tr>
                <td>04</td>
                <td>小丽</td>
                <td>18</td>
                <td>女</td>
                <td>山东省</td>
            </tr>
        </tbody>
    </table>

CSS代码

   <style>
        *{
            padding: 0;
            margin: 0;
        }
        h1,p,table{
            margin:   50px ;
        }
       
       p{
           margin-top: -30px;
            font-size: 16px;
            color: dimgrey;
       }
       table{
            border-collapse: collapse;
            padding: 20px;
            
       }
       caption,th,td{
        font-weight: 800;
       }
       caption{
        font-size: 20px;
        margin: 20px;
      
       }
       tr,th,td{
        border: 1px solid  #f1f1f1;
        text-align: center;
        width: 200px;
        height: 50px;
        
       }
       
       th,td{
        font-size: 18px;
       }
       thead :first-child{
        background-color: #f1f1f1;
       }
    </style>

在这里插入图片描述

**6.1.4.2 JavaScript部分**

<script>
        //定义students数组对象
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
            { name: '小高', age: 18, gender: '女', hometown: '山东省' }
        ]
        //第一步：打印不需要变化的部分（表格的头部（<table>）、表格主题标签和表格字段（属性名）)

        document.write(`
       
         <table>
        <caption>学生列表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        </thead>

        `)
        //第二步：中间的行遍历数组，然后填充对象数据
        for(let i = 0 ; i < students.length; i++){
            
            document.write(`
            <tr>
                <td>${i+1}</td>
                <td>${students[i].name}</td>
                <td>${students[i].age}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].hometown}</td>
            </tr>


            `)
        }
        // 第三步：打印table标签尾部</table>
        document.write(`</table>`)
    </script>

在这里插入图片描述
6.1.5 案例优化
1.鼠标在表格中有小手指向
2.鼠标在移过表格除第一条信息之外的每一条信息后变色

/* 鼠标在表格中有小手指向 */
       tr {
            
            cursor: pointer;
        }
       /* 鼠标在移过表格除第一条信息之外的每一条信息后变色 */
       table tr:not(:first-child):hover {
            background-color: #eee;
        }

在这里插入图片描述

6.2 学成在线页面渲染案例

6.2.1补充知识点：script可以写到HTML标签内部

1）script不写到标签内部
script 里的内容与标签将分开显示
实例：写一个盒子，同时页面输出你好

<div class="box"></div>
    <script>
        document.write('你好！')
    </script>

在这里插入图片描述
2）script写到标签内部
script 里的内容将显示在标签上面
实例：在box盒子上输出你好

<div class="box">
        <script>
            document.write('你好！')
        </script>
    </div>

在这里插入图片描述

需求：根据数据渲染列表页面

在这里插入图片描述

6.2.2.项目准备
在这里插入图片描述

静态页面代码

（代码已在素材中给出）

盒子模型简要分析

在这里插入图片描述

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>
                <li>
                    <img src="images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>1125</span>人在学习
                    </div>
                </li>


            </ul>
        </div>
    </div>

</body>

</html>

css部分

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   
 
.header {
    height: 42px;
    /* background-color: pink; */
    /* 注意此地方会层叠 w 里面的margin */
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px;
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;   
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* search搜索模块 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮button默认有个边框需要我们手动去掉 */
    border: 0;
    background: url(images/btn.png);
}
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}
/* banner区域 */
.banner {
    height: 421px;
    background-color: #1c036c;
}
.banner .w {
    height: 421px;
    background: url(images/banner2.png) no-repeat top center;
}
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0, 0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: #00a4ff;
}
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.bd {
    padding: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}
/* 精品推荐模块 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
    /* 行高会继承， 会继承给3个孩子 */
    line-height: 60px;
}
.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}
.mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}
.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    position: relative;
    top: 0;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all .3s;
   
}
.box-bd ul li:hover {
    top: -8px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}
/* footer 模块 */
.footer {
    height: 415px;
    background-color: #fff;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}
.copyright .app {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
    font-size: 16px;
}
.links {
    float: right;
}
.links dl {
    float: left;
    margin-left: 100px;
}
.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dd a {
    color: #333;
    font-size: 12px;
}

在这里插入图片描述
JS部分准备

let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2 大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'Android APP 实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI 源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                    ]

6.2.3 代码思路分析

目标：

将ul-li中的所有盒子（图片、标题、文字等）通过JavaScript渲染到网页中
在这里插入图片描述

思路

1.保留一个li,将script写在标签中；
2.定义数组对象存储ul-li中要渲染的内容；
3.循环遍历数组，访问数组对象属性，并利用对象属性的值填充渲染ul-li中的内容。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- 1.保留一个li,将script写在标签中 -->
                <script>
                    //2.定义数组对象存放要渲染的ul-li中的内容
                    let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2 大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'Android APP 实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI 源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                    ]
                    //3.循环遍历数组，访问数组对象属性，并利用对象属性的值填充渲染ul-li中的内容
                    for(let i = 0 ; i < data.length ; i++){
                        document.write(`
                        <li>
                            <img src= '${data[i].src}' alt="">
                            <h4>
                               ${data[i].title}
                            </h4>
                            <div class="info">
                                <span>高级</span> • <span>${data[i].num}</span>人在学习
                            </div>
                        </li>
                        `)
                    }
                </script>
                
                

            </ul>
        </div>
    </div>

</body>

</html>

在这里插入图片描述

淘气的Tom
关注
【前端个人工作复盘总结】2021-10-18
weixin_48596030的博客
10-26 2743
利用空余时间，复盘一下近期的工作，把重要的经验教训梳理沉淀下来，在此记之以提醒和勉励自己。
前端技术搭建俄罗斯方块（内含源码）
热门推荐
官方推荐
06-05 2万+
通过前端基础HTML、CSS、JS来搭建一个俄罗斯方块小游戏，内附源码直接拷贝即可运行！
exercise-d5:使用 d5.js 库进行练习
06-28
练习 - d5.js 玩弄 d5.js 库。 先决条件 没有任何！ :) 用法 在浏览器中打开 index.html 文件。
vue.js自学(D5)
fangpihuiyu的博客
02-19 179
vue.js自学(D5) 04-计算属性 02计算属性的复杂操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
5.JS基础（二）
剑指苍天
02-24 483
引用数据类型（对象）：为了弥补基本数据类型的不足，可以让不一样的数据类型之间产生关系，所以要把他们变成一个整体（对象） 一、内置对象 1、function函数对象 2、数组对象 3、Date日期对象 Function创建，（包含的内置属性：length：函数形参列表个数，调用：alert（对象，length）） 1、var fun=new Function（形参，函数体） var fun=new Function（”a“，”b“，alert（a））该函数指显示a，所以传入了b也不会显示，用形参和函数体括号分
d3_v5.js绘制柱状图(可添加数据和实现排序功能)
weixin_62268437的博客
12-20 417
这是博主用d3.js第一次绘制的图形，可以实现数据的添加和排序的功能，里面用到了线性比例尺和颜色比例尺等知识，后面都打了备注，因为时间的原因就不一个一个展开说了，源码放在下面，方便我管理也。
5[JavaScript基础](对象,操作对象,遍历对象)
wusandaofwy的博客
08-03 209
5[JavaScript基础](对象,操作对象,遍历对象) for in遍历对象，数组对象，Math对象使用
1500个前端开发常用JavaScript特效
04-24
JavaScript是前端开发中不可或缺的一部分，尤其对于创建交互性和动态效果来说更是如此。"1500个前端开发常用JavaScript特效"这个资源集包含了大量实践性的示例，旨在帮助开发者提升项目中的用户体验。以下是对这些...
前端技术搭建拼图小游戏（内含源码）
最新发布
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
前端开发：JavaScript合并数组的方法
软贱开发攻城狮
11-15 3061
前言 在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript中对数组进行合并，这是一个比较常见的操作，分享出来，提供查阅使用。 数组合并 在JavaScript中合并两个数组的方法有4种，每一种方法都大同小异，为的就是对两个数
JavaScript学习-Document类型
theroadofprogrammers的专栏
04-19 273
1，介绍 document对象是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面。 document对象是window对象的一个属性，可作为全局对象访问。 2，属性 documentElement该属性始终指向元素 示例var html = document.documentElement; alert(html === document.childNodes[
js中使用for(var k in obj)来遍历对象
Ming-Kai
06-22 5023
遍历属性值和方法值时，只能用obj[k],不能用obj.k。
【前端学习】D1：JavaScript入门
甜鲸鱼的博客
03-06 1227
这篇文章为我重新系统学习前端时做的一些笔记，记录了JavaScript的入门知识。
JavaScript运算符
weixin_47244766的博客
04-21 453
知识点罗列： 1.JavaScript运算符： ①算数运算符： 运算符也叫做操作符 通过运算符可以对一个或则多个值进行运算，并获取运算结果。 - 算数运算符 + 加 可以对两个值进行加法运算，如果是两个字符串则进行字符串拼接 任何值和字符串做加法运算，都会先转为字符串，然后再和字符串做拼接操作 也可以通过"+“完成隐式转换。 - 减 可以对两个值进行减法运算，并返回运算结果 * 乘 可以对两个值进...
前端JavaScript自学复盘D3（前端JavaScript for循环、数组）
s1335937517的博客
11-09 547
前端自学第三次复盘，javascipt 中for循环、for嵌套循环、数组使用与操作、js打印九九乘法表和倒三角、冒泡排序和生成柱形图
JavaScriptd的8种数据类型
2301_76406247的博客
02-11 77
Unicode 是目前最常见的字符编码，它用一个码位映射一个字符。在 js 中，Unicode 码位范围为'\u{0000}'，可以表示超过110万个字符。格式为'\u{十六进制数字}'Unicode 最前面的 65536 个字符位称为 基本多文种平面，它的码位范围为'\u{0000}''\u{ffff}'，最常见的字符都放在这个平面上。剩下的字符都放在 辅助平面 上，码位范围为判断是否为辅助平面的方法为十六进制数字的位数是否超过4位。
关于JavaScript简述
m0_37160455的博客
09-03 613
JavaScript 1 JavaScript简介 1.1 什么是JavaScript(了解) 全称JavaScript, 简称JS JS是一门用于嵌入在网页中的运行的脚本语言. JS常被用于在网页中实现一些动画效果或者实现表单校验 JS主要应用在客户端(浏览器) 脚本语言: 是指在网络前端开发环境下, 能够在浏览器中运行的一段小程序。 1.2 JS特点和优势(了解) 特点: (1)直译式(边...
前端JavaScript基础学习笔记：李立超老师课程总结
"李立超前端JavaScript基础个人总结笔记，基于B站UP主李立超的视频课程，详细记录了JavaScript基础知识，包括Markdown格式和PDF版本，适合前端初学者配合视频学习，笔记内容涵盖核心概念和代码示例，将持续更新前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值