1.对象是什么
2.对象使用
1.声明属性
2.案例
3.对象的使用
4.查询
5.修改
6.增加
7.删除
8.练习
9.查询2
10.方法
3.遍历对象
1.遍历
2.案例
4.内置对象
1.Math
2.随机数函数
3.随机点名案例
4.猜数字案例
设定次数
5.猜颜色
6.渲染学成在线
<!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="./css/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>
<a href="#">
<img src="images/course01.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</a>
</li> -->
<script>
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: 'AndroidAPP实战项目演练',
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
},
{
src: 'images/course04.png',
title: '自动添加的模块',
num: 1000
}
]
for (let i = 0; i < data.length; i++) {
document.write(`
<li>
<a href="#">
<img src=${data[i].src} title="${data[i].title}">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
</li>
`)
}
</script>
</ul>
</div>
</div>
</body>
</html>
7.拓展
1.专业术语
2.基本数据类型和引用数据类型
5.客观题
练习题1：
点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字
<body>
<script>
let array = ["老赵", "老李", "小传", "小黑"]
let index = Math.floor(Math.random() * array.length)
console.log(array[index]);
array.splice(index, 1)
console.log(array);
</script>
</body>练习题2：
声明对象
目的: 复习对象的声明
要求:
声明一个变量per, 类型为对象类型
该对象的属性为性别,年龄,爱好(3个)
该对象的方法有 说话, 吃饭(2个)
在控制台分别调用该对象的属性和方法
<body>
<script>
let per = {
gender : "男",
age : 18 ,
live : ["爱好1", "爱好2", "爱好3"],
say:function(){
console.log("说话");
},
song:function(){
console.log("唱歌");
}
}
for(let k in per){
console.log(k);
console.log(per[k]);
}
per.song()
</script>
</body>练习题3：
调用对象的方法
目的: 复习对象的使用
要求:
对象声明完毕后, 调用对象中的吃饭的方法
提示: 对象中的方法本质是函数, 调用需要加()
方法也可以传递参数的
<body>
<script>
let per = {
uname : 'js',
say:function(x = 0, y = 0){
x = x || 0
y = y || 0
console.log(x + y);
}
}
per.say() //0
per.say(1) //1
per.say(1, 2) //3
</script>
</body>练习题4：
猜数字游戏，设定次数，最多猜8次
<body>
<script>
//1-10
let num = Math.floor(Math.random * 10) + 1
let index = true
for(let i = 0; i < 8; i++){
let num1 = +prompt("请输入数字")
if(num1 < num){
alert("你猜小了")
}else if(num1 > num){
alert("你猜大了")
}else{
alert('你猜对了')
index = false
break
}
}
if(index){
alert("次数已经耗尽")
}
</script>
</body>练习题5：
完成课堂随机生成颜色的案例。
<body>
<script>
let array = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
let str = "#"
for (let i = 0; i < 6; i++) {
index = Math.floor(Math.random() * array.length)
// console.log(index);
str += array[index]
}
console.log(str);
</script>
</body>6.排错题
排错题1
12:obj[name]
15:单词错误:address排错题2
12:方法后边加,
18,19:方法后边应该加()7.客观题
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
