HTML Tutorial

This document tries to demonstrate, through example as much as possible, how to work in Java. If you are new to any language it is better to leave this tutorial here and try to get basics of C++. If you are an experienced programmer it is good time to start on.
This tutorial is still under heavy construction and will illustrate Java Scripts only. Keep on visiting soon you will be able to develop Java Applets(key applications for Internet).

Table of Contents

Starting Java Scripts

We can write any script in HTML by defining it with the help of < Script > tag. So we can write java scripts within these tags like < Script language = "javascripts" > and ends with < /script >

Writing first java script

Here is a example of writing a simple java script. This example just write a string on the screen. Here below the first part of the table shows the code and the next part displays the result of that html

CODEOUTPUT
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "javascript">
document.write("Hello World");
</SCRIPT>
</HEAD>
 </HTML> 		Hello World


We can also use HTML tags in the java scripts. As in the above example we can bold the string "Hello World" by using the <B> tag. For example:

CODEOUTPUT
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "javascript">
document.write("<B>Hello World</B>");
</SCRIPT>
</HEAD>
 </HTML> 		Hello World


As you saw in the above examples we use a function document.write() to display string on the screen. You can use this function as many times you want in your script. For Example

CODEOUTPUT
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "javascript">
document.write("<B>Hello World</B><BR>");
document.write("<B>Java Sripts are so simple to use </B>");
</SCRIPT>
</HEAD>
 </HTML> 		Hello World
Java Sripts are so simple to use


Variables

You can declare variables and assigned them values in java script. The method is so simple. The keyword is var. By var you can define a variable of Variant type.

CODEOUTPUT
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "javascript">
var variable1
variable1 = "Abdul Razaq"
document.write(variable1);
</SCRIPT>
</HEAD>
 </HTML> 		Abdul Razaq


Operators

There are three type of Operators are commonly use in java scripts. Which are listing below :

Unary Operators

	
	Unary Operators like :

		1.  -   unary Negation.

		2.  ++  increment.

		3.  --  decrement.

Numeric Operators

	
	Numeric Operators like :

		1.  +   Addition.

		2.  -   Subtraction.

		3.  /   division.
 			
		4.  *   multiplication

		5.  %   reminder

Logical Operators

	
	Logical Operators like :

		1.  <   Less than

		2.  >   Greater than

		3.  <=  Less than equals to 
 			
		4.  >=  Greate than equals to

		5.  ==  equals to

		6.  !=  Not equals to
Example :-

CODEOUTPUT
<HTML>

						
   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">

	  var x,y;

	  x = 12;

	  y = 2;

	     document.write("Sum = "+ (x+y) );

      </SCRIPT>

   </HEAD>
			
				
</HTML>
Sum = 14


Another Example:

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">

	  var x,y;

	  x = 15;

	  y = 2;

	     document.write("Addition  = "+ (x+y) );
	     document.write("Subtraction = "+ (x-y) );
	     document.write("Multiplication = "+ (x*y) );
	     document.write("Division = "+ (x/y) );
	     document.write("Reminder = "+ (x%y) );

      </SCRIPT>

   </HEAD>
			
</HTML>
Addition = 17
Subtraction = 13
Multiplication = 30
Division = 7
Reminder = 1


Decision Control Structures

We all need to be able to alter our actions in the face of changing circumstances. If the weather is fine, then I will go for a stroll. If the highway is busy I would take a diversion. If the pitch takes spin, we would win the match.If she says no, I would lool elsewhere. If you like this tutorial, I would write next on viruses. If you notice all these decisions depends on a certain condition being met. For the condition Checking Java Scripts provides you decision control structures like if statement, the if - else statement, and the switch statement.And another this that is very important are the Conditional Operators which plays a great role in decision making.

The if Statement:-

Like C-Language the keyword if is used to implement the decision control structure. The if statement when used looks like this: 
	if (this condition is true)
		executes this statement;

If you want to use multiple statements then they must be placed within pair of braces as illustrated in the following example:

CODEOUTPUT


<HTML>

						
   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">

	 var x,y;
	 x = 12;
	 y = 2;
	    
	    if ( x != y )
		{
		 document.write("Here is the Result");
		 document.write(x + " is not equals to " + y); 	
		}
      </SCRIPT>
   </HEAD>			
				
</HTML>
Here is the Result
12 is not equals to 2


The if - else Statement

The if statement by itself will execute a single statement, or a group of statements, when the condition following if is true. It does nothing when it is false. Can we execute one group of statements if the condition is true and another group of statements if the condition is false ? Of course. This is what is the purpose of the else statement, which is demonstrated in the following example:

CODEOUTPUT


<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var x,y;
	 x = 12;
	 y = 2;
	    
	    if ( x < y )
	        document.write(x + " is less than " + y); 	
	    else	
		document.write(x + " is greater than " + y);
		
      </SCRIPT>
   </HEAD>			
</HTML>
12 is greater than 2


LOOPS

The versatility of the computer lies in its ability to perform a set of instructions repeatedly. This involves repeating some portion of the program either a specified number of times or until a particular condition is being satisfied. This repetitive operation is done through a loop control structure.
There are three methods by way of which we can repeat a part of a program. They are:

The for Loop

 The general format of java script's for loop is probably familiar to the C's programmers. Java scripts has the same syntax of the for loop as in C.

The general form of the for statement is 
	for ( initalization; condition ; increment )
		statement;


* The initalization is usually an assignment statement that is used to set the loop control variable
* The condition is a relational expression that determines when the loop will exit.
* The increment defines how the loop control variable will change each time the loop repeated.

These three major sections must be separated by semicolons. The for loop continues to execute as long as the condition is true. Once the condition becomes false, the program execution resumes on the statement following the for loop.
For a simple example, the following program prints the numbers 1 through 10 on the screen.


CODEOUTPUT


<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">

	 var i;   
	    		   
	    for(i=1; i<=10; i++)
	     document.write(i + "<BR>");
		
      </SCRIPT>
   </HEAD>			
</HTML>
1
2
3
4
5
6
7
8
9
10


In the program, x is initially set to 1. Since x is less than 10, function document.write() is called, x is increased by 1, and x is tested to see if it is still less than or equal to 10. This process repeats until x is greater than 10, at which point the loop terminates. In this example, x is the loop control variable, which is changed and checked each time the loop repeats.

If you want to use multiple statements in the loop then use braces as we use earlier in the if statement.

One of the most interesting uses of the for loop is the creation of the infinite loop. Since none of the three expressions that form the for loop are required, it is possible to make an endless loop by leaving the conditional expression empty. For example: 


	for( ; ; ) {
	    document.write("Hello world!<BR>");
	}
This loops runs until you donot stop it by yourself.

The while loop

 The second loop available in java scripts is the while. The general form is 
	while (condition)
		statement;
where statement, as stated earlier, is either an empty statement, a single statement, or a block of statement ( multiple statements ) that is to be krepeated. The condition may be any expression. with true being any nonzero valew. The loop iterates while the condition is true. When the condition becomes false, program control passes to the line agter the loop code.

The do..while loop

 Unlike the for and while loops that test the loop condition at the top of the loop, the do..while loop checks its condition at the bottom of the loop. This means that a do..while loop always executes at least once. The general form of the do..while loop is: 

	do {
	   statement sequence;
	   } while ( condition);


Althought the braces are not necessary when only one statement is present, they are usually used to improve readability and avoid confusion.

The for(prop)

 This loop is a special loop for the java script. This loop calculates the properties of a program in a var array named prop. and you can see these properties by doing this: 
	for( var prop in navigator )
	{
		document.write(navigator[prop]+"<BR>");
	}


FUNCTIONS

Function is a self - contained block of program that performs a coherent task of some kind. Every program can be thought of as a collection of these functions. As we noted earlier, using a funcion is something like hiring a person to do a specific job for you. Sometimes the interaction with this person is very simmple, sometimes it's complex.
In java script the function is declaring in the following way;

Declaration of a function

 
	<SCRIPT LANGUAGE = "javasript" >

		
		function SayHello()
		  {
		    document.write("Hello World");	
		  }


	</SCRIPT>


Calling of a function

 We can call the above decalared function SayHello() to everywhere in this html. The method is you can call this function within script tags. like here: 
		
	<SCRIPT LANGUAGE = "javasript" >
		

		 SayHello()

		
	</SCRIPT>


Parameters of a function

 We can also pass parameters to the function, parameter means the value, we provides initally when we call this function. For example:

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


       //var hello is a parameter of the function abc.

	function abc(hello)
	{
	   document.write("This"+hello+"to be");		
		
	} 
	
	//Calling function abc and passing parameter to it.
	
	abc("Sweet Function");
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
This Sweet Function to be


We can also pass more than one parameters to a function. Like this: 
		funtion func1(firstName, LastName);


Returns a value from function

 Normally in every language function returns a value. In java scripts we also returns a value from the function for example: 

	//Function with two parameters

	function abc(X,Y)
	{

	   return x+y;		

	}

	//Calling the function

	document.write("Sum is" + abc(12,2));

The output of this function is returned, so the result of this function is something like this:
Sum is 14

MECHANISMS

There are some readmade mechanisms for managing data. Some of them are discussed below:

NOTE:

These mechanisms are case sensitive. Remember mistyping of these mechanisms causes error. Another important thing is it starts counting from zero.

length :

With the help of this mechanism you can find the length of any string or string variable. i.e.

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.length); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
16


toLowerCase :

This function change the case of a string or a string variable in to the lower case

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.toLowerCase( ) );  	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
infomate systems


toUpperCase :

This mechanism change the case of string or string variable into Upper (CAPITAL) case. for example:

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.toUpperCase( )); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
INFOMATE SYSTEMS


indexOf(string,start) :

It search the string or character within a string. You can give the starting point from where it starts searching. When it finds the desire character then it results the position of the first finding of the character. If it does not find then it results -1. The first parameter to the indexOf() function "String" is necessory, where the second parameter is optional.

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.indexOf("a")); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
5


As you see in the above example only one parameter is passed to the indexOf(). We can also passed the starting position from where we want to find the specific character.

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.indexOf("e",9); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
13


lastIndexOf(String,Start) :

This mechanism works same like the indexOf(), but the difference between indexOf() and lastIndexOf() is that, indexOf() starts searching from left to right, where lastIndexOf searchs from right to left. So the main purpose of both mechanisms is finding of a specific string or character, but they works oppositly.

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.lastIndexOf("a")); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
5


charAt(index) :

This mechanism returns the character of the specific position. For example you want to see the third character of a string "ABCDEF" then it returns you "C". Here is the example:

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.charAt(12)); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
t


substring(Start,End) :

It returns the substring from a specific string. For example you want to get a substring from "Hello World", starting from 6th Character to the 9th Character. Then this mechanism returns "Wor" as a substring.

CODEOUTPUT
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	 var abc;
	 abc = "Infomate Systems";
	 	    
	         document.write(abc.substring(1,6)); 	
	 				
      </SCRIPT>
   </HEAD>			
</HTML>
nfoma


A Sample Java Script Application

This application scrolls a text on the status Bar of your Browser.

CODE :
<HTML>

   <HEAD>
			
      <SCRIPT LANGUAGE= "javascript">


	   var Position;
	// This is the main function that scrolls the text on status Bar   
   	function UpdateMarquee( )
   	{
     	var Spaces;
     	var x;

	        Spaces = " "
			   
		for(x=0; x<Position; x++){
			Spaces = Spaces + " ";
			}

		Position = Position -1;

		if(Position == 0){
			MarqueeInit( );		
		}
		
		window.status = Spaces + "Java Scripts Tutorial";
		window.setTimeout("UpdateMarquee()",75)

	   }		

	   // This function initalize the value of the global variable Position	
	   function MarqueeInit(){
	
		Position = 100;
		
	   }	
	
	//Calling the Marquee functions
   	MarqueeInit();
	UpdateMarquee();

      </SCRIPT>
   </HEAD>			
</HTML>

For this tutorial special thanx to Mr. Ozair Ali, one of my competent colleage.

I hope this helps you to have more fun with the World Wide Web. Much much more thing are yet to come, keep on visiting for those. Please, if you find any of the errors that I've surely made, or if any part is unclear, email me at webguru@technologist.com.





Back to Top

HomeHome