Aller au contenu

Envoi des paramètres depuis une page☘

En utilisant ce qui a été déjà fait et en cherchant éventuellement sur la toile, traitez les exercices qui suivent. Il s'agit de créer un petit jeu d'aide à l'apprentissage de la lecture et de la reconnaissance de formes élémentaires.

Exercice 1☘

Vous devez créer un fichier formes.html.

Dans ce fichier, à partir du tableau javascript couleurs = ['grey', 'aqua', 'blue', 'black', 'orange', 'red', 'yellow', 'green', 'magenta', 'silver', 'teal', 'lime', 'brown', 'fuchsia'], un script javascript créera dans la page un carré de chaque couleur et un disque de chaque couleur.

Le résultat devra être semblable au résultat de ce fichier.

Note

Pour les disques, consulter la propriété css border-radius On n'utilisera aucune image: uniquement du code html et css.

Un script d'aide

Si vous bloquez, voilà un fichier déjà bien avancé. Observez le code, modifiez le en cherchant sur la toile la syntaxe des boucles for en javascript.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title> des disques et des carrés  </title>
    <style>
    p{display: inline-block;margin: 5px;}
    p.disque{ 
        border-radius: 50%; 
        width: 40px; height: 40px;
        border: 1px solid grey;
    }
    p.carre{
        width: 40px; height: 40px;
        border: 1px solid grey;
    }
    </style>
</head>


<body> 
<script>
    const couleurs = ['grey', 'aqua', 'blue', 'black', 'orange', 'red', 'yellow', 'green', 'magenta', 'silver', 'teal', 'lime', 'brown', 'fuchsia'];
    const corps = document.querySelector("body");

    let chaine = ''; // chaine vide

    chaine += `<p class="disque" style="background-color:${couleurs[2]};"> </p>`;
    chaine += `<p class="carre" style="background-color:${couleurs[5]};"> </p>`;

    corps.innerHTML = chaine;
</script>
</body>
</html>
Une réponse

Un code possible:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title> des disques et des carrés  </title>
    <style>
    p{display: inline-block;margin: 5px;}
    p.disque{ 
        border-radius: 50%; 
        width: 40px; height: 40px;
        border: 1px solid grey;
    }
    p.carre{
        width: 40px; height: 40px;
        border: 1px solid grey;
    }
    </style>
</head>


<body> 
<script>
    const couleurs = ['grey', 'aqua', 'blue', 'black', 'orange', 'red', 'yellow', 'green', 'magenta', 'silver', 'teal', 'lime', 'brown', 'fuchsia'];
    const corps = document.querySelector("body");

    let chaine = ''; // chaine vide
    for(let couleur of couleurs){
        chaine += `<p class="disque" style="background-color:${couleur};"> </p>`;
        chaine += `<p class="carre" style="background-color:${couleur};"> </p>`;
    }
    corps.innerHTML = chaine;
</script>
</body>
</html>

Exercice 2☘

Dans ce second exercice, vous allez créer une page mots.php.

Lorsqu'on clique sur l'une des formes créées précédemment dans le fichier formes.html, cela ouvre le fichier mots.php qui, grâce à un script php, affichera la forme et la couleur cliquée. Des paramètres seront donc passés lors du clic sur une forme dans le fichier formes.html pour que ce fichier mots.php puisse faire son job.

Pour bien comprendre la demande, testez ce fichier (cliquez sur une forme).

Info

Pour afficher le caractère & dans un fichier html, on utilise l'entité html &amp;.

Modification du fichier formes.html

On commence par modifier chaque forme du fichier formes.html: chaque forme devient un lien hypertexte vers le fichier mots.php, à la fin de l'URL, on ajoute la forme et la couleur (paramètres pour le fichier php).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title> des disques et des carrés  </title>
    <style>
    p{display: inline-block;margin: 5px;}
    p.disque{ 
        border-radius: 50%; 
        width: 40px; height: 40px;
        border: 1px solid grey;
    }
    p.carre{
        width: 40px; height: 40px;
        border: 1px solid grey;
    }
    </style>
</head>


<body> 
<script>
    const couleurs = ['grey', 'aqua', 'blue', 'black', 'orange', 'red', 'yellow', 'green', 'magenta', 'silver', 'teal', 'lime', 'brown', 'fuchsia'];
    const corps = document.querySelector("body");

    let chaine = ''; // chaine vide
    for(let couleur of couleurs){
        chaine += `<a href="mots.php?forme=disque&amp;couleur=${couleur}"><p class="disque" style="background-color:${couleur};"> </p></a>`;
        chaine += `<a href="mots.php?forme=carré&amp;couleur=${couleur}"><p class="carre" style="background-color:${couleur};"> </p></a>`;
    }
    corps.innerHTML = chaine;
</script>
</body>
</html>
le fichier php

Le fichier php est plus simple!

Lien vers le fichier formes.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title> des disques et des carrés  </title>
</head>


<body> 

<?php

    $forme = $_GET['forme'];
    $couleur = $_GET['couleur'];
    echo "Il s'agit d'un $forme de couleur $couleur.";

?>

</body>
</html>

Exercice 3☘

Vous devez maintenant programmer l'exercice "inverse":

  • Des expressions comme "carré rouge", "disque orange"... sont inscrites dans la page de départ.
  • Un clic sur l'une de ces expressions affiche une page avec une figure ayant la couleur et la forme demandée.

Note

Cet exercice est sans corrigé. Il pourra être traité en exercice bonus, points bonus si vous m'envoyez votre solution dans les 6 jours.