COMP1710: Lab 7: Java Script Tutorial

Download a zip of the lab fils

Introduction

Just read through the lab sheet to refresh your memory on what Java Script is, then go through the examples making sure you understand what is happening in each one, then go about the tasks

The source of the following sections of text is Web Teacher - JavaScript for the Total Non-Programmer - If you don't understand some of the information below visit that site for more detailed explanation, or try the links section for more tutorials.

What is JavaScript?

Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more.


What's the difference between JavaScript and Java?

Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitment because of its unique ability to run the same program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use language for non-programmers.

Javascript is much simpler to use than Java. With Javascript, if I want check a form for errors, I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence.


Objects and Properties

Your web page document is an object. Any table, form, button, image, or link on your page is also an object. Each object has certain properties (information about the object). For example, the background color of your document is written document.bgcolor. You would change the color of your page to red by writing the line: document.bgcolor="red"

The contents (or value) of a textbox named "password" in a form named "entryform" is document.entryform.password.value.

For a listing of all the HTML DOM (Document Object Model) objects and the properties that javascript can access go to the W3 Schools site.

You can use the menu on the left of this site to access javascript objects, such as Math and Date.

Check out the DOM inspector in the "Tools" menu in Mozilla to get a better understanding of the DOM heirarchy of a HTML document.


Methods

Most objects have a certain collection of things that they can do. Different objects can do different things, just as a door can open and close, while a light can turn on and off. A new document is opened with the method document.open() You can write "Hello World" into a document by typing document.write("Hello World") . open() and write() are both methods of the object: document.


Events
Events are how we trigger our functions to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event, as its name implies, will run the function when the user clicks on the button. Other events include OnFocus, OnBlur, OnLoad, OnUnload and OnMouseOver & OnMouseOut which are used to do things like rollover images.

Go to this Web Teacher page to get a good list and explanation of Java Script events.


Examples

For this lab you need to build a demo page that uses all of the following javascript concepts in some way (be imaginative, think of a goal like below:
  1. Alert Box - use this for debugging, printing out the value of a variable or marking a position in a script.
  2. Prompt Box - use this for getting user input and learning about if statements
  3. Text Encoder - use this to learn about loops, working with text (stings) and writting data back to the html document - try the values "0123456789" and "XYZ" and try and understand what happens
  4. New Window - use this to learn about opening new windows and the date object
  5. Go to google and search for "java script tutorials" and go through things that interest you.

Tasks

  1. Go to the links section at the bottom of this page and check out what can be done with javascript.
  2. Think of a task you can use Java Script for OR choose one of the following:
    • A small game - guessing, chance, card.
    • Recommended - Matrix style text and/or other special effects for two of your lab pages - you could use loops to change the style and position of things
    • Redo your form Lab 4 to include form validation.
    • Looks at the detail description of the lab proposed in 2004 : this was a good and challenging one.
  3. Tell the Tutor what you plan to implement and get their OK (Do this via email if you don't attend the lab)
    • Make sure it's not too easy
    • Make sure it's not too hard or too much work
    • Make sure its original and not something found on the web:
      • Although using things from the web is ok - just reference them.
      • You can link many scripts like a calculator into something larger like an application to enter subject marks and perform statistics on them.
  4. Edit the web page called "project_description.html" to describe what you will be doing, include:
    • A brief project description
    • A list of the functions you will create and what they will do - ie: "function add(num1, num2) {}" (this is called the function header and is the function without code) - Description - this function will add 2 numbers.
    • A list of java script objects and functions needed - ie: "d.getSeconds()" where d is a date object
    • A list of HTML DOM objects needed and how to reference/access them - ie: "document.forms[2].name" for the
    • A link to your project
  5. Edit the file "javascript_demo_page.html" to create your java script
  6. Check you demo page in all of the browsers - Safari, Firefox, and Internet explorer before submiting
  7. Submit the lab in the same fashion as the last few labs:
    • Put everything in a directory named 'Lab7_UXXXXXX' and zip it up.
    • Upload it to the web server as per the instructions at the bottom of the linked page
    • Email your tutor with a friendly message and a link to your page.

Links