JQUERY SANS JQUERY Raphaël Rougeron

Transcription

1 JQUERY SANS JQUERY Raphaël Rougeron

2 JAVASCRIPT IL Y A 10 ANS

3 2006

4 JQUERY AUJOURD'HUI 92,2%

5

6

7

8

9

10 POLYFILLING if ('queryselector' in document && 'localstorage' in window && 'addeventlistener' in window) { // Go! } else { // Polyfill all the things... }

11

12 if (Modernizr.localStorage) { // Go! } else { // Polyfill all the things... } MODERNIZR

13

14

15 PREMIER EXEMPLE $("button.continue").html("next Step...")

16 DOCUMENT getelementbyid getelementsbytagname getelementsbyclassname queryselector queryselectorall

17 document.queryselector >= 8 >= 3.5 >= 1 >= 3.2 >= 10

18

19

20 $("button.continue").html("next Step..."); document.queryselector("button.continue").innerhtml = "Next Step...";

21 $("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?

22 Uncaught TypeError: Cannot set property 'innerhtml' of null

23 DEUXIÈME EXEMPLE var hiddenbox = $("#banner-message"); $("#button-container button").on("click", function(event) { hiddenbox.show(); });

24 addeventlistener var hiddenbox = document.getelementbyid("#banner-message"); document.queryselector("#button-container button").addeventlistener("click", function(event) { hiddenbox.setattribute("style", "display: block"); }, false);

25 addeventlistener >= 9 >= 1 >= 1 >= 1 >= 7

26

27 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"); });

28 Element.className hiddenbox.classname += ' hidden'; hiddenbox.classname.replace('hidden', '');

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

30 Element.classList >= 10 >= 3.6 >= 8 >= 5.1 >= 11.5

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

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

33 TABLE API insertrow() deleterow() insertcell() deletecell() createcaption() deletecaption() createthead()...

34 TROISIÈME EXEMPLE $.ajax({ url: "/api/getweather", data: { zipcode: }, success: function(data) { $("#weather-temp").html("<strong>" + data + "</strong> degrees"); } });

35 XMLHttpRequest var xhr = new XMLHttpRequest(), data = [], rawdata = { zipcode: }; 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("&"));

36 XMLHttpRequest et FormData var xhr = new XMLHttpRequest(), data = new FormData(), rawdata = { zipcode: }; 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);

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

38 FormData >= 10 >= 4 >= 7 >= 12 >= 5

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

40 JQUERY DEFERREDS $.ajax({ url: "/api/getweather", data: { zipcode: } }).done(function(data) { $("#weather-temp").html("<strong>" + data + "</strong> degrees"); }).fail(function() { alert("error"); });

41 PROMISES/A+ gettweetsfor("goldoraf", function (err, results) {... }); var promisefortweets = gettweetsfor("goldoraf"); promisefortweets.then(function(results) {... }); then(fulfilledhandler, errorhandler, progresshandler)

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

43 RÉSULTAT FINAL request("get", "/api/getweather", data).then(function(result) { document.queryselector("#weather-temp").innerhtml = "<strong>" + result + "</strong> degrees"; });

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

45 $("#book").animate({ left: "+=50" }, 5000, function() { // Animation complete. }); ANIMATIONS

46 requestanimationframe >= 10 >= 4 >= 10 >= 6 >= 15

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

48 TRANSITIONS CSS3 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; } Hello

49 ANIMATIONS 'my-animation' { 0% { background: #C9C9C9; } 50% { background: #61BE50; } 100% { background: #C9C9C9; } } button.bar:hover { background: #959595; color: #FFF; Hello } animation-name: 'my-animation'; animation-duration: 2s; animation-iteration-count: infinite;

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

51 transitionend var transitionend = whichtransitionevent(element); element.addeventlistener(transitionend, function(event) { // on déclenche l'animation suivante! element.classlist.add('expand'); });

52

53 WEB COMPONENTS UN MODÈLE DE COMPOSANT POUR LE WEB

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

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

56 CUSTOM ELEMENTS <element extends="button" name="my-button" attributes="foo bar"> <template>...</template> <script>... </script> </element>

57 SHADOW DOM HTML IMPORTS <link rel="import" href="my-component.html">

58 WEB COMPONENTS AVEC X-TAG >= 9 >= 5 >= 4 >= 4 >= 11

59 <browser-compat ie="9" ff="5" cr="4" sa="4" op="11" /> UN EXEMPLE?

60 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>

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

62 CODEZ POUR LE FUTUR! Copyright Steve Thomas Art & Illustration, LLC