Although we have learned the basics of JavaScript in Session 11 and Session 12, you don’t need to know the real details of JavaScript, since most of you will not become programmers. If you feel JavaScript functions are handy in your Web page, then you need only to be able to use so many sample programs that are readily available on the Internet to create your Web page.

Having said that, though, you still need to know the following, to be able to use them.

1. The concept of programming and the basic syntax of JavaScript.
2. The basics of events and how to handle the events.
3. The concept of object and basic methods of how to handle it.

Now let’s go through the outline one more time. If you can’t remember some of the following, go back to the previous text and relearn.

“Programming (To create a program)” is the work of creating the “instruction procedure (program)” which you wish a PC to execute, in a language the PC can understand.

JavaScript (language) is the language that a Web browser, such as Netscape Navigator or Internet Explorer, can understand. Therefore, combining JavaScript and HTML, you will have the ability to create a sensible Web page.

The basic items of JavaScript syntax are shown below.

• Substitution: The basic action to enter some value to a container called a variable.

  age('How are you?');

• Calling a method (handling): To call up the handling that the system has, or the handling that you defined, and execute it. ( （Sample or source of sample）

  alert('How are you?');

• Conditional branch: To change the flow depending upon the condition. (Sample or source of sample）

  if(age >= 44){ alert('Take care!'); }else{ alert('It’s nice to be young!'); }

• Repetition: To repeat similar handling (Sample or source of sample）

  for(i=1; i<=7; i=i+1){ document.write('<font size="',i,'">How are you?</font><br>'); }

• Method (handling, function) definition: To define the handling you wish to execute. (Sample or source of sample）

  function yamabiko(){ for(i=1; i<=7; i=i+1){ document.write('<font size="',i,'">How are you?</font><br>'); } }

“Event” is the status change caused by operating a PC (such as mouse operation and keyboard input). You might call it a signal issued by the operation.

For example, when you click the left button of the mouse, a signal to tell “the left button of the mouse has been pressed!” is issued from the mouse cable (or tail) to the PC. Because a new signal has been delivered, the status of the PC changes from “No signal from mouse” to “Left button of the mouse has been pressed! A signal is delivered.” This status change is called “an event” of “left button of the mouse has been pressed.”.

However, just causing an event will mean nothing if the PC does nothing to handle the newly-created event. Consider the following example. If you click the link on a Web page by the mouse, an “event” of “left button of the mouse has been clicked” will occur. This means that a signal of “left button of the mouse has been clicked” has been delivered to the PC. Nevertheless, if the PC does nothing to it (or ignores it), there will be no action to jump to the link. This would be the waste of time even if you click the mouse.

Therefore, there must be “an event manager” who always monitors the issued “event”, and gives an instruction, such as “Execute (A)” when “an event (a)” develops. Such a manager is called an “event handler ” .

In a PC, various “event handlers” are always running to respond to various “events” so that they can respond to any event. For example, when a mouse moves, the “event handler” works to cause the mouse pointer to move on the screen. The event handler to cope with the mouse movement catches how far and in which direction the mouse has moved, and then requests the PC to move the mouse pointer in response to the event, and therefore the mouse pointer moves around on the screen.

In JavaScript, this “event handler” is available. By using this, you can change the view of your Web page when the visitor operates your page. On the page, you will be able to request the necessary handling responding to the “event” such as “mouse has been clicked” and “the mouse pointer comes to a certain location.”

Probably the most important objective of using JavaScript is to handle the event (use the “event handler”).

Since this is the important point, we will review it in the next chapter.

The third one is the “object (thinking language)”, and is a rather abstract concept. It may be a little difficult to understand, but we will show you an example of the idea. Since JavaScript is actually based on object (thinking language), you need to know this.

HTML directs how the characters and images are laid out on a browser, using “tags.” Furthermore, since a “tag” has an attribute (various functions), you can change the value (attribute value) to give detailed instructions. For example, the <body> tag is the one to show that it is the body text of HTML, and has the attribute “bgcolor” (function to change the background color), and by designating

<body bgcolor="red"> 

you can designate the “color code” to its value, and change the background color.

This may also be thought of as follows.
An “object” called a browser has an attribute (or in this case, it would be easier to say “property”), and by directing the value of the attribute, you can change the display contents. For example,

document.bgColor="red";

shows a good sample. An“object”called‘document ’ that displays the browser window has the attribute of ‘ bgColor’. By directing its value to ‘red’, the background color, which is one of the attributes of the browser window (object), is changed to red.
Actually in JavaScript, the idea of defining various things as the attributes of an object, and asking the handling of object itself or the attribute of the object are commonly done.

In an easier way of description to compare the ideas, you might say:

• In HTML, “direction (tag)” to change the background color is the central character.
• In object-oriented idea, “object (browser)” is the central character.

In other words,

• In the beginning there is a society which is a group of “direction (tags)”, and then HTML calls for a new activity (creating a Web page) within the society.
• In the beginning there is “object (browser)”, and JavaScript attempts to change its property, to add new children object (characters and images) to the parent object (browser) or change its property creating a Web page, with the object always at the center of thinking.

As above, HTML tends to consider displaying on the browser as the center, while JavaScript tends to consider object at the center, which causes differences in the way of directing between the two in the above example.

[Reference link]
About the object of JavaScript (in Japanese) (broken link)
http://www1.parkcity.ne.jp/chaichan/src/javasc07.htm