网页设计实战之JavaScript(8) --JS的内置对象（Date、RegExp、Error、Array、Document、Window）

一、Date对象

Date对象 用于处理日期和时间。

1、创建 Date 对象

通过 new 关键词来定义 Date 对象。Date 对象会自动把当前日期和时间保存为其初始值。

//四种方式初始化日期：【接受不同参数】
new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
//参数：上面的参数大多数都是可选的，默认为0。

(1)、 默认参数→0

new Date()：取当前日期和时间

(2)、 参数→毫秒数

new Date(milliseconds)：从1970年1月1日00:00:00 UTC开始计算的毫秒数。如果将Unix时间戳作为参数，必须将Unix时间戳乘以1000。

(3)、 参数→日期字符串

new Date(dateString)：一个日期字符串，返回所对应的时间。所有可以被Date.parse()方法解析的日期字符串，都可以当作Date对象的参数

(3)、 参数→年、月、日、小时、分钟、秒和毫秒year, month, day, hours, minutes, seconds, milliseconds）：对应的年、月、日、小时、分钟、秒和毫秒。

注：
至少需要指定两个参数（年和月），其他参数都是可选的，默认为0。若只有一个参数，Date对象会将其解释为毫秒数。

2、常用方法

（1)、get类：

getTime(): 返回实例对象当前时间距离1970年1月1日00:00:00对应的毫秒数
getFullYear(): 返回调用这个方法时，当前或指定日期的年份（四位年份）
getMonth(): 返回月份，（0表示1月，11表示12月）调用这个方法时，当前或指定日期的月份
getDate(): 返回日（号），调用这个方法时，当前或指定日期的月份中的几号
getDay(): 返回星期，周日为0，周一为1，以此类推（0-6）
getHours(): 返回小时（0-23）
getMinutes(): 返回分钟（0-59）
getSeconds(): 返回秒（0-59）
getMilliseconds(): 返回毫秒（0-999）

（2)、set类：

etTime(): 以毫秒设置 Date 对象。
setFullYear(): 设置年份。
setMonth(month,day): 设置月份。可用于设置月份中的某一天。
setDate(): 设置一个月的某一天。
setHours(hour,min,sec,millisec): 设置指定的时间的小时字段。该方法可用于设置分钟，秒以及毫秒数。
setMinutes(min,sec,millisec): 用于设置指定时间的分钟字段。该方法同样可用于设置秒数与毫秒数。
setSeconds(sec,millisec): 用于设置日期对象的秒字段。可以用于设置毫秒数。
setMilliseconds(): 用于设置指定时间的毫秒字段。（0-999）

（3)、转换为字符串

toString()： 把 Date 对象转换为字符串
toDateString()： 返回日期的字符串形式
toLocaleDateString(): 返回一个字符串，代表日期的当地写法
toLocaleTimeString(): 返回一个字符串，代表时间的当地写法

（4)、Date.now()

Date.now(): 返回当前距离1970年1月1日00:00:00的毫秒数

（5)、parse(string)

parse()：解析日期字符串，返回距离1970年1月1日 00:00:00的毫秒数.

<script type="text/javascript">
   function countTime() {
       //获取当前时间
       var date = new Date();
       var now = date.getTime();
       console.log(date,"=====",now);
       //设置截止时间
       var str="2018/12/18 16:50:03";
       var endDate = new Date(str);
       var end = endDate.getTime();

       console.log(endDate,"=====",end);
       //时间差
       var timeGap = end-now;
       //定义变量 d,h,m,s保存倒计时的时间
       var d,h,m,s;
       if (timeGap>=0) {
           d = Math.floor(timeGap/1000/60/60/24);
           h = Math.floor(timeGap/1000/60/60%24);
           m = Math.floor(timeGap/1000/60%60);
           s = Math.floor(timeGap/1000%60);
           //递归每秒调用countTime方法，显示动态时间效果
           setTimeout(countTime,1000);//计时器
       }
       else {
           d = 0;
           h = 0;
           m = 0;
           s = 0;
       }
       //将倒计时赋值到div中
       document.getElementById("dayDate").innerHTML = d+"天";
       document.getElementById("hourDate").innerHTML = h+"时";
       document.getElementById("minuteDate").innerHTML = m+"分";
       document.getElementById("secondDate").innerHTML = s+"秒";
   }
</script>

二、RegExp对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

• 直接量语法：/pattern/attributes
• 创建RegExp对象的语法：new RegExp(pattern, attributes);
  参数:
• 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
• 参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、不区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
• 返回值
  一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
  如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

1、正则表达式字面量与使用构造函数的场景比较：

• 正则表达式字面量在脚本加载后编译。若你的正则表达式是常量，使用这种方式可以获得更好的性能。
• 使用构造函数，提供了对正则表达式运行时的编译。当你知道正则表达式的模式会发生改变， 或者你事先并不了解它的模式或者是从其他地方（比如用户的输入），得到的代码这时比较适合用构造函数的方式。

2、RegExp对象的使用

RegExp(pattern ， [, flags])
flags，表示匹配模式，可以是下面的几种值：
g，全局匹配
i，忽略大小写
m，开始和结束字符（^ 和 $）在多行模式工作，即：^ 和 $ 可以匹配字符串中每一行的开始和结束（行是由 \n 或 \r 分割的），而不只是整个输入字符串的最开始和最末尾处

var str="Every man in the world! Every woman on earth!";

patt=/man/g;
str2=str.replace(patt, "person");
console.log(str2);	//Every person in the world! Every woperson on earth!

var str = "hello Itbilu.com"; 
var patt = new RegExp("itbilu","ig");
var result = patt.exec(str);

console.log(result);  // [ 'Itbilu', index: 6, input: 'hello Itbilu.com' ]
console.log(result[0]); //Itbilu
console.log(result.index); // 6

(1)、方括号

方括号用于查找某个范围内的字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red｜blue｜green)	查找任何指定的选项。

(2)、元字符

元字符是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

(3)、量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

(4)、RegExp 对象属性

属性	描述
global	RegExp 对象是否具有标志 g。
ignoreCase	RegExp 对象是否具有标志 i。
lastIndex	一个整数，标示开始下一次匹配的字符位置。
multiline	RegExp 对象是否具有标志 m。
source	正则表达式的源文本。

(5)、RegExp 对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

(6)、支持正则表达式的 String 对象的方法

方法	描述
search	检索与正则表达式相匹配的值。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

三、Error对象

1、概念

error是指程序中的非正常运行状态，在其他编程语言中称为“异常”或“错误”，解释器会为每个错误情形创建并抛出一个Error对象，其中包含错误的描述信息；
ECMAScript定义了六种类型的错误，除此之外，还可以使用Error构造方法创建自定义的Error对象，并使用throw语句抛出该对象；
六种错误：

• 1）ReferenceError：引用错误，要用的东西没找到；
• 2）TypeError：类型错误，错误的调用了对象的方法；
• 3）RangeError：范围错误，专指参数超范围；
• 4）SyntaxError：语法写错了；
• 5）EvalError：eval()方法错误的使用；
• 6）URIError：URI地址错误；

2、错误处理(捕捉)

即使程序发生错误，也保证不异常中断的机制.
try{
// 可能发生错误的代码
}catch(err){
// 只有发生错误时才执行的代码
}finally{
// 无论是否出错，肯定都要执行的代码
}

使用要点：
1）使用try包裹的代码，即使不出错，效率也比不用try包裹的代码低；
2）在try中，尽量少的包含可能出错的代码；
3）无法提前预知错误类型的错误，必须用try…catch…捕获，如果已经提前预知错误的类型，就用if…else…来代替try…catch，除掉错误预知的这个前提，if…else…的用法和try…catch…的用法是基本相同的，且if…else…的可读性比try…catch…更强，语句理解能力也更好，开发人员与用户更加倾向于使用if…else…，但是如果无法判断语句是否正确的话，使用try…catch…会更加保险；
4）finally可以省略；

  // if...else...
   function err(a) {
      if (!isNaN(a)) {
        console.log('你输入的数字是：' + a);
      } else {
        throw new Error('你输入的是非数字，请重新输入！')
      }
    }
    var a = prompt('请输入一位数字：');
    err(a);    

四、Array对象

数组是值的有序集合。每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。JavaScript数组是无类型：数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。

1、定义方式

var names = new Array(“张三”, “李四”, “王五”);
var names = [“张三”, “李四”, “王五”];

2、属性length

length：表示数组内的元素长度。
var names = [“张三”, “李四”, “王五”];
console.log(names.length);

3、实例方法

常用方法：

• unshift() ：在数组头部插入元素

• shift() ：移除并返回数组的第一个元素

• push() ：在数组尾部插入元素

• pop() ：移除并返回数组的最后一个元素

• concat() ：把元素衔接到数组中。不会修改原先的array,返回新的数组

• every() ：依次遍历元素，判断每个元素是否都为true

• filter() ：依次遍历元素，返回包含符合条件元素的新的数组

• forEach() ：依次遍历元素，执行指定的函数；无返回值

• indexOf() ：在数组中查找匹配元素。若不存在匹配的元素时，就返回-1。查找的时候使用"==="运算符，所以要区分1和’1’ .

• join() ：将数组中所有元素通过一个分隔符拼接为一个字符串

• lastIndexOf ：在数组中反向查找匹配元素。若不存在匹配的元素时，就返回-1。查找的时候使用"==="运算符，所以要区分1和’1’

• map() ：依次遍历并计算每个元素，返回计算好的元素的数组

• slice(startIndex,endIndex) ：返回数组的一部分

• sort(opt_orderFunc) ：按一定的规则进行排序

• splice() ：插入、删除数组元素

• toString() ：将数组中所有元素通过一个英文逗号’,'拼接为一个字符串

• unshift() ：在数组头部插入元素

• Array.isArray() ：判断对象是否为数组

var demoArray = ['a', 'b', 'c'];
var demoArray2 = demoArray.concat('e');
var demoArray = [1, 2, 3];
var rs = demoArray.every(function (value, index, self) {
    return value > 0;
});
var rs = demoArray.filter(function (value, index, self) {
    return value > 0;
});
demoArray.forEach(function (value, index, self) {
    console.log(value); // => 依次输出：1  2  3
});

['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].lastIndexOf('a'); // => 0
demoArray.map(function (value, index, self) {
    return value * 2;
}); // => [2, 4, 6]
var demoArray = ['a', 'b', 'c'];
demoArray.pop(); // => c
demoArray.push('d'); // => 4, demoArray ： ['a', 'b',  'd']
demoArray.reverse(); // d,b,a
[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] ：截取序号0到序号3(序号4的前一个)的元素
[1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] ：这里都元素都被转换为字符，11的字符在2前
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 2); // 删除从序号从0开始的2个元素，返回包含删除元素的数组：['a', 'b']
[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5'
demoArray.unshift('a'); // => demoArray:['a']
Array.isArray(['a', 'b', 'c']); // => true
for (var i = 0, length = demoArray.length; i < length; i++) {
    console.log(demoArray[i]); // => 逐个输出数组内的元素
}
var demoArrayB = demoArrayA; // 浅度复制:把数组A 赋值给数组B 
var demoArrayB = demoArrayA.concat(); // 使用concat()方法，返回新的数组

五、Document对象

在浏览器中，与用户进行数据交换都是通过客户端的javascript代码来实现的，而完成这些交互工作大多数是document对象及其部件进行的，因此document对象是一个比较重要的对象。
document对象是文档的根节点，window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，可以直接调用。

document.childNodes属性返回该对象的所有子节点。对于HTML文档来说，document对象一般有两个子节点。

• 第一个子节点是document.doctype，表示文档类型节点（DocumentType）。对于HTML5文档来说，该节点就代表。

• 第二个子节点是document.documentElement，表示元素节点（Element），代表：。

1、document 对象的属性

属性	说明
document.title	设置文档标题等价于HTML的标签
document.bgColor	设置页面背景色
document.linkColor	未点击过的链接颜色
document.alinkColor	激活链接(焦点在此链接上)的颜色
document.fgColor	设置前景色(文本颜色)
document.vlinkColor	已点击过的链接颜色
document.URL	设置URL属性从而在同一窗口打开另一网
document.fileCreatedDate	文件建立日期，只读属性
document.fileModifiedDate	文件修改日期，只读属性
document.fileSize	文件大小，只读属性
document.cookie	设置和读出cookie
document.charset	设置字符集 简体中文:gb2312

指向特定元素集合的属性
document.all ：文档中所有的元素，Firefox不支持该属性。
document.forms ：所有的form元素。
document.images：所有的img元素。
document.links：所有的a元素。
document.scripts：所有的script元素。
document.styleSheets：所有的link或者style元素。

2、对象方法：

方法	说明
document.write()	动态向页面写入内容
document.createElement(Tag)	创建一个html标签对象
document.getElementById(ID)	获得指定ID值的对象
document.getElementsByTagName(tagname)	获得指定标签名的对象
document.getElementsByName(Name)	获得指定Name值的对象
document.getElementsByClassName(classname)	获得指定类名的对象（html5 API）

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title></title>
    <script type="text/javascript">
       function btnClick1() {
            var txt = document.getElementById("tb1");
          alert(txt.value);
            //alert(tb1.value);  //不推荐tb1.value这种方式
        }
         function btnClick2() {
             var txt = document.getElementById("tb2");
            alert(txt.value);
             //alert(Form1.tb2.value);  //不推荐tb1.value这种方式,如果被
标签包含着，就要Form1.tb2.value取得文本框的值
         }
    </script>
 </head>
<body>
    <input type="text" id="tb1" />
    <input type="button" value="TextBox1" onclick="btnClick1()" />
    <form action="Event.htm" id="Form1">
       <input type="text" id="tb2" />
        <input type="button" value="TextBox2" onclick="btnClick2()" />   
   </form>
 </body>
 </html>

六、Window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

JavaScript中的任何一个全局函数或变量都是window的属性。
self对象与window对象完全相同，self通常用于确认就是在当前的窗体内。window、self、window.self三者是等价的。

1、window的子对象

window的主对象主要有如下几个：

• JavaScript document 对象
• JavaScript frames 对象
• JavaScript history 对象
• JavaScript location 对象
• JavaScript navigator 对象
• JavaScript screen 对象

2、Window对象常用方法

方法	描述
alert	显示包含由应用程序自定义消息的对话框。
attachEvent	将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
blur	使元素失去焦点并触发 onblur 事件。
clearInterval	使用 setInterval 方法取消先前开始的间隔事件。
clearTimeout	取消先前用 setTimeout 方法设置的超时事件。
close	关闭当前浏览器窗口或 HTML 应用程序(HTA)。
confirm	显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
createPopup	创建弹出窗口。
detachEvent	从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
e-x-e-c-Script	（此单词实际使用无中线，系统屏蔽特殊原因修改） 以给定语言执行指定的脚本。
focus	使得元素得到焦点并执行由 onfocus 事件指定的代码。
moveBy	将窗口的位置移动指定 x 和 y 偏移值。
moveTo	将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
navigate	在当前窗口中装入指定 URL。
open	打开新窗口并装入给定 URL 的文档。
print	打印与窗口关联的文档。
prompt	显示一个提示对话框，其中带有一条消息和一个输入框。
resizeBy	更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo	将窗口的大小更改为指定的宽度和高度值。
scroll	将窗口滚动到自左上角起指定的 x 和 y 偏移量。
scrollBy	将窗口滚动 x 和 y 偏移量。
scrollTo	将窗口滚动到指定的 x 和 y 偏移量。
setActive	设置对象为当前对象而不将对象置为焦点。
setInterval	每经过指定毫秒值后计算一个表达式。
setTimeout	经过指定毫秒值后计算一个表达式。
showHelp	显示帮助文件。此方法可用于 Microsoft HTML 帮助。
showModalDialog	创建一个显示指定 HTML 文档的模式对话框。
showModelessDialog	创建一个显示指定 HTML 文档的非模式对话框。

2、Window对象常用属性

属性	描述
closed	获取引用窗口是否已关闭。
defaultStatus	设置或获取要在窗口底部的状态栏上显示的缺省信息。
dialogArguments	设置或获取传递给模式对话框窗口的变量或变量数组。
dialogHeight	设置或获取模式对话框的高度。
dialogLeft	设置或获取模式对话框的左坐标。
dialogTop	设置或获取模式对话框的顶坐标。
dialogWidth	设置或获取模式对话框的宽度。
frameElement	获取在父文档中生成 window 的 frame 或 iframe 对象。
length	设置或获取集合中对象的数目。
name	设置或获取表明窗口名称的值。
offscreenBuffering	设置或获取对象在对用户可见之前是否要先在屏幕外绘制。
opener	设置或获取创建当前窗口的窗口的引用。
parent	获取对象层次中的父窗口。
returnValue	设置或获取从模式对话框返回的值。
screenLeft	获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。
screenTop	获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。
self	获取对当前窗口或框架的引用。
status	设置或获取位于窗口底部状态栏的信息。
top	获取最顶层的祖先窗口。

3、Window的事件

事件	描述
onactivate	当对象设置为活动元素时触发。
onafterprint	对象所关联的文档打印或打印预览后立即在对象上触发。
onbeforedeactivate	在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeprint	对象的关联文档打印或打印预览前在对象上触发。
onbeforeunload	在页面将要被卸载前触发。
onblur	在对象失去输入焦点时触发。
oncontrolselect	当用户将要对该对象制作一个图像、表格和任意绝对定位的元素中的控件。">控件选中区时触发。
ondeactivate	当 activeElement 从当前对象变为父文档其它对象时触发。
onerror	当对象装载过程中发生错误时触发。
onfocus	当对象获得焦点时触发。
onhelp	当用户在浏览器为当前窗口时按 F1 键时触发。
onload	在浏览器完成对象的装载后立即触发。
onmove	当对象移动时触发。
onmoveend	当对象停止移动时触发。
onmovestart	当对象开始移动时触发。
onresize	当对象的大小将要改变时触发。
onresizeend	当用户更改完控件选中区中对象的尺寸时触发。
onresizestart	当用户开始更改控件选中区中对象的尺寸时触发。
onscroll	当用户滚动对象的滚动条时触发。
onunload	在对象卸载前立即触发。