Client-side scripting with JavaScript
Derek Bridge
Department of Computer Science,
University College Cork
Client-side scripting with JavaScript
Aims:
- to learn the difference between server-side and client-side scripting
- to learn about event-driven programming
- to learn about unobtrusive client-side scripts
- to learn the different uses to which client-side scripting is put
Scripts
- Server-side scripts
- run on the server
- can access data on the server (e.g. stored in databases)
- for dynamic web pages, especially database-driven web pages, and for webapps
- typical language: PHP
- Client-side scripts
- run on the client (e.g. within the browser)
- limited to non-harmful activities (e.g. cannot read from/store to user's disk)
- can add 'interactivity' to a web page, without involving the server
- typical language: JavaScript
JavaScript
- Netscape invented it and called it Mocha then LiveScript then JavaScript
- Despite the name, it is not Java, nor based on Java
- The core of the language was standardised by ECMA: called ECMAScript
- But client-side JavaScript involves various extensions that are slightly less standardised
- This means incompatibilities between browsers, particularly early browsers
- This led to some horrible JavaScript being written (e.g. browser sniffing)
- Microsoft's version: JScript (sometimes called JavaScript)
- Microsoft's alternative: VBScript
Client-side JavaScript
- When a JavaScript interpreter is embedded in a web browser, the result is called client-side JavaScript
- In this context, the core language is extended with facilities that allow scripts to
- interact with the user
- control the browser
- alter the document content and presentation
- Client-side JavaScript is the most common use of JavaScript
- But JavaScript (or languages like it) are used elsewhere too (e.g. server-side JavaScript, e.g. ActionScript in Adobe Flash player)
Dynamic HTML (DHTML)
- Although it has fallen out of fashion, you may see the phrase Dynamic HTML (DHTML
- This is a 'marketing term' for a combination of client-side technologies:
![[The trinity of web standards for DHTML.]](dhtml.png)
Client-side JavaScript: simple example
- Adding a date to a page: news.html
- In PHP
<?php echo date('D F j Y, h:i:s a'); ?> - In client-side JavaScript
<script type="text/javascript">
var today = new Date();
document.write( today.toLocaleString() );
</script> - But be very clear where this gets executed!
Event-driven programming
- Many programs nowadays use event-driven programming: when an event occurs, the system runs a function to handle the event
- In client-side JavaScript, events include:
- when the document has finished loading
- when the user clicks on a hyperlink
- when the user clicks on a button
- when the user moves the mouse into or out of a certain region of the screen
- ...
- One way this is done is by using special attributes on (X)HTML elements, e.g.
onload,onclick,onmouseover,onmouseout
Client-side JavaScript: image rollovers
- To change an image when the mouse moves over it:
- See rollover1.html
<img src="frown.jpg"
onmouseover="this.src='smile.jpg'"
onmouseout="this.src='frown.jpg'" />
Unobtrusive client-side JavaScript
Recently, there has been a concern for writing scripts that are unobtrusive:
- Scripts should not make web pages less usable (e.g. scripts that automatically set this page as your home page)
- Scripts should not make web pages less accessible (e.g. pop-ups, or visual effects with no text alternative)
- Scripts should degrade gracefully, i.e.
- the web page is still usable by someone who has disabled JavaScript
- the web page is still usable by all versions of all browsers
- Like CSS stylesheets, scripts should be in separate, external files, with a link to the file, rather than intermingled with the (X)HTML. Why?
Client-side JavaScript: unobtrusive image rollovers
rollover2.html: the XHTML (xml prolog and DOCTYPE omitted)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Make me smile</title> <script type="text/javascript" src="rollover2.js"> </script> </head> <body> <p> <img id="face" src="frown.jpg" /> </p> </body> </html>
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:
#face
{
display: block;
width: 500px;
height: 500px;
background: url('frown.jpg') top left no-repeat;
}
#face:hover
{
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:
- Sorting tables (http://www.joostdevalk.nl/code/sortable-table/)
- Expanding/collpasing trees (http://www.kryogenix.org/code/browser/aqlists/)
- Dragging and dropping (http://tool-man.org/)
- User data validation: next lecture