Javascript

Javascript (not to be confused with Java, which is a completely different thing) is the programming language browsers use to handle interaction within the page. The browser understands Javascript just like it understands HTML and CSS.

Scripts written in javascript are added to a page using the script tag. Javascript can be written be inline...

script
  console.log('hello');
/script

...or be sourced from an external document similar to a css file or an image:

script src="js/scripts.js"/script

JQuery

jQuery is a free-to-use library, written in Javascript, that makes common website interactions much easier to accomplish. You can add the jQuery library to your page using a script tag. You'll see it has already been added in the head of this document.

Setting up a simple interaction

In many cases, creating an interaction on a web page is really about showing/hiding some element or elements on the page when the user takes an action such as a click. A hamburger menu is a good example. Below, we have a menu button, and some menu content, all entirely unstyled, and with no javascript interaction yet defined. The menu is already visible, clicking the button does nothing.

Let's add some styling to put the menu in the corner of the screen, and hide the menu content by default.

1. Create a stylesheet and link it to this document.
2. Create a selector for #hamburger-menu and set position: fixed; top: 10px; left: 10px;
3. Create a selector for #hamburger-menu-content and set display: none;

Now, let's also add a CSS selector that makes the menu visible, but only when it has the is-open class.

1. Create a new selector for #hamburger-menu-content.is-open. Add the rule display: block;

So the menu will be closed by default, but visible when it has the is-open class. This means the task we have to accomplish with Javascript is very simple: Add the is-open class to the menu when the button is clicked! Let's do it.

1. Create a new file, save it as scripts.js inside a js folder. This is very similar to creating a new css file and placing it in a css folder. Link your file to the page by adding the following tag to the head of the document: script src="js/scripts.js" defer/script.
2. In your scripts.js document, paste the following. Then, read through the code comments so you understand what you're pasting!

   // First, we tell jQuery to run our 'whenDocumentIsReady' function
   // when the browser has finished loading the page.
   
   jQuery( whenDocumentIsReady );
   
   function whenDocumentIsReady() {
   
     // Most jQuery commands operate by 'selecting' some element or elements
     // on the page using the exact same 'selector' syntax as CSS, then
     // manipulating the selected element(s).
   
     // In this case, we telling jQuery to 'select' the element with
     // id="hamburger-menu-button" and add an 'event listener' to it.
     // The event we're listening for is the 'click' event. When the click
     // occurs, jQuery will execute our 'toggleTheMenu' function. In other
     // words, we're saying "Hey jQuery, when #hamburger-menu-button is
     // clicked, toggle the menu."
   
     jQuery('#hamburger-menu-button')
       .on('click', toggleTheMenu);
   
   }
   
   function toggleTheMenu() {
   
     // This is the instructions that actually adds/removes the 'is-open' class.
     // Again we're using jQuery to 'select' the element we want to manipulate
     // (#hamburger-menu-content). In this case, we're using jQuery's 'toggleClass'
     // instruction, which adds a class if the element doesn't currently have it,
     // or removes the class if it does.
   
     jQuery('#hamburger-menu-content')
       .toggleClass('is-open');
   
   }
   

You should now be able to click on the menu button to show/hide the menu (Hurray!). It's obviously very rudimentary, but that's because we've done virtualy nothing to style the menu whatsoever. What remains to do is all done is CSS!

1. Add styles as you see fit in order to finish the menu. A background and border, perhaps? Hide the bullets? Different type treatment? Tweak the menu position? What about hover-states on the items within the menu?