Discussions sur javascript dans des pages web

Pour commencer, lire :

Commencer ce cours :

Premiers tests des 3-4 avril :

Les codes de la session discord du 9 avril :

Voir les commentaires pour plein d’autres trucs :

Le cours du 30 avril avec son calculateur de moyenne :

2 réflexions au sujet de « Discussions sur javascript dans des pages web »

  1. Premiers tests sur discord, je les recopie ici.

    Le test1, avec javascript dans le code html

    Le code html test1.html

    <!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>

    Le test2, avec javascript en dehors du code html

    Le code html test2.html

    Le code javascript test2.js à placer dans le même dossier

    let compt1 = 41;
    function val_plus_un() {
        let v = document.getElementById('valeur1');
        compt1++;
        if (compt1 > 52) compt1 = 42;
        v.innerHTML = compt1;
    }
    let b1 = document.getElementById('btn1');
    b1.addEventListener('click', val_plus_un);

    Le test3, avec javascript en dehors du code html

    Le code html test3.html

    Le code javascript test3.js à placer dans le même dossier

    // Détection
    if(typeof localStorage!='undefined') {
      // Récupération de la valeur dans web storage
      var compteur = localStorage.getItem('compteur_test3');
      // Vérification de la présence du compteur
      if(compteur!=null) {
        // Si oui, on convertit en nombre entier la chaîne de texte qui fut stockée
        compteur = parseInt(compteur);
        // confirmation 
        alert('On a trouvé ' + compteur +' dans le localStorage');
      } else {
        // intitialisation si pas trouvée
        compteur = 41;
        // on le dit
        alert('On n'a pas trouvé dans le localStorage.\nOn a initialisé à ' + compteur);
      }
      // on le pose dans le bon endroit dans la page
      document.getElementById('valeur1').innerHTML = compteur;
    } else {
      // bug -&amp;gt; on alerte
      alert('localStorage n'est pas supporté');
    }
    // let compt1 = 41;
    function val_plus_un() {
      let v = document.getElementById('valeur1');
      // Incrémentation
      compteur++;
      if (compteur > 52) compteur = 42;
      // Stockage à nouveau en attendant la prochaine visite...
      localStorage.setItem('compteur_test3',compteur);
      // Affichage dans la page
      v.innerHTML = compteur;
    }
    let b1 = document.getElementById('btn1');
    b1.addEventListener('click', val_plus_un);
  2. Bonjour,
    Je viens de faire un des exos du cours que je vous ai conseillé.
    Et comme j’ai rajouté plein de trucs avec un tableau et la sauvegarde d’un tableau, j’ai pensé que ça vous plairait.
    Alors je partage ici.
    Bonnes vacances !

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.