SILS iSchool

24 Sep 2018

Value Added | daily

Class Schedule

Basics | sessions 01-05

22 AUG | intro
27 AUG | clients
29 AUG | servers
05 Sep | networks
10 Sep | basics lab

Web Development | sessions 06-11

12 Sep | structural layer
17 Sep | presentational layer
19 Sep | working with layers

24 Sep | behavior layer | client side scripts | DHTML practice | next session

26 Sep | images & design
01 Oct | website lab

Document Markup | sessions 12-14

03 Oct | object layers
08 Oct | tools that read markup
10 Oct | document markup lab

Spreadsheets | sessions 15-19

15 Oct | spreadsheets
17 Oct | formulas & functions
22 Oct | data display
 18 Oct | Fall Break 
24 Oct | database tools
29 Oct | spreadsheets lab

Relational Database | sessions 20-26

31 Oct | relational databases
05 Nov | tables
07 Nov | relationships
12 Nov | input & output
14 Nov | SQL
19 Nov | complex queries
26 Nov | databases lab
 21 Nov | Thanksgiving 

Presentation | sessions 27-30

28 Nov | presentation design
03 Dec | presentation delivery
05 Dec | presentation lab
12 Dec | 0800-1100 | final in class presentation





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.

Client side scripting

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.

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 new Hypertext Markup Language (HTML) tags and options, that will let you create Web pages more animated and more responsive to user interaction than previous versions of 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. (An example of 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.

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).

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.

back to top

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

<html>
<head>
<title>Simple Scripts</title>
</head>
<body>
<script type="text/javascript" >
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 script explained:


script - identifies that a script is being used
type - identifies the scripting language in use
="text/javascript" - which, in this case, is JavaScript
document.write("...") - content of the script
/script - closes the script section

back to top

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.

<html>
   <head>
      <title>Triggering Scripts</title>
   </head>
   <body>
      <p>
            <a What href="time.html" onclick ="alert('Today is '+ Date())"> time </a> is it?
      </p>
      <p>Other text in the page.</p>
   </body>
</html>

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

back to top