7.1.2 Working with JavaScript

	Lets start with a simple task that you cannot do with without JavaScript: We want to load two documents at the same time with one click, e.g. two images into two frames of a frameset.
		It's trivial, but still impossible with regular links.
		Try it: Activating the link will produce a frameset with three frames. You can load something into each frame by regular links, but the text piece that is supposed to load both pictures at once does not yet work
		A second example shows the handling of images.
	There is no way to achieve that function ("Both frames") with the directly available commands in HTML. We need a JavaScript program that runs the desired action as a function, triggered by an event that takes place at the right object.

	So we have the ingredients:
		The object: This is the sentence "Both frames".
		The event: It is anything applicable from the "Event" list, for example "ONMOUSEOVER" ; but beware: The fact that the event is defined does not necessarily mean that your particular browser will understand it!
		The function It is to change the contents of two frames in your frameset whenever the event takes place, in our example whenever the cursor just moves over the sentence "Both frames!". We will have to give this function a name; lets call it "change all".
	We now have to write a JavaScript program that must be part of the document where the action is to take place, that is in the document defining the contents of HeadFrame ("buttons_headframe.html" in the list below)
	It is a good idea to do the following procedure yourself. So load the documents needed with HoTMetaL; you will find them in the script under:
		kap_7/illustr/frame.html. kap_7/illustr/right_frame1.html. kap_7/illustr/left_frame1.html. kap_7/illustr/buttons_headframe.html. kap_7/illustr/pamela.jpg kap_7/illustr/dolly.jpg
	The JavaScript program now must be inserted somewhere in the body par of the "buttons_headframe.html" file. This is done by simply inserting "Script" from the "Insert" menu. A <Script></Script> tag appears
		We want a function to run whenever the event takes place, and we gave that function the name "change_all" so we now write inside the script: function change_all (){} (The meaning of the brackets will become clear immediately).
	But before we continue, we look at what we have done in the source code: The word function appears in blue, the rest in green. The blue color indicates that the word "function" is part of the instruction set of JavaScript, i.e. the browser, being able to interpret JavaScript, will do something specific whenever this word comes up. This has two very important consequences:
		Obviously, within JavaScript, there must be more instructions like "function". If you want to program in JavaScript, you have do know the proper words and what they do. This is where the elephant brain comes in - or simply refer to the list in the link
		When you make up words of your own - like our name "change_all" for the function we need to defined, you must, for obvious reasons, never use one of the words belonging to the instruction set which again means that you should know them.
	What is the meaning of the brackets in connection with a function? It is the same as in most other programming languages; e.g. C.
		The round ( ) brackets contain the variables of the function, the { } brackets specify what the function does.
	For our simple example there are no variables, only a simple action, so we leave the ( ) brackets empty (but do not omit them!).
		What the function is supposed to do is to load two documents into the two frames with the names "SideFrame" and "MainFrame"; in particular for the example the files "pamela.jpg" and dolly.jpg". So it induces changes in the objects "SideFrame" and "MainFrame", but it must also induces changes in other objects, too.
		If you look at the hierarchical list given before, we do not want to change the browser, but we certainly want to change the window. For example, we may want that the action takes place if the user moves the cursor over the object triggering the event even if he (or she) is actually working in a different window that may be open at the same time. So we use the "top" command encountered before, to put, whatever is going to happen, in the active window.
		We also want whatever is loaded to be displayed in a particular frame, so we have to specify that. too.
		What we write in the { } tags of our function then is: top.MainFrame.location.href = pamela.jpg; top.SideFrame.location.href = dolly.jpg