Tools for Information Literacy

Client side scripting

What is the difference between server- and client-side scripting?

client-side scripting requires browsers to run the scripts on the client machine
and does not interact with the server while processing the client-side scripts.

Client side scripts do not need a server to work.
They are not for collecting data,
rather they are for introducing some sort of dynamism into your web page.

As it implies, client side scripts are scripts on a page that do all their work on the client side of the relationship. They do not depend on the server. As such, there are things they cannot do (they are not good at collecting data and storing it, for example). But there are things they can do and do well, such as causing the page to react to user input.

CGI scripts are one server-side variant. Now we will be looking at client-side scripts. Client-side scripts are very often written in JavaScript, since JavaScript is a scripting language supported by most browsers.

According to W3Schools,

Client-side scripting is about "programming" the behavior of the browser.

what is it? DHTML Javascript adding to page examples other events

back to top

Dynamic HTML & JavaScripts

What do we mean by "dynamic" HTML? According to one definition,

Dynamic HTML is a collective term for a combination of HTML tags and options, that will let you create Web pages more animated and more responsive to user interaction than static HTML.

DHTML, then, is expressed in scripts written in your HTML code to create programs that add interactivity to your page. You can find tutorials for both all over the web as well as sites that offer free examples of DHTML scripts. An example is Dynamic Drive.

JavaScript is a client-side scripting language that adds interactivity to web pages and lets designers control various aspects of the browser itself.

A scripting language like JavaScript is somewhere between a markup language, like HTML, and a full-blown programming language, like Java.

With it, you can add extra functionality to your web site by using short segments of scripting code that has a syntax that is fairly easy to understand.

As with CGI scripts, there are numerous site on the web that offer free JavaScript scripts for use, many that offer to sell such scripts, and innumerable ones that incorporate JavaScript in their code. You can look at the underlying code of any page to see what they are doing.

what is it? DHTML Javascript adding to page examples other events

back to top

JavaScript background

JavaScript is a client-side scripting language. A web page designer creates simple script programs that are embedded in HTML documents and are interpretable by "script-aware" browsers.

JavaScript is well suited for responding to user actions and for doing simple processing without getting servers involved.

JavaScript is not well-suited for applications that require large amounts of data or that need access to files on the browser's machine.

Tightly intertwined with JavaScript is the Document Object Model (or DOM).

• Each document is treated as a structured object composed of other objects like anchors, links, forms, and images.
• Any of these objects have properties associated with them that are accessible from a JavaScript script.
• For example, suppose you have a document with an image embedded in it. From a script you will be able to access properties like the image's height and width, and its URL.

Much of JavaScript revolves around the notion of an event and what things can happen when an event occurs.

• Typical events that occur in a browser are things like "clicks" (when you click on something), and "mouseOvers" (when you drag the mouse over some piece of a document).
• There are more, but we'll stick with these for now.

So a script allows you to specify what actions you'd like to happen when the user does something (like click on a button in a form, mouse over an object, or something else).

what is it? DHTML Javascript adding to page examples other events

back to top

How do you add JavaScript to a page?

Understanding HTML is handy, because scripts are HTML commands, entered into the HTML code. You need to tell the browser that you are using a script and what kind of script you are using.

what is it? DHTML Javascript adding to page examples other events

back to top

Examples

The script explained:

Remember ...

The following script is an automatic script: it automatically adds text to a page

script - identifies that a script is being used
document.write("...") - content of the script
/script - closes the script section

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Scripts</title>
  </head>
  <body>
    <script>
        document.write("<h2>Table of Factorials</h2>");
        for(i = 1, fact = 1; i < 10; i++, fact *= i) {
        document.write(i + "! = " + fact);
        document.write("<br>");
        }
    </script>
    <p>Other text in the page.</p>
  </body>
</html>

The following script is a triggering script: it requires a user action to trigger it

In this case, it needs an HTML tag that the intrinsic event depends upon; it needs

1. a trigger,
2. an event that the trigger causes to happen, and
3. a script that runs when the event occurs.

The event name and the script go inside the HTML tag and the script is enclosed in double quotation marks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Triggering Scripts</title>
  </head>
  <body>
    <h2>What time is it?</h2>
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
      Click me to display Date and Time.
    </button>
    <p id="demo"></p>
   </body>
</html>

more variations on the same theme

what is it? DHTML Javascript adding to page examples other events

back to top

Other events

Try some of them out by replacing the event in the code above.

• onload occurs when a browser loads a page
• onunload occurs when a browser unloads a page
• onclick occurs when a user clicks on an element
• ondblclick occurs when a user double clicks on an element
• onmousedown occurs when a user releases the mouse button
• onmouseup occurs when a user points at an element and selects it with the mouse button
• onmouseover occurs when a user points at an element
• onmousemove occurs when a user moves the pointer that is already over an element
• onmouseout occurs when a user moves the pointer away from an element
• onselect occurs when a user selects some text in a form element
• onkeypress occurs when a user types any character in a form element
• onsubmit occurs when a user clicks on the submit button in a form element
• onreset occurs when a user clicks on the reset button in a form element

If the script requires quotation marks, "use 'single quotes' to differentiate from the double quotes that enclose the entire script."

Examples from JavaScript: The Definitive Guide

what is it? DHTML Javascript adding to page examples other events

back to top