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.
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:
- Alert Box - use this for debugging, printing
out the value of a variable or marking a position in a script.
- Prompt Box - use this for getting user input
and learning about if statements
- 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
- New Window - use this to learn about opening
new windows and the date object
- Go to google and search for "java script tutorials" and go through things
that interest you.
- Go to the links section at the bottom of this page
and check out what can be done with javascript.
- 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.
- 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.
- 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
- Edit the file "javascript_demo_page.html"
to create your java script
- Check you demo page in all of the browsers - Safari, Firefox, and Internet
explorer before submiting
- 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.