Faciliter le JavaScript
Ce cours n’a abordé jusqu’à présent que le JavaScript dit « pur », ou « Vanilla » . Vous avez eu besoin de tout développer par vous-mêmes, ce qui peut rapidement se révéler fastidieux. Un bon exemple de ce qui est nécessaire de développer régulièrement : les animations ! Aussi incroyable que cela puisse paraître, le JavaScript ne fournit aucune fonction capable de nous aider dans nos animations, il nous faut donc les développer par nous-mêmes.
Heureusement, le JavaScript est un langage très utilisé et sa communauté est immense, il est donc très facile de trouver des scripts adaptés à vos besoins. Parmi ces scripts, nous trouvons deux types : les frameworks et les bibliothèques.
Les frameworks
Le terme « framework » est abusivement utilisé en JavaScript. Ce que nous allons vous présenter ne sont pas des frameworks au sens propre du terme, mais il est courant de les nommer de cette manière. Il s’agit en fait aussi de bibliothèques, avec une portée étendue.
Un framework a pour but de fournir une « surcouche » au JavaScript afin de simplifier l’utilisation des domaines les plus utilisés de ce langage tout en facilitant la compatibilité de vos codes entre les navigateurs web. Par exemple, quelques frameworks disposent d’une fonction $() s’utilisant de la même manière que la méthode querySelector(), et ce, sur tous les navigateurs web, facilitant ainsi la sélection d’éléments HTML. Pour faire simple, un framework est une grosse boîte à outils contenant une multitude de fonctions permettant de subvenir aux besoins des développeurs !
L’atout numéro un d’un framework est sa capacité à s’adapter à toutes les utilisations du JavaScript et à fournir un système performant d’extensions (ou plugins) afin qu’il puisse être étendu à des utilisations non envisagées par son système de base. Grâce à ces deux points, un framework permet de simplifier et d’accélérer considérablement le développement d’applications web.
Il existe de nombreux frameworks en JavaScript en raison de la pauvreté de ce langage en terme de fonctions natives, cependant nous n’allons présenter que les plus connus d’entre eux :
- jQuery : il s’agit du framework JavaScript le plus connu. Réputé pour sa simplicité d’utilisation et sa communauté gigantesque, il est clairement incontournable ! Cependant, il n’est pas toujours apprécié en raison de sa volonté de s’écarter de la syntaxe de base du JavaScript grâce au chaînage de fonctions, que vous pouvez constater dans l’exemple qui suit :
$("p.neat").addClass("ohmy").show("slow");. - MooTools : un framework puissant et presque tout aussi connu que jQuery, bien qu’énormément moins utilisé. Il est réputé pour sa modularité et son approche différente plus proche de la syntaxe de base du JavaScript. En revanche, bien que ce framework soit « segmentable » (vous ne téléchargez que ce dont vous avez besoin), il reste nettement plus lourd que jQuery.
- Dojo : connu pour sa capacité à permettre la conception d’interfaces web extrêmement complètes, il possède des atouts indéniables face aux plus grands frameworks et tout particulièrement jQuery UI, une extension de jQuery conçue pour faire des interfaces Web. Ce framework est l’un des plus modulaires que l’on puisse trouver sur Internet, ce qui fera la joie des fans d’optimisation.
- YUI : La bibliothèque YUI n’est actuellement plus maintenue.. Ce framework est pour le moins complet, ne vous fiez pas aux fausses idées que vous pouvez avoir de Yahoo!, vous pourriez avoir bien des surprises en utilisant ce framework qui est modulable et relativement performant, bien qu’il bénéficie d’une communauté assez restreinte.
- Prototype : l’un des pionniers des frameworks JavaScript ! Nous le citons seulement en tant qu’exemple, car, malgré ses qualités, il se fait vieux. Son déclin s’explique par le simple fait qu’il étendait les objets natifs liés au DOM, rendant le tout assez lent et peu compatible. Bref, vous ne vous en servirez jamais, mais au moins vous saurez de quoi veulent parler certaines personnes en parlant de « Prototype » avec un P majuscule.
Les bibliothèques
Contrairement aux frameworks, les bibliothèques (libraries en anglais) ont un but bien plus spécialisé.
Quel est l’intérêt si un framework me fournit déjà tout ce dont j’ai besoin ?
L’intérêt se situe à la fois sur le poids du fichier JavaScript à utiliser (une bibliothèque sera généralement plus légère qu’un framework) et sur la spécialisation des bibliothèques. Ces dernières ont souvent tendance à aller plus loin que les frameworks, vu qu’elles n’agissent que sur un domaine bien précis, ce qui simplifie d’autant plus votre développement dans le domaine concerné par la bibliothèque.
Et puis il existe un principe important dans le développement (web ou logiciel) : l’optimisation. Utiliser un framework uniquement pour faire une malheureuse animation n’est vraiment pas conseillé, c’est un peu comme si vous cherchiez à tuer une mouche avec un tank… Préférez alors les bibliothèques, en voici d’ailleurs quelques-unes qui pourraient vous servir :
- Sizzle, Qwery : deux bibliothèques conçues pour fonctionner de la même manière que la méthode
querySelector(), ce type de bibliothèques est d’ailleurs à l’origine de l’implémentation officielle de la méthode en question. La première est le moteur de sélection du framework jQuery mais est relativement lourde, la seconde a l’avantage d’être particulièrement légère et un poil plus rapide en terme d’exécution. - Popcorn.js : une bibliothèque permettant une manipulation aisée des balises
<audio>et<video>, il devient ainsi très simple d’interagir avec ces balises afin de mettre en place des sous-titres, des commentaires placés à un moment précis de la piste audio ou vidéo, etc. - Raphaël, Three.js : trois bibliothèques spécialisées dans le graphisme. La première fonctionne exclusivement avec les images SVG et la deuxième s’est spécialisée dans la 3D et gère à la fois SVG,
<canvas>et surtout la bibliothèque WebGL, qui sait tirer parti du moteur OpenGL ! - Modernizr : comme vous le savez si bien, les langages Web sont plus ou moins bien supportés selon les navigateurs, surtout quand il s’agit de fonctionnalités récentes ! Cette bibliothèque a pour but de vous aider à détecter la présence de telle ou telle fonctionnalité, il ne vous restera alors plus qu’à fournir un script résolvant ce problème (un polyfill) ou exploitant une solution alternative.
Il n’est malheureusement pas possible de vous faire une liste complète de tout ce qui existe en terme de bibliothèques, elles sont bien trop nombreuses.
jQuery
jQuery est une bibliothèque JavaScript gratuite et très pratique, ayant une syntaxe courte et logique, compatible avec tous les navigateurs courants.
jQuery est devenue une référence importante à savoir utiliser : pour preuve, elle est largement répandue sur la toile. Microsoft, Twitter, Mozilla, Google Code, Amazon et WordPress France, pour ne citer qu’eux, l’utilisent.
Présentation
Diversité des implémentations du JavaScript
Si vous faites un peu de JavaScript, alors vous savez que c’est parfois difficile et très long d’obtenir ce que l’on veut, et cela peut paraître répétitif.
Les guerres font rage entre les navigateurs (Firefox, Internet Explorer, Opera, Safari, Chrome etc.) qui se partagent les internautes : de ce fait, il faut adapter votre code à chacun de ces navigateurs qui fournissent des fonctions différentes pour répondre au même usage.
Par exemple, ce code permet de récupérer en nombre en pixels la position de défilement vertical de la page web (scroll) :
function avoirDefilementVertical(){
if(typeof( window.pageYOffset ) == 'number'){
// Netscape
return window.pageYOffset;
} else if( document.body && (document.body.scrollTop) || navigator.appName=="Microsoft Internet Explorer") {
// DOM
return document.body.scrollTop;
} else if( document.documentElement && (document.documentElement.scrollTop) ) {
// Internet Explorer 6
return document.documentElement.scrollTop;
}
}
jQuery
Nous allons donc apprendre dans ce tutoriel à utiliser le framework JavaScript nommée jQuery.
jQuery, un framework JS gratuit, dont la syntaxe est très courte, dont les noms des fonctions sont intuitifs (en anglais bien sûr), simplifiant l’AJAX, permettant de faire des animations, ayant une communauté très active, et contenant à peu près tout ce dont vous rêvez grâce à ses plugins.
Et voici la version jQuery du bout de code :
function avoirDefilementVertical(){
return $(document).scrollTop();
}
Comme on l’a vu, jQuery n’est pas la seule bibliothèque JS disponible, vous pouvez aussi vous intéresser à d’autres comme Mootools, Scriptaculous, Prototype, Yahoo UI, Mochikit, ExtJS, Dojo, …
Installation
Téléchargement
jQuery est tout simplement un fichier JavaScript. Il vous suffit donc de le télécharger sur le site officiel.
Là, deux choix s’offrent à vous dans l’encadré à droite :
- « Production » : version compressée du fichier original (incompréhensible mais légère), si vous ne voulez pas regarder le code source et pour la version publique de votre site.
- « Development » : code source lisible, vous pouvez réduire le poids de jQuery en enlevant ce qui ne vous sert pas, puis en compressant à l’aide de JavaScript Compressor par exemple.
Intégration à une page web
On va supposer que votre fichier jQuery s’appelle jquery.js et qu’il est dans le même répertoire que le fichier qui l’utilise.
jQuery s’intègre comme tout autre fichier JavaScript :
<script type="text/javascript" src="jquery.js"></script>
Hello World
Pour vous montrer la simplicité de jQuery, voici le classique « Hello World » :
<!DOCTYPE html>
<html lang="fr" >
<head>
<title>Hello World avec jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Salut tout le monde !
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('body').html('Hello World');
</script>
</body>
</html>
Préférez les serveurs Google aux votres
Google héberge lui aussi les fichiers jQuery :
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
pour la version de Production (compressée).
On peut donc facilement intégrer jQuery à sa page en mettant dans le <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Cette solution apporte plusieurs avantages :
- Le script de jQuery est centralisé : un internaute visite plein de sites qui sont susceptibles d’intégrer jQuery. Si tous ces sites hébergent leurs propres scripts, l’internaute en question va devoir re-télécharger jQuery plein de fois. Alors qu’avec cette solution, le cache du navigateur peut être optimisé et ainsi éviter de re-télécharger le même script tout le temps.
- La bande passante de votre site est allégée, le travail étant transmis aux serveurs de Google.
Pour information, Google héberge plusieurs bibliothèques utilisables, voir la liste des bibliothèques JavaScript hébergées par Google.
Fonction principale
Toute jQuery repose autour d’une fonction : jQuery() (abrégée $() car le dollar est un caractère autorisé pour les noms de fonctions en JavaScript) qui permettra de sélectionner des éléments dans votre page web.
Le premier argument de cette fonction, l’« expression », qu’on lui passe est une chaîne de caractère, représentant un sélecteur CSS, un peu comme dans vos feuilles de styles, mais en plus fort !
Sélecteurs basiques
Voici quelques exemples pour que vous vous rappeliez ce que sont les sélecteurs CSS :
| Expression | Retour |
|---|---|
#titre | la balise ayant pour id “titre” |
h1 | les balises h1 |
.gras | les balises qui ont la classe “gras” |
a,h1,h2 | les balises a, h1 et h2 |
* | toutes les balises |
Les méthodes sont des fonctions associées à des objets. Les méthodes jQuery sont donc des fonctions qui ne s’utilisent que sur des objets jQuery.
Il y a différentes méthodes, et certaines méthodes ont elles-mêmes différents arguments afin de répondre à différents usages. Leurs noms sont intuitifs (en anglais).
Quelques méthodes
À titre d’exemple, pour passer à la pratique, la méthode html() permet d’accéder au contenu des éléments si on l’appelle sans aucun argument, et permet de modifier le contenu des éléments si on l’appelle avec comme premier argument une chaîne de caractères (représentant le contenu).
Pour ce code : <div id="titre">J'aime les frites.</div> :
$('#titre'); // Sélectionne notre balise mais ne fait rien.
alert($('#titre').html()); // Affiche le contenu "J'aime les frites."
$('#titre').html('Je mange une pomme'); // Remplace le contenu "J'aime les frites." par "Je mange une pomme".
$('#titre').html($('title').html()); // Remplace le contenu par le titre de la page (contenu dans la balise <title>).
Deux autres méthodes, before() et after() permettent d’ajouter du contenu ou un élément de la page (ça dépend de ce qu’on lui passe en paramètre) respectivement avant et après l’élément en question :
// Ajoute du contenu après chaque balise textarea.
$('textarea').after('<p>Veuillez ne pas poster de commentaires injurieux.</p>');
// Ajoute "Voici le titre :" avant la balise ayant comme id "titre".
$('#titre').before('Voici le titre :');
// Ajoute "! Wahou !" après la balise ayant comme id "titre".
$('#titre').after('! Wahou !');
Chaînage des méthodes
Il faut savoir qu’on peut chaîner les méthodes, c’est-à-dire que si une méthode agit sur un élément (elle n’est pas censée donner une information sur cet élément mais le modifier), on peut rajouter une autre méthode :
// Ajoute du contenu après chaque balise textarea.
$('textarea')
.after('<p>Veuillez ne pas poster de commentaires injurieux.</p>')
.after('<p><strong>Merci beaucoup.</strong></p>');
// Ajoute "Voici le titre :" avant et "! Wahou !" après la balise ayant comme id "titre".
$('#titre')
.before('Voici le titre :')
.after('! Wahou !');
Chargement du DOM
Quand on fait un appel à la fonction principale, il se peut parfois qu’elle ne retourne rien. On a beau placer son code en fin de body, les éléments de la page web ne sont pas encore placés.
La solution de ce problème en JavaScript est le fameux :
window.onload = function(){
// Fonctions du genre document.getElementById('balise') qui marchent,
// on peut accéder aux éléments.
};
jQuery offre une syntaxe à peu près similaire : la fonction doit juste être donnée à la fonction principale jQuery() ou $().
$(function(){
// On peut accéder aux éléments.
// $('#balise') marche.
});
Le DOM peut alors être manipulé en toute sûreté car vous pouvez être sûrs que tous les éléments existent. Les feuilles de styles sont aussi chargées si elles ont été incluses avant le script.
On peut utiliser cela plusieurs fois, les fonctions seront appelées chronologiquement à partir du moment où le document est prêt.
Sélecteurs
Sélecteurs CSS “classiques”
| Expression | Retour |
|---|---|
* | Toutes les balises. |
elem | Les balises elem. |
#id | Balise ayant l’id “id”. |
.class | Balises ayant la classe “class”. |
elem[attr] | Balises elem dont l’attribut “attr” est spécifié. |
elem[attr="val"] | Balises elem dont l’attribut “attr” est à la valeur val. |
elem bal | Balises bal contenues dans une balise elem. |
elem > bal | Balises bal directement descendantes de balises elem. |
elem + bal | Balises bal immédiatement précédées d’une balise elem. |
elem ~ bal | Balises bal précédées d’une balise elem. |
La liste des sélecteurs CSS 3 est très complète (avec explications en français).
Sélecteurs spécifiques à jQuery
| Expression | Retour |
|---|---|
:hidden | Éléments invisibles, cachés. |
:visible | Éléments visibles. |
:parent | Éléments qui ont des éléments enfants. |
:header | Balises de titres : h1, h2, h3, h4, h5 et h6. |
:not(s) | Éléments qui ne sont pas sélectionnés par le sélecteur s. |
:has(s) | Éléments qui contiennent des éléments sélectionnés par le sélecteur s. |
:contains(t) | Éléments qui contiennent du texte t. |
:empty | Éléments dont le contenu est vide. |
:eq(n) et :nth(n) | Le n-ième élément, en partant de zéro. |
:gt(n) (greater than, signifiant plus grand que) | Éléments dont le numéro (on dit l’« index ») est plus grand que n. |
:lt(n) (less than, signifiant plus petit que) | Éléments dont l’index est plus petit que n. |
:first | Le premier élément (équivaut à :eq(0)). |
:last | Le dernier élément. |
:even (pair) | Éléments dont l’index est pair. |
:odd (impair) | Éléments dont l’index est impair. |
Manipuler le contenu
Contenu textuel
Méthode text()
Vous connaissez déjà html(), qui permet de remplacer le contenu d’un élément. Eh bien voici text(), qui manipule le contenu comme du texte et non comme des balises :
- changer le contenu avec
text('contenu'): les chevrons < et > sont convertis en entités HTML : < et > respectivement (les balises ne sont donc plus actives) ; - récupérer le contenu avec
text(): renvoie le contenu « textuel » (pas les balises), les entités HTML étant converties en caractères.
C’est l’équivalent en JavaScript classique de la propriété textContent.
Comparaison de text() avec html()
Récupérer le contenu
<p id="premier">
<span class="texte">
Salut tout le monde
</span>
<img src="photo_1.jpg" alt="Premiere Photo !" />
</p>
$('#premier').text()
renvoie “Salut tout le monde” (avec tous les retours à la ligne et les espaces).
Alors que $('#premier').html() renvoie :
<span class="texte">
Salut tout le monde
</span>
<img src="photo_1.jpg" alt="Premiere Photo !" />
Définir le contenu
Et lorsque l’on passe du texte en paramètre : $('#premier').text('<strong>les pommes</strong>') change le contenu du paragraphe en
<strong>les pommes</strong>
Alors que $('#premier').html('<strong>les pommes</strong>') ajoute une balise <strong>les pommes</strong>.
Remplacer la balise
Les méthodes html() et text() permettent de changer le contenu : replaceWith() est une méthode qui permet de remplacer la balise et son contenu. On peut lui passer du code html ou encore un objet jQuery qui viendra remplacer l’élément en question.
Ainsi faire $('div').replaceWith('<span>Salut!</span>') transformera <div>Bonsoir.. :)</div> en <span>Salut!</span>.
// Remplace les liens <a>...</a> par <em>censuré</em>.
$('a').replaceWith('<em>censuré</em>');
$('h1').replaceWith($('.titre:first'));
$('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>');
$('.recherche').replaceWith('<a href="http://google.com">Google</a>');
Insertion à l’intérieur et à l’extérieur
Insérer à l’intérieur avec prepend() et append()
Les méthodes html() et text() réécrivent le contenu d’un élément : c’est-à-dire qu’elles les vident dans un premier temps, puis y écrivent.
Les méthodes prepend() et append() permettent d’ajouter du contenu à celui existant : prepend() avant et append() après :
$('span').prepend('balise span » ')transformera<span>Hello World !</span>en<span>balise span » Hello World !</span>.$('span').append(' « balise span')transformera<span>Hello World !</span>en<span>Hello World ! « balise span</span>.
Insérer à l’extérieur avec before() et after()
Les méthodes append() / prepend() / appendTo() / prependTo() changent le contenu à l’intérieur, c’est à dire que faire $('p').prepend('Paragraphe : ') dans <p>Comment tu vas ?</p>, change le paragraphe en : <p>Paragraphe : Comment tu vas ?</p>.
Les méthodes after() / before() / insertAfter() / insertBefore() sont les équivalents de ces méthodes, à l’exception qu’elles ajoutent à l’extérieur des balises. Elles fonctionnent donc de la même manière : on passe en argument un objet jQuery ou du contenu html à after() / before() et un sélecteur jQuery ou un objet jQuery à insertAfter() / insertBefore().
Donc si on fait :
$('p').before('Paragraphe : ')
<p>Comment tu vas ?</p>
Le code HTML deviendra :
Paragraphe : <p>Comment tu vas ?</p>
Envelopper
Envelopper à l’extérieur
wrap() permet d’« envelopper » n’importe quel élément entre deux balises. Le plus simple est de lui passer une balise ouvrante et une fermante sans contenu (<em></em> par exemple). $('span').wrap('<b></b>') transformera <span>Hello World !</span> en <b><span>Hello World !</span></b>
$('#titre').wrap('<h1></h1>');
$('.desactiver').wrap('<pre></pre>');
// Le contenu sera entre les <div></div>.
$('.contenu').wrap('<em>le contenu</em> ira là : <div></div> mais pas <strong>là</strong>');
// Le contenu sera entre les <em></em> mais aussi les <q></q>.
$('span').wrap('<em id="ici"></em> et là <q></q>');
Envelopper à l’intérieur
wrapInner() fontionne de la même manière mais entoure le contenu. Tout comme avec wrap(), le contenu est dupliqué dans chacun des couples de balises ouvrantes / fermantes sans contenu.$('span').wrapInner('<b></b>') transformera <span>Hello World !</span>en <span><b>Hello World !</b></span>
$('span.italique').wrapInner('<i></i>');
$('h1:first').wrapInner('<a href="http://google.com"></a>');
$('a').wrapInner('<em>Ceci est un lien : </em><u></u>');
Déballer
unwrap() est une méthode permettant de « désenvelopper » (ou déballer) un élément. C’est-à-dire enlever la balise parent qui l’enveloppe.
C’est un peu la méthode inverse de wrap() !
Par exemple $('b > span').unwrap(); sur <p>Hello <b>Wor<span>ld</span></b></p> donne <p>Hello Wor<span>ld</span></p>.
Copier, supprimer et vider
Copier des éléments
clone() permet de copier des éléments (de les « cloner »), avec leur contenu, leurs attributs et valeurs (donc par conséquent les événements comme onclick etc.).clone() va simplement renvoyer un objet jQuery qui est une copie de l’original, mais il ne va pas l’ajouter à votre page web.
// Multiplie le nombre de boutons par 2.
$('button').clone().appendTo($('body'));
// Revient à faire :
$('body').append($('button').clone());
Supprimer des éléments
remove() permet de supprimer des éléments de la page web. On peut lui passer un argument qui représente un sélecteur jQuery : il désignera les éléments qui doivent être supprimés parmi tous les éléments contenus dans l’objet jQuery.
// Supprime les liens de la page ayant la classe "sites".
$('a').remove('.sites');
// Supprime les balises <strong> dans des <button>.
$('button strong').remove();
Vider des éléments
empty() permet de vider le contenu de l’élément en question :
$('button').empty(); // Vide les boutons.
$('body').empty(); // Vide la page web.
// Revient à faire :
$('body').html('');
Exercice
Le but sera de manipuler du contenu en partant de ce bout de page HTML :
<p id="contenu">
Lorem <span class="vert">ipsum dolor</span> sit amet, <span class="titre2">
consectetur adipiscing elit</span>.Etiam <a href="#">facilisis</a>
<span class="rouge">ultrices</span> dolor, eu <span class="orange">fermentum
eros</span> aliquet ac. Aenean varius <span class="titre2">ultrices nisi
</span> vel aliquet. Nam eu viverra sem. <span class="gras">Fusce facilisis
</span> eros ac <span class="titre1">elit scelerisque molestie</span>. Morbi
lacus orci, interdum ac <span class="souligne">faucibus hendrerit</span>,
<span class="barre">facilisis vel</span> nunc. <span class="souligne">Sed in
</span> <span class="bleu">mauris</span> <span class="gras">lorem</span>.
Integer facilisis, <span class="italique">augue et suscipit</span> molestie,
<span class="barre">lectus lectus</span> pellentesque mi, <span class="vert">
at</span> condimentum <span class="italique">nulla</span> nibh ut turpis. <span>
Cum sociis</span> natoque <span class="vert">penatibus et magnis</span> dis
<a href="#">parturient montes</a>, nascetur ridiculus mus. Etiam quis nisl
metus.<span class="vert">Phasellus</span>ullamcorper posuere augue quis placerat.
<span class="titre1">Duis sed quam</span>odio. Donec <span class="vert">aliquam
metus</span> a <a href="#">ligula lacinia</a> a tempor leo <span class="bleu">imperdiet</span>.
Cras augue purus, <span class="souligne">lobortis eu</span> scelerisque sed,
<span class="vert">venenatis ut</span> turpis. Donec <span class="bleu">quis
magna sapien</span>. Ut ut diam arcu. <span class="souligne">Suspendisse nec
risus</span> id lacus venenatis <a href="#">rhoncus.</a> In vitae
<span class="vert">justo tellus</span>, <span class="bleu">vitae lacinia nunc
</span>. Aliquam <span class="italique">erat</span> <span class="rouge">volutpat.</span>
</p>
.rouge {
color: red;
}
.orange {
color: orange;
}
.bleu {
color: blue;
}
.vert {
color: green;
}
.gras {
font-weight: bold;
}
.italique {
font-style: italic;
}
.souligne {
text-decoration: underline;
}
.barre {
text-decoration: line-through;
}
L’utilisateur va pouvoir agir sur la page grâce à des boutons du type : <button onclick="fonctionJs()">Cliquez ici</button>.
Vous pouvez attribuer les fonctionnalités que vous voulez aux boutons, mais en voici quelques-unes que je vous propose :
- enlever les liens ;
- enlever le texte en gras ;
- enlever le texte en italique ;
- enlever le texte décoré ;
- vider les boutons ;
- voir le code ;
- transformer les liens en boutons ;
- dupliquer le texte ;
- mettre des titres ;
- colorer le texte ;
- organiser sémantiquement le texte ;
Par exemple :
<button onclick="semantique()">Organiser sémantiquement le texte</button>
<button onclick="colorer()">Colorer le texte</button>
<button onclick="mettreTitres()">Mettre des titres</button>
<button onclick="liensEnBoutons()">Transformer les liens en boutons</button>
<button onclick="dupliquerTexte()">Dupliquer le texte</button>
<button onclick="regrouperTitres()">Regrouper les titres</button>
<button onclick="regrouperLiens()">Regrouper les liens</button>
<button onclick="viderBoutons()">Vider les boutons</button>
<button onclick="enleverLiens()">Enlever les liens</button>
<button onclick="enleverGras()">Enlever le texte en gras</button>
<button onclick="enleverItalique()">Enlever le texte en italique</button>
<button onclick="enleverDecor()">Enlever le texte décoré</button>
<button onclick="voirCode()">Voir le code</button>
De jQuery à Vanilla JS
jQuery, c’est sûrement très bien, ça simplifie pas mal de choses et le chaining est intéressant mais est-ce que vous connaissez l’équivalent en pur JavaScript ?
Note : Vanilla JS n’est pas un framework mais veut simplement dire “à nu”, c’est du JavaScript sans bibliothèque.
Événements
// jQuery
$(document).ready(function() {
// code
});
// Vanilla
document.addEventListener("DOMContentLoaded", function() {
// code
});
// jQuery
$('a').click(function() {
// code…
})
// Vanilla
[].forEach.call(document.querySelectorAll('a'), function(el) {
el.addEventListener('click', function() {
// code…
})
})
La liste des événements jQuery :
http://api.jquery.com/category/events/
Sélecteurs
// jQuery
var divs = $("div");
// Vanilla
var divs = document.querySelectorAll("div");
// jQuery
var newDiv = $("<div/>");
// Vanilla
var newDiv = document.createElement("div");
Attributs
// jQuery
$("img")
.filter(":first")
.attr("alt", "My image");
// Vanilla
document.querySelector("img").setAttribute("alt", "My image");
Classes
// jQuery
newDiv.addClass("foo");
// Vanilla
newDiv.classList.add("foo");
// jQuery
newDiv.toggleClass("foo");
// Vanilla
newDiv.classList.toggle("foo");
Manipulation
// jQuery
$("body").append($("<p/>"));
// Vanilla
document.body.appendChild(document.createElement("p"));
// jQuery
var clonedElement = $("#about").clone();
// Vanilla
var clonedElement = document.getElementById("about").cloneNode(true);
// jQuery
$("#wrap").empty();
// Vanilla
var wrap = document.getElementById("wrap");
while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
Navigation
// jQuery
var parent = $("#about").parent();
// Vanilla
var parent = document.getElementById("about").parentNode;
// jQuery
if($('#wrap').is(':empty'))
// Vanilla
if(!document.getElementById('wrap').hasChildNodes())
// jQuery
var nextElement = $("#wrap").next();
// Vanilla
var nextElement = document.getElementById("wrap").nextSibling;
Encore plus d’équivalences
http://youmightnotneedjquery.com/
Collection de scripts Vanilla
Exercice
Textures
- On a une grille de texture, lorsqu’on clique sur la texture, elle s’applique au fond de la page. Il faut récupérer le background-image de l’élément et le mettre dans le <body>
- Lorsqu’on passe la souris sur le logo, il se déplace vers le bas. Pour que ce soit animé, il faut utiliser la fonction animate(). Vous avez le droit de vous faire plaisir et faire une autre animation.
<!DOCTYPE html lang="fr">
<html>
<head>
<meta type="content" charset="utf-8" />
<title>Exercice jQuery</title>
<style>
section { padding:10em 5em; text-align:center; }
#patterns button { display:inline-block; margin:0 1em 1em 0; border-radius:5px; box-shadow:0 2px 2px rgba(0,0,0,0.1); height:150px; width:150px; cursor:pointer; border:solid 2px white; }
#logo { position:absolute; top:0; width:100%; text-align:center; color:white; }
#logo span { background:black; display:inline-block; padding:1em; border-radius:0 0 5px 5px; }
.bloc1 { background-image:url(https://images.gamebanana.com/img/ss/wips/58bfb0c22a1ad.jpg); }
.bloc2 { background-image:url(https://images.gamebanana.com/img/ss/wips/58bfb0c25df4d.jpg); }
.bloc3 { background-image:url(data:image/jpeg;base64,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); }
.bloc4 { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAACpCAMAAACrt4DfAAAAYFBMVEX///+mpqb8/Pz4+Pipqan39/fw8PCsrKz09PTt7e3l5eXZ2dmvr6/v7+/W1takpKS9vb3Nzc3g4ODHx8e1tbW7u7vOzs7X19ebm5uZmZmSkpKJiYmEhIR8fHyNjY2AgIB2dFeuAAAgAElEQVR4nM1dC5viOJL0E7+N31A9t73//19eRoTkwm5gqnruprWz/YEKOxzYUmYqlQqiKE4i/G++8SUt+BINE18urZptxZd6VbMo+dLMajqIbeNLkumvc8OX0kEsNV+qxSFe+DINamY5X/rxgBgYqeiRVOmaq4NwHIvLgVScH0hd9TKKVHo9fi/HcdH3qhzHrDyQuiaPpJJ7gKRSMAGa3ezRGr2dZ29zI4VLWrM28OqyNyf7pM6jxDV7+2RKonxTc8uJdLG3iZ03J0K0t5fqCFHuzaYiRDI6xJIQIZKqo9LeF/ZotiSafpRRZ7BXO8OO6j+SqDaMj40Ysz3sqYrSj4YYgz2a5hJdftRRahCtdeI+jeofl6g0iNgezZhEzUdKVveREJtBGGLy0fMCsz3sqYvKH1OU2DWWgqyqH1WApD7UB7OSo9V6HvvgNWEftJ7HPnhVH7ThgG6cxhrwa51iYHStBkZxuWBg1EvUdhgOKQeGDQcOjKsGhg0HQCTXaOw5HBI0y0wDY6nKTMMhSFIcr6BitEjF3sMg2ntSMVo4cRujuSd6DipGazUce9+1MiKFUekKkKJxBBWjRSpxyi93m2U4rhGpGK3BvlwSR6RitGBi7X24pKwbzrSP0zK7JgxYtA0yiHfZuMGZ2Kua7Uz7WGZqXmfax3qHoH3s19FB0D7O/F474iKINFYzm2m0q3YIl5Rzn6lzCs7NdN4hd3zxbiY7uhnnkEddLjm6mdJ5Ku9mnEM+uZn44Ga84wqS1OhCF++Qp6ekHOLZITtS21tSx9DlTCp9RmoOkVTUu4P1MgoxcaQG3fvSIS4iVTtShUg12wFxa9yn7luLVO4gVpGqHKlWpKbxwKIPkhSOuCqsMJ8c2cHNojjifyIGKuOsYOM/hmznrj0PSn7aefboi4nN7kOxzr1jc8oUmfxMeW6/Kj76jxBnuWhcACHB0vCc8odBICQwJmuIpAbd52lY+aiyife5H1ve57jhfZ57jt00U48cGo6LbpFBaSfe9nodakHw4Tfz0gmCBmXcaFCS+DY/QJStDMoiiMoZ1ULN0EjRK2KMws7ZGIUBwMUxobIHC1rwEWYAYDi2kYbDnCkNB2jZRAyuGufBAJjhgGOF4YBJsa8zrTIc9gkMB2jBIV/phGl87TyAw3DApJjhCJIU7qKs2VpnGKPVqsfUVrzHk/OmmZr9RvuYFDUf09zQk+StTOxQ8zF1i0zsUvPB14OmrIUgmlEPvtBcbuvp3gyREPNUBEvKpu2adg4NDeJlkY1bZEtrZ/JaGcJplhEtZFq3kRYwKeST5j5RF/aIkbrwEXHIHxFvipg84rgl4ZJ64ZCPCY74eejiHLKDcCxKP20/OuTirUP2CQ75viBJeVfo4o7qK6SSI6n0a6SOqaAjqeRIKveIIZHCTb3gWvCvKZMVtV2rNFJAM887NUxw+GZfKzvBaacRq3hqOas5K4NS2bVSOP1EiHat7iIIJDjshDpV0z7dakKkg4O4KGUSIKkpSmHg7RAzC7d7FZV21HXVNe9lVFVRep8JN5jLqS/R5b7x0wVuqozqe8M8UFGQb3Ovo9yasRC3u51Qm5sZCDHfUyCWSH8YxBozS1Td+yiB4wJiGk0fIZK6q5PHCSP+ftbcKNakwXoefKT1ZfZQMxzo5GY44J5tOLCH2nCg84hzDhsbDnQeccJhY24G7tmOhHvGcEAnt+HQzxoOQLThwFCmuBDRLhYkKRoEHHkp3JFV5C+GI7M89RcT/c5frOLFaDiMVmz080yGY90vRofcft6BRncgc3eA9GU4jBYMh78DQZJCdoL2cVpcgmOmfdycQbzLag6KWZmKxJWU4Ciz2f2VnqRexkeIfu0fIWYH4ZqLJmJprGY207dXrYcIkJRLcPhlkOXoZp4nOLaTQ3bT9q+5mWOCw7uZp1mXsEidFozOpN4uGP2OQ746hzwfIJ7HU2GRoku0FyOFR2V+NrFmuqo5lFGSyHOjuSRswnPnOgenNo2amV7gZ+3PyaKmdWGcUw5qrimb1Sdiikxwr2YhxD5IUrjTmciZE0ZYAa+AQf/DDsSSiZ2/2hl/mZuZdadB7kPk8LCM3OUqcteOTbgqkPtISe5mjIYLIUBu3hTc/BA59CA7qLyLHOYSbYikFkXr/ahxGGu2ON/Y5dNMs8W1Zvx/cVPYpc444Vx7dnk3Z21mjey4IuLWM/2RZG4KO3EKVhYaRIubBbsprJ8FD0p/xN01QFIVcxAYo6AV0z3rIVUco6C1KgeBT5D+gEM288CHtPETQAAetCwghHnAJ2aaMeorlxgx88DcyuoSIykNBy4NwxHLcDC3knIxODhSmIHLms0us7XImq2NMluDHm2r5Ng0y8S2So71Gx/tDqF0W95qIjYIolv1aF2urB7k3tqGvaMZNeUvbuwdYx8HS8poyIM4H1Gvarq56eTcjPM63s0Uctd7sYTO8UUFHtFBaBnJe53GOWQ3qXcLK6lLaHsXHyQpl5n30/bjGsZpGeTkkOfvOOT44JD3tRlHysdTLkoIkVR0SnB8hVT6nlT7BVLJkVR+jKe637hT/++kwKXDYketVaJGq0SXUoksazYoPIl0w5GdmBiKJfgyk1aJJrfQBP/q8h2zUiaF8h1YJarSHaJvhJgdIHIHgaWrJkRSk0VWCbyHXaVOovE6RTnczMITh2sVleYjkP4AbZt+dmVUY8qF0MXMpV1sum78UnFGiN4gUnOsccuD5msdlZ1BCHG9lvjKFdIfhDCXkxviyGZmEFUSNddbgKRiWbCr+q/1PFgwe09jYT0PQ+DiCyRUcmHvm4eSC3vPIfBQctGwL3MI2PtD1UbNIWDvmf6w9xgCqNrwJRcaDnOIpHiiL7thzYzKbmz6RbvfdqUvu2EhT06CZi5oOGIR3HoaDqPCpNHsym4KGY6lyll2s8hwFCUJGhUajmyvBaLhuAZMCgVZtI/T4hIc8pubFhuju6zmoARHclWzVYKjzGQBr4Kol9sjRO8MomvOR8RFCY40VjMb6eqrtg+X1Lcc8rFQ5XfczNkhH1MmvxUl/FukluekjpWjv0XKL6z8392pP0vKwoUEKEYKXc+6cILM9aymhbSpdcFuVFhh1ylTFTx0OqdE5VutZquXsSNEMjjEPEpLLZ84iDx36yWfENO0Ny/W3EIkxSSMvR8bzTFdrQAG8F3V3UgMYkL0odQanp1NwP1kFLMGN5/deh0YuwMnzjHzQgei835gOVwHYgJxd5NRTHw1n8W1cOA1RFKZ+t7YM2ZIYvW9oWbfKwv15rbjgKgXzQ6ykgnbadZU7KoRsG0aEK5pH2JA5JmKzu1UDIiuVW/OSg6IelD6I845o72NKkm5q249MFIp7yMo2TgFHtIfoLSqRga18KBk/0AJxgPLIHHOe48nA8NxVTkKpu5XGQ9QGhrODUALlOwfFlZgPLILHyEoAQaGw2BACcYD9ylIUvZHWbNx5K1OClmzYeStLlvZ/WXjw6tWzb3bkSZ2GpTYzma63n6WfcyU2J5HPv+8lYldN5rYy6IExzLy4dUDE2pRMfLhNQ4iSFLnSgef4HBrGK5Q8DgZzZ1T8OWsxy0q9XGLyr5coBdfznpcBtk3vRzLWYMk9Xx/yfa08Dd/7pCz06YXOeTb0SG/L/xtAyYVfYXUi9BlfRq6fInUeXvQ23gqEFIONa9kGhsRs4k1DVkjX4lTf0TKTjTKd1zVBLFGqJjIFypjATGkTK4qY0Fnr7UawvqMXoh3QYBYI0PLrIuSMCGSGhGbJUhWGOJQNGiWWcHmUtSI9qpCgVxRVFGeRBO2CV2QncgRqvXFzKaDmIseELmDWIspSvKoQ0kKFpkAkUZ1sfDTwmyRQTTF4BATNMciRFItHxAex1U9D47HxihDGbuXeEBmONgXbTigL9oD5gAxNwMTacOBJtJB2AOGezbDwWds5+MBWR/hALEHDFNiD5gDxNw7HrkNB46xq8aYPeAgScGdaNTHGqNzQ2tmsLT7a00Te2llONoLzzdYOuQspeEwWlcNfRqOsaeJNXdCwzFMLFQxWFZnLhUNh8Gy7K4t+aUmBxEn4ZKy4amXxhlE1xzdpgPXHJTgSGMZ0ValqVXrSlHkvSdXhOrO6YcD4qwdRtFVEIsSHGWmZra5lMkBIixSz3fiPHcz+e+4mVPo8g+2B/1hUuca299xyMeNVC8Kf5+Sep8KCouU2fiEY1eu07owXHTunDEWOS7aOTzpoA6J7FpRxqA1j6YTxCqILUfGnxtX8Nc54TpJ2e+I8Nj1tCMiBpiqA4u+DJFUlHIdCVsSF3OzV60jIU1rtxYFDlhHypTVwLI31pGuHXdR9YOqU2zOXSLBMXMLVH53tSRIfyQRKjWmDWvmyoRkWkeKK14Ay94jKmJLriNhxjUY+D0JkNRV06phYr2ajVGXneCGvGrRim2Ws3NPg+ZEccKe2W/s3HYIp1Vzw85thoOde62Z/qhaQbQXdu56lWGJU04/mllmIJZhGXuOOCN1DZEUowacYbRgzRKXnTBaOAMJCxgOo4Uz4GBxUQtl8DWMFi9qhmBWAMwVWTsCX8NCGRgOHIGCXrsIvgZMCwyHXQRfAxcBoplMBsxDwKRQXkpr1s8yiLG86TzTICaZNqOsSnCUrSoeWiU46tWdIxPbDMUjxDjz8SSxNqsNSnDkhTY7LkpwVIvKMAplXSYHESSpPcHhMvNPhUFeJDgW52aeJziyo5t5n+A4qpWESeppje2prGSvdDg65PY7DvlU+Psb263/MKnobTXy6KqRPaJIvSj8fU5qO5Kaj6T24ic13z6+P00qUoVqV6lCtddSGbb6/IykqDIzHYFNvXgdev41+SGBFeyf21Shym0wHZsotawM7YcEXeDAp4QVqtzSsmmlyC6APSxrwyYqVKH6klWECI9Uj15lIUhbJKg4XgZM6e1+qgC5tTMS7F7N2MxQSJnYRRY0k8IeYIKl7BXNvChyHDQMMyC6HbHHOfXiISY0m1U105kgRo/YlmgOQ5Ck2NnpKxP6SnR263nsmtbzZqXVHt2tHbG724oOHJ0dR6Czr3K3Dw4cZuHBgTNpNms6YkcscuCYPOAIdHY7IkhScDaaRWUJI7B+4xg118AxOjc0HD6IG2oaDh8HLheGhfUgw5Glq4I4GY4sYa517BUWZjIcw0TDYc6GiEvFctZqdWFhHi6pPf/QqwgkivXXWQmOxDXXjW774jb3tr3LTqjpsiCNy5E4xFEJDg8xKMGRZ2ouSnBUDsKVr0zOpoZJ6q1DfiHK8qVNxM8dsl9YeZvgCJJU9pzU7QBxDl2+sd06fUFKiPW37tQfJQWHgL2vUAPDPv1N/jWXr8RfK2NQ1WoihWEDojYP4ZoTFlRK+lc0AWGjoMTyiR1xE2KHasLpgFg/IELu7bJDTDkhwiPVRBeWzkDjaU6j6m5OGTUhGzM9E+pCsPFi4nphj/QHylFqVt9gMrVBuk0Q68DyngvE2ZDgGFneU0OczXpDfCNEg2IVQ7tPvMAGcTb7jh8Vd1Rjhjca2kcZIKl7RKGVpWIvQxY+Yc9j17e/PSby+1H9NlbXnxu6FDMcnEqsNbu+GQ5OutqOXd8vDcQpjcTn0gC7/tgzQLYBRiMxTDQSNhyyEElxhoMxahQqtzyEPM02cowmbm3HaIGoBSp+eQhzbjMTNLFGa9XyEE2s0YLhuM0yHC64MVog6hGNFgyH0UrcmhUXnJaASSHfQWvWDDKI14HedJxlEK8rHfKqBAeLx8FDJrZrFwdB+zitvkkT2w+DQ6R9nD2idrssM01sWeicTBD14iECJPV8v+4pwXE5TdtflJW8TXC8XwY5QgRJ6vZUuu0UupwrHZ5vt/bFEu+3W59InTYRH+9UUKSiI6nteO+d0Nr53vuMl0hNR1LPi5/2XeWCuPg03Kn4KXn2NQMhhYvcGZVQqw2RDESx7Hr/jRh/ICeL6/xHUcm68aD0L0UlmA/M0mpDoPLRKQyJFdz8lUofdmVgAwhAwToA0S6QNtityIPKn8Z1otMHRHikRtVXVYvE2QpfIqg7GR9LBF2y2pUIpsV6KBFs9TDaTSWCqx5v5ksE9TyvSlZvaibZ27rFwEhxfLJqtOQYxfjEPxaeplzQRdUoV1HUcQ0XyQ2EM6C1TpSqhuHAEDfDAaPBUtac5VE4vfmEgHndNrrnxFXDDg2NBv6BlkUJQZLCINd8s1At8jTLmmUpV/m3XjsG4r2cGU8gL5TYXivuWOkWGY62VIH0oFlUkTOUbMbGQ6BbjA0X45JMRXJDzW5RtjKxSxcuqT3BMUqFJSn010HpiNL5l0WmtXJGtJVdnBTuRC6F0StHwoVfDgpGP7lDXJUj6doDRL3K1ReCaBxEkKSe7y85bSL2xRLORzwXeD1tenkhNeLLWZ/nEo6OKyxS3n2+3UT8b5PyKv4hkUID9SCQYRu15+aZYL7cLbzpVHHphPL21rw9COZvn4L5Ny2deMTppWA+pMxQn5juiF7FP0BSB8H8+ke+C+bb/28QzDdIyNvPkG5TJQ3k7ZHNsEfTXKISgvlIcCxkVVskBFZOMH96KpgffTRswuEbq9wgKJjfklX3owuQ1HsV/1l98K5ubMPBb5JtOBy0SbZwW1o7L5hPn/UgmP+wpdVw7hoOHFtz80Iwvw2RlDZKXwi3C+anhOsfanQNDjiJ33q9C+aTitHCl/OC+dgoXXKZ81Ew3+C09VqGw+Dw5dLngvlBkvpVMH9wgvlOd002bnAm9m8E8weHSPvYrx6R9nGet0dEJ8z8RRX/IEh5GXg/dXye4PiSdJt38acEx7EE4Fva9EGRGo+hy/tNL/E/3279gtTbeCoMUl7F31eZiNQrwXwhngTzp+2A6AXzjymT3CGuiqTPgvnHIO8WJKlI+Y5HwXw5R1aZzMp34BwI5m/Kd8zKd8CBY/IwOMF8l+/A1DZjiS/zHXP0SjD/v9FZMB8OXIL5QZJyKv6aRmVSutoF81UQvwvmb04si/f50h7FslalPz4F8/monOb+trH+Lol3+S12jELD3yt4LRppxRQkqU/9tCraBfNnjd6rDMCjYP5Gw5G4/eZOMB9bwbxgvp1HwfzBSbAlNAA4L053sTqKuslwUBfOCea3skp23iVEUpimS6dhqXiP60H3eBfM1z3OOja33gnmV07Y7yCYv9a0j9Wip7ZUfPDT7ATzpTZ4c4L5maQCR22jSZ0E/1CHSwpXiNT/lOBwmeVVhrDygvkyrZOWhCKXwui9YP4BInfO3Enwdw5xF8x3iIJojhL84/YMMRBSJ4d8Kql87pBfhC7PN72clkGeS40cExxBkjqp+HfvSZ22B70VufsOqbOK/3F7UBikcLWTYD4qKbBXB6f3qqSonGB+L62VOmElBSKNrYreCOZj7mAHvRDMX6NPCf6/U/EPgtRBML/xgvkDzx/vOappkkfB/C4qIW+PGpKMq0XVx8TiGuwlbpDgqLnCFK9s9vcLVpiSqyBmVLVUUY70BxDjSIL5jQTzC9bn1AYRHimv4p9eXgvmW0ekORgkmG9HspMvTjB/USfPSgnmD07cPWEntyPRyRMn7j4fBfMhFx/RIbOTe8H81SnOB0ZKH6U0nbtgfhI9Ecx3P0JA+nYx0E8cffsI9O1iNByfPxmgHyEovWC+foTACeaPNBz2EV28zY+RAE7jgEm9Fsx3umuycd8UzKd9/EUwv3lsvhLMn8Ml9SVt+um5Q35bzvrix4yfO2Sf4Dg65DBJfWsT8bdIdW9JHUp6viVy92+TelDxxwsE8+24dFHTC+YPanrB/HE/B5iQf0dTuzAo/84yeTUfBPPRfBDMf0CE/Duav6r4B0Qqil4J5v9UWIGdPwhu/lKsg50/q3b+eMH85SiYv2jnjxfMX7XzB3bjJJj/U7EOJitLtAvmY+dPGyIpp+J/84L5mh6O/UEwf5iYki1b/7NxTjD/8LNx00kwf9PPxjmIuaFxyLPjb9ktbhZcC2IXzI9DJMWRyF8SnDhGMYnAZ+2nYD4/yZmV9lp+TjAfpXBOMJ+6gU20C+aPfLgUzF8iL5iPIIe/kFjTPMAhg5YZDhzIntPzkyBJIdOguzg0tGaXxWW2vLy9F8xXus0J5hdKt21eMN/9aKYgylbiEU4wvzoJ5s9OMF+/u3kbZWIdxNhnwZLa1e59Zv4smK+mExfzWzlcXakv0nTZaF9UcJLg94L58jqNQzwK5nsJfl9UECSpLznkkyDZc4d8WgbxDvmFINm7KCFIUtHzBEdxTHC8JfViwehMSg/oJJg/Hmtd3sdTf5YUuLwQzAdda1IwP1EA20S7YD4uPcmBI9+xqrm6fMcs9TeMokYLTUiZOIhHwfxGmiLTg2B+F71R8f+DpKjiD9MvwfztWgMugbw9jrCQxAvmW3Oxh9BB7X6ODoL5/VvB/AqC+blDdIL5HRIqRNwF86mKJ4jm2oRISr8R7wokrOfBCFpfZuJxkGC+9WUOARsOCGUgmI8O6wTzzXCwfP6asP/acECHPQnm55+C+bA3hk57Y8MBxsKmdrTMTjDf0OcQSUVeMN9O5Bhda476zgvmX4huJ6q6KOUs6lMwn+jjUTDfTmTZzSvBfH5lO5GGI044CYZgfs77Ey6p14L502PzlWC+mlctktSujvVvBPPVPAvmz19S8f+jpL4k8HouVHnqkP1ywXPptvOml6drM99Snf23SX1Jn9cHeV8j9VaU5W0Bzu/cqX+NlDkEL5iPFy+YP/wimM9NmxGkRimY787xgvlotnrxgvmrQ/wUzH+AwArMSTD/AfFBxT8cUr17dpCkiV8K5mMl9oc2R3GOqYV+JCEfBPP7PvK/FPcomN/q2UEt6oeEkzjxLXkBbI7Cs4OgK/Ygb9FZxT8cUplyo2NP95zEkrcfJhq7slDY3FZ0C9WisHkXzFf3vWqvRe8F89W0DycOB7f1ouZA71q3H+TCyLteNabsskzHzRpTTnM/MFJSUEYMYk8GDBHNUzC/ZgyCcnoYDhvqXjAfhuNXwXzgPQrm3whDwfxMz9loAQ2hDAxH9iCYnxMGaIDBtwqSFDwi7/xZMH/THq/lsPGsPgnmzwfB/G28OojHjWd5e9h41i2aiC2bF8yniXWC+bc5YFKvBPOPlaOn7ZmnTcTH5P6+PfN5+cXzTcQn6bYgSb3fX+JI+U0vziH7TS/OIftNL6fQ5e0m4mMFh08EtAGTeq/i70MXT8qJshxJVb9B6iyYf9pu/ZU79W+TAi6lNisRa6J/JJjffgrml2V0Fsz/ECI6OxAfBPMn91VlaJkyCZDUiGiPgvnYCZV9CuZjSSiTYH7WSjA/6/CbTVOmWNAL5mPdG6FLLMH8jIL5qUMcsgnRXucg2kyC+ShyIaIE8zPFgrGFMpck2mwSFx6p4hfB/IZjlAPfC+a3GvgQzO/4gCUVkrA72/lMtzqIuWc0l36Kj+ABdV4wv+MDMvcu/ZJcveYkmL8xFxAcKSxw8HybItKbzg3Ph2B+TVgaju4kmD84wfyEhuP2KZgPTzL2nEVBMH/id2XpwYNg/qJhT8NRfArmAzEOmNT3BPMTJ8PmBPO7Qk2XBan/RjC/e2wuPmUiiExZFy/BHySptwKvpwRHenLIXxJ4PS6D/BMV/z9Mqn23Z2lPcLiltdMm4hOp55uIj9Jtr0h9YyPVnyL1WsUffzVgCubfooNg/hQdBPOro2B++YtgvrEut/0cCuY3nxAQzK93iCqJ3qj4/0lSTsUfM65HwfyJyzwoivCC+UhwLE4w//IpmF9LMH/Rhp7VGDnBfNTXQTA/1jpSK4i6iHbBfICvgnCC+SxwqXYV/7BInVX8nQhpRTNQLU6EtHSC+SqiixN27n6UGbiqczvBfDuDvXmtaQa6l4L5FYeDE8zXGvorFf8wSCU0cHDIFsrAIe+C+c1BMH+RYD58NAyH0WLAvMrE2p/gkM0982tcZTiMFgwH/oRZFATzl+hTML9SwLxEu2D+xpXjXcU/OFIoL6Un+UUwn/c2ybQZxQnmX86C+U4hXzsGmtkL5tM+esH87CyYT6P9i2A+Teynin+ApHYt1WOCwwlcnUWxnEN2TsHPJJ8nOLKnCQ6/idjv8Hxbzhokqfh5Kui4hnF2yMfC3/cO2S+DPC+/OOWnQiQVHUndjqSer4u9F8z/Uon0++1BdYikcBl4X6ijnATzkeDoo10wH2r3TbQL5n9EFFjB/e9VoQrJFlSo9tEumP+RRi8E84H4U9d/EMzHbiFswdtCJOVV/AvJ26/rhjpkCuYbsUfB/BzbgySYD6FNNM3lYMv0Soi0KFIK5q8saaZgPnzK6gTzhVg8COYTkXXW27rugvlAHOYQSZ0F85H+2AXzL0fB/FSC+bP7yUFNHsxw4JHDcGC82FVR2PWrYD4tS1x6wXyuUEEwv+Jw8IL5sMFmOJoQSWEYKwJzgvnbp2A+12EnCeYXMhxrzQo3JCtwTlvSxE6D+3GnhIbjNjrBfBmOsaHhSJ008VDTxF52wXwajtoJ5hf5HCypaBfMP6rdnwXzleAonaTaWTBfM9dfBPMPEvzDSMT0JJjvtgu/UPEPipRPcBx34ryQbnuxPeitKMvXHPIpdAmRlA/y5gPEC+m2txupnpNKf4fUNUBScAgHwfxEgvm9NFC8YP4UnQTz6ViteRLMh/f1gvlb5CX4L4ZYNjuEF8y/OUSDeBTMhy9PAyTVRCU39Cza3wPBfGzoKbS/Z0KSAxsvJq4X3jLtf4ZgPhRVFm6qSp3m/qD9PRTMR6HKGO2C+dh4of09QKRgfs0mVsENMbl/CubPlyj/yAMk9UrFnx11F8xPJJg/a9LlBfNv7PrWlzlFcoL5F+eV2o5LJhDM53DwgvmJWxqgV9q2b6n4/2FSkRfMb06C+dunYH7K0B+Gg7EOKXjB/NTFOjAcFsooMkk5EbMT9LPRMhyzBPNTt1pktPDVL5+C+fjq9RIwqehXwXx603mWNSepPMcAAAKvSURBVNsF82kf00xbVVqZ2OqtYP52FMwfBJG8EsyniX2p4h8CqX3a7hIcTrrNpeLf/6Rc8c7NnBMcz5P777MuQZE6VTr40MVPsl3o8ly67eSQr09DlxebXl7EU2/15P4sqegY5D3PeO2/yfB8XexI6rYdEP0PHx7TcHuHOAnmP5VuC4MUE/tXhRUPgvn4NSBotW0Rf3YYVL1gfs+/QqstxwrKxHMeBfOR3s4UmfxMJWsreZFdMH/kCy6AuAVF/KO02hD6QKttDpHUScW/VWrZC+a7KsPeqd07wfxRyWovmD+Mix6JBviifHe9FnwYhcxmM3gI9pBtztRPlJebRz7PXTB/DJLUWTAf6Q8vmG9jFEPcDIdWUSIvmI8hnrpVFAjmtwfB/MkL5qdEpWD+ILtjqKC1jTzdC+YbKk4HKuyOodYhksKtdrXIOa1ZM8uTZIkTzGfUluyC+YzaylazqLXiE6iOgvnTIMNRpDSx/eiqm3fBfLi3NBOiE8y/eMH8S7ikok/BfCU4nNq9F8x3qmyvBPMPGY1fBPNzDQo1VyFevGC+AoDamWVXvtI4Cf4gSZ0c8im5/zsO+bl022lr7LeihDBIPU9wfI3U803E3yL1XOTueKfCIJXYfxTM75nrwAv0WnO5Wy501PLaON4eEAXzy13evpFgfrqp2adMYyC5AZf7IJhf1jsEEPFTha4JBVgI5nsI1cmGSOpTxX9MKZiP3xZwgvnNR3QQzL9Gu2A+EhxIf0Awv6I6LuZJm50OwXwUqgyszZk+Egnmb4Tond6uF8yPo10wHzUrbXRW8Q+H1IeC3XYXzOcEKksY7GI/aqotrbi7442jNc/UjYeaUzLzVAxllo7BrnkqlqQUKYNdbJKFGY2jho980ybZWOue88QI3DwVx9ZacSEcm2RDJPW/UsLD+RirvxcAAAAASUVORK5CYII=); }
.bloc5 { background-image:url(data:image/jpeg;base64,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); }
.bloc6 { background-image:url(data:image/jpeg;base64,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); }
#logo span {}
</style>
</head>
<body>
<a href="#" id="logo"><span>Mon Logo</span></a>
<section id="patterns">
<button class="bloc1"></button>
<button class="bloc2"></button>
<button class="bloc3"></button>
<button class="bloc4"></button>
<button class="bloc5"></button>
<button class="bloc6"></button>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
// je lance une action sur le clic sur chaque bouton contenu dans la section "#patterns"
// j'anime le logo au hover sur celui-ci
// je remet le logo dans sa position initiale lorsque je retire la souris
});
</script>
</body>
</html>
Régions
Vous disposez du code HTML suivant :
<p>Ligne active : <a href="#reg23ref" id="id-ligne-active"><em>reg23ref</em ></a></p>
<table id="reg24">
<caption>Basse-Normandie</caption>
<thead>
<tr>
<th id="reg24nom">Nom</th>
<th id="reg24t4">2011</th>
<th id="reg24t3">2010</th>
<th id="reg24t2">2009</th>
<th id="reg24t1">2008</th>
</tr>
</thead>
<tbody>
<tr id="dep14">
<td headers="reg24nom">Calvados</td>
<td headers="reg24t4">9,2</td>
<td headers="reg24t3">9,3</td>
<td headers="reg24t2">9,3</td>
<td headers="reg24t1">9,2</td>
</tr>
<tr id="dep50">
<td headers="reg24nom">Manche</td>
<td headers="reg24t4">7,8</td>
<td headers="reg24t3">8,1</td>
<td headers="reg24t2">7,9</td>
<td headers="reg24t1">8</td>
</tr>
<tr id="dep61">
<td headers="reg24nom">Orne</td>
<td headers="reg24t4">8,9</td>
<td headers="reg24t3">8,8</td>
<td headers="reg24t2">9</td>
<td headers="reg24t1">8,7</td>
</tr>
<tr class="region-reference" id="reg24ref">
<td headers="reg24nom">Basse-Normandie</td>
<td headers="reg24t4">8,4</td>
<td headers="reg24t3">8,4</td>
<td headers="reg24t2">8,3</td>
<td headers="reg24t1">8,5</td>
</tr>
</tbody>
</table>
<table id="reg23">
<caption>Alsace</caption>
<thead>
<tr>
<th id="reg23nom">Nom</th>
<th id="reg23t4">2011</th>
<th id="reg23t3">2010</th>
<th id="reg23t2">2009</th>
<th id="reg23t1">2008</th>
</tr>
</thead>
<tbody>
<tr id="dep67">
<td headers="reg23nom">Bas-Rhin</td>
<td headers="reg23t4">7,9</td>
<td headers="reg23t3">7,8</td>
<td headers="reg23t2" title="non significatif">0,2</td>
<td headers="reg23t1">7,7</td>
</tr>
<tr id="dep68">
<td headers="reg23nom">Haut-Rhin</td>
<td headers="reg10t4" class="provisoire">9,2</td>
<td headers="reg23t3">8,7</td>
<td headers="reg23t2">9</td>
<td headers="reg23t1" title="non significatif">8,6</td>
</tr>
<tr class="region-reference" id="reg23ref">
<td headers="reg23nom">Alsace</td>
<td headers="reg23t4" title="non significatif">8,3</td>
<td headers="reg23t3">8,1</td>
<td headers="reg23t2"></td>
<td headers="reg23t1">8,2</td>
</tr>
</tbody>
</table>
<table id="reg1">
<caption>Aquitaine</caption>
<thead>
<tr>
<th id="reg1nom">Nom</th>
<th id="reg1t4">2011</th>
<th id="reg1t3">2010</th>
<th id="reg1t2">2009</th>
<th id="reg1t1">2008</th>
</tr>
</thead>
<tbody>
<tr id="dep24">
<td headers="reg1nom">Dordogne</td>
<td headers="reg1t4">9,8</td>
<td headers="reg1t3" class="provisoire">9,8</td>
<td headers="reg1t2"></td>
<td headers="reg1t1">9,7</td>
</tr>
<tr id="dep33">
<td headers="reg1nom">Gironde</td>
<td headers="reg1t4">9,7</td>
<td headers="reg1t3">9,7</td>
<td headers="reg1t2">9,8</td>
<td headers="reg1t1">9,6</td>
</tr>
<tr id="dep40">
<td headers="reg1nom">Landes</td>
<td headers="reg1t4">9,2</td>
<td headers="reg1t3">9,1</td>
<td headers="reg1t2"></td>
<td headers="reg1t1">9,2</td>
</tr>
<tr id="dep47">
<td headers="reg1nom">Lot-et-Garonne</td>
<td headers="reg1t4">9,8</td>
<td headers="reg1t3" title="non significatif">9,8</td>
<td headers="reg1t2">9,9</td>
<td headers="reg1t1">9,7</td>
</tr>
<tr id="dep64">
<td headers="reg1nom">Pyrénées-Atlantiques</td>
<td headers="reg1t4">8,1</td>
<td headers="reg1t3">8</td>
<td headers="reg1t2">8</td>
<td headers="reg1t1">8,1</td>
</tr>
<tr class="region-reference" id="reg1ref">
<td headers="reg1nom">Aquitaine</td>
<td headers="reg1t4">9,3</td>
<td headers="reg1t3"></td>
<td headers="reg1t2">9,2</td>
<td headers="reg1t1">9,4</td>
</tr>
</tbody>
</table>
body {
font-family: sans-serif;
}
table {
border: 1px solid rgba(0,0,0,.2);
border-collapse: collapse;
width: 100%;
max-width: 500px;
}
td {
padding: 5px 10px;
}
caption {
margin: 1em 0 .5em;
font-size: 1.2em;
font-weight: bold;
}
a {
font-weight: normal;
font-style: normal;
}
.non-defini {
background: rgba(0, 0, 0,.2);
}
.non-significatif {
background: rgba(255, 165, 0, .4);
}
.class-ligne-active {
background: rgba(50, 205, 50, .4);
font-weight: bold;
}
Instructions :
- Dans chaque tableau, mettre la dernière ligne en italique.
- Dans le corps des tableaux, attribuer à la première cellule de chaque ligne le style suivant :
color: #555555;
font-weight: bold;
text-align: left;
- Attribuer à la ligne ayant l’identifiant
reg24refla couleur de fond#FBEC88 - Attribuer aux lignes paires des tableaux (dans le
tbody) la couleur de fond#e8e8e8, sauf si elles ont l’identifiant#reg24ref.
Astuce : Le sélecteur :not(…) capture les nœuds qui ne vérifient pas une condition.
- Mettre un attribut
titlevalant « Provisoire » aux cellules qui ont la classeprovisoire. - Dans les cellules vides, écrire « n.d. » et ajouter la classe
non-defini. - Mettre la classe
non-significatifaux cellules dont l’attributtitlecontient « non significatif ». - Récupérer le contenu texte du lien ayant l’identifiant
id-ligne-active. Ce contenu est l’identifiant de la ligne à laquelle vous devez mettre la classeclass-ligne-active. - A la place du code, mettre le nom de la région active dans le lien ayant l’identifiant
id-ligne-active.
Astuce : Le sélecteur :empty capture les nœuds vides
- Dans les cellules qui ont la classe
provisoire, ajouter le lien suivant :
<a href="#" title="Provisoire">(p)</a>
- Dans les cellules qui sont vides ou bien ne contiennent que des espaces, écrire «n.d.» et ajouter la classe
non-defini - Après le nom des départements qui comprennent des cellules non-définies, ajouter le lien suivant :
<a href="#" title="Incomplet">(i)</a>
- Dans le corps des tableaux, remplacer la première cellule de chaque ligne par une cellule de type «titre» (balise
<th>au lieu de<td>). - Trier chacun des tableaux selon l’ordre alphabétique des départements.
Astuce : La fonction $.trim() supprime les espaces superflus