davidbgk
/
larlet-fr-david

title: Cours IUT : jQuery et Bonus
slug: cours-iut-jquery-bonus
date: 2015-01-06
chapo: Il est temps qu’ils aillent faire leurs propres expériences, j’espère les recroiser.

> As I've mentioned (many times) before, this blog is not about bad-mouthing jQuery. jQuery is, without a doubt, ubiquitous in the world of web development. In the earlier days of web development, jQuery was required to smooth out the significant implementation differences and bugs found in various browsers when dealing with the DOM and the Web API as a whole. Also, the Web API was quite primitive at the time, in some respects, and jQuery helped to make development a bit more intuitive.
>
> Browsers, and the Web API, have come a long way in the last several years. You can do a lot without jQuery, and I have mostly avoided jQuery in my new projects for the last several years. The jQuery approach may take less keystrokes, or look a bit more elegant in some cases. That's fine, but the point of this blog isn't to help you reduce the number of keystrokes, or write more beautiful code.
>
> <cite>*[You Don't Need jQuery!](http://blog.garstasio.com/you-dont-need-jquery/events/)* ([cache](/david/cache/5313a28c96bbd1aa04754c52522d952e/))</cite>

Quand il n’y en a plus, [il y en a encore](/david/pro/enseignement/) :-). On était passés [un peu rapidement sur jQuery](/david/blog/2014/cours-iut-javascript-jquery/) la dernière fois alors les étudiants en redemandent. Suite à une sondage à la représentativité douteuse sur Twitter, je me suis rendu compte que jQuery n’était plus utilisé que pour quelques raisons :

1. la compatibilité IE8
2. le support du code existant et de sa qualité inégale selon les intervenants
3. l’inclusion par défaut dans [Bootstrap](http://getbootstrap.com/)

J’exclus la première raison vu que j’enseigne [pour aujourd’hui et demain](/david/blog/2014/cours-iut-flexbox-styleguide/). Je mets de côté la seconde car il faudrait les mettre en situation avec du code en production et je peux difficilement gérer ce type d’interactions à 24. Il reste l’intégration de morceaux de code existants et/ou celui de Bootstrap. C’est assez éloigné d’un carousel ou d’une galerie d’images comme ils me l’avaient demandé mais ça me semble plus pertinent (et de toute façon [ça existe maintenant](http://photoswipe.com/) en [vanilla-js](http://vanilla-js.com/)).

Partons sur un exemple concret à base de [gabarits sous Creative Commons](http://templated.co/) et d’[images libres de droits](http://www.resplashed.com/), ça changera des images récupérées sous Google Images et du copier/coller d’anciens projets. Premier exercice, intégrer jQuery dans une maquette existante. Deuxième exercice, animer une partie de manière pertinente pour l’utilisateur. Troisième exercice, vérifier que c’est beaucoup plus compliqué à faire en CSS ou JS (c’est le moment d’introduire [You Don't Need jQuery!](http://blog.garstasio.com/you-dont-need-jquery/) de manière très subtile !). Quatrième exercice, explorer Bootstrap et ce qui utilise réellement jQuery dans les différents composants/animations proposés et la notion de plugins.

Ce sera aussi l’occasion de reparler de la correction précédente de [l’auto-évaluation](/david/blog/2014/cours-iut-evaluation-bilan/) et des notes qui en ont découlées. [Donner](http://css-tricks.com/rems-ems/) [quelques](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) [derniers](https://dorey.github.io/JavaScript-Equality-Table/) [conseils](http://www.js-attitude.fr/2014/12/26/clusterfucks/) [pratiques](http://chriswrightdesign.com/experiments/flexbox-adventures/) [notamment](http://www.poormansstyleguide.com/) [sur les](https://bufferapp.com/style-guide#introduction) [styleguides](http://bradfrost.com/blog/post/style-guide-best-practices/). Et pour terminer ? Une petite note récente du W3C au sujet [des différences HTML4/HTML5](http://www.w3.org/TR/html5-diff/) ça peut toujours servir.

**Il est temps qu’ils aillent faire leurs propres expériences, j’espère les recroiser.**