Wikia

Wikia Français

Commentaires5

Le dynamisme à l'état pur : Javascript et son compagnon jQuery

Gguigui1 décembre 28, 2014 Blog utilisateur:Gguigui1

Bonjour à tous,

Ceci est mon premier billet de blog personnel. Aujourd'hui, je vais vous parler de quelque chose d'assez exceptionnel que Wikia nous offre, c'est la programmation de nos wikias. Cette personnalisation m'a fait découvrir encore plus le mode de la programmation virtuelle. En effet, sur les wikias, il y a deux langages de programmation que vous pouvez utiliser : le CSS (feuilles de style) et le Javascript (dynamisme) avec la librairie jQuery qui l'accompagne.

Dans ce billet, je vais plus vous parler du jQuery, même si il y aura un peu de Javascript car Javascript est nécessaire pour utiliser jQuery. Ensuite je vous montrerai un exemple de code, de la conception à la réalisation. J'essaierai ainsi de vous offrir le résultat final de la manière la plus optimisée possible.

La syntaxe du jQuery

Le jQuery étant un langage dynamique, on va donc interagir sur les objets de la page courante par une syntaxe assez classique qu'on retrouvera souvent :

$(selecteur).(action);

Ainsi, si vous voulez utiliser et manier les élements, il vous faut le sélecteur, soit leur classe ou leur id.

Comment trouver les classes ou/et les id ?

Pour les trouver, nous allons utiliser les outils du navigateur. Dès que vous trouvez l’élément que vous cherchez, cliquez dessus avec le bouton droit de la souris puis sur « Examiner l’élément ».

Button.png

On obtient donc ce code :

<div class="button" id="more-data">Plus d'informations</div>

Ainsi, on obtient la classe et l'id de l'objet. Si on ne veut agir que sur lui seul, le mieux est d'utiliser l'id (unique sur la page). Notre sélecteur s'appelle donc more-data.

Changement du texte du bouton

Pour changer le texte du bouton, on va récupérer la syntaxe habituelle et changer le sélecteur et l'action tel que :

$('more-data').text('Salut à tous !');
  • more-data, c'est l'id du bouton, cela indique de quel bouton on parle.
  • .text('Salut à tous !'), c'est le code qui nous permet de changer le texte d'un bouton.
  • ' ', ils servent à signaler que ce n'est pas une variable mais bien une valeur — ici, l'id du sélecteur voulu.

Oui, mais un problème persiste...

Ainsi, on obtient donc la classe et l'id de l'objet.

Comment jQuery différencie une classe d'un id ?

C'est une excellente question, cette différence se jouera au niveau du sélecteur. Si on parle d'une classe, il faut précéder le sélecteur d'un point ('.') et si on parle d'un id, d'un dièse ('#'). Ainsi, comme on parle de l'id du bouton, pour changer son texte, on utilisera le code :

$('#more-data').text('Salut à tous !');

Voici le résultat :

Button finished.png

Création d'un code : supprimer toutes les pages d'une catégorie

Avant de démarrer le code, nous allons décrire l'algorithme, c'est-à-dire en français. Je l'ai fait sous la forme d'un organigramme donc voici comment nous allons procéder pour notre code :

Supprimer toutes les pages d&#039;une catégorie.png

Comme vous pouvez le constater, on va appeler l'API pour deux requêtes différentes, une suppression et une demande de contenu. Pour mieux faire tout cela, afin de vous faciliter ces requêtes, nous allons utiliser APICall, un script que j'ai créé.

Nous allons commencer le code, en apportant le bouton, demander à l'utilisateur une catégorie au clic et tester si il en a saisie une ou non.

importScriptPage('APICall/code.js', 'dev'); // Importer le script APICall essentiel au bon déroulement du script
$('#my-tools-menu').prepend('<li class="custom"><a style="cursor:pointer" id="deletecategorypages">Supprimer les pages d\'une catégorie</a></li>'); // Ajout du bouton dans «&nbsp;Mes outils&nbsp;» dans la barre inférieur de l'écran
$('#deletecategorypages').click(function () { // Au clic du bouton (on utilise l'id qu'on lui attribué plus haut
    var category = prompt('Catégorie :'); // Demander à l'utilisateur de rentrer une valeur pour «&nbsp;Catégorie :&nbsp;» et la mettre dans la variable category
    if (category && category !== '') { // Si la variable est définie, non nulle, et non vide
        // Continuer le code ici
    } // Fin de la condition
}); // Fin de la fonction «&nbsp;au clic&nbsp;»

Très bien, on est sur la bonne voie. Maintenant, il va falloir faire la requête vers l'API de Wikia. Pour cela, nous allons utiliser une fonction intégrée dans le script que j'ai cité plus haut qui nous retournera toutes les pages dans un tableau. Cette fonction s'appelle

apipagesincategory(nom de la catégorie)

Ainsi, pour récupérer ce tableau des pages de la catégorie souhaitée, il faudra écrire

var pages = apipagesincategory(category);

Et le tour est joué ! Voici le code avec cet ajout :

importScriptPage('APICall/code.js', 'dev'); // Importer le script APICall essentiel au bon déroulement du script
$('#my-tools-menu').prepend('<li class="custom"><a style="cursor:pointer" id="deletecategorypages">Supprimer les pages d\'une catégorie</a></li>'); // Ajout du bouton dans «&nbsp;Mes outils&nbsp;» dans la barre inférieur de l'écran
$('#deletecategorypages').click(function () { // Au clic du bouton (on utilise l'id qu'on lui attribué plus haut
    var category = prompt('Catégorie :'); // Demander à l'utilisateur de rentrer une valeur pour «&nbsp;Catégorie :&nbsp;» et la mettre dans la variable category
    if (category && category !== '') { // Si la variable est définie, non nulle, et non vide
        var pages = apipagesincategory(category);
        if (console) {console.log(pages);} // Je vous affiche le tableau dans votre console du navigateur si elle existe
    } // Fin de la condition
}); // Fin de la fonction «&nbsp;au clic&nbsp;»

Très bien, maintenant, nous devons vérifier que ce tableau contient des pages, car on ne va pas supprimer rien. Donc, pour vérifier cela, nous allons vérifier que sa longueur est supérieur à 0 en faisant :

if (pages.length > 0) {

Et voilà, on aura donc ici dans cette seconde condition la certitude que la tableau contient au moins une page. Maintenant, passons à la suppression des pages via l'API encore une fois et une fonction est encore à notre disposition pour cela :

apideletepage(la page, la raison, onSuccess, onFail);

onSuccess et onFail sont des fonctions exécutées en cas d'échec ou de réussite de la suppression, nous les utiliserons pour le savoir. Cependant, il y a un problème, le nom de la page doit être un « string », c'est-à-dire une chaîne de caractères (texte) et non un tableau ! Il va donc falloir parcourir notre tableau et restituer les chaînes de caractères qu'il contient. Pour cela, on va faire une boucle qui tournera x fois et qui enregistrera la valeur enregistrée à l'indice 0,1,2... du tableau. Voici comment on va s'y prendre :

for (i=0;i < pages.length;i++) { // Pour i allant de 0 à la longueur du tableau, i est croissant
  alert(pages[i]); // Afficher la valeur enregistrée à la valeur i du tableau
}
// Ainsi, si dans votre tableau, vous avez "Page1,Page2,Page3", vous recevrez trois alertes avec respectivement "Page1", "Page2" et "Page3". Et vous pourrez ainsi maintenant supprimer ces trois pages.
Cependant, on ne veut pas les montrer mais les supprimer via la fonction donc, voici ce qu'on va faire.
for (i=0;i < pages.length;i++) { // Pour i allant de 0 à la longueur du tableau, i est croissant
  apideletepage(pages[i], 'Suppression des pages de la catégorie', function () { console.log('Page : ' + pages[i] + ' supprimée')}, function (message) {alert('La page : ' + pages[i] + ' a rencontré une erreur lors de sa suppression : ' + message)}); // Afficher la valeur enregistrée à la valeur i du tableau
}
alert('Toutes les pages ont été supprimées');

Donc, si on recolle tout notre code, voici ce que ça donne :

importScriptPage('APICall/code.js', 'dev'); // Importer le script APICall essentiel au bon déroulement du script
$('#my-tools-menu').prepend('<li class="custom"><a style="cursor:pointer" id="deletecategorypages">Supprimer les pages d\'une catégorie</a></li>'); // Ajout du bouton dans «&nbsp;Mes outils&nbsp;» dans la barre inférieur de l'écran
$('#deletecategorypages').click(function () { // Au clic du bouton (on utilise l'id qu'on lui attribué plus haut
    var category = prompt('Catégorie :'); // Demander à l'utilisateur de rentrer une valeur pour «&nbsp;Catégorie :&nbsp;» et la mettre dans la variable category
    if (category && category !== '') { // Si la variable est définie, non nulle, et non vide
        var pages = apipagesincategory(category);
        if (console) {console.log(pages);} // Je vous affiche le tableau dans votre console du navigateur si elle existe
		if (pages.length > 0) {
			for (i=0;i < pages.length;i++) { // Pour i allant de 0 à la longueur du tableau, i est croissant
			apideletepage(pages[i], 'Suppression des pages de la catégorie', function () { console.log('Page : ' + pages[i] + ' supprimée')}, function (message) {alert('La page : ' + pages[i] + ' a rencontré une erreur lords de sa suppression : ' + message)}); // Afficher la valeur enregistrée à la valeur i du tableau
			}
			alert('Toutes les pages ont été supprimés');
		}
	} // Fin de la condition
}); // Fin de la fonction «&nbsp;au clic&nbsp;»

Et voilà, notre code est terminé et permet de supprimer toutes les pages d'une catégorie. Comme je l'ai dit plus haut, le bouton se situera dans la barre inférieure de votre écran, dans le menu déroulant de « Mes outils ».

J’espère que ce blog vous aura plus et qu'il vous aura permis de mieux comprendre l'interaction dynamique qu'offre JavaScript et sa librairie jQuery.