After this lesson, students will be able to:

• Import jQuery to a webpage
• Construct a jQuery selector
• Create HTML forms and store user input in the browser
• Read and write data with localStorage and sessionStorage
• Understand the pros and cons of using built-in browser storage

Before this lesson, students should already be able to:

• Write basic HTML/CSS
• Read and write basic vanilla Javascript

jQuery is a Javascript library with a lot of useful pre-defined functions and expressions. Basically you can think of it as a very large chunk of Javascript code that you add to your webpage before you add your own Javascript, so you can use all these functions and expressions in your own code.

In order to start with jQuery, you need to copy this somewhere on your HTML page, above the script import tag of your own Javascript, like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="myjavascript.js"></script>

One of the most important pieces of jQuery is the $ sign. This is an alias for jQuery, and it means "access the jQuery library to do something". Here are a few examples:

$("body").hide(); // Hides the body of your page
$(".link").css("color", "red"); // Turns all links red
$(document).ready(function(){

   // Yay our page loaded!!
   // jQuery methods go here...

});

Typical jQuery syntax has three parts:

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

jQuery selectors fall into the same categories as the CSS selectors you have already seen. Most importantly:

• Tag Name (e.g. "p", "h1", "body")
• Class (e.g. ".default-button", ".col-md-6")
• ID (e.g. "#catPicture", "#student26")

So what would I write if I wanted to change student26's background color to blue?

Take a minute to think out the following steps. In pairs, complete the following steps:

• Create a boilerplate index.html page (remember the <h + tab trick in Sublime?)
• Import jQuery (Hint: use the line above)
• Create a heading tag (h1, h2, or h3)
• Give it a class
• Create an inline-script tag below your jQuery import
• Use jQuery to select this heading, and change its color

Bonus:

• If you have time, use jQuery to select another element, and change its positioning or size

In this Unit we will be building Browser games with HTML, CSS and client-side JavaScript. Although we are not yet ready to connect a database on the backend or store data on a server, the browser offers the ability to persist data locally using sessionStorage, localStorage and some other options we may explore later in the course.

Creating a game, you may wish to allow your users to store their names and high scores, or keep track of some other simple data.

Here is a look at some documentation for the Web Storage API.

Before we begin, let's look at the files in browser-storage-examples. sessionStorage.html is the most basic. We will go through this line-by-line in class. localStorage1.html does the same thing, but it adds the clear button. localStorage2.html takes things a bit farther. Take a look at the code and without opening it in the browser see if you can explain what's happening.

Let's brainstorm some other tasks we can accomplish with localStorage or sessionStorage

• Divide into groups of 3-4
• Figure out something to keep track of on a simple single-page web app
• Create a Form with the tag
• Save the info to localStorage
• Feel free to "borrow" liberally from the example code in the repo, but no copy-paste

Remember: localStorage and sessionStorage only store strings, so you may need to parseInt() if you need to do anything with the user data after it has been entered.

jQuery Intro on W3Schools