Lab 6: Programming Functions
FIT 100, Autumn 2004

Key Words:function, method, procedure, form control, input, id, onchange, event handler, function call, function definition, function head, formal parameter, function body, variable, variable declaration, assignment operator, assign, getElementById(), value, text, string of characters, +, string concatenation, string, innerHTML.
See Wikipedia (http://www.wikipedia.org/) for a detailed description of the key words.

Preparation

You are required to have completed the objectives in Lab 5 before doing this lab.

Objectives

Use an HTML form to let the user input data for a Javascript program.

Remember to use the online resources! When you encounter a new HTML element, look at W3Schools XHTML tutorial and W3C's XHTML and HTML recommendations. When you encounter a Javascript function or want to find what you can do with an HTML element in you Javascript code, look at W3Schools Javascript tutorial and W3Schools DHTML/DOM (Dynamic HTML/Document Object Model) tutorial. You do not need to understand everything in their tutorials, but you should at least know where to find help.

A Javascript Program Using a GUI

In the previous section you successfully had a browser run your Javascript code. In this section you will learn how to use HTML to get information from the user through a graphical user interface (GUI) and how to use that information in your Javascript code to change the contents of a web page.

Start by adding a paragraph to your body element. The paragraph should include a text asking for the user's first name followed by an input element (also called form control since it is widely used in web forms for users to fill out):
```

Your first name please: 
<input id="firstName" type="text" onchange="fixOutput()" />

```
This input element:
- cannot have any content and therefore the end tag is not allowed. This is why the start tag end with " />".
- has an id attribute which you can use to refer to this element later on (e.g., in your Javascript code).
- has a type attribute with a value of text. This means that the browser should display a text field that can be edited by the user.
- has an onchange attribute that tells the browser what should happen if the content of the text field is changed (and left) by the user. The onchange value is sometimes called an event handler since it tells the browser how to handle events, or actions. In this case the browser will use (or call) the Javascript function fixOutput() when there is a change (event) in the text field. The fixOutput() function does not exist yet. You will soon write it.
Document (add comments), save, publish, validate, and view your enhanced document through a browser. Correct any errors.
If you enter some text in the text field and leave it (by pressing the Tab key or clicking outside the text field), nothing happens. This is because the Javascript function fixOutput() is not known by the browser yet. Compare this with the alert() function which the browser has built in.
Functions are the second most important concept in programming (data structures are the most important). A function is a description of steps defined in one place and used (or called) from another place in your code. It is very much like a recipe: you write it once, but can use/follow it over and over again (given you have the required ingredients). A function can also be used/called by other functions in the same way that you can write some base recipe that can be used in other recipes: a pie dough recipe can be used by many different pie recipies.

Functions must be written, or defined before they can be used/called for the first time. This means that you should define all your functions in a file that will be loaded at an early stage. For HTML documents, this means that the file should be included in the <head> tag, or a head.js file for example.
Open your HTML file and add the following in your <head> tag and define your fixOutput() function using the following:
```
function fixOutput() {
 alert("Running function fixOutput()");
}
```
Every function definition in Javascript must begin with a function head that consists of:
1. the word "function",
2. a descriptive name of your choice (with some limitations) for the function,
3. and parentheses that may (be do not have to) include a list of arguments, a.k.a formal parameters. The formal parameters can be used in the body of the function.
After the head comes the function body, which includes an opening curly bracket "{", some content/statements, and a closing curly bracket "}".
Save and reload your lab6.html in a browser. Enter some text in the input field and leave the field. When the cursor leaves the (changed) input field, the browser will call your fixOutput() function. The function will then run its code and, in this case, cause an alert window to appear!

If this did not happen, check the following list of common errors:
- One or more of your files were not saved. Edit the lab6.html file and save again.
- The onchange attribute does not correspond to the correct function. Verify the name of the function and fix if incorrect. Remember that UPPERCASE and lowercase are not the same. Do not forget the parentheses.
- The src attribute does not refer to the correct file. Verify the name of the file and fix if incorrect. Remember that UPPERCASE and lowercase are not the same.
- Your Javascript code is wrong. Verify the Javascript code to ensure that you have spelled correctly, not accidentally used UPPERCASE instead of lowercase, have matching pairs of parenthesis and quotation marks ("..." or '...').
The list of common errors is something you should always check when you encounter an error or any strange behavior. Almost all programming errors result from spelling errors or from the the programmer using at an old version of their file (because s/he forgot to save after the latest changes).

When everything works as intended you can brag a little: You have just written a complete computer program that accepts user input through a graphical user interface (GUI) and gives feedback to the user. And you have done so by using a function, a feature that most beginners have problems with!

However, before you are done with the lab, your program should do something with the user's name and update the contents of the web page.

Enhancing your program

In northern Europe some thousand years ago people that called themselves nordbor (Swedish for "people who live in the North") went out on trips to "convince" other people to give them gold and other valuables. This behavior was given the term "gå i viking" ("Go on a long trip") which later made these people known as Vikings.

Today you can find Vikings and their decendants everywhere, and in many cases, they can be found by looking at their last name. For a long time, it was very common among Vikings to get their last names by combining their father's or their mother's first name with the word "son" or "dotter" (for daughter). It was more common for the Western Vikings (from Iceland) to follow the tradition for their daughters than for the other Scandinavian Vikings and, therefore, it is more common to see the Icelandic version of "dottir" than "dotter".

Modify your fixOutput() function to show the message "I have some interesting news for you." instead of the rather dull old message. Verify that it works as intended.
You will now write some Javascript statements that can extract the name from the input field and store it somewhere. "Somewhere" is usually a named place in the computers memory known as a variable. Think of a variable as a bucket (with a name) that is big enough to hold some information.
Variables (like functions) are not known by the browser until they are described in Javascript code. Unlike functions, variables do not need to be defined, i.e., have the equivalent of the function's body specified. They must, however, be declared before they exist.

At the end of the body of your fixOutput() function (on an empty line right above the closing curly bracket '}'), add the following statement:
```
var firstName;
```
This is a variable declaration! The rest of the statements in the fixOutput() function can now use the "bucket"/variable named firstName to store things in. Note that the variable name (like function names) cannot have spaces, which is why we capitalize "N" in "firstName". It makes the names easier to read.
Add the following statement after your variable declaration:
```
firstName = document.getElementById("firstName").value;
```
This is quite complicated but can be understood by examining it in pieces. The entire statement has three parts:
- The lefthand side, which contains the name of a variable, firstName, that will be used to store something.
- The assignment operator "=".
- The righthand side, which contains a long expression.
The assignment operator executes the expression on the righthand side and stores the result in the variable on the lefthand side. Or, put another way, the variable on the lefthand side is assigned the value calculated from the righthand side.

The righthand side can be understood by reading it from left to right: "Use the document's getElementById() function, and once that is done, take the value from the result".

You need to have some creativity to figure out what the document's getElementById() function does. Given an id, the function gets the corresponding element in the document. So the browser looks through your HTML document and tries to find an element that has an id attribute with the value "firstName". Go to your HTML document and you will see that you have an input element that has an id attribute with the value "firstName". Therefore, getElementById("firstName") will get this particular input element.

The value located after getElementById("firstName") tells the browser to extract the value (text) that the user typed into the text field. The value, in this case, will be a name (a string of characters).
Document (add comments), save, publish, validate, and try your program!
Nothing new should happen. So how can you verify that everything works? One good way is to add an alert message that shows the entered name. Add the following statement to the end of the fixOutput() function body:
```
alert("Your name: " + firstName);
```
Notice how you can use "+" to join (concatenate) two things together. In this case, you are concatenating a string of characters, "Your name: ", with the contents of the variable firstName (another string of characters). Expressions within parentheses are always executed first, like in mathematics. So the alert() function will, therefore, receive the concatenated result, and show the result in the alert window.
Document (add comments), save, publish, validate, and try your program! When it works as intended you can remove the last alert() statement.
As a final point, have your fixOutput() function change the contents of an element in your web page! Begin by ensuring that you have an element that you can refer to by its id. Add a paragraph in your lab6.html. It should be placed in the body element, right before the table element (footer) at the end:
```


```
Note that the element contains an id attribute, which you will use when you want to get the element using Javascript code.

Add the following lines to the end of your fixOutput() function (inside the body):
```
var elementToChange = document.getElementById("output");
elementToChange.innerHTML =
 "If you where a real Viking, your son's last name would be " +
 firstName + "sson " + 
 "and your daughter's last name would be " +
 firstName + "sdottir!";
```
Save, publish, validate, and try your program. Fix any errors using the check list for common errors that was described earlier in the lab.
Write comments in the Javascript code explaining what each line of the fixOutput() function does. (Place the comment immediately above the line you are explaining.) Answer questions like what is elementToChange and what is it for? What is the innerHTML for? Discuss the function with your fellow students! You can find information about innerHTML in the DOM section of W3Schools DHTML Tutorial.

HTML References