Saturday, 8 January 2011

JavaScript Definitions - Content

One thing that makes learning how to program difficult is the need to understand a language which masquerades as a natural language but which uses words and phrases that have very precise meaning. The meaning is often not what you might expect from the etymology of the natural language. For example, in JavaScript, an action that a particular object can perform is called a method.

A number of definitions for terms used for programming in general and javaScript in particular are presented here. It takes a while to get used to these terms so don't despair. When you have finished reviewing this module, JavaScript programs should be a bit easier for you to understand.
Though not restricted to JavaScript perhaps the terms client and the related term server should be defined in the context of JavaScript programming and the Web. In this context, the client is the PC running the Web browser and the server is the remote computer that hosts Web pages, stores CGI scripts, Java applets, and the like.

// Is used for a short, one line, JavaScript comment.

/* Is used when an extensive JavaScript comment is required such as one that spans more than one line, as this one does. */
Dot Notation
Dot notation is used to identify a specific object among many, to select from among the properties associated with that object, and to assign values to the associated properties. For example:
a. document.LastModified - is a document object with a date last modified property.
b. document.forms[0].birthdate.value - here a document object is associated with a forms object, the first of several, as indicated by the "0" parameter (Objects can include other objects). This forms object has an associated property "birthdate" which in turn has a specific "value".
Event Handlers
An event handler is a JavaScript attribute that associates an object with an event. Events are actions that take place in a document, usually as a result of user activity, such as clicking on a button. Some events, such as loading a document, may not be as obvious. In order to define JavaScript event handlers as part of HTML object definitions, JavaScript extends HTML by adding new attributes to HTML tags. For example, use the browsers 'View/Source' capability to see the JavaScrpt used on this page. Look at the onLoad event handler in the tag. The lowercase on as a prefix for the event, in this case Load, is the convention for identifying event handlers even though HTML is case insensitive. With the rapid evolution of the Web HTML specifications are changing making it important to pay attention to case even though at present, HTML is case insensitive.

Event handlers include:
1. onAbort
2. onBlur
3. onChange
4. onClick
5. onDblClick
6. onDragDrop
7. onError
8. onFocus
9. onKeyDown
10. onKeyPress
11. onKeyUp
12. onLoad
13. onMove
14. onMouseDown
15. onMouseMove
16. onMouseOut
17. onMouseOver
18. onMouseUp
19. onReset
20. onResize
21. onSelect
22. onSubmit
23. onUnload
The onLoad event in the tag starts this clock.
Chick here to see a deconstruction of this script.
Programming Note:

The time shown above is the result of reading the clock of the PC executing the script. If the intent is to show the 'real' time we have a way to go. This is a common programming issue; some programs work fine but have systematic problems.

Event handlers will be discussed further in module #4

A function is a named set of JavaScript constructs "interpreted" all at once when the function is called. The generalized format for defining a function follows:

function functionName([parameters]) {
[statement 1]
[statement 2]

[statement n]

To display the "clock" shown above, a script with three related parts is required--a javaScript function located within the head tags, an onLoad event included in the body tag, and a form located on the page where we want to draw the clock face. Note that displaying the clock is not a simple process. Note also that function is a reserved word used specifically to define functions.
A specific occurrence of an object is called an instance. For example, a button is an object, but a button labeled "Click for the Date and Time" is an instance of that button.
A language where the code is converted to machine language line by line each time it is run is called an interpreted language. That is, it not compiled into an executable file at one time destined for a specific computing platform. Compiled languages run faster, however they are not as flexible as interpreted languages. From our perspective though a very cogent fact is that JavaScript, an interpreted language, will work with any platform that runs a JavaScript-enabled browser.

Keywords and Reserved Words
Keywords are identifiers that are built into JavaScript that perform explicit tasks. For example function, if, var are all keywords that were used several times in the script on this page. These and other words are reserved and may not be used in ways not prescribed by the language. A list of these words is provided below.
double else
instanceof int
super switch

A constant value that does not change is called a literal. It can be a number or a string enclosed in quotation marks. "These are the times ...", 22, 3.42E-8, are all literals.
An action that a particular object can perform is called a method. A method either does something to an object or with an object that effects other parts of the script or document. They are commands of a sort that effect a particular object. For example a method, submit (), causes the instance of the document object named myform to be submitted - document.myform.submit().

Any thing that can exist in temporal space be an object (e.g., a dog, an instance of time - 3:00PM, a document are all objects). JavaScript includes three types of objects. They are native, host, and user-defined. For example Math is a native object. Native objects start with a capital letter and are case sensitive. Host objects are also case sensitive and are all lowercase. They are used to interact with a loaded document. For example document is a host object. User-defined objects are just that. You define the objects and implement them. They may start with either a lowercase or uppercase letter. User-defined objects are case sensitive.

JavaScript has the following core or fundamental objects:
Array Date document Form
Function Math String
Go back one page.

Additional objects include:
Anchor Applet Area Boolean Button Checkbox
event FileUpload Frame Hidden history Image
Layer Link location MimeType navigator Number
option Password Plugin Radio Reset screen
Select Submit Text Textarea window

JavaScript allows objects to have child objects, in other words a descendent of a parent object. Further, the window object is the parent object for all other objects so you can omit including the window object name when referring to window's properties and methods. For example [windows]document.form[3], refers to the 4th form in the current window (remembering that programmers start counting at zero).
Operators are symbols that direct the way an expression (a meaningful combination of symbols) is manipulated. For example '=' is the assignment operator. var x = 10 means that x is assigned the value 10. Since the topic of operators is both complex and very important to the understanding of JavaScript (and programming in general) it deserves a page of its own.
When defining a function a set of parameters is required (though the parameter set may be all or partly empty). These parameters allow values to be passed to a function. For example
function myFunction(a, b, c) {
alert("Here " + a);
myFunction("Spot", "Rover")
The values a and b inside the function accept the parameters Spot and Rover while the value of c remains empty. In the example shown above only Spot is used.

A property is a one word attribute that describes a characteristic of an object. Properties are usually associated with objects via dot notation. and pizza.toppings.pepperoni are statements with house and pizza being the objects. Each has an associated property, color and toppings respectively. These properties have the values green and pepperoni respectively.
A recursive function is able to call itself. This ability allows a function to be executed in a loop with different argument values each time it executes. This is a complex topic worth a separate page.
The term 'string' is common to most programming languages. A string as far as JavaScript is concerned is any set of characters enclosed in either " " or ' ' including zero characters. Take care since for some expressions it is necessary to use both types of quotations in an ordered fashion.
A variable is a name for a memory location that holds a value. JavaScript requires that a variable must start with either an underscore or a letter. The rest of the name may include letters, numbers, or the underscore. Variable names are case sensitive. For example _xyz, _XyZ, Peter, peteR, hosenpheffer, hoSenPheffer are all different and valid variable names.

No comments:

Post a Comment