Department of Computing

Local Navigation

COMP249 Web Technology

Tutorial - Week 4

Answer the following questions and hand in your answers in a text file (Notepad .txt) via WebCT before 9am Monday 17th March.

  1. Find a way of prompting the user for input in JavaScript, illustrate this in a short example.
  2. Consider the following HTML fragment: 
    <html>
  <head>
    <title>My Page</title>
  </head>
  <body>
   
   <form name="form1" onsubmit="validateForm1()">
     <input type="text" name="name">
     <input type="text" name="email">
     <input type="submit">
   </form>

   <form name="form2">
     <input type="text" name="income">
     <input type="text" name="tax">
     <input type="text" name="rate" value="">
     <input type="button" name="button2" value="calculate tax rate" onClick="calculateForm2()">
   </form>
  </body>
</html>
    1. Write validateForm1() which checks that all fields have values and that the email address contains an @ sign and at least one . (period).
    2. Write calculateForm2() which check the values of income and tax, performs a calculation when the "calculate tax rate" button is pressed. If income < tax or no values are present, an alert is popped up asking the user to fill in correct values.

Additional topics for discussion in the tutorial (not for handing in):

  1. What is an Array in JavaScript? Write a short example program illustrating how to store values in an array and how to retrieve and update them.
  2. A SCRIPT element can appear anywhere in an HTML document. When do these scripts get evaluated and where does the output of any document.write calls go?
  3. CSS2, the second level of CSS specification, provides a number of new properties. One of these is position which determines how the HTML layout engine works out the position of the element. The possible values of position are static, relative, absolute, fixed and inherit. Discuss the meaning of each of these. Reference: W3C, nickrigby.com.
  4. Here is a javascript example that implements drag and drop with the mouse. Discuss how this works. 
    <html>
  <head>
    <title>Drag and Drop</title>

<style>
.dragme {
      position:  relative;
}
</style>

<script language="JavaScript">

var dx,dy;
var dobj;

function dragme(event) 
{
  dobj =  event.target;

  // find the offset of the click inside the element
  // the parseInt(x+0) is required to get an integer from 
  // the stylesheet
  dx =  event.clientX - parseInt(dobj.style.left+0);
  dy =  event.clientY - parseInt(dobj.style.top+0);

  // arrange for the object to move as the mouse moves
  document.onmousemove = movemouse;
  document.onmouseup = stopdrag;
  return false;
}

function movemouse(event)
{
   // move the object to the current mouse position offset
   // by the location of the original click in the object
   dobj.style.left = event.clientX - dx;
   dobj.style.top  = event.clientY - dy;
   return false;
}

function stopdrag() {
   // cancel the mouse movement callback
   document.onmousemove = null;
}

</script>
  </head>

  <body>

    <p class="dragme" onmousedown="dragme(event)">Click the mouse on this text to drag it around the page.</p>    
    <p class="dragme" onmousedown="dragme(event)">Click the mouse on this text to drag it around the page.</p>  
    <img class="dragme" onmousedown="dragme(event)"
    src="http://www.mq.edu.au/media/global/MU_logo.gif"/>

  </body>
</html>

    You can find a copy of this page here. Note that this will probably only work in Firefox. There is another similar example on page 258 of the text.

Comments to: comp249-admin@ics.mq.edu.au

Copyright & Site information