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.

HTML events

Events occur on a webpage via user interaction

Common Events:

  • mouseenter -- mouse goes inside an element
  • mouseleave -- mouse leaves an element
  • click -- mouse clicks an element
  • Other events

Handling events


  $(selector).mouseenter(function(){
    //code when the mouse enters
  })
      

  $('.box').mouseenter(function(){
    $(this).css('background-color', 'purple')
  })
The $(this) selector in jQuery refers to the element on whom the action was called.
Here $(this) is the $('.box') that the mouse entered.

Handling event examples


      $('.box').mouseenter(function(){
        $(this).css('background-color', 'purple')
      })
            

      $('.box').mouseleave(function(){
        $(this).css('background-color', 'orange')
      })
          

      $('.box').click(function(){
        $(this).css('background-color', 'green')
      })

Combining events

If you want multiple events to happen on the same element, you should use the bind method


      $('.box').bind({
        click: function() {
          $(this).css('background-color', 'green')
        },
        mouseenter: function() {
          $(this).css('background-color', 'purple')
        },
        mouseleave: function(){
          $(this).css('background-color', 'orange')
        }
      });

Let's Develop It

  • Add a div to your html that is 100px by 200px
  • Bind events to the div in your javascript file
  • Don't forget to surround your events with document ready
  • Try to change size, color, or event the html inside the div
  • Bonus: change all the onclick events to jQuery click events

HTML forms

HTML Forms allow users to enter information


<form id ="about-me">
  <input type = "text" id = "name" placeholder = "Enter a name"/>
  <label>Do you like popcorn</label>
  Yes <input type = "radio" name = "popcorn" val = "yes"/>
  No <input type = "radio" name = "popcorn" val = "no"/>
  <label>Favorite Dinosaur</label>
  <select id = "dinosaur">
    <option value = "t-rex">Tyrannosaurus Rex</option>
    <option value = "tri">Triceratops</option>
    <option value = "stego">Stegosaurus</option>
    <option value = "other">Other</option>
  </select>
  <input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
</form>

HTML forms

HTML Forms allow users to enter information



Yes No


Values from Forms

You can use JavaScript to get values from a form


    $('#name').val();
    $('select#dinosaur').val();
    $('input:radio[name=popcorn]:checked').val();
Or set values of a form 

    $('#name').val('Mitch');
    $('select#dinosaur').val('stego');
    $('input:radio[name=popcorn]:checked').val('no');

Values from Forms

jQuery has an event for form submission


      $('#about-me').submit(function(event){
            //code to execute after submission
            return false;
        });
"return false" to prevent the form trying to submit to a server.

Let's Develop It

  • Choose one (or all!) of your functions made so far
  • i.e. lifetime supply, favorite things, or my friends
  • Create a form to send dynamic data to the function when you click the button
  • Don't forget to add parameters to your existing functions!

  • This is a little harder than all the other exercises.
  • Be creative!

Questions?

?