Derek Bridge

Department of Computer Science,
University College Cork



Web sites vs. webapps

Desktop applications vs. webapps

Three-tier client-server architectures

(Note: not using the word 'logic' in the same way as in CS1105)

Three-tier client-server architectures

[Diagram showing a three-tier application.]

Diagram of three-tier applications from Wikipedia (Multitier architecture)

Server-side scripts

Server-side scripts:

Client-side scripts

Client-side scripts:


Client-side JavaScript

Dynamic HTML (DHTML)

[The trinity of web standards for DHTML.]

Client-side JavaScript: simple example

Event-driven programming

Client-side JavaScript: image rollovers

Unobtrusive client-side JavaScript

Recently, there has been a concern for writing scripts that are unobtrusive:

Client-side JavaScript: unobtrusive image rollovers

rollover2.html: the HTML (DOCTYPE omitted)

<html lang="en">
        <meta charset="utf-8" />
	    <title>Make me smile</title>
        <script type="text/javascript" src="rollover2.js">
            <img id="face" src="frown.jpg" />

Client-side JavaScript: unobtrusive image rollovers

The JavaScript:

if ( window.addEventListener )
	window.addEventListener("load", init, false);
else if ( window.attachEvent )
	window.attachEvent("onload", init);

function init()
	(new Image()).src = 'smile.jpg';
	document.getElementById("face").onmouseover = make_it_smile;
	document.getElementById("face").onmouseout = make_it_frown;

function make_it_smile()
	document.getElementById("face").src = 'smile.jpg';

function make_it_frown()
	document.getElementById("face").src = 'frown.jpg';

Client-side JavaScript: unobtrusive image rollovers

rollover3.html: In fact, for image rollovers, forget JavaScript!
CSS can do it:

	display: block;
	width: 500px;
	height: 500px;
	background: url('frown.jpg') top left no-repeat;

	background: url('smile.jpg') top left no-repeat;

Client-side JavaScript: so what would you use it for?

All the following can be done client-side, at the user's request: