JS：谷歌浏览器版本，数组，生成位置和颜色随机色块界面，创建对象，面向对象，增删
每次刷新网页都在灰色正方形中生成位置和颜色随机的小正方形色块界面：（含扩展题1.1等）
创建一个人类对象，包含人物编号，名称，年龄，性别属性，包含一个吃饭的功能,将该对象打印到主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var person={
'bianhao':007,
'name':'诗书画唱',
'age':20,
'sex':'男',
'chifan' :function(){
alert(this .name+"正在吃饭");}
};
for(var i in person){
document .write(person[i]+" ");}
document .write("<hr>");
document . write(person. bianhao+" "+person. name + " "+person. age+" "+person. sex) ;
person. chifan();
</script>
</head>
<body>
</body>
</html>
2.创建一个人类的对象数组，用来保存3名人员信息，遍历人员信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var persons=[
{'bianhao':007,'name':'诗书画唱1','age':20},
{'bianhao':666,'name':'诗书画唱2','age':21},
{'bianhao':233,'name':'诗书画唱3','age':22},
];
for(var i of persons){
for(var j in i){
document . write(i[j]+" ");}
document . write("<br>");}
</script>
</head>
<body>
</body>
</html>
3.创建商品的构造方法，实例化3件商品放入到对象数组中，计算商品的总价格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var shangPin = function(bianhao, name, price, num) {
this.bianhao = bianhao;
this.name = name;
this.price = price;
this.num = num;
}
var shangPinShuZu = [
new shangPin(1,'苹果', 2, 5),
new shangPin(2,'香蕉', 5, 2),
new shangPin(3, 'CD', 10, 1)
];
alert("计算总价格为："+jiSuanZongJiaGe(shangPinShuZu));
function jiSuanZongJiaGe(shangPinShuZu) {
var zongJiaGe = 0;
//这里总价格默认等 于0
//这里遍历一次是一件商品
for(var i of shangPinShuZu) {
// 每个商品花的钱:所购商品价格*所购商品购买数量
var meiGeShangPinJiaGe = (i.price * i.num);
zongJiaGe += meiGeShangPinJiaGe;
}
return zongJiaGe;
}
</script>
</head>
<body>
</body>
</html>
扩展题：
创建一个人类对象，包含人物编号，名称，年龄，性别属性，包含一个吃饭的功能,将该对象打印到按F12后的控制台界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//第一种创建对象方法：直接创建
var duiXiang1={'bianhao':1,'name':'诗书画唱' , 'age':19,'sex':'男'};
//第二种创建对象方法：使用new创建
var duiXiang2=new Object();
duiXiang2. bianhao=2;
duiXiang2. name='诗书画唱SSHC';
duiXiang2. age=19;
duiXiang2. sex='男';
duiXiang2. gongneng=function(){
alert(this . name+"的功能是吃饭");
document.write(this . name+"的功能是吃饭");}
console. log(duiXiang1) ;console. log(duiXiang2);
window.onload=function() {
// document.write(duiXiang2.toString());
duiXiang2.gongneng();}
//创建对象的作用就是以后前后台进行交互，传递页面中的内容，会更方便
</script>
</head>
<body>
</body>
</html>
1.1增加或删除对象的属性和内容的方法
1.2JS遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// 创建一个人类的对象数组，用来保存3名人员信息，遍历人员信息
var duiXiang1={'bianhao':1,'name':'诗书画唱1' , 'age':19,'sex':'男'};
var duiXiang2={'bianhao':1,'name':'诗书画唱2' , 'age':19,'sex':'男'};
var duiXiang3={'bianhao':1,'name':'诗书画唱3' , 'age':19,'sex':'男'};
for(var i in duiXiang1){
//i:下标内容的键(如bianhao) duiXiang1[i]:要遍历的内容，值（如1）
//alert(i);
document.write(duiXiang1[i]+" ");
}
document.write("<br>");
for(var i in duiXiang2){
//i:下标内容的键(如bianhao) duiXiang2[i]:要遍历的内容，值（如1）
//alert(i);
document.write(duiXiang2[i]+" ");
} document.write("<br>");
for(var i in duiXiang3){
//i:下标内容的键(如bianhao) duiXiang3[i]:要遍历的内容，值（如1）
//alert(i);
document.write(duiXiang3[i]+" ");
}
</script>
</head>
<body>
</body>
</html>
