Information Processing Fundamentals [Session11] JavaScript 1 (Interactive page)

3. Application of Handling (1) ? Activating Timing

[Objective of this section]
Learn various timings of activating JavaScript and how to describe each.

Difference of Activating Timing

The dynamic page, as you might call in it one word, can be roughly divided into two categories differing in terms of the timing of when it is activated. In the three examples shown earlier, have you noticed the difference in activating timing between the first one that “displays the visiting timing to the page” and the other two?

In the case of “displaying the visiting timing to the page”, the handling of checking the current clock and displaying it in the predetermined format within the Web page is to be done, even if the visitor does nothing on the page other than just visiting.

On the other hand, “the fish picture turns to bone” would not change by just waiting. The picture only changes to bone when the visitor of the page moves the mouse pointer to the fish picture. Thereafter, when the mouse pointer moves away from the bone picture, it will go back to the fish again. This means thatthe handling is activated by an event of a certain action taken by the Web page visitor.

As you see from this, there are two timings to activate the handling described in JavaScript, as follows.

Handling activated upon the display of the Web page
Handling activated by a certain action taken by the Web page visitor

To apply JavaScript handling, you need to describe the defined (or predetermined) handling name to the exact position in an HTML file that you wish to execute, but the method of describing in an HTML file will be varied depending upon the timing shown above.

1. Handling activated upon the display of the Web page

In this case, you only need to describe the handling name at the position of displaying the desired item. Although the description is done in an HTML file, it is not to be done by an HTML element but by JavaScript, and therefore you need to describe in a way that is clearly understood.

For this reason, it is customary to describe JavaScript in such cases as the content of script element , as shown below. The following is an example where a handling named now_time() defined in myscript.js is applied.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      Session 11 sample HTML
    </title>
  </head>

  <body>
    <script type="text/javascript">
    <!--
      now_time();
    //-->
    </script>
  </body>

</html>

→　 [See the result by the browser]

In the type attribute in script tag, the content is declared as the JavaScript. To avoid an error even in old Web browsers that do not support JavaScript, the contents of script elements are all treated as comments. (“//” is the symbol to create comments in JavaScript.)

2. Handling activated by a certain action taken by the Web page visitor

This is case 2 above, and, in contrast to case 1, requires some technique, because you need to sense the movement of a mouse or clicking that is done by the visitor of your Web page. Since it needs the concept of “Event handling,” we will discuss what that is in the next section.