0330，周六晚上，指导一位学生利用微信小程序进行阅读app开发

首先，了解了学生的基础知识，然后说明为什么选择微信小程序进行开发


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5d3593f6e6928ea47719745366b6faf4.image.webp)

主要是向学生讲解微信小程序的开发流程


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d38818efd6366e254461bcbc039ba221.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/54bb46546a0f95564d67ffb5ead21e83.image.webp)



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8113365e7bef925639b5878a54956529.image.webp)


在讲解过程中，实际打开微信开发工具进行演示，并说明app设计、代码编写等问题，如下

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/90c0c71bde21c3af2ece53595db2c774.image.webp)



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/bbb4fdd6d29d47bed6afb416d93422a5.image.webp)


最后，给学生布置任务，第一周需要完成的内容


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a28aa9ff3be740bfaa3be91e0aa0b949.image.webp)


0330 指导微信小程序开发阅读app

今日，花了点时间去配置VanBlog的图床，主要目的是想将平时的图片、截图等信息放到阿里云OSS存储对象中，而不是放到服务器中。

放到图床中有几个好处，第一是减少服务器存储量，第二是方便后续服务器维护、更换时快速导出结果。放到图床中的主要目的是将网页文件、文字与图片进行分离，方便后续本地md文件、博客文件、服务器文件、甚至后续微信小程序开发均可方便地使用图床中静态文件（如照片、视频）内容，而不需要去维护服务器。

在图床设置时也遇到一些问题，最后还是通过搜索PicGO与阿里云图床的设置成功，实现了本地markdown文件的图片与图床图片的同步。然后将PicGo的配置文件复制到VanBlog的后台管理中，再实现网页图片的同步。


VanBlog的图床设置

项目描述：模拟随机选人

项目目的：练习自定义对象和预定义对象的使用

项目要求：
实现随机选人的效果，单击按钮随机人。


代码 

通过简单的数列来实现随机选人
![image.png](/static/img/1a9f3c62ae41ae16f66b89a37c8b2c48.image.webp)

```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        
    </head>
    <body>
        <p id="res"></p>
        
        <p><input type="button" value="随机选人" onclick="Rand()"></p>
        
        <script >
            var stu= new Array("何俊杰","戴业洲","方赞烽","李伟健","欧奇荣",
            "姚俊全"," 李韦佑","杨桂彬");

            // console.log(stu);
            // console.log(stu[0]);
            function Rand(){
                var num = Math.floor(Math.random()*stu.length);
                // console.log(num);
                // console.log(stu[num]);
                document.getElementById("res").innerHTML = stu[num];

            }
        </script>
        
    </body>
</html>
```

效果图

![image.png](/static/img/27c423b2e694544a8dfaaf1c87526913.image.webp)

也可以通过创建学生对象，给出相应的属性，然后随机给出对应的学号和姓名

代码如下

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/35e38faa6434c908075354fae687b459.image.webp)

```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>随机选人</title>
    </head>
    <body>
        <p id="num"></p>
        <p id="name"></p>
        <p><input type="button" value="随机选人" onclick="randPerson()"></p>
        <script>
            
            var stu = new Array("梁振涵","赖文栋","王金志","李嘉乐","何思健","黄宇钊","许锦林");
            class Student{
                constructor(name,id){
                    this.name=name;
                    this.id = id;
                }
            }
            var stu1 = new Array(new Student("梁振涵","202311001333"),
                                 new Student("赖文栋","202311001181"))

            function randPerson(){                
                var randNum = Math.floor(Math.random()*stu1.length);
                document.getElementById("num").innerHTML = stu1[randNum].id;
                document.getElementById("name").innerHTML = stu1[randNum].name;
            }
        </script>
    </body>
</html>
```

效果图
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1098bc1660a44aea5ed06988daf8779a.image.webp)


## 实现头像和名字
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e820fce1353be6b3bc457178f286c815.image.webp)

效果图如下

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/684eadb482e47c739a2738112a051bde.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机选人</title>
</head>
<body>
    <h1>选人</h1>
    <p><img src="1.jpg" alt="" id="img" style="width: 150px"></p>
    <p id="name"></p>
    <input type="button" value="选人" onclick="ranStu()">
    <script>
        //  1.创建二维数组，第一维保存学生姓名和图片
        //  第二维保存所有学生信息
        var stu = [["张三","1.jpg"],["李四","2.jpg"],
                  ["王五","3.jpg"],["麻六","4.jpg"]]
        console.log(stu[0])
        console.log(stu[0][0])
        function ranStu(){
            //  2.生成随机数，然后通过随机数作为索引选择数组中的学生
            var num = Math.floor(Math.random()*stu.length)
            console.log(num)

            //  3.把数组中的学生信息一个个显示出来
            document.getElementById("name").innerHTML = stu[num][0];
            document.getElementById("img").src = stu[num][1];
        }        
    </script>
</body>
</html>
```

第5章 项目实训 - 模拟随机选人

#### 自定义对象

在JavaScript中，除了内置对象外，还可以根据需求自己创建对象，即自定义对象。对象是由属性和方法组成的，所以在创建自定义对象时主要需声明对象的属性和方法。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6aec7d3a63912493eba094e341bd3693.image.webp)

一般使用new关键字来创建对象，语法如下所示。


```     
引用变量=new 对象类（）；

```

将创建的对象赋值给一个变量后，这个变量就是引用类型的变量，简称引用变量。通过引用变量就可以访问对象的属性和方法。如获取当前年份，可以用如下代码来实现。

```
var date=new Date();
var year=date.getFullYear();
document.write(year);

```




# 5.3.1 通过Object创建对象

![image.png](/static/img/21e4b94ea9727757c107945c17e22786.image.webp)


![image.png](/static/img/cd5660a9261364c35b67e685a6efb13d.image.webp)

代码截图

![image.png](/static/img/d833fbaf04cca5e2af2207864aff205b.image.webp)



```
var Animal = new Object();
    Animal.name = "花花";
    Animal.owner = "王小丽";
    Animal.color = "黑色";
document.write(Animal.owner+"家的小狗名字叫"+Animal.name+
                    "，是"+Animal.color+"的。");
```
运行结果

![image.png](/static/img/f73969efbddac003631fe103f6836a60.image.webp)

# 5.3.2 通过字面量对象进行创建对象
   创建自定义对象的另一个方法是通过字面量对象进行创建。所谓的字面量对象是在程序代码中直接书写的对象，其格式主要是使用一对花括号标注的一个或多个用逗号分隔的属性声明，而每个属性声明写成“属性名：属性值”的形式，其语法格式如下所示。

```var obj_name={
obj_attr1：attr_value，
…
obj_attrn：attr_value
};

```

obj_name：新对象名。
obj_attr：对象的新属性名。
attr_value：属性值。


![image.png](/static/img/a98457dc9513c940b0efa476444fddab.image.webp)


![image.png](/static/img/87a37b5f554619d68bf05ec81cee0e5b.image.webp)

```
var Animal={
    name:"花花",
    owner:"王小丽",
    color:"黑色"
};
document.write(Animal.owner+"家的小狗名字叫"+Animal.name+
                    "，是"+Animal.color+"的。");
```
    
# 5.3.3  通过构造函数创建对象
   在JavaScript中，通过构造函数定义对象是定义对象的标准方法。本质上定义了构造函数就表示定义了对象类，构造函数名就是对象名，可以通过new关键字来创建对象实例。
        通过构造函数创建对象，可用到JavaScript的this关键字、function关键字和new关键字。
      
#### 1. 使用this关键字
  在JavaScript中，this关键字用于引用本类对象，可以隐式地引用对象的属性和方法。在对象中this关键字的常用用法如下所示。

#### 2. 使用function定义构造函数
可以使用function关键字像定义普通函数一样来定义构造函数。不同之处是，在构造函数内部一般不使用return语句，并且通常要使用this关键字来引用创建的对象。例如，要创建一个Animal类，则可以使用如下代码来实现。


构造函数的调用与普通函数的调用基本相同，不同之处在于构造函数在调用前须用new关键字。用new关键字来调用构造函数，大致上可以分以下几个步骤来进行。

第1步：利用构造函数创建一个新对象。

第2步：构造函数的函数体用this关键字来引用新对象，定义属性。

第3步：创建完构造函数，利用new关键字来调用构造函数。

#### 3. 使用new关键字来创建构造函数
在JavaScript中，构造函数可用于创建类，而构造函数名就是类名。使用new关键字来创建构造函数的语法格式如下所示。


定义了构造函数之后就可以使用new关键字来创建对象实例了，如下代码所示。


![image.png](/static/img/116141a08671b5acbe47be716f209a53.image.webp)


4. 类对象的prototype属性

![image.png](/static/img/0659179524317537017e558eed0fc587.image.webp)

![image.png](/static/img/d20b35c90160db77fbe7b6742d81da3b.image.webp)

效果图


![image.png](/static/img/8a7e273024fdecb8fc94e378a69fca00.image.webp)

# 5.3.4  通过Function对象定义方法
   在JavaScript中，提供了一个Function内置对象，通过Function对象就可以定义函数。实际上，JavaScript的所有函数都是Function对象。定义函数的方法通常有两种：一种是使用关键字new来显式地创建Function对象；另一种是常用的定义方法，即用function关键字隐式地创建Function对象。
##### 1.显式地创建Function对象

```
var fun_name=new Function(参数1,参数2,…,函数体代码);

```

fun_name：函数名。
在定义函数时，可以定义一个或多个参数，每个参数都是字符串，最后一个参数为函数体代码。



![image.png](/static/img/fc3284589d0dfff82ba9288788f6cc15.image.webp)

![image.png](/static/img/1c215b47a0aa2366f43c46b4f160df22.image.webp)

```
var Welcome = new Function("msg","document.write(msg);");
document.write(Welcome.toString());
Welcome("欢迎学习JavaScript!<br>");

var fun1,fun2;
fun1=Welcome;
fun1("fun1相当于Welcome函数<br>");
fun2=fun1;
fun2("fun1相当于Welcome函数<br>");
```

![image.png](/static/img/4bae9d1c9aef14c6ba7290813444f812.image.webp)
 
 2. 隐式地创建Function对象
 
      隐式地创建Function对象，实际上是指用function关键字来创建构造函数，从前文可知，创建构造函数相当于创建对象。当使用function关键字创建了一个函数时，也隐式地创建了一个Function对象。此时，函数名就是隐式创建的Function对象的引用变量。显式创建函数对象的语法“var fun_name=new Function(参数1, 参数2, …, 函数体代码);”可以改为普通的隐式创建函数的语法，如下所示。
      
```
function fun_name(参数1,参数2,…){
函数体代码；
}

```

![image.png](/static/img/48f756ecb33bc81ccee0f9ad3f385e98.image.webp)


![image.png](/static/img/a73f791aadd30d1f4027db05e4575a6d.image.webp)

# 5.3.5  通过原型对象定义方法
JavaScript中，除了用Function对象创建属性外，还可以用原型对象来进行创建，语法格式如下所示。

```
obj_name.prototype.fun_name=function(){ }

```


obj_name：对象的名字。
fun_name：方法的名字。
function(){ }：匿名函数，实现方法的功能


![image.png](/static/img/72321f44c11bd081b0ab3315c3ad7e22.image.webp)


![image.png](/static/img/6ca59f6e8ef73623d53d1a644b67cc4e.image.webp)


```
function Animal(name,color){
    this.name = name;
    this.color = color;
}

Animal.prototype.type = " 宠物";
Animal.prototype.animal_fun = function(){
    document.write(animal1.color+"的"+animal1.name+"是小丽家的"+
    animal1.type+"，不要伤害它<br>");
}
var animal1 = new Animal("花花","黑色");
var animal2 = new Animal("狗狗","黄色");
document.write(animal1.color+"的"+animal1.name+"是小丽家的"+animal1.type+"<br>");
document.write(animal2.color+"的"+animal1.name+"是小美家的"+animal1.type+"<br>");
animal1.animal_fun();
```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8473548ada6f9f2c653b326475b90a85.image.webp)
## 练习：

目前，课堂上已经学了以下５种方式来创建对象。接下来，利用所学知识，完成学生对象的创建。

要求，

１.对象中学生基本信息：姓名，学号，性别，家乡，并给出共享属性：班级。

２.根据你自定义的对象，在网页上给出你和你边上同学的信息。姓名，学号，性别，家乡，班级



# 5.3.6  通过for…in语句访问对象的属性
自定义对象的属性可以访问，访问方法类似遍历数组的方法。使用for…in语句可以轻松地访问对象的所有属性，其语法格式如下所示。

```
for(var variableName in Obj){
遍历循环体;
}

```

![image.png](/static/img/a039b718a87bea72130a2cd54d85f8ba.image.webp)


js代码 
![image.png](/static/img/0f3ecc28a358bc3e6ac252b3e672f0ee.image.webp)

```
var animal={
    name:"花花",
    owner:"王小丽",
    color:"黑色"
};

document.write(animal.color+"的"+animal.name+
"是"+animal.owner+"的<br>");
document.write("对象animal有以下属性：<br>");
for (var i in animal) {
    document.write(i+":"+animal[i]+"<br>");
}


```

效果图

![image.png](/static/img/829833d5cec05bf199305fc5b2d939ce.image.webp)

```
var animal = {
    name:"花花",
    owner:"王小丽",
    color:"黑色"
}
document.write(animal.owner+"家的小狗名字叫"+animal.name+",是"+animal.color+"的"+"<br>");
for(var i in animal){
    document.write(i+":"+animal[i]+"<br>");
}
with(animal){
    document.write(name+":"+"<br>");
}
```


# 5.3.7  通过with语句访问对象的属性和方法
   在访问一个对象的属性时，经常会遇到要重复访问一个对象的属性的情况，按照普通的对象属性的访问方法，需要多次使用这个对象引用。例如，需要多次获取日期对象的年份、月份、日期信息，每次实现都要调用Date。使用with语句就可以避免多次调用对象的现象，只要调用一次就行了，语法格式如下所示。object: 指定在statements语句中可以多次引用的对象。
   
```
with(object){
statements;
}

```


![image.png](/static/img/31b0ae6d6a330e39bbf36bd8daef5fc5.image.webp)

js代码 

![image.png](/static/img/e7d64bdbb16cf4e0f7259a41c0933506.image.webp)

代替效果 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3c5c9536c86302543870377fe7a21e58.image.webp)

```
var today = new Date();
console.log(today);
with(today){
    document.write("今天是"+getFullYear()+"年"+(getMonth()+1)+
    "月"+getDate()+"日");
}
```

效果图

![image.png](/static/img/cf5dab4b004a4d0b9a049f938d47f6f7.image.webp)

## 练习：用with方式改写下面的代码
```
var animal = {
    name:"花花",
    owner:"王小丽",
    color:"黑色"
}
document.write(animal.owner+"家的小狗名字叫"+animal.name+",是"+animal.color+"的"+"<br>");
```

只需要改最后一个语句便可，如下：
```
with(animal){
    document.write(owner+"家的小狗名字叫"+name+",是"+color+"的"+"<br>");
}
```

# 5.3.8 继承

1.父类与子类

 父类与子类指的是对象的继承关系，一个对象（如A）继承于另一个对象（如B），则A称为B的子类，而B称为A的父类。在继承关系中，子类的属性和方法可以来自父类，并且子类可以重新修改属性和方法。
  
```
A.prototype=new B(…);

```
  在JavaScript中，为子类A指定父类B的方法是将父类B的实例对象赋值给子类A的 prototype属性即可，代码如下所示。执行了上述代码后，A就成了B的子类。

2. call()方法

      在JavaScript中，经常用到call()方法。call()方法是Function对象的一个方法，作用是调用一个对象的方法，以另一个对象替换当前对象，语法如下所示。


```
obj1.call(obj2,arg1,arg2,…,argn); 

```
obj1：当前的对象。
obj2：替换当前对象obj1的对象。
arg1,arg2,…,argn：可选项，将被传递方法参数序列。
方法还是当前对象obj1的方法，但经过call()方法后，obj2替换了obj1，即obj2继承了obj1的方法。



![image.png](/static/img/d4425b4c1d10122e2d1fe4a4b3a6302f.image.webp)

js代码 

![image.png](/static/img/c7406d5ed423ddb2d5e25f64273d9204.image.webp)


```
function Person(name,gender){
    this.name = name;
    this.gender = gender;
}

Person.prototype.introduce = function(){
    document.write("我叫"+this.name+","+this.gender+"<br>");
}

function Studnent(name,gender,major){
    // this.name = name;
    // this.gender = gender;
    Person.call(this,name,gender);
    this.major = major;
}

Studnent.prototype = new Person();
var stu = new Studnent("张华","男","计算机应用技术");
stu.introduce();

Studnent.prototype.introduce = function(){
    document.write("我叫"+this.name+","+this.gender+
    ","+this.major+"<br>");
}
stu.introduce();
```

效果图

![image.png](/static/img/a804f2bb6095112e6812221bcc5dfdb2.image.webp)





5.3 使用自定义对象－JavaScript教学

根据JavaScript课堂所学知识，设计一款猜数字游戏
## 项目描述：
首先电脑随机生成一个1~1000以内的数字，然后玩家给出一个数

电脑根据玩家给出的数字进行判断，给出太大了、太小了、猜对了的 提示

玩家根据给出的提示继续猜数，直至猜对，或者次数用完为止

### html代码设计
![image.png](/static/img/8c9bc1213d1b2873d04b3a8e36951973.image.webp)


```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script src=""></script>
        <title> 猜数字游戏</title>
    </head>
    <body>
        <h1>猜数字游戏</h1>
        <p> 首先电脑随机生成一个1~1000以内的数字，然后玩家给出一个数</p>
        <p>电脑根据玩家给出的数字进行判断，给出太大了、太小了、猜对了的 提示</p>
        <p>玩家根据给出的提示继续猜数，直至猜对，或者次数用完为止</p>
        <p>请输入一个数字：<input type="number" name="" id="inputNum">
            <input type="button" value=" 提交" >
        </p>
        <p id="mes1" style="color: red;"></p>
    </body>
</html>
```

效果图

![image.png](/static/img/2a096a08b6788b61cf88a48d57cd5afb.image.webp)

### js 代码 

![image.png](/static/img/bfdf530aa699da96dbd88a2936f10e52.image.webp)


![image.png](/static/img/32cb2caa17f5d948e72ca9c2cf410ac6.image.webp)


这里注意要在html文件中引用 js 代码，按钮点击后能执行函数


![image.png](/static/img/ea86ee77320949cd27810790a6d2f35a.image.webp)

```
// 第1步，电脑随机生成一个1~1000以内的整数
var randNum = parseInt(Math.random()*1000)+1;
var mes1 = "";
// 第2步，键盘输入数字
function guess(){
    var inputNum = parseInt(document.getElementById("inputNum").value)
    // console.log(randNum);
    // console.log(inputNum);

    // 第3步，比较2个数字的大小 ，并进行提示
    if(inputNum>randNum)
        mes1 = "太大了！";
    else if(inputNum<randNum)
        mes1 = "太小了！";
    else
        mes1 = "恭喜你！猜对了！";
    document.getElementById("mes1").innerHTML = mes1;
}

```


## 修改1 给出输入数字范围判断
1.将数字调整为1~100

2.判断输入的数字是否在范围内，否则给出提示，要求重新输入一次


![image.png](/static/img/2c0162874b12982e86d2f4974dffb32a.image.webp)

## 新增1 美化游戏界面

1.新增 css代码 
2.引用css


![image.png](/static/img/75227be8ef01a20232a90a50cbf802ec.image.webp)


![image.png](/static/img/84ba50fd2c559660f19691bccd514e95.image.webp)

## 新增2 增加再来一局的游戏功能

1.增加按钮
2.写js代码，新函数

![image.png](/static/img/5fe7e5377f96f83179ee66925a210415.image.webp)


![image.png](/static/img/73ee6cf3b7bffa5fa82345d7fb625962.image.webp)

## 新增3 增加游戏局数，猜测次数提醒


![image.png](/static/img/696b60b2c24b21d742e1d0ff0a655a75.image.webp)


![image.png](/static/img/2208b9435b464e122cc8ebeef5080d68.image.webp)

## 拓展，这游戏还能添加其他新的功能

课堂时间关系，仅写这些

课后可以自由拓展


![image.png](/static/img/14c2a216243748178164243d0c55c4f2.image.webp)


![image.png](/static/img/752e1a6173b47420ff569050ac027a6e.image.webp)
