TD JavaScript n°2 : JavaScript dans le navigateur

Niveau : 1SIO
Environnement : navigateur web (page HTML + fichier JavaScript), éditeur de texte

Organisation des fichiers

• Les pages HTML portent le nom indiqué dans le titre de chaque exercice et sont placées dans le sous-dossier ex-js.
• Le code JavaScript de tous les exercices est regroupé dans un même fichier exercices.js.
• Chaque page HTML inclut ce fichier avec une balise <script src=“exercices.js”></script>.
• Ouvrez la console du navigateur (touche F12) pour repérer les erreurs.

Changer la couleur de fond de la page web en cliquant sur un bouton.

Ajouter un élément à une liste HTML à chaque fois qu'un bouton est cliqué.
L'élément à ajouter peut être saisi dans une zone de texte.

Calculer la somme de deux nombres entrés par l'utilisateur dans des champs de texte.
Le calcul s'effectue au clic sur un bouton.

Afficher une image différente en fonction du choix de l'utilisateur dans une liste déroulante.

Afficher un message d'alerte lorsque l'utilisateur passe la souris sur un élément spécifique de la page.

Créer une horloge numérique qui se met à jour en temps réel.

Demander à l'utilisateur de confirmer s'il souhaite supprimer un élément spécifique de la page, puis procéder à la suppression en fonction de sa réponse.

Cacher ou afficher un élément spécifique de la page en fonction du statut d'une case à cocher.

Créer un formulaire de contact simple qui permet à l'utilisateur de saisir :

• son nom,
• son adresse e-mail,
• son message.

Lorsque l'utilisateur clique sur le bouton « Envoyer », afficher les informations saisies dans la console du navigateur.

Créer une interface exemple permettant de visualiser les changements des principaux attributs de style d'un texte :

Créer une calculatrice interfacée de la façon suivante :

• Générer si possible l'interface à partir de JavaScript.
• L'affichage devra présenter le résultat, ainsi que l'opération réalisée.

Créer un programme qui affiche une liste de tâches à faire. L'utilisateur doit pouvoir :

• ajouter de nouvelles tâches à la liste,
• modifier une tâche existante,
• cocher les tâches terminées,
• supprimer les tâches terminées,
• sauvegarder ses tâches sous un nom dans le local storage du navigateur,
• recharger une liste de tâches précédemment sauvegardée.