Introduction

Web pages made with HTML and CSS display static content. They don't respond to user actions like clicking a mouse or typing a key.

JavaScript and jQuery are used to make web pages interactive.

  • JavaScript is a programming language used to create web pages that change in response to user actions.

  • jQuery is a collection of prewritten JavaScript code that lets us easily create interactive effects on our site.

Click on More and the navigation arrows in the web page to the right.

Your first program

Click on Flipboard at the top of the web page to the right. The web page has a dropdown menu which shows and hides when you click Flipboard.

This interaction is made with JavaScript and jQuery.

HTML

<!doctype html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    ...

    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Try it out

When you click on Flipboard, a dropdown menu doesn't appear. To fix this, below the first script element, add a second script element with the src equal to https://goo.gl/re5lES. Then click on Flipboard to see the menu.


app.js

var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });
}

$(document).ready(main);

main()

var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });
}

$(document).ready(main);

Try it out

When you click on Flipboard, the dropdown menu shows up but doesn't go away. Change the jQuery method from $(".dropdown-menu").show(); to $(".dropdown-menu").toggle(); to toggle the dropdown menu. Then click on Flipboard once to make the menu appear, and again to make it disappear.


$(document).ready()

var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });
}

$(document).ready(main);

Try it out

This program should toggle the dropdown menu when Flipboard is clicked. However, the program has four mistakes that prevent it from working. Find and fix these bugs to get the dropdown menu working again.


Summary

JavaScript is a programming language used to add interactivity to a web page. jQuery simplifies JavaScript syntax and makes it easier to build interactive web pages that work across multiple browsers.

jQuery enables us to do three main things on a web page:

  1. Events. Respond to user interactions.

  2. DOM Manipulation. Modify HTML elements on the page.

  3. Effects. Add animations.

We'll see how to do each of these things in the next sections.

Summary
  • ?