JavaScript第4章上机练习(全部)

ps:代码不多,易理解,简单,一次性上传.

上机练习1,代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>创建person对象</title>
 6 </head>
 7 <body>
 8 <p id="intro"></p>
 9 <script type="text/javascript">
10     var person = new Object();
11     person.name = "朗小明";
12     person.age = 18;
13     person.work = "中国内地男演员,歌手";
14     person.address = "中国北京海淀区";
15     person.intro = function () {
16         var str = "姓名:" + this.name + "<br>年龄:" + this.age + "<br>工作:" + this.work + "<br>住址:" + this.address;
17         document.getElementById("intro").innerHTML = str;
18     }
19     person.intro();
20 </script>
21 </body>
22 </html>

上机练习2,代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>创建person构造函数</title>
 6 </head>
 7 <body>
 8 <p id="title"></p>
 9 <script type="text/javascript">
10     function Person() {
11 
12     }
13     Person.prototype.name="朗小明";
14     Person.prototype.age=38;
15     Person.prototype.work="中国内地男演员,歌手";
16     Person.prototype.address="中国北京海淀区";
17     Person.prototype.sPerson=function () {
18         var str="姓名:" + this.name + "<br>年龄:" +this.age+ "<br>工作:" + this.work + "<br>住址:" + this.address;
19         document.getElementById("title").innerHTML=str;
20     }
21     var person=new Person();
22     person.sPerson();
23 </script>
24 </body>
25 </html>

上机练习3,代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>创建Person对象并画原型链图</title>
 6 </head>
 7 <body>
 8 <script type="text/javascript">
 9     function Person() {   //创建构造函数Person,添加属性
10         this.nation="汉族";
11         this.skinColor="黄色"
12         this.showNation=function () {   //添加方法,并返回属性值
13             return this.nation;
14         }
15         this.showSkinColor=function () {   //同上,同理
16             return this.skinColor;
17         }
18     }
19 
20     function Woman() {   //创建构造函数Woman,添加属性
21         this.sex="女";
22     }
23     Woman.prototype=new Person();   //Woman继承Person
24     Woman.prototype.showSex=function () {   //为Woman函数添加方法,返回性别
25         return this.sex;
26     }
27     var woman1=new Woman();   //创建Woman的实例对象woman1
28     document.write("民族:"+woman1.showNation());   //调用方法,页面显示内容
29     document.write("<br><br>肤色:"+woman1.showSkinColor());
30     document.write("<br><br>性别:"+woman1.showSex());
31 </script>
32 </body>
33 </html>

ps:画原型链图? ?no no no 别想了,不存在的.

上机练习4,代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>创建继承Person的Student子类</title>
 6 </head>
 7 <body>
 8 
 9 <!--<p id="one"></p>-->   <!--方法2中:获取节点Id;-->
10 
11 <script type="text/javascript">
12     function Person() {   //创建构造函数Person,添加属性
13         this.name = "张三";
14         this.chinese = "98";
15         this.math = "80";
16         this.showName = function () {   //添加方法,并分别返回
17             return this.name;
18         }
19         this.showChinese = function () {
20             return this.chinese;
21         }
22         this.showMath = function () {
23             return this.math;
24         }
25     }
26 
27     function Student() {   //创建构造函数Student
28 
29     }
30 
31     Student.prototype = new Person();   //继承Person的属性和方法
32     Student.prototype.age = "25";   //添加属于自己的属性年龄
33     Student.prototype.showAge = function () {   //添加属于自己的方法,并返回
34         return this.age;
35     }
36     var student = new Student();  //创建Student的对象
37     //在页面上输出实例的姓名,语文,数学和年龄.
38     // 方法1:
39     document.write("姓名:" + student.showName() + "<br><br>语文:" + student.showChinese() + "<br><br>数学:" + student.showMath() + "<br><br>年龄:" + student.showAge());
40 
41     //方法2:
42     /* student.End = function () {  //回顾下前面学的  麻烦,上个简单好用.
43          var str = "姓名:" + student.showName() + "<br>语文:" + student.showChinese() + "<br>数学:" +
44              "<br>年龄:" + student.showAge();
45          document.getElementById("one").innerHTML = str;
46      }
47      student.End();*/
48 </script>
49 </body>
50 </html>

 

posted @ 2021-01-20 09:34  残冰辉  阅读(610)  评论(0)    收藏  举报