Library Subject Guides
Want to get animated in a flash?
Along with HTML and CSS, JavaScript helps to power the web, by making websites interactive and animated in various ways.
JavaScript is sometimes called the 'programming language of the web', as it is the way you can add interactivity and automation to web pages. It works alongside HTML and CSS to make webpages work as they do, doing things like changing HTML content, styles, and what displays on the page.
Writing code in JavaScript is similar to other kinds of coding: you're giving the computer instructions about what to do. In this case, it is usually instructions on what to do when a web page is loaded or interacted with in some way.
JavaScript also has a lot of useful libraries, which allow you to do complex things with a particular focus. Libraries are pre-written collections of code allowing you to use particular features of JavaScript without having to type all of the code that would otherwise be needed.
So the first thing to do if you want to learn JavaScript, is make sure you know some basics of HTML and CSS. You'll need to know about how to structure and style webpages; it can be useful to be aware of how HTML elements have specific attributes and how you use CSS selectors to pick which bits of a webpage to apply CSS style rules to.
Some introductory courses on HTML and CSS might also include some JavaScript, but many won't. Once you've got to grips with the basics of those two, it's time to have a go with JavaScript.
JavaScript is a bit different to HTML and CSS, as it is a object-oriented scripting language. This means that JavaScript works by writing instructions, or 'scripts', to do things with your webpage, and also that it uses a model in which each 'thing' it is working with is an object. Each object then has different properties that can be set or altered, and also particular actions (called methods) that you can do with it.
To work with JavaScript or any other object-oriented programming language, it can be useful to know some of the terminology around objects, as often terms like 'properties' and 'methods' might be used in resources.
Objects in coding are often explained using real life analogies. In real life, there are objects, and they have properties like names, colours, and sizes. With each object, there are different things you can do with it, or methods. There are also events that might occur that would affect what is happening to that object.
All of these terms work similarly in JavaScript. w3schools has an example using a car which also using the syntax of JavaScript to show some of the properties and methods of a car.
If you'd like to consider more about how objects work using a real life example, then check out this quick introduction to cat objects, which talks about Apps Script, a coding language for Google Apps based off JavaScript.
If you want to have a go with JavaScript, try out our JavaScript exercises, getting you to write some commands in JavaScript (and in jQuery, a popular JavaScript library).
As mentioned above, JavaScript is full of useful libraries, collections of code that make it easier to do things in JavaScript.
jQuery is a commonly used JavaScript library that makes it easier to use JavaScript on your webpages without having to write as much code. Try clicking on the header below - it's written in jQuery, as are all the other expandable headers on this Practical Guide.
Congrats, you made some jQuery happen, by clicking on the header!
Click on the header again and see this text disappear...
jQuery allows you to use CSS selectors to access particular HTML elements with JavaScript code. This can be more efficient and readable than how you select elements in JavaScript, particularly as you should already know how to use CSS selectors to access the right parts of your page for styling.
To learn jQuery, you need to know HTML and CSS (as with JavaScript), and also understand the basics of JavaScript too - though you don't need to know everything about JavaScript before you try out using jQuery.
The first thing you need to do to use jQuery is add it to your code, as it is a JavaScript file that you can include. You can either download the library or access it from another site, like Google. The Google option has the advantage that users have often already downloaded jQuery on another site, making your page quicker to load.
As well as jQuery, there are a huge range of other JavaScript libraries that allow you to extend the functionality of JavaScript in particular ways.
For example, p5.js is another JavaScript library covered on this guide, and is actually the JavaScript version of Processing. As it is a JavaScript library, it can be added to webpages to bring Processing-style visualisations and code to the web.
If you're looking for JavaScript libraries, you could explore lists of notable JavaScript libraries or search online for the specific functionality you are looking for. Below we'll mention some interesting ones.
Tracery is a JavaScript library that allows you to generate text using syntax, for example to create Twitter bots and story generators. You can find out more about Tracery and try an online tutorial on the Tracery website or use this Introduction to Twitterbots with Tracery tutorial from Programming Historian to learn how to make a Twitterbot using Tracery and Cheap Bots Done Quick.
TensorFlow.js is a JavaScript library that allows you to create machine learning models using JavaScript and use machine learning directly in the browser. TensorFlow have tutorials on how to get started using it.
To have a go with JavaScript, make sure you know some HTML and CSS and then you can start any introductory JavaScript course or materials.
Try following our JavaScript exercises to try out making things happen with a webpage.
Once you've used these resources to learn about JavaScript (and maybe jQuery too), you might want to go on and learn more.
There are lots of free online courses and guidance to JavaScript, as well as books and other resources. We've linked to w3schools throughout these resources as it's a useful website with both structured course content and reference guides for web coding, but you might find another course more suitable for your needs.
If you prefer to have a physical book, then JavaScript & JQuery: interactive front-end web development by Jon Duckett is a useful starting point and is available in the University library.
Once you've got your head around the basics of JavaScript (and maybe jQuery as well), you might want to explore further things you can do with it. There's plenty of tutorials on specific things so try searching online for the sorts of tasks you're interested in, or looking at the further sections and libraries on w3schools.
If you want to combine your JavaScript knowledge with manipulating Google apps, you might want to try learning Google Apps Script.
Programming Historian has a tutorial on using JavaScript to create maps of correspondence that shows a different use of JavaScript.