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

6 March 2008

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

On This Page:

Expression Web Revisited

Create a folder called "Assignment5" and Start Microsoft Web Expression.

All of you are experts using this application now - I observed many fantastic web sites from assignment one! There is no need to use your files from your old assignment, we'll start fresh today. If you need a review of this application, go take a look at my notes from Lab Three.

We're not actually starting work on assignment five - but you'll find this start valuable. Remember, it is very important that you open the directory as a site as shown in the illustration:

Open Site

HTML: HyperText Markup Language

Lets take a look at the Split View of our web page:

Click for Split View

What we are seeing is the "code" which contains the "ingredients" for our web page:

Split View

This code tells the web browser exactly what and how to display content to your visitors in a language it understands easily. The different tags are used to enclose information. The different tags are organized as follows:

HTML Breakdown

The majority of our code is contained within the body tag. "Within" means when code is contained between a tag and its counterpart closing tag. such as: <body>...</body>. Note that <html> indicates the start of the web page and </html> indicates the end of the page.

When you are writing code, you must be very careful! HTML is very unforgiving if you make small errors. Always code in lower case (or in the case special tags require), make sure you do not make typos or spelling mistaykes, use a space if you must use a space and do not use a space if you must not use a space!

JavaScript Introduction

What is JavaScript? It is a simple computer language which is used to provide client-side in-browser applications for fairly simple tasks. JavaScript is embedded in your web page and runs as you download the page in your browser. In contrast, Java is a more complicated language which creates Java Applets which also run client-side tasks, but are more complicated and complex.

We're going to go on an internet field trip! Anfy 2.0. This web site is a good library of Java Applets which you can use on your web sites - but we won't be using any of these today.

Next, visit DynamicDrive.com. This web site is a good library of JavaScript scripts which you can also use on your web sites.

Under Script Categories, click on Text Animations. Finally, scroll down to the sixth entry and click on Bouncy Message. (Skip the navigation by going directly to the bouncy message page). Do you see that awful, horrible, annoying, tasteless thing bouncing around on the page? Yup, this is what we're going to install on your web site - ensuring that none of your visitors will ever return.

As the instructions suggest, click on the Select All link and copy the selected text by pressing CTRL-C. Now return to Expression Web and paste this code anywhere within the body tag:

Dynamic Drive Dynamic Drive Pasted 

Sure enough, when we take a look at our page in a web browser, we'll see that awful, horrible, annoying, tasteless thing bouncing around on the page. If you ever go on to make real web sites, please never do such a brutal thing to your visitors.

You may delete all this code you pasted in after you understand this concept of using prefabricated JavaScript.

Alert Window

Now for some code which is much simpler and you may even have a chance of understanding!

Somewhere in your body, paste the following code:

<script language = "JavaScript">   window.alert("Dave is my hero!");
</script>

On my page, I have a sentence of text before and a sentence after the window code. When we take a look at our page in a browser, we'll see this:

Window Before Window After

After you click OK, the rest of the page will load and you'll see the text which appears below the alert window. As you can tell, the code executes in the order in which it appears.

What happens if we place the code in the head instead of within the body? Try it. You'll discover that the head is executed first and the body is executed next.

Once again, this feature is very annoying. Avoid using popups whenever possible.

Creating Forms

A Form is used to create interactive elements of a web page it is a part of. We can create a form using some very simple code - add the following code to your page's body:

<form name = "myform">
Textarea example:
<p><textarea name="comments" rows = "10" cols="30"></textarea></p>
</form>

With this new code in place, we can take a look at our page in a browser or in the normal view of Expression Web and see that we do indeed have a new location to enter text:

Form Creation

In a web browser, you can enter some text into your new text entry box. Except, this doesn't really do anything yet - besides look pretty.

Within the same form tag, lets add a button tag as follows:

<p><input type="button" value="Press"></input></p>

Once again, this can't do anything - but yes, it does look pretty.

Button Example

Forms and JavaScript

We can make our form more functional by adding some JavaScript.

First, we want our button to DO something. Add the following code (bolded) to the existing input button tag:

<input type="button" value="Press" onclick="myfunction()">

There is no such thing as "myfunction" yet, we'll need to create it. Add the following familliar code to your head tag:

<script language = "JavaScript">
function myfunction()
{   window.alert("Dave is my hero!");
}
</script>

What does this do? Now when you click on the "Press" button, we'll get our old alert window we created earlier. Let's make this cooler - change the code as follows:

<script language = "JavaScript">
function myfunction()
{   window.alert(document.myform.comments.value);   document.myform.comments.value = document.myform.comments.value + "\nCool, eh?";
}
</script>

We now have a web page which will react to user input and respond with some content of its own.

Reactive Form

Cool, eh?

Lab 3 4 5 6 7 8 9 10 |  » 

- Top of Page