codeproject 出的 JavaScript 初级教程,讲的也比较详细,虽然是英文的,但语意简单,想学习这个应该不是大障碍
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Let's first see a simple example:
- <html>
- <head>
- <title>
- This is a JavaScript example
- </title>
- <script language="JavaScript">
- < !--document.write("Hello World!");
- //-->
- </script>
- </head>
- <body>
- Hi, man!
- </body>
- </html>
Usually, JavaScript code starts with the tag
and ends with the tag
- <script language="JavaScript">
. The code placed between
- </script>
and
- <head>
. Sometimes, people embed the code in the
- </head>
tags:
- <body>
- <html>
- <head>
- </head>
- <body>
- <script>
- ..... // The code embedded in the <body> tags.
- </script>
- </body>
- </html>
Why do we place JavaScript code inside comment fields
and
- <!--
? It's for ensuring that the Script is not displayed by old browsers that do not support JavaScript. This is optional, but considered good practice. The LANGUAGE attribute also is optional, but recommended. You may specify a particular version of JavaScript:
- //-->
- <script language="JavaScript1.2">
You can use another attribute SRC to include an external file containing JavaScript code:
- <script language="JavaScript" src="hello.js">
- </script>
For example, shown below is the code of the external file
:
- hello.js
- document.write("Hello World!")
The external file is simply a text file containing JavaScript code with the file name extension ".js". Note:
and
- <script language...>
, or you will get an error message.
- </script>
In order to output text in JavaScript you must use
or
- write()
. Here's an example:
- writeln()
- <HTML>
- <HEAD>
- <TITLE>
- Welcome to my site
- </TITLE>
- </HEAD>
- <BODY>
- <SCRIPT LANGUAGE="JAVASCRIPT">
- < !--document.write("Welcome to my site!");
- // -->
- </SCRIPT>
- </BODY>
- </HTML>
Note: the document object
is in lowercase as JavaScript is case sensitive. The difference between
- write
and
- write
is:
- writeln
just outputs a text,
- write
outputs the text and a line break.
- writeln
The document object is one of the most important objects of JavaScript. Shown below is a very simple JavaScript code:
- document.write("Hi there.")
In this code,
is the object.
- document
is the method of this object. Let's have a look at some of the other methods that the document object possesses.
- write
You can always include the last update date on your page by using the following code:
- <script language="JavaScript">
- document.write("This page created by John N. Last update:" + document.lastModified);
- </script>
All you need to do here is use the
property of the document. Notice that we used
- lastModified
to put together and
- +
- document.lastModified.
Lets try playing around with
- bgColor
and
- fgColor
:
- <script>
- document.bgColor="black"
- document.fgColor="#336699"
- </script>
Frame
Using property, we can access the main window from the newly opened window.
Let's say you have opened a new window from the current window. After that, you will wonder how to make a control between the two windows. To do this, we need to first give a name to the window.Look at below:
The basic syntax when loading new content into a window is:
Your can use one of the codes shown below:
To reload a window, use this method:
Let's add some of attributes to the above script to control the size of the window, and show: toolbar, scrollbars etc. The syntax to add attributes is:
To open a window, simply use the method "window.open()":
You can display different pages according to the different time. Here is an example:
Let's try an example
If you want to get information from users and want to check each element (ie: user name, password, email) individually, and alert the user to correct the wrong input before moving on, you can use . Let's see how works:
How do you have an event handler call multiple functions/statements? That's simple. You just need to embed the functions inside the event handler as usual, but separate each of them using a semicolon:
executes JavaScript while someone leaves the page. For example to thank users.
These handlers are used exclusively with links.
The onload event handler is used to call the execution of JavaScript after loading:
handlers execute something only when users click on buttons, links, etc. Let's see an example:
Prompt box is used to allow a user to enter something according the promotion:
An example for confirm box:
There are three message boxes: , , and . Let's look at the first one:
来源: