第8章-JavaScript对象

最新推荐文章于 2024-12-17 10:08:13 发布

原创最新推荐文章于 2024-12-17 10:08:13 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

《HTML+CSS3+JavaScript项目开发》笔记专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解JavaScript中的内置对象、浏览器对象、DOM对象和自定义对象，包括Math、Date、String等常用内置对象，以及BOM对象如window、location、history等的使用方法，通过实例演示如何利用这些对象进行网页开发。

一、内置对象：

认识JavaScript内置对象：

JavaScript的一个重要特点就是它是一种面向对象的语言。通过基于对象的程序设计，可以更直观、模块化和可重复使用的方式进行程序开发。

一组包含数据的属性和对属性中包含的数据进行操作的方法称为对象。例如，要设定网页的背景颜色，针对的对象就是document，所用的属性名是bgcolor。例如，document.bgcolor="blue"，就是设置背景的颜色为蓝色。

JavaScript中支持的对象主要有以下4种：

1）内置对象

JavaScript将一些常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象。

常用内置对象：

对象名	描述
Math	数学对象，提供了进行所有基本数学计算的功能和常量的属性和方法
Date	日期对象，提供了获取、设置日期和时间的属性和方法
String	字符串对象，提供了对字符串进行处理的属性和方法
Number	原始数值的包装对象
Array	数组对象，用来描述数组并提供数组处理的

2）浏览器对象

a.网页和浏览器本身的各种元素在JavaScript程序中的体现。

b.它使JavaScript可以定位、改变内容以及展示HTML页面的所有元素。

3）DOM对象

HTML DOM对象定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。

4）自定义对象

JavaScript允许用户自定义对象进行使用。

项目实战：数字电子时钟

<html>
<head>
<meta charset="utf-8">
<script>
function setTime(){
var d=new Date();
timer.innerHTML="<i>"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+"</i>";
}
</script>
</head>
<body>
<h1 id="timer">00:00:00</h1>
<script>
setInterval("setTime()",1000);
</script>
</body>
</html>

注：

setInterval()方法是JavaScript的BOM对象中的window对象的方法，作用是按指定周期(单位毫秒)调用方法或计算表达式。

使用innerHTML属性更新id为"timer"的标签的标签体内容。

innerHTML属性是所有DOM元素对象拥有的属性，其作用是设置或返回元素从起始标签到结束标签之间的HTML。

二、BOM对象：

1.认识BOM对象

BOM是Browser Object Model的缩写，简称浏览器对象模型。在JavaScript中，浏览器对象用于访问当前页面以及浏览器本身的信息。

BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通信，因此其核心对象是window。BOM是一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

常用浏览器对象主要有6种：

1).窗口对象

窗口(window)对象处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性。

2).位置对象

位置(location)对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态对象。

3).历史对象

历史(history)对象提供了与历史清单有关的信息。

4).文档对象

文档(document)对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。可以使用document作为访问HTML DOM对象的入口。

5).导航对象

导航(navigator)对象通常用于检测浏览器与操作系统的版本。

6).屏幕对象

屏幕(screen)对象常用于获取用户屏幕信息。

BOM层次结构模型如下图：

浏览器对象的引用方式主要有以下3种：

1)对应于文档对象模型中的层次关系，JavaScript对浏览器对象的引用是逐层引用。

例如：引用forms对象时，使用window.document.forms。

2)通过对象的name属性引用。

例如：引用一个name属性是myform中的表单对象，使用window.document.myform。

3)数组型浏览器对象的引用。

在文档对象模型中，有些对象属于数组型对象，如document对象下一层的images、links、forms等对象，引用这种数组对象时，可以使用对象在数组中的位置(下标)引用。例如：window.document.forms[0]表示引用文档中的第一个表单。

另外，window对象作为文档对象模型中的最顶层对象，JavaScript认为它是默认的，因此可以省略不写。如window.document.forms可以简写成document.forms。

2.window对象

window对象也就是窗口对象，代表当前浏览器窗口。window对象是每个窗口或者框的顶层对象，而document、location及history是它的子对象。

window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口，根本不需要特殊的语法，可以把那个窗口的属性作为全局变量使用。例如，可以只写document，而不必写window.document；同样，可以把当前窗口对象的方法当作函数使用，如只写alert()，而不必写window.alert()。

一般来说，window对象的方法都是对浏览器窗口或框架进行某种操作。

3.history对象

history对象是window对象的一个属性，用来存储客户端最近访问过的网页清单。

例如，创建一个页面上的后退按钮：

<body>
    <input type="button" value="返回" onClick="history.back()">
</body>

history.back()方法可加载历史列表中的前一个URL(如果存在)。调用该方法的效果等价于调用history.go(-1)。

4.location对象

location对象提供了操作当前打开的窗口的URL的方法和属性。

window.location对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。

location.href属性返回当前页面的URL，也可以为其重新赋值，新值为导航到的新网页。

例如，创建一个加载百度页面的按钮：

<input type="button" value="返回" onClick="location.href='http://www.baidu.com'">

5.screen对象

screen对象包含有关用户屏幕的信息。

document.write(window.screen.height);//768
document.write(window.screen.availHeight);//738

顾名思义，availHeight就是计算机屏幕的可用高度，即计算机减掉顶部工具栏与底部工具栏的高度。

738 = 768(计算机屏幕) - 30(底部任务栏)。

6.document对象

document对象表示每个载入浏览器的HTML文档。

项目实战：打开新窗口

<html>
<head>
<meta charset="utf-8">
<script language="javascript">
var w;
function createwindow(){
w=window.open("数字式电子时钟.html","mywindow","menubar=no,height=200,width=300,resizable=no","true");
}
function closewindow(){
w.close();
}
</script>
</head>
<body>
<form>
<input type="button" value="创建窗口" onclick="createwindow()">
<input type="button" value="关闭窗口" onclick="closewindow()">
</form>
</body>