HTML5+CSS3+JavaScript从入门到精通-16

原创

qiqi_fu

发布于 2021-12-06 06:52:28

44900

代码可运行

文章被收录于专栏：CQ品势CQ品势

运行总次数：0

代码可运行

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第十六章 JavaScript的对象编程

案例

16-01 通过对象直接量创建对象

<!DOCTYPE html>
<!--web16-01-->
<!--
    //通过new运算符创建对象
    var car = new Object();
    car.color = "white"; //给car对象添加一个属性color.
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>通过对象直接量创建对象</title>
</head>
<body>
    <h3 align="center">通过对象直接量创建对象</h3>
    <hr />
    <script type="text/javascript">
        var circle = { x: 50, y: 60, radius: 10 };//通过对象直接量创建对象
        document.write("圆心的x坐标值是：", circle.x, "<br>");
        document.write("圆心的y坐标值是：", circle.y, "<br>");
        document.write("圆的半径是：", circle.radius, "<br>");
    </script>
</body>
</html>

16-02 通过函数创建对象

<!DOCTYPE html>
<!--web16-02-->
<html>
<head>
    <meta charset="utf-8" />
    <title>通过函数创建对象</title>
    <script type="text/javascript">
        function student(name, chinese, math, english)
        {
            this.name = name;
            this.chinese = chinese;
            this.math = math;
            this.english = english;
        }
    </script>
</head>
<body>
    <h3 align="center">通过函数创建对象</h3>
    <hr />
    <script type="text/javascript">
        var st1 = new student("张亮", 92, 85, 89);
        document.write("姓名：" + st1.name + "<br>");
        document.write("语文：" + st1.chinese + "<br>");
        document.write("数学：" + st1.math + "<br>");
        document.write("英语：" + st1.english + "<br>");
    </script>
</body>
</html>

16-03 在构造函数外定义对象的方法

<!DOCTYPE html>
<!--web16-03-->
<html>
<head>
    <meta charset="utf-8" />
    <title>在构造函数外定义对象的方法</title>
    <script type="text/javascript">
        function student(name, chinese, math, english) {
            this.name = name;
            this.chinese = chinese;
            this.math = math;
            this.english = english;
        }
        function avg() {
            return ((this.chinese + this.math + this.english) / 3);
        }
    </script>
    
</head>
<body>
    <h3 align="center">在构造函数外定义对象的方法</h3>
    <hr />
    <script type="text/javascript">
        var st1 = new student("张亮", 92, 85, 89);
        st1.avg = avg;//定义st1对象的新成员
        document.write("姓名：" + st1.name + "<br>");
        document.write("语文：" + st1.chinese + "<br>");
        document.write("数学：" + st1.math + "<br>");
        document.write("英语：" + st1.english + "<br>");
        document.write("三科的平均成绩是" + st1.avg() + "<br>");
    </script>
</body>

</html>

16-04 在构造函数内定义对象的方法

<!DOCTYPE html>
<!--web16-04-->
<!--
    删除对象的属性和方法：
    delete st1.name
    delete st1.avg

    删除对象
    st1 = null
    or
    st1 = undefined
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>在构造函数内定义对象的方法</title>
    <script type="text/javascript">
        function student(name, chinese, math, english)
        {
            this.name = name;
            this.chinese = chinese;
            this.math = math;
            this.english = english;
            this.avg = avg;
            this.sum = sum;
        }
        function avg()
        {
            return ((this.chinese + this.math + this.english) / 3);
        }
        function sum()
        {
            return (this.chinese + this.math + this.english);//若一个属性名写错了，结果就是NaN
        }
    </script>
</head>
<body>
    <h3 align="center">在构造函数内定义对象的方法</h3>
    <hr />
    <script type="text/javascript">
        var st1 = new student("张亮", 92, 85, 89);
        document.write("姓名：", st1.name, "<br>");
        document.write("语文：", st1.chinese, "<br>");
        document.write("数学：", st1.math, "<br>");
        document.write("英语：", st1.english, "<br>");
        document.write("三科的总成绩：", st1.sum(), "<br>");
        document.write("三科的平均成绩：", st1.avg(), "<br>");
    </script>
</body>
</html>

16-05 创建和访问数组

<!DOCTYPE html>
<!--web16-05-->
<!--
    JavaScript允许在一个数组中存储任何类型的值
    var arr = new Array("abc", 0, 1, true);
    -->
<html">
<head>
    <meta charset="utf-8" />
    <title>创建和访问数组</title>
</head>
<body>
    <h3 align="center">创建和访问数组</h3>
    <hr />
    <script type="text/javascript">
        var a = new Array(10);
        for (var i = 0; i < 10; i++)
        {
            a[i] = i * i + 10;
        }
        for (i in a)
        {
            document.write("a[" + i + "]=" + a[i] + "<br>");
        }
    </script>
</body>

</html>

16-06 多维数组

<!DOCTYPE html>
<!--web16-06-->
<html>
<head>
    <meta charset="utf-8" />
    <title>多维数组</title>
</head>
<body>
    <h3 align="center">多维数组</h3>
    <hr />
    <script type="text/javascript">
        var student = new Array();
        student[0] = new Array("张可萍", "女", 18, "网络");
        student[1] = new Array("刘一章", "男", 19, "电子商务");
        student[2] = new Array("马迎春", "女", 17, "软件");
        student[3] = new Array("刘志清", "男", 18, "网络");
        student[4] = new Array("张可立", "女", 18, "电子商务");
        
        document.write("姓名&nbsp&nbsp&nbsp", "性别&nbsp&nbsp&nbsp", "年龄&nbsp&nbsp&nbsp", "所学专业<br>");
        for (i = 0; i < 5; i++)
        {
            for (j in student[i])
            {
                document.write(student[i][j] + "&nbsp&nbsp&nbsp");
            }
            document.write("<br>");
        }
    </script>
</body>

</html>

16-07 Array对象的常用属性和方法

<!DOCTYPE html>
<!--web16-07-->
<html>
<head>
    <meta charset="utf-8" />
    <title>Array对象的常用属性和方法</title>
</head>
<body>
    <h3 align="center">Array对象的常用属性和方法</h3>
    <hr />
    <script type="text/javascript">
        //另外，pop/push：在末尾减/加元素；
        //shift/unshift:在数组第一个元素减/加元素；
        //join,用指定分隔符将元素拼接，形成字符串；
        var num1 = new Array(50, 20, 45, 37, 68, 34, 58);
        var num2 = new Array(89, 81, 25, 47, 98, 14, 76, 23, 48);
        document.write("num1数组中元素的个数是：", num1.length, "<br>");
        document.write("num2数组中元素的个数 ：", num2.length, "<br>");
        document.write("num1数组中元素是：", num1.toString(), "<br>");
        document.write("num2数组中元素是：", num2.valueOf(), "<br><hr>");//ValueOf==toString

        var num3 = num1.concat(num2);//concat,数组合并
        document.write("num3数组中元素个数是：", num3.length, "<br>");
        document.write("num3数组中元素是：", num3.valueOf(), "<br>");
        document.write("num1数组中元素反向显示：", num1.reverse(), "<br>");//reverse，反向
        document.write("num3数组中元素排序显示：", num3.sort(), "<br>");//sort，排序
    </script>
</body>
</html>

16-08 Math对象

<!DOCTYPE html>
<!--web16-08-->
<!--
    round(x):对x四舍五入取整
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Math对象</title>
</head>
<body>
    <h3 align="center">Math对象</h3>
    <hr />
    <script type="text/javascript">
        document.write("自然对象的底：", Math.E, "<br>");
        document.write("10的自然对数值：", Math.LN10, "<br>");
        document.write("圆周率：", Math.PI, "<br>");
        document.write("ceil(5.6)=", Math.ceil(5.6), "<br>");//ceil:大于等于X但最接近X的整数
        document.write("floor(5.6)=", Math.floor(5.6), "<br>");//floor:小于等于X但最接近X的整数
        document.write("max(56,125)=", Math.max(56, 125), "<br>");
        document.write("min(56,125)=", Math.min(56, 125), "<br>");
        document.write("pow(2,5)=", Math.pow(2, 5), "<br>");//pow(x,y):x的y次方
        document.write("random()", Math.random(), "<br>");
        document.write("sqrt(9)=", Math.sqrt(9), "<br>");
        document.write("abs(-5)=", Math.abs(-5), "<br>");

    </script>
</body>
</html>

16-09 Date对象

<!DOCTYPE html>
<!--web16-09-->
<html>
<head>
    <meta charset="utf-8" />
    <title>Date对象</title>
</head>
<body>
    <h3 align="center">Date对象</h3>
    <hr />
    <script type="text/javascript">
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth() + 1;//这里要+1；
        var day = today.getDate();
        var week = today.getDay();//注意getDate和getDay的区别；
        switch (week)
        {
            case 0: week = "星期日"; break;
            case 1: week = "星期一"; break;
            case 2: week = "星期二"; break;
            case 3: week = "星期三"; break;
            case 4: week = "星期四"; break;
            case 5: week = "星期五"; break;
            case 6: week = "星期六"; break;
        }
        document.write("今天是", year, "年", month, "月", day, "日", week, "<br><hr>")

        var hour = today.getHours();
        var minite = today.getMinutes();
        var second = today.getSeconds();
        var ms = today.getMilliseconds();
        document.write("现在是北京时间" + hour + "时" + minite + "分" + second + "秒" + ms + "毫秒<br><hr>");
    </script>
</body>

</html>

16-10 Object对象

<!DOCTYPE html>
<!--web16-10-->
<!--
    属性：constructor,prototype
    方法：toString(), valueOf()
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Object对象</title>
</head>
<body>
    <h3 align="center">Object对象</h3>
    <hr />
    <script type="text/javascript">
        var myobj1 = new Object(true);
        var myobj2 = new Object(125);
        document.write("Object对象myobj1的constructor属性值：" + myobj1.constructor + "<br>");
        document.write("Object对象myobj1的toString()方法值：" + myobj1.toString() + "<br>");
        document.write("Object对象myobj1的valueOf()方法值：" + myobj1.valueOf() + "<br>");
        document.write("Object对象myobj2的constructor属性值：" + myobj2.constructor + "<br>");
        document.write("Object对象myobj2的toString()方法值：" + myobj2.toString() + "<br>");
        document.write("Object对象myobj2的valueOf()方法值：" + myobj2.valueOf() + "<br>");
    </script>
</body>
</html>