larlet-fr-david/david/blog/2014/cours-iut-javascript-jquery/index.md

title: Cours IUT : Javascript et jQuery
slug: cours-iut-javascript-jquery
date: 2014-11-29
chapo: On passe maintenant à du dynamique avec Javascript et jQuery (imposé).

> Le jour où l’on chercha à imposer l’enseignement obligatoire au Tibet, on se heurta à la résistance des femmes.  
> — Mais ils sont fous ces hommes, de vouloir enlever nos enfants pour les instruire *à un âge où ils ont tant de choses à apprendre*. Instruire signifie imposer des idées qui ne sont pas celles des enfants. C’est une offense au droit de vivre de l’enfant. Dans une culture qui n’est pas notre culture occidentale, *un enfant n’appartient pas à ses parents*. La tradition veut qu’il soit donné dès sa naissance à l’Univers (qui est vie et mort) et le respect que les parents lui doivent est fait du même respect qu’ils doivent à leurs ancêtres.  
> — Tu peux, dit-on aux parents, donner aux enfants ton amour, mais non tes idées. Tu peux enfanter leur corps mais non leur âme. Tu peux essayer de devenir comme eux, mais tu ne peux exiger qu’ils deviennent comme toi, car la vie est *projet* et non retour vers le passé.
>
> <cite>*Préface de Libres enfants de Summerhill*, Maud Mannoni</cite>

Plutôt satisfait du déroulé du [dernier cours](/david/blog/2014/cours-iut-responsive-documentation/) qui a gagné en fluidité et en échanges. J’ai pour l’instant une personne en grande difficulté mais motivée, une personne qui s’en fout, une autre qui fait ses trucs dans son coin et les 21 autres qui progressent tant bien que mal avec plus ou moins de motivation.

**On passe maintenant à du dynamique avec Javascript et jQuery (imposé).** J’hésite encore à tout faire [en utilisant ES 6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla), je compte leur laisser le choix. Mes objectifs pour cette introduction :

* comprendre la console et le scope, en expliquant *"use strict"* et les [IIFE](http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife) `(function(){ /* code */ }());`
* comprendre l’écoute d’événements, avec `addEventListener('action', fonction)`
* savoir utiliser les sélecteurs natifs et jQuery, via `document.getElementsByTagName`, `document.getElementsByClassName`, `document.querySelectorAll` et `document.querySelector` vs. `$('')`
* savoir utiliser les manipulations du DOM, via `.innerHTML` et peut-être `document.createDocumentFragment` vs. `.append('')`
* savoir modifier des classes CSS, via `el.classList.add/remove/contains` vs. `$(el).addClass/removeClass/hasClass`
* savoir modifier des propriétés CSS, via `el.style.property = 'foo'` vs. `$(el).css({ property: 'foo' })`

Je ne compte pas aller vers des concepts de type programmation fonctionnelle avec les *map*, *reduce*, *filter* et compagnie faute de temps et de niveau. Je ne vais pas non plus essayer de jongler entre les animations jQuery et ce que l’on peut faire maintenant en CSS. Quelques liens pour approfondir :

* [jQuery, c’est bien, le DOM moderne, c’est mieux !](http://letrainde13h37.fr/42/jquery-bien-dom-moderne-mieux/)
* [Ditching jQuery for Vanilla JS](http://gomakethings.com/ditching-jquery-for-vanilla-js/)
* [Native equivalents of jQuery functions](http://www.leebrimelow.com/native-methods-jquery/)
* [Replacing jQuery with Vanilla JavaScript](http://modernweb.com/2014/05/05/replacing-jquery-with-vanilla-javascript/)
* [Native JavaScript Equivalents of jQuery Methods](http://www.sitepoint.com/series/native-javascript-equivalents-of-jquery-methods/)

Il faut aussi que je leur donne [quelques tricks](http://css-tricks.com/sublime-text-front-end-developers/) pour Sublime Text  qui leur a été imposé par le précédent intervenant et la série des *awesome* pour [HTML 5](https://github.com/diegocard/awesome-html5), [CSS](https://github.com/ikkou/awesome-css) et [Javascript](https://github.com/sorrycc/awesome-javascript). Et que je me retienne de les assommer de liens :-).

Il serait peut-être temps de leur parler de [ces billets de blog](/david/pro/enseignement/) comme ressources pour garder une trace et des liens en plus de leur travail en groupe. Je ne voudrais pas leur *spoiler* les cours non plus vu que je publie à l’avance… peut-être faire un point sur la curiosité et le *googling* de leurs profs ? Ou pas, si ça se trouve certains me lisent déjà.