Introduction to Programming Concepts via jQuery

Let's get this party started

Yay programming!

Classroom Rules

It's okay not to know things. Some of you may have programmed before; some of you may not have. We're at different places on the journey, but all of us started out not knowing anything about programming. If you're struggling with something you haven't mastered yet, that's OK. If you see someone struggling with something you've mastered previously, don't feign surprise or take over their keyboard.

It's okay to have feelings. Programming can be really frustrating. Feeling frustrated doesn't mean you're bad at it. It's okay to persevere as long as it still feels productive, and get away from the keyboard for a while when it doesn't. Programming can be confusing. It can be scary, especially if you don't see a lot of people like you (whatever that means to you) among programmers. It can also be joyful and thrilling when you build things that work!

We're all in this together. Programming in the real world is collaborative, and learning the craft is profoundly social. So ask questions, help people, and don't let anyone (including yourself!) get excluded or left behind. Need help? Ask someone, or put a sticky note on your laptop and someone will come help. Seeing people who are stuck? Help out. And watch out for subtle -isms (e.g. "it's so easy even your mom could do it"). They leave people out too.

Objectives

Today, we'll:

  • Learn basic concepts of programming that are common to all programming languages
  • Explore how our web browser's developer tools let us see and change the structure of a web page
  • Get lots of hands-on practice
  • Maybe even see a kitten pic

These skills will...

  • Help you learn any programming language (not just JavaScript!)
  • Give you insights into how you can change library web pages with JavaScript - even vendor pages where you can't change the HTML

Finding your developer tools

Your browser has (or can quickly have) a special feature that lets you:

  • Examine the HTML structure of your page in depth;
  • See (and mess around with) the CSS rules that apply to each element;
  • Write and run JavaScript code.

Its name and location are different in different browsers; here are some examples. Spend a few minutes finding your developer tools. This is critical for the rest of the course, so if you're having trouble, put a sticky note on your computer and do not let the class go forward until you have gotten help. (Remember: we're not going to leave you behind.)

I've given you instructions for all the browsers I have ready access to. You may have a different browser. If that's the case, here are some options:

  • Read the instructions for the most similar browser (as you will see, all the instructions are fairly similar, so your browser probably works similarly too);
  • Google for (your browser) "developer tools";
  • Ask one of your new friends for help;
  • Put a sticky note on your laptop.

Please tell me what you come up with so I can improve these instructions.

Developer tools ( View > Developer > Developer Tools )

The JavaScript console is on the Console tab. You can enter JavaScript code by the blue chevron at top () and see getthe results below it.

Tools > Web Developer > Web Console

The JavaScript console is on the Console tab. You can enter JavaScript code by the blue double chevron at bottom ( ) and see the results above it.

Web Inspector ( Develop > Show Web Inspector )

You can type JavaScript code by the little blue chevron at the bottom () and see the results above. You may want to drag the thin grey bar over this area upward to resize it, so that you'll have more space for your code.

Press F12 to access Developer Tools

The JavaScript console is on the Console tab (square with a chevron () in it). You can enter JavaScript code by the grey chevron at bottom and see the results above it.

Using your developer tools

Let's try typing some stuff in to our developer consoles to see how they work.

Start with this (anything in these big grey boxes is code to type in to your developer console, exactly as it appears, including punctuation and capitalization):


  2 + 2

Hopefully that did what you expected! If you didn't get 4, summon help.

When you type a function into your console, the console will tell you what it returns. Plus is a function: something that takes some input and produces some output.


  var $j = jQuery.noConflict();

You should see something like this:

This is normal. We gave the computer some input, but it doesn't have any immediate output for us - we didn't ask it to perform any functions - so the return value is undefined.

(Also your dev tools probably gave you some autocomplete options. You can use tab completion to make typing them super fast. Hooray!)

So, uh....what was that input, exactly?

var means, "let's define a variable". Variables are named containers we can put information into. This lets us store the information for later, when we might need to consult or change it.

$j is the name of that variable. Looks kind of cryptic, but is a convention for jQuery, so let's go with it.

jQuery is a library for JavaScript. JavaScript is a programming language that powers a lot of the dynamic elements you see on web pages (and increasingly is used to power stuff behind the scenes, too). A library is an extension which adds new functions to a language, giving it increased functionality or ease of use. jQuery does a couple of great things which, in my opinion, make it a good introduction to JavaScript:

  • Its functions are named with nice English words that describe what they do. (Don't take this for granted! Lots of programs use cryptic variable and function names.) This helps you read code more fluently, even when it's new to you.
  • It's been tested on a lot of browsers and operating systems, so code you write in jQuery is more likely to work for all of your users than code you write without it.

.noConflict() means to use the noConflict function from the jQuery library (the period joins them because of this relationship between them). noConflict generates a new jQuery instance that is separate from any other jQuery instances that might already be in use on the page — aka it doesn't conflict with them.

(The formal definition of "instance" is complicated, but you can think of it as a specific example of a more general class of things. Lots of web sites use jQuery to do things, but the specific instance of jQuery that you are going to be using, to exercise functions on your web page, is different from the one everyone else on earth is using — even classmates looking at their own copies of the same page! If you're a FRBR nerd, think of an instance as an item, representative of some larger work (jQuery), but distinct from other items.)

Having your own instance of jQuery is nice because if several parts of your page use jQuery — say, code that you wrote and code from a vendor-provided web page you're inserting it into — you don't want to run into accidental interactions that break stuff. noConflict() isn't always necessary, but conflicts are super hard to debug, so it's easiest to be in the habit of using it always.

Finally, the ; at the end terminates the line. Not all JavaScript lines need to end in semicolons, but some do, so again, it's easiest to be in the habit of using them unless you absolutely mustn't (we'll see an example later).

Now let's type this in (remember, capitalization counts!):


  var $j = jquery.noConflict();

Doh.

What's up with that?

Let's fix it. Press the up arrow - this will give you the last line you typed - very convenient! Then edit it and press enter and see that it works again. Yay!

jQuery & selectors (plus some useful functions)

Remember that $j thing? Let's do stuff with it.

The basis of jQuery is that you select elements on your page — using exactly the same syntax you use for CSS selectors — and then you do stuff to them.

(I am assuming you have some comfort with CSS. You don't need to be a ninja; you do need to know how to write CSS rules that apply to a given element, class, or ID. If you don't, ask a friend to help you with the CSS parts. You do not need to know CSS to understand how the programming ideas in this course work; you will need to read and write a few short CSS selectors in the course of reading and writing programs, and it is fine to get help with that.)

What will this select?


  $j('div')

(Hey, check out what happened in your console when you pressed enter! What's up with that?)

Now let's do stuff to this stuff we just selected! Note again the period connecting the function to the $j variable. Remember that $j was a jQuery object; that means it gets to use all the functions in the jQuery library.

In jQuery, we often do stuff by adding or removing CSS classes, allowing our CSS rules to do the heavy lifting. What do you suppose this will do?


  $j('div').addClass('white-text');

Here is an awesome thing about programming. If you don't like what the program did, you can usually undo your work. Let's reload the page now.

The classes we will primarily be adding and removing are classes I defined (you can see them in custom.css) that affect the background colors of objects. Those classes are:

  • bg-purple
  • bg-yellow
  • bg-orange
  • bg-green
  • bg-lavender

They do what you'd expect:

You can apply them to anything you like, such as...

  • $j('div') — what does this mean again? What would $j('a') mean? Or $j('h3')?
  • $j('.well') — every element which has the class of well
  • $j('#add-remove-example') — the element whose ID is add-remove-example (there should be at most one element with a given ID per page, remember - this is a useful way to specfically target your jQuery functions)
  • $j('div.code-big') — all divs whose class is code-big

Feel free to experiment.

Try this (what will it do?):


  $j('#add-remove-example').removeClass('bg-green').addClass('bg-purple');

#add-remove-example

(As you probably just guessed, a convention I'll be using is that I'll put example elements inside these grey-bordered boxes, and I'll put the name of their class or ID above them in grey text. So in this case, there's a button with the ID of add-remove-example in the box above. Of course, you could use your developer tools or view source to figure that out for yourself, too. This just seemed faster.)

What if we just did this instead?


  $j('#add-remove-example-2').addClass('bg-purple');

#add-remove-example-2

What's up with that?

Here's another handy function. What do you expect these will do?


  $j('#has-class-example').hasClass('bg-purple');
  $j('#has-class-example').hasClass('bg-green');

#has-class-example

How about this?


  $j('#has-class-example').hasclass('bg-green');

What's up with that?

One last handy function (press enter after each line):


  $j('#html-example').html();

  $j('#html-example-2').html();

#html-example

#html-example-2

previous next