JavaScript

Characteristics

  1. Client side (runs on the user's computer) scripting language.
  2. Can be used to
  3. Is case sensitive
  4. Is cross platform compatible
  5. Has a cousin from Microsoft called JScript
  6. Can be embedded, or linked

Example 1 an in-line script

The inline script may be placed anywhre in the body of the page. It will run as the page is loaded and will run when it is loaded. In-line scripts only run once.

<script language="JavaScript" type="text/javascript">
<!--
document.write("You are using " + navigator.appName + " -- " + navigator.appVersion);
// -->
</script>

Example 1

Example of a Function

Functions may be called multiple time on a pge via a link or a button. They only run when called, but may be called as many times as you like. The function is place in the JavaScript section in the <head> portion of your page. To create a function use the function reserved word that name the function. Enclose the activity you want to occur in curly brackets. Then you need to create a method for calling (causing the function to run) the function

<head> <script language="JavaScript" type="text/javascript">
<!--
// This function MyFunction1 writes Hello World! to a new page.
function MyFunction1()
    {
    document.write("Hello world!")
    }
// -->
</script>
</head>


<input type="button" name="button1" value="Run Function 1" onClick="MyFunction1(); return false;">

Example 2

Loops



function WhileLoop1()
{
 //while  loop control 
 var loop_control  = 0;
 while(loop_control < 3) 
   {
   document.write( ++loop_control + "<br>"); //increment and display loop_control
   }
   document.write("Done!" + "<br>");
   document.write("This loop control the while control has its varialbe defined before the " + "<br>");
   document.write("loop is initiated.  The loop then increments and starts counting at one until " + "<br>");
   document.write("the upper limit is reached, in this case the loop executes 3 times." + "<br>");
   document.write("Hence, the loop counts from 1 to 3." + "<br>");
   document.write("<br>");
   document.write("<br>");
   document.write("<input type='button' onClick='history.go(-1)' value='Back'>")
}


Loop Examples Loop 1


function ForLoop1()
{			
//for  loop control 
var loop_control;
   for(loop_control = 0; loop_control < 3; ++loop_control)
   {
   document.write( loop_control + "<br>");
   }
   document.write("Done!" + "<br>");
   document.write("<input type='button' onClick='history.go(-1)' value='Back'>")
}


Loop Examples Loop 2


function GuessMe()
{
   var x = parseInt(prompt("Please try to guess a number between 1 and 10", "This is for function 3.")) 
	 /* We set up the prompt to ask for a number between one and ten. 
	 Delcare the variable x and make sure we get an integer. */
   	
   if (x==7)  //Use an if statement to test a condition
      {
      document.write("<p><strong>Congratulations!</strong> You guessed the number.</p>")  
      //if the condition is met write a message 
      document.write("<input type='button' onClick='history.go(-1)' value='Back'>")
      }
   else
      {
      document.write("<p><em>Sorry!</em> You did not guess the number.  The number was 7.  </p>")
      //if the condition is  not met write a different message
      document.write("<input type='button' onClick='history.go(-1)' value='Back'>")
      }
}


Loop Examples Loop 3


function CountME()
{
   for(i = 0; i < 10; i ++) //Create a for loop to count from 1 to 10
      {
      /* use the modulus method to get odd numbers 
      (divide i by 2 where there is a remainder of 1)*/
      if (i%2==1) 
         {
         document.write(i+"<br>")	 //(write the odd number)
         }
      }
   for(i = 10; i > 0; i--) //Create a for loop to count from 10 to 1
      {
      /* use the modulus method to get odd numbers  
      (divide i by 2 where there is a remainder of 1)*/
	
      if (i%2==1)
         {
         document.write(i+"<br>")	 //(write the odd number)
         }
      }
   document.write("<input type='button' onClick='history.go(-1)' value='Back'>")
}


Loop Examples Loop 4


// Using while loops
function CountME2()
{
var i = 0;
while( i < 10) //Create a for loop to count from 1 to 10
   {
   i ++
	 /* use the modulus method to get even numbers  
	 (divide i by 2 where there is a remainder of 0)*/
   if (i%2==0) 
      {
      document.write(i+"<br>")	 //(write the even number)
      }
   }
var i = 11
while(i > 0) //Create a for loop to count from 10 to 1
   {
   i--
   /* use the modulus method to get even numbers  
   (divide i by 2 where there is a remainder of 0) */
   if (i%2==0)
      {
      document.write(i+"<br>")	 //(write the even number)
      }
   }
   document.write("<input type='button' onClick='history.go(-1)' value='Back'>")
}
// -->
</script>
Loop Examples Loop 5

</head>
<body>
<input type="button" onclick="WhileLoop1()" value="Function 1">
<input type="button" onclick="ForLoop1()" value="Function 2">
<input type="button" onclick="GuessMe()" value="Function 3">
<input type="button" onclick="CountME()" value="Function 4">
<input type="button" onclick="CountME2()" value="Function 5">



 

To Pass Data

Navigation assistance

function setPlace(){
document.form1.field1.focus()
}
<form name="form1" method="post">

Select a page to visit: 

<select name="dd1" size="1">
<option value="http://address_for_page_1">Page # 1</option>
<option value="http://address_for_page_2">Page # 2</option>
<option value="http://address_for_page_3">Page # 3</option>
</select>

<input type="button" 
 onclick=
  "location = 
   document.form1.dd1.options
   [document.form1.dd1.selectedIndex].value;" 
 value="GO">

</form>

Assignments