![]() |
If you have a tag - any tag - and you look at the attributes belonging to that tag, you find a subdivision into "Common", "Events" and "All". So far we only used attributes from the "Common" list. | |
![]() |
But if you click on "Events", a whole new list of attributes comes up, including. e.g., "Onclick" or "OnmouseDown". | |
![]() |
From the names and the description, it is clear that something is going to happen - an event takes place - if you do something on the thusly attributed part of your document in the browser. | |
![]() |
The something that is going to happen
comes in two steps: 1. A JavaScript program will run that is mostly a part of the document that contains the attributed element. 2 What happens when an event occures is defined by the value refering to a Javascript function . Thisfunction is defined in a special <Script> ..</Script> block. |
|
![]() |
Events are nothing new: Opening a document, whatever takes place when you click on a button, ... - these are all events, which a coupled to a function a programmer had already written. Starting the event then starts this predefined function. | |
![]() |
Using JavaScript (or other "script" languages that are compatible with Internet standards) allows you to define yourself what will happen when an event occures. For that you have to write a JavaScript function which then runs whenever the event is started. |
![]() |
This means you have to know (or learn) how to write a JavaScript function and for that you must learn about "OOP" - Object oriented programming. | |
![]() |
OOP is completely different from "linear" programming like C; it is also much easier - provided you have a memory like an elephant. | |
![]() |
What is OOP? Since this is a pretty abstract concept, let's look at it step by step. | |
![]() |
Obviously, you must have an object. That can be almost anything encountered in using HTML, and it will be in an hierarchical order. Lets look at everything you need if you want to see a HTML document on your screen and define the hierarchy of (essential) objects involved. "Essential" means, that we are not talking about your outlet in the wall or the batteries in your laptop, although you definitely will need them. | |
![]() |
On the highest level you need a browser. This is a piece of software and can be seen as just one object. It decomposes into smaller objects one level down: | |
![]() |
The browser needs a window (this is not the monitor, but part of the software that displays something in a window on the monitor) where you can see what the browser composed for you. The "plug-ins" sometimes needed for displaying certain documents, would be objects on the same level. | |
![]() |
What you need for feeding the object "window", yet one more level down, are objects that "manage" the document: the location, the history (when you press the key for going back one page on your browser, you need the history!), frames, e-mail formats, .... ,and especially the document itself. All those thing are objects that you can address, move, or change in an OOP. | |
![]() |
The document itself, yet one more level down, is composed of smaller objects like text files, images, forms, anchors, applets, ... . | |
![]() |
Each of these objects contains smaller objects, a form, e.g. contains the objects text, button, radiobutton, checkbox, etc. | |
![]() |
Now you get the idea. Objects are useful, because the are always constructed with elements, that define what the objects does and where it can be changed. The elements carry attributes which come in three categories: | |
![]() |
In the first category are the properties (or variables, parameters) of an object. This is something we already know; if you consider all tags as objects by now, the attribute lists we always used defined the ("common") properties. | |
![]() |
In the second category are the events of an object that we can couple to functions. Some events we can just take from the Event List; other events we may have to programm ourselfes. | |
![]() |
In the third category are functions (or procedures or methods) which are associated with an object. They exist as standard functions of an object (not visible in the HotMetal-List) or again, we have to program them. | |
![]() |
Most easy way of using Javascript is just defining new values for the properties of an object at special events. This is allready a powerful tool for creating involved Internet pages. |
![]() |
But before we try a little JavaScript, lets continue with taking a larger view of OOP for Internet activities. Why using OOP and not powerful established languages like C+ or Pascal? | |
![]() |
Well, we want to be platform independent! Any computer with any screen should be able to understand and run our program. That's after all, what's the Internet is all about. | |
![]() |
This is only possible on a high level of abstraction in programming, and that means OOP. The general disadvantage of OOP is loss of speed. | |
![]() |
JavaScript is not the only programming language that is universally understood by all computers. The three main languages with specifics and uses are shown in the table: | |
JavaScript | Java | cgi-script | |
Type | Interpreter language | Compiler language | Compiler language |
Runs | Locally | Locally | Server |
Use | "Organize" | "Calculate" | "Evaluate" |
![]() |
What does this mean? | |
![]() |
"Interpreter language" means that the computer (any computer with a browser!) directly understands what you write as a ASCII-code. In other word, after you have written your JavaScript program, you are finished. It will be understood by the browsers. A mixed blessing is that everybody else also understands your program. Everybody can download your baby and adopt it to his or her own purposes. | |
![]() |
"Compiler language" means that after you wrote the program, you have to compile it to machine code (".exe code), using a specific compiler program. The browsers obtain machine code and are happy, but the compiling process is not reversible: Nobody can convert it back to a program understandable by humans. So your brainchild is not only protected; it also runs much faster. | |
![]() |
cgi-scripts run on the server, not on your computer. The server than sends only the results, as specified in the program, to your computer. cgi-scripts are typically used for automatic responses to information people send back to you, e.g. for automatic evaluation of filled-in forms. | |
![]() |
Java is the powerful language, it can do everything. So you use it for the heavy stuff. JavaScript, while rather powerful, too, is the easy language. You use it for organizing your pages (the menu in the sideframe of this script is programmed in JavaScript), drawing from databases and for many other more structural uses. | |
![]() |
![]() |
![]() |