JavaScript 小技巧全集（一）

第一集　如何用滑鼠控制Web页面 

　　在这一部分首先要为你展示的JavaScript特性是将你的滑鼠移到这个不同颜色的连结上面，此时看看浏览器下的状态列有何结果，然后这样的功能我们可以与JavaScript的功能相结合。怎样做到的呢　以下就是这一个连结的作法: 
　　　＜a href="tpage.htm" onMouseOver="window.status=’Just another stupid link...’; return true"> 
　　在这儿你只要在传统 ＜a> 的标签中加入 onMouseOver 的 method　就可达成你要的效果了。这里的 window.status 是用来让你可以在 WWW 浏览器的状态列上显示一些讯息用的。 

　　在语法中，你可以看到讯息部分是用 ’ 括起来的部分，而非以 " 括起来。在讯息部分结束之后，必须加上 ; return true。好了，利用以上的特性可以很简单的完成第二个连结的例子，相当简单。以onMouseOver 的 method ，然后配合事件发生时去呼叫函数 hello() 就行了，不再多加解释了。　 

作法如下　 

　＜html> 
　＜head> 
　＜script language="LiveScript"> 
　＜!-- Hiding 
　function hello() { 
　alert("哈罗!"); 
　} 
　＜/script> 
　＜/head> 
　＜body> 
　＜a href="" onMouseOver="hello()">link＜/a> 
　＜/body> 
　＜/html> 


　　第二集　如何在页面内加入日期

　　我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。 
做法如下： 
＜script language="LiveScript"> 
＜!-- Hiding 
　today = new Date() 
　document.write("现在时间是　 ",today.getHours(),":", 
　today.getMinutes()) 
　document.write("＜br>今天日期为　 ", today.getMonth()+1, 
　"/",today.getDate(),"/",today.getYear()); 
　// end hiding contents --> 
＜/script> 

　　在本例中，我们必需首先建立一个日期变数，这可以由 today= new Date()来完成。如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间。若将它放入变数 today 中，这儿要注意的是，我 们并没有宣告 today 这个变数的型态。 
　　除以上功能外，在建立日期物件时你也可以事先设定日期如下： 
　　　docStarted= new Date(96,0,13) 
　　首先是年，接着是月（但记得减 1）,再接着是日。同样的方法也可以加上时间的设定。如下　 
　　　docStarted = new Date(96,0,13,10,50,0) 
　　前三个是日期的年、月、日，接着是时、分、秒。最后，我们必须提醒你 JavaScript 并没有实际的日期型态，但是它却能毫不费力地显示出日期和时间，原因是它是从 1 / 1 / 1970 0　0h 开始以 ms(milli seconds) 来计算目前的时间的，这听起来似乎有些复杂。但你倒不用担心，它有标准 的共用函数可以计算，你只要知道如何用就可以了。 


第三集　如何在网页上使用history和forward 

　　我们来看一个可以让你浏览不同文件的语法，我们这儿所要谈的是 back() 和 forward()这两个函数， 如果你本身的文件中有一个连结是回到你本身文件的上一个连结文件的话，那和Netscope 浏览器 中所提供的back 按钮功能是不一样的。例如，在我的文件中，正常的连结连到某些我们认为会是这个文件来源的地方, 称　这 个连结叫 back，而 Netscape 浏览器中的 back按钮，则是回到你历史记录中的上一个连结，所以不同JavaScript，也能提供类似 Netscape 中back 按钮的功能，试试这个连结，你可以体会一下回来的感觉，这个语法如下所示： 

　＜html> 
　＜body> 
　＜FORM NAME="buttonbar"> 
　＜INPUT TYPE="button" VALUE="Back" onClick="history. 
　back()"> 
　＜INPUT TYPE="button" VALUE="JS- Home" onClick="location= 
　’script.htm’"> 
　＜INPUT TYPE="button" VALUE="Next" onCLick="history. 
　forward()"> 
　＜/FORM> 
　＜/body> 
　＜/html> 
　以上你也可以直接写成 history.go(-1) 与 history.go(1) 


第四集　如何使用运算函数 

　　这是一个特殊的内建函数eval包括了运算式子为其参数,运算元,并回传一个值. 这函数对于运算一个表示的数值字串而言非常有用,举例来看,从FORM所输入的值总是字串,但你也许想要拿来运算,那我该怎么办?? 
　　下面的这一个例子包函了输入的文字栏位,应用的运算函数和显示结果的另一区块.假如你打了一个数值运算式在第一个栏位,并且按下了按钮,运算式便会开使运算, 

　＜SCRIPT> 
　function compute(obj) { 
　obj.result.value = eval(obj.expr.value) 
　} 
　＜/SCRIPT> 
　＜FORM NAME="evalform"> 
　Enter an expression: 
　＜INPUT TYPE=text NAME="expr" SIZE=20 > 
　＜BR> 
　Result: ＜INPUT TYPE=text NAME="result" SIZE=20 > 
　＜BR> 
　＜INPUT TYPE="button" VALUE="Click Me" 
　onClick="compute(this.form)"> 
　＜/FORM> 



以下是原始语法 
＜HTML> 
＜HEAD> 
　　 ＜TITLE>浏览器的状态栏＜/TITLE> 
＜/HEAD> 
＜BODY BGCOLOR="#FFFFFF"> 
＜SCRIPT language="JavaScript"> 
＜!-- Hide 
function statbar(txt) { 
window.status = txt; 
} 
// --> 
＜/SCRIPT> 
＜CENTER>＜/CENTER> 
＜CENTER>＜B>＜FONT COLOR="#0000FF">＜/FONT>＜/B>＜/CENTER> 
＜P>＜FORM> 
＜P>＜FONT COLOR="#000000">　　＜INPUT type="button" 
　　　 name="look" value="显示!" 
　　　 onclick="statbar(’嗨　　这是状态列讯息!’);">　＜INPUT 
　　　 type="button" name="erase" value="清除!" 
　　　 onclick="statbar(’’);">＜/FONT> 
＜BR>＜/FORM> 
＜CENTER>＜FONT COLOR="#000000">　＜/FONT>＜/CENTER> 
＜/BODY> 
＜/HTML> 

　　在这个例子中我们建了二个按钮，此二个按个均会去呼叫 statbar(txt) 。函数中的 txt 表 示此函数将经由函数呼叫时传一个变数值进来 (我们叫 txt但它可代表任意不同的值)你可以见到在产生按钮的 ＜form> 标 签中，呼叫到函数statbar(txt)在此我们就不再写成 txt 。 
　　直接把要显示在状态列上的文字写上去，于是我们可以见到这样的效果，变数 txt 经由 ’Value’ 中得它的值，然后传入所呼叫的函数中。所以当你按＂显示＂的按钮时，statbar(txt) 函数被呼叫，然后 txt 将读入字串＂嗨　　这是状态列讯息＂　并且传入函数中，这种经由变数传递值的方式，可以使函数相当具有可变性。 
　　接着来看第二个按钮＂清除＂　它也呼叫同样的函数，我们并不需要因为传递参数的不同而言两个不同的函数。所以现在我们可以来看看statbar(txt) 这个函数做些什么了,其实它相当简单。你只要将 txt 所要传的文字内容指定给 window.status 这个变数就可以了。即是 window.status =txt，而在清除状态列的时候，只是将空字串写入即可。不过要注意的是必须使用单引号及双引号来区别，这样才容易区分。 



以下是我们所制作的跑马灯效果的源程序 

　＜html> 
　＜head> 
　＜script language="JavaScript"> 
　＜!-- Hide 
　var scrtxt="这儿的讯息可以改为你要告诉别人的话　 "+" 
　或是注意事项 ..."; 
　var lentxt=scrtxt.length; 
　var width=100; 
　var pos=1-width; 
　function scroll() { 
　pos++; 
　var scroller=""; 
　if (pos==lentxt) { 
　pos=1-width; 
　} 
　if (pos＜0) { 
　for (var i=1; i＜=Math.abs(pos); i++) { 
　scroller=scroller+" ";} 
　scroller=scroller+scrtxt.substring(0,width-i+1); 
　} 
　else { 
　scroller=scroller+scrtxt.substring(pos,width+pos); 
　} 
　window.status = scroller; 
　setTimeout("scroll()",150); 
　} 
　//--> 
　＜/script> 
　＜body onLoad="scroll();return true;"> 
　Here goes your cool page! 
　＜/body> 
　＜/html> 
　　此一程式中我们使用了和上面同样的函数（或部分）setTimeout(...)通知，计时器在时间到时去呼叫 scroll()函数，使得跑马灯中的文字往前进一格。 在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。 


第七集　如何去产生乱数 

　　接下来我们要为你介绍一个可以产生乱数的函数，也是以 JavaScript 所写的这个函数只是利用了一点小技巧而已。而这种技巧在大部分的编译器(compiler)中，大都是如此（或类似）计算出乱数来的。相信 JavaScript 最后应也会以相似的方法来产生这样的method，如果它会提供这样功能的话，以下是此函数的结果： 
　　这是一个计算产生的乱数.3861138662928667 
　　以下是这个作法的写法　 
　　 
　　＜head> 
　　＜script language="LiveScript"> 
　　　function RandomNumber() { 
　　　today = new Date(); 
　　　num = Math.abs(Math.sin(today.getTime())); 
　　　return num; 
　　　} 
　　＜/script> 
　　＜/head> 
　　＜body> 
　　＜script language="LiveScript"> 
　　＜!-- 
　　document.write("This is a random number:", 
　　　RandomNumber()); 
　　　// --> 
　　＜/script> 
　　＜/body> 
　　＜/html> 

　　我们的做法是以上一个范例中的时间函数，它会出现一个很大的数，利用这个数再加以运算即可。例如：将它拿来做正弦函数（sin）的运算，得到的数再做绝对值的运算，结果可以得到一个介於 0 与 1 间的实数，因为时间的改变是 ms 为单位，而且你绝不会获得相同的数字不过这个做法并不适合拿来快速的连续产生一系列的乱数，但如果你是不定时久久的用一次，那效果就不错了。