Welcome!

Wifi — First Round Capital Guest

Password (all lowercase) — frclovesphilly

Slides — ivanaveliskova.com/gdi-jquery

Demo Files — ivanaveliskova.com/gdi-jquery/demo-files.zip

Remember to unzip demo-files and place it somewhere easily accessible on your desktop!

Intro to jQuery

Welcome!

GDI Philly is now on Slack!

Welcome!

• This class will be a combo of lecture + exercises
• It is 4 hours long, with a 30 minute break in the middle
• Agenda
  • Introductions
  • Quick review of JavaScript
  • jQuery overview
  • Selectors & Methods
  • jQuery Documentation
  • Events & Animations
  • Plugins

Welcome!

JavaScript Review

var name = "Ivana";

var greeting = "Hey there, " + name;

console.log(greeting);

JavaScript Review

var myString = "This is a string!";

var myInteger = 1;

var myBoolean = true;

var myArray = ["string", 1, myVar, true];

var myObject = {
  name: "Pamela",
  adjective: "Cool",
  age: 25,
  roles: ["hacker", "teacher", "coder"]
};

JavaScript Review

var favoriteThings = ["Puppies", "Doctor Who", "Settlers of Catan"];

for(var i = 0; i < favoriteThings.length; i++) {
  console.log((i + 1) + ". " + favoriteThings[i]);
}

var i = 0;

while(i < 10) {
  console.log("The current number is: " + i);
  i++; // Don't forget to increment i or you will get stuck in an infinite loop!
}

JavaScript Review

var total = 10;

if (total >= 100) {
  console.log("Total is greater than or equal to 100");
} else {
  console.log("Total is less than 100");
}

JavaScript Review

for(var i = 1; i <= 100; i++) {
  var print;

  if ((i % 5) === 0 && (i % 3) === 0) {
    print = 'FizzBuzz';
  } else if ((i % 3) === 0) {
    print = 'Fizz';
  } else if ((i % 5) === 0) {
    print = 'Buzz';
  } else {
    print = i;
  }

  console.log(print);
}

JavaScript Review

var name = "Ivana";

function greet() {
  var name = "Joey";
  console.log("Hey there, " + name);
}

greet();

What will happen if we run this code?

JavaScript Review

function add(number1, number2){
  console.log("Total: " + (number1 + number2));
}

add(2, 3);
add(1000, 30000);

var name = "Ivana";
function sayHelloTo(name){
  console.log("Hello, " + name + "!");
}
sayHelloTo("Maggie");
sayHelloTo(name);
sayHelloTo();

JavaScript Review

document.getElementById('above-paragraph');
// Finds an element in the DOM by ID
// will return first one that matches (there should only be 1)

document.getElementsByClassName('past');
// Finds elements in the DOM by class
// will return an array even if there is only one match

document.getElementsByTagName('body');
// Finds elements in the DOM by tag
// will return an array even if there is only one match

document.querySelectorAll('[data-slide]');
// Finds elements in the DOM by any selector that you can use in CSS
// will return an array even if there is only one match

document.querySelector('[data-slide]');
// Finds an element in the DOM by any selector that you can use in CSS
// will return only the first one that matches

We made it through the JS review!

Any questions?

What is jQuery?

• A library of predefined JavaScript functions
• A tool that prevents developers from having to reinvent the wheel
• A well-supported cross browser solution
• Not a replacement for an understanding of JavaScript

The jQuery base library includes...

• DOM manipulation
• Data manipulation
• Events
• Effects and animation
• AJAX

Example: JavaScript

To hide images:

var allImages = document.getElementsByTagName("img");
for (var i = 0; i < allImages.length; i++) {
  allImages[i].style.display = "none";
}

Example: jQuery

To hide images:

$('img').hide();

The Source

Including jQuery

Use a <script> tag

• Download and serve
  • Allows you to work locally without an internet connection
  • May be faster than a CDN (content delivery network)
  • Good for development
• Use a content distribution/delivery network
  • User may have it cached, saves on page weight

  • <script src="http://code.jquery.com/jquery-2.2.1.js"></script>

  • Good for production

Let's Develop It!

• Open up demo-files/index.html in your text editor & in your browser
• Include the jQuery library as a source attribute in a script tag before the closing body tag (from the last slide)
• Under that script tag, create a new set of script tags, where your code will live
• Use the jQuery command from a few slides back to hide all of the images on the page
• Once you finish that, create a new javascript file in the same directory and link it to your html page and move the hide image code in there to make sure it still works
• Make sure to leave the jQuery script tag where it is!

Anatomy of a jQuery call

<img src="puppies.jpg">

$('img').hide();

<img style="display: none;" src="puppies.jpg">

Anatomy of a jQuery call

$('img').hide();

• $('img') is a selector .
• .hide() is a method .

Methods

There are many jQuery methods- like tools in a toolkit!

Like screwdrivers, hammers, wrenches, there are a few main groups that methods fall into:

• Getting/changing content within elements
• Finding/changing elements themsleves
• Changing attributes
• Getting/changing dimensions & positions
• Creating animations
• Events

Methods

So break it down even further, a method can be a getter, a setter, or both!

1. A Getter
   • The method retrieves something and stores it in the browser's memory
2. A Setter
   • The method takes action and changes something
3. Or Both!
   • Depending on how it is used, a method can either get or set (more on this later)

Examples:

$('.hero img').remove();

$('#banner > span').hide();

$('#banner').children().hide();

$('img:not(.hero img)').fadeOut();

Let's try this in the console of our demo files!

Methods to Memorize:

Single argument

Examples:

$('.hero img').attr('src');

$('#banner > span').addClass('visible');

$('#banner').children().append('!');

Let's try this in the console of our demo files!

Methods to Memorize:

Single argument- Getters turn to Setters

Methods to Memorize:

Multiple Arguments

Reading elements & their properties

<a href="http://www.google.com" style="color: green;">Google</a>

$('a').text(); "Google"

$('a').attr('href'); "http://www.google.com"

Trick question:

$('a').css('color'); "rgb(0, 128, 0)"

Changing elements & their properties

<a href="http://www.google.com" style="color: green;">Google</a>

<a href="http://www.yahoo.com" style="color: purple; text-decoration: underline;">Yahoo!</a>

Alternatively the javascript code above can be written as:

$('a').text('Yahoo!').attr('href', 'http://www.yahoo.com').css({'color': 'purple', 'text-decoration': 'underline'});

You can pile on as many methods as you need, as long as you keep track of what is happening. (And potentially can document it.)

Let's Develop It!

Why not just HTML/CSS?

• Sometimes you don't have access to those files
• Dynamic Content
• Conditionals

var $doc = $('body');
var style = $doc[0].style;

if ( style.msGrid === '' || style.grid === '' ) {
  $doc.addClass("supports-grid");
}

And now you can be sure that your browser supports grid! And if you have the latest version of Chrome (57) or FireFox (52) you should be able to get this class to show up in the DOM!

Why not just HTML/CSS?

<img class="sale-img" src="images/sale.png">

var currentTime = new Date().getTime();
// sets currentTime variable to current unix timestamp like 1428534443

var endDayBegin = new Date(2017, 4, 23).getTime();
var endDayEnd = new Date(2017, 4, 23, 23, 59, 59).getTime();

if (currentTime > endDayBegin && currentTime < endDayEnd) {
  $('.sale-img').attr('src', '/images/ends-today.png');
} else if ( currentTime > endDayEnd ) {
  $('.sale-img').remove();
}
// changes sale image to an 'ends today' version if it's the last day of the sale
// And removes the image if it's past the day 

Looping

In javascript we wrote a 'for' statement and kept track of the index with a variable.

var listItems = document.getElementsByTagName('li');
for(var index = 0; index < listItems.length; index++) {
  console.log('This is list item # ' + index);
}

With jQuery we can use...

.each() — commonly used method to loop through a collection

$('ul li').each(function(index) {
  console.log('This is list item #' + index);
});

Index and This

And now a word from one of our sponsers*:

this

"used to indicate a person, thing, idea, state, event, time, remark, etc., as present, near, just mentioned or pointed out…" — Dictionary.com

Thank you

*Not really a sponsor.

Now back to your regularly scheduled programming.

Looping

Using 'this' as an iterator:

$('ul li').each(function() {
  $(this).append('!');
});

To be more efficient, cache a variable for $(this):

$('ul li').each(function() {
  var $self = $(this);
  $self.append('!');
});

One more note from another one of our sponsers:

Storing Variables

$('#someID').append('!');
$('#someID').css('color', 'green');

This will ask jQuery to rescan for the matching element, wrap it in a jQuery object, and create a new instance of something you already have in memory.

$someVarName = $('#someID');
$someVarName.append('!');
$someVarName.css('color', 'green');

This will allow you to cache your elements and refer to them when needed. Saving memory!

Thank you

Now back to your regularly scheduled programming.

Let's Develop It!

Stretch break!

Interaction

The bread and butter of jQuery.

Events

When something happens

• click
• mouseenter / leave (hover)
• submit
• scroll / resize
• Many more: http://api.jquery.com/category/events/

Interaction

When I do this thing, it will respond somehow

• Most events happen via the .on() method, which usually takes two args.
• The first argument is the event (or events), passed in as a string
• The second argument is a function that will run when the event happens, called an event handler

$('#button').on('click', function() {
  console.log('The button was clicked!');
});

Binding handlers

You can also...

$('a').on('click', function (event) {
  event.preventDefault();
  console.log('Not going there!');
});

Event handlers are typically passed the event that has triggered them, and that data can then be used by the handler. See info on the event object: http://api.jquery.com/category/events/event-object/

Binding handlers

You can also use the "on" method to bind to multiple events at once:

$('.overlay').on('click touchstart', function() {
  $(this).fadeToggle('slow');
});

$('.sidebar').on({
  click: function() {
    $(this).toggleClass('active');
  },
  focusin: function() {
    $(this).addClass('inside');
  },
  focusout: function() {
    $(this).removeClass('inside');
  }
});

Let's Develop It!

Document Readiness

A break in our regularly scheduled program

Most everything you want to do with jQuery requires the DOM to be fully loaded.

Sometimes jQuery will try to load and hook onto elements that don't exist yet.

The browser renders the markup from top to bottom, then triggers a DOMReady event.

$(document).ready(function() {
  // Handler for .ready() called.
});

This waits for the DOM to be fully loaded and does a check if it is loaded before any JavaScript/jQuery is run.

Built-in Effects & Animation

• show / hide / toggle
• slideUp / slideDown / slideToggle
• fadeIn / fadeOut / fadeToggle / fadeTo

Animation controls

• delay
• stop
• finish
• queue

Custom Animation

.animate( properties [, duration ] [, easing ] [, complete ] );

$('p.special').animate(
  {opacity: 0.25, fontSize:'3em'},
  4000,
  'linear',
  function(){
    alert('done!');
  }
);

I'm a special paragraph!

Try it together!

When hovering a gallery image: hide, show, or animate the overlay info.

$('.gallery li').on('mouseenter mouseleave', function() {
  $(this).find('.overlay').fadeToggle('fast');
});

• Be mindful of what a user will see without JavaScript
• A lot of these features are possible through CSS3, but jQuery is supported on older browsers
• Also, jQuery allows you to trigger effects on elements other than the one being interacted with

jQuery UI & Plugins

• jQuery UI offers more advanced interaction methods. It's very well documented, but can be heavy on pageload. Only load in pieces you need!


• jQuery is open source and widely used, so there are many many plugins available (of varying quality and levels of documentation)
  • date pickers, slideshows, accordions, much more!

http://plugins.jquery.com/

Using Plugins

• Download the plugin and associated files from the site or github repo
• Copy them into your project folder
• In the HTML, reference any associated CSS files
• In the HTML, add a script tag for the jQuery plugin itself after your call to jQuery
• In the JavaScript, call the jQuery plugin on your DOM

Let's Develop It!

Add a slideshow using Slick.js!

• Use any of the images in the demo-files image folder, or any of your own images
• Test out some of the different display/interaction options Slick has

Next Steps

• Suggested class sequences
• Read Up!
  • JavaScript & jQuery by Jon Duckett
  • jQuery API Documentation
• Practice!
  • Codeacademy jQuery Track
  • Treehouse jQuery Course
  • Code School jQuery Course
• Build Something!
  • FAQ list, gallery, quiz, calculator, or whatever else you can cook up!
• Write about your class experience, and send us a link! We can share to the Philly community, and maybe GDI national.

Questions?

Get Involved

1. Join Slack community
2. Teaching assist
3. Teach something
4. Mentor or be mentored

All forms here

Thank You!

Survey

We value your feedback and are always trying to improve.

http://bit.ly/gdi-philly-jquery

Get in touch!

@ivanaveliskova

ivanaveliskova@gmail.com