SlideShare une entreprise Scribd logo
1  sur  62
Télécharger pour lire hors ligne
JQUERY SANS
JQUERYRaphaël Rougeron / @goldoraf
JAVASCRIPT IL Y A 10 ANS
2006
JQUERY AUJOURD'HUI
92,2%
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
POLYFILLING
if ('querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window) {
// Go!
} else {
// Polyfill all the things...
}
jQuery sans jQuery
MODERNIZR
if (Modernizr.localStorage) {
// Go!
} else {
// Polyfill all the things...
}
jQuery sans jQuery
jQuery sans jQuery
PREMIER EXEMPLE
$("button.continue").html("Next Step...")
DOCUMENT
getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
document.querySelector
>= 8 >= 3.5 >= 1 >= 3.2 >= 10
jQuery sans jQuery
jQuery sans jQuery
$("button.continue").html("Next Step...");
document.querySelector("button.continue")
.innerHTML = "Next Step...";
Et que se passe t-il si le sélecteur ne correspond à aucun
élément ?
$("button.continue").html("Next Step...");
document.querySelector("button.continue")
.innerHTML = "Next Step...";
Uncaught TypeError: Cannot set property 'innerHTML' of
null
DEUXIÈME EXEMPLE
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function(event) {
hiddenBox.show();
});
addEventListener
var hiddenBox = document.getElementByID("#banner-message");
document.querySelector("#button-container button")
.addEventListener("click", function(event) {
hiddenBox.setAttribute("style", "display: block");
}, false);
addEventListener
>= 9 >= 1 >= 1 >= 1 >= 7
jQuery sans jQuery
PLUS VERBEUX ?
var $ = document.querySelector.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function(event) {
hiddenBox.setAttribute("style", "display: block");
});
Element.className
hiddenBox.className += ' hidden';
hiddenBox.className.replace('hidden', '');
Element.classList
hiddenBox.classList.add('hidden');
hiddenBox.classList.remove('hidden');
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function(event) {
hiddenBox.classList.toggle('hidden');
});
Element.classList
>= 10 >= 3.6 >= 8 >= 5.1 >= 11.5
insertAdjacentHTML
$('#box').before('<p>Test</p>');
$('#box').after('<p>Test</p>');
$('#box').append('<p>Test</p>');
$('#box').prepend('<p>Test</p>');
$('#box').insertAdjacentHTML('beforebegin', '<p>Test</p>');
$('#box').insertAdjacentHTML('afterend', '<p>Test</p>');
$('#box').insertAdjacentHTML('beforeend', '<p>Test</p>');
$('#box').insertAdjacentHTML('afterbegin', '<p>Test</p>');
DocumentFragment
var tags = ['foo', 'bar', 'baz'],
fragment = document.createDocumentFragment();
tags.forEach(function(tag) {
var li = document.createElement('li');
li.textContent = tag;
fragment.appendChild(li);
});
var ul = document.querySelector('ul');
ul.appendChild(fragment);
TABLE API
insertRow()
deleteRow()
insertCell()
deleteCell()
createCaption()
deleteCaption()
createTHead()
...
TROISIÈME EXEMPLE
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function(data) {
$("#weather-temp").html("<strong>" + data + "</strong> degrees");
}
});
XMLHttpRequest
var xhr = new XMLHttpRequest(),
data = [],
rawData = {
zipcode: 97201
};
for (var k in rawData) {
data.push(encodeURIComponent(k)
+ "=" + encodeURIComponent(rawData[k]));
}
xhr.open("GET", "/api/getWeather");
xhr.onload = function () {
document.querySelector("#weather-temp")
.innerHTML = "<strong>" + xhr.response
+ "</strong> degrees";
};
xhr.send(data.join("&"));
XMLHttpRequest et
FormData
var xhr = new XMLHttpRequest(),
data = new FormData(),
rawData = {
zipcode: 97201
};
for (var k in rawData) {
data.append(k, JSON.stringify(rawData[k]));
}
xhr.open("GET", "/api/getWeather");
xhr.onload = function () {
document.querySelector("#weather-temp")
.innerHTML = "<strong>" + xhr.response
+ "</strong> degrees";
};
xhr.send(data);
XMLHttpRequest et
FormData
var xhr = new XMLHttpRequest(),
data = new FormData(document.querySelector("#zipcode"));
xhr.open("GET", "/api/getWeather");
xhr.onload = function () {
document.querySelector("#weather-temp")
.innerHTML = "<strong>" + xhr.response
+ "</strong> degrees";
};
xhr.send(data);
FormData
>= 10 >= 4 >= 7 >= 12 >= 5
CALLBACK HELL
$('#demo5').animo("rotate", { degrees:90 }, function(e) {
e.element.animo( { animation: "flipOutX", keep: true } );
$('#demo6').animo("rotate", { degrees:90 }, function(e) {
e.element.animo( { animation: "flipOutY", keep: true } );
$('#demo7').animo("rotate", { degrees:90 }, function(e) {
e.element.animo( { animation: "flipOutX", keep: true } );
$('#demo8').animo("rotate", { degrees:90 }, function(e){
e.element.animo( { animation: "flipOutY", keep: true } );
});
});
});
});
JQUERY DEFERREDS
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
}
})
.done(function(data) {
$("#weather-temp").html("<strong>" + data + "</strong> degrees");
})
.fail(function() {
alert("error");
});
PROMISES/A+
getTweetsFor("goldoraf", function (err, results) {
...
});
var promiseForTweets = getTweetsFor("goldoraf");
promiseForTweets.then(function(results) {
...
});
then(fulfilledHandler, errorHandler, progressHandler)
PROMISES & XHR
function request(type, url, data) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest;
xhr.addEventListener("error", reject);
xhr.addEventListener("load", resolve);
xhr.open("GET", url);
xhr.send(null);
});
}
RÉSULTAT FINAL
request("GET", "/api/getWeather", data)
.then(function(result) {
document.querySelector("#weather-temp")
.innerHTML = "<strong>" + result
+ "</strong> degrees";
});
CALLBACK HELL
PROMISE HEAVEN
$('#demo5').animo("rotate", { degrees:90 })
.then(function(e) {
e.element.animo({ animation: "flipOutX", keep: true });
return $('#demo6').animo("rotate", { degrees:90 });
})
.then(function(e) {
e.element.animo({ animation: "flipOutY", keep: true });
return $('#demo7').animo("rotate", { degrees:90 });
})
.then(function(e) {
e.element.animo({ animation: "flipOutX", keep: true });
return $('#demo8').animo("rotate", { degrees:90 });
})
.then(function(e){
e.element.animo({ animation: "flipOutY", keep: true });
});
ANIMATIONS
$("#book").animate({
left: "+=50"
}, 5000, function() {
// Animation complete.
});
requestAnimationFrame
>= 10 >= 4 >= 10 >= 6 >= 15
requestAnimationFrame
var start = null,
d = document.getElementById("#book");
function step(timestamp) {
var progress;
if (start === null) start = timestamp;
progress = timestamp - start;
d.style.left = Math.min(progress/100, 50) + "px";
if (progress < 5000) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
http://www.html5rocks.com/en/tutorials/speed/rendering/
TRANSITIONS CSS3
Hello
button.foo {
font-size: 40px;
background: #C9C9C9;
transition-property: background;
-moz-transition-property: background;
-webkit-transition-property: background;
-o-transition-property: background;
transition-duration: 500ms;
-webkit-transition-duration: 500ms;
}
button.foo:hover {
background: #959595;
color: #FFF;
}
ANIMATIONS CSS3
Hello
@keyframes 'my-animation' {
0% { background: #C9C9C9; }
50% { background: #61BE50; }
100% { background: #C9C9C9; }
}
button.bar:hover {
background: #959595;
color: #FFF;
animation-name: 'my-animation';
animation-duration: 2s;
animation-iteration-count: infinite;
}
transitionend
function whichTransitionEvent(el){
var t,
transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
transitionend
var transitionEnd = whichTransitionEvent(element);
element.addEventListener(transitionEnd, function(event) {
// on déclenche l'animation suivante !
element.classList.add('expand');
});
jQuery sans jQuery
WEB COMPONENTS
UNMODÈLEDECOMPOSANTPOURLE
WEB
TEMPLATES
<template id="commentTemplate">
<div>
<img src="">
<div class="comment-text"></div>
</div>
</template>
var tpl = document.querySelector("#commentTemplate");
tpl.content.querySelector(".comment-text").innerHTML = ...;
document.body.appendChild(tpl.content.cloneNode(true));
DECORATORS
<decorator id="modal-controls">
<template>
<section>
<header>
<a id="toggle" href="#">Maximize</a>
<a id="close" href="#">Close</a>
</header>
<content></content>
</section>
</template>
</decorator>
.my-modal {
decorator: url(#modal-controls);
}
CUSTOM ELEMENTS
<element extends="button" name="my-button" attributes="foo bar">
<template>...</template>
<script> </script>
</element>
...
SHADOW DOM
HTML IMPORTS
<link rel="import" href="my-component.html">
WEB COMPONENTS
AVECX-TAG
>= 9 >= 5 >= 4 >= 4 >= 11
UN EXEMPLE ?
<browser-compat
ie="9"
ff="5"
cr="4"
sa="4"
op="11" />
UN EXEMPLE ?
<polymer-element name="browser-compat"
attributes="ie ff cr sa op">
<template>
<style> </style>
<table class="browser-compat">
<tr>
<td><img src="images/ie.png" /></td>
...
</tr>
<tr>
<td class="{{ie_class}}">>= {{ie}}</td>
...
</tr>
</table>
</template>
<script> </script>
</polymer-element>
...
...
UN EXEMPLE ?
Polymer('browser-compat', {
created: function() {
switch(parseInt(this.ie)) {
case 10:
this.ie_class = 'red';
break;
case 9:
this.ie_class = 'yellow';
break;
default:
this.ie_class = 'green';
break;
}
}
});
CODEZ POUR LE FUTUR !
Copyright Steve Thomas Art & Illustration, LLC

Contenu connexe

Tendances

Palestra PythonBrasil[8]
Palestra PythonBrasil[8]Palestra PythonBrasil[8]
Palestra PythonBrasil[8]Thiago Da Silva
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for MobileIvano Malavolta
 
Here's the Downtown Sound lineup for 2015
Here's the Downtown Sound lineup for 2015Here's the Downtown Sound lineup for 2015
Here's the Downtown Sound lineup for 2015chicagonewsyesterday
 
Jak zabít několik much jednou ranou přechodem na fragmenty
Jak zabít několik much jednou ranou přechodem na fragmentyJak zabít několik much jednou ranou přechodem na fragmenty
Jak zabít několik much jednou ranou přechodem na fragmentyDavid Vávra
 
Javascript技巧参考大全
Javascript技巧参考大全Javascript技巧参考大全
Javascript技巧参考大全fgghyyfk
 
Semana 12 interfaces gráficas de usuario
Semana 12   interfaces gráficas de usuarioSemana 12   interfaces gráficas de usuario
Semana 12 interfaces gráficas de usuarioTerryJoss
 
Mantto con vb2010
Mantto con vb2010Mantto con vb2010
Mantto con vb2010tihuilo
 
Developing an Android REST client to determine POI using asynctask and integr...
Developing an Android REST client to determine POI using asynctask and integr...Developing an Android REST client to determine POI using asynctask and integr...
Developing an Android REST client to determine POI using asynctask and integr...Somenath Mukhopadhyay
 
Documentacion edderson callpa_ortiz
Documentacion edderson callpa_ortizDocumentacion edderson callpa_ortiz
Documentacion edderson callpa_ortizEdderson J. Ortiz
 
KvZ Web Tasarım Hizmetleri
KvZ Web Tasarım HizmetleriKvZ Web Tasarım Hizmetleri
KvZ Web Tasarım HizmetleriAhmet Öztaş
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designersJohan Ronsse
 
Dennis zapana perez
Dennis zapana perezDennis zapana perez
Dennis zapana perezdennis_elvis
 
Skaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant ParkSkaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant Parkchicagonewsyesterday
 
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2André Tapia
 

Tendances (19)

Blog 4
Blog 4Blog 4
Blog 4
 
Palestra PythonBrasil[8]
Palestra PythonBrasil[8]Palestra PythonBrasil[8]
Palestra PythonBrasil[8]
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for Mobile
 
Here's the Downtown Sound lineup for 2015
Here's the Downtown Sound lineup for 2015Here's the Downtown Sound lineup for 2015
Here's the Downtown Sound lineup for 2015
 
Blog 3
Blog 3Blog 3
Blog 3
 
Jak zabít několik much jednou ranou přechodem na fragmenty
Jak zabít několik much jednou ranou přechodem na fragmentyJak zabít několik much jednou ranou přechodem na fragmenty
Jak zabít několik much jednou ranou přechodem na fragmenty
 
Javascript技巧参考大全
Javascript技巧参考大全Javascript技巧参考大全
Javascript技巧参考大全
 
Index2
Index2Index2
Index2
 
Semana 12 interfaces gráficas de usuario
Semana 12   interfaces gráficas de usuarioSemana 12   interfaces gráficas de usuario
Semana 12 interfaces gráficas de usuario
 
Tools20121015
Tools20121015Tools20121015
Tools20121015
 
Mantto con vb2010
Mantto con vb2010Mantto con vb2010
Mantto con vb2010
 
Developing an Android REST client to determine POI using asynctask and integr...
Developing an Android REST client to determine POI using asynctask and integr...Developing an Android REST client to determine POI using asynctask and integr...
Developing an Android REST client to determine POI using asynctask and integr...
 
Documentacion edderson callpa_ortiz
Documentacion edderson callpa_ortizDocumentacion edderson callpa_ortiz
Documentacion edderson callpa_ortiz
 
Best Fried Chicken
Best Fried ChickenBest Fried Chicken
Best Fried Chicken
 
KvZ Web Tasarım Hizmetleri
KvZ Web Tasarım HizmetleriKvZ Web Tasarım Hizmetleri
KvZ Web Tasarım Hizmetleri
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
 
Dennis zapana perez
Dennis zapana perezDennis zapana perez
Dennis zapana perez
 
Skaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant ParkSkaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant Park
 
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2
 

En vedette

LNUG - A year with AWS
LNUG - A year with AWSLNUG - A year with AWS
LNUG - A year with AWSAndrew Clarke
 
Protecting Your SsaSets 01.07.10
Protecting Your SsaSets 01.07.10Protecting Your SsaSets 01.07.10
Protecting Your SsaSets 01.07.10michael keyes
 
Lionel Barzon III: Four Digital Skills For Your Career
Lionel Barzon III: Four Digital Skills For Your CareerLionel Barzon III: Four Digital Skills For Your Career
Lionel Barzon III: Four Digital Skills For Your CareerLionel Barzon III
 
Aplicación CRM Analytics (spanish)
Aplicación CRM Analytics (spanish)Aplicación CRM Analytics (spanish)
Aplicación CRM Analytics (spanish)Stratebi
 
Boletin Septiembre - Destacan trabajo del CNE en procesos electorales
Boletin Septiembre - Destacan trabajo del CNE en procesos electorales Boletin Septiembre - Destacan trabajo del CNE en procesos electorales
Boletin Septiembre - Destacan trabajo del CNE en procesos electorales Dra. Roxana Silva Ch.
 
2011년도 원광대학교 컴퓨터공학과 소개자료
2011년도 원광대학교 컴퓨터공학과 소개자료2011년도 원광대학교 컴퓨터공학과 소개자료
2011년도 원광대학교 컴퓨터공학과 소개자료창여 김창여
 
25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic DesignerLogo Design Guru
 
A Creative Design Agency & Printing Press
A Creative Design Agency & Printing Press A Creative Design Agency & Printing Press
A Creative Design Agency & Printing Press KS Designers
 
"Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus...
"Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus..."Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus...
"Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus...Sherry Jones
 
Ley creacion escuelas
Ley creacion escuelasLey creacion escuelas
Ley creacion escuelasLaura Marrone
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperiencePeter Rozek
 
Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...
Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...
Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...Dra. Roxana Silva Ch.
 

En vedette (17)

LNUG - A year with AWS
LNUG - A year with AWSLNUG - A year with AWS
LNUG - A year with AWS
 
Protecting Your SsaSets 01.07.10
Protecting Your SsaSets 01.07.10Protecting Your SsaSets 01.07.10
Protecting Your SsaSets 01.07.10
 
Lionel Barzon III: Four Digital Skills For Your Career
Lionel Barzon III: Four Digital Skills For Your CareerLionel Barzon III: Four Digital Skills For Your Career
Lionel Barzon III: Four Digital Skills For Your Career
 
Aplicación CRM Analytics (spanish)
Aplicación CRM Analytics (spanish)Aplicación CRM Analytics (spanish)
Aplicación CRM Analytics (spanish)
 
Twitter työkäytössä
Twitter työkäytössäTwitter työkäytössä
Twitter työkäytössä
 
Git Quick Intro
Git Quick IntroGit Quick Intro
Git Quick Intro
 
El periodico en el aula
El periodico en el aula El periodico en el aula
El periodico en el aula
 
Boletin Septiembre - Destacan trabajo del CNE en procesos electorales
Boletin Septiembre - Destacan trabajo del CNE en procesos electorales Boletin Septiembre - Destacan trabajo del CNE en procesos electorales
Boletin Septiembre - Destacan trabajo del CNE en procesos electorales
 
2011년도 원광대학교 컴퓨터공학과 소개자료
2011년도 원광대학교 컴퓨터공학과 소개자료2011년도 원광대학교 컴퓨터공학과 소개자료
2011년도 원광대학교 컴퓨터공학과 소개자료
 
25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer
 
A Creative Design Agency & Printing Press
A Creative Design Agency & Printing Press A Creative Design Agency & Printing Press
A Creative Design Agency & Printing Press
 
"Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus...
"Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus..."Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus...
"Machinima: Symbiosis of the Participatory Digital Culture and the Game Indus...
 
Ley creacion escuelas
Ley creacion escuelasLey creacion escuelas
Ley creacion escuelas
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
End to-end convolutional network for saliency prediction
End to-end convolutional network for saliency predictionEnd to-end convolutional network for saliency prediction
End to-end convolutional network for saliency prediction
 
Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...
Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...
Boletin Julio - Circunscripciones Electorales, actividades de democracia incl...
 
Save tiger
Save tigerSave tiger
Save tiger
 

Plus de goldoraf

Tester son JS, c'est possible !
Tester son JS, c'est possible !Tester son JS, c'est possible !
Tester son JS, c'est possible !goldoraf
 
Html5 : stockage local & synchronisation
Html5 : stockage local & synchronisationHtml5 : stockage local & synchronisation
Html5 : stockage local & synchronisationgoldoraf
 
Services web RESTful
Services web RESTfulServices web RESTful
Services web RESTfulgoldoraf
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versiongoldoraf
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Forum PHP 2007 - Methodes Agiles
Forum PHP 2007 - Methodes AgilesForum PHP 2007 - Methodes Agiles
Forum PHP 2007 - Methodes Agilesgoldoraf
 

Plus de goldoraf (7)

Tester son JS, c'est possible !
Tester son JS, c'est possible !Tester son JS, c'est possible !
Tester son JS, c'est possible !
 
Ember.js
Ember.jsEmber.js
Ember.js
 
Html5 : stockage local & synchronisation
Html5 : stockage local & synchronisationHtml5 : stockage local & synchronisation
Html5 : stockage local & synchronisation
 
Services web RESTful
Services web RESTfulServices web RESTful
Services web RESTful
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de version
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Forum PHP 2007 - Methodes Agiles
Forum PHP 2007 - Methodes AgilesForum PHP 2007 - Methodes Agiles
Forum PHP 2007 - Methodes Agiles
 

jQuery sans jQuery