COP 2500 Spring 2012

Lab #3

Home Labs Lecture Notes
 

Deliverables: To complete this assignment you must --
1.) Write the HTML and JavaScript page described below.
2.) Complete the lab during the time provided or email your results to your lab instructor.

Introduction: The goal of this assignment is to give you experience working with IF-THEN-ELSE blocks. IF-THEN-ELSE blocks let you choose what parts of your code execute based on input data. See notes explaining if-else statements.
JavaScript allows you to conditionally execute (run) code with if statements. Ex: var a = 5;
if(a == 5) // No semicolon at end of if (...)
document.write("a = 5");
This will simply write a = 5 to the document. However, if a was not equal to 5, then it would not.

If you want code to be executed if a case is not true: var a = 7;
if(a == 5) // No semicolon at end of if (...)
document.write("a = 5");
else
document.write("a not = 5");
This will write a not = 5 to the document. However, if a was equal to 5, it would write a = 5 to the document.

If you want to test for cases that exclude prior ones:
var a = 7;
if(a == 5)
document.write("a = 5");
else if(a == 7)
document.write("a = 7");
else
document.write("a not = 5 or 7.");
First, a is assigned to 7. Then, the browser checks a == 5, if a is equal to 5, then it writes a = 5 to the document and no other checks are performed. If a does not equal 5, then the browser checks if a is equal to 7, if a is, then it writes a = 7 to the document and no other checks are performed. Finally, if all the prior checks failed, the statement inside the else is executed, namely, it writes a not = 5 or 7 to the document.

If more than one statement needs to be executed based on the condition of the clause (if/else if/else), then they need to be grouped into a block with { ... }, which will be treated altogether as one statement:
var a = 5;
if(a == 5)
{
document.write("a = 5");
document.write(a);
}
This will display a = 5 and then display the value of a (5) to the document.

Procedures:

  1. Use a text editor to complete your assignment.
  2. Using your text editor create a new document named "cop2500lab3.html". Make sure you save the file as a plain text document with extension ".html".
  3. Convert the following two algorithms into JavaScript code within your HTML document. Your final web page should display the algorithm title, the input and the output. The specific format you use to display the results is up to you, but it should be clear what the input and output means (in other words, don't just list rows of numbers without words or labels describing them). The first algorithm calculates the maximum of three numbers. The second algorithm computes a letter grade from a numeric grade.
  4. Note that the Instructions shown here are not working Javascript code - they are only meant to demonstrate the working of the algorithm. The syntax used by Javascript is somewhat different - a trivial example is the fact that the 'if' and 'else' keywords should be in lower case for Javascript to recognize it. More importantly, there are no "ENDIF" or "THEN" keywords in Javascript. Braces ("{" and "}") are used to serve the same purpose - delimiting the boundaries of the code that is executed based on the if statement. Think of statements in braces as a unit in some sense - they're what we call blocks or compound statements.

    Finding the largest number.
    Section Instructions Comments
    INPUT:var x, y, z; We require three numbers
    OTHER VARIABLES:var max;
    INITIALIZATION:

    x = 34, y = 10,
    z = 42

    COMPUTATION: IF (x > y) THEN
    max = x;
    ELSE
    max = y;
    ENDIF

    IF (z > max) THEN
    max = z;
    ENDIF
    Convince yourself these
    comparisons provide the
    correct result.
    OUTPUT:display max using
    document.write() or some other
    output function
    Remember to format your results
    in a sensible way.

    LetterGrade(x): Computes a letter grade.
    SectionPseudocodeComments
    INPUT: var NumGrade;

    This is the numeric grade,
    0 - 100 percent.
    Set NumGrade to 76


    OTHER VARIABLES:var AlphGrade; This is where we will
    store the letter grade.
    INITIALIZATION: NumGrade is given.
    COMPUTATION:
    				
     IF (NumGrade > 89) THEN 
       AlphGrade = "A"; 
     ELSE 
       IF (NumGrade > 79) THEN 
    	 AlphGrade = "B"; 
       ELSE 
    	 IF (NumGrade > 69) THEN
    	   AlphGrade = "C"; 
    	 ELSE 
    	   IF (NumGrade > 59) THEN 
    		 AlphGrade = "D"; 
    	   ELSE 
    		 AlphGrade = "F"; 
    	   ENDIF 
    	 ENDIF
       ENDIF         
     ENDIF 
    Note the use of the
    "nested" IF-THEN-ELSE
    structures. It may be
    easier to do one at
    a time, then view it.
    OUTPUT: display AlphGrade using
    document.write() or some other
    output function


  5. Open a browser and verify that the file displays properly. In order to obtain full credit for the lab you need to email your source code to your grader.