当前位置: 王朝网络 >> java/jsp >> Java Script的应用技巧

Java Script的应用技巧

王朝java/jsp·作者佚名 2008-05-31

在主页的编写中，Java的运用已经是非常热门和常见的了。其中，Java Script因其编写轻易、与页面结合密切而受到了大家的青睐，因而在WWW上运用的最为广泛。在这里我将给大家介绍一些Java Script最基本的运用，初学者可以将这些程序稍加修改运用到自己的主页中去。

插入显示当前日期

显示当前时间

显示文件的最后修改时间

在状态条显示信息

打开另一页面

弹出消息框和输入框

返回和前进

显示对方浏览器的型号

检验用户提取的表单

另外：我将Java Script的对象及这些对象的属性、方法、事件做了一个列表供大家参考。

--------------------------------------------------------------------------------

插入显示当前日期

这是一个非常简单和常见的程序，为了初学者我还是讲一讲。请看下面的例子：

今天是2002年5月2日;星期四

上面这段文字就是使用Java Script显示的。我们来看源程序：

<!--

var today=new Date;

var week=new Array(7);

week[0]="天";

week[1]="一";

week[2]="二";

week[3]="三";

week[4]="四";

week[5]="五";

week[6]="六";

document.write("今天是"+today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日;星期"+week[today.getDay()]);

//-->

</SCRIPT>

这里要注重的是月份的表示,getMonth()得到的是0-11;0表示一月,1表示二月依此类推，所以我们要显示月份要先加1。另外，Java对两千年问题也已作了考虑，当小于2000年时Java显示两位数字如1998年显示98，当大于2000年时，显示四位数字。避免了出现两千年问题。

--------------------------------------------------------------------------------

显示当前时间

显示当前时间和显示当前日期相似，然而时间是不停在流逝的(除非你以光速运动，或者你是位漂亮的小姐)，因此显示时间也要是动态变化的。我们用一个定时器来动态改变时间的显示，然而我们无法用write()来刷新文档，因为当我们再次调用write()时，将会把原来的文档内容冲掉，所以显示时间要借用text文本框。例子：

源程序如下:

<!--

function showtime()

{var time=new Date();

var hour=time.getHours();

var minute=time.getMinutes();

if(minute<10)minute="0"+minute;

var second=time.getSeconds();

if(second<10)second="0"+second;

document.timeform.time.value=hour+":"+minute+":"+second;

setTimeout("showtime()","1000");

}

showtime();

// -->

</SCRIPT>

这里我想说一说定时器函数，其实定时器这个叫法并不恰当，应该叫延时器函数，这个函数的作用是延时调用另一个指定的函数，此函数只执行一次指定函数，而不是象我们所想的那样不停地调用指定函数，要想真正地成为定时器必须在被调用函数执行时再次设定延时器函数。

--------------------------------------------------------------------------------

显示文件的最后修改时间

有的朋友为了显示自己的水平，常使用这个程序，因此我也显示一下我的水平吧;请看下例:

文件的最后修改日期01/26/2002 00:31:46

源程序：

<!--

document.write("文件的最后修改日期"+document.lastModified);

//-->

</SCRIPT>

这么简单的程序看来不用我介绍了。

--------------------------------------------------------------------------------

在状态条显示信息

当我们用鼠标指向一个链接时，我们可以在浏览器的状态条看到要链接的文档，Java Script提供了改变此信息的手段。请点击下面的按钮，你将看到状态条中出现“嗨！你好！”

请看源程序：

<FORM><INPUT type="button" value="改变状态条" ONCLICK="self.status=´嗨！你好！´;"></FORM> 通过改变status的值你就可以改变状态条信息。另外要注重的是，有些朋友喜欢使用状态条来显示滚动信息，其实这不是一个好的主意，因为用状态条来显示滚动信息，往往会阻碍浏览器正常信息的显示，当用户鼠标指向一个链接时，浏览器会和Java Script发生冲突，干扰信息的显示。

--------------------------------------------------------------------------------

打开另一页面

使用Java Script我们可以打开一个新的浏览器窗口，并且可以控制浏览器窗口的外观，使用open()可以很轻易做到这一点。

源程序如下：

<!--

function openwin()

{

open("newindow.Html","newindow","scrollbars=no,resizable=no,location=no,height=100,width=170,toolbar=no");

}

//-->

</SCRIPT>

使用新的窗口值得注重的是不要打开太多的窗口,因为没有人会喜欢出现一大堆的浏览器窗口。open函数第一个参数为URL地址，第二个参数为窗口名，第三个参数为窗口状态外观。

--------------------------------------------------------------------------------

弹出消息框和输入框

消息框和输入框的运用更是普遍；

源程序：

<FORM>

</FORM>

有的朋友可能会想到在自己的主页中放置一个消息框程序,当用户每次一访问此主页就自动弹出一个消息框显示一条消息，其实这也不是一个好的主意，除非你有十万火急的事情要通知访问者,否则请不要这样做。在设计主页时要以他人为中心，就是说要由访问者自己决定该做什么事情，而不是强加给他人，否则会让人感到厌烦或者认为你自作多情。

--------------------------------------------------------------------------------

返回和前进

用户不但可以使用浏览器中的工具条控制页面的前进后退，而且可以使用Java Script在页面中提供相同的功能，使用history对象中的back()和forward()就可做到这一点：

程序如下：

<FORM>

</FORM>

另外还可以用history.go(int)函数实现这些功能。

--------------------------------------------------------------------------------

显示对方浏览器的型号

有的时候你会在一些主页上看到这样的信息：

你所用的浏览器是Microsoft Internet EXPlorer4.0 (compatible; MSIE 6.0; Windows 98)

你也许会感到很惊奇，对方怎么知道你所用浏览器的型号？其实这是非常简单的小把戏，你只要输入如下代码就可以实现了：

<!--

document.write("你所用的浏览器是"+navigator.appName+navigator.appVersion);

//-->

</SCRIPT>

--------------------------------------------------------------------------------

检验用户提交的表单

有的时候，你的主页要使用CGI程序和用户进行交互，一个最简单的例子就是留言册。用户通过提交表单的方式调用主机上的CGI程序，此程序在服务器上运行完成一定的工作--例如记下用户的留言，然后返回一个信息给用户。在这个过程中，我们不能保证用户提交的都是有效的表单，也可能提交的是一份没有任何内容的表单；因此在CGI程序中肯定会有对表单进行检验的部分。假如象这样的无效表单占了大部分的话，不但给服务器造成沉重的负担，而且对网络的传输也是大大不利(现在国内上网就象蜗牛爬一样)。因此我们要想办法避免这种状况，最好是发送的全是有效的表单。此时JavaScript就派上用场了，我们可以使用JavaScript对用户提交的表单进行检验，对于无效的表单就阻止其发送，而只让有效的表单通过。我们看下面一个例子：

源程序如下:

</FORM>

<!--

function check()

{

var length=document.test.text.value.length;

if(length==0){alert("请输入文字!");document.test.text.focus();return false;}

else return true;

}

// -->

</SCRIPT>

此程序中检验文本框中字符串的长度，只有长度非零即有文字输入，才答应提交表单，否则提示你输入文字，并将输入焦点切换倒文本框。在onsubmit事件中返回true表示答应发送，false表示不答应发送。