Teachers Name 
peter.thomas@vu.edu.au

 Lesson three 
HEB0075 Interface Design

Resources and Downloads  
Course Outline  
back to front Lesson Three

Lesson for today

  

1

 Check Uni Student Email Account --  Contact me on  peter.thomas@vu.edu.au

2

The Blog List

In today's lesson we will learn more of JavaScript and of Scripting.

As part of your Assessment Blog you will create a 3 page sampler of all you have learned over the last 2 lessons .

It should include 
  1. variables
  2. prompts
  3. Global variables
  4. maths functions
  5. boolean functions
  6. rollovers
  7. a range of html features as well

3

Annotations

To make it easier to understand scripts after they are written programers ( that's you) use notation to expalin what the script does inside the script.

It looks like this /*       */   The wriiting inside the marks are hidden from the browser.  It does not read them , but you can.

 

4

 Work for today. Open Up Note Pad .

More JavaScripts

5

 Global Variables

I asked you to make up a three page htm site that showed off some of the skills you are learning.

If you want to set variables that are used by a number of functions in your page then define them outside ( above the function )

Copy and paste this example.

<html>
<head>
<title> My First Program</title>
<script language=JavaScript>
var name;
name=prompt(" What is your name ?", " Barry ");

var rock;
rock=prompt( " what is the rocks name?", " basalt ");
function story()
{


document.write(name);
}

function hard()
{


document.write(rock);
}
</script>

</head>
<body>
<h2>My First Program</h2>
<h2>This is the story of <script language=JavaScript>story();</script>the worlds greatest rock thrower.

One day when <script language=JavaScript>story();</script> was throwing his rocks around the town . He picked up a large piece of <script language=JavaScript>hard();</script> .<br> " Oh this <script language=JavaScript>hard();</script> is really heavy". Said <script language=JavaScript>story();</script></h2>
</body>
<html>

6

Lets do some maths

* is the multiplication sign / is division + and - should be obvious.
= = means equivalent to 

 

put this function into  a page ( you will need to add plenty)

function main()
{
      var question;
      var answer;
      answer=13*3;
     question =" How many rolls would the baker give me if I asked her for a dozen?"
      document.write(question+" <br> answer);
}

 

Change the values Change the Question. 

7

Parsing Numbers

Notice that the numbers do not use " " marks , that is because the program will read them as numbers not as strings.

When you want the user to input numbers you are faced with a problem.  To over come this the program needs to convert the numbers written from text strings to real digits.

Put this in a script to see

var number;
number=prompt("Give a value for a:", "12");
document.write(number+3);
number=parseInt(number);
document.write(number+3);

8

If then else and Boolean Logic

Try this 

function main()

{

var jasonsAge;
var louisesAge;

jasonsAge=prompt("How old is Jason?","21");
louisesAge=22;

if(jasonsAge>louisesAge)

          {

            document.write( "Jason is older than Lousie");

           }

        document.write("I dont know any more than that");

}

 

9

Modify The Script

Now modify the script so that if Jason is younger it writes something different.

function main()

{

var jasonsAge;
var louisesAge;

jasonsAge=prompt("How old is Jason?","21");
louisesAge=22;

if(jasonsAge>louisesAge)

          {

            document.write( "Jason is older than Lousie");

           }

       else

       {

          document.write( " Jason is NOT older ");

        }

        document.write("I dont know any more than that");

}

10

 Roll Overs

.  If then statements can also be useful for roll overs .

First open Paint and create a red ball and a blue ball, save them as gifs in a folder called RollOver in My Documents.

Now open a note pad file and write

<html>
<head>
<title> Roll Overs</title>
<script language=JavaScript>

function buttonroll(state)
{
if(state==0)
{
document.myImage.src="red.gif";
}
else
{
document.myImage.src="blue.gif";

}
}

function preload()
{
p1=new Image();p1.src="blue.gif";
}

</script>

</head>
<body bgcolor="#FFFFCC" onLoad=preload()>
<h2>Roll Overs</h2>
This is an example of a roll over <a href ="#"onMouseOver=buttonroll(1) onMouseOut=buttonroll(0)>
<img name="myImage" src="red.gif" border="0"> </a> pretty eh?
</body>
<html>

   

11

 More tags 
<body background="name of a GIF">

12

 Migrating to Front page and Arachnophilia
NB You need to use the html tab and remove what is there and replace your own.
   

 

to the top

 

 Resources and Downloads

  

Script Sites  

Design

Downloads
Web Teacher
 On-Line shareware textbook
Task Centered User Interface Design		 A tool to use in place of FrontPage
Arachnophilia
On Using HTML
 Web Style Guides
  
A Forms Tutorial    
A primer on Using HTML from the NCSA    

to the top