Beginning Javascript

Class 3

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

What is a library?

  • Software libraries hold functions (not books!)
  • When you include a library, you can use all the functions in that library
  • That means: you get to take advantage of other people's experience!
  • And... Save time!

What is jQuery?

jQuery is a library of JavaScript functions.

It contains many functions to help simplify your programming, including:

  • HTML element selection & manipulation
  • CSS manipulation
  • HTML events
  • JavaScript effects and animations

Why use jQuery?

  • The most popular JavaScript library
  • jQuery empowers you to "write less, do more."
  • Great documentation and tutorials
  • Used by nearly 20 million(!) websites

jQuery: A Brief History

  • jQuery was created by John Resig, a JavaScript tool developer at Mozilla.
  • January 2006: John announced jQuery at BarCampNYC: BarCampNYC Wrap-up
  • September 2007: A new user interface library is added to jQuery: jQuery UI: Interactions and Widgets
  • September 2008: Microsoft and Nokia announce their support for jQuery
  • December 2009: jQuery wins .Net Magazine's Award for Best Open Source Application

Including jQuery

Two ways to include jQuery on your page:
Download the library, store it locally: 

  <head>
    <script type="text/javascript" src="jquery.js"></script>
  </head>
Include the the live library: 

  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">
    </script>
  </head>
Note: live code can change! It's always best to download

jQuery Selectors

Remember document.getElementById() and documet.getElementsByTagName()?

jQuery selectors let you get elements by:

  • Element name (div, p) 
    
      var divs = $("div"); // All divs on page
  • ID name (#mainpicture, #results) 
    
var img = $("#mainpicture"); //img with id mainpicture
  • Class name (.result, .picture) 
    
var images = $(".picture"); //All images with class picture

jQuery Actions

jQuery has hundreds of actions that can be performed on any element

All the actions are methods

As methods they are called with dot notation

Action format 

        $(selector).action();

Updating attributes and css


  <img id="mainpicture" src="http://girldevelopit.com/assets/pink-logo.png">
Attribute get and set 

  var img = $('#mainpicture');
  img.attr('src');
  img.attr('src', 'http://girldevelopit.com/assets/pink-logo.png');
CSS property get and set 

  var img = $('#mainpicture');
  img.css('width');
  img.css('width', '200px');

Updating values and html


  <div id = "results">Boo!</div>
Get and set html value 

  var div = $('#results');
  div.html();
  div.html('New html!');

Append and Prepend


  <div id = "results">Boo!</div>
Append html 

    var div = $('#results');
    div.append('Additional html');
Prepend html 

    var div = $('#results');
    div.prepend('Additional html (on top)');

Creating new element


    var newDiv = $('<div></div>');
Seriously. That's it!

Let's Develop It!

Try to convert last week's DOM interaction into jQuery.

Don't forget to include jQuery in your html head!

Document Ready

Webpages take time to load

Almost always, you don't want the JavaScript to be called until the page is loaded

Document ready is a method called when the page is loaded 

        $(document).ready(function(){
          
        });
Note: The function() inside is an "anonymous function". It has no name, but still performs like a function.

Questions?

?