Javascript

You've just seen an example of JavaScript! If you View Source, you'll see what it looks like. Pretty simple stuff really..

Here are some key things to note:

  • JavaScript usually goes between the </title> tag and the </head> tag. Like HTML, JavaScript is just text that can be typed into a word processor. It goes right amongst the HTML code that makes up your page. Generally JavaScript lives in the header of the HTML page (it gets read very early this way.Often scripts initiate something right on loading), but you can also put JavaScript in the body.
  • The beginning of a bit of JavaScript begins with <script language="JavaScript"> Right now, you don't really have to put the language="JavaScript" element in there because JavaScript is the default script language for all browsers. However, this could change, so it's a good idea to include the language element.
  • Everything between // and the end of a line is a comment and will be ignored. Make lots of comments! A basic rule of good programming style is that you should always think about the next person who has to look at your script. It might be a friend, a co-worker, an employer, or it could be you in the future. The easiest way to make sure you'll understand your own script in three months is to comment freely and often. If you want to comment a huge block of text, you can put it between /* and */ like this:

    • /* Immagine that this is a huge block of text that I've made invisible to the browser but visible to the editor */ You'll discover a line like the one above hidden in the little script for this page when you view source.

The alert: (Only four more weeks before all the assignments for this subject are due....Werner); calls up a simple dialog box with the words "Only four more weeks before all the assignments for this subject are due....Werner" inside (subtle right?). Here's your first piece of JavaScript: the "alert" method. You'll finish that in a few minutes.

Three important things to remember:

  • you should end the alert script with a semicolon;
  • put the text you want in the alert box between "quotes"
  • JavaScripts end with the </script> tag.

Dealing with non-Java enabled browsers

Hiding JavaScript The problem with JavaScript is that some old browsers don't understand the <script> tag. These browsers will treat your JavaScript just like HTML. There's a simple trick around this that uses HTML comments:

<html> <head> <title> whatever the title is</title>

<script language="JavaScript">

<!-- hide this stuff from other browsers

YOUR SCRIPT HERE

// end the hiding comment -->

</script>

</head> <body> etc., etc., etc.

The "forbidden words..."

Java and JavaScript are keywords reserved for the programming language itself and MUST NOT BE USED AS VARIABLE OR FUNCTION NAMES

JavaScript is related to Java the cross-platform programming language but the two have more differences than similarities.

JavaScript which we are exploring here is an "object orientated" scripting language and therefore works on the basis of identifying an "object", in this case some element / component of the browser in use and telling it what to do.

The table below gives you a little hierarchical structure to help understand the JavaScript concept in principle.

Term Function Comment
Objects Typically an "object" is a window, a form, a single element etc Objects have properties. properties can modify objects.
Properties Properties can modify objects. Objects and properties are expressed with fullstops between the single terms such as: "window.status"(this is called the dot syntax)
Methods Methods enable objects to do something or having somethig done to them. Objects and methods are expressed in dot syntax followed by a paretheses signal () and look like: document.write()
Events Events are actions performed by the user Event actions can be things like submitting a form or moving the mouse over an image. There are 12 event handlers in all (see lower down on this page)
Variables Variables contain values Variables are assigned strings
Values Values are pieces of information Values are told what to do by operators
Operators Are symbols used to work with variables. They tend to be arithmetic in nature. x=y (results in x and y being added together)
Assignments An assignment operator can enter values in variables x=y (results in x being assigned the same value as y)
Values Values are a piece of information (usually either numeric or text) Objects get told what to do by
Comparisons Comparisons as the name implies compare Comparisons might compare the value of one variable against that of another (matching passwords for instance)

The Java Language Terms:

Here is a brief definition of some of the Java language terms. If you are familiar with a 3rd or 4th generation programming language the term in parenthesis below will help you associate the object oriented term to a familiar concept.

Term Description
Class consists of variables and methods. Every Java applet is a class. (program)
Method is a group of statements that perform activities in a class.(subroutine)
Member Variable contains a value for a class that is available to all methods in the class.(common)
Local Variable contains a value available only to the method in which it is defined. (local)
Package is a group of classes bundled together for reference convenience. (library)
Object is an instance or occurrence of a class.

Naming Conventions

Class names typically are comprised of words that each begin with a Capital Letter.

Method names usually begin with a lowercase letter and each subsequent word is capitalized.

Both member and local variable names are usually in one of two formats. They could start with a lower case letter and each subsequent word is capitalized. Or they could contain underscores in between words or trailing single word names.

Language Syntax

Java statements are terminated with ";".

Classes, methods and blocks of statements (if, for, while) are enclosed in brackets like "{ }".

Conditional clauses associated with an if statement are placed in parenthesis like "( )".

All statements, parameters and variable names are case sensitive.

For example "North" is not the same as "NORTH" when used as a parameter to the add() method.

All variables must be declared and they must have one type like; int, boolean, float. Java provides the typical mathematical and character manipulation operators like +, -, *, /, ++, and many others.

Event Handlers

Event What it does
onAbort The user aborted loading the page
onBlur The user left the object
onChange The user changed the object
onClick The user clicked on an object
onError The script encountered an error
onFocus The user made an object active
onLoad The object finished loading
onMouseOver The cursor moved over an object
onMouseOut The cursor moved off an object
onSelect The user selected the contents of an object
onSubmit The user submitted a form
onUnload The user left the window

Value Types

Type Description Example
Number Any numeric value 12345
String Characters inside quote marks "My name is Werner"
Boolean True or False True
Null Empty and meaningless
Object Any value associated with the object
Function Value returned by a function

Operators

Operator What it does
x + y (Numeric) Adds x and y together
x + y (String) Concatenates(links) text x and text y together (i.e., concatenating "check" and "box" produces "checkbox")
x - y Subtracts y from x
x * y Multiplies x and y together
x / y Divides x by y
x % y Modulus of x and y (i.e., the remainder when x is divided by y)
x++,++x Adds one to x (same as x = x + 1)
x--,--x Subtracts one from x (same as x = x - 1)
-x Reverses the sign on x

Assignments

Assignment What it does
x = y Sets x to the value of y
x + = y Same as x=x+y
x - = y Same as x=x-y
x * =y Same as x=x*y
x /= y Same as x=x/y
x % =y Same as x=x%y

Comparisons

Comparison What it does
x = = y Returns true if x and y are equal
x ! = y Returns true if x and y are not equal
x > y Returns true if x is greater than y
x < =y Returns true if x is smaller/less than y
x <= y Returns true if x is less or the same as y
x&&y Returns true if both x and y are true
xIIy Returns true if either x and y is true
!x Returns true if x is false