JavaScript简介及入门实例(转载）
2009-07-27 15:05
495 查看
JavaScript 是什么？
JavaScript 是一种新的描述语言，此一语言可以被嵌入HTML 文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如：form 的输入) 而不用任何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理再传回来的过程，而直接可以被客户端 (client) 的应用程序所处理。你也可以想像成有一个可执行程序在你的客户端上执行一样! JavaScript 和 Java 很类似，但到底并不一样！Java 是一种比 JavaScript 复杂许多的程序语言，而JavaScript则是相当容易了解的语言。JavaScript 创作者可以不那么注重程序技巧，所以许多Java的特性在JavaScript中并不支持。
--------------------------------------------------------------------------------
如何执行 JaveScript？
JavaScript 如何执行呢？
Netscape 2.0 beta 3 版以上的浏览器（目前几乎所有的浏览器），都可以执行 JavaScript 的功能了。
--------------------------------------------------------------------------------
范例 1：
以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中，并且体会一下新语言的特性，我们从第一个例子开始：如何用 JavaScript 打印一串文字至HTML 文件中：
view plaincopy to clipboardprint?
<html>
<head>
我的第一个JavaScript页面!
</head>
<body>
<br>
这是一个普通的HTML文档,别失望.
<br>
<mce:script language="LiveScript"><!--
document.write("但这是以JavaScript打印出来的!")
// --></mce:script>
<br>
退回到HTML
</body>
</html>
<html>
<head>
我的第一个JavaScript页面!
</head>
<body>
<br>
这是一个普通的HTML文档,别失望.
<br>
<mce:script language="LiveScript"><!--
document.write("但这是以JavaScript打印出来的!")
// --></mce:script>
<br>
退回到HTML
</body>
</html>
如果你使用的 WWW 浏览器是 Netscape 2.0 beta 3 以上版本的话，那你就可以看到相关的结果，而如果你的浏览器并非是可以支持 JavaScript 的话，那看起来就会有一些怪怪的了，以上范例的结果如下：
我的第一个JavaScript页面!
这是一个普通的HTML文档,别失望.
但这是以JavaScript打印出来的!
退回到HTML
此一范例并没有太大的用处，它只是要告诉你如何使用<script>的标签，并如何将它置于HTML的文件之中而已，这个新的标签你可以将它放在文件中的任何地方。
--------------------------------------------------------------------------------
范例 2：
接下来下一个例子所要介绍的是有关函数 (function) 的使用。请放心，函数并非很难懂的东西，但它却相当有用。函数通常是在 HTML 文件中 <body> 的部份被引用，而理所当然地，它最好事先被声明并放在 HTML 文件中 <body>的部份。好让在 <body> 部分中使用到函数时，它已确定被读取住来。另外，<script> 标签的有关描述语法部分，你可以用注解的符号将它括起来，以免旧版或无法读取 JavaScript 的浏览器读到，而误会了意思！
view plaincopy to clipboardprint?
<html>
<head>
<mce:script language="LiveScript"><!--
function pushbutton()
{
alert("嗨,你好啊!");
}
// --></mce:script>
</head>
<body>
<form>
<input type="button" name="Button1" value="点击我" onclick="pushbutton()">
</form>
</body>
</html>
<html>
<head>
<mce:script language="LiveScript"><!--
function pushbutton()
{
alert("嗨,你好啊!");
}
// --></mce:script>
</head>
<body>
<form>
<input type="button" name="Button1" value="点击我" onclick="pushbutton()">
</form>
</body>
</html>
如果你是使用 Netscape 2.0 beta 3 以上的浏览器，那以上 JavaScript 语法部份的结果如下，你可以试着按按钮看看有何结果产生！
在范例 2 中，将会产生一个按钮，当你用鼠标去按它的时候，应该会出现
一个视窗上面有“嗨! 你好”的字串，如何？不错吧！这个结果是如何产生的呢？首先，在 <head＞内的函数会被载入并存於内存中，接着一个新的 <form>标签 <input type ="button".....＞将产生一个接钮。然後，你可以在後面看到 'onClick' 的指令，这就是告诉浏览器，当该按钮被按时，应会执行onClick 後的函数 'pushbutton()'，而这个函数在刚刚程序被载入时就已安放在内存中了！请注意，在这个函数中我们用到了个新东西alert()，是JavaScript 事先定义好的，它会以对话视窗产生内涵的讯息，并有一"确定"(OK)的按钮。JavaScript 定义了许多的 method，具体参看以下链接: http://www.w3school.com.cn/js/jsref_obj_global.asp
接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料，
事实上，这也是加入个函数就可以达成的。
--------------------------------------------------------------------------------
范例 3：
view plaincopy to clipboardprint?
<html>
<head>
<mce:script language="LiveScript"><!--
function getname(str)
{
alert("你好!" + str + "!");
}
// --></mce:script>
</head>
<body>
请输入你的名字:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
<html>
<head>
<mce:script language="LiveScript"><!--
function getname(str)
{
alert("你好!" + str + "!");
}
// --></mce:script>
</head>
<body>
请输入你的名字:
<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 文档完成了以後，常会加上一行文件最後修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以很简单的写一个如下的描述语法程序，就可以自动的为你每次产生最後修改的日期了：
view plaincopy to clipboardprint?
<html>
<body>
这是一个简单的HTML文档
<br>
最后更改:
<mce:script language="LiveScript"><!--
隐藏注释
document.write(document.lastModified);
// 技术注释
// --></mce:script>
</body>
</html>
<html>
<body>
这是一个简单的HTML文档
<br>
最后更改:
<mce:script language="LiveScript"><!--
隐藏注释
document.write(document.lastModified);
// 技术注释
// --></mce:script>
</body>
</html>
以上的 document.lastModified 叁数在 Netscape 2.0 beta 2 版时是被写成documeut.lastmodified 的，然而，之後的版本就改为document.lastModified，所以注意一下 ；JavaScript 本身是会区分大小写的，lastmodified 与lastModified在它看来是不同的结果。最後，在这一部分结束之前，要提醒你一点，像范例4的用法并非每一部机器都是一样的，例如：PC 上跑得很正确的，在工作站上不一定会有相同的结果，所以，或许你仍得测一测不同机器的结果才会有所定论。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/newsainton/archive/2009/07/24/4375905.aspx
JavaScript 是一种新的描述语言，此一语言可以被嵌入HTML 文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如：form 的输入) 而不用任何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理再传回来的过程，而直接可以被客户端 (client) 的应用程序所处理。你也可以想像成有一个可执行程序在你的客户端上执行一样! JavaScript 和 Java 很类似，但到底并不一样！Java 是一种比 JavaScript 复杂许多的程序语言，而JavaScript则是相当容易了解的语言。JavaScript 创作者可以不那么注重程序技巧，所以许多Java的特性在JavaScript中并不支持。
--------------------------------------------------------------------------------
如何执行 JaveScript？
JavaScript 如何执行呢？
Netscape 2.0 beta 3 版以上的浏览器（目前几乎所有的浏览器），都可以执行 JavaScript 的功能了。
--------------------------------------------------------------------------------
范例 1：
以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中，并且体会一下新语言的特性，我们从第一个例子开始：如何用 JavaScript 打印一串文字至HTML 文件中：
view plaincopy to clipboardprint?
<html>
<head>
我的第一个JavaScript页面!
</head>
<body>
<br>
这是一个普通的HTML文档,别失望.
<br>
<mce:script language="LiveScript"><!--
document.write("但这是以JavaScript打印出来的!")
// --></mce:script>
<br>
退回到HTML
</body>
</html>
<html>
<head>
我的第一个JavaScript页面!
</head>
<body>
<br>
这是一个普通的HTML文档,别失望.
<br>
<mce:script language="LiveScript"><!--
document.write("但这是以JavaScript打印出来的!")
// --></mce:script>
<br>
退回到HTML
</body>
</html>
如果你使用的 WWW 浏览器是 Netscape 2.0 beta 3 以上版本的话，那你就可以看到相关的结果，而如果你的浏览器并非是可以支持 JavaScript 的话，那看起来就会有一些怪怪的了，以上范例的结果如下：
我的第一个JavaScript页面!
这是一个普通的HTML文档,别失望.
但这是以JavaScript打印出来的!
退回到HTML
此一范例并没有太大的用处，它只是要告诉你如何使用<script>的标签，并如何将它置于HTML的文件之中而已，这个新的标签你可以将它放在文件中的任何地方。
--------------------------------------------------------------------------------
范例 2：
接下来下一个例子所要介绍的是有关函数 (function) 的使用。请放心，函数并非很难懂的东西，但它却相当有用。函数通常是在 HTML 文件中 <body> 的部份被引用，而理所当然地，它最好事先被声明并放在 HTML 文件中 <body>的部份。好让在 <body> 部分中使用到函数时，它已确定被读取住来。另外，<script> 标签的有关描述语法部分，你可以用注解的符号将它括起来，以免旧版或无法读取 JavaScript 的浏览器读到，而误会了意思！
view plaincopy to clipboardprint?
<html>
<head>
<mce:script language="LiveScript"><!--
function pushbutton()
{
alert("嗨,你好啊!");
}
// --></mce:script>
</head>
<body>
<form>
<input type="button" name="Button1" value="点击我" onclick="pushbutton()">
</form>
</body>
</html>
<html>
<head>
<mce:script language="LiveScript"><!--
function pushbutton()
{
alert("嗨,你好啊!");
}
// --></mce:script>
</head>
<body>
<form>
<input type="button" name="Button1" value="点击我" onclick="pushbutton()">
</form>
</body>
</html>
如果你是使用 Netscape 2.0 beta 3 以上的浏览器，那以上 JavaScript 语法部份的结果如下，你可以试着按按钮看看有何结果产生！
在范例 2 中，将会产生一个按钮，当你用鼠标去按它的时候，应该会出现
一个视窗上面有“嗨! 你好”的字串，如何？不错吧！这个结果是如何产生的呢？首先，在 <head＞内的函数会被载入并存於内存中，接着一个新的 <form>标签 <input type ="button".....＞将产生一个接钮。然後，你可以在後面看到 'onClick' 的指令，这就是告诉浏览器，当该按钮被按时，应会执行onClick 後的函数 'pushbutton()'，而这个函数在刚刚程序被载入时就已安放在内存中了！请注意，在这个函数中我们用到了个新东西alert()，是JavaScript 事先定义好的，它会以对话视窗产生内涵的讯息，并有一"确定"(OK)的按钮。JavaScript 定义了许多的 method，具体参看以下链接: http://www.w3school.com.cn/js/jsref_obj_global.asp
接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料，
事实上，这也是加入个函数就可以达成的。
--------------------------------------------------------------------------------
范例 3：
view plaincopy to clipboardprint?
<html>
<head>
<mce:script language="LiveScript"><!--
function getname(str)
{
alert("你好!" + str + "!");
}
// --></mce:script>
</head>
<body>
请输入你的名字:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
<html>
<head>
<mce:script language="LiveScript"><!--
function getname(str)
{
alert("你好!" + str + "!");
}
// --></mce:script>
</head>
<body>
请输入你的名字:
<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 文档完成了以後，常会加上一行文件最後修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以很简单的写一个如下的描述语法程序，就可以自动的为你每次产生最後修改的日期了：
view plaincopy to clipboardprint?
<html>
<body>
这是一个简单的HTML文档
<br>
最后更改:
<mce:script language="LiveScript"><!--
隐藏注释
document.write(document.lastModified);
// 技术注释
// --></mce:script>
</body>
</html>
<html>
<body>
这是一个简单的HTML文档
<br>
最后更改:
<mce:script language="LiveScript"><!--
隐藏注释
document.write(document.lastModified);
// 技术注释
// --></mce:script>
</body>
</html>
以上的 document.lastModified 叁数在 Netscape 2.0 beta 2 版时是被写成documeut.lastmodified 的，然而，之後的版本就改为document.lastModified，所以注意一下 ；JavaScript 本身是会区分大小写的，lastmodified 与lastModified在它看来是不同的结果。最後，在这一部分结束之前，要提醒你一点，像范例4的用法并非每一部机器都是一样的，例如：PC 上跑得很正确的，在工作站上不一定会有相同的结果，所以，或许你仍得测一测不同机器的结果才会有所定论。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/newsainton/archive/2009/07/24/4375905.aspx
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MongoDB中javascript脚本编程简介和入门实例
- 【转载】AJAX技术简介及入门实例
- MongoDB中javascript脚本编程简介和入门实例
- AJAX技术简介及入门实例（转载）
- Log4J入门教材01. Log4J简介【转载】
- javascript入门系列演示·三种弹出对话框的用法实例
- AJAX技术简介及入门实例
- MyBatis入门实例简介
- FindBugs入门简介（eclipse安装使用实例）
- [转载] 存储过程从入门到熟练(多个存储过程完整实例及调用方
- JavaScript中prototype的入门教程-[转载]
- javascript入门实例一
- javascript入门实例五
- JavaScript 入门及简介
- Javascript WebSocket使用实例介绍（简明入门教程）
- 【转载】JavaScript 经典实例收集整理
- Javascript入门学习第七篇 js dom实例操作第1/2页
- JavaScript字符串对象toUpperCase方法入门实例（用于把字母转换为大写）
- JavaScript字符串对象substr方法入门实例（用于截取字符串）
- 转载 Oracle Spatial 实例简介