javascript

位置:IT落伍者 >> javascript >> 浏览文章

JavaScript教程--从入门到精通(6)


发布日期:2024年04月14日
 
JavaScript教程--从入门到精通(6)
JavaScript对象系统的使用

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

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

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

浏览器对象(Navigator)

提供有关浏览器的信息

窗口对象(Windows)

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

位置对象(Location)

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

历史对象(History)

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

文档对象(Document)

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

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

文档对象功能及其作用

在Navigator浏览器中document文档对象是核心是同时也是最重要的见表所示

LinksAnchor FormMethod Prop 链接对象锚对象窗体对象方法 对象

document对象

从表中可以看出document对象的主要作用就是把这些基本的元素(如linksanchor等)包装起来提供给编程人员使用从另一个角度看document对象中又是由属性和方法组成

document中三个主要的对象

在document中主要有linksanchorform等三个最重要的对象

(1)anchor锚对象

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

(2)链接links对象

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

(3)窗体(Form)对象

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

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

<Html>

<head>

</head>

<body>

<form >

<input type=text onChange=documentmyelements[]value=thisvalue; >

</form>

<form NAME=my>

<input type=text onChange=documentforms[]elements[]value=thisvalue;>

</form>

</body>

</html>

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

文档对象中的attribute属性

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

(1)链接颜色alinkcolor

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

(2)链接颜色linkcolor

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

(3)浏览过后的颜色VlinkColor

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

(4)背景颜色bgcolor

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

(5)前景颜色Fgcolor

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

文档对象的基本元素

(1)窗体属性

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

(2)锚属性anchors

该属性中包含了HTML文档的所有<A> </A>标记为Name=的语句标识所有的数目保存在documentanchorslength中

(3)链接属性links

链接属性是指在文档中<A></A>的由Href=指定的数目其链接数目保存在documentlinkslength中

范例

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

<html>

<head>

</HEAD>

<BOdy>

<Form Name=mytable>

请输入数据

<Input Type=text Name=text Value=>

</Form>

<A name=Link >链接到第一个文本</a><br>

<A name=Link >链接到第二个文本</a><br>

<A name=Link >链接到第三个文本</a><br>

<A #Link>第一锚点</a>

<A #Link>第二锚点</a>

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

<BR>

<Script Language=JavaScript>

documentwrite(文档有+documentlinkslength+个链接+<br>);

documentwrite(文档有+documentanchorslength+个锚点+<br>);

documentwrite(文档有+documentformslength+个窗体);

</script>

</body>

</HTML>

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

l

<HTML>

<HEAD>

<script Language=JavaScript>

<!

tips = new Array();

tips[]=每日一语(;

tips[]=每日一语(;

tips[]=每日一语(;

tips[]=每日一语(;

tips[]=每日一语(;

tips[]=每日一语(;

index = Mathfloor(Mathrandom() * tipslength);

documentwrite(<FONT SIZE= COLOR=DARKBLUE> + tips[index]+</FONT>);

</Script>

</HEAD>

</BODY>

</HTML>

输出结果见图所示

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

               

上一篇:javascript控制的鼠标特效

下一篇:用JavaScript实现动画效果