2019-03-25第4,5次课武JavaScript对象

JavaScript对象
本章目标
(1) . 会使用getElementById( )方法访问DOM元素
(2) . 会使用getElementsByName( )方法访问DOM元素
(3) . 会使用getElementsByTagName( )方法访问DOM元素
(4) . 会使用定时函数和Date对象制作时钟特效
一、 window对象
(一) BOM对象

1. 描述
   浏览器对象模型（Browser Object Model），它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象可以实现HTML的交互，它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。

2. BOM的分层结构

   window对象是整个BOM的核心，在浏览器中打开网页，首先看到的浏览器窗口，即顶层的windows对象，其次是document，它里面包括超链接、表单、锚等。
   除了document对象以外，windows下还有二个重要对象：地址对象（location）和历史对象（history）

3. BOM可实现的功能
   (1) . 弹出新的浏览器窗口
   (2) . 移动、关闭浏览器窗口以及调整窗口的大小
   (3) . 页面的前进、后退
   (二) windows对象的常用属性

4. 属性列表
   属性名称 说 明
   history 有关客户访问过的URL的信息
   location 有关当前 URL 的信息

5. 语法
   window.属性名= "属性值"

6. 案例演示:常见属性
   <a href="javascript:location.href='flower.html'">查看鲜花详情</a>
   <a href="javascript:location.reload()">刷新本页</a>
   <a href="javascript:history.back()">返回主页面</a>
   (三) Winows对象的常用方法

7. 方法列表
   方法名称 说 明
   prompt( ) 显示可提示用户输入的对话框
   alert( ) 显示带有一个提示信息和一个确定按钮的警示框
   confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
   close( ) 关闭浏览器窗口
   open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
   setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
   setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式

8. 语法
   window.方法名
   说明：
   因为window对象是全局对象，所以在使用window对象的属性和方法，window可以省略。

9. confirm()方法：弹出一个对象框
   语法
   confirm("对话框中显示的纯文本")
   confirm()与alert ()、 prompt()区别
   alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
   prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
   confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
   演示案例
   <script type="text/javascript">
   var flag=confirm("确认要删除此条信息吗？");
   if(flag==true)
   alert("删除成功！");
   else
   alert("你取消了删除");
   </script>

10. open方法
    语法
    window.open("弹出窗口的url","窗口名称","窗口特征”)
    语法说明【了解这些属性即可】
    属性名称 说 明
    height、width 窗口文档显示区的高度、宽度。以像素计
    left、top 窗口的x坐标、y坐标。以像素计
    toolbar=yes | no |1 | 0 是否显示浏览器的工具栏。黙认是yes
    scrollbars=yes | no |1 | 0 是否显示滚动条。黙认是yes
    location=yes | no |1 | 0 是否显示地址地段。黙认是yes
    status=yes | no |1 | 0 是否添加状态栏。黙认是yes
    menubar=yes | no |1 | 0 是否显示菜单栏。黙认是yes
    resizable=yes | no |1 | 0 窗口是否可调节尺寸。黙认是yes
    titlebar=yes | no |1 | 0 是否显示标题栏。黙认是yes
    fullscreen=yes | no |1 | 0 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式
    案例演示：window对象操作窗口
    window.open("adv.html",""," height=380,width=320,toolbar=0, scrollbars=0, location=0,status=0,menubar=0,resizable=0 ");
    (四) 常用的事件

11. 事件列表
    名称 说 明
    onload 一个页面或一幅图像完成加载
    onmouseover 鼠标移到某元素之上
    onlick 当用户单击某个对象时调用的事件句柄
    onkeydown 某个键盘按键被 按下
    onchange 域的内容被改变
    (五) 课堂练习：模拟简易购物车页面

12. 需求说明
    (1) . 打开页面时，弹出广告页面，并且此页面可实现关闭窗口功能
    (2) . 购物车页面可实现全屏显示
    (3) . 提交订单页面时，弹出确认窗口

13. 效果图

(六) 课后练习：制作简易的当当购物车页面

1. 需求说明
   单击“半闭”按钮时，关闭当前页面购物车页面
   单击“移入收藏”弹出收藏提示
   单击“删除”弹出确认删除提示
   单击“结算”按钮，弹出结算信息页面窗口
2. 效果

二、 History对象与location对象
(一) history对象

1. 描述
   history对象提供用户最浏览过的URL列表。但出于隐私的原因，history对象不再允许脚本访问已经访问过的实际URL，可以使用history对象提供的、逐个返回访问过的页面的方法。
2. history对象的方法
   名称 说 明
   back() 加载 history 对象列表中的前一个URL
   forward() 加载 history 对象列表中的下一个URL
   go() 加载 history 对象列表中的某个具体URL

(二) location对象

1. 描述
   location对象提供当前页面的URL信息，并且可以重新装载当前页面或载入新页面。
2. 方法和属性
   常用属性
   名称 说 明
   host 设置或返回主机名和当前URL的端口号
   hostname 设置或返回当前URL的主机名
   href 设置或返回完整的URL
   常用方法
   名称 说 明
   Reload 重新加载当前文档
   Replace 用新的文档替换当前文档
   (三) 教学案例演示：鲜花
3. 效果展示

2. 核心代码
   <a href="javascript:location.href='flower.html'">查看鲜花详情</a>
   <a href="javascript:location.reload()">刷新本页</a>
   <a href="javascript:history.back()">返回主页面</a>
   (四) 课后练习
3. 查看一年四季的变化
   需求说明
   (1) . 制作查看一年四季变化的主页面
   (2) . 主页面实现链接到其他页面及刷新本页功能
   (3) . 其他页面实现前进、后退和链接到其他页面功能
   效果

三、 document对象
document对象既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素。
本节主要学习document对象的常用属性和方法。
(一) document对象的常用属性

1. 常用属性
   名称 说 明
   referrer 返回载入当前文档的URL
   URL 返回当前文档的URL
2. 语法
   document.referrer
   document.URL
3. 语法说明
   document.referre:当前文档如果不是通过超链接访问，则document.referrer的值为null.
4. 教学案例演示：领奖【判断页面来源并跳转】
   需求说明
   (1) . 页面是否是链接进入
   (2) . 自动跳转到登录页面
   效果图

核心代码
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动
跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
(二) document对象的常用方法

1. 常用方法
   名称 说 明
   getElementById() 返回对拥有指定id的第一个对象的引用
   getElementsByName() 返回带有指定名称的对象的集合
   getElementsByTagName() 返回带有指定标签名的对象的集合
   write() 向文档写文本、HTML表达式或JavaScript代码
2. 方法说明
   getElementById()
   一般用于访问Div、图片、表单元素、网页标签等。但要求访问对象的ID是唯一的。
   getElementByName()
   此方法与上个方法类似，但它访问元素name属性，由于一个文档中的name属性可能不唯一，因此getElementByName()方法一般用于访问一组相同name属性的元素，如具胡相同name属性的单选按钮、复选框等。
   getElementByTagName
   上方法是按标签来访问页面元素的，一般用于访问一组相同的元素，如一组<input>、一组图片等。
3. 教学案例演示：document对象常用方法的使用
   演示内容
   (1) . 动态改变层、标签中的内容
   (2) . 访问相同name的元素
   (3) . 访问相同标签的元素
   效果

说明
innerHTML是几科所有HTML元素都有的属性，它是一个字符串，用来设置或获取当前对象的开始标签和结束标签之间的HTML。
(三) 课后练习：复选框的全选/全不选的效果
分析
(1) . 使用getElementsByName()方法访问同名复选框
(2) . 将“全选”复选框的checked属性值赋值给每个复选框的checked属性
效果

参考代码
function check(){
var oInput=document.getElementsByName("product");
for (var i=0;i<oInput.length;i++)
oInput[i].checked=document.getElementById("all").checked;
}

四、 JavaScript内置对象
在JS中，系统的内容对象有很多，比如String对象、Array对象、Date对象、Math对象等。
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
在这一节，我们重点介绍Date对象和Math对象.
(一) Date对象

1. 创建日期对象语法
   var 日期实例 = new Date();
   表示创建一个当前日期和时间的对象
2. Date对象常用方法
   方法 说 明
   getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间
   getDay() 返回 Date 对象的星期中的每一天，其值介于0～6之间
   getHours() 返回 Date 对象的小时数，其值介于0～23之间
   getMinutes() 返回 Date 对象的分钟数，其值介于0～59之间
   getSeconds() 返回 Date 对象的秒数，其值介于0～59之间
   getMonth() 返回 Date 对象的月份，其值介于0～11之间
   getFullYear() 返回 Date 对象的年份，其值为4位数
   getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
3. 教学案例演示：时钟特效
   实现效果

核心代码
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
/设置div的内容为当前时间/
document.getElementById("myclock").innerHTML="<h1>现在是:"+hh +":"+mm+": "+ss+"</h1>";
}
问题
制作的时钟特效示例中，时间为什么不改变？
(二) Math对象

1. 描述
   Math对象提供了许多与数学相关的功能，它是js的全局对象，不需要创建，直接作象使用就可以调用其属性和方法。
2. Math的常用方法
   方法 说 明 示例
   ceil() 对数进行上舍入 Math.ceil(25.5);返回26
   Math.ceil(-25.5);返回-25
   floor() 对数进行下舍入 Math.floor(25.5);返回25
   Math.floor(-25.5);返回-26
   round() 把数四舍五入为最接近的数 Math.round(25.5);返回26
   Math.round(-25.5);返回-26
   random() 返回0~1之间的随机数 Math.random();例如：0.6273608814137365
3. 教学案例演示
   如何实现返回的整数范围为2~99？
   效果图

核心代码
var iNum = Math.floor(Math.random()*98+2);
选择颜色
效果图

核心代码
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
五、 定时函数
在前面的演示案例中，时间是静止的，不能动态更新，若要像电子表一样不停地动态改变时间，则需要使用将要学习的定时函数。
js中提供了两个定时函数setTimeout()和setInterval()
清除timeout的两个函数：clearTimeut和clearInterval()
(一) setTimeOut

1. 描述
   用于在指定睥毫秒后调用函数或计算表达式。
2. 语法
   setTimeout(“调用的函数名称”,等待的毫秒数);
3. 教学案例演示：每隔3秒弹出一个对话框
   需求说明
   点击按钮后，需要等待三秒后，才弹出对话框。
   实现效果

核心代码
function timer(){
var t =setTimeout("alert('3 seconds')",3000);
}
(二) setInterval()

1. 描述
   此函数可以按照指定的周期（以毫秒为计）来调用函数或计算表达式。
2. 语法格式
   setInterval(“调用的函数名称”，周期性调用函数之间间隔的毫秒数)
3. setInterval()和setTimeout()的区别
   setTimeout()只执行一次函数，如果要多次调用函数，则需要使用setInterval()或者让被调用的函数再调用setTimeout().
4. 教学案例演示：让时钟动起来
   核心代码
   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <title>时钟动起来</title>
   <script type="text/javascript">
   function disptime(){
   var today = new Date(); //获得当前时间
   var hh = today.getHours(); //获得小时、分钟、秒
   var mm = today.getMinutes();//获得分钟
   var ss = today.getSeconds();//获得秒
   /设置div的内容为当前时间/
   document.getElementById("myclock").innerHTML="<h1>现在是:"+hh +":"+mm+": "+ss+"</h1>";
   }
   var myTime=setInterval("disptime()",1000);
   </script>
   </head>
   <body onload="disptime()">
   <div id="myclock"></div>
   </body>
   </html>
   (三) clearTimeout()和clearInterval()
5. 描述及语法
   clearTimeout()函数用来清除由setTimeout函数设置的timeout.
   clearTimeout(setTimeOut()返回的ID值)
   示例
   var myTime＝setTimeout("disptime() ", 1000 );
   clearTimeout(myTime)；
   clearInterval()函数用来清除由setInterval()函数设置的timeout
   clearInterval(setInterval()返回的ID值)
   示例
   var myTime＝setInterval("disptime() ", 1000 );
   clearInterval(myTime)；
6. 教学案例演示：清除时钟特效
   参考代码
   function stop(){
   clearInterval(myTime);
   }
   <input type="button" value="停止" onclick="stop()" />
   (四) 课堂训练：模拟病毒效果

(五) 课后作业：制作12进制的时钟特效