Week 7 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

Generating HTML Elements

for (var i = 0; i < 100; i++) {
   $("body").append("<div class='box'></div>");
}

Appends 100 div elements with class .box to the body.

jQuery’s Each Function

$(".box").each(function() {
   $(this).css("background-color","red");
});

jQuery’s each function operates in the same manner as a loop, iterating through each matched element in the DOM.

The above example applies a red background to each .box element in the DOM.

Setting CSS Values Dynamically

var opacity = 0;

$(".box").each(function() {
  opacity += .01
   $(this).css("opacity", opacity);
});

Increases the opacity of .box by 1% with each iteration of the loop.

Random Function

Math.random();

Generates a random number between 0 and 1.

Rounding

Math.round(3.7);

Rounds input to nearest integer, in this case 4.

Math.ceil(8.3);

Rounds up to the smallest integer greater than or equal to our input, in this case 9.

Math.floor(5.8);

Rounds down to the largest integer less than or equal to our input, in this case 5.

Random Array Values

var myArray = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg"];

myArray[Math.floor(Math.random()*myArray.length)];

Returns a random entry from myArray.

Setting CSS Values

var sizeVal = (Math.floor(Math.random()*60) + 20) + "px";

$(".target").css("width", sizeVal).css("height", sizeVal);

Sets the width and height of .target to a random value between 20 and 80.

🔙 Go Home

Last updated: March 4, 2020