JavaScript Tutorials

JavaScript can be used to validate forms, provide interactive calendars, post the current day's headlines, produce background effects on a Web page, and play games, among many other things.

Netscape created JavaScript in 1995. It was originally called "LiveScript”.

An Introduction

JavaScript is not Java

JavaScript can either be client-side or server-side

JavaScript is an object-based scripting language

JavaScript is cross-platform

JavaScript comes in different 'flavors' JavaScript: This was the name given by Netscape, who invented it. JScript: This is the scripting language invented by Microsoft to compete with JavaScript. ECMAScript: The de facto international standard for JavaScript. This standard covers the core of the language.

Comments

// This whole line will be ignored by the JS interpreter

var myOldCar = Ford // The first part will be interpreted; this part will be ignored.

If you need to comment out several lines, you would begin with a forward slash and an asterisk, "/*", and end with an asterisk and a forward slash, "*/". For example,

/* All of this, all three lines,

will be ignored in their entirety

by the JavaScript interpreter */

Remember that JavaScript is case-sensitive.

Remember that the semicolon at the end of a statement is optional in JavaScript. But it is a good programming practice to include one.

Where Does the Script Go?

There are three places where a script can be located:

In the top section of the page ("head"), between the and tags; In the middle section of the page ("body"), between the and tags; or In a separate file.

Placing the Script on the Page

When the script is placed on the page, it is located between a set of container tags that look like:

Data Types

JavaScript is a "loosely typed" language, meaning you don't need to specify the type of data being declared in a variable.

There are four basic data types used in JavaScript: strings, numbers, booleans, and nulls.

1. Strings

The following are examples of a string:

  "cheeseburger"

  "123 Main Street, Anytown, FL 32714"

  var favfood="a big juicy hamburger";  // Correct

  var favfood='a big juicy hamburger';  // Correct

  var favfood="a big juicy hamburger';  // Incorrect

HTML elements can also be used inside of strings. Doing so will help you to create more dynamic pages.

document.write("This is really fantastic!");

2. Numbers

· JavaScripts recognizes two types of numbers: integers and floating point numbers.

· Integers are whole numbers (e.g., 1, 20, 546).

· Floating point numbers are numbers that have a decimal point (e.g., 23.8, 23.890).

·         Default is floating point number.

3. Boolean

A Boolean data type is used for true or false statements. It's mostly used in if() statements:

  var myCar=Chevy;

  if (myCar==Chevy)

  ...

4. Null

A null variable has no value. A null variable is useful for testing input in scripts. Since it's a keyword, it doesn't need to be enclosed in quotation marks:

  var nothingNow=null;

Variables

A variable is declared using the var reserved word. A variable can be declared and initialized using one of two methods.

  var myName;

      myName="Lee";

  var myName="Lee";

Our First Script

Let's take a break and write our first script. First, open a new document in your text editor and insert the following HTML elements:

Top of Form

Just a Demo

This will give an alertbox.

The JavaScript Diaries: Part 2

This time, we use a prompt box. 

Just a Demo

A prompt is the result of this program.

Special Operators
  
  
   
   
Operator
   
   
   
Name
   
   
   
Description
   
  
  
   
   
?:
   
   
   
Conditional
   
   
   
A type of   if...else statement. A condition is placed before the (?) and a value is   placed on each side of the (:)
   
  
  
   
   
,
   
   
   
Comma
   
   
   
Used to   process a series of expressions
   
  
  
   
   
delete
   
   
   
Delete
   
   
   
Deletes an   object, property, or element from an array
   
  
  
   
   
in
   
   
   
In
   
   
   
Used to   inspect the contents of a specified object
   
  
  
   
   
instanceof
   
   
   
Instanceof
   
   
   
Tests an   object to see if it is of a specified object.
   
  
  
   
   
new
   
   
   
New
   
   
   
Creates an   instance of an object
   
  
  
   
   
this
   
   
   
This
   
   
   
Refers to the   current object
   
  
  
   
   
typeof
   
   
   
Typeof
   
   
   
Identifies the   type of value being evaluated
   
  
  
   
   
void
   
   
   
Void
   
   
   
Evaluates an   expression without returning a value
   
  
 
Writing Functions
 function giveName()
  {
     code goes here;
    code goes here;
  }
Calling a Function
giveName();.
Example:
Place this in the  portion:

Then, put this in the  portion:
Window Object Event Handlers
An event handler is a JavaScript
keyword that allows a script to perform certain functions based on events on a Web page. Anytime something happens — a page loads, a link is clicked, the mouse moves — an event happens. Many times it's desirable to control these events. This can be done by using event handlers. 
onLoad
   Thisevent handler is used to execute a script after a page has fully loaded. That
includes loading all scripts, graphics, plugins and Java applets. 

onUnload
  This event handler is used toexecute a script before the page in the browser is exited. It's executed in the same manner as the onLoadevent handler. An example would be:
onFocus
  This eventhandler executes whenever a window or form element is selected by the visitor
by clicking on the item, using the keyboard, or through manipulation by a script. An example is shown below: 
  Credit Card Number:
  
onBlur
This event handler is executedwhenever the window or form element loses the focus. It's the opposite of the onFocus event handler.
It can be used like this:
  Credit Card Number:
  
onError
  This event handler is executedwhenever an error is encountered. It's used to provide an alternative response when an error happens. If used, it should be placed toward the beginning of the script so it's available when the script is executed. An example would be:
window.onError = errpage();

 function errpage() {

  document.write(“Error”);

}

The history Object

Browsers store a list of URLs that the user has previously visited. This list enables the user to navigate to previously visited Web pages using the back and forward buttons in the browser. This list of URL's is called the browser's history. It's stored in the form of a list (a portion is pictured at right) that can be accessed by JavaScript. For security reasons, a JavaScript function can't read the URL's that are stored in the history object, so you can't use the list to figure out where your visitors have been.

Methods

back()
forward()

The back() and forward() methods do exactly what they say. They reload the previous page or go to the next page in the browser's history. They act exactly like the browser's Back and Forward buttons. The methods can be written as follows:

  onClick="history.back()"> // combine with line above
  onClick="history.forward()"> // combine with line above
  
go()
  The go() method is used to move forward or back more than one page at a time in the history list. This is done by placing the number of pages you want to go in the parentheses. Positive numbers move the browser forward; negative numbers move the browser backward. It's like moving in steps. If you want to go forward one page (one step), use this:

history.go(1)

To go back two pages (two steps), you would use this:

history.go(-2)

The problem with this method is that you need to make sure that the browser's history contains that many URLs.

The Date Object

JavaScript uses the Date() constructor to obtain and manipulate the day and time in a script. The information is taken from the user's computer and is only as accurate as the user's system.

Creating Dates

var d=new Date();

document.write("The date is "+ d.toLocaleDateString()+"
");

document.write("and the time is "+ d.toLocaleTimeString());

which would print as follows:

The date is Friday, September 22, 2006
and the time is 2:29:28 PM

Related Topics

Javascript tutorials

Tags:Java tutorias