Week 8 | March 28, 2016

Intro to Frameworks: jQuery

Lesson Prep

  • Open: Class Website, Week 8
  • Open your tip calculator files in sublime
  • Open your website in sublime
  • Create a new directory called jquery-practice and an index.html file in that directory. Paste in the following code: 
    <!DOCTYPE html>
<html>
<head>
  <title>Week 8 - Intro to Frameworks</title>
</head>
<body>
  <h1 id="headline">jQuery Practice</h1>
  <ul id="list"></ul>
  <script>
  	var colors = ["red","blue","yellow","black","green"];
  </script>
</body>
</html>

Homework Review

Your Reset Function...

function resetCalc(){
  document.getElementById('bill').value = '';

  var percBtns = document.getElementsByClassName('tip-btn');
  for(var i=0; i < percBtns.length; i++){
    percBtns[i].checked = false;
  }

  var tipBox = document.getElementById('tipamount');
  tipBox.innerHTML = '$0.00';
}

Exercise: Radio Button Selection

What would you need to do to allow users to select only one radio button? Use Google!

Git Lab: branch

JavaScript vs. Frameworks

What are Frameworks?

  • Javascript is the native language that frameworks are written in.
  • Frameworks (or libraries) contain predefined functions for common JavaScript tasks that make writing JS more concise and organized.
  • The uses of frameworks are as varied as JavaScript itself.
  • Popular modern frameworks: jQuery, Underscore, D3, RequireJS, AngularJs, Backbone, YUI, Modernizr, etc.

Why jQuery?

  • It is still one of the most ubiquitous libraries and one you will likely come across should you continue programming and utilizing various digital tools.
  • It's fairly simple to learn and has many useful methods in front-end development - allowing us to easily manipulate the DOM.
  • It utilizes the same CSS selectors we've been working with.
  • It has a vast and vibrant registry of plug-ins that allow you to add bits of interactivity to your page fairly quickly.

Don't get Stuck...

...on jQuery

Even though we will mostly be working with it, I will introduce a couple other frameworks that operate similarly to jQuery. It's important that you remember that jQuery is not the only, and is not always the best, option for completing certain tasks.

Programming is about deciding what you want to do and then investigating the best option for getting it done.

How to Use a Framework

To access the methods and shortcuts of any library or framework, you have to have access to them on your page

Steps:

  • First, download the set of predefined functions, usually from the library's homepage.
  • Then we include the library on the page like any other script
  • Make sure the script tag that pulls in the library is on the page before any script you write that uses that library.

Exercise

jQuery Parts

jQuery Methods

  • A series of predefined events and effects that you can run on any jQuery selector
  • For example: jQuery('h1').click(); allows you to run a function when that element has been clicked
  • Refer to the documention for the methods that are available
  • Method syntax: .method();

jQuery Selectors

  • jQuery selects elements just like CSS
  • Remember, selectors can be tags, classes and IDs
  • CSS: h1 {}
  • jQuery: jQuery('h1')

Common Syntax

jQuery('selector').method(parameter);

or

jQuery('selector').method(function(){
  //your function code here
});

The Dollar Sign

To use jQuery, you have to declare when you are going to access the library. You can either write out jQuery before your selector or use the $ sign.

The ready Method

This method prevents your script from running until the page has loaded. It's best to wrap all your jQuery in this method to make sure all the elements you are targeting are on the page.

(In native JS this would be equivalent to window.onload)

The jQuery Wrapper

$(document).ready(function(){
  //your function code here
})

Let's dissect the wrapper...

$()

The Wrapper - The dollar sign calls the jQuery library and indicates that a jQuery method will be used on the element in the wrapper.

document

The Selector - the element that you are going to run your method on. This can be the page itself document or a tag 'h1', an ID '#idname' or class '.classname'

.ready()

The Method - whatever jQuery method you are running on the element you've specified. In this case we are running ready, which means to wait until the page is loaded before running the code.

function(){ }

The beginning of your function. The parenthese after function is where you can pass in other information that your function needs, if anything. The code you are going to run goes inside the curly brackets.

Exercise

  • Start your code by writing a wrapper with the ready method on your page.

Common Methods & Exercises

each

  • The each method is another way to write a for loop.
  • Syntax: $.each(yourArray,function(index,item){});
    • Inside the method you specify the array to loop through and the function you want to run on each.
    • The function takes two arguments: The first is the index of the item, the second is a name to reference each object in the array.
  • Exercise: Run an each loop on the colors array on your index.html page and log each item.

append

  • append is equivalent to appendChild in native JS.
  • Exercise: In your each loop, use append to add the colors in a list on your page.

css

  • This is a specific method that allows us to alter the style rules of an element via JavaScript.
  • The css method injects styles into the html inline, which will supersede most styles in your stylesheet.
  • Syntax: $('selector').css('property','value');
  • Getting values:
    $('selector').css('property'); will return the value of any property as defined in the stylesheet.
  • Exercise: Use css to change the color property on your headline.

html

  • This method changes the innerHTML property of any element.
  • Syntax: $('selector').html('<h2>Your New Subhead</h2>');
  • Exercise: Use html to change the headline on the page.

Chaining

You can run multiple methods on a single selector with jQuery. For example: $('h1').css('color','red').fadeOut(); will change the color of your headline and the fade it off the page.

A jQuery Tip Calculator

  • Open your tip calculator files from last class
  • Start a new branch in your tip-calculator repository called jquery.

Assignments

Reading

Definitions

In the Week 8 Dropbox, copy the file week8-definitions.docx and fill out the definitions for the terms and decribing the code. You'll need to use Google or the resources on the class website. Save your copy your folder in Week 8 in Dropbox.

jQuery Tip Calculator

  • In your newly created jquery branch, re-write your tip calulator, including the reset function, using jQuery
  • The functionality of the calculator should not change. You'll need to utilize methods like click, each, val and html.
  • and add / commit / push your work

Method Presentation

You will be assigned a jQuery method, which you will research and demonstrate to the class how to use it.

  • Check your Slack DM for the method assigned to you
  • Use git clone to grab the method-presentations repo.
  • Look up the method online.
  • Write out a explanation of the method and what it's used for and post in the class Slack channel.
  • Prepare a short demonstration for how to use it using the proper file in method-presenations as a starting point.