Home Dave Heppenstall | E-mail Contact

Find 
 
[Résumé]Résumé [Academics]Academics [About Me]About Me
Lab 3 4 5 6 7 8 9 10 |  » 

JavaScript II

13 March 2008

This tuitorial is an update to the official Lab Nine web page. It is also an update to the official supplemental HTML and JavaScript and Button and Input pages.

On This Page:

LAB TEST ONE

Read the Lab Test Instructions

Download the Lab Test Files

Using Notepad

Today we're going to shed our Expression Web water wings. Start Notepad and open the file we created in lab eight.

If you don't have the file anymore or you didn't save changes, download my copy. Right-click on the link and select "Save target As..."

With our file now open in Notepad, we are no longer privileged to the overabundance of toolboxes, menus, commands and editing options. Most notably, the preview pane is absent as well, so we won't be able to view our changes to the file as we make them.

Notepad

Notepad is not designed specifically to write code for html or JavaScript, so it won't tell you when you have a problem or have made a mistake in your code; you will need to develop and rely on your own debugging instincts.

Remember, HTML is very unforgiving for "minor" errors or mistakes.

Review of Lab Eight

Download my copy of the work we created in lab eight: lab8review.html. Right-click on the link and select "Save target As..."

Recall that code for HTML is divided into to two main sections, head and body. The body contains the data which is to be displayed on the web page itself and the header contains information which is not technically content.

Take a look at our code again. In the header, we defined a JavaScript function called myfunction and in the body, we created a form called myform. The form contains an input button which activates the myfunction function when it is clicked by a user.

Currently, our function will display an alert window which will show the value contained within document.myform.comments.value (Recall that this is the long name to refer to the value of the textarea called comments). It also will add "\nCool, eh?" to this value after the alert window is closed. (Recall that \n is an escape character to create a new line).

Reactive Form

We're going to add some more features and functionality to this code.

Declaring Variables

We can use a variable that we create ourselves to store information within the script. Add the following lines of code to the top of your script:

var myvariable;
myvariable = document.myform.comments.value;

Change the alert window code to the following, and delete the line of code which adds the "Cool, eh?" line.

window.alert(myvariable);

Our script will appear to perform exactly as before, but now we are using data stored in a variable which we can manipulate without the user knowing what we are doing.

Using Built-in Functions

JavaScript has many built-in functions which you can use within your own functions to save you time and work. You don't need to create functions to perform some routine tasks because other people have already done to work for you.

Notice how our myfunction name is followed by "()"; this is a place where parameters can be passed to our function. So far, our function hasn't needed to use any. Built-in functions take in passed parameters so that we can use them.

Today we will use parseInt. This function accepts a text value and will return to you the value of the numbers (if any) contained therein. Let's try it out.

First, add two new input boxes to our form:

<p><input name="one" type="number" size="5"> </input></p>
<p><input name="two" type="number" size="5"> </input></p>

What we want to do is have the numeric value of text we enter into the textarea to be stored in the number input field we called one. The parseInt function converts text into numbers. Just for fun, we'd also like to store the result of two times that number into two. Add the following code to the end of our function:

document.myform.one.value = parseInt(myvariable);
document.myform.two.value = 2 * parseInt(myvariable);

Conditional Statements

A conditional statement is something which executes only if a certain statement is true. In English, we say: "If it is raining, bring an umbrella." In programming we would say something more like: "If(RAINING) {Bring Umbrella;}". Yup, it looks uglier, but before you know it, you'll be experts at writing if statements.

Delete the alert window from our code and replace it with the following code:

if (document.myform.one.value >= 50)
{
   window.alert("PASS");
}
else
{
   window.alert("FAIL");
}

Now when we run our script, we will see a different window depending on the value of one.

Lab 3 4 5 6 7 8 9 10 |  » 

- Top of Page