Java Script Quick Tutorial
1. Starting, loops, functions & objects

Summary :

1. Embedding JavaScript in HTML code
2. Writing text
3. Types & variables
4. Loops
5. Functions
6. Using OnClick() event to call Javascript
7. Objects

1. Embedding JavaScript in HTML code
 

Writing text

Copy of the javascript code :

<script LANGUAGE="JavaScript">
<!-- // Hide from old browsers
document.write("Hello world");     // the most important line
// -->
</script>

Result :

Writing text in bold

Copy of the javascript code :

<script LANGUAGE="JavaScript">
<!-- // Hide from old browsers
document.write ( "<strong>" );     // begin bold
document.write("Hello world");     // the most important line
document.write ( "</strong>" );    // end bold
// -->
</script>

Result :

From now and on, I will only show 'the most important line', and ignore the structure lines :

Copy of the javascript code :

document.write("Hello world");

Result :

2. Writing text
 

Putting comments in the JavaScript code :

Copy of the javascript code :

// This is a comment
document.write("Hello world");

Result :

Writing simple text :

Copy of the javascript code :

document.write("Hello world");

Result :

Writing formated text :

Copy of the javascript code :

document.write("This is <strong>formated</strong> <i>embedded</i> <u>JavaScript</u>");

Result :

Parenthesis in a function call :

Copy of the javascript code :

document.write ( (1+3) * 2 );

Result :

String concatenation  :

document.write ( "3" + " apples" ); ==>
document.write ( 3 + " apples" );   ==>
document.write ( "nb of apples = " + 3 );  ==>
document.write ( document.links.length + " links" );  ==>
document.write ( "nb of links = " + document.links.length );  ==>

Multilines write, using the HTML tag <br> :

Copy of the javascript code :

document.write ( "Line 1 <br>" );
document.write ( "Line 2" + "<br>" );
document.write ( "Line 3" );
document.write ( "<br>" );
document.write ( "Line 4" );

Result :

Organizing on several lines :

Copy of the javascript code :

document.write ( "There are "
               + document.links.length
               + " links"
               + "<br>" );

Result :

Using Alert(...) ( not working ) :

Copy of the javascript code :

Alert ( "Hello world" ); :

3. Types & variables
 

Using global parameters :

Copy of the javascript code :

g_parameter = "" ;

Set g_parameter :

Show g_parameter :

4. Loops
 

Loop 1 => 10, with ONE INSTRUCTION in the loop :

Copy of the javascript code :

for (var i = 1; i <= 10; i++)
   document.write ( i + " " );

Result :

Loop 1 => 10, with TWO INSTRUCTIONS in the loop :

Copy of the javascript code :

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

Result :

Three loops 1 => 10, with three SINGLE loops :

Copy of the javascript code :

document.write ( "Loop 1 : " );
for (var i = 1; i <= 10; i++)
   document.write ( i + " " );
document.write ( "<br>" );

document.write ( "Loop 2 : " );
for (var i = 1; i <= 10; i++)
   document.write ( i + " " );
document.write ( "<br>" );

document.write ( "Loop 3 : " );
for (var i = 1; i <= 10; i++)
   document.write ( i + " " );

Result :

Three loops 1 => 10, with one DOUBLE loop :

Copy of the javascript code :

for (var i = 1; i <= 3; i++)
{
   document.write ( "Loop " + i  +  " : " );
   for (var j = 1; j <= 10; j++)
      document.write ( j  +  " " );
   document.write ( "<br>" );
}

Result :

Loop to show all links in this document :

Copy of the javascript code :

// Writing links.length.
document.write ( "document.links.length = " + document.links.length + "<br>" );

//----- Looping and writing all links.
document.write ( "document.links [ 0 ==> " + (document.links.length-1) + " ] :<br>" );
for (var i = 0; i < document.links.length; i++)
{
   document.write ( i + " : " );
   document.write ( document.links[i] );
   document.write ( "<br>" );
}

Result :

5. Functions
 

Defining a function MyFunction(...) and calling it 3 times :

Copy of the javascript code :

//----- Defining the function.
function MyFunction()
{
   document.write ( "Hello world, " );
   document.write ( "this is JavaScript!" );
   document.write ( "<br>" );
}

//----- Calling the function 3 times.
MyFunction();
MyFunction();
MyFunction();

Result :

A recursive function, Factorial :

Copy of the javascript code :

//----- Defining the function.
function Factorial(n)
{
   if ( n <= 1 )
      return 1
   else
      return i * Factorial ( n-1 )
}

//----- Calling the function.
for (var i=0; i<=30; i++ )
{
   document.write ( "Factorial ( " + i + " ) = " );
   document.write ( Factorial(i) + "<br>" );
}

Result :

Enumerating the arguments (=parameters) of a function :

Copy of the javascript code :

function EnumArguments ( )
{
   //----- Total arguments.
   document.write ( "arguments.length = " + arguments.length );
   document.write ( "<br>" );

Result :

Using optional parameters ( = arguments ) :

Copy of the javascript code :

function optionalParameters ( param1, param2 )
{
   //----- Total parameters.
   document.write ( ", " + arguments.length + " parameters in total" );
   document.write ( "<br>" );

   //----- Check param1.
   document.write ( arguments.length >= 1
                  ? "param1 = " + param1
                  : "param1 = (missing)" );
   document.write ( "<br>" );

   //----- Check param2.
   document.write ( arguments.length >= 2
                  ? "param2 = " + param2
                  : "param2 = (missing)" );
   document.write ( "<br>" );
   document.write ( "<br>" );
}

//----- Calling the function.
optionalParameters ( );
optionalParameters ( 1 );
optionalParameters ( 1 , "Hello" );
optionalParameters ( 1 , "Hello" , "3" );

Result :

6. Using onClick() event to call Javascript
 

Showing message boxes :

Simple alert :
 

Multi lines alert :

Asking value :

Asking confirmation :

Calling another page in the same window :

Goto page 'www.yahoo.com' :

Calling a user function from a button ( example 1 ) :

Copy of the javascript code :

function calculation ( )
{
   var x = 12 ;
   var y = 5 ;
   var result = x + y;
   alert ( result );
}

Calculate 12 + 5 :

Calling a user function from a button ( example 2 ) :

Copy of the javascript code :

function SumAandB ( a , b )
{
   return a + b ;
}

Adding numbers :

Adding strings :

Calling a writing function from a button :

Copy of the javascript code :

function writingFunction()
{
   //----- Asking & Writing text.
   var aFewWords = prompt ( "type a few words" , "Hello world" );
   document.write ( aFewWords );
   document.write ( "<br>" );

   //----- Writing help text.
   document.write ( "<br>" );
   document.write ( "This is a new page," + "<br>" );
   document.write ( "<br>" );
   document.write ( "Click BACK to go back to the page." );
}

Calling the writing function :

7. Objects
 

• Objects in JavaScript are very powerfull and are easy to use or improve.

Adding a new 'property' to String object :

Copy of the javascript code :

//----- Adding a property to String object.
String.prototype.shortDescription = "not describe." ;

//----- Checking new property.
string1 = new String ( "Hello 1." );
string2 = new String ( "Hello 2." );

string1.shortDescription = "this is a short description for string 1." ;

document.write ( "string1 = <b>" + string1 + "</b><br>" );
document.write ( "string2 = <b>" + string2 + "</b><br>" );
document.write ( "string1.shortDescription = <b>" + string1.shortDescription + "</b><br>" );
document.write ( "string2.shortDescription = <b>" + string2.shortDescription + "</b><br>" );

Result :

Adding a new 'method' to String object : replaceCharAt ( )

Copy of the javascript code :

function replaceCharAt( i_startPos, i_newChar )
{
   var i_string = this.toString();

   var result = "" ;
   result = i_string.substr( 0, i_startPos);
   result += i_newChar ;
   result += i_string.substr( i_startPos+1 );

   return result ;
}

//----- Adding a new methods to String object.
String.prototype.replaceCharAt = replaceCharAt ;
String.prototype.replaceAt = replaceAt ;

//----- Checking replaceCharAt.
document.write ( '"0123456".replaceCharAt(1 , "*" );' );
document.write ( "   ==> <b>" + "0123456".replaceCharAt(1 , "*" ) + "</b>" );
document.write ( "<br>" );

Result :

Adding a new 'method' to String object : replaceAt ( )

Copy of the javascript code :

function replaceAt( i_startPos, i_length, i_newString )
{
   var i_string = this.toString();

   var result = i_string.substr( 0, i_startPos);
   result += i_newString ;
   result += i_string.substr( i_startPos+i_length );

   return result ;
}

//----- Adding 2 new methods to String object.
String.prototype.replaceAt = replaceAt ;

//----- Checking replaceAt.
document.write ( '"0123456".replaceAt(1 , 2, "Hello World" );' );
document.write ( "   ==> <b>" + "0123456".replaceAt(1 , 2, "Hello World" ) + "</b>" );
document.write ( "<br>" );

Result :