Demystefying Javascript for LIS7008 Projects

March 14, 2009

What's the use of JavaScript?

Create a Web page that interacts with the user;
Make your Web page dynamic instead of static.
E.g.,

make image rollover;
create popup windows;
create menus;
create expandable lists;
create forms for input and get instant feedbacks, e.g., make an order/purchase, validate what you have typed in a form, get an instant invoice, etc.

What is JavaScript?

HTML - Hypertext Markup Language: serves to mark out sections of text that should appear in a certain style;

C, C++, JAVA - programming language: a set of grammatical statements and rules that can be combined to give instructions to the computer.

JavaScript - a scripting language: a hybrid of the above two, closer to a programming language. It serves the same purpose as a programming language, but its rules are less strict and less complex. Best suited for small programming tasks.

Object-oriented Language: built around the concept of objects.
Think of objects as little black boxes. You poke things into it (called setting properties) and in response, the black box does something. An object has:

properties or attributes,
methods: do something with the object.

E.g., a "Person" object can have:
-- properties: name, DOB, address (Note: they can also be objects, e.g., DOB can have attributes of year, month, day);
-- methods: computeAge, changeName, changeAddress;

How to access properties and methods of an object? We can use the . (dot) operator, for instance, Object.property, Object.method, Object.Object.property, e.g., Person.name, Person.computeAge;
if DOB has properties of year, month, and date, we can access year by Person.DOB.year

E.g., the "screen" object has a color attribute; you can set it to any color, such as green.

JavaScript structure

<SCRIPT attributes> JavaScript program code</SCRIPT>

The opening <SCRIPT> tag has two attributes that it may include.
Where do we put javascript codes?
(A)We either write javascript codes in the HTML HEAD section then execute them in the HTML BODY section, or
(B)in order to reuse a piece of javascript code for many times, we write it as a separate text file with an extension of .js then call it in by its URL in the HTML HEAD section, and execute it in the BODY section. Examples:

For (A):


<HEAD>
<!- Hide the script statements from browsers that can't handle them
<SCRIPT language="JavaScript"> JavaScript program code</SCRIPT>
->
</HEAD>
<BODY>
execute it
</BODY>

For (B): (suppose I have created myscript.js and put it somewhere on http://mywebsite.com)


<HEAD>
<!- 
<SCRIPT src="http://mywebsite.com/myscript.js"></SCRIPT>
->
</HEAD>
<BODY>
execute it
</BODY>

How are JavaScripts executed?

The execution of our JavaScript programs needs to be "triggered" by something that is known as an event. An event is any user action like a click, mouse movement, text selection, or form entry.

Commonly used events:

Click: event occurs when you click the mouse button on either a link or a form element. Form elements include buttons, check boxes, and "reset" or "submit" buttons.
MouseOver: event occurs when you move the mouse pointer over a link.
Select: event occurs when you select text within a form's text entry element (by dragging the mouse across an area of text while holding down the left button, highlighting it). You might do this just before modifying the text in the entry.
Submit: event occurs when you click the "Submit" button of a form element.
others: MouseOut, Load, Focus, Blur, & Change, etc.

Event handlers

Event handlers are JavaScript programs that execute upon being triggered by a specified event; can be triggered using this syntax: onEvent="javascript code".

Events that can be triggered include onClick, onMouseOver, onMouseOut, onSelect, onSubmit, onLoad, onFocus, onBlur, onChange, etc.

JavaScript Objects and Methods

Frequently used objects and their properties, methods, and event handlers:
window, document, form, checkbox, select...

A manually created example:

create a form, input data, and get instant feedback (Note: you can use View->Source to see the code.)

How to steal javascripts?

"Well stolen is half done!" -- a Spanish proverb.
Note: when you use somebody's code, do give credit to the author by adding a comment in your javascript code.

Here are some tutorials on how to steal javascript and you are recommended to do some hands-on exercises.

The Classic Image Rollover
My example: image rollover (Please use View->Source to see how I stole the image rollover javascript code.)
A Wizard for Popup Windows
My example: popup window (Please use View->Source to see how I stole the popup window javascript code.)
A better window popup maker
Javascript menu tutorial (Note: on this Webpage, "Links, Tools, Scripts" are dropdown menus; the tutorial teaches how to create dropdown menus.)
Here is my menu created by following the instructions.
dropdown menu maker
Expandable list (There are no instructions on how to steal the javascript; but you can use View->Source to see how it works.)

Some previous students' projects that used Javascript:

Some General Javascript Tutorials

How to steal javascript

The Complete Idiot's Guide to JavaScript, look at Chapter 10, 23

javascript source

javascript easy tutorials

javascript FAQ: What is Ajax?