Skip to content

Instantly share code, notes, and snippets.

@dcneiner

dcneiner/1-jq-uk-advanced.md Secret

Created April 16, 2013 20:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dcneiner/0c8505e1b19f804d628f to your computer and use it in GitHub Desktop.
Save dcneiner/0c8505e1b19f804d628f to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UK Advanced Training
Raw
1-jq-uk-advanced.md

jQuery UK Advanced jQuery Training

April 18, 2013

URL to this Gist: http://bit.ly/a2ukadvanced

Slides

Follow along with the presentation:

View Slides (Web)

  • Username: training
  • Password: g0jquery

Slides Downloads:

Download Slides (Zip)

Labs

Download training labs:

Download Labs

labs
└── events-traversal        ### Lab 1
    ├── index.html          # Interface that runs your code
    ├── lab.js              # >>Complete This File<<
    ├── lab.tests.html      # Unit Test Runner to run against your answers
    ├── lab.tests.js        # Units tests
    └── libs                # Supporting Libraries

└── minimize-setup          ### Lab 2
    ├── index.html          # Interface that runs your code
    ├── jquery.todolist.js  # Helper file for this lab
    ├── lab.js              # >>Complete This File<<
    ├── lab.tests.html      # Unit Test Runner
    ├── lab.tests.js        # Units tests
    └── libs                # Supporting Libraries

Requirements

You need some type of Text Editor for web development such as:

How did I do?

Please complete the following quick survey once our training is complete:

Trainer Feedback

Me - Doug Neiner

I work for:

appendTo, LLC

Raw
3-additional-resources.md

Additional Resources

Unit Testing

JavaScript

jQuery

Libraries & Plugins

  • Underscore.js for functional programming helper methods
  • QUnit for unit testing
  • Pavlov for behavior driven unit testing (Requires QUnit)
  • Mockjax for existing $.ajax applications
  • MockJSON for generation of JSON testing data
  • AmplifyJS for local storage, pub/sub, and advanced AJAX and Mocking support
  • PostalJS is a message bus for the front-end
  • doTimeout for extra control over JavaScript timers

Tools

  • JSFiddle is a nice social way to share, test, debug code
  • JSBin is another nice tool to share, test, debug code
  • JSLint for the original JavaScript code quality tool
  • JSHint for a less opinionated community driven fork of JSLint

Performance

Raw
events-traversal.js
(function ( $, lesson ){
lesson.eventsTraversal = {
exercise_0: function () {
// This is an example exercise. Use addClass to add "sample"
// to the HTML element
$( "html" ).addClass( "sample" );
},
exercise_1: function () {
// When the the .delete span is clicked, it should remove
// the parent li from the list. Use a single delegated event to accomplish this.
// After removing this item, trigger a custom "itemremoved" event on the `ul`
$( document ).on( "click", ".delete", function ( e ) {
var $li = $( this ).closest( "li" ),
$ul = $li.closest( "ul" );
$li.remove();
$ul.trigger( "itemremoved" );
});
},
exercise_2: function () {
// When the text box gains/loses focus, it should add/remove a "focus" class.
// Use delegated events to accomplish this
$( document ).on( "focusin focusout", "input[type=text]", function ( e ) {
$( this ).toggleClass( "focus", e.type === "focusin" );
});
},
exercise_3: function () {
// When the form is submitted, use the contents of the input to create a new todo
// If the contents are blank, nothing should happen
// After adding the item, trigger a custom event "itemadded" on the `ul`
// After adding the item, clear out the field and focus back on the field.
$( document ).on( "submit", "form", function ( e ) {
e.preventDefault();
var $form = $( this ),
$input = $form.find( "input[type=text]" ),
$ul = $form.closest( ".todo-list" ).find( "ul" ),
val = $input.val();
if ( !val ) {
return;
}
var html = "<li>" + val + " <span class='delete'>[X]</span></li>";
$ul.append( html );
$ul.trigger( "itemadded" );
$input.val( "" ).focus();
});
},
exercise_4: function () {
// Listen for the "itemadded/itemremoved" events
// and update the item count
$( document ).on( "itemadded itemremoved", ".todo-list", function () {
var $todoList = $( this ),
$ul = $todoList.find( "ul" ),
$count = $todoList.find( ".count" ),
count = $ul.children().length;
$count.html( count );
});
},
exercise_5: function () {
// Return a function that could be used as a custom filter callback
// It should test the text content of the element to see if it contains
// the word "Event"
return function ( i, el ) {
return /Event/.test( $( el ).text() );
};
}
};
}( jQuery, window.lesson = window.lesson || {} ));
Raw
minimize-setup.css
.clear-list { display: none; }
.has-todos .clear-list { display: block; }
Raw
minimize-setup.js
(function ( $, lesson ){
lesson.minimizeSetup = {
exercise_1: function () {
/*
Using a beacon event AND a one time initialization method,
setup the todo list as the user interacts with it
To setup the todo list, call "todoList()" on the jQuery wrapped element
Ex: $el.todoList() or $( domElement ).todoList()
*/
$( document ).on( "focusin", ".todo-list:not(.is-ready)", function () {
var $list = $( this );
// $list = $input.closest( ".todo-list" );
$list.todoList().addClass( "is-ready" );
$list.find( "input[type=text]" ).trigger( "focusin" );
});
},
exercise_2: function ( $todoListRoot ) {
/*
This exercise will be called each time todoList plugin is set up
Use this method to setup the state handling of the "clear" button
Initial state should be handled via CSS!
**Desired Functionality:**
The clear button should only be visible when there are items in the list
Remember, itemadded/itemremoved events are still triggered when the list is modified
*/
$todoListRoot.on( "itemadded itemremoved", function () {
var count = $todoListRoot.find( "li" ).length;
$todoListRoot.toggleClass( "has-todos", count > 0 );
});
},
exercise_3: function ( $todoListRoot ) {
/*
This exercise will be *also* be called each time todoList plugin is set up
Use this method to setup the clearing the list when the clear button is pressed
**Desired Functionality:**
The clear button should remove all items, and fire a single itemremoved event
*/
$todoListRoot.on( "click", ".clear-list", function () {
$todoListRoot.find( "li" ).remove();
$todoListRoot.trigger( "itemremoved" );
});
}
};
}( jQuery, window.lesson = window.lesson || {} ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment