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

    xiaoxiao2022-07-12  166

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

    上机练习1,代码如下:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建person对象</title> </head> <body> <p id="intro"></p> <script type="text/javascript"> var person = new Object(); person.name = "朗小明"; person.age = 18; person.work = "中国内地男演员,歌手"; person.address = "中国北京海淀区"; person.intro = function () { var str = "姓名:" + this.name + "<br>年龄:" + this.age + "<br>工作:" + this.work + "<br>住址:" + this.address; document.getElementById("intro").innerHTML = str; } person.intro(); </script> </body> </html>

    上机练习2,代码如下:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建person构造函数</title> </head> <body> <p id="title"></p> <script type="text/javascript"> function Person() { } Person.prototype.name="朗小明"; Person.prototype.age=38; Person.prototype.work="中国内地男演员,歌手"; Person.prototype.address="中国北京海淀区"; Person.prototype.sPerson=function () { var str="姓名:" + this.name + "<br>年龄:" +this.age+ "<br>工作:" + this.work + "<br>住址:" + this.address; document.getElementById("title").innerHTML=str; } var person=new Person(); person.sPerson(); </script> </body> </html>

    上机练习3,代码如下:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建Person对象并画原型链图</title> </head> <body> <script type="text/javascript"> function Person() { //创建构造函数Person,添加属性 this.nation="汉族"; this.skinColor="黄色" this.showNation=function () { //添加方法,并返回属性值 return this.nation; } this.showSkinColor=function () { //同上,同理 return this.skinColor; } } function Woman() { //创建构造函数Woman,添加属性 this.sex="女"; } Woman.prototype=new Person(); //Woman继承Person Woman.prototype.showSex=function () { //为Woman函数添加方法,返回性别 return this.sex; } var woman1=new Woman(); //创建Woman的实例对象woman1 document.write("民族:"+woman1.showNation()); //调用方法,页面显示内容 document.write("<br><br>肤色:"+woman1.showSkinColor()); document.write("<br><br>性别:"+woman1.showSex()); </script> </body> </html>

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

    上机练习4,代码如下:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建继承Person的Student子类</title> </head> <body> <!--<p id="one"></p>--> <!--方法2中:获取节点Id;--> <script type="text/javascript"> function Person() { //创建构造函数Person,添加属性 this.name = "张三"; this.chinese = "98"; this.math = "80"; this.showName = function () { //添加方法,并分别返回 return this.name; } this.showChinese = function () { return this.chinese; } this.showMath = function () { return this.math; } } function Student() { //创建构造函数Student } Student.prototype = new Person(); //继承Person的属性和方法 Student.prototype.age = "25"; //添加属于自己的属性年龄 Student.prototype.showAge = function () { //添加属于自己的方法,并返回 return this.age; } var student = new Student(); //创建Student的对象 //在页面上输出实例的姓名,语文,数学和年龄. // 方法1: document.write("姓名:" + student.showName() + "<br><br>语文:" + student.showChinese() + "<br><br>数学:" + student.showMath() + "<br><br>年龄:" + student.showAge()); //方法2: /* student.End = function () { //回顾下前面学的 麻烦,上个简单好用. var str = "姓名:" + student.showName() + "<br>语文:" + student.showChinese() + "<br>数学:" + "<br>年龄:" + student.showAge(); document.getElementById("one").innerHTML = str; } student.End();*/ </script> </body> </html>
    最新回复(0)