Introduction to
JavaScript
What is JavaScript?
Are Java and JavaScript the Same?
NO!
Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
What can a JavaScript Do?
The code
above will produce this output on an HTML page:
Example Explained
To
insert a JavaScript into an HTML page, we use the <script> tag (also use
the type attribute to define the scripting language).
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
By entering the document.write command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.
How to Handle Older Browsers
Browsers
that do not support JavaScript will display the script as page content. To
prevent them from doing this, we may use the HTML comment tag:
Where to Put the JavaScript
JavaScripts
in a page will be executed immediately while the page loads into the browser.
This is not always what we want. Sometimes we want to execute a script when a
page loads, other times when a user triggers an event.
Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.
Using an External JavaScript
Sometimes
you might want to run the same JavaScript on several pages, without having to
write the same script on every page.
To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .js file in the "src" attribute of the <script> tag:
JavaScript
Variables
Variables
A
variable is a "container" for information you want to store. A variable's
value can change during the script. You can refer to a variable by name to see
its value or to change its value.
Rules for variable names:
Declare a Variable
You can
create a variable with the var statement:
You can
also create a variable without the var statement:
Assign a Value to a Variable
You can
assign a value to a variable like this:
Or like
this:
The
variable name is on the left side of the expression and the value you want to
assign to the variable is on the right. Now the variable "strname"
has the value "Hege".
Lifetime of Variables
When you
declare a variable within a function, the variable can only be accessed within
that function. When you exit the function, the variable is destroyed. These
variables are called local variables. You can have local variables with the
same name in different functions, because each is recognized only by the
function in which it is declared.
If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
JavaScript
If...Else Statements
Conditional Statements
Very
often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
If Statement
You
should use the if statement if you want to execute some code only if a
specified condition is true.
Syntax
Note
that if is written in lowercase letters. Using uppercase letters (IF) will
generate a JavaScript error!
Example 1
Example 2
Note: When comparing
variables you must always use two equals signs next to each other (==)!
Notice that there is no ..else.. in this syntax. You just tell the code to execute some code only if the specified condition is true.
If...else Statement
If you
want to execute some code if a condition is true and another code if the
condition is not true, use the if....else statement.
Syntax
Example
If...else if...else Statement
You
should use the if....else if...else statement if you want to select one of many
sets of lines to execute.
Syntax
Example
JavaScript Switch
Statement
The JavaScript Switch Statement
You
should use the switch statement if you want to select one of many blocks of
code to be executed.
Syntax
This is
how it works: First we have a single expression n (most often a variable),
that is evaluated once. The value of the expression is then compared with the
values for each case in the structure. If there is a match, the block of code
associated with that case is executed. Use break to prevent the code
from running into the next case automatically.
Example
JavaScript
Operators
Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
String Operator
A string
is most often text, for example "Hello World!". To stick two or more
string variables together, use the + operator.
The
variable txt3 now contains "What a verynice day!".
To add a space between two string variables, insert a space into the expression, OR in one of the strings.
The
variable txt3 now contains "What a very nice day!".
Conditional Operator
JavaScript
also contains a conditional operator that assigns a value to a variable based
on some condition.
Syntax
Example
If the
variable visitor is equal to PRES, then put the string "Dear President
" in the variable named greeting. If the variable visitor is not equal to
PRES, then put the string "Dear " into the variable named greeting.
JavaScript Popup
Boxes
Alert Box
An alert
box is often used if you want to make sure information comes through to the
user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax:
Confirm Box
A confirm
box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax:
Prompt Box
A prompt
box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:
JavaScript
Functions
JavaScript Functions
To keep
the browser from executing a script as soon as the page is loaded, you can
write your script as a function.
A function contains some code that will be executed only by an event or by a call to that function.
You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).
Functions are defined at the beginning of a page, in the <head> section.
Example
If the line: alert("Hello world!!"), in the example above had not been written within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before the user hits the button. We have added an onClick event to the button that will execute the function displaymessage() when the button is clicked.
How to Define a Function
The
syntax for creating a function is:
var1,
var2, etc are variables or values passed into the function. The { and the }
defines the start and end of the function.
Note: A function with no parameters must include the parentheses () after the function name:
Note: Do not forget
about the importance of capitals in JavaScript! The word function must be
written in lowercase letters, otherwise a JavaScript error occurs! Also note
that you must call a function with the exact same capitals as in the function
name.
The return Statement
The
return statement is used to specify the value that is returned from the
function.
So, functions that are going to return a value must use the return statement.
Example
The
function below should return the product of two numbers (a and b):
When you
call the function above, you must pass along two parameters:
The
returned value from the prod() function is 6, and it will be stored in the
variable called product.
JavaScript For
Loop
JavaScript Loops
Very
often when you write code, you want the same block of code to run over and over
again in a row. Instead of adding several almost equal lines in a script we can
use loops to perform a task like this.
In JavaScript there are two different kind of loops:
The for Loop
The for
loop is used when you know in advance how many times the script should run.
Syntax
Example
Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.
Note: The increment parameter could also be negative, and the <= could be any comparing statement.
Result
The while loop
JavaScript While
Loop
The while loop
The
while loop is used when you want the loop to execute and continue executing while
the specified condition is true.
Note: The <= could
be any comparing statement.
Example
Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.
Result
The do...while Loop
The
do...while loop is a variant of the while loop. This loop will always execute a
block of code ONCE, and then it will repeat the loop as long as the specified
condition is true. This loop will always be executed at least once, even if the
condition is false, because the code is executed before the condition is tested.
Example
Result
JavaScript Break
and Continue
JavaScript break and continue Statements
There
are two special statements that can be used inside loops: break and continue.
Break
The
break command will break the loop and continue executing the code that follows
after the loop (if any).
Example
Result
Continue
The
continue command will break the current loop and continue with the next value.
Example
Result
JavaScript
For...In Statement
JavaScript For...In Statement
The
for...in statement is used to loop (iterate) through the elements of an array
or through the properties of an object.
The code in the body of the for ... in loop is executed once for each element/property.
Syntax
The
variable argument can be a named variable, an array element, or a property of
an object.
Example
Using
for...in to loop through an array:
JavaScript Events
Events
By using
JavaScript, we have the ability to create dynamic web pages. Events are actions
that can be detected by JavaScript.
Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
Examples of events:
Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!
onload and onUnload
The
onload and onUnload events are triggered when the user enters or leaves the
page.
The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
onFocus, onBlur and onChange
The
onFocus, onBlur and onChange events are often used in combination with
validation of form fields.
Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:
onSubmit
The
onSubmit event is used to validate ALL form fields before submitting it.
Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:
onMouseOver and onMouseOut
onMouseOver
and onMouseOut are often used to create "animated" buttons.
Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:
JavaScript - Catching Errors
When
browsing Web pages on the internet, we all have seen a JavaScript alert box
telling us there is a runtime error and asking "Do you wish to
debug?". Error message like this may be useful for developers but not for
users. When users see errors, they often leave the Web page.
This chapter will teach you how to trap and handle JavaScript error messages, so you don't lose your audience.
There are two ways of catching errors in a Web page:
Try...Catch Statement
The try...catch
statement allows you to test a block of code for errors. The try block contains
the code to be run, and the catch block contains the code to be executed if an
error occurs.
Syntax
Note
that try...catch is written in lowercase letters. Using uppercase letters will
generate a JavaScript error!
Example 1
The
example below contains a script that is supposed to display the message
"Welcome guest!" when you click on a button. However, there's a typo
in the message() function. alert() is misspelled as adddlert(). A JavaScript
error occurs:
To take
more appropriate action when an error occurs, you can add a try...catch
statement.
The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:
Example 2
The next
example uses a confirm box to display a custom message telling users they can
click OK to continue viewing the page or click Cancel to go to the homepage. If
the confirm method returns false, the user clicked Cancel, and the code
redirects the user. If the confirm method returns true, the code does nothing:
The onerror Event
The
onerror event will be explained soon, but first we will learn how to use the
throw statement to create an exception. The throw statement can be used
together with the try...catch statement.
The Throw Statement
The
throw statement allows you to create an exception. If you use this statement
together with the try...catch statement, you can control program flow and
generate accurate error messages.
Syntax
The
exception can be a string, integer, Boolean or an object.
Note that throw is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
Example 1
The
example below determines the value of a variable called x. If the value of x is
higher than 10 or lower than 0 we are going to throw an error. The error is
then caught by the catch argument and the proper error message is displayed:
JavaScript The
onerror Event
The onerror Event
We have
just explained how to use the try...catch statement to catch errors in a web
page. Now we are going to explain how to use the onerror event for the same
purpose.
The onerror event is fired whenever there is a script error in the page.
To use the onerror event, you must create a function to handle the errors. Then you call the function with the onerror event handler. The event handler is called with three arguments: msg (error message), url (the url of the page that caused the error) and line (the line where the error occurred).
Syntax
The
value returned by onerror determines whether the browser displays a standard
error message. If you return false, the browser displays the standard error
message in the JavaScript console. If you return true, the browser does not
display the standard error message.
Example
The
following example shows how to catch the error with the onerror event:
JavaScript Special
Characters
Insert Special Characters
The
backslash (\) is used to insert apostrophes, new lines, quotes, and other
special characters into a text string.
Look at the following JavaScript code:
In
JavaScript, a string is started and stopped with either single or double
quotes. This means that the string above will be chopped to: We are the
so-called
To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal:
JavasScript
will now output the proper text string: We are the so-called
"Vikings" from the north.
Here is another example:
The
example above will produce the following output:
The
table below lists other special characters that can be added to a text string
with the backslash sign:
Object Oriented Programming
JavaScript
is an Object Oriented Programming (OOP) language. An OOP language allows you to
define your own objects and make your own variable types.
Properties
Properties
are the values associated with an object.
In the following example we are using the length property of the String object to return the number of characters in a string:
12
Methods
Methods
are the actions that can be performed on objects.
In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters:
String object
The
String object is used to manipulate a stored piece of text.
Examples of use:
The following example uses the length property of the String object to find the length of a string:
The code
above will result in the following output:
The
following example uses the toUpperCase() method of the String object to convert
a string to uppercase letters:
The code
above will result in the following output:
Defining Dates
The Date
object is used to work with dates and times.
We define a Date object with the new keyword. The following code line defines a Date object called myDate:
Note: The Date object
will automatically hold the current date and time as its initial value!
Manipulate Dates
We can
easily manipulate the date by using the methods available for the Date object.
In the example below we set a Date object to a specific date (14th January 2010):
And in
the following example we set a Date object to be 5 days into the future:
Note: If adding five
days to a date shifts the month or year, the changes are handled automatically
by the Date object itself!
Comparing Dates
The Date
object is also used to compare two dates.
The following example compares today's date with the 14th January 2010:
JavaScript Array
Object
Defining Arrays
The
Array object is used to store a set of values in a single variable name.
We define an Array object with the new keyword. The following code line defines an Array object called myArray:
There
are two ways of adding values to an array (you can add as many values as you
need to define as many variables you require).
1:
You
could also pass an integer argument to control the array's size:
2:
Note: If you specify
numbers or true/false values inside the array then the type of variables will
be numeric or Boolean instead of string.
Accessing Arrays
You can
refer to a particular element in an array by referring to the name of the array
and the index number. The index number starts at 0.
The following code line:
will
result in the following output:
Modify Values in Existing Arrays
To
modify a value in an existing array, just add a new value to the array with a
specified index number:
Now, the
following code line:
will
result in the following output:
JavaScript Boolean
Object
Boolean Object
The
Boolean object is an object wrapper for a Boolean value.
The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).
We define a Boolean object with the new keyword. The following code line defines a Boolean object called myBoolean:
Note: If the Boolean object
has no initial value or if it is 0, -0, null, "", false, undefined,
or NaN, the object is set to false. Otherwise it is true (even with the string
"false")!
All the following lines of code create Boolean objects with an initial value of false:
And all
the following lines of code create Boolean objects with an initial value of
true:
Math Object
The Math
object allows you to perform common mathematical tasks.
The Math object includes several mathematical values and functions. You do not need to define the Math object before using it.
Mathematical Values
JavaScript
provides eight mathematical values (constants) that can be accessed from the
Math object. These are: E, PI, square root of 2, square root of 1/2, natural
log of 2, natural log of 10, base-2 log of E, and base-10 log of E.
You may reference these values from your JavaScript like this:
Mathematical Methods
In
addition to the mathematical values that can be accessed from the Math object
there are also several functions (methods) available.
Examples of functions (methods):
The following example uses the round() method of the Math object to round a number to the nearest integer:
The code
above will result in the following output:
The
following example uses the random() method of the Math object to return a
random number between 0 and 1:
The code
above can result in the following output:
The
following example uses the floor() and random() methods of the Math object to
return a random number between 0 and 10:
The code
above can result in the following output:
JavaScript Form
Validation
JavaScript Form Validation
JavaScript
can be used to validate input data in HTML forms before sending off the content
to a server.
Form data that typically are checked by a JavaScript could be:
Required Fields
The
function below checks if a required field has been left empty. If the required
field is blank, an alert box alerts a message and the function returns false.
If a value is entered, the function returns true (means that data is OK):
The entire
script, with the HTML form could look something like this:
E-mail Validation
The
function below checks if the content has the general syntax of an email.
This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:
The
entire script, with the HTML form could look something like this:
JavaScript
Animation
JavaScript Animation
It is
possible to use JavaScript to create animated images.
The trick is to let a JavaScript change between different images on different events.
In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between the images.
The HTML Code
The HTML
code looks like this:
Note
that we have given the image a name to make it possible for JavaScript to
address it later.
The onMouseOver event tells the browser that once a mouse is rolled over the image, the browser should execute a function that will replace the image with another image.
The onMouseOut event tells the browser that once a mouse is rolled away from the image, another JavaScript function should be executed. This function will insert the original image again.
IMPORTANT! The mouse events are added to the <a> tag, and not to the <img> tag. Unfortunately, browsers do not support mouse events on images!
The JavaScript Code
The
changing between the images is done with the following JavaScript:
The
function mouseOver() causes the image to shift to "b_blue.gif".
The function mouseOut() causes the image to shift to "b_pink.gif".
The Entire Code
JavaScript
has a wide variety of objects you can use when programming, and each of them
have different properties you can control or display through the use of
methods. This table should make your programming jobs in JavaScript a little
easier.
JavaScript Objects
JavaScript
is used in millions of Web pages to improve the design, validate forms, detect
browsers, create cookies, and much more.
JavaScript
is the most popular scripting language on the Internet, and works in all major
browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.
What is JavaScript?
- JavaScript
was designed to add interactivity to HTML pages
- JavaScript
is a scripting language (a scripting language is a lightweight programming
language)
- A
JavaScript consists of lines of executable computer code
- A
JavaScript is usually embedded directly into HTML pages
- JavaScript
is an interpreted language (means that scripts execute without preliminary
compilation)
- Everyone
can use JavaScript without purchasing a license
Are Java and JavaScript the Same?
NO!Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
What can a JavaScript Do?
- JavaScript
gives HTML designers a programming tool - HTML
authors are normally not programmers, but JavaScript is a scripting
language with a very simple syntax! Almost anyone can put small
"snippets" of code into their HTML pages
- JavaScript
can put dynamic text into an HTML page - A
JavaScript statement like this: document.write("<h1>" +
name + "</h1>") can write a variable text into an HTML
page
- JavaScript
can react to events - A JavaScript can be set to
execute when something happens, like when a page has finished loading or
when a user clicks on an HTML element
- JavaScript
can read and write HTML elements - A JavaScript
can read and change the content of an HTML element
- JavaScript
can be used to validate data - A JavaScript
can be used to validate form data before it is submitted to a server, this
will save the server from extra processing
- JavaScript
can be used to detect the visitor's browser
- A JavaScript can be used to detect the visitor's browser, and - depending
on the browser - load another page specifically designed for that browser
- JavaScript
can be used to create cookies - A
JavaScript can be used to store and retrieve information on the visitor's
computer
The HTML
<script> tag is used to insert a JavaScript into an HTML page.
How to Put a JavaScript
Into an HTML Page
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Hello World!
Example Explained
To
insert a JavaScript into an HTML page, we use the <script> tag (also use
the type attribute to define the scripting language).So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
The word
document.write is a standard JavaScript command for writing output to a
page.By entering the document.write command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Note: If we had not
entered the <script> tag, the browser would have treated the
document.write("Hello World!") command as pure text, and just write
the entire line on the page.Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.
How to Handle Older Browsers
Browsers
that do not support JavaScript will display the script as page content. To
prevent them from doing this, we may use the HTML comment tag:<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line.
Where to Put the JavaScript
JavaScripts
in a page will be executed immediately while the page loads into the browser.
This is not always what we want. Sometimes we want to execute a script when a
page loads, other times when a user triggers an event.Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
Scripts
in the body section: Scripts to be executed when the page loads go in the body
section. When you place a script in the body section it generates the content
of the page.<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Scripts
in both the body and the head section: You can place an unlimited number of
scripts in your document, so you can have scripts in both the body and the head
section.<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Using an External JavaScript
Sometimes
you might want to run the same JavaScript on several pages, without having to
write the same script on every page.To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .js file in the "src" attribute of the <script> tag:
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
JavaScript
Variables
A
variable is a "container" for information you want to store.
Variables
A
variable is a "container" for information you want to store. A variable's
value can change during the script. You can refer to a variable by name to see
its value or to change its value.Rules for variable names:
- Variable
names are case sensitive
- They
must begin with a letter or the underscore character
Declare a Variable
You can
create a variable with the var statement:var strname = some value
|
strname = some value
|
Assign a Value to a Variable
You can
assign a value to a variable like this:var strname = "Hege"
|
strname = "Hege"
|
Lifetime of Variables
When you
declare a variable within a function, the variable can only be accessed within
that function. When you exit the function, the variable is destroyed. These
variables are called local variables. You can have local variables with the
same name in different functions, because each is recognized only by the
function in which it is declared.If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
JavaScript
If...Else Statements
Conditional
statements in JavaScript are used to perform different actions based on
different conditions.
Conditional Statements
Very
often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.In JavaScript we have the following conditional statements:
- if
statement - use this statement if you want to
execute some code only if a specified condition is true
- if...else
statement - use this statement if you want to
execute some code if the condition is true and another code if the
condition is false
- if...else
if....else statement - use this statement if you
want to select one of many blocks of code to be executed
- switch
statement - use this statement if you want to
select one of many blocks of code to be executed
If Statement
You
should use the if statement if you want to execute some code only if a
specified condition is true.
Syntax
if (condition)
{
code to be executed if condition is true }
|
Example 1
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date()
var time=d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
</script>
|
Example 2
<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date()
var time=d.getHours()
if (time==11)
{
document.write("<b>Lunch-time!</b>")
}
</script>
|
Notice that there is no ..else.. in this syntax. You just tell the code to execute some code only if the specified condition is true.
If...else Statement
If you
want to execute some code if a condition is true and another code if the
condition is not true, use the if....else statement.
Syntax
if (condition)
{
code to be executed if condition is true }
else
{
code to be executed if condition is not true }
|
Example
<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("Good morning!")
}
else
{
document.write("Good day!")
}
</script>
|
If...else if...else Statement
You
should use the if....else if...else statement if you want to select one of many
sets of lines to execute.
Syntax
if (condition1)
{
code to be executed if condition1 is true }
else if (condition2)
{
code to be executed if condition2 is true }
else
{
code to be executed if condition1 and
condition2 are not true }
|
Example
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>
|
JavaScript Switch
Statement
Conditional
statements in JavaScript are used to perform different actions based on
different conditions.
The JavaScript Switch Statement
You
should use the switch statement if you want to select one of many blocks of
code to be executed.
Syntax
switch(n)
{
case 1:
execute code block 1
break
case 2:
execute code block 2
break
default:
code to be executed if n is
different from case 1 and 2
}
|
Example
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("Finally Friday")
break
case 6:
document.write("Super Saturday")
break
case 0:
document.write("Sleepy Sunday")
break
default:
document.write("I'm looking forward to this weekend!")
}
</script>
|
JavaScript
Operators
Arithmetic Operators
Operator
|
Description
|
Example
|
Result
|
+
|
Addition
|
x=2
y=2 x+y |
4
|
-
|
Subtraction
|
x=5
y=2 x-y |
3
|
*
|
Multiplication
|
x=5
y=4 x*y |
20
|
/
|
Division
|
15/5
5/2 |
3
2.5 |
%
|
Modulus (division remainder)
|
5%2
10%8 10%2 |
1
2 0 |
++
|
Increment
|
x=5
x++ |
x=6
|
--
|
Decrement
|
x=5
x-- |
x=4
|
Assignment Operators
Operator
|
Example
|
Is The Same As
|
=
|
x=y
|
x=y
|
+=
|
x+=y
|
x=x+y
|
-=
|
x-=y
|
x=x-y
|
*=
|
x*=y
|
x=x*y
|
/=
|
x/=y
|
x=x/y
|
%=
|
x%=y
|
x=x%y
|
Comparison Operators
Operator
|
Description
|
Example
|
==
|
is equal to
|
5==8 returns false
|
===
|
is equal to (checks for both
value and type)
|
x=5
x==y
returns truey="5" x===y returns false |
!=
|
is not equal
|
5!=8 returns true
|
>
|
is greater than
|
5>8 returns false
|
<
|
is less than
|
5<8 returns true
|
>=
|
is greater than or equal to
|
5>=8 returns false
|
<=
|
is less than or equal to
|
5<=8 returns true
|
Logical Operators
Operator
|
Description
|
Example
|
&&
|
and
|
x=6
(x
< 10 && y > 1) returns truey=3 |
||
|
or
|
x=6
(x==5
|| y==5) returns falsey=3 |
!
|
not
|
x=6
!(x==y)
returns truey=3 |
String Operator
A string
is most often text, for example "Hello World!". To stick two or more
string variables together, use the + operator.txt1="What a very"
txt2="nice day!"
txt3=txt1+txt2
|
To add a space between two string variables, insert a space into the expression, OR in one of the strings.
txt1="What a very"
txt2="nice day!"
txt3=txt1+" "+txt2
or
txt1="What a very "
txt2="nice day!"
txt3=txt1+txt2
|
Conditional Operator
JavaScript
also contains a conditional operator that assigns a value to a variable based
on some condition.
Syntax
variablename=(condition)?value1:value2
|
Example
greeting=(visitor=="PRES")?"Dear President ":"Dear "
|
JavaScript Popup
Boxes
In
JavaScript we can create three kinds of popup boxes: Alert box, Confirm box,
and Prompt box.
Alert Box
An alert
box is often used if you want to make sure information comes through to the
user.When an alert box pops up, the user will have to click "OK" to proceed.
Syntax:
alert("sometext")
|
Confirm Box
A confirm
box is often used if you want the user to verify or accept something.When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax:
confirm("sometext")
|
Prompt Box
A prompt
box is often used if you want the user to input a value before entering a page.When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:
prompt("sometext","defaultvalue")
|
JavaScript
Functions
A
function is a reusable code-block that will be executed by an event, or when
the function is called.
JavaScript Functions
To keep
the browser from executing a script as soon as the page is loaded, you can
write your script as a function.A function contains some code that will be executed only by an event or by a call to that function.
You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).
Functions are defined at the beginning of a page, in the <head> section.
Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>
|
If the line: alert("Hello world!!"), in the example above had not been written within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before the user hits the button. We have added an onClick event to the button that will execute the function displaymessage() when the button is clicked.
How to Define a Function
The
syntax for creating a function is:function functionname(var1,var2,...,varX)
{
some code }
|
Note: A function with no parameters must include the parentheses () after the function name:
function functionname()
{
some code }
|
The return Statement
The
return statement is used to specify the value that is returned from the
function.So, functions that are going to return a value must use the return statement.
Example
The
function below should return the product of two numbers (a and b):function prod(a,b)
{
x=a*b
return x
}
|
product=prod(2,3)
|
JavaScript For
Loop
Loops in
JavaScript are used to execute the same block of code a specified number of
times or while a specified condition is true.
JavaScript Loops
Very
often when you write code, you want the same block of code to run over and over
again in a row. Instead of adding several almost equal lines in a script we can
use loops to perform a task like this.In JavaScript there are two different kind of loops:
- for
- loops through a block of code a
specified number of times
- while
- loops through a block of code while
a specified condition is true
The for Loop
The for
loop is used when you know in advance how many times the script should run.Syntax
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
|
Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.
Note: The increment parameter could also be negative, and the <= could be any comparing statement.
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
|
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
|
The while loop
JavaScript While
Loop
Loops in
JavaScript are used to execute the same block of code a specified number of
times or while a specified condition is true.
The while loop
The
while loop is used when you want the loop to execute and continue executing while
the specified condition is true. while (var<=endvalue)
{
code to be executed
}
|
Example
Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.
<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>
</body>
</html>
|
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
|
The do...while Loop
The
do...while loop is a variant of the while loop. This loop will always execute a
block of code ONCE, and then it will repeat the loop as long as the specified
condition is true. This loop will always be executed at least once, even if the
condition is false, because the code is executed before the condition is tested.do
{
code to be executed
}
while (var<=endvalue)
|
<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>
|
The number is 0
|
JavaScript Break
and Continue
There
are two special statements that can be used inside loops: break and continue.
JavaScript break and continue Statements
There
are two special statements that can be used inside loops: break and continue.
Break
The
break command will break the loop and continue executing the code that follows
after the loop (if any).Example
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
|
The number is 0
The number is 1
The number is 2
|
Continue
The
continue command will break the current loop and continue with the next value.Example
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
|
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
|
JavaScript
For...In Statement
The
for...in statement is used to loop (iterate) through the elements of an array
or through the properties of an object.
JavaScript For...In Statement
The
for...in statement is used to loop (iterate) through the elements of an array
or through the properties of an object.The code in the body of the for ... in loop is executed once for each element/property.
Syntax
for (variable in object)
{
code to be executed
}
|
Example
Using
for...in to loop through an array:<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
|
JavaScript Events
Events
are actions that can be detected by JavaScript.
Events
By using
JavaScript, we have the ability to create dynamic web pages. Events are actions
that can be detected by JavaScript.Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
Examples of events:
- A
mouse click
- A web
page or an image loading
- Mousing
over a hot spot on the web page
- Selecting
an input box in an HTML form
- Submitting
an HTML form
- A
keystroke
Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!
onload and onUnload
The
onload and onUnload events are triggered when the user enters or leaves the
page.The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
onFocus, onBlur and onChange
The
onFocus, onBlur and onChange events are often used in combination with
validation of form fields.Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:
<input type="text" size="30"
id="email" onchange="checkEmail()">;
|
onSubmit
The
onSubmit event is used to validate ALL form fields before submitting it.Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
|
onMouseOver and onMouseOut
onMouseOver
and onMouseOut are often used to create "animated" buttons.Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:
<a href="http://www.w3schools.com"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3schools.gif" width="100" height="30">
</a>
|
JavaScript
Try...Catch Statement
The
try...catch statement allows you to test a block of code for errors.
JavaScript - Catching Errors
When
browsing Web pages on the internet, we all have seen a JavaScript alert box
telling us there is a runtime error and asking "Do you wish to
debug?". Error message like this may be useful for developers but not for
users. When users see errors, they often leave the Web page.This chapter will teach you how to trap and handle JavaScript error messages, so you don't lose your audience.
There are two ways of catching errors in a Web page:
- By
using the try...catch statement (available in IE5+, Mozilla 1.0,
and Netscape 6)
- By
using the onerror event. This is the old standard solution to catch
errors (available since Netscape 3)
Try...Catch Statement
The try...catch
statement allows you to test a block of code for errors. The try block contains
the code to be run, and the catch block contains the code to be executed if an
error occurs.
Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
|
Example 1
The
example below contains a script that is supposed to display the message
"Welcome guest!" when you click on a button. However, there's a typo
in the message() function. alert() is misspelled as adddlert(). A JavaScript
error occurs:<html>
<head>
<script type="text/javascript">
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
|
The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="There was an error on this page.\n\n"
txt+="Error description: " + err.description + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
|
Example 2
The next
example uses a confirm box to display a custom message telling users they can
click OK to continue viewing the page or click Cancel to go to the homepage. If
the confirm method returns false, the user clicked Cancel, and the code
redirects the user. If the confirm method returns true, the code does nothing:<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="There was an error on this page.\n\n"
txt+="Click OK to continue viewing this page,\n"
txt+="or Cancel to return to the home page.\n\n"
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/"
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
|
The onerror Event
The
onerror event will be explained soon, but first we will learn how to use the
throw statement to create an exception. The throw statement can be used
together with the try...catch statement.
JavaScript
Throw Statement
The
throw statement allows you to create an exception.
The Throw Statement
The
throw statement allows you to create an exception. If you use this statement
together with the try...catch statement, you can control program flow and
generate accurate error messages.
Syntax
throw(exception)
|
Note that throw is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
Example 1
The
example below determines the value of a variable called x. If the value of x is
higher than 10 or lower than 0 we are going to throw an error. The error is
then caught by the catch argument and the proper error message is displayed:<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>
|
JavaScript The
onerror Event
Using
the onerror event is the old standard solution to catch errors in a web page.
The onerror Event
We have
just explained how to use the try...catch statement to catch errors in a web
page. Now we are going to explain how to use the onerror event for the same
purpose.The onerror event is fired whenever there is a script error in the page.
To use the onerror event, you must create a function to handle the errors. Then you call the function with the onerror event handler. The event handler is called with three arguments: msg (error message), url (the url of the page that caused the error) and line (the line where the error occurred).
Syntax
onerror=handleErr
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
|
Example
The
following example shows how to catch the error with the onerror event:<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
|
JavaScript Special
Characters
In
JavaScript you can add special characters to a text string by using the
backslash sign.
Insert Special Characters
The
backslash (\) is used to insert apostrophes, new lines, quotes, and other
special characters into a text string.Look at the following JavaScript code:
var txt="We are the so-called "Vikings" from the north."
document.write(txt)
|
To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal:
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
|
Here is another example:
document.write ("You \& me are singing!")
|
You & me are singing!
|
Code
|
Outputs
|
\'
|
single quote
|
\"
|
double quote
|
\&
|
ampersand
|
\\
|
backslash
|
\n
|
new line
|
\r
|
carriage return
|
\t
|
tab
|
\b
|
backspace
|
\f
|
form feed
|
JavaScript
Objects Introduction
JavaScript
is an Object Oriented Programming (OOP) language.
An OOP
language allows you to define your own objects and make your own variable
types.
Object Oriented Programming
JavaScript
is an Object Oriented Programming (OOP) language. An OOP language allows you to
define your own objects and make your own variable types.
An object has properties and methods.
Properties
Properties
are the values associated with an object.In the following example we are using the length property of the String object to return the number of characters in a string:
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
The
output of the code above will be:12
Methods
Methods
are the actions that can be performed on objects.In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters:
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase())
</script>
The
output of the code above will be:HELLO WORLD!
JavaScript
String Object
The
String object is used to manipulate a stored piece of text.
String object
The
String object is used to manipulate a stored piece of text.Examples of use:
The following example uses the length property of the String object to find the length of a string:
var txt="Hello world!"
document.write(txt.length)
|
12
|
var txt="Hello world!"
document.write(txt.toUpperCase())
|
HELLO WORLD!
|
JavaScript
Date Object
The Date
object is used to work with dates and times.
Defining Dates
The Date
object is used to work with dates and times. We define a Date object with the new keyword. The following code line defines a Date object called myDate:
var myDate=new Date()
|
Manipulate Dates
We can
easily manipulate the date by using the methods available for the Date object.In the example below we set a Date object to a specific date (14th January 2010):
var myDate=new Date()
myDate.setFullYear(2010,0,14)
|
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
|
Comparing Dates
The Date
object is also used to compare two dates.The following example compares today's date with the 14th January 2010:
var myDate=new Date()
myDate.setFullYear(2010,0,14)
var today = new Date()
if (myDate>today)
alert("Today is before 14th January 2010")
else
alert("Today is after 14th January 2010")
|
JavaScript Array
Object
The
Array object is used to store a set of values in a single variable name.
Defining Arrays
The
Array object is used to store a set of values in a single variable name.We define an Array object with the new keyword. The following code line defines an Array object called myArray:
var myArray=new Array()
|
1:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
|
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
|
var mycars=new Array("Saab","Volvo","BMW")
|
Accessing Arrays
You can
refer to a particular element in an array by referring to the name of the array
and the index number. The index number starts at 0.The following code line:
document.write(mycars[0])
|
Saab
|
Modify Values in Existing Arrays
To
modify a value in an existing array, just add a new value to the array with a
specified index number:mycars[0]="Opel"
|
document.write(mycars[0])
|
Opel
|
JavaScript Boolean
Object
The
Boolean object is used to convert a non-Boolean value to a Boolean value (true
or false).
Boolean Object
The
Boolean object is an object wrapper for a Boolean value.The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).
We define a Boolean object with the new keyword. The following code line defines a Boolean object called myBoolean:
var myBoolean=new Boolean()
|
All the following lines of code create Boolean objects with an initial value of false:
var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)
|
var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")
|
JavaScript
Math Object
The Math
object allows you to perform common mathematical tasks.
Math Object
The Math
object allows you to perform common mathematical tasks.The Math object includes several mathematical values and functions. You do not need to define the Math object before using it.
Mathematical Values
JavaScript
provides eight mathematical values (constants) that can be accessed from the
Math object. These are: E, PI, square root of 2, square root of 1/2, natural
log of 2, natural log of 10, base-2 log of E, and base-10 log of E.You may reference these values from your JavaScript like this:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
|
Mathematical Methods
In
addition to the mathematical values that can be accessed from the Math object
there are also several functions (methods) available.Examples of functions (methods):
The following example uses the round() method of the Math object to round a number to the nearest integer:
document.write(Math.round(4.7))
|
5
|
document.write(Math.random())
|
0.5403620648469515
|
document.write(Math.floor(Math.random()*11))
|
9
|
JavaScript Form
Validation
JavaScript
can be used to validate input data in HTML forms before sending off the content
to a server.
JavaScript Form Validation
JavaScript
can be used to validate input data in HTML forms before sending off the content
to a server.Form data that typically are checked by a JavaScript could be:
- has
the user left required fields empty?
- has
the user entered a valid e-mail address?
- has
the user entered a valid date?
- has
the user entered text in a numeric field?
Required Fields
The
function below checks if a required field has been left empty. If the required
field is blank, an alert box alerts a message and the function returns false.
If a value is entered, the function returns true (means that data is OK):function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
|
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this)"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
|
E-mail Validation
The
function below checks if the content has the general syntax of an email.This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
|
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this);"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
|
JavaScript
Animation
With
JavaScript we can create animated images.
JavaScript Animation
It is
possible to use JavaScript to create animated images.The trick is to let a JavaScript change between different images on different events.
In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between the images.
The HTML Code
The HTML
code looks like this:<a href="http://www.w3schools.com" target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1" />
</a>
|
The onMouseOver event tells the browser that once a mouse is rolled over the image, the browser should execute a function that will replace the image with another image.
The onMouseOut event tells the browser that once a mouse is rolled away from the image, another JavaScript function should be executed. This function will insert the original image again.
IMPORTANT! The mouse events are added to the <a> tag, and not to the <img> tag. Unfortunately, browsers do not support mouse events on images!
The JavaScript Code
The
changing between the images is done with the following JavaScript:<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
|
The function mouseOut() causes the image to shift to "b_pink.gif".
The Entire Code
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1" />
</a>
</body>
</html>
|
JavaScript Object Reference
Objects
|
|||
JavaScript Object Reference - Anchor
An anchor is
a place in the page that is the target of a link.
Anchor
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
name
|
Specifies
the anchor's name.
|
1.2
|
text
|
Specifies
the text of an anchor.
|
1.2
|
x
|
Pixels
from the left edge of the document.
|
1.2
|
y
|
Pixels
from the top edge of the document.
|
1.2
|
JavaScript Object Reference - Applet
Applet
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
The Applet object inherits
all public properties of the Java applet.
|
||
Methods
|
||
Name
|
Description
|
Ver.
|
The Applet object inherits
all public methods of the Java applet.
|
||
JavaScript Object Reference - Array
An array is a
list of elements indexed sequentially starting at zero. JavaScript array
elements, as with their variables, can be of differing types.
Array
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
constructor
|
The
function that creates and object's prototype.
|
1.1
|
index
|
Reflects
original string against what the regular expression matched.
|
1.1
|
input
|
For
an array created by a regular expression match, reflects the original string
against that which the regular expression was matched.
|
1.1
|
length
|
The
number of elements in an array.
|
1.3
|
prototype
|
Allows
the addition of properties to all objects.
|
1.1
|
Methods
|
||
Name
|
Description
|
Ver.
|
concat
|
Combines
two arrays and returns a new array.
|
1.1
|
join
|
Joins
all elements of an array into a string.
|
1.1
|
pop
|
Removes
the last element from an array and returns that element.
|
1.1
|
push
|
Adds
elements to the end of an array and returns the array's length.
|
1.3
|
reverse
|
Makes
the first element the last and vise-versa.
|
1.1
|
shift
|
Takes
away 1st element and returns the element.
|
1.1
|
slice
|
Takes
a section out of an array and returns a new array.
|
1.1
|
splice
|
Adds
or removes elements in an array.
|
1.3
|
sort
|
Sorts
the elements in an array.
|
1.1
|
toSource
|
Used
to to create a new array. Overrides the Object.toSource method.
|
1.3
|
toString
|
Returns
a string representing the array and its elements. Overrides the
Object.toString method.
|
1.1
|
unshift
|
Adds
elements to the front of the array and returns its new length.
|
1.1
|
valueOf
|
Returns
the primitive value of the array. Overrides the Object.valueOf method.
|
1.1
|
JavaScript Object Reference - Boolean
Boolean
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
constructor
|
Specifies
the function that creates an object's prototype.
|
1.1
|
prototype
|
Defines
a property that is shared by all Boolean objects.
|
1.1
|
Methods
|
||
Name
|
Description
|
Ver.
|
toSource
|
Use
this value to create a new object. Overrides the Object.toSource method.
|
1.3
|
toString
|
Returns
a string representing the defined object. Overrides the Object.toString
method.
|
1.1
|
valueOf
|
Returns
the primitive value of a Boolean object. Overrides the Object.valueOf method.
|
1.1
|
JavaScript Object Reference - Button
Button
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
form
|
Defines
what form contains the button object.
|
1.0
|
name
|
Name
of the button.
|
1.0
|
type
|
Type
of the button.
|
1.1
|
value
|
Value
of the form.
|
1.0
|
Methods
|
||
Name
|
Description
|
Ver.
|
blur
|
Takes
focus off the button.
|
1.1
|
click
|
Simulates
a mouse click on the button.
|
1.0
|
focus
|
Puts
focus on the button.
|
1.1
|
handleEvent
|
Invokes
the handler for the specified event.
|
1.2
|
JavaScript Object Reference -
Checkbox
Checkbox
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
checked
|
Boolean
property that reflects the state of the checkbox.
|
1.0
|
defaultChecked
|
Boolean
property that reflects the CHECKED attribute.
|
1.0
|
form
|
Defines
what form contains the button object.
|
1.0
|
name
|
Name
of the button.
|
1.0
|
type
|
Type
of the button.
|
1.1
|
value
|
Value
of the form.
|
1.0
|
Methods
|
||
Name
|
Description
|
Ver.
|
blur
|
Takes
focus off the button.
|
1.1
|
click
|
Simulates
a mouse click on the button.
|
1.0
|
focus
|
Puts
focus on the button.
|
1.1
|
handleEvent
|
Invokes
the handler for the specified event.
|
1.2
|
JavaScript Object Reference - Date
Date
|
||
Date
|
||
Name
|
Description
|
Ver.
|
constructor
|
Specifies
function that creates an object's prototype.
|
1.0
|
prototype
|
Allows
additional properties to a Date object.
|
1.0
|
Methods
|
||
Name
|
Description
|
Ver.
|
getDate
|
Returns
day of the month from your local time.
|
1.0
|
getDay
|
Returns
day of the week from your local time.
|
1.0
|
getFullYear
|
Returns
the year from your local time.
|
1.3
|
getHours
|
Returns
the hour from your local time.
|
1.0
|
getMilliseconds
|
Returns
the milliseconds from your local time.
|
1.3
|
getMinutes
|
Returns
the minutes from your local time.
|
1.0
|
getMonth
|
Returns
the month from your local time.
|
1.0
|
getSeconds
|
Returns
the seconds from your local time.
|
1.0
|
getTime
|
Returns
the numeric value for the time from your local time.
|
1.0
|
getTimezoneOffset
|
Returns
the time-zone offset in minutes from your local time.
|
1.0
|
getUTCDate
|
Returns
day of the month according to universal time.
|
1.3
|
getUTCDay
|
Returns
day of the week according to universal time.
|
1.3
|
getUTCFullYear
|
Returns
the year according to universal time..
|
1.3
|
getUTCHours
|
Returns
the hour according to universal time..
|
1.3
|
getUTCMilliseconds
|
Returns
the milliseconds according to universal time..
|
1.3
|
getUTCMinutes
|
Returns
the minutes according to universal time..
|
1.3
|
getUTCMonth
|
Returns
the month according to universal time..
|
1.3
|
getUTCSeconds
|
Returns
the seconds according to universal time..
|
1.3
|
getYear
|
Returns
the date from your local time.
|
1.0
|
parse
|
Number
of milliseconds in a date string since January 1, 1970, 00:00:00, local time.
|
1.0
|
setDate
|
Sets
the day of the month from your local time.
|
1.0
|
setFullYear
|
Sets
the year from your local time.
|
1.3
|
setHours
|
Sets
the hour from your local time.
|
1.0
|
setMilliseconds
|
Sets
the milliseconds from your local time.
|
1.3
|
setMinutes
|
Sets
the minutes from your local time.
|
1.0
|
setMonth
|
Sets
the month from your local time.
|
1.0
|
setSeconds
|
Sets
the seconds from your local time.
|
1.0
|
setTime
|
Sets
the numeric value for the time from your local time.
|
1.0
|
setUTCDate
|
Sets
day of the month according to universal time.
|
1.3
|
setUTCFullYear
|
Sets
the year according to universal time..
|
1.3
|
setUTCHours
|
Sets
the hour according to universal time..
|
1.3
|
setUTCMilliseconds
|
Sets
the milliseconds according to universal time..
|
1.3
|
setUTCMinutes
|
Sets
the minutes according to universal time..
|
1.3
|
setUTCMonth
|
Sets
the month according to universal time..
|
1.3
|
setUTCSeconds
|
Sets
the seconds according to universal time..
|
1.3
|
setYear
|
Sets
year for a specified date from your local time.
|
1.3
|
toGMTString
|
Converts
a date to a string, using the Internet GMT conventions.
|
1.0
|
toLocaleString
|
Converts
a date to a string, using the current location's conventions.
|
1.0
|
toSource
|
Use
this value to create a new object. Overrides the Object.toSource method.
|
1.3
|
toString
|
Returns
a string representing the specified Date object. Overrides the
Object.toString method.
|
1.0
|
toUTCString
|
Converts
a date to a string, using the universal time convention.
|
1.0
|
UTC
|
Returns
the number of milliseconds in a Date object since January 1, 1970, 00:00:00,
universal time.
|
1.0
|
valueOf
|
Returns
the primitive value of a Date object. Overrides the Object.valueOf method.
|
1.0
|
JavaScript Object Reference -
document
document
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
alinkColor
|
Specifies
the ALINK attribute.
|
1.0
|
anchors
|
Contains
an entry for each anchor in the document.
|
1.0
|
applets
|
Array
that contains an entry for each applet in the document.
|
1.1
|
bgColor
|
A
string that specifies the BGCOLOR attribute.
|
1.0
|
classes
|
Creates
a Style object that can specify a specific CLASS attribute.
|
1.2
|
cookie
|
Specifies
a cookie.
|
1.0
|
domain
|
Specifies
the domain name of the server that served a document.
|
1.0
|
embeds
|
An
array containing an entry for each plug-in in the document.
|
1.1
|
fgColor
|
A
string that specifies the TEXT attribute.
|
1.0
|
formName
|
A
separate property for each named form in the document.
|
1.1
|
forms
|
An
array a containing an entry for each form in the document.
|
1.1
|
height
|
The
height of the document, in pixels.
|
1.0
|
ids
|
Creates
a Style object that can specify the style of individual HTML tags.
|
1.2
|
images
|
An
array containing an entry for each image in the document.
|
1.0
|
lastModified
|
A
string that specifies the date the document was last modified.
|
1.0
|
layers
|
Array
containing an entry for each layer within the document.
|
1.2
|
linkColor
|
A
string that specifies the LINK attribute.
|
1.0
|
links
|
An
array containing an entry for each link in the document.
|
1.0
|
plugins
|
An
array containing an entry for each plug-in in the document.
|
1.1
|
referrer
|
A
string that specifies the URL of the calling document.
|
1.0
|
tags
|
Creates
a Style object that can specify the styles of HTML tags.
|
1.2
|
title
|
A
string that specifies the contents of the TITLE tag.
|
1.0
|
URL
|
A
string that specifies the complete URL of a document.
|
1.0
|
vlinkColor
|
A
string that specifies the VLINK attribute.
|
1.0
|
width
|
The
width of the document, in pixels.
|
1.0
|
Methods
|
||
Name
|
Description
|
Ver.
|
captureEvents
|
Sets
the document to capture all events of the specified type.
|
1.2
|
close
|
Closes
an output stream and forces data to display.
|
1.0
|
contextual
|
Uses
selection criteria to specify a Style object that can set the style of HTML
tags.
|
1.2
|
getSelection
|
Returns
a string containing the text of the selection.
|
1.2
|
handleEvent
|
Invokes
the handler for the specified event.
|
1.2
|
open
|
Opens
a stream to collect the output of write or writeln methods.
|
1.0
|
releaseEvents
|
Sets
the window or document to release captured events of the specified type,
sending the event to objects further along the event hierarchy.
|
1.2
|
routeEvent
|
Passes
a captured event along the normal event hierarchy.
|
1.2
|
write
|
Writes
HTML expressions to a document in the specified window.
|
1.0
|
writeln
|
Writes
HTML expressions to a document in the specified window and follows them with
a newline character.
|
1.0
|
JavaScript Object Reference - event
event
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
data
|
Passes
an array of strings containing the URLs of the dropped objects to the
DragDrop event.
|
1.2
|
height
|
Represents
the height of the window or frame.
|
1.2
|
layerX
|
Number
specifying either the object width when passed with the resize event, or the
cursor's horizontal position in pixels relative to the layer in which the
event occurred.
|
1.2
|
layerY
|
Number
specifying either the object height when passed with the resize event, or the
cursor's vertical position in pixels relative to the layer in which the event
occurred.
|
1.2
|
modifiers
|
String
specifying the modifier keys associated with a mouse or key event.
|
1.2
|
pageX
|
Number
specifying the cursor's horizontal position in pixels on the page.
|
1.2
|
pageY
|
Number
specifying the cursor's vertical position in pixels on the page.
|
1.2
|
screenX
|
Number
specifying the cursor's horizontal position in pixels on the screen.
|
1.2
|
screenY
|
Number
specifying the cursor's vertical position in pixels on the screen.
|
1.2
|
target
|
String
representing the object to which the event was originally sent.
|
1.2
|
which
|
Number
specifying either the mouse button that was pressed or the ASCII value of a
pressed key. For a mouse, 1 is the left button, 2 is the middle button, and 3
is the right button.
|
1.2
|
width
|
The
width of the window or frame.
|
1.2
|
x
|
layerX.
|
1.2
|
y
|
layerY.
|
1.2
|
1.2
|
||
JavaScript Object Reference -
FileUpload
FileUpload
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
form
|
Specifies
the form containing the FileUpload object.
|
1.0
|
name
|
NAME
attribute of the form.
|
1.0
|
type
|
TYPE
attribute of the form.
|
1.1
|
value
|
Reflects
the current value of the file upload element's field.
|
1.0
|
Methods
|
||
Name
|
Description
|
Ver.
|
blur
|
Takes
focus off the object.
|
1.0
|
focus
|
Puts
focus on the object.
|
1.0
|
handleEvent
|
Invokes
the handler for the event.
|
1.2
|
select
|
Selects
the input area of the file upload field.
|
1.0
|
JavaScript Object Reference - form
form
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
action
|
ACTION
attribute.
|
1.0
|
elements
|
An
array reflecting all the elements in a form.
|
1.0
|
encoding
|
ENCTYPE
attribute.
|
1.0
|
length
|
Reflects
the number of elements on a form.
|
1.0
|
method
|
METHOD
attribute.
|
1.0
|
name
|
NAME
attribute.
|
1.0
|
target
|
TARGET
attribute.
|
1.0
|
Methods
|
||
Name
|
Description
|
Ver.
|
handleEvent
|
Invokes
the handler for the specified event.
|
1.2
|
reset
|
Simulates
a mouse click on a reset button for the calling form.
|
1.1
|
submit
|
Submits
a form.
|
1.0
|
JavaScript Object Reference - Frame
Frame
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
closed
|
Specifies
whether a window has been closed or not.
|
1.1
|
crypto
|
An
object which allows access to encryption features.
|
1.2
|
defaultStatus
|
Default
message displayed in the browser's status bar.
|
1.0
|
document
|
Information
on the document, provides methods for displaying HTML output to the user.
|
1.0
|
frames
|
An
array that reflects all the frames in a window.
|
1.0
|
history
|
Contains
information on the URLs that the client has visited within a window.
|
1.1
|
innerHeight
|
Specifies
the vertical dimension, in pixels, of the window's content area.
|
1.2
|
innerWidth
|
Specifies
the horizontal dimension, in pixels, of the window's content area.
|
1.2
|
length
|
The
number of frames in the window.
|
1.0
|
location
|
Information
on the current URL.
|
1.0
|
locationbar
|
Browser
window's location bar.
|
1.2
|
menubar
|
Browser
window's menu bar.
|
1.2
|
name
|
Unique
name used to refer to this window.
|
1.0
|
offscreenBuffering
|
Specifies
whether updates to a window are performed in an offscreen buffer.
|
1.2
|
opener
|
Specifies
the window name of the calling document when a window is opened using the
open method.
|
1.1
|
outerHeight
|
Specifies
the vertical dimension, in pixels, of the window's outside boundary.
|
1.2
|
outerWidth
|
Specifies
the horizontal dimension, in pixels, of the window's outside boundary.
|
1.2
|
pageXOffset
|
Provides
the current x-position, in pixels, of a window's viewed page.
|
1.2
|
pageYOffset
|
Provides
the current y-position, in pixels, of a window's viewed page.
|
1.2
|
parent
|
A
synonym for a window or frame whose frameset contains the current frame.
|
1.0
|
personalbar
|
Represents
the browser window's personal bar (also called the directories bar).
|
1.2
|
screenX
|
Specifies
the x-coordinate of the left edge of a window.
|
1.2
|
screenY
|
Specifies
the y-coordinate of the top edge of a window.
|
1.2
|
scrollbars
|
Represents
the browser window's scroll bars.
|
1.2
|
self
|
Refers
to the current window.
|
|
status
|
Specifies
a priority or transient message in the window's status bar.
|
|
statusbar
|
Represents
the browser window's status bar.
|
|
toolbar
|
Represents
the browser window's toolbar.
|
|
top
|
Refers
to the topmost browser window.
|
|
window
|
Refers
to the current window.
|
|
Methods
|
||
Name
|
Description
|
Ver.
|
alert
|
Displays
an Alert dialog box with a message and an OK button.
|
|
atob
|
Decodes
a string of data which has been encoded using base-64 encoding.
|
|
back
|
Undoes
the last history step in any frame within the top-level window.
|
|
blur
|
Removes
focus from the specified object.
|
|
btoa
|
Creates
a base-64 encoded string.
|
|
captureEvents
|
Sets
the window or document to capture all events of the specified type.
|
|
clearInterval
|
Cancels
a timeout that was set with the setInterval method.
|
|
clearTimeout
|
Cancels
a timeout that was set with the setTimeout method.
|
|
close
|
Closes
the specified window.
|
|
confirm
|
Displays
a Confirm dialog box with the specified message and OK and Cancel buttons.
|
|
crypto.random
|
Returns
a pseudo-random string whose length is the specified number of bytes.
|
|
crypto.signText
|
Returns
a string of encoded data which represents a signed object.
|
|
disableExternalCapture
|
Disables
external event capturing set by the enableExternalCapture method.
|
|
enableExternalCapture
|
Allows
a window with frames to capture events in pages loaded from different
locations (servers).
|
|
find
|
Finds
the specified text string in the contents of the specified window.
|
|
focus
|
Gives
focus to the specified object.
|
|
forward
|
Loads
the next URL in the history list.
|
|
handleEvent
|
Invokes
the handler for the specified event.
|
|
home
|
Points
the browser to the URL specified in preferences as the user's home page.
|
|
moveBy
|
Moves
the window by the specified amounts.
|
|
moveTo
|
Moves
the top-left corner of the window to the specified screen coordinates.
|
|
open
|
Opens
a new web browser window.
|
|
print
|
Prints
the contents of the window or frame.
|
|
prompt
|
Displays
a Prompt dialog box with a message and an input field.
|
|
releaseEvents
|
Sets
the window to release captured events of the specified type, sending the
event to objects further along the event hierarchy.
|
|
resizeBy
|
Resizes
an entire window by moving the window's bottom-right corner by the specified
amount.
|
|
resizeTo
|
Resizes
an entire window to the specified outer height and width.
|
|
routeEvent
|
Passes
a captured event along the normal event hierarchy.
|
|
scroll
|
Scrolls
a window to a specified coordinate.
|
|
scrollBy
|
Scrolls
the viewing area of a window by the specified amount.
|
|
scrollTo
|
Scrolls
the viewing area of the window to the specified coordinates, such that the
specified point becomes the top-left corner.
|
|
setHotKeys
|
Enables
or disables hot keys in a window which does not have menus.
|
|
setInterval
|
Evaluates
an expression or calls a function every time a specified number of
milliseconds elapses.
|
|
setResizable
|
Specifies
whether a user is permitted to resize a window.
|
|
setTimeout
|
Evaluates
an expression or calls a function once after a specified number of
milliseconds has elapsed.
|
|
setZOptions
|
Specifies
the z-order stacking behavior of a window.
|
|
stop
|
Stops
the current download.
|
|
JavaScript Object Reference -
Function
Function
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
arguments
|
The
array of arguments passed to the function.
|
1.1
|
arity
|
Specifies
the number of arguments a functions expects.
|
1.2
|
constructor
|
Specifies
the function that creates an object's prototype.
|
1.1
|
length
|
Specifies
the number of arguments expected by the function.
|
1.1
|
prototype
|
Allows
the addition of properties to a function object.
|
1.1
|
Methods
|
||
Name
|
Description
|
Ver.
|
apply
|
Allows
you to apply a method of another object in the context of a different object.
|
1.3
|
call
|
Allows
you to execute a method of another object in the context of a different
object.
|
1.3
|
toSource
|
Returns
a string representing the source code of the function.
|
1.3
|
toString
|
Returns
a string representing the source code of the function.
|
1.1
|
valueOf
|
Returns
a string representing the source code of the function.
|
1.1
|
JavaScript Object Reference - Hidden
Hidden
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
form
|
Specifies
the form containing the Hidden object.
|
1.0
|
name
|
Reflects
the NAME attribute.
|
1.1
|
type
|
Reflects
the TYPE attribute.
|
1.1
|
value
|
Reflects
the current value of the Hidden object.
|
1.0
|
JavaScript Object Reference - History
History
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
current
|
Specifies
the URL of the current history entry.
|
1.1
|
length
|
Reflects
the number of entries in the history list.
|
1.0
|
Next
|
Specifies
the URL of the next history entry.
|
1.1
|
previous
|
Specifies
the URL of the previous history entry.
|
1.1
|
Methods
|
||
Name
|
Description
|
Ver.
|
back
|
Loads
the previous URL in the history list.
|
1.0
|
forward
|
Loads
the next URL in the history list.
|
1.0
|
Go
|
Loads
a URL from the history list.
|
1.0
|
JavaScript Object Reference - Image
Image
|
||
Properties
|
||
Name
|
Description
|
Ver.
|
border
|
Reflects
the BORDER attribute.
|
1.1
|
complete
|
Boolean
value indicating whether the web browser has completed its attempt to load
the image.
|
1.1
|
height
|
Reflects
the HEIGHT attribute.
|
1.1
|
hspace
|
Reflects
the HSPACE attribute.
|
1.1
|
lowsrc
|
Reflects
the LOWSRC attribute.
|
1.1
|
name
|
Reflects
the NAME attribute.
|
1.1
|
Src
|
Reflects
the SRC attribute.
|
1.1
|
vspace
|
Reflects
the VSPACE attribute.
|
1.1
|
width
|
Reflects
the WIDTH attribute.
|
1.1
|
Methods
|
||
Name
|
Description
|
Ver.
|
handleEvent
|
Invokes
the handler for the specified event.
|
1.1
|
JavaScript Object Reference - Java
Java
|
||
Properties
|
||
Methods
|
||
The
java object is a top-level, predefined JavaScript object. You can
automatically access it without using a constructor or calling a method.
|
||
JavaScript Objects
This is a table of the most
commonly used JavaScript objects, with all of their properties, methods, and
event handlers.
For additional information on
JavaScript:
·
Visit Netscape's JavaScript Documentation, which has a complete
listing of these objects as well as loads of other information on the
JavaScript spec.
Hierarchy
Objects
|
|||
Object
|
Properties
|
Methods
|
Event
Handlers
|
Window
|
defaultStatus
frames opener parent scroll self status top window |
alert
blur close confirm focus open prompt clearTimeout setTimeout |
onLoad
onUnload onBlur onFocus |
Frame
|
defaultStatus
frames opener parent scroll self status top window |
alert
blur close confirm focus open prompt clearTimeout setTimeout |
none (The onLoad and
onUnload event handlers belong to the Window object)
|
Location
|
hash
host hostname href pathname por protocol search |
reload
replace |
none
|
History
|
length
forward go |
back
|
none
|
Navigator
|
appCodeName
appName appVersion mimeTypes plugins userAgent |
javaEnabled
|
none
|
document
|
alinkColor
anchors applets area bgColor cookie fgColor forms images lastModified linkColor links location referrer title vlinkColor |
clear
close open write writeln |
none (the onLoad and
onUnload event handlers belong to the Window object.
|
image
|
border
complete height hspace lowsrc name src vspace width |
none
|
none
|
form
|
action
elements encoding FileUpload method name target |
submit
reset |
onSubmit
onReset |
text
|
defaultValue
name type value |
focus
blur select |
onBlur
onCharge onFocus onSelect |
Built-in
Objects
|
|||
Array
|
length
|
join
reverse sort xx |
none
|
Date
|
none
|
getDate
getDay getHours getMinutes getMonth getSeconds getTime getTimeZoneoffset getYear parse prototype setDate setHours setMinutes setMonth setSeconds setTime setYear toGMTString toLocaleString UTC |
none
|
String
|
length
prototype |
anchor
big blink bold charAt fixed fontColor fontSize indexOf italics lastIndexOf link small split strike sub substring sup toLowerCase toUpperCase |
Window
|
No comments:
Post a Comment