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.
These skills will...
Your browser has (or can quickly have) a special feature that lets you:
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:
Please tell me what you come up with so I can improve these instructions.
Developer tools ( View > Developer > Developer Tools )
Tools > Web Developer > Web Console
Web Inspector ( Develop > Show Web Inspector )
Press F12 to access 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
(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.
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
.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.
; at the end terminates the line.
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();
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!
$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?
(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?
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:
They do what you'd expect:
You can apply them to anything you like, such as...
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)
Feel free to experiment.
Try this (what will it do?):
(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
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?
What's up with that?
Here's another handy function. What do you expect these will do?
How about this?
What's up with that?
One last handy function (press enter after each line):