Introduction to Javascript programming

This week, we'll do our first Javascript programming project. Since we want the program actually to do something useful, we'll have to learn a lot of elements of the language -- but it's not as bad as it might look at first.

We'll be writing a program that calculates the number of the day of the year any date falls on (like April 8 is the 98th day of the year, unless it's leap year, when it's the 99th day). You can see a working version of the program here, if you open it in a new window and look at the document source.

1. Where do programs go in the webpage?

Usually, if your webpage contains actual programs, they go in the heading part of the document, between the

<head> .... </head>
tags. To let the computer know that you're about to write a program, you put the programs between
<script language="javascript"> ..... </script>
tags.


2. What do programs look like?

In Javascript, programs are called "functions" (how mathematical!). A function always looks like this:

function name(..args..){
  ...statements...
  }
In place of "name", you may use whatever (legal) name you choose. In place of ..args.. you put the arguments of the program. There may be one argument, two, many, or no arguments at all (but the parentheses still must be there). Arguments contain any data that you would like to communicate to the program. In our example, the arguments will be the number of the month and the day of the month.

In place of ..statements.., which always go between braces { } , you put the instructions the computer is supposed to carry out. Statements are separated from one another either by beginning them on new lines, or else by a semicolon ; In Javascript, the semicolon plays the same role as a period in ordinary English.


3. What are the components of the date program?

There are three major parts to the date program. The fist part is

var days = new Array();
days[1]=31; days[2]=28; days[3]=31; days[4]=30; days[5]=31; days[6]=30;
days[7]=31; days[8]=31; days[9]=30; days[10]=31; days[11]=30; days[12]=31;
This part defines a new variable (that's what "var" stands for) called "days", which will keep track of how many days are in each month. The "new Array()" tells Javascript that "days" is an array, or list of numbers. When you have a list of numbers (or a list of anything), the individual items in the list are numbered and you refer to the fifth item in the list using the "[5]" notation .... so days[6] is the sixth number in the list. Obviously, days[6] for us will represent the number of days in June.

Variable names can be almost any sequence of letters and numbers that begins with a letter. It's a good idea to pick names that are suggestive (like "days") but not too long.


The second component of the program is the function "whatday". It does the actual calculations:

function whatday(m,d)
 {var s=0
  if(m>1) {for(var i=1;i<m;i++){s+=days[i]}}
  s+=d;
  return(s);
 }
You can see that it begins with the name of the function followed by the argument list, followed by {..statements..}. The naming of functions is subject to the same rules as the naming of variables.

The first statement in the program names a new variable called "s" -- and sets its value equal to 0. We're going to use s to be the number we're calculating. The way we're going to do it is to add up the number of days in the months before the month m (so if m is 4, meaning April, we have to add up the number of days in January, February and March, which are days[1], days[2] and days[3] in our program, and then add on the date d). We start the process with s=0 so we can "accumulate" the answer.

The second statement is interesting. It contains two different control structures, the if structure and the for structure.

An if structure generally looks like this:

if(..condition..){..statements..}
although we'll see a variation on this soon. The condition is something that is checked to see whether it is true or false. The condition in our statement is "m>1", so we're seeing if the value of the variable m is greater than 1 (because if m is 1, then we don't have to add any months together). It is possible to have a less than condition, or even an equality condition -- note that the symbol for checking an equality condition is two equals signs (I always mess this up). So if we wanted to check whether a equals b in an "if" statement, we'd write
if(a==b){...statements...}
You can also use >= for greater than or equal to, or <= for less than or equal to. In between the braces {...statements...} go the statements you want to be performed if the condition is true. If the condition is false, the program just skips to the next statement.

The statement that is to be executed if m>1 is a for statement. The "for" statement is an example of a loop -- a set of statements that is performed over and over until some condition is met. A "for" statement always looks like this:

for(...looping instructions...){..statements..}
The looping instructions always look something like
var i=1;i<m;i++
which means: "start the loop with i=1 (that's the "var i=1" part), each time through the loop increase i by 1 (that's the i++ part), and keep doing this until it is no longer true that i is less than m (that's the i<m part)". And the statements between the braces are performed each time, until the loop comes to completion (be careful that your loops will always come to completion!!).

The statement in our for loop is "s+=days[i]", which means "Add to s (that's the s+=) the value of the ith element of the array days." This is the plus sign used for regular addition.

Once the if-for statement completes, there's the s+=d statement, which adds on to s the value of d (the date).

Finally, the statement "return(s)" means that we're declaring the value of s at this point to be the answer, or output of the program "whatday". So you could say that "whatday(1,4) returns the value 4", or "whatday(12,31) returns the value 365".


The third component of our program is the output routine "date". It accumulates a string variable q, which contains the sentence that will be reported back to the user. All the plus signs in this program are catenation of strings.

The purpose of most of the statements is pretty obvious -- note the "if" statement that decides whether the input date is after February 29 (the month is bigger than 2)... so the program knows whether to report both the leap year version and the non leap year version. This "if" statement is a little more complicated than the one in the whatday program, because it is an "if..else" statement, which looks like:

if(..condition..){..statements if condition is true..}
  else{..statements if condition is false..}
Notice, if the condition is true (after Feb 29) we add another clause to the output, but if the condition is false then we just add a period.

One other thing to notice is that this program calls the whatday program, so you can see that program calls (or function calls) are pretty straightforward.

Finally, the "alert" statement makes that pop-up box with the answer in it.


4. How is the program started from the web page?

You can see in the body of the web page

<body bgcolor=CCDDBB>
<h2>What day of the year?</h2>
<p>
Input the number of the month and the day of the month, and click
the GO button to learn which day of the year it is.
<p>
<form>
<table border=0>
<tr><td>Month:<td><input name="mo" size=2></tr>
<tr><td>Day:<td><input name="dy" size=2></tr>
<tr><td colspan=3>
<input type="button" value="GO" onClick="date(parseInt(mo.value),parseInt(dy.value))">
</tr>
</table>
</form>
</body>
that the program "date" is called in the "onClick" property of the GO button. To review how we made buttons, you can take a quick look at this page.