Pixels and ems

Great work! We'll do more with colors as you learn more CSS.
When we've asked you to adjust font size, we've specified that the unit
you should use is px (for "pixels"), like so:
p {
font-size: 10px;
}
A pixel is a dot on your computer screen. Specifying font sizes in
pixels is great when you want the user to see exactly on their screen
what you designed on yours, though it assumes your screens are of
similar size.
What if the user is using a screen that's a very different size from
yours, though (like a smartphone screen)? Enter ems. (Don't confuse
these with the <em></em> tags we use for emphasis!)
The font-size unit em is a relative measure: one em is equal to the
default font size on whatever screen the user is using. That makes it
great for smartphone screens, since it doesn't try to tell the smartphone
exactly how big to make a font: it just says, "Hey, 1em is the font size
that you normally use, so 2em is twice as big and 0.5em is half that
size!"
Check it out: we've set three different paragraphs to the font-sizes
1em, 0.5em, and 2em. For now, use whichever unit (px or em) you're
more comfortable withwe just wanted to show you em now so
you're not surprised when you see it later.

A font of knowledge
We've also asked you to change the font-family of certain elements
using CSS. You've seen us use the fonts Verdana, Courier, and
Garamond. But how many fonts does CSS know?
The answer is: it depends. Most computers will understand popular
fonts like Verdana, Courier, and Garamond, but each individual
computer has different fonts installed on it. The good news is that CSS
has some built-in defaults meant to ensure your users see what you
intend. They are:
serif: A font with little decorative bits on the ends of the strokes that
make up letters. Do a search on "serif" to see what we mean.
sans-serif: A plain-looking font, like this one. It doesn't have the little
doohickies on the ends of letters like a serif font does.
cursive: A scripty font! It looks like cursive writing.
We'll show you how to import your own fonts in a later course! This
will help make sure the person viewing your page has all the fonts you
want them to have.

Backup values
You don't have to jump straight to a default value like cursive or
sans-serif: you can tell CSS to try several, going from one to the
next if the one you want isn't available.
For example, if you write:
p {
font-family: Tahoma, Verdana, sans-serif;
}
CSS will first try to apply Tahoma to your paragraphs. If the user's
computer doesn't have that font, it will try Verdana next, and if that
doesn't work, it will show a default sans-serif font.

Can you swing it?
Good work! Let's try something a little more involved.
Remember, you can reach an element that is a child of another
element like this:
div div p { /* Some CSS */ }
where in this case, we'd be grabbing any <p> that is nested somewhere
inside a <div> that is nested somewhere inside another <div>. If you
want to grab direct childrenthat is, an element that is directly nested
inside another element, with no elements in betweenyou can use the
> symbol, like so:
div > p { /* Some CSS */ }
This only grabs <p>s that are nested directly inside of <div>s; it won't
grab any paragraphs that are, say, nested inside lists that are in turn
nested inside <div>s.

Even finer control
You've learned about class selectors. Now it's time to learn about
pseudo-class selectors.
A pseudo-class selector is a way of accessing HTML items that aren't
part of the document tree (remember the tree structure we talked about
earlier?). For instance, it's very easy to see where a link is in the tree.
But where would you find information about whether a link had been
clicked on or not? It isn't there!
Pseudo-class selectors let us style these kinds of changes in our
HTML document. For example, we saw we could change a link's text-
decoration property to make it something other than blue and
underlined. Using pseudo selectors, you can control the appearance of
unvisited and visited linkseven links the user is hovering over but
hasn't clicked!
The CSS syntax for pseudo selectors is
selector:pseudo-class_selector {
property: value;
}
It's just that little extra colon (:).

Nth child
Well done! You can actually select any child of an element after the
first child with the pseudo-class selector nth-child; you just add the
child's number in parentheses after the pseudo-class selector. For
example,
p:nth-child(2) {
color: red;
}
Would turn every paragraph that is the second child of its parent
element red.
The element that is the child goes before :nth-child; its parent
element is the element that contains it.

Taking up space
Cool, right? Each HTML element gets its own box to live in.
As you saw, the outermost box of each element went all the way
across the page. This is why until now, your HTML elements have
been sitting on top of one another: by default, they take up the full
width of the page.
We can change all this with the first positioning property we'll learn:
the display property. We'll learn about four possible values.
block: This makes the element a block box. It won't let anything sit
next to it on the page! It takes up the full width.
inline-block: This makes the element a block box, but will allow
other elements to sit next to it on the same line.
inline: This makes the element sit on the same line as another
element, but without formatting it like a block. It only takes up as
much width as it needs (not the whole line).
none: This makes the element and its content disappear from the page
entirely!

Sketching it out
Now that you understand more about the display property and the box
model, we can delve into the details of how each individual box
behaves.
Check out the diagram in the Result tab (it's the one from the first
exercise in this lesson). As you can see, each box is made of layers.
From the outermost to the innermost:
The margin is the space around the element. The larger the margin,
the more space between our element and the elements around it. We
can adjust the margin to move our HTML elements closer to or farther
from each other.
The border is the edge of the element. It's what we've been making
visible every time we set the border property.
The padding is the spacing between the content and the border. We
can adjust this value with CSS to move the border closer to or farther
from the content.
The content is the actual "stuff" in the box. If we're talking about a
<p> element, the "stuff" is the text of the paragraph.

Margin
Let's start with our margins. Adjusting our margins not only moves
our element relative to other elements on the page, but also relative to
the "walls" of the HTML document.
For instance, if we take an HTML element with a specific width (such
as our <div> in the editor) and set its margin to auto, this tells the
document to automatically put equal left and right margins on our
element, centering it on the page.

To the right!
Okay! So we know how our individual elements are constructed. But
how do we determine where they go on the page?
One way is to use floats. When you float an element on the page,
you're telling the webpage: "I'm about to tell you where to put this
element, but you have to put it into the flow of other elements." This
means that if you have several elements all floating, they all know the
others are there and don't land on top of each other.
You can think of the HTML page as sort of like a sea, and floating
elements as boats on it: all the boats have positions on the sea, and
they all see and steer clear of each other.
(Some of the positioning methods we'll learn in upcoming sections
can accidentally drop elements on top of each other.)

Clearing elements
Unfortunately, we sometimes mix large floating elements with non-
floating ones, and elements do end up on top of each other.
See your footer (the blue bit between the two columns)? It's stuck
back there because we haven't told it something very important: to
clear the other elements on the page!
If you tell an element to clear: left, it will immediately move
below any floating elements on the left side of the page; it can also
clear elements on the right. If you tell it to clear: both, it will get
out of the way of elements floating on the left and right!
The syntax is what you're used to:
element {
clear: /*right, left, or both*/
}

Absolute positioning
The first type of positioning is absolute positioning. When an element
is set to position: absolute, it's then positioned in relation to the
first parent element it has that doesn't have position: static. If
there's no such element, the element with position: absolute gets
positioned relative to <html>.
To show you how this works, we've set the #outer div to have
absolute positioning. This means that when you position the #inner
div, it will be relative to #outer. (If #outer had the default
positioning of static, then #inner would get positioned relative to
the entire HTML document.)

Relative positioning
Good! Did you notice how the #inner div moved 20 pixels in from
the edge of the #outer div? That's absolute positioning at work.
Relative positioning is more straightforward: it tells the element to
move relative to where it would have landed if it just had the default
static positioning.
If you give an element relative positioning and tell it to have a
margin-top of 10px, it doesn't move down ten pixels from any
particular thingit moves down ten pixels from where it otherwise
would have been.

Fixing your header
Great work!
Now it's time to fix your headerliterallyso it stays put on the page
as people reading your resume scroll down.
If you read the first exercise's CSS carefully, you'll see we've snuck in
a little trick for you: the z-index property. You can think of the z-
index as a measure of importance: the higher an element's z-index, the
higher it will be "stacked" on the page. Giving your header a z-index
of 1 while not giving any of the other elements a z-index ensures that
your header will sit "on top of" your other elements and won't get
stuck behind them.

JavaScript

Interactive JavaScript
What we just saw was a fun example of how JavaScript can be
interactive. Try it yourself!
Examples: confirm("I feel awesome!"); confirm("I am
ready to go.");
These boxes can be used on websites to confirm things with users.
You've probably seen them pop up when you try to delete important
things or leave a website with unsaved changes.


What is programming?
Programming is like writing a list of instructions to the computer so it
can do cool stuff with your information.
Programs can't yet make your bed, but they can do math, keep track of
your bank account, or send a message to a friend.
To do any of these actions, the program needs an input. You can ask
for input with a prompt.
Examples: 1. prompt("What is your name?"); 2.
prompt("What is Ubuntu?");

Data Types I & II: Numbers & Strings
Data comes in various types. You have used two already!
a. numbers are quantities, just like you're used to. You can do math
with them.
b. strings are sequences of characters, like the letters a-z, spaces, and
even numbers. These are all strings: "Ryan", "4" and "What is
your name?" Strings are extremely useful as labels, names, and
content for your programs.
To make a number in your code, just write a number as numerals
without quotes: 42, 190.12334.
To write a string, surround words with quotes: "What is your
name?"

Data Type III: Booleans
Nice job! Next let's look at booleans. A boolean is either true or
false.
For example, comparing two numbers returns a true or false result:
23 > 10 is true
5 < 4 is false

Using console.log
You may have noticed that the interpreter doesn't print out every
single thing it does. So if we want to know what it's thinking, we
sometimes have to ask it to speak to us.
console.log() will take whatever is inside the parentheses and log
it to the console below your codethat's why it's called
console.log()!
This is commonly called printing out.

Math and the modulo
Let's meet an interesting symbol called modulo. When % is placed
between two numbers, the computer will divide the first number by
the second, and then return the remainder of that division.
So if we do 23 % 10, we divide 23 by 10 which equals 2 with 3 left
over. So 23 % 10 evaluates to 3.
More examples: 17 % 5 evaluates to 2 13 % 7 evaluates to 6

Substrings
We've learned a few ways to manipulate numbers. What about
manipulating strings?
Sometimes you don't want to display the entire string, just a part of it.
For example, in your Gmail inbox, you can set it to display the first 50
or so characters of each message so you can preview them. This
preview is a substring of the original string (the entire message).
Code: "some word".substring(x, y) where x is where you
start chopping and y is where you finish chopping the original string.
The number part is a little strange. To select for the "he" in "hello",
you would write this:
"hello". substring(0, 2);
Each character in a string is numbered starting from 0, like this:
0 1 2 3 4
| | | | |
h e l l o
The letter h is in position 0, the letter e is in position 1, and so on.
Therefore if you start at position 0, and slice right up till position 2,
you are left with just he

Variables
We have learned how to do a few things now: make strings, find the
length of strings, find what character is in the nth position, do basic
math. Not bad for a day's work!
To do more complex coding, we need a way to 'save' the values from
our coding. We do this by defining a variable with a specific, case-
sensitive name. Once you create (or declare) a variable as having a
particular name, you can then call up that value by typing the variable
name.
Code: var varName = data;

Function syntax
A function takes in inputs, does something with them, and produces
an output.
Here's an example of a function:
var sayHello = function(name) {
console.log('Hello ' + name);
};
First we declare a function using var, and then give it a name
sayHello. The name should begin with a lowercase letter and
the convention is to use lowerCamelCase where each word
(except the first) begins with a capital letter.
Then we use the function keyword to tell the computer that you
are making a function
The code in the parentheses is called a parameter. It's a placeholder
word that we give a specific value when we call the function.
Click "Stuck? Get a hint!" for more.
Then write your block of reusable code between { }. Every line of
code in this block must end with a ;.
You can run this code by "calling" the function, like this:
sayHello("Emily");
Calling this function will print out Hello Emily.

How does a function work?
Let's break down exactly how a computer thinks when it sees the code
for a function.
var functionName = function( ) {
// code code code
// code code code
// (more lines of code)
};
The var keyword declares a variable named functionName.
The keyword function tells the computer that functionName is a
function and not something else.
Parameters go in the parentheses. The computer will look out for it
in the code block.
The code block is the reusable code that is between the curly
brackets { }. Each line of code inside { } must end with a
semi-colon.
The entire function ends with a semi-colon.
To use the function, we call the function by just typing the function's
name, and putting a parameter value inside parentheses after it. The
computer will run the reusable code with the specific parameter value
substituted into the code.

Return keyword
Nice job! Now, when we call a function, we don't always want to just
print stuff. Sometimes, we just want it to return a value. We can then
use that value (ie. the output from the function) in other code. Let's
learn about the return keyword, then we'll see how to use functions
with an if / else statement in the next exercise!
The return keyword simply gives the programmer back the value
that comes out of the function. So the function runs, and when the
return keyword is used, the function will immediately stop running
and return the value.
Functions with two parameters
So far we've only looked at functions with one parameter. But often it
is useful to write functions with more than one parameter. For
example, we can have the following function:
var areaBox = function(length, width) {
return length * width;
};
With more than one parameter, we can create more useful functions
To call a function with more than one parameter, just enter a value for
each parameter in the parentheses. For example, areaBox(3,9);
would return the area of a box with a length of 3 and a width of 9.

Global vs Local Variables
Let's talk about an important concept: scope. Scope can be global or
local.
Variables defined outside a function are accessible anywhere once
they have been declared. They are called global variables and their
scope is global.
For example:
var globalVar = "hello";

var foo = function() {
console.log(globalVar); // prints "hello"
}
The variable globalVar can be accessed anywhere, even inside the
function foo.
Variables defined inside a function are local variables. They cannot
be accessed outside of that function.
For example:
var bar = function() {
var localVar = "howdy";
}

console.log(localVar); // error
The variable localVar only exists inside the function bar. Trying to
print localVar outside the function gives a error.
Check out the code in the editor. Until now you've been using the var
keyword without really understanding why. The var keyword creates
a new variable in the current scope. That means if var is used
outside a function, that variable has a global scope. If var is used
inside a function, that variable has a local scope.
Controlling the for loop
We can now control where the for loop starts and ends. What about
controlling what happens in between?
The examples we've looked at have used i = i + 1. This has meant
we have incremented (increased) the variable i by 1 each time.
Rules to learn
a. A more efficient way to code to increment up by 1 is to write i++.
b. We decrement down by 1 by writing i--.
c. We can increment up by any value by writing i += x, where x is
how much we want to increment up by. e.g., i += 3 counts up by
3s.
d. We can decrement down by any value by writing i -= x. (See the
Hint for more.)
e. Be very careful with your syntaxif you write a loop that can't
properly end, it's called an infinite loop. It will crash your browser!

Meet arrays
Variables can store numbers or strings. But so far, we've only been
able to store ONE number or ONE string. Good thing we have arrays.
Arrays:
a. store lists of data b. can store different data types at the same
time c. are ordered so the position of each piece of data is fixed
Example:
var names = ["Mao","Gandhi","Mandela"];

var sizes = [4, 6, 3, 2, 1, 9];

var mixed = [34, "candy", "blue", 11];
Syntax: var arrayName = [data, data, data];
Any time you see data surrounded by [ ], it is an array.

The 'do' / 'while' loop
Sometimes you want to make sure your loop runs at least one time no
matter what. When this is the case, you want a modified while loop
called a do/while loop.
This loop says: "Hey! Do this thing one time, then check the condition
to see if we should keep looping." After that, it's just like a normal
while: the loop will continue so long as the condition being evaluated
is true.

If / else if / else
Good! Let's also get some practice in with else if, as well as learn
about a fancy new function: isNaN.
If you call isNaN on something, it checks to see if that thing is not a
number. So:
isNaN('berry'); // => true
isNaN(NaN); // => true
isNaN(undefined); // => true
isNaN(42); // => false
Be careful: if you call isNaN on a string that looks like a number, like
'42', JavaScript will try to help by automatically converting the
string '42' to the number 42 and return false (since 42 is a number).
Note that you can't just do
isNaN(unicorns);
unless you've already defined the variable unicorns. You can,
however, do
isNaN("unicorns"); // => true

Sneak preview: the switch statement
As you might imagine, if you have a lot of choices you want to cover
in a program, it might be annoying to type else if () ten times.
That's why JavaScript has the switch statement!
switch allows you to preset a number of options (called cases), then
check an expression to see if it matches any of them. If there's a
match, the program will perform the action for the matching case; if
there's no match, it can execute a default option.

Arrays of arrays
Good! The next thing to know is that not only can you put a mixture
of types in an array, you can even put other arrays inside arrays. You
can make a two-dimensional array by nesting arrays one layer deep,
like so:
var twoDimensional = [[1, 1], [1, 1]];
This array is two-dimensional because it has two rows that each
contain two items. If you were to put a new line between the two
rows, you could log a 2D objecta squareto the console, like so:
[1, 1]
[1, 1]

Nouns and verbs together
Let's go back to the analogy of computer languages being like regular
spoken languages. In English, you have nouns (which you can think of
as "things") and verbs (which you can think of as "actions"). Until
now, our nouns (data, such as numbers, strings, or variables) and
verbs (functions) have been separate.
No longer!
Using objects, we can put our information and the functions that use
that information in the same place.
You can also think of objects as combinations of key-value pairs (like
arrays), only their keys don't have to be numbers like 0, 1, or 2: they
can be strings and variables.

Object syntax
Did you see that? The phonebookEntry object handled data (a name
and a telephone number) as well as a procedure (the function that
printed who it was calling).
In that example, we gave the key name the value 'Oxnard
Montalvo' and the key number the value '(555) 555-5555'. An
object is like an array in this way, except its keys can be variables and
strings, not just numbers.
Objects are just collections of information (keys and values) between
curly braces, like this:
var myObject = {
key: value,
key: value,
key: value
};

Creating a new object
Great work! You just created your very first object.
There are two ways to create an object: using object literal notation
(which is what you just did) and using the object constructor.
Literal notation is just creating an object with curly braces, like this:
var myObj = {
type: 'fancy',
disposition: 'sunny'
};

var emptyObj = {};
When you use the constructor, the syntax looks like this:
var myObj = new Object();
This tells JavaScript: "I want you to make me a new thing, and I want
that thing to be an Object.
You can add keys to your object after you've created it in two ways:
myObj["name"] = "Charlie";
myObj.name = "Charlie";
Both are correct, and the second is shorthand for the first. See how
this is sort of similar to arrays?

List 'em all!
Great work! Now let's add a couple of functions to help us go through
our contacts.
The first function we'll create will be called list, and it will print out
all the entries we have in our friends object. To do this, we'll want to
use a bit of new syntax: a for/in loop.
It looks like this:
for (var key in object) {
// Access that key's value
// with object[key]
}
The "key" bit can be any placeholder name you like. It's sort of like
when you put a placeholder parameter name in a function that takes
arguments.

Custom Constructors
But this approach of adding in properties one at a time for every
object is tedious! Instead of always using the boring Object
constructor, we can make our own constructors.
This way we can set the properties for an object right when it is
created. So instead of using the Object constructor which is empty
and has no properties, we can make our own constructors which have
properties.
To see how this works, look at our Person constructor in lines 14.
This constructor is used to make Person objects. Notice it uses the
keyword this to define the name and age properties and set them
equal to the parameters given.
Now we can use this constructor to make our good friends bob and
susan in only one line each! Look at lines 78: once we have the
constructor, it's way easier to make people because we can include
their name and age as arguments to their respective constructors.

function Person(name,age) {
this.name = name;
this.age = age;
}
// Let's make bob and susan again, using our constructor
var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 25);
Arrays of Objects
Remember that an object is just another type, like a string or number
but more complex. This means that just as we can make arrays of
numbers and strings, we can also make arrays of objects.
Here we have our Person constructor which should look familiar. We
can use this constructor to make an array of Person objects, similar to
how we might make an array of numbers but filling in people instead.
Know Thyself
In the last exercise, we used typeof to figure out what type a variable
in JavaScript is. Since we know how to tell objects apart from
everything else now, let's focus on them.
You wouldn't know it, but every object in JavaScript comes with some
baggage (stay tuned for more on this!). Part of this baggage includes a
method called hasOwnProperty. This lets us know if an object has a
particular property.

Prototype to the Rescue
Here we have very similar code as last time, but there is an important
difference. Instead of using buddy.bark to add the bark method to
just the buddy object, we use Dog.prototype.bark.
Click run this time, and both buddy and snoopy can bark just fine!
Snoopy can bark too even though we haven't added a bark method to
that object. How is this so? Because we have now changed the
prototype for the class Dog. This immediately teaches all Dogs the
new method.
In general, if you want to add a method to a class such that all
members of the class can use it, we use the following syntax to extend
the prototype:
className.prototype.newMethod =

function() {
statements;
};

DRY Penguins
Creating a brand new Penguin was nice, but we did end up reusing a
lot of the same code as the Animal class. This goes against the "DRY"
principle of programming: Don't Repeat Yourself.
Inheritance can help us here! A Penguin is an Animal, so they should
have all the same properties and methods as Animal. Whenever this X
is-a Y relationship exists, there's a good chance that we should be
using inheritance.
Remember, inheritance lets us see and use properties and methods
from another class. To say that Penguin inherits from Animal, we
need to set Penguin's prototype to be Animal.
Create a new Penguin class. The Penguin constructor can be more
unique than the generic Animal one because all penguins have 2 legs.
Your constructor should only take a name parameter, and within the
constructor itself, set this.numLegs to 2.
Set the Penguin class's prototype to a new instance of Animal by
adding this line after you make the constructor:
Penguin.prototype = new Animal();
This means that Penguin inherits properties and methods from
Animal.

Up the Food-I-mean-Prototype Chain
A penguin is an animal and an emperor penguin is a penguin. Are
emperor penguins animals too? Of course!
The "prototype chain" in JavaScript knows this as well. If JavaScript
encounters something it can't find in the current class's methods or
properties, it looks up the prototype chain to see if it's defined in a
class that it inherits from. This keeps going upwards until it stops all
the way at the top: the mighty Object.prototype (more on this
later). By default, all classes inherit directly from Object, unless we
change the class's prototype, like we've been doing for Penguin and
Emperor.

Private Variables
Good! But what if an object wants to keep some information hidden?
Just as functions can have local variables which can only be accessed
from within that function, objects can have private variables. Private
variables are pieces of information you do not want to publicly share,
and they can only be directly accessed from within the class.
The Person class has been modified to have a private variable called
bankBalance. Notice that it looks just like a normal variable, but it is
defined inside the constructor for Person without using this, but
instead using var. This makes bankBalance a private variable.
Accessing Private Variables
Although we cannot directly access private variables from outside the
class, there is a way to get around this. We can define a public method
that returns the value of a private variable.

Private Methods
Why did that code work? An object's private variables can only be
accessed by other methods that are part of that same object. So, we
just used an object's public method to access a private variable!
Methods can also be private within a class and inaccessible outside of
the class. Changing this.returnBalance from the last exercise to
var returnBalance makes this method private. If you run the
program trying to access the method you get an undefined error this
time.
The way to access a private method is similar to accessing a private
variable. You must create a public method for the class that returns the
private method.
jQuery

Changing Targets
Don't be intimidated by the amount of code you're seeingwe'll go
through it piece by piece to make sure you understand it thoroughly.
Just like the CSS div refers to the HTML element <div>, the jQuery
'div' refers to the same HTML element <div>. You can think of the
element name passed to jQuery as identical to the CSS element, only
wrapped in quotes. So, for instance, you could target anything of class
button with
$('.button').someAction
As you'll remember, .button in your CSS file is how you'd target
anything of class="button" in your HTML file.

What is jQuery?
jQuery is a library, or set of helpful add-ons, to the JavaScript
programming language. It may seem counterintuitive to learn how to
use a library before learning the actual language, but there are a few
good reasons for this.
It takes a while to become comfortable with JavaScript, and it's
trickier to manipulate HTML elements directly with JavaScript
than with jQuery. In order to help you build awesome websites
faster, we're starting you off with jQuery.
jQuery provides a simple interface for the underlying JavaScript. It's
easier for many users to learn jQuery first, then dive into the
nitty-gritty JavaScript details later.
jQuery is much better at giving you immediate, visual results than
regular JavaScript. By the end of this lesson, you'll have built your
own interactive button!

Linking Your HTML and JavaScript
Files
Great! Now we need to link our HTML page to our jQuery script so
our jQuery magic will affect our HTML.
Just like we need a <link> tag to connect our HTML and CSS, we
need a <script> tag to connect our HTML and jQuery. The tag looks
like this:
<script type="text/javascript"
src="script.js"></script>
Note that the <script> tag is not self-closing; it requires a closing
</script> tag.

Getting Started
Next, we'll need to start up our jQuery magic using the
$(document).ready(); syntax you've seen. It works like this:
$() says, "hey, jQuery things are about to happen!"
Putting document between the parentheses tells us that
we're about to work our magic on the HTML document itself.
.ready(); is a function, or basic action, in jQuery. It
says "hey, I'm going to do stuff as soon as the HTML document
is ready!"
Whatever goes in .ready()'s parentheses is the jQuery
event that occurs as soon as the HTML document is ready.
So,
$(document).ready(something);
says: "when the HTML document is ready, do something!" (We'll
show you how to replace something with an action in the next
exercise.)
Note that .ready(); ends with a semicolon. This tells jQuery that
you're done giving it a command.

The Functional Approach
Perfect! Now we need to put something inside our ready() function.
Remember, when we say "function," you can think "action."
Functions are the basic unit of doing work in jQuery.
For this reason, jQuery includes a function keyword. The syntax
looks like this:
function(){
jQuery magic;
}
If we add our function inside our .ready(), jQuery will run the code
in our function as soon as the HTML document loads. The syntax
would then look like this:
$(document).ready(function() {
jQuery magic;
});
Remember, we end our jQuery statements with a semicolon.

Get Yourself In...
Great! Next, let's include our function keyword and two new actions
together, mouseenter() and fadeTo().
mouseenter() does what you might expect: it produces a change
when your mouse enters a given HTML element. For example,
$(document).ready(function() {
$('div').mouseenter(function() {
$('div').hide();
});
});
would hide every <div> on the page as soon as you mouse over one.
(We'll find out how to affect just one <div> among many in the next
lesson.) For now, we only have one <div>, so this setup is okay.
Instead of hide(), however, we'll place fadeTo() inside
mouseenter(). fadeTo() takes two arguments, or inputs, between
its parentheses, separated by a comma: the speed at which to fade, and
the opacity (or transparency) to fade to. For example,
fadeTo('fast', 0.25);
would quickly fade the target element to 25% of its original opacity,
making it very light-colored.

...and Get Yourself Out!
Excellent! Your button looks great nowit stands out when the user
mouses over it.
However, you'll notice that when you take your cursor off the button,
it stays dark. What we really want is for our button to become light
again when our mouse leaves.
You might have guessed that jQuery includes a mouseleave()
action. If so, you're right! (If you're curious, you can learn more about
these actions in the jQuery documentation.)

'this' is Important!
In the last lesson, we had some code that looked like this:
$(document).ready(function() {
$('div').mouseenter(function() {
$('div').hide();
});
});
The second line is good: this tells us that when we mouse into a div,
we should take a certain action. However, $('div').hide(); won't
just hide the div you mouse into; it will hide all the divs on the page.
How can we tell jQuery we only want to affect this particular div?
With this, of course!
The this keyword refers to the jQuery object you're currently doing
something with. Its complete rules are a little tricky, but the important
thing to understand is if you use an event handler on an element
that's the fancy name for actions like .click() and .mouseenter(),
since they handle jQuery eventsyou can call the actual event that
occurs (such as fadeOut()) on $(this), and the event will only
affect the element you're currently doing something with (for
example, clicking on or mousing over).

Toggling Our Panel
Perfect! Just one more step: we need to tell .click() what to do. In
this case, when our pull tab is clicked, we want our sliding panel (with
the class .panel) to open or close.
The jQuery event we need to toggle our sliding panel is (you guessed
it): .slideToggle()! We'll pass it one input, which is the speed of
our slide animation.

Creating HTML Elements
Dynamically adding elements to our HTML page is a powerful tool
it lets us modify not only the formatting, but the actual structure of
our websites in response to a user's actions. For example, when you
get a Gchat, each message is actually a new <div> being dynamically
added to the page. Cool, right?
If you think about it, we've sort of done this already: all we're doing is
setting a variable equal to a jQuery object. In this case, however,
instead of just having something like:
$p = $('p');
We'll want to pass in an entire HTML element in quotes:
$p = $("<p>I'm a new paragraph!</p>");
When we put text in quotes like this, we call it a string (as in a "string
of characters"). From now on, when we say "string," you can think
"text" or "phrase." Strings are always in single or double quotes.

Inserting Elements
We can insert our newly created elements using a few jQuery actions.
.append() inserts the specified element as the last child of the target
element. .prepend() inserts the specified element as the first child of
the target element. If we have a div of class .info,
$(".info").append("<p>Stuff!</p>");
$(".info").prepend("<p>Stuff!</p>");
will add a paragraph containing the text "Stuff!" inside all divs of
class .info. .append() will make the paragraph the last child of
each div; .prepend() will make the paragraph the first child of each
div. (Note: see the Hint if you're using single quotes.)
.appendTo() does the same as .append(), but it just reverses the
order of "what to add" and "where to add it." The code
$('<p>Stuff!</p>').appendTo('.info');
has the same effect as the .append() code above. .prependTo() has
a similar relationship to .prepend().

Before and After
We can specify where in the DOM we insert an element with the
.before() and .after() functions. The syntax looks like this:
$('target').after('<tag>To add</tag>');
Where 'target' is the element after which you want to add
something and the bit between <tag>s is the HTML element you want
to add. You can add <h1>s, <div>s, or any other valid HTML you
like.

Moving Elements Around
Moving elements around in the DOM is a snapall we need to do is
use the jQuery functions we just learned on existing elements instead
of creating new ones.
var $paragraph = $("p"); // existing element
$("div").after($paragraph); // Move it!
// Same as:
$("div").after($("p"));
We can select an element using $("p") and assign it to a variable
We can move the position in the DOM by using the variable in our
after() statement
Note: This does not copy the element from one location to another, it
moves the original element effectively saving you from having to
delete the original.

Removing Elements
Adding elements to our HTML documents is great, but without the
ability to remove them, our pages can quickly become cluttered.
Thankfully, we have two jQuery functions, .empty() and
.remove(), that help us delete content from our pages.
.empty() deletes an element's content and all its descendants. For
instance, if you .empty() an 'ol', you'll also remove all its 'li's
and their text.
.remove(), not only deletes an element's content, but deletes the
element itself.

Adding and Removing Classes
We don't have to limit ourselves to adding or removing entire
elements, thoughwe can fine-tune our jQuery superpowers to alter
classes, CSS, and even the contents of our HTML elements.
Let's start with classes. jQuery includes two functions, .addClass()
and .removeClass(), that can be used to add or remove a class from
an element. This is great if, for example, you have a highlighted
class that you want to apply to an element when clicked.
The syntax looks like this:
$('selector').addClass('className');
$('selector').removeClass('className');
where 'selector' is the HTML element you want and
'className' is the class name you want to add or remove.
Remember: You aren't selecting anything, you are modifying your
element. This means that you do not need # or . before your class.

Toggling Classes
What if we want to toggle a class back and forth, though? That is,
what if we want jQuery to automatically check to see whether our
#text is .highlighted, so that when we click on it, it adds the class
if it isn't there and removes it if it is?
As you probably guessed, jQuery includes a .toggleClass()
function that does exactly this. If the element it's called on has the
class it receives as an input, .toggleClass() removes that class; if
the target element doesn't have that class, .toggleClass() adds it.

Changing Your Style
What if we want to fine-tune individual CSS property values, though?
Remember style="height:300px; width:300px;"? jQuery
makes it a snap!
Because resizing elements is so common, jQuery has specific
.height() and .width() functions that can be used to change the
heights and widths of HTML elements. For instance:
$("div").height("100px");
$("div").width("50px");
would give all <div>s on the page a height of 100 pixels and a width
of 50 pixels.
jQuery also includes a general-purpose .css() function that takes
two inputs: the first is the CSS element to alter, and the second is the
value to set it to. For example:
$("div").css("background-color","#008800");
would give all <div>s on the page a green background color. You can
modify any element's CSS attributes this way.

Modifying Content
Finally, we can update the contents of our HTML elementsthat is,
the bit between the opening and closing tagsusing the .html() and
.val() functions.
.html() can be used to set the contents of the first element match it
finds. For instance,
$('div').html();
will get the HTML contents of the first div it finds, and
$('div').html("I love jQuery!");
will set the contents of the first div it finds to "I love jQuery!"
.val() is used to get the value of form elements. For example,
$('input:checkbox:checked').val();
would get the value of the first checked checkbox that jQuery finds.

Click Da Button! Do It Naoughw!
You'll notice we've set up an HTML form for grabbing the user's
input. We'll need to store the user's input in a variable, which will
allow us to append that input to the body of the HTML document later
on.
You can set a variable equal to the contents of the input field using
.val(), like so:
//Get the value from an input
var input = $('input[name=checkListItem]').val();
Our selector finds our specific input using a css selector on our
checkListItem input
We call val() to get the value of the field.

Remove What's Been Clicked
Great job! Finally, we want to be able to check items off our list.
You might think we could do this:
$('.item').click(function() {
$(this).remove();
});
and that's not a bad idea. The problem is that it won't workjQuery
looks for all the .items when the DOM is loaded, so by the time your
document is ready, it's already decided there are no .items to
.remove(), and your code won't work.
For this, we'll need a new event handler: .on(). You can think of
.on() as a general handler that takes the event, its selector, and an
action as inputs. The syntax looks like this:
$(document).on('event', 'selector', function() {
Do something!
});
In this case, 'event' will be 'click', 'selector' will be
'.item', and the thing we'll want to do is call .remove() on this.

Combining .click() and .hover()
Well done! Let's add one more jQuery event to our "destruction of
Krypton" simulation. Krypton didn't just vanish, it exploded! Let's
make it turn red.
$('div').hover(function(){
$('div').addClass('green');
});
Following the pattern we have been learning, we target Krypton, our
$('div')
We then apply our hover event to our target.
Finally, we execute the code inside the function(){} which adds a
class of green to our target.

The .dblclick() Event
Now that we've reviewed our jQuery event handlers, let's learn a new
one.
We might want to cause a jQuery effect when a user double clicks on
an element, rather than just single-clicking. We can do this with the
.dblclick() event handler.

Hover
What if you wanted to create an effect when your mouse is on top of
an object, then have that effect vanish when your mouse moved away?
You might notice this effect in use on many site's navigation bars!
$('div').hover(
function(){
$(this).addClass('highlight');
},
function(){
$(this).removeClass('highlight');
}
);
We first select the element we want to modify $('div')
Secondly notice that our hover effect is able to take two
functions(){} separated by a comma. The comma is very
important!
The first function(){} we pass will be run when we first mouse
over our target. Here we apply a class of highlight
The second function(){} will be called when our mouse leaves
the object. This is where we remove the class highlight
Your second function(){} doesn't have to be the opposite of the
first function(){}, but it would be very common!

Let's .focus()!
Another event we can make use of is .focus(). We say an element
has focus when we click on it or tab over to it. If you've ever filled out
a form on a web page and seen how each text box lights up when you
tab to it or click on it, you've seen focus in action!
The .focus() event handler only works on elements that can receive
focusthe list of these elements is a bit vague, but HTML elements
like <textarea>s and <input>s are the usual suspects.
Check out the form we've set up in the Result tab. If you click on the
input field, you'll see it automatically highlights in a delightful baby
blue. Too bad baby blue is for babies! We want our highlighting to be
red.
We can do this with two tools: .focus() and our .css() function
from the last section. We want to write a bit of jQuery code that will
change our 'input''s 'outline-color' to 'red' when it gains
focus.
The .keydown() Event
You're not limited to mouse events in jQueryyou can trigger events
using the keyboard, as well!
The .keydown() event is triggered whenever a key on the keyboard
is pressed. It only works on whatever page element has focus, so
you'll need to click on the window containing your div before pressing
a key in order for you to see its effects.
Let's go ahead and combine our new event with a new effect:
.animate()! We'll use this to move an object on the screen whenever
we press a key.
The .animate() effect takes two inputs: the animation to perform,
and the time in which to perform the animation. Here's an example:
$(document).ready(function() {
$('div').animate({left:'+=10px'},500);
});
This will take the first div it finds and move it ten pixels to the right.
Remember, increasing the distance from the left margin moves
something to the right; the += bit is just a shorthand for "take the
existing number and add ten to it." In this case, it add ten pixels to the
current distance from the left margin.

Filling Out the Cases
Great work! Now it's time to animate our character based on the user's
input from the keyboard.
Every key press on a keyboard is translated into a number for the
computer to use. Don't worry about memorizing them, for now we've
given you the basics in script.js
// Left arrow key pressed
case 37:
('img').animate({left: "-=10px"}, 'fast');
The left arrow key on our keyboards translates to number 37 to the
computer. When that key is pressed, we animate our image to
the left by subtracting 10px
To move up we subtract 10px from the top
To move right we add 10px to the left 4, Finally, to move down
we add 10px to the top
Can you fill in Up, Down, and Right? What happens if you add pixels
+=10px instead of subtracting?

Introducing: jQuery UI
All right! Time to blaze new jQuery trails with a new jQuery library:
jQuery UI.
jQuery UI includes a number of ultra-fancy animations you can use to
make your websites do incredible things.
For instance, remember when we lamented that jQuery didn't include
a .blowUp() effect for our planet Krypton? Well, that's still true. But
jQuery UI has an .effect() effect, and we are totally going to give it
the input 'explode'.
Note that we've included an extra <script> tag in our HTML
documents; this is used to include jQuery UI in our webpages. We
don't have to do this with regular jQuery, since Codecademy
automatically includes it for us.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-
ui.min.js"></script>

.bounce()
Cool, right? But we can do much more than just blow things up.
Another possible effect is 'bounce'. We give this as an input to
.effect() just like 'explode', but we add an extra input to tell it
how many times to bounce. This code will make our target 'div'
bounce twice in 200 milliseconds:
$('div').effect('bounce', {times:2}, 200);

.slide()
We can also make Krypton .slide() into view. Not surprisingly, we
do this by calling the .effect() effect and passing in 'slide' as an
input.
If you want to see everything jQuery UI can do, you can check out the
documentation here!

Drag Racing
jQuery UI includes a .draggable() function that can make any
HTML element draggableyou can click on it and move it anywhere
on the page!
We thought you might be tired of <div> blocks, so we made you a
CSS car. We worked super hard on it.
PHP

Why Learn PHP?
"So what?" You might say. "I can do that with JavaScript." And that's
true! But JavaScript's knowledge can be limited.
JavaScript generally runs in the browser, or client. This means it only
really knows what's going on in your browser, plus whatever
information it gets from the website(s) you're connecting to.
PHP, on the other hand, runs on the same computer as the website
you're visiting, which is known as the server. This means that it has
access to all the information and files on that machine, which allows it
to construct custom HTML pages to send to your browser, handle
cookies, and run tasks or perform calculations with data from that
website.

Echo
The echo function outputs strings. If you type
<?php
echo "Hello!";
?>
PHP will output Hello!.
Make sure to end your line of PHP code with a semicolon.

Strings
A string is a word or phrase between quotes, like so: "Hello,
world!"
You can type a string all at once, like this:
<?php
echo "Hello, world!";
?>
Or use the concatenation operator, which glues several strings
together:
<?php
echo "Hello," . " " . "world" . "!";
?>
The concatenation operator is just a dot (.). (If you're coming to PHP
from JavaScript, the dot does the same thing for strings that + does in
JavaScript.)

Arithmetic
In addition to outputting strings, PHP can also do math.
<?php
echo 5 * 7;
?>
Here we use echo to multiply 5 and 7, and we end our line of code
with a semicolon. PHP will output 35.

Variables
So far we've been outputting strings and doing math.
To do more complex coding, we need a way to "save" these values.
We can do this using variables. A variable can store a string or a
number, and gives it a specific case-senstive name.
Examples:
$myName = "Beyonce";
$myAge = 32;
All variable names in PHP start with a dollar sign ( $ ).

Comments
Just like we sometimes put comments in our CSS (using /* this
syntax */) or in our HTML (using <!-- this syntax -->), we
can also put comments in our PHP code! We do that using two
forward slashes (//), like so:
<?php
echo "I get printed!";
// I don't! I'm a comment.
?>

Comparisons
So far we've seen:
strings (e.g. "dogs go woof!")
numbers (e.g. 4, 10)
Now let's learn about comparison operators.
List of comparison operators:
> Greater than
< Less than
<= Less than or equal to
>= Greater than or equal to
== Equal to
!= Not equal to