Programmation Web, année 2019

Attention.

Les TD doivent être réalisés sous Linux et non sous Windows. Chaque étudiant doit être inscrit sur Moodle. Le forum peut être utilisé pour poser des questions pendant et en dehors des TD.

Un dictionnaire

Télécharger ici le fichier lexique.tar.bz2 compressé et décompresser le dans votre répertoire internet_S4.

Créez un fichier script_TD6.js et ajoutez le à TD6.html

  1. Affichez le contenu du fichier lexique.json
  1. Un affichage un peu plus pratique

Affichez dans un élément div de hauteur fixée la liste des 1000 premiers mots.

Cette question peut être faite avec 16 lignes de codes

var xhr = new XMLHttpRequest(); xhr.open(‘GET’, “/teaching/2017/internet_langages/lexique.json”); xhr.send(); xhr.onload = function() { listeMot = JSON.parse(this.response); afficheListe(0,1000); afficheListe2(1000,2000); afficheListe3(2000,3000); afficheListe4();

}; function afficheListe(min, max) { var holder = document.getElementById(“list1”); holder.innerHTML = listeMot.slice(min,max).map((a,index) => ‘<div class=“mot’+index%2+’”>’+a.mot+‘</div>’).join(““); }

Vous pouvez utilisez les méthodes de listes suivante:

  1. Trier les mots

Faire en sorte de pouvoir trier dans l’ordre alphabétique croissant ou décroissant les mots que vous affichez.

var order = true; function afficheListe2(min, max) { var holder = document.getElementById(“list2”); var tab = listeMot.slice(min,max); if (order){tab.sort((a,b) => a.mot.localeCompare(b.mot));} if (!order){tab.sort((a,b) => -a.mot.localeCompare(b.mot));} holder.innerHTML = tab.map((a,index) => ‘<div class=“mot’+index%2+’”>’+a.mot+‘</div>’).join(““); }; function croissant() { order = true; afficheListe2(1000,2000); }; function decroissant() { order = false; afficheListe2(1000,2000); };

Vous pouvez utiliser les méthodes suivantes:

  1. Extraire plus d’informations

Faire en sorte d’afficher des informations supplémentaires lorsqu’on clique sur l’un des mots un peu comme suit:

var order2 = true; function afficheListe3(min, max) { var holder = document.getElementById(“list3”); var tab = listeMot.slice(min,max); if (order2){tab.sort((a,b) => a.mot.localeCompare(b.mot));} if (!order2){tab.sort((a,b) => -a.mot.localeCompare(b.mot));} holder.innerHTML = ““; tab.forEach(function(element, index){ var el = document.createElement(”div”); el.setAttribute(“class”, “mot”+index%2); el.innerHTML = element.mot; el.element = element; el.onclick = function(){ var extra = document.getElementById(“extra3”); if (typeof(selected) != “undefined”) selected.setAttribute(“class”,selected.oldClass); selected = this; this.oldClass = this.getAttribute(“class”); this.setAttribute(“class”, “selectMot”); extra.innerHTML = “genre:”+ this.element.genre+‘<br>’; extra.innerHTML += “gramatical:”+ this.element.gramatical+‘<br>’; extra.innerHTML += “syllable:”+ this.element.syllable; }; holder.appendChild(el); }); }; function croissant2() { order2 = true; afficheListe3(2000,3000); }; function decroissant2() { order2 = false; afficheListe3(2000,3000); };

Vous pouvez utiliser la méthode suivante (au lieu de map):

  1. Autocomplétion

L’objectif final est de réaliser une autocomplétion pour faire une recherche dans le lexique et sortir tous les mots qui contienne le prefixe rentrée par l’utilisateur. On se limite toujours à 1000 éléments max, il suffit donc d’adapter les questions précédante et de simplement ajouter un champ de recherche.

var order3 = true; function afficheListe4() { var holder = document.getElementById(“list4”); var autoC = document.getElementById(“autoC”).value; var tab = listeMot.filter((a) => a.mot.startsWith(autoC)); if (order3){tab.sort((a,b) => a.mot.localeCompare(b.mot));} if (!order3){tab.sort((a,b) => -a.mot.localeCompare(b.mot));} tab = tab.slice(0,1000); holder.innerHTML = ““; tab.forEach(function(element, index){ var el = document.createElement(”div”); el.setAttribute(“class”, “mot”+index%2); el.innerHTML = element.mot; el.element = element; el.onclick = function(){ var extra = document.getElementById(“extra4”); if (typeof(selected) != “undefined”) selected.setAttribute(“class”,selected.oldClass); selected = this; this.oldClass = this.getAttribute(“class”); this.setAttribute(“class”, “selectMot”); extra.innerHTML = “genre:”+ this.element.genre+‘<br>’; extra.innerHTML += “gramatical:”+ this.element.gramatical+‘<br>’; extra.innerHTML += “syllable:”+ this.element.syllable; }; holder.appendChild(el); }); }; function croissant3() { order2 = true; afficheListe4(); }; function decroissant3() { order2 = false; afficheListe4(); };

Vous pouvez utiliser les méthodes suivantes:


Compiled the: mer. 08 janv. 2025 11:51:29 CET