Front End Web Development

Spark Boulder, Summer 2017

Session 15: Attack of the Session

jQuery 201: including jQuery on your site, selectors and methods

FIVE SESSIONS REMAIN

We're approaching the end of the class!

On August 23rd at 9pm (1 week after the class ends), report cards get generated!

Report cards include grades on all assignments, attendance, and links to projects:

Remember to check your grades with grades on @classbot!

Remember to create separate site44 apps for your projects so that potential clients and employers can see them!

The Social Network Front End Project

For your final project, I'm going to have you create the front end to the Spark Front End Web Development Social Network.

All of the students in the class are on the Social Network! You can create new posts, and everyone else in the Social Network can see those posts.

For your front end, you'll need at least 2 pages:

You'll need to make requests to the API to create and get posts on the Social Network. All of the API documentation is up at https://spark-class-social-network-api.hoff.tech/.

Some notes:

Logistics:

More Dumb Fun Web Stuff

XKCD's Hoverboard:

http://xkcd.com/1608/

The entirety of XKCD's Hoverboard:

http://1101b.com/xkcd1608/

Tonight: jQuery!

jQuery is a library (a bunch of JavaScript that other people wrote that we can use) that provides a bunch of handy-dandy functions to make our life easier.

jQuery provides functions for us to manipulate the page, listen for user interaction, and make requests across the network - just like JavaScript, but much easier!

Including jQuery on our site

Just include it via CDN:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
</html>

Using jQuery on our site

Let's make sure that we've included jQuery on our site correctly.

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

console.log($);

If you have included jQuery correctly, it should log a function to the console.

If you haven't included jQuery correctly, it'll log something like "Uncaught ReferenceError: $ is not defined" to the console.

Remember to put any <script>s that you write at the bottom of the <body> tag!

Some jQuery tutorials may have you put your <script> inside the <head> tag, then use $(document).ready() or something like that. I don't really like doing it this way, because it's not as straightforward, but do whatever works for you.

The jQuery function, $

When $ is logged to the console, it should say something like function (selectors, context) { ... }.

$ is a function - that means that we can "call" it, just like sayHello() or addTwoNumbers(firstNumber, secondNumber).

Let's try calling $ without any arguments, and see what the result is:

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

console.log($);
var result = $();
console.log(result);

I don't actually know what happens! I haven't tested this. What happens?

Using jQuery "selectors"

Generally, whenever we call $, we want to provide an argument.

The function $ takes a string as the first argument.

The string argument should be a selector, just like we use in CSS. That means that you can select elements by tag, .class or #id!

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div class="kanyeQuotes">
            <p class="profoundQuote">
                My greatest pain in life is that I will never be able to see myself perform live.
            </p>
            <p id="waterBottleQuote">
                I hate when I'm on a flight and I wake up with a water bottle next to me like oh great now I gotta be responsible for this water bottle.
            </p>
            <p class="profoundQuote">
                Fur pillows are hard to actually sleep on.
            </p>
        </div>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

// we'll select three different sets of objects - just comment out the lines that you don't want
console.log($("p"));
console.log($(".profoundQuote"));
console.log($("#waterBottleQuote"));

Don't forget! Here's a list of all possible CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp

jQuery supports all those selectors, and some more: http://api.jquery.com/category/selectors/

$ takes a second argument called context, but we generally don't use it. It's handy if you need to use another selector on a set of already-selected elements (sort of like "nested selectors").

Here's a fun jQuery line that I wrote last week: $("td:contains('Time Played') ~ td", $("#competitive-play .career-stats-section .js-stats").slice(0, 1)).text();

jQuery methods

Aside: whenever I say "methods", I'm basically saying "functions".

jQuery has a lot of methods! You can see the full list of them here: http://api.jquery.com/

You will never be able to learn all of these methods. There may be some that you memorize after you use them a couple dozen times, but for the most part, you should always go look at the documentation.

jQuery has some of the best documentation I've seen on the internet. Some of the methods have documentation with dozens of real-world examples, which you should copy-and-paste with reckless abandon!

Using jQuery methods

Calling jQuery methods is similar to calling Browser API methods, like document.getElementsByTagName("p") or window.alert().

To call jQuery methods, first, call the $ with a selector, then call the method on the result.

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div class="kanyeQuotes">
            <p id="#profound">
                Fur pillows are hard to actually sleep on.
            </p>
        </div>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

var result = $("#profound").html();
console.log(result);

It's possible to "chain" jQuery methods, so you can call any jQuery method on the result of any other jQuery method. You can build big hairy jQuery calls like $(this).find("li a").eq(2).text().replace("foo", "bar");

Getting and Setting with jQuery methods

It's possible to both get (read) and set (write) the contents or properties of HTML elements using a single method.

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div class="kanyeQuotes">
            <p id="#profound">
                Fur pillows are hard to actually sleep on.
            </p>
        </div>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

var result = $("#profound").html();
console.log(result);
$("#profound").html("My greatest pain in life is that I will never be able to see myself perform live.");
var result = $("#profound").html();
console.log(result);

What's the difference between .html() and .text()?

Using jQuery instead of vanilla JavaScript on your site

We're going to use the first example from https://jquery.com/.

Let's say that we wanted to change all <button>s on the page with the class of continue to have the text Next Step....

Using only vanilla JavaScript:

<!-- index.html -->

<html>
    <body>
        <button>Just a regular button without a class</button>
        <button class="continue">A button with the "continue" class, waiting to be changed...</button>
        <button class="continue">Another button with the "continue" class, waiting to be changed...</button>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].className.includes("continue")) {
        buttons[i].innerHTML = "Next Step...";
    }
}

Using jQuery:

<!-- index.html -->

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
    <body>
        <button>Just a regular button without a class</button>
        <button class="continue">A button with the "continue" class, waiting to be changed...</button>
        <button class="continue">Another button with the "continue" class, waiting to be changed...</button>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

$("button.continue").html("Next Step...");

jQuery next steps

Next time, we're going to learn about some advanced methods with jQuery, and also learn how to make HTTP requests from inside of a page using jQuery.

In the meantime, you can find literally everything that jQuery does at https://api.jquery.com/.

Copy and paste with reckless abandon!

That's all I've got for today!

What questions are there?

How to be a Web Developer

  1. Look stuff up on the internet
  2. Make stuff
  3. Repeat

Excelsior! 🚀