reading-notes

jQuery, Events, and The DOM

JavaScript and jQuery

Source: JavaScript and jQuery by Jon Duckett

Simplies common JS tasks with full browser compatibility.

• Select elements
• Perform tasks
• Handle events

Overview

Select elements

• jQuery()
• creates an object that holds reference to selected element
• One parameter: CSS selector
• $('li.hot') (More common shorthand)

Do something

• Use jQuery object methods
• $('li.hot').addClass('complete');

DOM Comparison

• Similiarities
  • Selectos perform tasks
  • Can store object in varaible, like DOM nodes
  • Can use methods/properties to manipulate DOM
• Differences
  • jQuery syntax simplier
  • Cross-browser, no need for fall back code
  • Event handling uses one method, works in all major browsers
  • Methods affect all selected, no need to loop
  • Methods for popular tasks like animation
  • Can apply multiple methods to selection

Using jQuery

• include in script tag above </body>
• Get from https://jquery.org
• Minified version is smaller but not readible
  • jquery-1.11.0.min.js

   <script src="js/jquery-1.11.0.js"></script>
   <script src="js/example.js"></script>
</body>

Example

$(':header').addClass('headline'); //selects all h1-h6 headings, adds headline class
$('li:lt(3)').hide().fadeIn(1500); //select first 3 list items. Hide them. Fade into view.
$('li').on('click', function(){ //set event listener on each list item. On click, remove it.
   $this.remove();
});

Important considerations

• Selecting will select all
• Retrieving info ill only come from the first element & its descendents
  • $('li').html() only retrieves html from first li
  • $('ul').text() retrieves the full list (because it includes descendents)
    • .text() will retrieve from all
  • Traverse or use more specific selector to target individual
• Setting data will apply to all (implicit iteration)
  • $('li').html('Updated') will apply to every list element
• jQuery object store reference, save to varaible acts as a cache if you need to reuse (more performant)

• You can chain methods

  $('#thing')
   .hide()
   .delay(500)
   .fadeIn(1400);
  

• Check if page is ready with .ready()

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

• Shorthand, secondary benefit of making variables function scoped
  • Common practice to wrap code in this so others aren’t limited in where script in added in html

  $(function(){
     // your code
  });
  

Updating Elements

• .text()
• .html()
• .replaceWith()
• .remove()

You can use and amend content by passing in a function as a param

$('li.hot').html(function(){
   return '<em>' + $()this.text() + '</em>';
});

Inserting Elements

1. Create new element in jQuery object
   • let $newElement = $('<li>') creates an empty list element assigned to $newElement
2. Add to page
   • .before()
   • .after()
   • .prepend() / .appendTo()
   • .append() / .prependTo()

Getting and setting values/attributes

• .attr()
  • To get: $('li#one').attr('id');
  • To set: $('li#one').attr('id', 'hot')
• .removeAttr()
• .addClass()
• .removeClass()

Getting and setting CSS properties

Getting

var backgroundColor = $('li').css('background-color');

Setting

$('li').css('background-color', '#272727');

// += to increase/decrease pixels
$('li').css('padding-left', '+=20');

//multiple properties w/ object literal
$('li').css({
   'background-color': '#272727',
   'font-family': 'Courier'
});

Iteration / .each()

Perform one/more statement on each object in a selection (like a loop)

// run on all list elements
$('li').each(function(){ //anonymous function as param
   var ids = this.id; // access id property of each li
   $(this).append(' <span class ="order">' + ids + '</span>'); //add new <span> after each li with its id listed
   //using $(this) here creates a jQuery object so you can use .append() method
});

Events / .on()

Handle all events! As usual, use a selector to create jQuery selection. Use .on() to indicate event to respond to.

$('li').on('click', function(){ //select all list elements, assign click handler, pass in anonymous function
   $(this).addClass('complete'); //when clicked, add complete class
});

.on() has two optional properties

• filter initial jQuery selection (respond only to subset)
• Pass extra info w/ object literal notiation to event handler

.on(events[, selector][, data], function(e));

Delegating events

• Event will run on all list items except the one with id #four
• Writes out content of element interacted with in a status message (using data property and event type)
• Info passed into data propert uses object literal to handle multiple properties

$(function(){
   var listItem, itemStatus, eventType;

   $('ul').on(
      'click mouseover',
      ':not(#four)',
      {status: 'important'},
      function(e) {
         listItem = 'Item: ' + e.target.textContent + '<br />';
         itemStatus = 'status: ' + e.data.status + '<br />';
         eventType = 'Event: ' + e.type;
         $('#notes').html(listItem + itemStatus + eventType);
      }
   );
});

Event objects

Event handling functions recieve object event w/ methods & properties of the event

   $('li').on('click', function(e){ //give the event object a name!
      eventType = e.type; //get the type of the event!
   });

Including the script

Pattern to load from a CDN

• First, tries to load file from CDN
• Then, checks to see if jQuery is loaded. If not, browser tries from the site server as a backup

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>
window.jQuery || document.write('<script src="js/jquery-1.10.2.js"></script>')
</script>

Where to place?

• Old school: <head> but this makes the page slow to load
• Better to put right below </body> so page rendering unaffected

6 Reasons for Pair Programming

Source: https://www.codefellows.org/blog/6-reasons-for-pair-programming/

Pair programming is the practice of 2 developers working together. One will “drive”: write the code; and one will “navigate”: provide ideas and feedback.

1. Greater Efficiency
   • Slightly slower, but better code so it’s faster long term.
2. Engaged collaboration
   • Increases focus (less likely to procrastinate/get off task)
   • Help avaliable, prevents blocks
3. Learning from fellow students
   • Learn new approaches to solving problems
   • Learn new skill sets
4. Social skills
   • Improves communication skill
   • Long term career benefit
5. Job interview readiness
   • Pair programming used in interviews
6. Work environment readiness
   • Many companies use pair programming

Back