CIS 179 – Web Script Programming

Lecture Notes
 
 

Tutorial 2 - VARIABLES, FUNCTIONS, OBJECTS, AND EVENTS

var num1 = 5, text1 = "text";
document.writeln(num1);
num1 = 7;
document.writeln(num1); var foo = 5;
document.writeln(foo);
foo = "text";
document.writeln(foo); function sum(num1, num2) {
  return (num1 + num2);
} function displaySum(num1, num2) {
  document.write(num1 + num2);
} // Example: calling the sum function
document.write("The sum of n1 and n2 is " + sum(n1,n2)); function Rectangle(length, width) {
  this.rect_length = length;
  this.rect_width = width;
} rect1 = new Rectangle(5, 3); document.write("Width= "+rect1.rect_width); function Animal() { this.animal_type = type; // dog, cat etc.
this.animal_sound = sound; // woof, meow, etc
this.animal_transport_mode = transport_mode; }
function WildAnimal() {
  this.habitat = ""; // jungle, desert, ocean
  this.diet = ""; // carnivore, vegetarian
}
WildAnimal.prototype = new Animal;
function FarmAnimal() {
  this.food_group = ""; // meat, dairy, poultry
  this.location=""; // barnyard, stables, field
}

FarmAnimal.prototype = new Animal;
 

  • Objects instantiated from either WildAnimal or FarmAnimal will include the three properties from the Animal constructor function, along with the properties specific to each individual object.

    • // create FarmAnimal object
    chicken = new FarmAnimal();

    // properties from Animal constructor
    chicken.animal_type = "chicken";
    chicken.animal_sound = "cluck";
    chicken.animal_transport_mode = "walk/fly";

    // properties from FarmAnimal constructor
    chicken.location = "barnyard";
    chicken.food_group = "poultry";

  • Object Methods
    • Example: Defining a Circle Class with a Prototype Object. Taken from "JavaScript the Definitive Guide"; by David Flanagan, page 136. Slightly modified. // Define a constructor method
    function Circle(x, y, r) {
      this.x = x;    // x coordinate of center
      this.y = y;    // y coordinate of center
      this.r = r;    // radius
    }

    // Create and discard an initial Circle object.
    // This is a bug work around for Navigator 3.
    new Circle(0,0,0);

    // Define a constant property that will be shared
    // by all circle objects.
    Circle.prototype.color = "Blue";

    // Define a method to compute the circumference
    function Circle_circumference() {
      return (2 * Math.PI * this.r);
    }

    // Assign the function to a prototype property
    Circle.prototype.circumference = Circle_circumference;

    // Define a method using the Function() constructor and assign
    // it to a prototype property all in one step.
    Circle.prototype.area = new Function("return Math.PI*this.r*this.r;");

    // The Circle class is defined.
    // Now we can create an instance and invoke its methods.
    var c = new Circle(0.0, 0,0, 1.0);
    var a = c.area();
    var p = c.circumference();

         abort            The loading of an image is interrupted
    blur              An element, such as a radio button, becomes inactive
    click             An element is clicked once
    change         The value of an element changes
    error             There is an error when loading a document or image.
    focus            An element becomes active
    load             A document or image loads
    mouseOut     The mouse moves off an element
    mouseOver     The mouse moves over an element
    reset             A form resets
    select           A user selects a filed in a form
    submit         A user submits a form
    unload         A document unloads
              <FORM NAME="myForm">
    <INPUT TYPE="text" VALUE="default text"
    name="textButton" onBlur="alert(this.value);">
    </FORM>
     
    <A>…</A> Link click, mouseOver, mouseOut

    <IMG> Image abort, error, load

    <AREA> Area mouseOver, mouseOut

    <BODY>…</BODY> Document body blur, error, focus, load, unload

    <FRAMESET>…</FRAMESET> Frame set blur, error, focus, load, unload

    <FRAME>…</FRAME> Frame blur, focus

    <FORM>…</FORM> Form submit, reset

    <INPUT TYPE="text"> Text field blur, focus, change, select

    <TEXTAREA>…</TEXTAREA> Text area blur, focus, change, select

    <INPUT TYPE="submit"> Submit click

    <INPUT TYPE="reset"> Reset click

    <INPUT TYPE="radio"> Radio button click

    <INPUT TYPE="checkbox"> Check box click

    <SELECT>…</SELECT> Selection blur, focus, change
     
     

         <HTMLtag eventHandler="JavaScript Code"> <INPUT TYPE="button" onClick="alert(‘You clicked!’)"> yourAge = prompt("How old are you?", "Your Age");
    alert("Your age is " + yourAge);
     
              <A HREF=http://www.wowgwep.com/index.html>My Web Site</A>