JAVASCRIPT教程

网页设计 2007-10-7 0:12

JavaScript 是什么？

JavaScript 是一种新的描述语言，此语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网络回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器端 (server) 处理，再传回来的过程，而直接可以被客户端 (client) 的应用程序所处理。

JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支持。

如何执行 JavaScript？

JavaScript 如何执行呢？ Netscape 2.0 beta 3 版以上，就可以执行 JavaScript 的功能了，其他种类的 WWW 浏览器如:Internet Expiree 3.0也有此功能。

范例教程

范例 1：如何用 JavaScript 印出一串文字至 HTML 文件中： My first JavaScript!
This is a normal HTML document.
这是以 JavaScript 印出的!
Back in HTML again. 如果你使用的 WWW 浏览器是 Netscape 2.0 beta 3 以上版本的话，那你就可以看到相关的结果，以上范例的结果如下： This is a normal HTML document.
如果你是使用 Netscape 2.0 beta 3 以上的浏览器， JavaScript 语法部份的结果如下，你可以试着按按钮看看有何结果产生！在范例 2 中，将会产生一个按钮，当你用滑去按它的时候，应该会出现一个视窗上面有"嗨! 你好"的字串，这个结果是如何产生的呢？首先，在 form＞标签 Please enter your name:

现在你可以试试结果如何：请输入你的名字：在这个例子中又有新的东西了。首先，让我们注意一下，在语法中的注解部分 ( This is a simple HTML- page.
Last changes: 05/13/2000 17:22:02 以上的 document.lastModified 叁数在 Netscape 2.0 beta 2 版时是被写成 documeut.lastmodified 的，然而，之後的版本就改为 document.lastModified，所以注意一下；JavaScript 本身是会区分大小写的， lastmodified 与 lastModified 在它看来是不同的结果。

在这一部分首先要为你展示的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>
--------------------------------------------------------------------------------

一个使用日期和时间的例子。在第一部分中，你已看过了 lastModified 的用法和作法。现在要告诉你的并非是印出网路上服务器或文件修改日期，而是你个人客户端机器的日期和时间。以下就是执行结果：现在时间是： 20:2 今天日期为： 5/13/99 做法如下：现在时间是： 17:5
今天日期为： 7/17/2001 在本例中，我们必需首先建立一个日期变数，这可以由 today= new Date()来完成。如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间，若将它放入变数 today 中。这儿要注意的是：我们并没有宣告 today 这个变数的型态，这和 Java 或其他的程式语言在用到变数之前必需先加以宣告的方式有相当大的不同。在完成 today 的日期变数後，我们等於建立了一个具有本地时间与日期的物件 (object)。接着就可以使用 get... 的 method 以取得 today 这个物件的时间和日期。请注意 getMonth 这个 method 所取得的月份范围是由 0~11，所以必须加 1 以代表真正的 1 月至 12 月。除以上功能外，在建立日期物件时你也可以事先设定日期如下： 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) 来计算目前的时间的，它有标准的共用函数可以计算。
--------------------------------------------------------------------------------

接下来介绍一个可以产生乱数的函数，也是以 JavaScript 所写的。以下是这个作法的写法： This is a random number:0.7683139658876457 我们的做法是以上一个范例中的时间函数；它会出现一个很大的数，利用这个数再加以运算即可！例如：将它拿来做正弦函数（sin）的运算，得到的数再做绝对值的运算，结果可以得到一个介於 0 与 1 间的实数。因为时间的改变是 ms 为单位，而且你绝不会获得相同的数字。不过这个做法并不适合拿来快速的连续产生一系列的乱数，
--------------------------------------------------------------------------------

JavaScript 的一个重要特点是它可以制作视窗。你可以产生一个的视窗，并且在此视窗中载入 HTML 文件，完全以 JavaScript 来航游网络（Internet ）。接下来的范例就是告诉你如何开启一个视窗并且写点东西进去，你可先试试按一下范中之接钮看看！原始程序如下：

这儿你又看到用按钮来启动函数。这次的函数 WinOpen()是藉着一个 open 的 method 来产生一个新的视窗。第一对双引号("")是用来描述欲载入至视窗中的文件 URL 位置。如果留者空白的话，那就会呈现一个空白视窗，并可以透过 JavaScript 写入东西！下一对双引号内的内容是这个新开启视窗的名字，你可以喜欢给它任意一个名字，但不可加入空白，如用 Display Window 的话便会出现错误讯息，请注意。接下来的一连串双引号内所指定的是该视窗的相关性质(properties)，你可以指定要不要有工具棒(toolbar) 、卷轴(scrollbar)，等等，例如：如果你写 toolbar = yes，那就会在你所产生出来的视窗中出现一排工具列。以下有许多你可以改变的视窗特性，请注意它们字中间不可以有空白： toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels 以上的 pixels 部分，你可以填入点数的数值，这数值是告诉浏览器这个视窗的大小。在开启视窗，并且将它称为 msg 以後，就可以开始写些东西到视窗中了。你可以写入一般正规的 HTML 语法文字。也就是说，你可以利用先前使用者在 form 表格中输入给你的文章直接将它回应至浏览器上来了！
--------------------------------------------------------------------------------
希望你能对我们的介绍感到还算不错。由於 JavaScript 尚未完全发展完成，并且很可能会再继续地做一些更动，希望这儿的范例到时都还能执行，在 JavaScript 更多特性完成後，我们也会继续地再为你介绍一些新的范例的！

JAVASCRIPT特效应用实例
如果你需要打开一页面时自动打开一个新窗口，只要在你的html文件的<head>和</head>之间加入下面这段原代码：

<SCRIPT LANGUAGE=JavaScript>window.open("xxx.htm"); </script>
其中xxx.htm是你想进入页面的路径

由于IE和Netscape的某些不兼容，使得主页制作出来后在两者中有较大差别，有的甚至不能使用。为便于浏览，最佳的方法就是先测试浏览器类型，再调用相应的页面。
它的做法就是

第一步，将下列代码加入<head></head>之间：

<SCRIPT LANGUAGE="JavaScript">
function TestBrowser(){
ie = ((navigator.appName == "Microsoft Internet Explorer") &&(parseInt(navigator.appVersion) >= 3 ))
ns = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 ))

if (ns) {
setTimeout('location.href="indexns.html"',5);
} else {
setTimeout('location.href="indexie.html"',5);
}
}
</script>

第二步，修改<body>行为：
<body onLoad="TestBrowser()">

　　这样过五秒钟后若检测到用户使用浏览器为Netscape则调用indexns.html，否则调用indexie.html。其中时间和文件名可以更改为你自己的。

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

如何在页面上显示日期和时间

例子1：
现在是: 07/17/2001 17:22:22 现在是: 11/12/1999 01:19:13

原代码如下，只要copy下来，放入<body>中就可以了。
<script language="JavaScript"></script>
上面这个在低版本浏览器里看不见

例子2：

今天是 2001 年7 月 17 日星期二

今天是 99 年11 月 12 日星期五

原代码如下，只要copy下来，放入<body>中就可以了。
<script language="JavaScript">
</script>

例子3：
192001年7月17日星期二 5:22pm 1999年11月12日星期五 1:19am

原代码如下，只要copy下来，放入<body>中就可以了。
<script language="JavaScript"> </script>
　

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

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

自动识别浏览器

　 您的浏览器是: Microsoft Internet Explorer 4.0 (compatible; MSIE 4.01; Windows 98)

实现这个功能的原代码如下：
<script language="JavaScript"></script>

将其放入html里就可以了。(此程序对netscape3.x无效）
--------------------------------------------------------------------------------

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

一条一条显示信息的跑马灯

将下面的代码放如<head></head>之间
<script language="javascript">

</script>

将下面的代码放入<body></body>之间需要的地方:
<form name="tmForm">
<p><input type="Text" name="tmText" size="40"> </p>
</form>
在<body>语句里更改为：

<body OnLoad="Scroll() >

有关参数可以自己修改，感兴趣的快Save本页，回去试试！

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

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

自动滚屏

　 注意：
这是一页滚屏的测试页。
不是采用常见的java的.class程序来实现的
也不是动态Dhtml语言
只是用简短的javascript脚本语言
它的优点在于速度快，制作简单。
您可以下载以下的原代码，
设计到您的主页里试试！
原代码如下，把它放在html的<head></head>之间。

修改<body>语句为:

<body OnLoad="Scroller()">

可通过改动locate的数值来控制显示页面的长度（原代码中为locate!=600)。将"setTimeout("scroller()",3);"中的"3"改为其它的数字可控制速度。
--------------------------------------------------------------------------------

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

上下翻页

按一下下面的按钮试试：
实现方法，只要将下列代码放入<body>中就可以了。
<form method="post">
<p><input type="button" value="上一页" onclick="history.go( -1 );return true;"><input type="button" value="下一页" onclick="history.go( 1 );return true;"></p>
</form>

虽然简单，可是很实用！
注：这里介绍的"下一页"按钮是指调用已浏览过的页面，功能和浏览器里的forword
一样。而本页头上的"下一页"则是next的意思。
代码如下：

<form method="post">
<p><input onclick="top.location='../index.html';" type="button" value="下一页"></p>
</form>
其中location=''之间的文件名就是你要链接的文件。

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

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

停留时间:

将下列原代码加入html的<head></head>之间：
<script language="JAVASCRIPT">
<!--
var ap_name = navigator.appName;
var ap_vinfo = navigator.appVersion;
var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('(')));

var time_start = new Date();
var clock_start = time_start.getTime();
var dl_ok=false;

function init ()
{
if(ap_name=="Netscape" && ap_ver>=3.0)
dl_ok=true;
return true;
}

function get_time_spent ()
{
var time_now = new Date();
return((time_now.getTime() - clock_start)/1000);
}

function show_secs () // show the time user spent on the side
{
var i_total_secs = Math.round(get_time_spent());
var i_secs_spent = i_total_secs % 60;
var i_mins_spent = Math.round((i_total_secs-30)/60);
var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);
var s_mins_spent = "" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);
document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;
window.setTimeout('show_secs()',1000);
}

// -->
</script>

修改<body>语句为：

<BODY onLoad="init(); window.setTimeout('show_secs()',1);">

将下列原代码加入<body></body>之间：

<FORM name="fm0" onSubmit="0"><FONT COLOR="#6060FF">停留时间:
</FONT><INPUT type="text" name="time_spent" size=7 onFocus="this.blur()"></FORM>

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

访客登记

　 您好 null，您是第 0 次访问本主页. 最后一次是 Thu, Jan 1 0 at 8:00:. [按此改名]

将下列代码加入<head></head>之间：

WWHTime = WWHTime * 1
var lastHereFormatting = new Date(WWHTime); // Date-i-fy that number
var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth() * 100) + lastHereFormatting.getDate()
var lastHereInDateFormat = "" + lastHereFormatting; // Gotta use substring functions
var dayOfWeek = lastHereInDateFormat.substring(0,3)
var dateMonth = lastHereInDateFormat.substring(4,11)
var timeOfDay = lastHereInDateFormat.substring(11,16)
var year = lastHereInDateFormat.substring(23,25)
var WWHText = dayOfWeek + ", " + dateMonth + " at " + timeOfDay // display
SetCookie ("WWhenH", rightNow.getTime(), exp)
return WWHText;
}
function Count(info){
var WWHCount = GetCookie('WWHCount')
if (WWHCount == null) {
WWHCount = 0;
}
else{
WWHCount++;
}
SetCookie ('WWHCount', WWHCount, exp);
return WWHCount;
}
function set(){
VisitorName = prompt("??????",'');
SetCookie ('VisitorName', VisitorName, exp);
SetCookie ('WWHCount', 0, exp);
SetCookie ('WWhenH', 0, exp);
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
// -- End Hiding Here -->
</script>
将下列原代码加入<body></body>之间：
<script language="JavaScript">

</script>

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

跑马灯

将下列原代码加入<head></head>之间,其中的文字可以改为您需要的语句：
<script language="JavaScript"><!--
var id,pause=0,position=0,revol=9;
function banner() {
var i,k;
var m1=" 欢迎光临《初学者园地》 ! 希望您能在这里找到自己需要的东东。";
var m2=" 如果您觉得本站可以一看，请帮忙告诉您的朋友们，谢谢！ ";
var msg=m1+m2;
var speed=10;
document.isnform.banner.value=msg.substring(position,position+160);
if(position++==msg.length) {
if (revol--< 2) return;
position=0;
}
id=setTimeout("banner()",2000/speed);
}
function navigator(isnform) {

durl=(isnform.isnlist.options[isnform.isnlist.selectedIndex].value)

location.href=durl

}
// --></script>

将下列原代码加入<body></body>之间
<form method="POST" name="isnform">
<dl>
<dd align="center"><input type="text" size="48" maxlength="256" name="banner"> </dd>
</dl>
</form>　　
修改<body>为<body onload="banner()">

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

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

最后更新日期

　 最后更新日期：05/13/2000 17:21:46
最后更新日期：08/07/99 05:59:56

就一句话：
<script>
document.write("最后更新日期："+document.lastModified+"<p>")
</script>

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

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

禁止查看原代码

　
　　可能你看到某些好的网页效果。却发现不允许你查看原代码，是如何实现的呢？
只要在<head>和</head>之间加入下面这段代码就可以了：（可以用鼠标右键试试）

<SCRIPT language=javascript>
function click() {
if (event.button==2) {
alert('对不起,禁止使用此功能^_^.')
}
}
document.onmousedown=click
</SCRIPT>

　　对这种办法并不推荐，因为如果真正想看你原代码的话，方法还是很多的：）

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

问候语

"这么晚还不休息? 小心身子。"
将下列代码加入<head></head>之间：
<script language="JavaScript">

</script>

文档下载

标签集:TAGS:

回复Comments() 点击Count()

回复Comments

{commentauthor}

{commenttime}

{commentnum}

{commentcontent}

作者:

{commentrecontent}