Javascript for data, design, and interactions in web pages
This is a web page. We're all familiar with what they look like, what they do, and their limitations - although those limitations are gradually being eroded using some clever programming and the development of library code that makes it easy for us to add sophisticated interactivity and design.
At the minimum level, a web page is a set of "nested" tags that define its structure and (to a limited extent) how it looks. That code is read by the web browser, which follows strict rules as to how to display it to the user. The text sits inside the tags. Additional tags and instructions tell the browser to do things like retrieve and display images, video, audio, and links to other pages and online resources. The code looks like this:
<html>
<head>
<title>This is the title, it is not displayed on the page</title>
</head>
<body>
<h1 id='title'>This a top level heading,
it is displayed on the page as the largest of the headings</h1>
<h2>This is a second level heading, smaller than h1</h2>
<p>This is a paragraph of text</p>
</body>
</html>
Notice how the layout. Every tag (e.g. <p>) must have a closing tag (</p>). This defines an element on the page. And tags that open after a tag must close before that tag closes - so <p> (for paragraph) is inside <body> and must close </p> before we close </body>. There is a set structure that constrains how some tags relate to others, called the Document Object Model (DOM). This term also refers to the model of the specific page in the browser's memory. When we get to Javascript, this is important, as it provides a logical means through which we can access specific parts of a page, or collections of elements of the same type (for example, if we wanted to do something with all of the paragraphs on a page).
The actual layout of the text on the page, the indenting and spaces, doesn't matter (it's not crazy like Python). That just helps us to read it. It's important that the code is human and machine readable.
Web pages get a lot more complicated than this. For example, Miro is a software application that runs on Mac and Windows, as well as various mobile platforms. We can use it to create digital whiteboards of great complexity. Many people can work on a board at the same time, and we see their updates immediately. It really is an amazing feat of software design and development. But if you open a link to a Miro board on a computer on which the application isn't installed, it will open in your web browser as a web page - and it looks and behaves in exactly the same way as it does when running as an installed app. That's because the installed apps are actually just web pages running locally on your device in a container. This shows just how far web development has come since the first simple pages like those above (in 1993).
I've actually been creating web pages since 1993 - only a short time after the invention of the web, browsers, and html. I was a philosophy undergraduate at the time, and with a few others with an interest in the impact of technology on society and cognition, right away I was experimenting with coding at the limits of the technology.
To begin with, every time we wanted to do something interactive for a user, a request would have to be sent back to the server where the code would run. This was inefficient. In 1995 Javascript was born, allowing us to add code into the pages themselves, which would be interpreted by the browser and run "locally" on the device. Cool. We could have a button that the user would press and it could pop-up a message saying "ouch!". Then we learned that we could alter the structure and content of the page. The button could trigger:
<script>
document.getElementById("title").innerHTML().style.color = "red";
</script>
When the page loads this code runs and changes the color (US spelling) of the title (identified in the html by id='title') to red.
We can also allow the user to press a button and trigger the change. We add a couple of buttons to the HTML.
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>And then some Javascript that defines the function changeColor(newColor).
function changeColor(newColor) {
const elem = document.getElementById("title");
elem.style.color = newColor;
}The syntax for this is quite different to Python. Javascript is from the relatively ancient C family of languages (Java is also in that lineage). The code inside of a function is enclosed with curly brackets { }, and lines of code MUST end with semi colons; - you get used to it with practice! Some coding tools (like Visual Studio Code) will show you when you are missing a semi-colon or making some other error.
But the underlying logic is the same.
In the color changing example, we have also used another feature of web pages and web browsers, introduced in 1995: cascading style sheets (CSS). This is a system of additional tags that can be used to define how a specific element (identified by its id) or a class of elements, should look. This can alter the color, size, positioning, font and a lot more. We can add this information into the <head> of the page.
<html>
<head>
<title>This is the title, it is not displayed on the page</title>
<style>
#title { color:red; }
h2 { color:blue; font-family: 'courier'; }
.go-mad { background-color: black; color: yellow; font-family: 'comic sans'; }
.secret { display:none; }
</style>
</head>
<body>
<h1 id='title'>This a top level heading,
it is displayed on the page as the largest of the headings</h1>
<h2>This is a second level heading, smaller than h1</h2>
<p class='go-mad'>This is a paragraph of text</p>
<p class='secret'>Secret message we don't want them to see yet!</p>
</body>
</html>
We set the element with the id "title" to have red text. All elements of type <h2> to be in blue colored courier font. And all elements that are assigned the class .go-mad to be in the comic sans font, in yellow, with a black background. Such fun!
We also created a class called "secret" and set it to be hidden.
So we can see that we can use code to change the look of a page (and in fact its layout and contents) as the page loads, and as the user interacts with it. And with a lot of that kind of coding we end up with a fantastically complex application like Miro. Or as is more often the case, we add smaller amounts of useful interaction to a page.
But how do we reveal our secret message? You can probably work that out using the examples above. But I want to show you an easier way of doing it. We need to access all elements with the class "secret", and reveal them. I'm going to do this using a code library called jQuery. This makes coding the web so so easy. In JQuery we do this:
$(".secret").show();The $(".secret") part of that retrieves all of the elements with that class. And jQuery knows what to do to every element in the array (a type of list used in Javascript) that gives us. It makes the change instantly in the DOM, and we see the change on the page.
jQuery is awesome. There are many other powerful Javascript libraries. But I like JQuery for its speed and simplicity.
We can even use jQuery to load data from other pages or from what we call "web APSs" - where a web server is set up to provide a data file on request. The Warwick University web publishing system Sitebuilder has many such APIs. It also allows us to put Javascript code into our pages, and it automatically includes the jQuery library in every page. If you know what you are doing, Sitebuilder and other similar platforms can be used to build sophisticated interactivity.
Sitebuilder's API's are documented on web pagesLink opens in a new window for anyone in the University to use.\
Note that there is an important limitation on how we use these API requests. Usually we can only get data from web pages and feeds on the same web site that our page is running on. This is an important security limitation. There are some safe ways to get around that, but it requires server admins to enable access.
Here's some simple examples.
This code loads an element from a different page on the University web site into an element on this page. Note that when coding in Sitebuilder we have to use the full identifier for jQuery, rather than the shortcut $ symbol. Also, see how our code is wrapped in a .ready function, meaning it will only run when the whole page (document) has loaded.
<head>
<script>
jQuery(document).ready(function(){
jQuery('#myContainer').load('https://warwick.ac.uk/fac/arts/ .col-sm-4:nth-of-type(2)');
});
</script>
</head>
<body>
<div id='myContainer'>This will get replaced</div>
</body>
This code gets a list of pages with the keyword "dahl" and displays them as a list on this page.
jQuery(document).ready(function(){
jQuery.getJSON("/sitebuilder2/api/search/keywords.json?page=/fac/arts/dal&keyword=dal",
function(data){
var str = "<ul>";
for(var i = 0; i < data.items.length; i++)
{
str = str + "<li>" + data.items[i].title + "</li>";
}
jQuery("#mySecondContainer").html(str + "</ul>");
});
});Resources
Javascript tutorials on W3SchoolsLink opens in a new window
Sitebuilder APILink opens in a new window for getting data feeds about Sitebuilder content
This course
Python in Jupyter Notebooks for data analysis
Python for coding a Raspberry Pi microcontroller
Javascript for data, design, and interactions in web pages