Basics

This webpage include a simple alert window triggered by some JavaScript code inside this webpage. These alert windows are really old-fashioned (and annoying, most browsers will offer to block them). Nowadays they are mainly used to demonstrate XSS attacks.

The rendering of the webpage probably halted until you clicked away the alert window. This is how most (all?) browsers behave when rendering a web page with such an embedded scripts.

It is considered bad practice to use inline scripting, i.e. to write JavaScript code inside an HTML document, as we have done for some of the scripts in this page. Instead, it is better practice to have any JavaScript code in external files, as done for the up() script used in the HTML code below.

Now interactive

Let's make something interactive that reacts on the mouse


This picture has a MouseOver event
This picture has a MouseDown event

The mouse events have been added using event attributes for an HTML <img> element. A nicer way to do this would be with an so-called EventListener. (For an explanation of that, see Mozilla's introduction to Events, but none of this is exam material).

Mouse events are a bit old-fashioned: many devices that people use on the web do not have a mouse but have a touch screen. A more modern solution would be using so-called pointer events which are also supported in browsers for mobile mobile phones and tablets. The World Wide Web Consortium (W3C) tries to standardise such features across browsers (see for instance the W3C spec for pointer events).

The list of features and so-called Web APIs provided by browsers is constantly growing and can vary per browser. See for instance Mozilla's list of Web APIs and Chrome's list of APIs

Something that will be discussed in the Privacy lecture later on: using browser events a web application can observe a lot about its users. For example, it can check if you are hesitating before clicking, or how long you press down on the mouse buttons. Some websites use this to detect if there is a real human user behind the keyboard or some automated bot. It can also be used to create heatmaps of a website that show where users typically click or how far down a webpage they scroll. A web application can even record the entire session of a user, including all mouse movements scrolling and typing to replay that session later, or even watch you live while you interact with a web site. Such 'behavioural analytics' software can be useful, but also has privacy and security implications, as discussed on Steven Englehardt's blog post about session replay scripts.