I'm at the very beginning of starting to learn object-oriented programming patterns in JavaScript and PHP.  Up until now I've always coded in a purely functional pattern.  I'm doing a lot of reading, but I think what would really help me is being able to see a direct correlation between how my code is currently written and how it would be written in OO.Could someone explain to me how I could write something like this, which consists of several event functions, in an object-oriented fashion?(function ( $, window, document, undefined ) {setTimeout(function(){    $(document.body).append('<div id=instruction><div class=inner></div></div>');    $(document.getElementById('instruction')).animate({'opacity':1},1500);},400);$( document ).on( 'click', '*', function () {    $(document.getElementById('instruction')).animate({'opacity':0},1500,function(){        $(this).remove();    });});var l = document.getElementById('left');var r = document.getElementById('right');// Expand right section$('hr').on('click', function(){    $('article').show().removeClass('short').animate({'opacity':1}, function(){        $(this).find('p').show();        var m = $(document.getElementById('middle'));           var h = Math.max(l.offsetHeight,r.offsetHeight);        m.css({'height':h + 'px'});    });});$('#step2').on('click', function(){    $(this).remove();    $('<button id=shuffle>SHUFFLE</button>').appendTo('footer');});// remove list items$( document ).on( 'click', 'span', function () {    var subtract = $(this).parent().height();    $(this).parent().remove();    var m = $(document.getElementById('middle'));    var h = Math.max(l.offsetHeight,r.offsetHeight);    m.css({'height':h + 'px'});})// shuffle$( document ).on( 'click', '#shuffle', function () {    var ul = document.querySelector('ul');    for (var i = ul.children.length; i >= 0; i--) {        ul.appendChild(ul.children[Math.random() * i | 0]);    }});var load = false;$(window).resize(function(){    var m = $(document.getElementById('middle'));    if (load == false) { // only need to do this once        $.getJSON('',            function(e) { // load data from Google Spreadsheet                var t = 1,a,l;                for (var n = 0; n < e.feed.entry.length; n++) {                    a = e.feed.entry[n].gsx$name.$t;                    l = '<li class=list aria-role=list-item>' + a + '<span class=noselect aria-role=radio>remove</span></li>';                    $(ul).prepend(l);                }                t++            }        )        .success(function(){ // evaluate height, set vertical rule            var h = Math.max(l.offsetHeight,r.offsetHeight);            m.css({'height':h + 'px'});        })        .fail(function() { // load something even if there is no connection            var s = ['Lorem','ipsum'];            var a = s.length;            for (var i = 0; i < a; i++) {                l = '<li class=list>' + s[i] + '</li>';                $(ul).prepend(l);            }        });        $.getJSON('',            function(e) {                var t = 1,a,l;                for (var n = 0; n < e.feed.entry.length; n++) {                    a = e.feed.entry[n].gsx$paragraph.$t;                    l = '<p>' + a + '</p>';                    $(article).prepend(l);                }                t++            }        )    }    var h = Math.max(l.offsetHeight,r.offsetHeight);    m.css({'height':h + 'px'});    load = true;}).resize();})( jQuery, window, document );The code block is not really relevant beyond serving as an example for me, but its purpose is merely a test, visible here.  It consists of a 2-column layout with a border between the two. The middle border must always equal the tallest column and each columns height needed to be manipulable, with a secondary step to shuffle the order of the content on the left side.
Remove items, resize columns, shuffle a list
javascript;object oriented;functional programming