netguru friday talks :)

Modern JavaScriptJquery Framework,

UnObtrusive Javascript

Scope, context

var str = 'str';

function myfunc1(){var str = 'str2';

} //str == str

function myfunc2(){window.str = 'str3';

}//str == str3

function myfunc3(){str = 'str4';

}//str == str4

Datatyping

Element = new Array('asd' , 'asdasd');if(typeof (element) == 'object') TRUE (!!!)if(element.constructor == Object) FALSE

Public methods

//constructorfunction 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'

Setters, getters

function User( properties ) {for ( var i in properties ) {

(function(){this[ "get" + i ] = function() {return properties[i];};this[ "set" + i ] = function(val) {properties[i] = val;};})(); }

}

var user = new User({k1:v1, k2:v2});

user.setk1 = 10;user.getk1 // 10;

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)

}

Closures

SetTimeout('function()', 1000);SetTimeout('function('+par1+')', 1000);

setTimeout(function(){

}, 1000);-----------------------------------------------(function($){// $ $ $ })(jQuery);

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;}

Event Bubbling/Event Capturing2 phases: capturing, bubbling

<div><p>.........</p></div>$('div').click(function...); $('p').click(func...);

capturing: document->body->div->....->pbubbling: p->....->div->body->document

$('p').bind('click', function(e){e.stopPropagation();// = (MSIE) window.event.cancelBubble = true

});

PreventDefault()

// ! alt / !title

$('img').mouseover(function(e){e.preventDefault();// MSIE: window.event.returnValue = false;

});

jQuery is cool :)

var every = document.getElementById( "everywhere" );

every.parentNode.removeChild( every );

=

$('#everywhere').remove();

(Totally) Unobtrusive Javascript

OLD: <a onclick=””>

<div class=hasAjax””><a class=”ajaxlink”></a><p class=”ajaxgallery”></p>

</div>

myjavascript.jsif($('div.hasAjax').size()>0) {

jQuery('a.ajaxlink').bind('click', function(){});jQuery('p.ajaxgallery').load('.....');

}

Method Chaining

$('.jakaKlasa').each(function(){$(this).bind('click', function(){});$(this).css();

});

vs.

$('.jakasKlasa').bind(...).css(...);

JS Objects + jQueryvar 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()

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();

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') );

});

Recomm'd plugins (2)

JQModal (overlays, modals under control)

Form

UI (tablesorter, tabs, accordion)

LiveQuery (auto re-bind events)

THX

Questions?

www.google.com

:)