HTML5+CSS3+JavaScript从入门到精通-16
原创HTML5+CSS3+JavaScript从入门到精通-16
原创
qiqi_fu
发布于 2021-12-06 14:52:28
发布于 2021-12-06 14:52:28
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("姓名   ", "性别   ", "年龄   ", "所学专业<br>");
for (i = 0; i < 5; i++)
{
for (j in student[i])
{
document.write(student[i][j] + "   ");
}
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>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读