Un site internet pour tester à la volée des codes html, css, javascript


Accueil > Projets > Un site internet pour tester à la volée des codes html, css, javascript

Par Brasseur Damien , Fedyna Kevin en septembre 2020

Tout est parti d’une question :

Comment peut-on faire tester du js aux élèves de NSI de la manière la plus simple et rapide ?

Introduction au projet

On ne voulait utiliser un site fait maison pour être sûr de pas se faire attaquer par le DNS du service informatique, qui peut arbitrairement décider de bloquer tel ou tel site web.

On a alors posé un cahier des charges :

  • Un site permettant de charger du HTML, du CSS et du JS.
  • Intuitif.
  • Un retour console pour le JS car c’est mieux que d’aller dans la console du navigateur.

Une fois fait, on s’est mis a coder, on était large, on avait 2 jours pour proposer au prof un outil clé en main.

Interface

L’idée de l’interface est simple :

En rouge : le site retour.
En bleu : les zones d’édition.
En noir : le bouton pour envoyer tout ce beau code.

L’architecture est un système de div, très pratique pour la mise en page.
Afin de ne pas interférer avec le code éventuel des élèves, on donne des ID aléatoirement générés pour les parties vitales du site (inputs, outputs).

Le JavaScript

C’est la partie la plus importante du site.

Pour le bon fonctionnement du site, il nous faut 3 fonctions :

  • Une fonction de récupération de console.
  • Une fonction d’envoi du code.
  • Une fonction traitant le CSS à envoyer.

Récupération console

On réécrit la fonction console.log et on associe cette fonction à la fonction window.onerror.

  1. console.log = function () {
  2.     // On recupère le message passé en argument
  3.     var message = [].join.call(arguments, " ");
  4.  
  5.     // On crée un nouvel élément <div> qu'on ajoute dans le code
  6.     var div = document.createElement("div");
  7.     div.appendChild(document.createTextNode(message));
  8.     document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div);
  9. };
  10.  
  11. // Redéfinition de la fonction d'erreur
  12. window.onerror = console.log;

Télécharger

Fonction de traitement du CSS

On commence par convertir le CSS en une seule ligne.
Ensuite on split la chaine obtenue avec le charactère "}", ça nous permet d’avoir un Array contenant des strings commençant toujours par un objet à modifier en CSS ou une string vide.

Comme notre fenêtre visible et modifiable par les élèves porte l’ID "main", on ajoute "#main " a chaque objet ou on remplace "body" par "#main" afin de n’affecter que la div main.

  1. function convertCSS(code) {
  2.   code = code.replace("\n", "");
  3.   code = code.replace("\r", "");
  4.   var newCode = code.split("}");
  5.   for (var i = newCode.length ; i >= 0 ; i--) {
  6.     if (newCode[i] !== undefined && newCode[i] !== "") {
  7.       newCode[i] = newCode[i].replace(/^\s+|\s+$/g, "");
  8.       if (newCode[i].startsWith("body")) {
  9.         newCode[i] = "#main " + newCode[i].substring(4);
  10.       }
  11.       if (!newCode[i].startsWith("#main")) {
  12.         newCode[i] = "#main " + newCode[i];
  13.       }
  14.       newCode[i] += "}";
  15.     }
  16.   }
  17.   return newCode.join("");
  18. }

Télécharger

Fonction d’envoi du code

On commence par clear la console.
Puis on envoie un retour console avec un id précis pour changer son style. Ce retour permet de nous assurer que le code a été envoyé.

On actualise les balises du site qui assurent le bon fonctionnement de la fenêtre main en prenant bien soin de traiter le CSS.

Problème principal lors de la réalisation de cette fonction :
Pour pouvoir modifier le JS de la fenêtre, il est indispensable de supprimer la balise < script > qui contient l’ancien JS. On ne peut pas juste réécrire le JS, sinon la cache ne s’actualise pas.

  1. // Fonction d'envoi du code
  2. var sendCode = function() {
  3.     document.getElementById("vfRDiMPLLlGMBuKV").innerHTML = "<p>Retour console</p>";
  4.     // On crée un nouvel élément <div> qu'on ajoute dans le code
  5.     var div = document.createElement("div");
  6.     div.id = "change";
  7.     div.appendChild(document.createTextNode("Code envoyé !"));
  8.     document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div);
  9.     // Changement HTML
  10.     document.getElementById("main").innerHTML = document.getElementById("html").value;
  11.     // Changement JS
  12.     document.getElementById("toAdd").remove();
  13.     var script = document.createElement("script");
  14.     script.id = "toAdd";
  15.     document.body.appendChild(script);
  16.     document.getElementById("toAdd").innerHTML = document.getElementById("js").value;
  17.   // Changement CSS
  18.   document.getElementById("maincss").innerHTML = convertCSS(document.getElementById("css").value);
  19.   if(document.getElementById("html").value.toString().indexOf("<body onload=") !== -1)
  20.     window[
  21.       document.getElementById("html").value.substring(
  22.         document.getElementById("html").value.toString().indexOf("\""
  23.       ,document.getElementById("html").value.toString().indexOf("<body onload="))+1
  24.         ,document.getElementById("html").value.toString().indexOf("("
  25.         ,document.getElementById("html").value.toString().indexOf("<body onload=")))]();
  26. }

Télécharger

Conclusion

Le site fut fini dans les temps et opérationnel !
https://workspace.nsi.xyz/

Mots-clés