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