TP4

Université Frères Mentouri Constantine 1 Le 02 décambre 2024
Faculté des Sciences et de la Technologie

Département d’électronique
M2 Réseaux et Télécommunication
Unité : Technologies Web
TP4
HTML et JavaScript
Les objectifs de ce TP sont les suivants :

À la fin de ce TP, l'étudiant disposera des outils et des compétences nécessaires pour manipuler
un formulaire HTML avec JavaScript en utilisant des fichiers JS externes et des scripts
internes. Les objectifs spécifiques sont les suivants :
• Rédiger et exécuter des scripts JavaScript simples.
• Comprendre le rôle de JavaScript dans l'amélioration de l'interactivité des pages web.
• Accéder aux éléments d’un formulaire HTML et les modifier via le DOM.
Travail demandé
Dans ce TP, nous allons créer un formulaire de facture étape par étape en utilisant diverses
balises HTML, le formater avec des règles CSS, puis utiliser JavaScript pour accéder et modifier
les éléments HTML du formulaire.
Étape 1 : Création des documents
1. Créez un dossier, qui sera le dossier racine de votre site web, sur le bureau de Windows,
et nommez-le avec votre nom complet.
2. Ouvrez l'éditeur et créez un nouveau document HTML nommé invoice.html dans votre
dossier racine.
3. Configurez la structure de base de ce document HTML en définissant la langue comme
étant l’anglais.
4. Ajoutez dans l’en-tête de la page :
• Un titre pour la page : "My Invoice".
1
• Un lien vers le fichier CSS.
• Des balises meta spécifiant le codage des caractères, l’auteur et les mots-clés
suivants :
• Formulaires HTML
• HTML de base
• Formatage CSS
• JavaScript de base
Étape 2 : Création du formulaire HTML
1. Saisissez le contenu du formulaire de facture présenté dans l'image de référence dans le

corps de votre document invoice.html.
2
Étape 3 : Document CSS
1. Créez un fichier séparé nommé style.css dans le dossier racine.

2. Ajoutez vos propres règles CSS personnalisées pour formater le formulaire de facture.
3. Ajoutez un lien vers ce fichier CSS dans votre document HTML.
Étape 4 : Fichier JavaScript
2. Créez un fichier JavaScript séparé nommé myscript.js dans le dossier racine.

3. Ajoutez un lien vers ce fichier JS dans votre document HTML.
4. Créez et appelez une fonction JavaScript nommée date () pour afficher la date du jour
dans le format spécifié.
5. Créez et appelez une fonction JavaScript nommée Providers () pour afficher les
informations d’un fournisseur (ID, Full Name and phone number) après avoir
sélectionné un fournisseur (Provider) dans la liste et cliqué sur le bouton de Validation,
comme le montrent la figure ci-dessous. Ce tableau présente les informations de chaque
fournisseur (provider), mais vous pouvez proposer votre tableau.
3
6. Créez et appelez une fonction JavaScript pour ajouter de nouvelles lignes au tableau des
articles en fonction des champs saisis (Description, Quantity, Unit Price), comme
illustré dans la figure ci-dessous (Total = Quantity* Unit Price).
Remarque : Utilisez dans cette fonction les méthodes insertRow et insertCell. La
méthode insertRow () crée un élément <tr> vide et l'ajoute à un tableau. Elle insère la ou
les nouvelles lignes à l'indice spécifié dans le tableau. La méthode insertCell () insère
une cellule dans la ligne actuelle.
Exemple : Insérer une ou plusieurs nouvelles lignes à la première position d'un tableau
(et insérer un élément <td> avec du contenu).
La figure ci-dessous montre un exemple d’ajout de nouvelles lignes au tableau des articles.
7. Utilisez la même fonction (question 6) pour calculer et afficher le montant hors taxes à
payer (The amount to be paid excluding tax) en utilisant la formule suivante :
𝑀𝑜𝑛𝑡𝑎𝑛𝑡 = ∑𝑛𝑖=1 𝑄𝑖 , où 𝑄𝑖 représente la quantité achetée pour l'article 𝑃𝑖 .
4
8. Toujours avec la fonction précédente, calculez et affichez le taux de réduction (the
discount rate) :
• 5 % si le montant hors taxes dépasse 250 DZD.
• 10 % si le montant dépasse 500 DZD.
• 0 % si le montant est inférieur à 250 DZD.
9. Utilisez la même fonction de question 6 pour calculer et afficher « the amount to be
paid including tax » (taxe = 15%) selon la formule suivante: The amount to be paid
including tax = ((the amount to be paid excluding tax- the discount rate) *15)/100.
10. Créez et appelez une fonction pour afficher toutes les informations de la facture dans une
nouvelle fenêtre du navigateur lorsque vous cliquez sur le bouton Show the invoice
Details.
11. Ajoutez un script pour réinitialiser le formulaire lorsque vous cliquez sur le bouton Erase
the entries.
12. Ajoutez un script pour imprimer le formulaire lorsque vous cliquez sur le bouton Print.
13. Ajoutez un script permettant de fermer la fenêtre de la facture lorsque vous cliquez sur le
bouton Close.

TP4

Transféré par

Droits d'auteur :

Formats disponibles

TP4

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP4

Transféré par

Droits d'auteur :

Formats disponibles

Université Frères Mentouri Constantine 1 Le 02 décambre 2024

Faculté des Sciences et de la Technologie

Les objectifs de ce TP sont les suivants :

Étape 1 : Création des documents

Étape 2 : Création du formulaire HTML

1. Saisissez le contenu du formulaire de facture présenté dans l'image de référence dans le

1. Créez un fichier séparé nommé style.css dans le dossier racine.

Étape 4 : Fichier JavaScript

2. Créez un fichier JavaScript séparé nommé myscript.js dans le dossier racine.

Vous aimerez peut-être aussi