JavaScript教程

yueshily82 · 发表于 2006-7-7 20:59

第七讲窗口及输入输出

　　JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关
输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。

yueshily82 · 发表于 2006-7-7 20:59

一、窗口及输入输出

请看下面例子：

<HTML>

<Head>

<script languaga="JavaScript">

Var test=window.prompt("请输入数据:"

;

document.write(test+"JavaScript输入输出的例子"

;

</script>

</Head>

</HTML>

　　其中window.prompt()就是一个窗口对象的方法，其基本作用是，当装入Web页面时在屏
幕上显示一个具有“确定”和“取消”的对话框，让你输出数据。document.writle是一个文
档对象的方法，它的基本功能，是实现Web页面的输出显示。

yueshily82 · 发表于 2006-7-7 21:00

1、窗口对象

　　该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器
窗口显示的各个方面，如对话框、框架等。在使用应注意以下几点：

　该对象对应于HTML文档中的<Body>和<FrameSet>两种标识；

　onload和onunload都是窗口对象属性；

　在JavaScript脚本中可直接引用窗口对象。如：

window.alert("窗口对象输入方法"

可直接使用以下格式：

alert("窗口对象输入方法"

　

2、窗口对象的事件驱动

　　窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时
开始和停止更新文档。

3、窗口对象的方法

　　窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。

　创建一个新窗口open()

使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主
要特性和文档及窗口的命名。

　具有OK按钮的对话框

alert()方法能创建一个具有OK按钮的对话框。

　具有OK和Cancel按钮的对话框

confirm()方法为编程人员提供一个具有两个按钮的对话框。

　具有输入信息的对话框

prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下
prompt（“提示信息”，默认值）。

　

4、窗口对象中的属性

　　窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个：

（１）frames 确文档中帧的数目

frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点：

　frames属性是通过HTML标识<Frames>的顺序来引用的，它包含了一个窗口中的全部帧数。

　帧本身已是一类窗口，继承了窗口对象所有的全部属性和方法。

（２）Parent 指明当前窗口或帧的父窗口。

（３）defaultstatus:默认状态，它的值显示在窗口的状态栏中。

（４）status:包含文档窗口中帧中的当前信息。

（５）top:包括的是用以实现所有的下级窗口的窗口。

（６）window.指的是当前窗口

（７）self:引用当前窗口。

　

5、输出流及文档对象

在JavaScript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。

（１）创建新文档open()方法

　　使用document.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象
是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window. Open()
与Open()是一样的。
打开一个窗口的基本格式：

Window .open("URL","窗口名字","窗口属性"]

window属性参数是由一个字符串列表项它由逗号分隔，它指明了有关新创建窗口的属性。见表7-1所示。

表7-1

参数
设定值
含义

toolbar
yes/no
建立或不建立标准工具条

location
yes/no
建立或不建立位置输入字段

directions
yes/no
建立或不建立标准目录按钮

status
yes/no
建立或不建立状态条

menubar
yes/no
建立或不建立菜单条

scrollbar
yes/no
建立或不建立滚动条

revisable
yes/no
能否改变窗口大小

width
yes/no
确定窗口的宽度

Height
yes/no
确定窗口的高度。

　

在使用Open()方法时，需要注意以下点。

　通常浏览器窗中，总有一个文档是打开的。因而不需要为输出建立一个新文档。

　在完成对Web文档的写操作后，要使用或调用close()方法来实现对输出流的关闭。

　在使用open()来打开一个新流时，可为文档指定一个有效的文档类型，有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。

　

（２）write()、writeln()输出显示。

该方法主要用来实现在Web页面上显示输出信息。在实际使用中，需注意以下几点：

　writeln()与write()唯一不同之处在于在未尾加了一个换符。

　为了正常显示其输出信息，必须指明<pre> </Pre>标记，使之告诉编辑器。

　输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。

（３）关闭文档流close()

在实现多个文档对象中，必须使用close()来关闭一个对象后，才能打开另一个文档对象。

（４）清除文档内容clear()

使用该方法可清除已经打开文档的内容。

yueshily82 · 发表于 2006-7-7 21:01

二、简单的输入、输出例子

　　在JavaScript中可以非常方便地实现输入输出信息，并与用户进行交互。

1、JavaScript信息的输入

　　通过使用JavaScript中所提供的窗口对象方法prompt(), 就能完成信息的输入。该方法提供了最简便的信息输入方式，其基本格式如下：

Window.prompt("提示信", 预定输入信息);

　　此方法首先在浏览器窗口中弹出一个对话框, 让用户自行输入信息。一旦输入完成后，就返回用户所输入信息的值。例:

test=prompt（“请输入数据:”，”this is a JavaScript”）

　　实际上prompt()是窗口对象的一个方法。因为缺省情况下所用的对象就是window对象, 所以windows对象可以省略不写。

　

2、输出显示

　　每种语言，都必须提供信息数据的输出显示。JavaScript也是一样，它提供有几个用于信息输出显示的方法。比较常用的有window.alert()、document.write和及document.writln()方法。

１)、document.write()方法和document.writeln()方法

　　document是JavaScript中的一个对象在它中封装许多有用的方法，其中write()和writeln()就是用于将文本信息直接输出到浏览器窗口中的方法。

document.write()；

document.writeln()；

说明：

　write()和writeln()方法都是用于向浏览器窗口输出文本字串；

　二者的唯一区别就是writeln()方法自动在文本之后加入回车符。

　

２)、 window.alert()输出

　　在JavaScript为了方便信息输出，JavaScript提供了具有独立的对话框信息输出─alert()方法。
alert()方法是window对象的一个方法，因此在使用时，不需要写window窗口对象名，而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或提示用户，一旦用户按“确定”钮后，方可继续执行其他脚本程序。例:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<Script Language ="JavaScript">

alert("这是一个JavaScript测试程序"

;

</Script>

</BODY>

</HTML>

　

３)、利用输入、输出方法实现交互

　　在JavaScript中，可以利用prompt()方法和write()方法实现与Web页面用户进行交互。例下面就是一个有关实现交互的例子。

Test7_1.htm

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<Script Language="JavaScript">

<!-- Hide From Other Browsers

document.write("<H1>有关交互的例子"

;

my=prompt("请输入数据:"

;

document.write(my+"</H1>"

;

document.close();

// Stop Hiding from Other Browsers-->

</Script>

</BODY>

</HTML>

从上面程序可以看出：

　可通过write()和prompt()方法实现交互。

　在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。其中<H1>和<Br>就是HTML标识符。

yueshily82 · 发表于 2006-7-7 21:03

三、范例

下列程序演示了你进入主页所停留的时间。

test7_2.htm

<html>

<form name="myform">

<td vAlign="top" width="135">您在此停留了：

<input name="clock" size="8" value="在线时间"></td>

</form>

<script language="JavaScript">

var id, iM = 0, iS = 1;

start = new Date();

function go()

{

now = new Date();

time = (now.getTime() - start.getTime()) / 1000;

time = Math.floor( time);

iS = time % 60;

iM = Math.floor( time / 60);

if ( iS < 10)

document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";

else

document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";

id = setTimeout( "go()", 1000);

}

go();

</script>

</body>

</html>

yueshily82 · 发表于 2006-7-7 21:03

第八讲 WEB页面信息的交互

　　要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

yueshily82 · 发表于 2006-7-7 21:06

一、窗体基础知识

　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

１、什么是窗体对象

窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

<form Name=Form1>

<INPUT type=text...>

<Input type=text...>

<Inpup byne=text...>

</form>

<form Name=Form2>

<INPUT type=text...>

<Input type=text...>

</form>

　　在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。

　　窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

<Form

Name ="表的名称"

Target ="指定信息的提交窗口"

action ="接收窗体程序对应的URL"

Method =信息数据传送方式(get/post)

enctype ="窗体编码方式"

[onsubmit ="JavaScript代码"]>

</Form>

　

２、窗体对象的方法

　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：

document.mytest.submit()

　

３、窗体对象的属性

　　窗体对象中的属性主要包括以下：elements name action target encoding method.

　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：

elements[0].Mytable.elements[1]

　

４、访问窗体对象

在JavaScript中访问窗体对象可由两种方法实现：

（１）通过访问窗体

　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（２）通过数组来访问窗体

　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：

document.forms[0]

document.forms[1]

document.forms[2]...

　

５、引用窗体的先决条件

　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

yueshily82 · 发表于 2006-7-7 21:07

二、窗体中的基本元素

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:

formName.elements[].methadName (窗体名.元素名或数组.方法)

formName.elemaent[].propertyName(窗体名.元素名或数组.属性)

　

下面分别介绍：

　

１、Text单行单列输入元素

　功能：对Text标识中的元素实施有效的控制。

　基本属性：

Name：设定提交信息时的信息名称。对应于HTML文档中的Name。

Value：用以设定出现在窗口中对应HTML文档中Value的信息。

defaultvalue：包括Text元素的默认值

　基本方法：

blur()：将当前焦点移到后台。

select()：加亮文字。

　主要事件：

onFocus：当Text获得焦点时，产生该事件。

OnBlur：从元素失去焦点时，产生该事件。

Onselect：当文字被加亮显示后，产生该文件。

onchange：当Text元素值改变时，产生该文件。

例：...

<Form name="test">

<input type="text" name="test" value="this is a javascript" >

</form>

...

<script language ="Javascirpt">

document.mytest.value="that is a Javascript";

document.mytest.select();

document.mytest.blur();

</script>

　

２、textarea多行多列输入元素

　功能：实施对Textarea中的元素进行控制。

　基本属性

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。

Value：用以设定出现在窗口中对应HTML文档中Value的信息。

Default value：元素的默认值。

　方法：

blur()：将输入焦点失去

select()：将文字加亮后

　事件：

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

Onselect:当文字加亮后，产生该文件

　

３、Select选择元素

　功能：实施对滚动选择元素的控制。

　属性：

name:设定提交信息时的信息名称，对应文档select中的name。

Length:对应文档select中的length

options:组成多个选项的数组

selectIndex;该下标指明一个选项

select在中每一选项都含有以下属性：

Text:选项对应的文字

selected:指明当前选项是否被选中

Index:指明当前选项的位置

defaultselected:默认选项

　

　事件：

OnBlur：当select选项失去焦点时，产生该文件。

onFocas:当select获得焦点时，产生该文件。

Onchange:选项状态改变后，产生该事件。

　

４、Button按钮

　功能：实施对Button按钮的控制。

　属性：

Name:设定提交信息时的信息名称，对应文档中button的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

　方法：

click()该方法类似于一个按下的按钮。

　事件：

onclick当单击button按钮时，产生该事件。

例：

<Form name="test">

<input type="button" name="testcall" onclick=tmyest()>

</form>

...

<script language="javascirpt">

document.elements[0].value="mytest"; //通过元素访问

或

document.testcallvalue="mytest"; // 通过名字访问

</script>

.....

　

５、checkbox检查框

　功能：实施对一个具有复选框中元素的控制。

　属性：

name:设定提交信息时的信息名称。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

Checked:该属性指明框的状态true/false.

defauitchecked:默认状态

　方法：

click()该方法使得框的某一个项被选中。

　事件：

onclick:当框的选被选中时，产生该事件。

　

６、radio无线按钮

　功能：实施对一个具单选功能的无线按钮控制。

　属性：

name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同

value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length:单选按钮中的按钮数目。

defalechecked:默认按钮。

checked:指明选中还是没有选中。

index:选中的按钮的位置。

　方法：

chick():选定一个按钮。

　事件：

onclick:单击按钮时，产生该事件。

　

７、hidden:隐藏

　功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。

　属性：

name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。

defaleitvalue:默认值

　

８、Password口令

　功能：实施对具有口令输入的元素的控制。

　属性：

Name:设定提交信息时的信息名称，对应HTML文档中password中的name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。

defaultvalu:默认值

　方法

select():加亮输入口令域。

blur():使这丢失passward输入焦点。

focus():获得password输入焦点。

　

９、submit提交元素

　功能：实施对一个具有提交功能按钮的控制。

　属性：

name:设定提交信息时的信息名称，对应HTML文档中submit。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

　方法

click()相当于按下submit按钮。

　事件：

onclick()当按下该按钮时，产生该事件。

yueshily82 · 发表于 2006-7-7 21:07

三、范例

下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm
<html>
<head>
<Script Language="JavaScript">
//原来的颜色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//动态改变颜色

function changecolor(){
document.bgColor="red";
document.vlinkColor="blue";
document.linkColor="green";
document.alinkcolor="blue";
}

</script>
</HEAD>
<body bgColor="White" >
<A href="test8_2.htm"> 调用动态按钮文档</a>

<form >
<Input type="button"  Value="red" onClick="changecolor()">
</form>
</BODY>
</HTML>

动态按钮程序。
test8_2.htm
<HTML>
<HEAD>
</HEAD>

<p align="center">　</p>
<div align="center"><center>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
<td width="100%"><form name="form2" onSubmit="null">
   <p><input type="submit" name="banner" VALUE="Submit"
   onClick="alert('You have to put an \'action=[url]\' on the form tag!!')"> <br>

<script language="JavaScript">

var id,pause=0,position=0;
function banner() {
      // variables declaration
   var i,k,msg=" 这里输入你要的内容";// increase msg
      k=(30/msg.length)+1;
      for(i=0;i<=k;i++) msg+=" "+msg;
      // show it to the window
   document.form2.banner.value=msg.substring(position,position-30);
      // set new position
   if(position++==msg.length) position=0;
      // repeat at entered speed
      id=setTimeout("banner()",60); }
// end -->
banner();
</script></p>
</form>
</td>
  </tr>
</table>
</center></div>

<p>　</p>

<BODY>
<A href="test8_1.htm"> 返回</a>

</BODY>
</HTML>
本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。

yueshily82 · 发表于 2006-7-7 21:09

第九讲实现更复杂的交互

　　

一、什么是框架

　　框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。
　　框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。

<HTML>
<HEAD>
</HEAD>
<Frameset Rows="20%,80%">
<frame src="test9_1.html">
<Frameset Cols="50%,50%">
<frame src="test9_2.html">
<frame src="test9_3.html">
</Frameset>
</Frameset>
</HTML>
　　以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。

　　通过[Framset ]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参数是告诉浏览器您想将视窗分割成几行。

　　可以用很多组的 <frameset...> tags 将视窗分割得更复杂。

　　可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。

　　可以用 <src> 告诉浏览器您要载入哪一个 HTML文件。

JavaScript教程

浏览过的版块