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

Projets

Ici nous allons vous montrer un site internet pour essayer les codes HTML ; CSS ; javascript.

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 :
<emb751|center>
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.

<code class="javascript">Retour ligne automatique
console.log = function () Retour ligne automatique
// On recupère le message passé en argumentRetour ligne automatique
var message = [].join.call(arguments, " ") ;

// On crée un nouvel élément <div> qu'on ajoute dans le codeRetour ligne automatique
var div = document.createElement("div") ;Retour ligne automatique
div.appendChild(document.createTextNode(message)) ;Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div) ;Retour ligne automatique
 ;

// Redéfinition de la fonction d'erreurRetour ligne automatique
window.onerror = console.log ;Retour ligne automatique
</code>

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.

<code class="javascript">Retour ligne automatique
function convertCSS(code) Retour ligne automatique
code = code.replace("\n", "") ;Retour ligne automatique
code = code.replace("\r", "") ;Retour ligne automatique
var newCode = code.split("") ;Retour ligne automatique
for (var i = newCode.length ; i >= 0 ; i—) Retour ligne automatique
if (newCode[i] !== undefined && newCode[i] !== "") Retour ligne automatique
newCode[i] = newCode[i].replace(/^\s+|\s+$/g, "") ;Retour ligne automatique
if (newCode[i].startsWith("body")) Retour ligne automatique
newCode[i] = "#main " + newCode[i].substring(4) ;Retour ligne automatique
Retour ligne automatique
if (!newCode[i].startsWith("#main")) Retour ligne automatique
newCode[i] = "#main " + newCode[i] ;Retour ligne automatique
Retour ligne automatique
newCode[i] += "" ;Retour ligne automatique
Retour ligne automatique
Retour ligne automatique
return newCode.join("") ;Retour ligne automatique
Retour ligne automatique
</code>

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.

<code class="javascript">Retour ligne automatique
// Fonction d'envoi du codeRetour ligne automatique
var sendCode = function() Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").innerHTML = "<p>Retour console</p>" ;Retour ligne automatique
// On crée un nouvel élément <div> qu'on ajoute dans le codeRetour ligne automatique
var div = document.createElement("div") ;Retour ligne automatique
div.id = "change" ;Retour ligne automatique
div.appendChild(document.createTextNode("Code envoyé !")) ;Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div) ;Retour ligne automatique
// Changement HTMLRetour ligne automatique
document.getElementById("main").innerHTML = document.getElementById("html").value ;Retour ligne automatique
// Changement JSRetour ligne automatique
document.getElementById("toAdd").remove() ;Retour ligne automatique
var script = document.createElement("script") ;Retour ligne automatique
script.id = "toAdd" ;Retour ligne automatique
document.body.appendChild(script) ;Retour ligne automatique
document.getElementById("toAdd").innerHTML = document.getElementById("js").value ;Retour ligne automatique
// Changement CSS Retour ligne automatique
document.getElementById("maincss").innerHTML = convertCSS(document.getElementById("css").value) ;Retour ligne automatique
if(document.getElementById("html").value.toString().indexOf("<body onload=") !== -1)Retour ligne automatique
window[Retour ligne automatique
document.getElementById("html").value.substring(Retour ligne automatique
document.getElementById("html").value.toString().indexOf("\""Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("<body onload="))+1Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("("Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("<body onload=")))]() ;Retour ligne automatique
Retour ligne automatique
</code>

Conclusion

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