JavaScript小技巧全集

精品文档 1欢迎下载 JavaScriptJavaScript 小技巧全集 一 小技巧全集 一 第一集 如何用滑鼠控制 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 精品文档 2欢迎下载 在本例中 我们必需首先建立一个日期变数 这可以由 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 精品文档 3欢迎下载 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 将读入字串 嗨 这是状态列讯息 并且传入函数中 这种经由变数 精品文档 4欢迎下载 传递值的方式 可以使函数相当具有可变性 接着来看第二个按钮 清除 它也呼叫同样的函数 我们并不需要因为传递参数的不同而言两个不同的函数 所以现在我们可以来看看 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 函数 使得跑马灯中的文字 往前进一格 在函数的一开始 有一些较罗嗦的计算部分 但这并不难使我们了解 这些计算主要是用来取得跑马灯中的文字应该由那一个位 置开始显示的用途 一开始当然是必需加一些空白在字的左边 让文字部分能尽可能靠右 然后再一字字的将空白减少 结果自然就造成字往前 精品文档 5欢迎下载 移动的效果了 第七集 如何去产生乱数 接下来我们要为你介绍一个可以产生乱数的函数 也是以 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 为单位 而且你绝不会获得相同的数字不过 这个做法并不适合拿来快速的连续产生一系列的乱数 但如果你是不定时久久的用一次 那效果就不错了 精品文档 6欢迎下载 JavaScriptJavaScript 小技巧全集 二 小技巧全集 二 第八集 如何自动加上最后修改时间 我们在 HTML 文件档完成了以后 常会加上一行文件最后修改的日期 现在你可不用担心每次都要去改或是忘了改了 你可以很简单的写一 个如下的描述语法程式 就可以自动的为你每次产生最后修改的日期了 html body This is a simple HTML page br Last changes script language LiveScript hide script from old browsers document write document lastModified end hiding contents script body html 以上的 document lastModified 参数在 Netscape 2 0beta 2 版时是被写成 documeut lastmodified 的 然而之后的版本就改为 document lastModified 所以注意一下 JavaScript 本身是会区分大小写的 lastmodified 与 lastModified 在它看来是不同的结果 第九集 JAVASCRIPT 基础 1 一 什么是 JAVASCRIPT 语言 JavaScript 是一种新的描述语言 此一语言可以被箝入 HTML 的文件之中 透过 JavaScript 可以做到回应使用者的需求事件 如 form 的输入 而不用任何的网路来回传输资料 所以当一位使用者输入一项资料时 它不用经过传给服务器 server 处理 再传回来的过程 而直接可以被客 户端 client 的应用程式所处理 你也可以想像成有一个可执行程式在你的客端上执行一样 目前已有一些写好的程式在 Internet 上你可以连 过去看看 JavaScript 和 Java 很类似 但到底并不一样 Java 是一种比 JavaScript 更复杂 许多的程式语言 而 JavaScript 则是相当容易了解的语 言 第十集 JAVASCRIPT 基础 2 二 如何执行 JaveScript Netscape2 0beta3 版以上 就可以执行 JavaScript 的功能了 我们测试过至少 beta3 版以上可以 目前为止 除了 Netscape 外 似乎尚没 精品文档 7欢迎下载 有其他种类的 WWW 浏览器有此一功能 以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中 并且体会