Intro to jQuery

Class 1

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite decade?
    • My favorite decade: the 80s

What is a library?

A collection of reusable methods for a particular purpose.

A math library might have functions like:


            math.sum(array);
            math.pow(num, num);
            math.factorial(num);

What is a library?

Include a script tag to the library on your page

Call functions from that library


            <script src="http://imagine-it.org/math.js"></script>
            <script>
              var answer = math.sum(2, 2);
              alert(answer);
            </script>

Including JavaScript

Put scripts at the bottom


<!DOCTYPE html>
<html>
  <head>
    <title>My Sweet HTML</title>
    <link rel="stylesheet" href="stylesheets.css">
  </head>
  <body>
  
  <script src="scripts-go-here.js"></script>
  </body>
</html>

Read more: http://developer.yahoo.com/performance/rules.html#css_top

JavaScript Basics

Let's review

Variables, arrays and loops


  var wordArray = ['hamburgers', 'schnikes', 'holy crab'];
  for (var i=0; i < wordArray.length; i++) {
    console.log(wordArray[i]);
    console.log(i);
  };

Selecting and altering DOM elements


  var containerDiv = document.createElement('div');
  containerDiv.setAttribute('id', 'containerDiv');
  document.body.appendChild(containerDiv);

Let's Develop It!

In exercise 1, you'll turn a linked list of titles into a linked list with thumbnails, using JavaScript DOM manipulation and the functions from the youtube.JS library (read documentation).

Step by Step:

Why use libraries?

Don't reinvent the wheel.

Abstract on top of cross-browser differences.

Reasons to use jQuery
  • Data Manipulation
  • DOM Manipulation
  • Events
  • AJAX
  • Effects & Animation
  • HTML Templating
  • Widgets/Theming
  • Graphics/Charts
  • App Architecture

6 Reasons to use Libraries & Frameworks

jQuery: Why?

No library:


  var p = document.createElement('p');
  p.appendChild(document.createTextNode('Welcome!'));
  p.style.cssFloat = 'left';
  p.style.backgroundColor = 'red';
  p.className = 'special';
  document.querySelector('div.header').appendChild(p);

jQuery:


  var newP = $('<p>Welcome!</p>');
  newP.css({'float' : 'left', 
            'background-color': 'red'});
  newP.addClass('special');
  $('div.header').append(newP);

jQuery: Including

Download or link from an official CDN.

Then include using a <script> tag on the page.


  <script src="js/jquery.min.js"></script>
  <script>
    // Your custom code here
  </script>

Or be super prepared:


  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')>
  </script>

jQuery: the basics


      <p>Welcome to jQuery!</p>


      $('p').addClass('special');


      <p class="special">Welcome to jQuery!</p>

jQuery: the basics


                    $('p').addClass('special');


          $

The global jQuery function. Can also be "jQuery".


        ('p')

Finds DOM element(s) according to what's in the quotes. Returns a "jQuery collection."


 addClass('special')

Built-in jQuery method that adds the specified class to the collection. Read the docs here.

jQuery: Finding Elements

All CSS selectors are valid, plus more.
Read the docs.

With this HTML...


<p>Welcome!</p>
              

<div id="main">Welcome!</div>
              

<p class="intro">Welcome!</p>
              

<div id="main">
  <p class="intro">Welcome!</p>
</div>

We find it this way:


$('p');
              

$('#main');
              

$('.intro');
              

$('#main').find('.intro');
// or
$('#main .intro');

jQuery: Changing Elements

If we start with this HTML:


<a href="http://www.google.com">Google</a>

We can use this jQuery:


$('a').html('Yahoo!')
$('a').attr('href', 'http://www.yahoo.com')
$('a').css({'color': 'purple'})

And we'll get this:


<a href="http://www.yahoo.com" style="color:purple">Yahoo</a>

jQuery: Reading Elements

If we start with this HTML...


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

...We can find out lots of things about it:


  console.log($('a').html());

Yahoo!


  console.log($('a').attr('href'));

http://www.yahoo.com


  console.log($('a').css('color'));

purple

jQuery: Looping

Yahoo
Google


var links = $('a');
links.each(function() {
  var link = $(this);
  link.text(link.text() + '!');
});

Yahoo!
Google!

The DOM-Ready Event

Necessary to manipulate a document safely.


$(document).ready(function() {
  // Do everything
});

Is the same as:


$(function() {
  // Do everything
});

Read more: http://learn.jquery.com/using-jquery-core/document-ready/

Let's Develop It!

In exercise 2, you'll append video thumbnails like exercise 1 but with jQuery instead of native JavaScript.

Questions?

?