A function is a specific set of reusable tasks. A function allows you to input parameters and execute a task.
function functionName(arg1, arg2) {
// body of function
}
function: keyword, like var
The body is for execution, like an if statement {}
function myFunction() {
console.log("Hello world!");
}
myFunction();
// use of parenthesis actually calls the function
myFunction;
// just outputs the function definition
In order to re-use functions in various settings, you may want to set up parameters with which the function can operate:
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
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);
var emptyObject = {};
//empty
var pond = {
location: "Central Park",
season: "fall",
fishCount: 12,
toadCount: 27
}
Javascript arrays:
var array = ["frog", "fish", "salamander", "toad", "cricket"]
Javascript arrays are accessed through an indexical key array[0] = "frog"
Javascript objects are like an array, except their key isn’t numerical, instead it’s assigned:
{ location: "Central Park" }
Key = location, Value = Central Park.
Object access is where arrays and objects begin to differ more greatly.
While an array is accessed like so: array[0] = "frog", an object is accessed like so:
var pond = { location: "Central Park" }
pond.location; // returns "Central Park"
pond.location = "Prospect Park" // pond now stores "Prospect Park" as location
Objects are especially handy as a method of storing large amounts of information. One can store any type of variable in an object, meaning you could even store an array or an object within in object!
var library = {
bookshelves : {
bookshelfOne : ["The Odyssey", "The Illiad", "The Aenied", "Antigone"],
bookshelfTwo : ["Harry Potter and the Philosophers Stone", "Harry Potter and the Chamber of Secrets", "Harry Potter and the Prisoner of Azkaban"]
},
magazineRack : ["Vogue", "GQ", "The Newyorker", "T Magazine", "The GentleWoman", "Fantastic Man", "TeenVogue"]
}
library.bookshelves.bookshelfOne[2]; // returns "The Aeniad"
library.magazineRack[0]; // returns "Vogue"
“Jquery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”
Essentially this means that jQuery attempts to simplify the syntax needed to get javascript to interact with the rest of your webpage.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="your/file/path/script.js"></script>
Basic syntax is: $("<css selector>").action()
A $ sign to define/access jQuery
A ("<css selector>") to “query (or find)” HTML elements
A jQuery action() to be performed on the element(s)
$("<css selector>");
Manipulate those elements:
.css(), .html()
full list of methods to manipulate your selection can be found here.
Think about it this way— jQuery is meant to be flexible and make things easier. What do you want to do to the element you’ve selected? There’s probably a jQuery method for it (or some combination of jQuery methods)!
$("<css selector>"); Returns results in array.
$("h1"); Finds all h1 header elements.
$(".header .nav"); Finds class .nav in .header
$(".header, .nav"); Finds elements with class .nav and elements with class .header
$("#header"); Finds element with ID header
.html("<html string>") Inserts (overwrites) HTML in selected elements:
// <div id="myID">testing!</div>
$("#myID").html("more tests!");
// returns: <div id="myID">more tests!</div>
.html() Returns all HTML of selected element as a string
// <div id="myID">testing!</div>
var whatsInHere = $("#myID").html();
// whatsInHere returns "testing!"
.css({"<propertyName>" : "<rule>",
"<otherPropertyName>" : "<otherRule>"})
Changes inline CSS values for selected elements:
$(".myDiv").css({"background-color" : "red",
"color" : "white"})
.css("<propertyName>") Returns value of CSS property as a string ($(".myDiv").css("background-color") would return red)
A full list of how you can manipulate and return CSS values with jQuery can be found here
$("document").ready(function(){
//once the document has loaded
})
jQuery also allows you to animate transitions between css values with its animate() method:
$("#myelement").animate({
height: "20px",
opacity: 0.5,
backgroundColor: "red"
}, 5000, function(){
// on animation completion, do something
})
Animate can also change scroll positions:
$("body").animate({
scrollTop: 600
}, 1500)
jQuery has a simplified for loop called .each()
Lets say that you have a set up like this:
<div class="myDiv">some content</div>
<div class="myDiv">more content</div>
<div class="myDiv">further content</div>
<div class="myDiv">just content</div>
<div class="myDiv">greater content</div>
and you wanted to get all the content in a long string. You could do something like this:
var fullString = "";
$(".myDiv").each(function(){
fullString += $(this).html();
})
//would output: "some content more content further content just content greater content"
.hide()
Hides all matched elements by setting their inline style to display: none;
.show()
Reveals matched elements by switching their display property to block/inline;
.remove()
Removes the matched element(s) from the DOM entirely
.addClass("className")
Adds class to all matched elements Note: in this case, you should not use a period preceding your class name
.removeClass("className")
Removes class from all matched elements
.toggleClass("className")
Adds class if not currently applied, otherwise removes it
.append("content")
Inserts content at the end of each matched element
.prepend("content")
Inserts content at the beginning of each matched element
.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
You can insert html elements after the page has loaded:
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 has similar potential:
var opacity = 0,
degrees = 0;
$(".box").each(function() {
opacity += .1;
degrees += 30;
$(this).css({"opacity" : opacity,
"transform" : "rotate(" + degrees + "deg)"});
});
(Increases the opacity of .box by 10% and the rotation by 30 degrees with each iteration of the loop.)
DOM. Its syntax is designed to make adding, changing, and removing elements simpler.