Client Side Customisation of Web Pages – Assignment 3

The Fundamentals of Scripting in the DOM [P3]

Although server-side programming can be used to generate dynamic content, this content cannot be manipulated any further once it has reached the client. In order to make changes to the Document Object Model, the DOM, as it exists in the browser, JavaScript must be used.

There are a number of key attributes shared by almost all scripting and programming languages, and JavaScript is a great language to demonstrate them with.

Variables

In order to store pieces of data that must be accessed repeatedly and to make a script more readable for a human, variables are used. A name is assigned to a piece of data, and this name can be used to refer to the data at later time.

For Ease

Consider the following:

var multiplier = 4; // declare 'multiplier' variable as 4 (integer)

alert(1 * multiplier);
alert(2 * multiplier);
alert(3 * multiplier);

The above JavaScript, when executed in a browser, would produce three alert boxes containing the first, second and third multiples of four, respectively. If the developer of the script above wanted to instead show the multiples of five, only one character would need to be changed. Without the use of variables, the number would need to be changed in three places. In this case, the use of variables has improved human-readability and maintainability.

For Speed and Consistency

Variables are also used to save time during execution. Consider the following:

var angle = 2 * Math.PI * (0.70710678 / 1);

alert(angle);
alert(angle);

In this script, a relatively complex calculation is performed, using multiple floating-point numbers. In order to prevent the computer from needing to calculate the answer twice (as the answer is shown in two alert boxes), a variable is used to store the answer after initial calculation. In some cases performing calculations twice will yield different answers, such as when pseudo-random numbers are used. In order to maintain consistency, answers must be stored rather than recalculated.

Conditionals and Looping

Based on the values of variables, sections of a script can be executed multiple times, or not at all. Conditional blocks such as if, while, for, and switch allow for more dynamic programming. Consider the following:

var multiplier = 4;

for (var i = 1; i <= 10; i++) {
    alert(i * multiplier);
}

The for loop will create a new variable i with a value of 1, and will then execute the content between the curly braces until the condition i <= 10 is not met. For each execution the variable i is also incremented by 1, leading the loop to execute 10 times.

Interacting With the Document

In the browser an HTML document is presented to JavaScript as a document tree. This can be modified in several ways. Unless one is using a library or framework to make the process easier, one generally begins interacting with the document by selecting elements. One can use selectors such as getElementById() or getElementsByClassName(), but those with experience using CSS may find querySelector more intuitive. Consider the following:

var navElem = document.querySelector('nav');
navElem.style.background = '#003d60';

The method "querySelector" in the global object window is called with a single string argument. The method returns an Element object of the first HTML nav element it finds in the document, which is assigned the name navElem for future reference. This name is then used to set the background colour of the element to a dark shade of blue. If no nav element if found, the variable is set to undefined, causing a TypeError exception to be raised.

Asynchronous JavaScript and XML

In recent years AJAX has become hugely prominent in web development. In order to retrieve content from the webserver without needing to reload the page, HTTP requests can be created in JavaScript. One of the key advantages of this is the potential to only load relevant data on hyperlink clicks. Using JavaScript, a web developer can prevent links from behaving as usual, and instead request new page data from the server relevant to the link. This can then be injected into the DOM saving time and the redundant re-downloading of content. AngularJS is a web framework built around this concept of requesting data in HTTP calls and updating the page.

Further Development of Cubes Website [P5]

I have used HTML, CSS, and – most prominently – JavaScript to improve upon the website I built for assignment 2. The updated website can be viewed here, or downloaded as a ZIP file below. The source code can also be browsed easily online in the Git repository.

Testing Phase [P6]

Different browsers, although theoretically all adhering to the same set of W3C (World Wide Web Consortium) standards, often render websites in slightly different ways. For this reason it's important to test websites in a range of browsers, and to test websites on a range of platforms and operating systems. For example, a website may behave differently in Google Chrome running on Windows 10 than in Firefox running on an Android smartphone.

One of the key reasons different browsers render webpages differently is because they use different layout engines. This is the part of the browser that parses HTML and CSS, building a Document Object Model, and then responds to changes made later with JavaScript. Some browsers share layout engines, making testing easier; Google Chrome and Opera both use the Blink layout engine, and as a result rendering errors that show in one browser are very likely to show in the other.

When building web applications using JavaScript, the engine used to execute this is also significant. Mozilla Firefox, for example, uses SpiderMonkey to execute JavaScript, which is comprised of an interpreter, a just-in-time compiler, and a rubbish/garbage collector. When testing my website I found that not all of the JavaScript functionality I wanted to use was implemented in older platforms, namely Mobile Safari on iOS 4.2.1. In these cases I used workarounds to make the website function as usual.

The website displayed and functioned as intended when using Chrome and Android 5.1.

Image by me; see license.

The website displayed and functioned as intended, although with more lag and stuttering, when using Mobile Safari and iOS 4.2.1 on a legacy iPod Touch device.

Image by me; see license.

When adapting the website for mobile devices, I ran into a number of problems with the menu I chose to implement. A selection are documented below.