JavaScript交互式网页设计 • 【第5章 JavaScript对象】

全部章节   >>>>

---

本章目录

5.1 Object 对象和 Date 对象

5.1.1 JavaScript 的内部对象

5.1.2 Object对象

5.1.3 Date对象

5.1.4 实践练习

5.2 Image对象和Math对象

5.2.1 Image对象

5.2.2 Math对象

5.2.3 实践练习

5.3 数组和String对象

5.3.1 数组

5.3.2 String对象

5.4 对象的创建及常用语句

5.4.1 创建对象

5.4.2 对象常用语句

5.4.3 实践练习

总结：

---

5.1 Object 对象和 Date 对象

5.1.1 JavaScript 的内部对象

JavaScript 提供了一些非常有用的内部对象，按使用方式可分为两种

实例对象。在引用该对象的属性和方法时，必须先使用 new 关键字创建一个对象实例，然后再使用“对象实例名 . 成员”的格式来进行访问

静态对象。在引用该对象的属性和方法时不需要使用 new 关键字来创建对象实例，可以直接使用“类名 . 成员”的格式来进行访问

5.1.2 Object对象

Object 对象提供了一种创建自定义对象的简单方式，因为它不需要开发人员定义构造函数

在程序运行时可以为JavaScript 对象添加属性，因此使用 Object 对象创建出自定义对象非常简便

对象的属性可以使用索引运算符“[ ]”进行访问

示例：Object 对象的用法

<script type="text/javascript">
    var person = new Object();
    person.name="Tom";
    person.age=25;
    function getAttr(attr) {
      alert(person[attr]);
    }
</script>
<p><input type="button" value=" 显示姓名 " onClick="getAttr('name')"/> </p>
<p><input type="button" value=" 显示年龄 " onClick="getAttr('age')"/></p>

5.1.3 Date对象

通过创建 Date 对象，可以获取本地计算机中的日期与时间

初始化 Date 对象有 4 种方式

new Date() // 当前日期和时间
new Date(milliseconds) // 返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

每个Date对象都只是计算机的一个毫秒级快照，Date对象只是保存了它被创建时的时间信息

示例：Date 对象的用法

<script type="text/javascript">
    var now = new Date();
    document.write(now+"<br/>");
    var date1 = new Date("October 13, 1975 11:13:00")
    document.write(date1+"<br/>");
    var date2 = new Date(79,5,24)
    document.write(date2+"<br/>");
    var date3 = new Date(79,5,24,11,33,0)
    document.write(date3+"<br/>");
    var date4 = new Date(60*60*1000);
    document.write(date4);
</script>

Date 对象的常用方法

方法	功能
getDate()	返回一个月中的某一天（1 ～ 31）
getDay()	返回一周中的某一天（0 ～ 6），0 为周日，1 为周一，以此类推
getFullYear()	以四位数返回年份
getHours()	返回小时（0 ～ 23）
getMilliseconds()	返回毫秒
getMinutes()	返回分钟（0 ～ 59）
getMonth()	返回月份（0 ～ 11），0 为一月，1 为二月，以此类推
getSeconds()	返回秒数（0 ～ 59）
getTime()	返回 1970 年 1 月 1 日至今的毫秒数

示例：Date 对象中方法的使用

    <span id="myclock"></span>
  <script type="text/javascript">
    function showTime() {
      var now = new Date();
      var year = now.getFullYear();   // 获取年份
      var month = now.getMonth()+1;  // 获取月份
      var day = now.getDate();     // 获取日
      var hour = now.getHours();    // 获取小时
      var minutes = now.getMinutes(); // 获取分钟
      var seconds = now.getSeconds(); // 获取秒
      var week = now.getDay();
      var weekStr;
      switch(week){
				case 0:
					weekStr="星期天";
					break;
				case 6:
					weekStr="星期六";
					break;
				case 5:
					weekStr="星期五";
					break;
				case 4:
					weekStr="星期四";
					break;
				case 3:
					weekStr="星期三";
					break;
				case 2:
					weekStr="星期二";
					break;
				case 1:
					weekStr="星期一";
					break;
			}
        document.getElementById("myclock").innerHTML=year+" 年 "+ checkTime(month)+" 月 "+checkTime(day)+" 日 <br/>"+weekStr+"<br/>"   +checkTime(hour)+":"+checkTime(minutes)+":"+checkTime(seconds);
        ｝
    function checkTime(i) {
      if(i<10){
        i="0"+i;   // 在小于 10 的数字前加一个 0
      }
      return i;
        }
        // 每隔 500 毫秒取一次当前的时间
    window.setInterval("showTime()",500);
    window.onload = showTime;
  </script>

示例：使用 Date 对象进行倒计时，显示距离国庆节的剩余时间

    <span id="time"></span>
  <script type="text/javascript">
    function remainTime() {
      var now = new Date();// 当前时间
      var year = now.getFullYear();
      var month = now.getMonth()+1;
      // 如果当前月份超过 10 月，则计算下一年的 10 月 1 日
      if(month>=10)   year+=1;
      var future = new Date(year,9,1);
      var remain=future.getTime()-now.getTime();// 毫秒
      // 计算剩余的天数
      var days = parseInt(remain/(24*60*60*1000));
      // 计算剩余的小时数
      var hours = parseInt(remain/(60*60*1000)%24);
	// 计算剩余的分钟数
   	var minutes = parseInt(remain/(60*1000)%60);
      var  seconds=parseInt(remain/1000%60); // 计算剩余的秒数
 	days = checkTime(days);
      hours = checkTime(hours);
      minutes = checkTime(minutes);
      seconds = checkTime(seconds);
      document.getElementById("time").innerHTML="<h2> 距离国庆节还剩 <br/>" +days+" 天 "+hours+" 小时 " +minutes+" 分钟 " + seconds+" 秒 </h2>";
    }
    function checkTime(i) {
      if(i<10)  i="0"+i;        // 将 0 ～ 9 的数字前面加上 0
      return i;
    }
    window.onload=remainTime;
    window.setInterval("remainTime()",500);
    </script>

5.1.4 实践练习

5.2 Image对象和Math对象

5.2.1 Image对象

网页中使用图片，只需要调用 <img> 标签，然后在 src 属性中设置图片的绝对路径或相对路径即可

如果实现动画或者图像效果，则需要使用图像缓存技术，让用户对图像效果获得较好的体验，使用这种技术需要借助Image对象

示例：页面中显示一幅默认图像和一个按钮，点击按钮后，快速切换至另一幅图片

<head>
     <meta charset="utf-8">
     <title> 使用图像缓存技术</title>
     <script type="text/javascript">
	var picObj = new Image();
	picObj.src="../img/pc.jpg";
	function changePic() {
	     document.getElementById("pic").src=picObj.src;
	}
      </script>
</head>
<body>
     <p><img src="../img/mobile.jpg" id="pic" width="200"/></p>
     <p><input type="button" value=" 切换" onClick="changePic()"/></p>
</body>

5.2.2 Math对象

JavaScript 中的基本数值运算符可以用来进行一些简单的数学计算，而使用Math 对象可以进行更多的高级运算，如平方根、三角函数、对数和随机数等

与其他对象不同，Math 不需要使用new 关键字创建对象的实例

Math对象中常用的方法

方法	功能
Math.abs(number)	返回number 的绝对值
Math.ceil(number)	对number 向上取整，如Math.ceil(67.6) 返回值是68
Math.floor(number)	对number 向下取整，如Math.floor (67.6) 返回值是67
Math.max(number1,number2)	返回number1 与number2 中的较大值
Math.min(number1,number2)	返回number1 与number2 中的较小值
Math.pow(x,y)	返回x 的y 次幂
Math.random()	返回0 和1 之间的伪随机数，可能为0，但总是小于1
Math.round(number)	返回最接近number 的整数
Math.sqrt(number)	number 的平方根

示例：使用Math对象，完成一个猜数游戏

var number=Math.floor(1+10*Math.random()); // 获取1 到10 之间的整数
function guess_click() {
     var info = document.getElementById("guess").value; // 获取用户输入的内容
     if(info.trim()!=null && info.trim()!="" && !isNaN(info)) {
     	var input=Math.floor(info); // 向下取整
     	if(number == input) {
     	     alert(" 猜对了!");
     	} else if( number > input) {
            alert(" 猜小了！ ");}
	     else {
            alert(" 猜大了!");
         }
     } else {
         alert(" 请输入整数"); }
     }

5.2.3 实践练习

5.3 数组和String对象

5.3.1 数组

1、数组列表

数组列表用于表示一组数据的集合，它由一对方括号（[]）包围，列表中的每个元素用逗号分隔，数组元素可以是任意类型的数据（包括其他数组），数组的定义

语法：

var arr=["happy",12,45.6];

每个数组变量都有一个length属性，表示该数组中元素的个数

定义一个数组变量后，就可以使用“数组变量名[索引号]”的格式来访问每个数组元素

数组列表中的第一个元素的索引号为0，其后的每个元素的索引号依次递增，最后的元素索引为数组的长度-1

如果数组元素本身是一个数组，那么这个元素称为子数组，可以使用“数组变量名[子数组索引号][子数组中的元素索引号]”的格式来访问子数组中的元素

示例：数组列表的用法，遍历数组列表中的元素

<body>
     <script type="text/javascript">
	var arr=[' 白色',' 紫色',' 橙色',' 红色'];
	for(var i=0; i<arr.length;i++) {
	     document.write(arr[i]+"<br/>");
	}
     </script>
</body>

数组元素的下标不仅可以是数字，还可以是文本

示例：使用数组文本下标的方式来获取数组中的元素

<body>
     <script type="text/javascript">
	var arr=[]; // 声明数组变量
	arr[' 暖色调']=[' 红色',' 橙色',' 黄色'];
	arr[' 冷色调']=[' 绿色',' 青色',' 蓝色'];
	document.write("<h2>");
	// 输出冷色调的第3 种颜色
	document.write(arr[' 冷色调'][2]);
	document.write("</h2>");
     </script>
</body>

2、Array

• JavaScript 中提供了一个名为Array 的内部对象，可用它来创建数组。通过调用Array 对象的各种方法，可以方便地对数组进行排序、删除和合并等操作
• Array 对象创建数组常用的3种方式

语法：

var arr=new Array()      //数组初始元素个数为0
var arr=new Array(4); //创建具有指定大小的Array 对象
var arr=new Array(1,2,3); //用指定的元素列表去初始化Array 对象，数组的长度是设置的元素的数目

5.3.2 String对象

当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用String 对象的属性和方法

常用属性：length

常用方法

方法	描述
charAt()	返回字符串对象中指定索引处的字符，索引从0 开始，如"Hello World".charAt(3)，返回字符"l"
indexOf()	返回某个子字符串在目标字符串中首次出现的位置，如"Hello World".indexOf("a")，返回-1，在目标字符串中没有子字符串"a"，故返回-1
substr()	从指定索引位置开始截取指定长度的字符串， 如"Hello World".substr(2,3)，返回"llo"。第一个参数表示从索引为2 的字符开始截取，即"l"，第二个参数表示截取的长度
substring()	返回指定索引范围内的字符串， 如"Hello World".substring(2,3)，返回"l"，返回索引2和3 间的字符串，并且包括索引2 对应的字符，不包括索引3 对应的字符
toLowerCase()	将字符串转化为小写
toUpperCase()	将字符串转化为大写，如"Hello World".toUpperCase()，返回" HELLO WORLD"
split()	返回按照指定分隔符拆分的若干子字符串数组，如var arr="hello,world".split(","); arr 是数组变量，其中第一个元素是"hello"，第二个元素是"world"

示例：验证用户输入的电子邮箱和密码是否合法

function $(id) {
     // 获取HTML 页面中指定id 的元素
     return document.getElementById(id);     }
function check() {
     if(checkEmail() && checkPwd()) {
	return true;
     }
     return false;     }
function checkEmail() {
     var email = $("email").value;
     var obj=$("span_email");
     obj.innerHTML="";
     if(email=="") {
	obj.innerHTML="Email 地址不能为空";
     	return false;     }
     if(email.indexOf("@")==-1) {
	obj.innerHTML="Email 地址格式不正确，必须包含@";
	return false;    }

if(email.indexOf(".")==-1) {
	obj.innerHTML="Email 地址格式不正确，必须包含.";
	return false;    }
     return true;
}
function checkPwd() {
     var pwd = $("pwd").value;
     var obj = $("span_pwd");
     obj.innerHTML="";
     if(pwd=="") {
              obj.innerHTML="密码不能为空";//使用innerHTML 属性设置标签中的内容
              return false;    }
     if(pwd.length<6) {
              obj.innerHTML=" 密码必须等于或大于6 个字符";
              return false;    }
     return true;}

5.4 对象的创建及常用语句

5.4.1 创建对象

类（class）是一个模板，模板描述了本类中所有对象共同的属性和行为

定义JavaScript 类，需要编写一个函数，函数名为对象的类名，在函数体中定义属性和方法，即JavaScript 中的函数也是对象

用function 创建类时，要求属性和方法必须使用this 关键字来引用，表示当前类的实例。

示例：使用编写函数的方式创建类

<script type="text/javascript">
      // 创建Book 类型
      function Book(name,author,price) {
     	this.name=name;
	this.author=author;
	this.price=price;
	this.show = function() {
	      alert(" 书名："+this.name+"\n 作者："+this.author+"\n 价格："+this.price);
	};
      }
      var book=new Book("《钢铁是怎样炼成的》","奥斯特洛夫斯基","26.00 元");
      book.show();
</script>

5.4.2 对象常用语句

1、with 语句

在一段连续的程序代码中，在with 关键字后的小括号中写出这个对象的名称，就可以在其后大括号里的执行语句中直接引用该对象的属性名或方法名，省略对象实例名和点（.）

语法：

with( 对象名称){
      执行语句块
}

示例：

<script type="text/javascript">
      function showTime() {
	var time = new Date();
	with(time) {
	     var hh=getHours(); // 获取小时
	     var mm=getMinutes(); // 获取分钟
	     var ss=getSeconds(); // 获取秒
      	}
      	document.getElementById("time").innerHTML=hh+":"+mm+":"+ss;
      }
      window.setInterval("showTime()",500);
      window.onload=showTime;
</script>
<span id="time"></span>

2、for…in 语句

对某个对象的所有属性进行循环操作，它将某个对象的所有属性名称逐一赋值给一个变量，不需要事先知道对象属性的个数

根据索引取出每个数组元素

语法：

for( 变量 in 对象){
      执行语句
}

示例：使用for…in 语句遍历对象属性

<script type="text/javascript">
      function Person() {
	this.name=" 张三";
	this.age="24";
	this.gender=" 男";
      }
      var person = new Person();
      var info="";
      for(var prop in person) {
	info +=prop+"<br/>";
      }
      document.write(info);
</script>

示例：使用for…in 语句根据索引取出数组元素

<script type="text/javascript">
      var arr=[" 欧冠"," 英超"," 意甲"," 西甲"]
      for(var i in arr){
	document.write(arr[i]);
      }
</script>

5.4.3 实践练习

总结：

通过创建Date对象，可以获取计算机中的时间

在本地创建Image对象，可以实现图像缓冲技术

使用Math对象进行数学运算 用数组列表或者Array对象创建数组后，可以使用“数组变量名[索引号]”的格式来访问每个数组元素

每个单引号或双引号标注的内容，就是一个String对象实例

• charAt()：返回字符串对象中指定索引处的字符
• indexOf()：返回某个子字符串在目标字符串中首次出现的位置
• substr()：从指定索引位置开始截取指定长度的字符串
• substring()：返回指定索引范围内的字符串