Functions, Objects, jQuery


A function is a block of code that returns a result. Think of a function like a box that isn’t aware of the outside world. It only knows what you tell it and when you ask it something (run or call), it will reply with an answer. Functions make it easier to maintain and reuse functionality within an application.

function hello() {

To declare a function you write function followed by the name you’d like to give it, in the example above, hello. The name of the function is then proceeded with wrapping parentheses, (). We’ll discuss this more later, but for now just know that it’s required when declaring a function.

Braces {} define the space allotted to the block of the function. Think of them as typographically describing the “edges” of the box. The code written inside those braces are what’s run when the function is called.

Calling a Function

The following line calls the function we defined above:


When the function is called, an alert box will open with the message Hello. That’s a pretty boring function, let’s make it a little more interesting:

function hello() {
  var greeting = "Hello it's ",
      date     = new Date();

  alert(greeting + date);

Now when we call hello(); an alert will open that gives us a greeting with the current date and time.

Function Arguments

Remember that functions have their own context. A variables defined in one function isn’t available in another. To make function aware of the outside world you can use arguments to pass information to the function, and you do this between the parentheses mentioned earlier:

function hello(person) {
  var greeting = "Hello, " + person + "! It's ",
      date     = new Date();

  alert(greeting + date);

To pass an argument to a function, you write the value you wish to pass to the function:


Once the value has been passed to the function, it is available to the function using the variable name defined within the parentheses. In the example above, person is equal to the string 'Alex'. And when the function is called we’ll see something like the following:

Hello, Alex! It's Sun Aug 02 2015 11:08:25 GMT-0400 (EDT)

Multiple Arguments

You can mass multiple arguments to a function for more complex behavior:

function hello(person, informal) {
  var date = new Date(),

  if (informal) {
    greeting = 'Yo, ';
  else {
    greeting = 'Hello, ';

  alert(greeting + date);

hello('Alex', true);

// Yo, Alex! It's Sun Aug 02 2015 11:08:25 GMT-0400 (EDT)

Note: Remember to keep track of the ordering of a function’s arguments!

Returning Data

We often want to directly use the data the function creates. The return method does just that:

function add(num1, num2) {
  var sum = num1 + num2;

  return sum;

add(1, 2); // 3

var sum = add(40, 50);

JavaScript Objects

var Person = {};

var Person = {
  name: "Brendan",
  age: 30,
  currentLocation: "New York, NY"

Key/Value Pairings

Person // Object {name: "Brendan", age: 30, currentLocation: "New York, NY"}

The object Person has a number of key/value pairings. The key is the static name by which you can retrieve data from. The value is data assigned to a given key. A basic array also makes use of the key/value paradigm, but in a less dynamic way, the key is always numeric.

In the above output, name, age, and currentLocation are keys and Brendan, 30, and New York, NY are the values respectively.

Object Access & Manipulation

To access a specific value for an object, you write the name of the object (or if you assigned the object to a variable, call the variable) followed by . and the key you’d like the value for:; // "Brendan"

You can assign new values to object keys on the fly simply similar to how you set the value of a variable: = "Brian";

jQuery Basics

Find elements (traverse the DOM):

$("<css selector>");

Manipulate those elements:

.css(), .html()

Finding Elements

$("<css selector>");

Returns results in array


// finds all h1 header elements

$(".header .nav");

// finds class .nav in .header

Editing HTML

.html("<html string>")

Inserts (overwrites) HTML in selected elements


Returns all HTML of selected element as a string

Editing CSS

.css({"<propertyName>" : "<rule>",
"<otherPropertyName>" : "<otherRule>"})

Changes inline CSS values for selected elements


Returns value of CSS property as a string

Hide, Show, and Remove


Hides all matched elements by setting their inline style to display: none;


Reveals matched elements by switching their display property to block/inline;


Removes the matched element(s) from the DOM entirely

Manipulating Classes


Adds class to all matched elements
Note: in this case, you should not use a period preceding your class name


Removes class from all matched elements


Adds class if not currently applied, otherwise removes it

DOM Insertion


Inserts content at the end of each matched element


Inserts content at the beginning of each matched element

Are You Ready?

$(document).ready(function() {
  // lets run some stuff

Mouse Events

.click(function() {

// do stuff


User has pressed and released the mouse button

.mousedown(function() {})

Mouse button is pressed over the element

.mouseup(function() {})

Mouse button is released over the element

.mousemove(function() {})

User has moved the mouse over the element

.mouseenter(function() {})

Mouse has entered the target element

.mouseleave(function() {})

Mouse has left the target element