JavaScript I                

   Contact
   C
   C++
   Visual Basic
   Java
   JavaScript
   DHTML
   Style Sheets
   About
   Normalization
   Active X
   TDC Binding
   PHP
   Perl and CGI
   Flash
   XML
   SQL
   Chat
   MCSE
   Linux
   Cabling   
 

   
 
    
    
JavaScript 1 JavaScript 2 JavaScript 3 JavaScript 4 JavaScript 5 JavaScript 6 Active X/ CSS Filters

JavaScript - Set 1

JavaScript Tool Box (Command Set)
window.open
window.prompt
window.alert
document.write
parseInt()
if/else
switch (variable)
case : 1 
              document.write("Code placed here.");
               break;

Hello World
<script language="JavaScript">
      document.write("Hello World");
</script>

Basic Addition

<script language = "javascript">
//We use the parseInt() function because the input received from window.prompt() is string data.
//We must convert it to integer format by parsing it before we can use it in calculations.
         var firstNumber,
             secondNumber
             number1,    
             number2,   
             sum;      

         firstNumber = window.prompt( "Enter first integer", "0" );
         secondNumber = window.prompt( "Enter second integer", "0" );

         // convert numbers from strings to integers
         number1 = parseInt( firstNumber ); 
         number2 = parseInt( secondNumber );
         
         sum = number1 + number2;
         document.writeln( "<h1>The sum is " + sum + "</h1>" );
</script>

Basic Multiplication
<script language = "javascript">
         // Calculate the product of three integers
         var x, y, z, result;
         var xVal, yVal, zVal;
         xVal = window.prompt( "Enter first integer:", "0" );
         yVal = window.prompt( "Enter second integer:", "0" );
         zVal = window.prompt( "Enter third integer:", "0" );
         x = parseInt( xVal );
         y = parseInt( yVal );
         z = parseInt( zVal );
         result = x * y * z;
         document.writeln( "<h1>The product is " + 
                            result + "<h1>" );
</script>

If, else, logical NOT and comparative operators <>
<script language = "javascript">
//In this script, we are using javascript to dynamically create a table in HTML.
             var first,
             second, 
             number1,     
             number2;     

         first = window.prompt( "Enter first integer:", "0" );
         second = window.prompt( "Enter second integer:", "0" );

         // convert numbers from strings to integers
         number1 = parseInt( first ); 
         number2 = parseInt( second );
         document.writeln( "<h1>Comparison Results</h1>" );
         document.writeln( 
            "<table border = \"1\" width = \"100%\">" );
         if ( number1 == number2 )
            document.writeln( "<tr><td>" + number1 + " == " +
               number2 + "</td></tr>" );
         if ( number1 != number2 )
            document.writeln( "<tr><td>" + number1 + " != " +
               number2 + "</td></TR>" );
         if ( number1 < number2 )
            document.writeln( "<tr><td>" + number1 + " < "  +
               number2 + "</td></tr>" );
         if ( number1 > number2 )
            document.writeln( "<tr><td>" + number1 + " > " +
               number2 + "</td></tr>" );
         if ( number1 <= number2 )
            document.writeln( "<tr><td>" + number1 + " <= " +
               number2 + "</td></tr>" );
         if ( number1 >= number2 )
            document.writeln( "<tr><td>" + number1 + " >= " +
               number2 + "</td></tr>" );
         // Display results
         document.writeln( "</table>" );
         // -->
</script>

Analysis 

    <script type = "text/javascript">
         <!--
         // initializing variables in declarations
         var passes = 0,      // number of passes
             failures = 0,    // number of failures
             student = 1,     // student counter
             result;          // one exam result
         // process 10 students; counter-controlled loop
         while ( student <= 10 ) {
            result = window.prompt( 
                  "Enter result (1=pass,2=fail)", "0" );
            if ( result == "1" )
               passes = passes + 1;
            else
               failures = failures + 1;
            student = student + 1;
         }
         // termination phase    
         document.writeln( "<h1>Examination Results</h1>" );
         document.writeln( 
            "Passed: " + passes + "<br />Failed: " + failures );
         if ( passes > 8 )
            document.writeln( "<br />Raise Tuition" );
         // -->
      </script>

Averaging

    <script type = "text/javascript">
         <!--
         var gradeCounter,  // number of grades entered
             gradeValue,    // grade value
             total,         // sum of grades
             average,       // average of all grades
             grade;         // grade typed by user
         // Initialization phase
         total = 0;         // clear total
         gradeCounter = 0;  // prepare to loop
      
         // Processing phase
         // prompt for input and read grade from user
         grade = window.prompt( 
              "Enter Integer Grade, -1 to Quit:", "0" );
         // convert grade from a String to an integer
         gradeValue = parseInt( grade );
         while ( gradeValue != -1 ) {
            // add gradeValue to total
            total = total + gradeValue;
            // add 1 to gradeCounter
            gradeCounter = gradeCounter + 1;
            // prompt for input and read grade from user
            grade = window.prompt( 
                 "Enter Integer Grade, -1 to Quit:", "0" );
            // convert grade from a String to an integer
            gradeValue = parseInt( grade );
         }
         // Termination phase
         if ( gradeCounter != 0 ) {
            average = total / gradeCounter;  
            // display average of exam grades
            document.writeln( 
               "<h1>Class average is " + average + "</h1>" );
         }
         else
            document.writeln( "<p>No grades were entered</p>" );
         // -->
      </script>

Averaging Example 2:

      <script type = "text/javascript">
         <!--
         var total,          // sum of grades
             gradeCounter,   // number of grades entered
             gradeValue,     // grade value
             average,        // average of all grades
             grade;          // grade typed by user
  
         // Initialization Phase
         total = 0;          // clear total
         gradeCounter = 1;   // prepare to loop
   
         // Processing Phase
         while ( gradeCounter <= 10 ) {  // loop 10 times
            // prompt for input and read grade from user
            grade = window.prompt( "Enter integer grade:", "0" );
            // convert grade from a String to an integer
            gradeValue = parseInt( grade );
            // add gradeValue to total
            total = total + gradeValue;  
            // add 1 to gradeCounter
            gradeCounter = gradeCounter + 1;
         }
   
         // Termination Phase
         average = total / 10;  // calculate the average
         // display average of exam grades
         document.writeln( 
            "<h1>Class average is " + average + "</h1>" );
         // -->
      </script>

Incrementing Values
      <script type = "text/javascript">
         <!--
         var c;
   

         c = 5;
         document.writeln( "<h3>Postincrementing</h3>" );
         document.writeln( c );            // print 5
         // print 5 then increment
         document.writeln( "<br />" + c++ );
         document.writeln( "<br />" + c );   // print 6
         c = 5;
         document.writeln( "<h3>Preincrementing</h3>" );
         document.writeln( c );            // print 5
         // increment then print 6
         document.writeln( "<br />" + ++c );
         document.writeln( "<br />" + c );   // print 6
         // -->
      </script>

Looping and Control Structures:

For Loop:

Basically there are 3 parts separated by semicolons:
1. Initialization
2. Test (truth test)
3. Action
     <script type = "text/javascript">
         <!--
         var sum = 0;
         for ( var number = 2; number <= 100; number += 2 )
            sum += number;
         document.writeln( "The sum of the even integers " +
            "from 2 to 100 is " + sum );
         // -->
      </script>
Nested For Loop
<script language="JavaScript">
for(var row1 = 1; row1 <=3; row++) {
    for(var column = 1; column <=5; column++){
    document.write("*"); } //write 5 * to screen, close column
document.write("<BR>"); //add a line for each row
}//close row loop
</script>
Would create:
*****
*****
*****

While True Loop:
Only executes if truth test conditions are met (returns true).
      <script type = "text/javascript">
         <!--
         var counter = 1;            // initialization
            while ( counter <= 7 ) {    // repetition condition
            document.writeln( "<p style = \"font-size: " + 
               counter + "ex\">XHTML font size " + counter + 
               "ex</p>" );
            ++counter;               // increment
         }
         // -->
      </script>

Do While Loop:
Use when block of code needs to execute at least once:
      <script type = "text/javascript">
         <!--
         var counter = 1;
         do {    
            document.writeln( "<h" + counter + ">This is " + 
               "an h" + counter + " level head" + "</h" +  
               counter + ">" );
                             
         ++counter;
         } while ( counter <= 6 );
         // -->
      </script>

Break and Continue - using Labels:

 <script type = "text/javascript">
         <!--
         stop: {   // labeled compound statement
            for ( var row = 1; row <= 10; ++row ) {
               for ( var column = 1; column <= 5 ; ++column ) {
                  if ( row == 5 )
                     break stop; // jump to end of stop block
                  document.write( "* " );
               }
               document.writeln( "<br />" );
            }
            // the following line is skipped
            document.writeln( "This line should not print" );
         } // ends stop block
         document.writeln( "End of script" );
         // -->
      </script>

Logical Operators:

|| = OR
&& = AND
! = NOT
Switch Statement:

     <script type = "text/javascript">
         <!--
         var choice,             // userís choice
             startTag,           // starting list item tag
             endTag,             // ending list item tag
             validInput = true,  // indicates if input is valid
             listType;           // list type as a string
         choice = window.prompt( "Select a list style:\n" + 
             "1 (bullet), 2 (numbered), 3 (lettered)", "1" );
              
         switch ( choice ) {
            case "1":   
               startTag = "<ul>";
               endTag = "</ul>";
               listType = "<h1>Bullet List</h1>";
               break;
            case "2":
               startTag = "<ol>";
               endTag = "</ol>";
               listType = "<h1>Ordered List: Numbered</h1>";
               break;
            case "3":
               startTag = "<ol type = \"A\">";
               endTag = "</ol>";
               listType = "<h1>Ordered List: Lettered</h1>";
               break;
           default:
               validInput = false;          
         }
     
         if ( validInput == true ) {             
            document.writeln( listType + startTag );
   
            for ( var i = 1; i <= 3; ++i )
               document.writeln( "<li>List item " + i +  "</li>" );
    
            document.writeln( endTag );
         }
         else
            document.writeln( "Invalid choice: " + choice );
         // -->
      </script>