Scribd
Importer
8 vues2 pages

TP3 - CSS JavaScript

Le document présente un TP sur le développement d'applications web, axé sur l'utilisation de CSS et JavaScript. Il inclut des exercices pratiques tels que la création d'un formulaire stylisé, l'intégration de JavaScript interne et externe, ainsi que la gestion d'événements et la vérification de formulaires. Les étudiants doivent tester leurs créations dans un navigateur et s'assurer de l'intégrité des données envoyées.

Transféré par

Leïla Ourred
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

TP3 - CSS JavaScript

Le document présente un TP sur le développement d'applications web, axé sur l'utilisation de CSS et JavaScript. Il inclut des exercices pratiques tels que la création d'un formulaire stylisé, l'intégration de JavaScript interne et externe, ainsi que la gestion d'événements et la vérification de formulaires. Les étudiants doivent tester leurs créations dans un navigateur et s'assurer de l'intégrité des données envoyées.

Transféré par

Leïla Ourred
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
Vous êtes sur la page 1/ 2

Université AMMARA Mohamed Lakhder d’ElOued

Faculté des sciences et technologie


Département Math et info. 2ème année Licence Informatique
Module : Développement d’Application Web
TP3 – CSS/JavaScript

1- CSS
Munissez le formulaire créer dans le TP2 d’une feuille de style CSS.. L’aspect général de
votre formulaire devra ressembler à l’image suivante. Faites attention aux détails (arrière-
plan du textarea, les bordures, etc.).

Vous pouvez utiliser le site "https://css-tricks.com/examples/ButtonMaker/#" Pour générer


le code css du bouton.

2- JavaScript:
Exercice 1: code JavaScript interne au document
Créer le document à partir du code source fourni ci-dessous. Quelle est l’extension à
donner à ce document ?
<HTML>
<HEAD>
<TITLE>Exercice 1 JavaScript</TITLE>
<SCRIPT TYPE="text/javascript">
document.write("<P>Du texte écrit en javascript.</P>");
alert("Hello world ! en javascript");
</SCRIPT>
</HEAD>
<BODY>
<P>Du texte écrit en HTML.</P>
</BODY>
</HTML>
Tester dans un navigateur.
1
Reprendre l’exemple précédent mais en plaçant le script dans un fichier externe script1.js.
Tester dans un navigateur.

Exercice 2 : gestionnaire d’évènement en javascript


Créer le document à partir du code source fourni ci-dessous.
<HTML>
<HEAD>
<TITLE>Exercice 4 JavaScript</TITLE>
</HEAD>
<BODY onLoad=alert("Bienvenue sur ma page !")>
<P>Je suis un document HTML.</P>
</BODY>
</HTML>
-Tester dans un navigateur.
-Que se passe-t-il lors du chargement de la page dans un navigateur ?
-Modifier l’exemple précédent pour qu’une boîte de dialogue modale affiche « À bientôt ! »
lorsqu’on quitte la page. Quel est alors le nom de l’évènement à gérer ? Tester dans un
navigateur le changement produit.
Exercice3 : vérification de formulaire
L’objectif principal de cette étape est d’assurer l’intégrité des données envoyées par les
formulaires vers le serveur. En effet, il serait inutile de surcharger le serveur avec l’envoi de
données manquantes, incomplètes ou incorrectes. Cette vérification peut donc se faire côté
client par le langage JavaScript. Une fois les données du formulaire contrôlées (toutes les
informations sont présentes et cohérentes), réaliser son envoi par mail sous forme d’un texte
simple :
Modifier le bouton "Envoyer" dans la page formulaire.html de telle manière que :
– le formulaire ne soit plus envoyé automatiquement (il faut donc changer le
type="submit" en type="button")
– lorsqu’on clique sur le bouton, la fonction verifierFormulaire() soit appelée :
function verifierFormulaire()
{
var formulaire = document.getElementById(’for’) ;
var valid = 1;
// vérifications ...
// Le formulaire est-il validé ?
if(valid == 1)
{
// Alors envoyer le formulaire (appel de la méthode submit)
// et retourner true
}
else // Sinon retourner false
}
Critère à realizer:
- on n’acceptera pas les champs non remplis.
- les deux mots de passe doit être identique.
- Vérifier l'adresse email .

Vous aimerez peut-être aussi