Unit 3 - Day 3

"Where things start to get, well, difficult..."

Peer Evals

http://bit.ly/inf-af

http://bit.ly/inf-hb

http://bit.ly/inf-t4

http://bit.ly/inf-w3

Anyone planning on attending or presenting at Open Source Festival?

3/20

Proposals needed.

CCI Day Signups 4/30

Not just attending, but presenting

UG Research Conference?

4/25 - 4/26

More Info

Moar?

Do you have any questions?

GitHub Questions

Midterm project critique criteria

What did you come up with?

Rank Top 5

Write Top 3

If tied, write 4th then 5th

My Midterm Grading Criteria

Individual Team Member Performance

• Your commit history.
• Completeness of your milestoned issues.
• How often did you participate in group discussions?
• Were you helpful if asked for help?
• Did you ask for help if you needed it?

JavaScript!!!11!!one!

var matches = function(el, selector) {
  var _matches = (el.matches || el.matchesSelector ||
  el.msMatchesSelector || el.mozMatchesSelector ||
  el.webkitMatchesSelector || el.oMatchesSelector);
if (_matches) { return _matches.call(el, selector);
  } else {
    var nodes = el.parentNode.querySelectorAll(selector);
    for (var i = nodes.length; i--;) {
      if (nodes[i] === el)
        return true;
    } return false; }
};
matches(el, '.my-class');

With jQuery

$(el).is('.my-class');

jQuery

It makes JavaScript easier.

jQuery

$

Find a DOM element

By CSS selector

$('.my-class');

Run a method on it

$('.my-class').html();

Run an instructional method on it

$('.my-class').fadeIn();

You can GET using methods

var myHtml = $('.my-class').html();

You can SET using methods

$('.my-class').html('<p>Hello World!</p>');

jQuery API

Use the Docs, Luke.

Make <div id="foo"> slide downward

$('#foo').slideDown();

Fade <div class="foo"> out, fast

$('.foo').fadeOut('fast');

Get the text value of <p class="foo">

$('.foo').text();

Two types of functions

Named

var eric = function() {};

eric();

Two types of functions

Anonymous

function() {};

Run within another function to execute immediately.

Run a function when you click <a class="foo">

Anonymous or named

$('.foo').click(function(){});

$('.foo').click(eric);

You can SET using functions, too

$('.my-class').html(function(){
    var myHtml = '<p>Hello World!</p>';
    return myHtml;
);

Run a function after the method completes

"callback"

$('.my-class').fadeIn("slow", function(){/*complete*/});

Click Events

$('.my-class').click(function(){});

Better Click Events

Event Delegation

$('.foo').on('click', '.my-class', function(){});

You can only map to click events in jQuery

1. True
2. False ★

Why is it better to use .on()?

1. Sometimes we don't only want a click to trigger our event. ★
2. You can only send data to .on() events.
3. Touch-based mobile devices don't have a "click" method.
4. Handles elements not available on document.load. ★
5. You can only assign events to multiple targets with .on().

Even Better Click Events

$('.foo').on('click', '.my-class', function(e){
    e.preventDefault();
});

Run text() and fadeIn() on .foo

$('.foo').text();
$('.foo').fadeIn();

That's all well and good, but what about:

$('.foo').slideToggle('fast');
$('.foo').text();
$('.foo').html();
$('.foo').slideToggle('slow');
$('.foo').fadeIn();
$('.foo').click(function(e){e.preventDefault();});

Ch-Ch-Ch-Ch-Chaining!

$('.my-class')
    .slideToggle('fast')
    .text('moar!')
    .html(function(index, oldHtml){
        return oldHtml + ' Internetz!!';
    })
    .slideToggle('slow')
    .fadeIn(3000)
    .click(function(e){
        e.preventDefault();
        console.log('done!')});

Click Me

jQuery has lots of Built-in Methods

Lots and lots and lots and lots!

Add class "moar" to .foo

$('.foo').addClass('moar');

Remove class "moar" from .foo

$('.foo').removeClass('moar');

If .foo hasClass more, remove it.
If it doesn't, add it.

$('.foo').toggleClass('moar');

Change the text of .foo to "Hello, World!"

$('.foo').text('Hello, World!');

Assign the text of .foo to .bar

$('.bar').text($('.foo').text());

var fooText = $('.foo').text();
$('.bar').text(fooText);

Works exactly the same for HTML (except for HTML tags).

Get the value of .foo

var fooVal = $('.foo').val();

val() attr()

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. For everythign else, use attr()

Get the value of .foo append it to .bar

var fooVal = $('.foo').val();
$('.bar').append(fooVal);

before()
wrap(begin)
<span class="bar">prepend() <-- Content --> append()</span>
wrap(end)
after()

appendTo(), prependTo(), insertAfter(), insertBefore()

Setting, & setting multiple

$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

You can do this with the .css property too... but don't use add/remove/toggle class.

Fade .foo out over 2 seconds

$('.foo').fadeOut(2000);

fadeIn(), slideUp(), slideDown(), slideToggle()

Hide .foo

$('.foo').hide();

$('.foo').addClass('hidden');

Cut as much DOM manipulation as you can.

Given .foo find a .bar within it

$('.foo').find('.bar');

More performant than $('.foo .bar');

Ajax pull from http://google.com into .foo

$('.foo').load('http://google.com');

load() is a super quick AJAX request. Deeper AJAX will come later on

Mobile Device Remote Inspection Demo

iOS config

Android Config

Next Time on...

INF 362!

1. CSS3
2. Browser Compatbility
3. Progressive Enhancement

Mid Term Draft Due 3/24

No class next week.

Midterm due 3/31, not 4/7

My Midterm Requirements

• Based off Zurb Foundation 5
• Responsive Layout to "large", optimized for mobile
• Responsive Nav scales to "large"
• Responsive Images (interchange)
• Flow of app fully realized
• Content complete
• Uses SASS
  • Nesting, Variables, Scaffolding
  • Modifies at least 5 F5 variables
  • Makes use of at least 2 custom media query breakpoints
• Uses jQuery (custom, not just F5)
• Color scheme implemented
• Follows Google's HTML/CSS/JS styleguide

TODO: Next Class

Add Foundation 5 to your projects if you havent already

Foundation 5 Boilerplate (DON'T FORK, download)

• Start implementing lots of foundation bits and pieces
• Start thinking about and implementing larger screen sizes (medium/large)
• Easy to use Sublime Text Foundation 5 snippets
• a sample Sass architecture