16Introducing JavaScript and jQuery

I use JavaScript and jQuery to do various things on this website:

• Slow scrolling to a point on a page

• Create the “sticky” navigation bar

• Hyphenate the text on the web page

• Create a “lightbox” effect to display images

• Display colour versions of code fragments

• Properly display equations on the web page

Some of these are done by me and some are third party add-ons (plugins, whatever you want to call them); they all use JavaScript and most of them rely on jQuery.

“What’s the difference?” you ask

Well, JavaScript is a programming language that is understood by all web browsers. A web browser will interpret JavaScript code whenever it finds it on a web page in the same way that it renders HTML and CSS.

JavaScript is supported in its native form by web browsers, you don’t have to do anything to make the browser run it (obviously you have to write the code).

jQuery is a standardised library of JavaScript functions that we can use wherever we want (we don’t have to write the background code, we just call it).

The jQuery library is not built into web browsers and we have to load it before we can use it.

JavaScript is a high level programming languages (higher level than HTML and CSS) that is supported by web browsers; it is an object oriented language^†1 which at first sight looks a lot like C (lots of braces and squiggly brackets).

In use JavaScript is a lot more forgiving than C, it is not so type sensitive (sensitive to the type of data: integer, floating point number &c.), in this regard it is more like BASIC. In actuality, JavaScript has a lot in common with the Lisp types of language.

To add to the confusion, there is already a programming language called Java, Java and JavaScript are not the same thing at all. Java was developed by Sun Microsystems and JavaScript by Netscape, neither is a derivative of the other.

JavaScript was originally named “Mocha”, another coffee reference, its proper name (that no one ever uses) is ECMAScript, (ECMA historically being the European Computer Manufacturer’s Association), it is also called Jscript.

As far as we are concerned JavaScript can be included in a website and the browser that loads the page will know what to do with it, just like it does with HTML and CSS; JavaScript completes the triumvirate of web languages:

• HTML — the web page content

• CSS — The web page appearance

• JavaScript — Dynamic effects and programmability

JavaScript can be used directly within the HTML by inserting it between <script>...</script> elements; alternatively, it can be stored in its own file and loaded from within the HTML, in much the same way that we load a CSS file.

To demonstrate some JavaScript, open one of the template web pages in Brackets (or whichever text editor you are using), I’m using the 99-00-typicals.html page, and add the following after the </header> tag (with the green background):

</header>                                         <!-- End of header -->

<script>
document.write('<br><center>THIS IS JAVASCRIPT'.fontsize(10).fontcolor('red'));
</script>

Save the file and start live preview (or open the file in a web browser). The result will be something like this:

There it is in bright red at the bottom, our first bit of JavaScript — impressive stuff.

Now, if you didn’t get the red text on your version, it is probably because JavaScript is disabled on your browser.

JavaScript can be enabled or disabled by the browser settings, all major web browsers have JavaScript enabled by default.

If you are not sure whether JavaScript is enabled on your browser, go to the following website: www.enable-javascript.com and it will tell you, it also has instructions for enabling JavaScript within all the common web browsers (I give details for Chrome, Firefox and Internet Explorer in the next section).

jQuery is simply a library of JavaScript modules that we can call to make life easier. These modules are commonly referred to as “methods” and there are a lot of them.

The jQuery library is itself written in JavaScript and must be loaded by each web page that intends to use it. All of the template web pages use jQuery and all load the library file in the <head> element of the web page.

The jQuery library is a standard library and is maintained by the JS Foundation, it has its own jQuery website. jQuery is used by virtually everyone: Google, Netflix, Microsoft, pretty much all the large web companies. There are some statistics that show that 79% of the top one million websites all use jQuery — so we’re probably in good company (unless of course the top one million websites are all porn sites; it wouldn’t surprise me).

So what can we do with jQuery?

There are many uses for jQuery, the main ones that we will use are:

• Event detection (detects clicks and scroll operations)

• Select and change elements on a web page

Other common uses (though not so much on this website) are:

• Effects and animations

• Search functions

• Send and receive information from a server

The jQuery library is very extensive, it’s been under development since 2006 and it is currently at version 3.3.1 (released January 2018).

The library supports a lot of functions (methods), this is a full list, most of which I don’t understand.