16Introducing JavaScript and jQuery

Introducing JavaScript and jQuery

Javascript is a full blown programming language that is supported by all the modern web browsers (they understand JavaScript just like they understand HTML and CSS).

JavaScript is generally used to create clever visual effects on web page or to store and manipulate data provided by the website user.

JavaScript is a proper programming language (like C, Basic, Lisp &c.) and can do all the things that computer programming languages can do: declare variables, store data, define and use functions, detect and respond to events &c.

We can just put JavaScript in our website and the browser will automatically interpret the language and run whatever programme we’ve put there.

Now, JavaScript is a very powerful programming language and this template uses it for certain things (mainly navigation and slow scrolling), it also uses various third party JavaScript add-ons that do certain things (display code fragments, properly render equations, hyphenate the text &c.).

This and the following sections explain the bits of JavaScript that I’ve used and I try to explain it as fully and clearly as I can — however, this is not a full blown JavaScript tutorial, that would be beyond the scope of this site, this is basically a template for a publishing website.

I can however, recommend a very good on line learning course by Jonas Schmedtmann. It is available through udemy; it’s not free but it is very good (it normally cost around £200, but there are special offers at Udemy several time a year and these drastically reduce the price, at the time of writing it was on offer for £12.99).

I also use jQuery; this is a library of JavaScript functions that are specifically designed to make selecting and modifying elements (and classes &c.) within a web page very easy.

In combination, JavaScript and jQuery give us a very flexible and powerful platform to do pretty much anything we like with our web pages.

I’m going to cover various aspects of jQuery, JavaScript and third party plug-ins, starting in this section. This and the following sections progress (in broad order of usefulness) as follows:

  • Slow scrolling

  • Sticky navigation

  • Hyphenation

  • Lightbox images

  • Code fragments

  • Displaying equations

End flourish image