js基础课程终于学完,博客也复盘完成,进入下一阶段js web api (dom和 bom 操作)。
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 方法的特征与注意事项
- 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用 “” 或 ‘’,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
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
实例
- 求的是 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: '山东省' }
];
-
打印不需要变化的部分(表格的头部(< table>)、表格主题标签和表格字段(属性名))
-
中间的行遍历数组,然后填充对象数据
-
打印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>