netguru friday talks part one

1. netguru friday talks :)
Modern JavaScript
Jquery Framework,
UnObtrusive Javascript

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. Datatyping
Element = new Array('asd' , 'asdasd');
if(typeof (element) == 'object') TRUE (!!!)
if(element.constructor == Object) FALSE

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. 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. 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. Closures
SetTimeout('function()', 1000);
SetTimeout('function('+par1+')', 1000);
setTimeout(function(){
}, 1000);
-----------------------------------------------
(function($){
// $ $ $
})(jQuery);

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. 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. PreventDefault()
// ! alt / !title
$('img').mouseover(function(e){
e.preventDefault();
// MSIE: window.event.returnValue = false;
});

11. jQuery is cool :)
var every = document.getElementById(
quot;everywherequot; );
every.parentNode.removeChild( every );
=
$('#everywhere').remove();

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. Method Chaining
$('.jakaKlasa').each(function(){
$(this).bind('click', function(){});
$(this).css();
});
vs.
$('.jakasKlasa').bind(...).css(...);

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. 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. 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. Recomm'd plugins (2)
JQModal (overlays, modals under control)
Form
UI (tablesorter, tabs, accordion)
LiveQuery (auto re-bind events)

18. THX
Questions?
www.google.com
:)