netguru friday talks :)



       Modern JavaScript
       Jquery Framework,
      UnObtrusive Javascript
Scope, context

var str = 'str';          function myfunc3(){
                            str = 'str4';
                  ...
Datatyping

Element = new Array('asd' , 'asdasd');
if(typeof (element) == 'object') TRUE (!!!)
if(element.constructor == O...
Public methods

//constructor
function myfunc(arg1, arg2){
  this.arg1 = arg1;
  this.arg2 = arg2;
}
myfunc.prototype.myme...
Setters, getters

                                          var user = new
function User( properties ) {
for ( var i in pr...
Call, Apply, Arguments

function colorize(color){
    this.style.color = color;
}
colorize.call($('#id')[0], 'white', arg2...
Closures

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

setTimeout(function(){

}, 1000);
-----...
Closures (2)
function say667() {
 var num = 666;
 var sayAlert = function() { alert(num); }
 num++;
 return sayAlert;
} //...
Event Bubbling/Event Capturing
2 phases: capturing, bubbling

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

// ! alt / !title

$('img').mouseover(function(e){
      e.preventDefault();
      // MSIE: window.event...
jQuery is cool :)

var every = document.getElementById(
  quot;everywherequot; );

every.parentNode.removeChild( every );
...
(Totally) Unobtrusive Javascript

OLD: <a onclick=””>

<div class=hasAjax””>
    <a class=”ajaxlink”></a>
    <p class=”aj...
Method Chaining


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

vs...
JS Objects + jQuery
var myProjectJS = {
   str : 'click the button',
   buttonize : function(what, css){
       var obj = ...
Plugins

jQuery.fn.ourNewMethodName =
  function(params){
  defparams = {par1: '#id'}
  params = jQuery.extend(deparams, p...
Recomm'd plugins (1)

Metadata
<a class=”ajaxload {target: '#container'}”
  href=””>click</a>

jQuery('.ajaxload').click(f...
Recomm'd plugins (2)

JQModal (overlays, modals under control)

Form

UI (tablesorter, tabs, accordion)

LiveQuery (auto r...
THX




        Questions?

      www.google.com

            :)
Upcoming SlideShare
Loading in …5
×

modern javascript, unobtrusive javascript, jquery

3,858 views
3,753 views

Published on

netguru friday talks part one

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,858
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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 :)

×