Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

modern javascript, unobtrusive javascript, jquery

4,116 views

Published on

netguru friday talks part one

Published in: Technology
  • Be the first to comment

modern javascript, unobtrusive javascript, jquery

  1. 1. netguru friday talks :) Modern JavaScript Jquery Framework, UnObtrusive Javascript
  2. 2. Scope, context var str = 'str'; function myfunc3(){ str = 'str4'; }//str == str4 function myfunc1(){ var str = 'str2'; } //str == str function myfunc2(){ window.str = 'str3'; }//str == str3
  3. 3. Datatyping Element = new Array('asd' , 'asdasd'); if(typeof (element) == 'object') TRUE (!!!) if(element.constructor == Object) FALSE
  4. 4. Public methods //constructor function myfunc(arg1, arg2){ this.arg1 = arg1; this.arg2 = arg2; } myfunc.prototype.mymethod = function(){ return this.arg1; } var instance1 = new myfunc('asd', 'asd2'); instance1.mymethod == 'asd'
  5. 5. Setters, getters var user = new function User( properties ) { for ( var i in properties ) { User({k1:v1, (function(){ k2:v2}); this[ quot;getquot; + i ] = function() { user.setk1 = 10; return properties[i]; user.getk1 // 10; }; this[ quot;setquot; + i ] = function(val) { properties[i] = val; }; })(); } }
  6. 6. Call, Apply, Arguments function colorize(color){ this.style.color = color; } colorize.call($('#id')[0], 'white', arg2, arg3); colorize.apply($('#id')[0], []) function myfunc(arg1, arg2, arg3){ if(arguments.length==3) }
  7. 7. Closures SetTimeout('function()', 1000); SetTimeout('function('+par1+')', 1000); setTimeout(function(){ }, 1000); ----------------------------------------------- (function($){ // $ $ $ })(jQuery);
  8. 8. Closures (2) function say667() { var num = 666; var sayAlert = function() { alert(num); } num++; return sayAlert; } //667 function sayAlice() { var sayAlert = function() { alert(alice); } var alice = 'Hello Alice'; return sayAlert; }
  9. 9. Event Bubbling/Event Capturing 2 phases: capturing, bubbling <div><p>.........</p></div> $('div').click(function...); $('p').click(func...); capturing: document->body->div->....->p bubbling: p->....->div->body->document $('p').bind('click', function(e){ e.stopPropagation(); // = (MSIE) window.event.cancelBubble = true });
  10. 10. PreventDefault() // ! alt / !title $('img').mouseover(function(e){ e.preventDefault(); // MSIE: window.event.returnValue = false; });
  11. 11. jQuery is cool :) var every = document.getElementById( quot;everywherequot; ); every.parentNode.removeChild( every ); = $('#everywhere').remove();
  12. 12. (Totally) Unobtrusive Javascript OLD: <a onclick=””> <div class=hasAjax””> <a class=”ajaxlink”></a> <p class=”ajaxgallery”></p> </div> myjavascript.js if($('div.hasAjax').size()>0) { jQuery('a.ajaxlink').bind('click', function(){}); jQuery('p.ajaxgallery').load('.....'); }
  13. 13. Method Chaining $('.jakaKlasa').each(function(){ $(this).bind('click', function(){}); $(this).css(); }); vs. $('.jakasKlasa').bind(...).css(...);
  14. 14. JS Objects + jQuery var myProjectJS = { str : 'click the button', buttonize : function(what, css){ var obj = this; var opts = opts || {color:'black'}; var el = jQuery(what).each(function(){ // ! this.str jQuery(this).text(obj.str).css(css); }); }, arr : []}; myProjectJS.buttonize('.button'); var buttonize = myProjectJS.buttonize(); buttonize('.otherbutton',{fontWeight:'bold'}); //YAHOO.util.Event.addListener()
  15. 15. Plugins jQuery.fn.ourNewMethodName = function(params){ defparams = {par1: '#id'} params = jQuery.extend(deparams, params); return this.each(function(){ var ref = jQuery(this); /* */ }); } $('p').ourNewMethodName({par1: 'val1'}).jQueryMethod();
  16. 16. Recomm'd plugins (1) Metadata <a class=”ajaxload {target: '#container'}” href=””>click</a> jQuery('.ajaxload').click(function(e){ e.preventDefault(); var ref = jQuery(this); var data = ref.metadata(); data.target.load( ref.attr('href') ); });
  17. 17. Recomm'd plugins (2) JQModal (overlays, modals under control) Form UI (tablesorter, tabs, accordion) LiveQuery (auto re-bind events)
  18. 18. THX Questions? www.google.com :)

×