Class 7. JavaScript & jQuery 2

Review of JavaScript & jQuery

JavaScript, alongside HTML and CSS, make up the three core technologies of the web. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images and 2D/3D graphics, interact with the user, and pretty much everything else. JavaScript (often abbreviated JS) allows you to implement complex and dynamic web pages.

jQuery is a library, a set of helpful add-ons, to extend the JavaScript programming language. In general, jQuery is much better at giving you immediate, visual results than regular JavaScript. jQuery is just one way to extend the language of JavaScript, one library among many. 

When you write jQuery you can always include plain JavaScript. For example, console.log() and alert() are both functions built into the core language of JavaScript. 

console.log("Hello World");
alert("Hello World!");

Storing variables as arrays or strings too:
var laurel = "Laurel Schwulst";
var groceries = ["milk", "eggs", "flour", "butter", "brown sugar"];

jQuery Basics / Review


Find elements (traverse the DOM):

$('<css selector>');

Manipulate those elements with functions such as:

.css(), .html(), .show(), .hide(), .addClass(), .removeClass(), .append(), .prepend(), .fadeIn(), .fadeOut(), etc.

Finding Elements


$('<css selector>');

Returns results in array

$('h1');
// finds all h1 header elements

$('.header .nav');
// finds class .nav in .header

Editing HTML


.html('<html string>');

Inserts (overwrites) HTML in selected elements, both content and DOM. Can write plain HTML into this. 

.html();

Returns all HTML of selected element as a string

Editing CSS


.css('<property>', '<value>')