Fenrir Von Der Nebelungs
IV.

Interactive HTML with JavaScript

IV.1

Overview

IV.1.1 Introduction

Combining JavaScript and HTML allows webpages to become interactive. This section will discuss briefly how to use JavaScript to add dynamic content to a basic HTML page. Specifically this section focuses on adding the content to a webpage that will be needed later to dynamically query and edit a MySQL database.

The topics covered include:

  • editing the webpage displayed by the browser from JavaScript routines;
  • creating and reading forms with HTML and JavaScript respectively;
  • creating buttons in the webpage which trigger JavaScript routines;
  • and using included ".js" files in an HTML page.

IV.1.2 Prerequisites

This section presupposes a basic working knowlege of JavaScript as covered by "Basic JavaScript". It also requires a very basic knowledge of HTML script. See the links section for online sources which cover HTML. Apache must be installed and running to use the "localhost" URL's to run the exercises. However, since both JavaScript and HTML are client-side scripts, a server(or server software) is not required to execute the exercises in this section. Only the a web-browser, such as Chrome, is required.

IV.1.3 Contents

IV.1 Overview
IV.1.1 Introduction
IV.1.2 Prerequisites
IV.1.3 Contents
IV.2 Editing the Webpage with JavaScript
IV.2.1 Intro
IV.2.2 An Elementary Example
IV.2.3 A Time Dependant Page
IV.2.4 Executing the Examples
IV.3 User Input Elements
IV.3.1 Intro
IV.3.2 Buttons
IV.3.3 Forms
IV.3.4 Executing the Scripts
IV.4 Using Included JavaScript Files
IV.4.1 Intro
IV.4.2 An Example
IV.4.3 Execution
IV.2

Editing the Web Page with JavaScript

IV.2.1 Intro

Incorprating JavaScript into a web page allows for the page to change dynamically. These changes are implemented by the JavaScript code rewriting the contents of HTML elements. After the HTML is rewritten the browser re-interprets the script with the programmed changes and displays the result. Very simple examples of how JavaScript can be used to rewrite a webpage are covered in the next section.

IV.2.2 An Elementary Example

This section demonstrates how the output of JavaScript routines can be used to rewrite the webpage displayed by the browser. The first step is to create an HTML element with a specified id such as:

<div id="forDump"></div>

where in this instance the "id" of the "div" element is specified as "forDump".

The next step is to use a JavaScript routine to modify the contents of the displayed "div" element. The JavaScript lines:

var element_forDump = document.getElementById("forDump");
element_forDump.innerHTML = "Hello World from JavaScript!";

print the string "Hello World from JavaScript!" inside the "forDump" div element in the browser window. Here "element_forDump" is the, arbitrary, name given the HTML element object retrieved by the "getElementById" function.

The following program uses the above commands to pass output from a JavaScript function to rewrite a HTML element and display the string, "Hello World from JavaScript!" in the browser: 

<!DOCTYPE html> 
<html> 
    <body> 
        <div id="forDump"></div> 
    </body> 
                                
    <script type="text/javascript">
        var element_forDump = document.getElementById("forDump"); 
        element_forDump.innerHTML="Hello World from JavaScript!"; 
    </script> 
</html>

This program can be saved as, "HelloWorldJS.html", in the "/var/www" directory and executed using the browser in the usual fashion.

IV.2.3 A Time Dependant Page

In the previous example JavaScript rewrites the webpage; however the rewrite occurs too fast for the change to be observable. The next example, named "test_java_time.html", changes a web-page after about a 3 sec delay:

Error: could not load JavaScript function

The lines:

var date_0 = new Date();
var t_0 = date_0.getTime();

First create a new "Date" object, and then retrieve the time in milliseconds from that object. This object is then compared in the "do-while" loop to the current time as retrieved from a second "Date" object. When the difference in time is more than 3000 milliseconds the loop stops, the "Hello World..." message is written to the HTML element, and the JavaScript terminates which causes the browser to display the, re-written, HTML.

This example is only partially dynamic with respect to time since no content appears until the JavaScript is effectively done. Fully dynamic content that depends on time alone is not covered in this document since the primary focus is on integrating with MySQL. However dynamic content that depends on user input is discussed in the next sections.

IV.2.4 Executing the Examples

There are two ways to run these examples.

The first method is to open a browser such as Chrome and enter the path to the file, for example: "/var/www/test_java.html", in the browser's address bar. Once the URL is entered it will convert to: "file:///var/www/test_java.html". This method relies only on the browser.

The second method uses the "localhost" server. To retrieve the HTML page from the local server, enter the URL "localhost/test_java" in the browser. Once the URL is entered it will convert to: "http://localhost/test_java.html". For this method to work the server software, for instance Apache, must be running.

IV.3

User Input Elements

IV.3.1 Intro

JavaScript can be used to make webpages react dynamically to user input. This section discusses two important elements that allow a webpage to accept user input and change as appropriate.

IV.3.2 Buttons

Buttons are website element that can be used to call routines when clicked. Typically JavaScript routines are called by buttons.

An example of a button that calls a JavaScript function when clicked is:

<button onclick="testClick()">Call JS Function</button>

this button calls a JavaScript routine named: "testClick()" when selected.

The following script, "TestButtons.html", which can be saved in the "/var/www" directory, is an example of a button which calls JavaScript functions to display a message: 

<!DOCTYPE html> 
<html> 
    <body> 
        <button onclick="testClick()">Call JS Function</button> 
                                    
        <div id="forDump"></div> 
    </body> 
                                
    <script type="text/javascript"> 
        function testClick(){ 
            document.getElementById("forDump").innerHTML=
                "The button has been selected: Hello World!"; 
        }
    </script>
</html>

Running this script is discussed in section IV.3.4.

IV.3.3 Forms

Forms are website elements which accept user input. A basic HTML form can be added to a web page with the following line:

Input text here:<input type="text" name="test_input" id="test_input_id" size="15">

This form accepts text input of 15 chars or less. The form can be read by JavaScript routines with the following, JavaScript, code:

var fromform = document.getElementById("test_input_id").value;

The variable "fromform" is filled with whatever the user entered in the form.

To have meaningful input from the form there must be a means for the user to submit the data after it is entered. To do this a button is usually used. The following script demonstrates using forms and buttons for interactive data collection: 

<!DOCTYPE html> 
<html> 
    <body> 
        Input text here:<input type="text" name="test_input" 
            id="test_input_id" size="15"> 
        <button onclick="testForm()">Submit</button> 
                                   
        <div id="forDump"></div> 
                                
    </body> 
                                
    <script type="text/javascript"> 
        function testForm(){ 
            var fromform = document.getElementById("test_input_id").value; 
            document.getElementById("forDump").innerHTML="The text: \"" 
                + fromform+"\" has been entered"; 
        } 
    </script> 
</html>

It is recommended that this script be saved under the name: "TestForms.html" in the "/var/www" directory. For further information on forms, buttons and dynamic webpage content see the links section.

IV.3.4 Executing the Scripts

These scripts can be executed as described at the end of the previous section: "Editing the Web Page with JavaScript". To execute one of the scripts, either type its full path in the URL bar of the browser, or type "localhost" followed by its full path relative to the "/var/www/" directory in the browser.

IV.4

Using Included JavaScript Files

IV.4.1 Introduction

Instead of writing all the JavaScript routines in the ".html" file, JavaScript code can be written in a separate ".js" file which can be included in the "head" section of the ".html" file.

IV.4.2 An Example

The following code includes a JavaScript file in an HTML file: 

<head>
    <script type="text/javascript" src="HelloWorld.js"></script>
</head>

The "HelloWorldJS.html" script can be rewritten as follows. First the JavaScript code is written in a file, "HelloWorld.js": 

function helloWorld(){ 
   var element_forDump = document.getElementById("forDump"); 
   element_forDump.innerHTML="Hello World from JavaScript!"; 
}

Next the ".html" file, "HelloWorldJSInc.html" is written: 

<!DOCTYPE html> 
<html> 
    <head> 
        <script type="text/javascript" src="HelloWorld.js"></script> 
    </head> 
    <body>  
        <div id="forDump"></div>  
    </body> 
    <script type="text/javascript"> 
        helloWorld(); 
    </script> 
</html>

Execution

To execute the program, point the browser's URL bar to the address of the HTML file. This can be done either by entering the full path to the file in the address bar, or by entering "localhost" followed by the filename. These files are executed in the same way as the other "HTML" files with in this section.

When the browser loads "HelloWorldJSInc.html", the message from the JavaScript file: "HelloWorld.js" is displayed.