Submit Search
Upload
modern javascript, unobtrusive javascript, jquery
•
4 likes
•
1,110 views
Adam Zygadlewicz
Follow
netguru friday talks part one
Read less
Read more
Technology
Report
Share
Report
Share
1 of 18
Download now
Download to read offline
Recommended
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2
André Tapia
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Loïc Knuchel
ECMA2015 INSIDE
ECMA2015 INSIDE
Jun Ho Lee
Prof.js
Prof.js
uupaa
Working With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
es6.concurrency()
es6.concurrency()
Ingvar Stepanyan
Programa
Programa
jorjeale
9. CodeIgniter add
9. CodeIgniter add
Razvan Raducanu, PhD
Recommended
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2
André Tapia
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Loïc Knuchel
ECMA2015 INSIDE
ECMA2015 INSIDE
Jun Ho Lee
Prof.js
Prof.js
uupaa
Working With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
es6.concurrency()
es6.concurrency()
Ingvar Stepanyan
Programa
Programa
jorjeale
9. CodeIgniter add
9. CodeIgniter add
Razvan Raducanu, PhD
Custom agario skins
Custom agario skins
Yhonatan Quispe
Angularjs 개인견해
Angularjs 개인견해
학섭 오
Lenguaje de programación
Lenguaje de programación
aldair vizarreta
Lenguaje de programación
Lenguaje de programación
aldair vizarreta
Java script.trend(spec)
Java script.trend(spec)
dynamis
Функциональное реактивное программирование
Функциональное реактивное программирование
Dmitriy Kiriyenko
jQuery for designers
jQuery for designers
Johan Ronsse
Proyecto Final Android-SQLite
Proyecto Final Android-SQLite
José Antonio Sandoval Acosta
Event loops in java script 01 - stack
Event loops in java script 01 - stack
Vishnu Padmanabhan
Dwr实战
Dwr实战
yiditushe
Шаблоны проектирования 2
Шаблоны проектирования 2
Constantin Kichinsky
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Ontico
Collection pipeline par Mathieu Godart
Collection pipeline par Mathieu Godart
CocoaHeads France
Java Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
intive
exercise of basic computer programming.docx
exercise of basic computer programming.docx
miftah88
4.2. trasformers-filters-y-adapters
4.2. trasformers-filters-y-adapters
xavazque2
JQuery
JQuery
koji lin
EJEMPLOS DESARROLLADOS
EJEMPLOS DESARROLLADOS
Darwin Durand
Yohan jacobi gaussseidel_analisis
Yohan jacobi gaussseidel_analisis
Yohan Sidik
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
More Related Content
What's hot
Custom agario skins
Custom agario skins
Yhonatan Quispe
Angularjs 개인견해
Angularjs 개인견해
학섭 오
Lenguaje de programación
Lenguaje de programación
aldair vizarreta
Lenguaje de programación
Lenguaje de programación
aldair vizarreta
Java script.trend(spec)
Java script.trend(spec)
dynamis
Функциональное реактивное программирование
Функциональное реактивное программирование
Dmitriy Kiriyenko
jQuery for designers
jQuery for designers
Johan Ronsse
Proyecto Final Android-SQLite
Proyecto Final Android-SQLite
José Antonio Sandoval Acosta
Event loops in java script 01 - stack
Event loops in java script 01 - stack
Vishnu Padmanabhan
Dwr实战
Dwr实战
yiditushe
Шаблоны проектирования 2
Шаблоны проектирования 2
Constantin Kichinsky
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Ontico
Collection pipeline par Mathieu Godart
Collection pipeline par Mathieu Godart
CocoaHeads France
Java Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
intive
exercise of basic computer programming.docx
exercise of basic computer programming.docx
miftah88
4.2. trasformers-filters-y-adapters
4.2. trasformers-filters-y-adapters
xavazque2
JQuery
JQuery
koji lin
EJEMPLOS DESARROLLADOS
EJEMPLOS DESARROLLADOS
Darwin Durand
Yohan jacobi gaussseidel_analisis
Yohan jacobi gaussseidel_analisis
Yohan Sidik
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
What's hot
(20)
Custom agario skins
Custom agario skins
Angularjs 개인견해
Angularjs 개인견해
Lenguaje de programación
Lenguaje de programación
Lenguaje de programación
Lenguaje de programación
Java script.trend(spec)
Java script.trend(spec)
Функциональное реактивное программирование
Функциональное реактивное программирование
jQuery for designers
jQuery for designers
Proyecto Final Android-SQLite
Proyecto Final Android-SQLite
Event loops in java script 01 - stack
Event loops in java script 01 - stack
Dwr实战
Dwr实战
Шаблоны проектирования 2
Шаблоны проектирования 2
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Collection pipeline par Mathieu Godart
Collection pipeline par Mathieu Godart
Java Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
exercise of basic computer programming.docx
exercise of basic computer programming.docx
4.2. trasformers-filters-y-adapters
4.2. trasformers-filters-y-adapters
JQuery
JQuery
EJEMPLOS DESARROLLADOS
EJEMPLOS DESARROLLADOS
Yohan jacobi gaussseidel_analisis
Yohan jacobi gaussseidel_analisis
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
modern javascript, unobtrusive javascript, jquery
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 :)
Download now