Scribd
Importer
8 vues2 pages

TP JavaScript : Calculatrice et API

Le document présente un TP de JavaScript pour l'année universitaire 2024-2025 à l'Université Ibn Zohr, comprenant quatre exercices. Les exercices incluent la création d'une calculatrice simple, le changement de couleur d'un texte au clic, la manipulation d'API avec fetch() pour récupérer des données et l'affichage de produits sous forme de cartes. Chaque exercice fournit des instructions précises sur la mise en œuvre des fonctionnalités demandées.

Transféré par

bentaher.d137683934
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
8 vues2 pages

TP JavaScript : Calculatrice et API

Le document présente un TP de JavaScript pour l'année universitaire 2024-2025 à l'Université Ibn Zohr, comprenant quatre exercices. Les exercices incluent la création d'une calculatrice simple, le changement de couleur d'un texte au clic, la manipulation d'API avec fetch() pour récupérer des données et l'affichage de produits sous forme de cartes. Chaque exercice fournit des instructions précises sur la mise en œuvre des fonctionnalités demandées.

Transféré par

bentaher.d137683934
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Université Ibn Zohr

A.U. 2024-2025
Ecole nationale des sciences appliquées à
Semestre 2
Agadir

Technologies du Web
TP 3 : JavaScript

Exercice 1 : Calculatrice simple


Objectif :
Créer un script JavaScript qui demande à l’utilisateur deux nombres, effectue une opération
(addition, soustraction, multiplication ou division) et affiche le résultat.

Instructions :
— Demander à l’utilisateur de saisir deux nombres via prompt().
— Demander l’opération à effectuer (+, -, *, /).
— Effectuer l’opération choisie.
— Afficher le résultat dans une boîte d’alerte (alert()).

Exercice 2 : Changer la couleur d’un texte au clic


Objectif :
Créer une page où l’utilisateur peut cliquer sur un bouton pour changer la couleur du texte
dynamiquement.

Instructions :
— Ajouter un texte (<p>) et un bouton (<button>).
— Lorsqu’on clique sur le bouton, la couleur du texte change de manière aléatoire.
— Utiliser [Link]() pour générer une couleur aléatoire.

Exercice 3 : Manipulation des API avec fetch()


Objectif :
Récupérer et afficher des données depuis une API publique en utilisant fetch(), puis afficher
les résultats dans le DOM.

1
Instructions :
— Utilisez l’API JSONPlaceholder pour récupérer une liste d’utilisateurs (JSONPlacehol-
der).
— Faites une requête fetch() pour obtenir les données.
— Transformez la réponse en format JSON.
— Affichez la liste des utilisateurs dans une page HTML sous forme de liste <ul>.
— Gérez les erreurs avec catch().

Exercice 4 : Afficher des Produits depuis une API dans des


Cartes avec fetch()
Objectif :
Créer une page web qui récupère des produits depuis une API et les affiche sous forme de
cartes en utilisant Flexbox.

Instructions : Créez les fichiers nécessaires


Dans un dossier nommé api-products, créez les trois fichiers suivants :
— [Link]
— [Link]
— [Link]

Structurez votre page HTML ([Link])


— Ajoutez un titre <h1> indiquant "Liste des Produits".
— Ajoutez une <div> avec l’id productsContainer qui contiendra les cartes des produits.
— Liez les fichiers CSS et JavaScript dans la page.

Stylisez l’affichage avec CSS ([Link])


— Centrez le titre.
— Utilisez display: flex; pour organiser les produits sous forme de grille.
— Ajoutez des ombres et des bordures arrondies aux cartes des produits.

Récupérez les produits via une API avec JavaScript ([Link])


— Faites une requête fetch() pour récupérer les produits depuis Fake Store API.
— Transformez la réponse en JSON.
— Créez dynamiquement des cartes contenant une image, un titre et un prix.
— Insérez ces cartes dans la <div> avec l’id productsContainer.

Vous aimerez peut-être aussi