Week 9 Notes

JavaScript & jQuery

What is a function?

Defines a specific set of reusable tasks

Input parameters

Do stuff, return data

Function Syntax

function functionName(arg1, arg2) {
   // body of function

}

function: keyword, like var

Function Name

Body for execution, like an if statement

Running Functions

function myFunction() {
  console.log("Hello world!");
}

myFunction();
// use of parenthesis actually calls the function


myFunction;
// just outputs the function definition

Input Parameters

function addNumbers(num1, num2) {
  var sum = num1 + num2;
  console.log(sum);
}

addNumbers(4, 5);
// returns 9 to the console


addNumbers(10, 12);
// returns 22 to the console

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);
// returns 3


var sum = add(40, 50);

JavaScript Objects

var emptyObject = {};
//empty


var person = {
  name: "Brendan",
  age: 30,
  gender: "Male",
  currentLocation: "New York, NY"
}

Key Value Pairs

{ name: "Brendan" }

Key = name Value = Brendan

Object Access and Manipulation

var person = { name: "Brendan" };

person.name;
// returns "Brendan"


person.name = "Brian";
// person now stores "Brian" as value for name

Basic jQuery Syntax

Find elements (traverse the DOM):

$("<css selector>");

Manipulate those elements:

$(target).css(), $(target).html()

Finding Elements

$("<css selector>");

Returns results in array

$("h1");

Finds all h1 header elements

$(".header .nav");

Finds class .nav in .header

Editing HTML

$(target).html("<html string>")

Inserts (overwrites) HTML in selected elements

$(target).html()

Returns all HTML of selected element as a string

Editing CSS

$(target).css("property-name","value")

Changes inline CSS values for selected elements

$(target).css("property-name")

Returns value of CSS property as a string

Hide, Show, and Remove

$(target).hide()

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

$(target).show()

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

$(target).remove()

Removes the matched element(s) from the DOM entirely

Manipulating Classes

$(target).addClass("className")

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

$(target).removeClass("className")

Removes class from all matched elements

$(target).toggleClass("className")

Adds class if not currently applied, otherwise removes it

DOM Insertion

$(target).append("content")

Inserts content at the end of each matched element

$(target).prepend("content")

Inserts content at the beginning of each matched element

Mouse Events

$(target).click(function() {
  // run this code when the mouse has been pressed and released on the target

})

User has pressed and released the mouse button

$(target).mousedown(function() {
  //run this code when the mouse button is pressed over the element

});

Mouse button is pressed over the element

$(target).mouseup(function() {
  //run this code when the mouse is released over the target

});

Mouse button is released over the element

$(target).mousemove(function() {
  //run this code when the mouse moves within the target

});

User has moved the mouse over the element

$(target).mouseenter(function() {
  //run this code when the mouse enters the target

});

Mouse has entered the target element

$(target).mouseleave(function() {
  // run this code when the mouse leaves the target

});

Mouse has left the target element

See also:

🔙 Go Home