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

Note #

  • Slides are online: gdijs.talks.cmsmith.co
  • Full source of slides and excercizes: Git Hub
  • The code projects for each set of slide has a JSBin to help start
  • A comment on code formatting when we begin this excercise.

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 might you want to use?

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
  • It will make everything we did yesterday easier!

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

Linking to a library

  • You link to a library by using the <script> tag
  • <script> tags can go anywhere in the page; <head> or <body>
  • They used to go in the <head> tag
  • Now for performance they are placed at the end of <body>
  • If you inspect your JSBin document, you will see that is where you script is being placed.

Code

The script tag requires a "src" attribute. The value is the url to the file. It must have a closing tag


<html>
<head>
  <!-- links / meta / title tags -->
  <script src="http://online.com/path/ToSome/Library.js"></script>
</head>
<body>
  <!-- other content -->
  <script src="http://online.com/path/ToSome/Library.js"></script>
</body>
</html>
            

Local or Remote Scripts?

Local give you absolute control of the file

Remote means you don't have to keep a local copy. (Good for personal works)
cdnjs has hundreds you can use.

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 
                

CSS Selectors

  • Multiple attributes on the same element
    
    //All 'div's with both 'favorite' and 'dinosaur' classes
    $('div.favorite.dinosaur')
                
  • Child elements
    
    //All direct children that are 'p' tags of 'body'
    $('body > p')
                
  • Any decendent
    
    //Any 'span' contained by elements with the 'accent' class
    $('.accent span')
                

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!');
            
Better yet, just set the text!

  var div = $('#results');
  div.text();
  div.text('Really its just text!');
            

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/>');
            
Seriously. That's it!

What about attributes?


    $('<div/>', {class:'selected', text:'The answer'});
    //<div class="selected">The answer</div>
            
Seriously. That's it!

Let's Develop It!

Add the jQuery library to the page
http://code.jquery.com/jquery-2.1.1.min.js

Create elements, update their content, and append them using jQuery

Getting started
http://jsbin.com/locole/latest

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 () { //do stuff... } ) //Old school
$().ready( function () { /*do stuff...*/ } )         //Not recommended
$( function () { /*do stuff...*/ } )                 //Concise
            
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).on('mouseenter', function(){
    //code when the mouse enters
  })
      

  $('.box').on('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').on('mouseenter', function(){
        $(this).css('background-color', 'purple')
      });
            

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

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

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 (calculate) of your functions made so far
  • Create a form to send dynamic data to the function when you click the button
  • i.e. lifetime supply, favorite things, or my friends
  • Put id's or classes on your form elements so you can select them through jquery
  • Don't forget to add parameters to your existing functions!

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

Questions?

?