Last modified: Fri Apr 20 2018 11:56:42 GMT+0200 (Central European Summer Time)

Comment hacker du javascript ?

Connaître assez de javascript pour être dangeureux

C’est quoi ? Ou le trouve-t-on ? Essayer dans l’inspecteur

1. Quel jour fait-il ?

Rendez-vous sur la page de l’artiste Davide Balula et inspecter le code source.

On y trouve une fonction javascript qui affiche le jour d’aujourdhui.

<script>
  // La fonction execute ses instruction quand elle est appelée plus bas avec tomorrowIs()
  function tomorrowIs() {

    // représente une variable (boîte) dans laquelle sont stoquée la liste des jours de la semaine
    var weekDays = [
      "MONDAY",
      "TUESDAY",
      "WEDNESDAY",
      "THURSDAY",
      "FRIDAY",
      "SATURDAY",
      "SUNDAY"
    ];

    // le numéro du de la semaine
    var today = new Date().getDay();

    // va rechercher dans la variable weekDays le jour qui correspond à l’index que l’on a stoqué dans la variable today.
    document.write(weekDays[today]);
  }
</script>

Pour afficher le résultat de cette fonction sur notre paqe html, il nous faut l’appeller.

<p>
  Aujourd’hui, c’est
  <script>
    tomorrowIs();
  </script>
</p>

See the Pen Today is by Rorsvort (@borisrorsvort) on CodePen.

Exercice: Remplacer les jours de la semaine par des vers de poésies (à défaut, quelques unes du http://www.pipotron.free.fr)

2. Les cent mille milliards de poèmes (Raymond Queneau)

Nous pouvons reprendre le même code et changer la méthode de sélection en applicant un nombre aléatoire:

<script>
  // La fonction execute ses instruction quand elle est appelée plus bas avec tomorrowIs()
  function randomPoems() {

    // représente une variable (boîte) dans laquelle sont stoquée la liste des jours de la semaine
    var poems = [
      "En ce qui concerne la restriction que nous constatons, il serait bon de favoriser la globalité des ouvertures possibles, avec beaucoup de recul.",
      "Compte tenu de la baisse de confiance observée, on ne peut se passer d'examiner l'ensemble des améliorations réalisables, depuis longtemps.",
      "En ce qui concerne la dualité de la situation que nous constatons, il est nécessaire de considérer la totalité des options opportunes, pour longtemps.",
      "Nonobstant cette inflexion intrinsèque, il ne faut pas s'interdire de caractériser systématiquement les actions de bon sens, de toute urgence.",
      "Malgré la situation de ces derniers temps, je suggère fortement d'uniformiser l'ensemble des modalités opportunes, parce que les mêmes causes produisent les mêmes effets.",
      "Quelle que soit complexité de ces derniers temps, il est préférable d'inventorier les principales modalités optimales, même si nous devons en tirer des conséquences.",
      "Où que nous mène l'austérité intrinsèque, il est nécessaire de façonner les relations des améliorations envisageables, à l'avenir."
    ];

    // le numéro du de la semaine
    var random = Math.floor(Math.random() * poems.length);

    // va rechercher dans la variable weekDays le jour qui correspond à l’index que l’on a stoqué dans la variable today.
    document.write(poems[random]);
  }
</script>

Nous avons donc maintenant un générateur de poéme aléatoire mais cela ne reste qu’une phrase à la fois. Pour avoir plusieurs générateurs sur la même page, il nous suffira de dupliquer le code situé dans les script tag et de changer le nom des foncions

Un example à 2 fonctions de 2 vers ressemblera à ceci:

<script>
  function randomPoems1() {
    var poems = [
      "En ce qui concerne la restriction que nous constatons, il serait bon de favoriser la globalité des ouvertures possibles, avec beaucoup de recul.",
      "Compte tenu de la baisse de confiance observée, on ne peut se passer d'examiner l'ensemble des améliorations réalisables, depuis longtemps."
    ];

    var random = Math.floor(Math.random() * poems.length);

    document.write(poems[random]);
  }

  function randomPoems2() {
    var poems = [
      "Nonobstant cette inflexion intrinsèque, il ne faut pas s'interdire de caractériser systématiquement les actions de bon sens, de toute urgence.",
      "Malgré la situation de ces derniers temps, je suggère fortement d'uniformiser l'ensemble des modalités opportunes, parce que les mêmes causes produisent les mêmes effets."
    ];

    var random = Math.floor(Math.random() * poems.length);

    document.write(poems[random]);
  }
</script>

<p>
<script>
  randomPoems1();
</script>
</p>
<p>
<script>
  randomPoems2();
</script>
</p>

See the Pen Random poems 2 by Rorsvort (@borisrorsvort) on CodePen.

3. Alterner des classes sur plusieurs balises

Cliquez sur le paragraphe

See the Pen Js - toggle class by Rorsvort (@borisrorsvort) on CodePen.

results matching ""

    No results matching ""