MCCC CIS177 Markup Languages

Conditional Statements

Comparison, logical and conditional operators

JavaScript is useful when what you want displayed varies depending on a specific condition. For example, if you want to display the number of days until Christmas, but only if the current date is after a certain date, you need to write a conditional statement in your code.

To create a condition, you need one of three types of operators: comparison, logical or conditional operators. Comparison operators compare the value of one element to another, which creates a Boolean condition resulting in either true or false:

y < 100; // if y is less than 100, return true, otherwise return false
y == 20; // if y is equal to 20, return true, otherwise return false

Note the double equal sign == is a comparison operator, where a single equal sign = assigns a value.

Comparison operators are:

==     Returns true if equal
!=      Returns true if not equal
>       Returns true if greater than
<       Returns true if less than
>=     Returns true if greater than or equal to
<=     Returns ture if less than or equal to

A logical operator connects to or more Boolean expressions. Examine the following:

(x < 100) && (y == 20); // returns true if x is less than 100 and y is equal 20

Logical operators are:

&&    Returns true if both are true
||      Returns true when either are true
|       Returns true if expression is false and false if expression is true

Conditional operators test whether a specific condition is true and returns one value if the condition is true and another value if the condition is false.

(condition) ? value1: value2
message = (mail == "Yes") ? "You have mail": "No mail";

Using If and If...Else statements

Using comparison, logical and conditional operators allow you to structure a branch in your routine using the if and if...else statements:

if (Day == "Friday") {
     document.write("The weekend is almost here!");
}

if (Day == "Friday") {
     document.write("The weekend is almost here!");
} else {
     document.write("It's not Friday yet");
}

if (Day == "Friday") {
     document.write("The weekend is almost here!");
} else {
     if (Day == "Monday")
          document.write("Time for another work week");
     } else {
          document.write("It's not Friday yet");
     }
}

Use if...else conditional statements

Edit the code in npntxt.htm:

<script language="JavaScript">

</script>

Save and view in browser.

Arrays

An array is an ordered collection of values referenced by a single variable name. Since JavaScript provides no means to display dates in Month Day, Year format, it is common for programmers to create an array of the month names. The syntax for creating an array is:

var variable = Array(size);

If you omit size, JavaScript increases the size as you add additional elements.

var Month = new Array ();

Month[1] = "January";
Month[2] = "February";
Month[3] = "March";
Month[4] = "April";
Month[5] = "May";
Month[6] = "June";
Month[7] = "July";
Month[8] = "August";
Month[9] = "September";
Month[10] = "October";
Month[11] = "November";
Month[12] = "December";

A more efficient way to create an array is as follows:

var Month = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

The problem, however, is the elements are indexed starting from 0, so January would be 0, while December would be 11, which can be confusing when working with dates. To use the array, you create a function that returns the MonthNumber and replaces it with the assigned string value.

Create a Function with an Array

Edit npntxt.htm as follows:

In the function script in the <head> section add the following code:

function MonthTxt (MonthNumber) {

     var Month = new Array();
     Month[1] = "January";
     Month[2] = "February";
     Month[3] = "March";
     Month[4] = "April";
     Month[5] = "May";
     Month[6] = "June";
     Month[7] = "July";
     Month[8] = "August";
     Month[9] = "September";
     Month[10] = "October";
     Month[11] = "November";
     Month[12] = "December";
return Month[MonthNumber];
}

In the calling script in the <body> section edit the code as follows:

     var Today=new Date(); // Remove initial value to return system date
     var ThisDay=Today.getDate();
     var ThisMonth=Today.getMonth()+1;
     var ThisYear=Today.getFullYear();
     var DaysLeft=XmasDays(Today);

     var MonthName=MonthTxt(ThisMonth);
     document.write("Today is "+MonthName+" "+ThisDay+", "+ThisYear+"<br>");

     if (DaysLeft > 0) {
          document.write("Only " +DaysLeft+" days until Christmas");
     } else {
           document.write("Happy Holidays from North Pole Novelties!");
     }

Save and view in browser.

Loops

Using loops, you can cause a program to repeat. There are two types of loops: ones that repeat a set number of times and ones that repeat as long as certain condition is met or until a specified condition is met.

The For loop uses a counter that tracks the number of times the command set is run:

for {start; condition; update) {
     Commands
}

The While loop continues to run while a specific condition exists, but does not use counters:

while (condition) {
     Commands
}

Create basic loops

Start a new HTML document.

In the body section enter the following code:

<table border>
<tr>
<script>
     for (num = 1; num <=4; num++) {
          document.write("<td>"+num+"</td>");
     }
</script>
</tr>
</table>

Save and view in the browser.

Add the following code:

<table border>
<script>
     for (rownum = 1; rownum <=3; rownum++) {
          document. write("<tr>");
          for (colnum = 1; colnum <=4; colnum++) {
               document.write("<td>" + rownum + "," + colnum + "</td>");
          }
     }
</script>
</table>

Save and preview in browser.

Add the following code:

<table border>
<script>
var rownum = 1;
var colnum =1;
while (rownum <=3) {
     document.write("<tr>");
     while (colnum <=4) {
          document.write("<td>" + rownum + "," + colnum + "</td>");
          colnum++;
     }
     document.write("</tr>");
     colnum = 1;
     rownum++;
}
</script>
</table>

Save and preview in browser.

Programming with JavaScript

Comparison, logical and conditional operators

Using If and If...Else statements

Use if...else conditional statements

Create a Function with an Array

Create basic loops