JavaScript入门与进阶(转) -- 习惯性钝化-- 编程爱好者博客


2001年5月11日

JavaScript是什么？

JavaScript是一种新的描述语言，此一语言可以被嵌入HTML的文件之中。
JavaScript可以回应使用者的需求事件(如：form 的输入)而不用在网络上
传输资料，所以当一位使用者输入一项资料时，它不用经过传给server处理，
再传回来的过程，而直接可以被客户端(client)所处理。你也可以想像成有
一个可执行程序在你的client上执行一样！

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

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

JavaScript 如何执行呢？

Netscape 2.0版以上，Ie 3.0以上就可以执行JavaScript的功能了。

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

范例 1：

以下我们就以一些例子来告诉你如何将JavaScript写在HTML文件中，并且
体会一下新语言的特性，我们从第一个例子开始：

<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="LiveScript">
document.write("这是以 JavaScript 印出的!")
</script>
<br>
Back in HTML again.
</body>
</html>

以上范例的结果如下：

This is a normal HTML document.
这是以 JavaScript 印出的!
Back in HTML again.

此一范例并没有太大的用处，它只是要告诉你如何使用<script>的标签，并
如何将它置於 HTML 的文件之中而已，这个新的标签你可以特它放在文件中
的任何地方。

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

范例 2：

接下来下一个例子所要介绍的是有关函数(function)的使用。函数并非很
难懂的东西，但它却相当有用。函数通常是在HTML文件<body>标签里
被调用，而理所当然地，它最好事先被定义并放在<body></body>里。
好让在<body>部分中使用到函数时，它已经被读取过了。另外，你可以
用注解的符号将<script>标签中的描述语句括起来，以免旧版或无法读取
JavaScript的浏览器读到，而误会了意思！

<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("嗨! 你好");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me"
　onclick="pushbutton()">
</form>
</body>
</html>

你可以试着按按钮看看有何结果产生！

在范例 2 中，将会产生一个按钮，当你用鼠标单击它的时候，应该会出现
一个窗口上面有“嗨! 你好”的字串。这个结果是如何产生的呢？首先，
在<head>内的函数会被载入，接着<input type ="button".....>将
产生一个接钮。然后，你可以在后面看到'onClick'的指令，这就是告诉浏
览器，当该按钮被按时，应会执行onClick后的函数'pushbutton()'，而
这个函数在刚刚网页被载入时就已安放在内存中了！请注意，在这个函数中
我们用到了个新东西--alert的method，那是JavaScript事先定义好的，
alert可以产生一个只有"确定"(OK)按钮的对话框。JavaScript定义了
许多的method，可以做出相当多东西！

接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料，

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

范例 3：

<html>
<head>
<script language="LiveScript">

</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)"
　value="">
</form>
</body>
</html>

现在你可以试试结果如何：

请输入你的名字：

在这个例子中又有新的东西了。首先，让我们注意一下，在语法中的注解符号
(<!- ... ->)，之前说过它可以避免旧版本或是不支持JavaScript的WWW
浏览器因为不认识这些函数而产生错误。它的顺序应该为

<script></script>。

另外要注意的一点是，结尾那一行开头的双斜线"//"不可以省略，它代表了
JavaScript的注解，若省略了的话，-->之前的字会被误认为是JavaScript
的指令。

这个例子可以让使用者输入一段文字，然后再输入完毕后经由<input>标签中
的"onBlur"事件函数调用Getname(Str)这个函数来加以取得输入字串，并
将它显示在对话视窗上！函数Getname(this.value)中的"this.value"是
你在文本框中所输入的值。

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

范例 4：：

这个范例更是帅了！我们在HTML文件更新完成了以后，常会加上一行文件最后
修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以很简单的
写一个如下的JavaScript程序，就可以自动的为你产生最后修改的日期了：

<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">

</script>
</body>
</html>

注意：JavaScript本身是会区分大小写的，lastmodified与lastModified在
它看来是不同的结果。

Last changes: 01/12/2007 15:46:32

博客介绍

正文

JavaScript入门与进阶(转)2007-01-12 16:13:00

评论