`
tolys
  • 浏览: 115604 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

JavaScript技术讲座-使用内部对象系统

JavaScript编程浏览器HTMLWeb 
阅读更多

使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。

一、浏览器对象层次及其主要作用

除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。

 

 

浏览器对象(Navigator)

提供有关浏览器的信息

 

 

窗口对象(Windows)

Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。

 

 

位置对象(Location)

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

 

 

历史对象(History)

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

 

 

文档对象(Document)

document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。

 

 

编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。

二、文档对象功能及其作用

在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见图6-1所示。

Links Anchor Form Method Prop
链接对象 锚对象 窗体对象 方法 对象

 

图6－1 document对象

 

从图6-1中可以看出，document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。

１、document中三个主要的对象

在document中主要有：links,anchor,form等三个最重要的对象：

（１）anchor锚对象：

anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。

（２）链接links对象

link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。

（３）窗体（Form）对象

窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。

例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。

Test6_1.htm

<Html>

<head>

</head>

<body>

<form >

<input type=text onChange="document.my.elements[0].value=this.value;" >

</form>

<form NAME="my">

<input type=text onChange="document.forms[0].elements[0].value=this.value;">

</form>

</body>

</html>

其中用了OnChnge事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms[]。其效果是一致。

２、文档对象中的attribute属性

document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：

（１）链接颜色：alinkcolor

这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。

（２）链接颜色：linkcolor

当用户使用<A Href=...> Text string </A>链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。

（３）浏览过后的颜色：VlinkColor

该属性表示的是已被浏览存储为已浏览过的链接颜色。

（４）背景颜色：bgcolor

该元素包含文档背景的颜色。

（５）前景颜色：Fgcolor

该元素包含HTML文档中文本的前景颜色。

３、文档对象的基本元素

（１）窗体属性：

窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。

（２）锚属性：anchors

该属性中，包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。

（３）链接属性：links

链接属性是指在文档中<A>...</A>的由Href=...指定的数目，其链接数目保存在document.links.length中。

三、范例

例1:下面我们通过一个例子来说明文档对象的综合应用。输出结果见图6-2所示。

Test6_2.htm

<html>

<head>

</HEAD>

<BOdy>

<Form Name="mytable">

请输入数据：

<Input Type="text" Name="text1" Value="">

</Form>

<A name="Link1" href="test31.htm">链接到第一个文本</a><br>

<A name="Link2" href="test32.htm">链接到第二个文本</a><br>

<A name="Link2" href="test33.htm">链接到第三个文本</a><br>

<A href="#Link1">第一锚点</a>

<A href="#Link2">第二锚点</a>

<A Href="#Link3">第三锚点</a>

<BR>

<Script Language="JavaScript">

document.write("文档有"+document.links.length+"个链接"+"<br>");

document.write("文档有"+document.anchors.length+"个锚点"+"<br>");

document.write("文档有"+document.forms.length+"个窗体");

</script>

</body>

</HTML>

 

 

 

 

 

 

 

图6-2

 

 

例子2：下列程序随机产生每日一语。

test6_3.html

<HTML>

<HEAD>

<script Language="JavaScript">

<!--

tips = new Array(6);

tips[0]="每日一语（1）";

tips[1]="每日一语（2）";

tips[2]="每日一语（3）";

tips[3]="每日一语（4）";

tips[4]="每日一语（5）";

tips[5]="每日一语（6）";

index = Math.floor(Math.random() * tips.length);

document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");

</Script>

</HEAD>

</BODY>

</HTML>

输出结果见图6-3所示。

 

 

 

图6-3

 

 

 

本讲主要介绍了JavaScript对象系统的使用方法，其中重点介绍了文档对象及使用。 

分享到：
| 35种网站常用Javascript技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript技术讲座

    第六讲，使用内部对象系统，探讨了JavaScript内置的对象，如Math、Date、Array等，以及如何利用它们来执行常见的任务，如数学运算、日期处理和数组操作。 第七讲，窗口及输入输出，主要涉及浏览器提供的全局对象...

    JavaScript技术讲座.chm

    "JavaScript技术讲座.chm"很可能是一个详细的JavaScript教程，以帮助学习者深入理解和掌握这种动态语言。CHM（Compiled Help Manual）是微软开发的帮助文件格式，通常用于存放电子文档，便于用户查阅和学习。 在...

    JavaScript 技术讲座

    第一讲 JavaScript语言概况 第二讲 JavaScript基本数据结构 第三讲 JavaScript程序构成 第四讲 基于对象的JavaScript语言 第五讲 创建新对象 第六讲 使用内部对象系统 第七讲 窗口及输入输出

    JavaScript简明教程

    JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言，...第六讲 使用内部对象系统 第七讲 窗口及输入输出 第八讲 WEB页面信息交互 第九讲 实现更复杂交互

    JavaScript与OOP讲座

    这是因为JavaScript的动态类型系统允许我们在运行时改变对象的类型。 7. **鸭子类型**：JavaScript遵循“鸭子类型”原则，即“如果它走起路来像鸭子，叫起来也像鸭子，那它就是鸭子”。这意味着我们关注对象的行为...

    一步步教你学会javascript脚本语言

    JavaScript技术讲座 编者按：JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、...第六讲 使用内部对象系统 第七讲 窗口及输入输出 第八讲 WEB页面信息交互 第九讲 实现更复杂交互

    SD大会精品讲座：JavaScript引擎技术

    本次讲座由盛大网络架构师、软件工程专家周爱民先生主讲，旨在深入讲解JavaScript引擎技术的相关知识。本课程不仅仅局限于Web开发领域，而是广泛地涵盖了JavaScript语言本身及其引擎技术的核心概念和发展历程。此外...

    JavaScript网页设计300例.chm )

    编者按：JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动...第六讲 使用内部对象系统 第七讲 窗口及输入输出 第八讲 WEB页面信息交互 第九讲 实现更复杂交互

    JavaScript基本教程

    JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程...第六讲 使用内部对象系统 第七讲 窗口及输入输出 第八讲 WEB页面信息交互 第九讲 实现更复杂交互

    北大青鸟javascript高级编程系列讲座(1)

    JavaScript的实现包括三个主要部分：ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）。 ECMAScript是JavaScript的核心，规定了语言的基本语法、类型、语句、关键字、保留字和运算符。它不依赖于任何特定的...

    JavaScript 引擎技术

    JavaScript引擎的实现是通过一系列优化策略来提高性能的，例如V8引擎使用了即时编译（JIT）技术，将JavaScript代码编译为机器码，提高了执行效率。此外，引擎还对垃圾回收机制进行了优化，如分代垃圾收集，以更有效...

    javaScript教程

    第六讲介绍使用内部对象系统，掌握JavaScript预定义的对象及其属性和方法；第七讲将讲述窗口及输入输出，了解如何操作浏览器窗口和处理用户输入；第八讲针对WEB页面信息交互进行讲解，提供网页间动态数据交换的技术...

    JS技术讲座，适合入门者

    JavaScript（简称JS）是一种轻量级的解释型编程语言，主要应用于网页和网络应用开发，是前端开发的核心技术之一。本讲座特别针对JS初学者，旨在帮助他们快速掌握这一重要的编程语言。 首先，JS的基本语法是讲解的...

    qt_for_mobile_slides_day_1.pdf

    - **元对象系统**：深入了解信号与槽机制、属性系统等。 - **Qt GUI**：涉及Widget、自定义Widget、事件处理、绘图与图形管线、GraphicsView、样式等方面。 - **多任务处理**：讲解进程、共享内存、线程亲和性及Qt ...

Magicbox
Global site tag (gtag.js) - Google Analytics