Learn Java Script

Introduction

2009-04-30T01:04:00.001-07:00

JavaScript is a scripting language widely used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but be easier for non-programmers to work with.

"JavaScript" is a trademark of Sun Microsystems. It was used under license for technology invented and implemented by Netscape Communications and current entities such as the Mozilla Foundation.

Although best known for its use in websites (as client-side JavaScript), JavaScript is also used to enable scripting access to objects embedded in other applications (see below).

JavaScript, despite the name, is essentially unrelated to the Java programming language, although both have the common C syntax, and JavaScript copies many Java names and naming conventions. The language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then-dominant browser. The key design principles within JavaScript are inherited from the self and Scheme programming languages.

What's the difference between JavaScript and Java?

Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerfull enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitement because of its unique ability to run the same program on IBM, Mac, and UNIX computers. Java is not considered an easy-to-use language for non-programmers.

JavaScript is much simpler to use than Java. With JavaScript, if I want check a form for errors; I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence.

Object Oriented Programming

2009-04-30T01:02:00.001-07:00

What is Object Oriented Programming?
Everyone that wants to program JavaScript should at least try reading the following section. If you have trouble understanding it, don't worry. The best way to learn JavaScript is from the examples presented in this tutorial. After you have been through the lessons, come back to this page and read it again.

OOP is a programming technique (note: not a language structure - you don't even need an object-oriented language to program in an object-oriented fashion) designed to simplify complicated programming concepts. In essence, object-oriented programming revolves around the idea of user- and system-defined chunks of data, and controlled means of accessing and modifying those chunks.

Object-oriented programming consists of Objects, Methods and Properties. An object is basically a black box which stores some information. It may have a way for you to read that information and a way for you to write to, or change, that information. It may also have other less obvious ways of interacting with the information.

Some of the information in the object may actually be directly accessible; other information may require you to use a method to access it - perhaps because the way the information is stored internally is of no use to you, or because only certain things can be written into that information space and the object needs to check that you're not going outside those limits.

The directly accessible bits of information in the object are its properties. The difference between data accessed via properties and data accessed via methods is that with properties, you see exactly what you're doing to the object; with methods, unless you created the object yourself, you just see the effects of what you're doing.

Other JavaScript pages you read will probably refer frequently to objects, events, methods, and properties. This tutorial will teach by example, without focusing too heavily on OOP vocabulary. However, you will need a basic understanding of these terms to use other JavaScript references.

Objects and Properties
Your web page document is an object. Any table, form, button, image, or link on your page is also an object. Each object has certain properties (information about the object). For example, the background color of your document is written document.bgcolor. You would change the color of your page to red by writing the line: document.bgcolor="red"

The contents (or value) of a textbox named "password" in a form named "entryform" is document.entryform.password.value.

Methods
Most objects have a certain collection of things that they can do. Different objects can do different things, just as a door can open and close, while a light can turn on and off. A new document is opened with the method document.open() You can write "Hello World" into a document by typing document.write("Hello World") . open() and write() are both methods of the object: document.

Events
Events are how we trigger our functions to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event, as its name implies, will run the function when the user clicks on the button. Other events include OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.

How to

2009-04-30T00:46:00.001-07:00

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>

The code above will produce this output on an HTML page:

Hello World!

To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the type attribute to define the scripting language.

So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:

The word document.write is a standard JavaScript command for writing output to a page.

By entring the document.write command between the <script> 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>

HTML Comments to Handle Simple Browsers

Browsers that do not support JavaScript will display JavaScript as page content.
To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag can be used to "hide" the JavaScript. Just add an HTML comment tag  (end of comment) after the last JavaScript statement.

The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

Where use JavaScript

2009-04-30T00:43:00.001-07:00

Where should I put JavaScript?
It depends. You have three choices. Since a web page can have multiple scripts, you can use them all on the same page! Scripts can be in the <head> section, the <body> section, or an external file.

Scripts in the <head> section are loaded first, before the rest of the web page is loaded. Scripts in the <body> section are loaded at their position on the web page.

Are scripts executed automatically?
Not all scripts are executed automatically. Scripts with functions are not executed until they are called. You will learn that a script can be called when it is triggered by an event. One such event is clicking a button.

What is an external script?
An external script is saved in a separate file, like an external style sheet. By convention, the filename with javaScript scripts ends with .js (for JavaScript, naturally).

How do I use an external script?
In the <script> tag, add the src attribute to identify the location of the JavaScript file; for example:

<script src="global.js"></script>

Variables

2009-04-30T00:36:00.000-07:00

JavaScript Variables
As with algebra, JavaScript variables are used to hold values or expressions.
A variable can have a short name, like x, or a more descriptive name, like carname.
Rules for JavaScript variable names:

Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter or the underscore character

Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

A variable is a place holder in your computer's memory for information that can change. This place in memory is given a name in JavaScript so that you can easily refer to it. Declaring a variable is easy. All you have to do is precede the variable name with the JavaScript reserved word var as follows:

var myVariable

Once the variable is declared, you can set it to any one of the values shown in the above table. Here is an example:
myVariable = 5

Later on in the program you can change its value to something different:

myVariable = 33

You can even change its type by simply assigning it a different type of value. For instance our variable was originally assigned a number. We can make it a string later in the program by simply assigning it one as follows:

myVariable = "this is a string"

Note that the variables in some other languages, such a C, are strongly typed and you are not allowed to randomly change the variable's type as we did here.

You can initialize a variable and assign it a value at the same time as follows:

var myVariable = "JavaScript is cool"

This is method that you will probably use most of the time to declare and initialize your variables.
You can even leave out the var keyword as follows:

myVariable = "this is not too cool"

You will note that the variable name myVariable contains two words with the first letter of the second word capitalized. It is common practice in JavaScript to use small letters for variable names and to capitalize the first letter of every new word starting with the second word. Also note that there is no space between the two words.

Operators

2009-04-30T00:27:00.000-07:00

Operators are symbols that are used with variables to allow us to perform certain functions, such as adding, subtracting and etc. The table below lists the operators available in JavaScript and describes its function (assuming the two variables x and y that have been declared and initialized with a value)

JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:

Operator	Description	Example	Result
+	Addition	x=y+2	x=7
-	Subtraction	x=y-2	x=3
*	Multiplication	x=y*2	x=10
/	Division	x=y/2	x=2.5
%	Modulus (division remainder)	x=y%2	x=1
++	Increment	x=++y	x=6
--	Decrement	x=--y	x=4

JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5, the table below explains the assignment operators:

Operator	Example	Same As	Result
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x=5, the table below explains the comparison operators:

Operator	Description	Example
==	is equal to	x==8 is false
===	is exactly equal to (value and type)	x===5 is true x==="5" is false
!=	is not equal	x!=8 is true
>	is greater than	x>8 is false
<	is less than	x<8 is true
>=	is greater than or equal to	x>=8 is false
<=	is less than or equal to	x<=8 is true

Logical Operators
Logical operators are used to determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:

Operator	Description	Example
&&	and	(x < 10 && y > 1) is true
\|\|	or	(x==5 \|\| y==5) is false
!	not	!(x==y) is true

if Statement

2009-04-29T23:44:00.002-07:00

The if statement is used to make decisions in JavaScript. Boolean operators are also discussed in this lesson because they are used in along with if statement.

if Statement
The if statement is one of the most used features of JavaScript. It is basically the same in JavaScript as it is in other programming languages. If you are new to programming, you should spend some time understanding how the if statement works.

You use the if statement in JavaScript to make decisions. The syntax for it is as follows:

if (condition){
statements
}

if keyword identifies this as an if statement. The condition in the parenthesis ( ) is evaluated to determine if true, and if so then the statements inside the curly braces { } are executed, otherwise they are skipped and the programs continues with the first line after if statement.

An optional else statement can be included with if statement as follows:

if (condition){
statements
}
else{
statements
}

In this case, the statements inside of curly brackets { } after the else keyword are executed if the condition of if statement is false.

Boolean Operators
Suppose you wanted the previous script to display a letter grade instead of passed/failed. You would want to display A for a 90 or above, B for a grade 80 or above but less than 90 and ETC. To determine a B you could nest if statements as shown below. This can get real messy and require a lot of code.

if (grade < 90){
if (grade >= 80){
document.write('You got a "B"')
}
}

A better way is to use the and operator, &&. Here is a rewrite of the script using the and operator.

if (grade < 90 && grade >= 80){
document.write('Grade is a "B"')
}

The and operator, && , allows you to combine two conditions so that both must be true to satisfy the if condition. Another Boolean operator is the or operator, ||, which combines two conditions such that the if statement is satisfied if either condition is true. The third boolean operator is the Not Operator, !, which makes a condition that returns true, false and vice versa.

Look again at the above script and notice that phrase 'Grade is a "B"' contains both double quotes and single quotes. This is the way you can put quotes inside of quotes in JavaScript.

Switch Statement

2009-04-29T23:44:00.001-07:00

The switch statement of JavaScript
The switch statement is basically an enhanced version of the "if-else" statement that is more convenient to use when you have code that needs to choose a path from many to follow. Let's have a look at this statement's general syntax:

Syntax:
switch (expression){
case value1:
statement;
break;
case value2:
statement;
break;
"
"
default : statement;
}

Example:
switch (favoritemovie){
case "Titanic":
alert("Not a bad choice!")
break;
case "Water World":
alert("No comment")
break;
case "Scream 2":
alert("It has its moments")
break;
default : alert("I\'m sure it was great");
}

Functions

2009-04-29T23:41:00.001-07:00

A function contains code that will be executed by an event or by a call to that function. You can however use a function to contain the script and call it every time your need it. Here is the syntax for a function.

Syntax:
function name (parameters){
statements
}

The function keyword identifies this as a function. The parameters in the parenthesis ( ) provide a means of passing values to the function. There can be as many parameters separated by commas as you need. It is perfectly ok to have a function with no parameters. These parameters are variables which are used by the JavaScript statements inside the curly braces { }. The var keyword is not needed to declare the parameters in a function as variables because they are automatically declared and initialized when the function is called. The function can return a value by using the return keyword.

You should put your functions in the HEAD section of your document. Functions will work if you put them in the BODY section. However, a function must be loaded prior to the statement that calls it. Putting all functions in the HEAD section is the way to insute this.

Example:
function myAdder (num1, num2){
var total = num1 + num2
document.write(total)
}

You would place this function inside some <SCRIPT> tags in the head section. You then can call the function from anywhere in your document. In this example, lets call it from within some <SCRIPT> tags in the body of document like this.

myAdder(23, 56)

Scope of Variables
A variable that is defined outside of a function is a global variable. A variable that is defined inside of a function is a local variable. What does this mean? Global variables can be used anywhere in the document that is currently loaded in the browser. They can be declared in the HEAD section and used in any function or even in the BODY section. Local variables can only be used in the function that declares them. Yes, you could leave the var keyword off of the variables you declare inside of a function and they will then be global. I do not recommend this.

for Loop

2009-04-29T23:37:00.002-07:00

for Loop
A repeat loop cycles though a group of statements until some condition is met. For instance, you can use a repeat loop to cycle though an array and print it to the screen. Or, you might want to cycle though the Array and look for some specific information using the if statement. The for loop is the most common used repeat loop. Here is the syntax for it.

Syntax:
for ( [initial exp.]; [condition]; [update exp.] ){
statement(s)
}

The square bracket means that the parameter is optional. I always use all three parameters and think you will too.

The initial expression defines the starting point of the loop. It sets the value of a variable to some value. The condition tests the variable for a certain condition and when it is reached stops the loop and lets the code after for loop execute. The update expression determines how the variable is incremented.

Example:
Here is a simple example. We will use the "for loop" to print the numbers 1 through 5 to our screen.
var i
for(i=1; i<=5; i++){
document.write(i + "<BR>")
}

Results:
1
2
3
4
5

You can declare the variable as part of initial expression. In fact this is usually the way it is done. Here is our simple script with this change.

for(var i=1; i<=5; i++){
document.write(i + "<BR>")
}

while and do-while Loops

2009-04-29T23:37:00.001-07:00

while and do-while Loops
Two additional repeat loops are available in JavaScript. The while loop tests the supplied condition and continues to execute until it is met. Here is the syntax for it.

Syntax:
while (condition){
statement(s)
}

Example:
<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>

Result:
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

Do-while loop:
The primary difference between these while and do-while loop is that the "do-while loop" will always execute one time whether the condition is true or not whereas the "while loop" will only execute if the condition is true.

Syntax:
do{
statements
} while (condition)

Example:
<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>

Result:
The number is 0

JavaScript Popup Boxes

2009-04-29T23:31:00.001-07:00

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.

Example:
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.

Example:
confirm("sometext");

Prompt Box
A prompt box is often used if you want the user to input a value before entring 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.

Example:
prompt("sometext","defaultvalue");

break and continue Statements

2009-04-26T08:01:00.001-07:00

There are two special statements that can be used inside loops

1. break statement:
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>

Result:
The number is 0
The number is 1
The number is 2

2. continue statement:
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>

Result:
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

Events

2009-04-26T07:51:00.000-07:00

JavaScript Events are items that transpire based on an action. A document event is the loading of an HTML document. A form event is the clicking on a button. Events are objects with properties.

Example:
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>

<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()">
Hover Me!</a>

</body>
</html>

With the button we used the event onClick event as our desired action and told it to call our popup function that is defined in our header. To call a function you must give the function name followed up with parenthesis "()".

The HTML 4 specification refers to these as intrinsic events and defines 18 as listed below:

Event Handler	Event that it handles
onBlur	User has left the focus of the object. For example, they clicked away from a text field that was previously selected.
onChange	User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onClick	User clicked on the object.
onDblClick	User clicked twice on the object.
onFocus	User brought the focus to the object (i.e. clicked on it/tabbed to it)
onKeydown	A key was pressed over an element.
onKeyup	A key was released over an element.
onKeypress	A key was pressed over an element then released.
onLoad	The object has loaded.
onMousedown	The cursor moved over the object and mouse/pointing device was pressed down.
onMouseup	The mouse/pointing device was released after being pressed down.
onMouseover	The cursor moved over the object (i.e. user hovers the mouse over the object).
onMousemove	The cursor moved while hovering over an object.
onMouseout	The cursor moved off the object
onReset	User has reset a form.
onSelect	User selected some or all of the contents of the object. For example, the user selected some text within a text field.
onSubmit	User submitted a form.
onUnload	User left the window (i.e. user closes the browser window).

The events in the above table provide you with many opportunities to trigger some JavaScript from within your HTML code.

Date and Time Object

2009-04-26T07:42:00.001-07:00

The Date object is useful when you want to display a date or use a timestamp in some sort of calculation. In Java, you can either make a Date object by supplying the date of your choice, or you can let JavaScript create a Date object based on your visitor's system clock. It is usually best to let JavaScript simply use the system clock.

Get the JavaScript Time
The Date object has been created, and now we have a variable that holds the current date! To get the information we need to print out, we have to utilize some or all of the following functions:

getTime() - Number of milliseconds since 1/1/1970 @ 12:00 AM
getSeconds() - Number of Seconds (0-59)
getMinutes() - Number of minutes (0-59)
getHours() - Number of hours (0-23)
getDay() - Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday
getDate() - Day of the month (0-31)
getMonth() - Number of month (0-11)
getFullYear() - The four digit Year (1970-9999)

Example:
It is now
<script type="text/javascript">

</script>

Notice that we added 1 to the month variable to correct the problem with January being 0 and December being 11. After adding 1, January will be 1, and December will be 12

Example:
It is now
<script type="text/javascript">

</script>

Special Characters

2009-04-26T07:14:00.001-07:00

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.

Example:
var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);

JavaScript will now output the proper text string:
We are the so-called "Vikings" from the north.

The table below lists other special characters that can be added to a text string with the backslash sign:

Code	Outputs
\'	single quote
\"	double quote
\&	ampersand
\\	backslash
\n	new line
\r	carriage return
\t	tab
\b	backspace
\f	form feed

Links

2009-02-02T02:55:00.000-08:00

Java Script