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

3. Application of Handling (3) -- HTML Element Activating Event Handling

[The purpose of this section]
Understand HTML elements (A, form) that execute event handling, and learn how to use them.

HTML Element Executing Event Handling

From the explanation in the previous section, you should have understood that “activation by a particular operation by the visitor,” which is the second activating timing in the handling by JavaScript, can be managed by the event handler. Then, how can it actually be described?

To activate a handling using the event handler, you can write, in an HTML starting tag, the event handler name as the attribute name and the handling name to be executed as the attribute value of the event handler.

There are two types of HTML elements to handle events, which are A element and form-related element. Since we have not explained form-related elements yet, we will show you the necessary functions only, because there are so many functions.

When A element is used:

Although A element is an element to create a hyperlink, if we think about that, the handling of “creating hyperlink” can be analyzed as follows.

Displays the character string (or an image) having the contents of A element, and when a click is detected at the character string (or an image), displays the contents of URI instructed by href.
　Example：<a href="http://www.kumamoto-u.ac.jp"> Kumamoto University</a>

In above example, it means when the string “Kumamoto University” is clicked,you will “jump to Website of Kumamoto University.” In the three types of event handlers shown in the previous section, you can see that “onClick” is working here.

(Note) Additionally in A element, “onMouseOver” event handling, in which “when the mouse pointer comes to the displayed element position the display property of the area is changed”, is also executed, just as :hover pseudo-class of CSS changes its properties.

When a form-related element is used:

The form element and its related HTML elements have the following functions.

Prepares (or displays) the buttons and character input boxes to check on the options, and when the Web page visitor places check on the options or enters characters, transfers the data to the WWW server.

You can see that these also execute the event handling.

Here, however, we won’t use the intrinsic function to send data to the server, and use only the function to have the Web page visitor enter something. Also, we will focus on “button”, which is the most intuitive function among the input functions.

The form element requires some input element, and if you designate button as the type attribute, the button is created. The characters displayed in the button are designated as the value attribute.

<!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>
    <form>
      <input type="button" value=" Click here! ">
    </form> 
  </body>

</html>

When the above is displayed by the Web browser, a button below is created. You can see that the value attribute is displayed in the button.

When the above button is clicked, a motion of being depressed (change of image) is displayed, but this alone will not change anything! (This may be obvious, because no handling contents have been written in the above HTML.)
This is because the input element has the event handling function to cause only creation of the button and “change the image when the button is clicked.” To execute further handling, you need to combine it with an event handler.

For example, “to activate a JavaScript handling named oshita() when the button is clicked”, you need to write as follows.

<!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>
    <form>
       <input type="button" value="Click here!" onClick="oshita()"> 
    </form> 
  </body>

</html>

Here a red portion has been added to the input element. “ onClick” is the event handler name, and it causes “to execute the instructed handling when the mouse is clicked at the instructed area.” The “instructed handling” is instructed by “oshita()”, which is the value of the event handler.

If above is written in the HTML file, then following will be displayed.

When the button is clicked, a window is opened, and “Thank you very much. Have a good day!” will be displayed.

This message has already been determined in the definition of oshita() in myscript.js. If you change the input (argument) of oshita(), the displayed message will also be changed. For example, if you modify as follows, the displayed message will be “Hello.”

function oshita() {
  window.alert(‘Hello’);
}

Also, the characters in above button are the value attribute in input tag, and therefore if you change to

<input type="button" value="push me!" onClick="oshita()">

then button will look as below. (Additionally, oshita() has been changed as above.)