document.addEventListener('click', function(){
    var divs = document.getElementsByTagNme('div');
    for (var i = 0; i < divs.length; i++) {
        var div = divs[i];
        if (div.className.indexOf('box') > -1) {
            div.style.backgroundColor = 'red';
        }
    }    
}); 

$(document).click(function() {
    $('div.box').css('background-color', 'red');
}) 

$('.navbar a:active'); // I was a CSS selector
$(document);           // I was a JS object
$(function() { ... }); // I was a function
// But now we're all jQuery objects! 

$('.navbar a:active').css('background', 'green')
                     .html('I am an active link'); 

var $div = $('div');

// classes
$div.addClass('hello');
if ($div.hasClass('hello')) {
    $div.removeClass('world');
}

// css
$div.css('width', '100px');
$div.css({color: 'red', marginTop: '10px'});

// changing content
$div.html('This is some content.');
$div.append('This is some additional content.');
// prepend, after, ... 

for (var i = 0; i < 10; i++) {
    var $newBox = $('<div class="hello"></div>');
    $('body').append($newBox);
}

• click/dblclick
• focus/blur
• keydown/keyup/keypress
• mousedown/mouseup
• mouseover
• change
  
  

$('input').keypress(function(event) {
    console.log(event.which, 'key was pressed');
}) 

$.ajax({
  url: 'https://api.forecast.io/forecast/1b7f8a378848cf9eeaff18f73eaed6c5/40.4383,-79.997'
  dataType: 'jsonp',
  success: function(data) {
    var conditions = data.currently;
    var message = "In Pittsburgh, it's currently " + 
                   conditions.summary + " and " + 
                   conditions.temperature + " degrees."
    alert(message);
  }
});

1. SVG (Scalable Vector Graphics)
2. Canvas

1. Demo 1
2. Demo 2
3. Demo 3 (not Paper)

• Grid system
• Basic styling (fonts, buttons, etc.)
• Icons
• Page elements (alerts, navbars)
• Animated components (popups)

from Flask import *
app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, world!'

if __name__ == "__main__":
    app.run(debug=True) 

• Handle incoming data (POST/GET)
• Query services and return data (MySQL, APIs)
• Templating engines (data -> HTML)
• Session handling (remember temp data)
• Cookies (remember data longer)

var db = new Firebase('https://crashcourse.firebaseio.com/' + ROOM_ID);

db.on('child_added', function(child) {
    console.log(child.val());
});

db.push({message: 'Hello, world!'});