Structure html5 et premier script

Le titre est ronflant mais nos objectifs sont modestes !

Structure html5

cm 2020-04-08 structure html5

On pourrait penser que ceci a été réalisé avec un logiciel de dessin, mais non, c’est la capture de la page web que nous réalisons en TP.

Le fichier à télécharger pour commencer le TP : cliquer ici et décompressez l’archive.

Un premier script ?

Une des pages contient déjà un script javascript on ne peut plus minimaliste :

alert("Coucou");

Ce n’est pas le premier que nous voyons.

On en a déjà observé un en classe un jour, début février !

On va faire mieux aujourd’hui !

-> Et on a fait mieux, on a testé et commencer à expliquer le premier script (intégré au html) ci-dessous :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Mon premier test de javascript</title>
    </head>
    <body>
        <p>
            Ce cours est :
            <ul>
                <li>
                    cool 
                    <button onclick="val_plus_un('valeur1');">
                        <span id ="valeur1">0</span>
                    </button>
                </li>
                <li>
                    trop cool
                    <button onclick="val_plus_un('valeur2');">
                        <span id ="valeur2">0</span>
                    </button>
                </li>
            </ul>
        </p>
        <p>
            <ol>
                <li>Le prof a toujours raison</li>
                <li>Sinon, voir 1.</li>
            </ol>
        </p>
        <script type="text/javascript">
            let compt1 = 0;
            let compt2 = 0;
            function val_plus_un(val) {
                let v = document.getElementById(val);
                if (val == "valeur1") {
                    compt1++;
                    v.innerHTML = compt1;
                }
                else if (val == "valeur2") {
                    compt2++;
                    v.innerHTML = compt2;
                }
            }
        </script>
    </body>
</html>

D’autres ici pour les impatients.

N'hésitez-pas à poser une question, ou faire avancer le schmilblick

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.