Objectif :
Le but est de vérifier que le formulaire de saisie d'une annonce soit correctement rempli avant soumission. Il faut donc vérifier que le titre de l'annonce ainsi que le texte de l'annonce ne soient pas vides pour éviter d'avoir des annonces incomplètes. Cette vérification se fera au niveau de la balise <form> (évènement onSubmit)
On peut également indiquer à l'utilisateur le champ qu'il est en train de saisir en utilisant un jeu de couleurs: on parle alors de changement de couleur du champ à la prise de focus (évènement onFocus)
On mettra une alerte sous forme d'une fenêtre "Pop-Up" lorsque l'utilisateur quittera un champ de saisie sans avoir rien rempli : on mettra l'alerte sur la perte de focus du champ (évènement onBlur)
Au chargement de la page (évènement onLoad), on mettra une information à l'utilisateur en lui rappelant qu'il doit saisir les champs obligatoires "titre" et "texte" de l'annonce
Pour égayer la page, on s'amusera à changer le logo HEI lorsque la souris survolera celui-ci (évènements onmouseover et onmouseout)
Pour faciliter le TD, nous avons déjà élaboré toutes ces fonctions JavaScript répondant à l'exercice. Ces fonctions se trouvent dans un fichier appelé mesScripts.js que vous devez télécharger et enregistrer dans le répertoire pages (si le téléchargement ne fonctionne pas, recopier le contenu ci-dessous et copier-le en créant un fichier nommé mesScripts.js
Il vous reste à reprendre le fichier qui permet d'ajouter une annonce (ajouter.php) et de compléter celui-ci pour faire appel aux fonctions ad hoc !
Code JavaScript du fichier "mesScripts.js" 
/* *************************************** */
/* Teste un champ s'il est vide ou pas */
/* paramètre en entrée: champAtester */
/* cette fonction renvoie vrai ou faux */
/* *************************************** */
function testerChamp(champAtester)
{
// on récupère la valeur du champ à tester
var t = document.getElementById(champAtester).value ;
// on teste s'il est vide
if (t == "")
{
alert("Il manque le "+champAtester+" de l'annonce !") ;
return false ;
}
else
{
return true ;
}
}
/* **************************************** */
/* Teste si le formulaire (les deux champs) */
/* champ1 : titre */
/* champ2 : texte */
/* **************************************** */
function verif(champ1,champ2)
{
// on teste le titre
if (testerChamp(champ1)==true )
{
// on teste le texte
if (testerChamp(champ2) == true)
{
// les deux champs sont remplis
// on met le titre en majuscule
var x=document.getElementById(champ1);
x.value = x.value.toUpperCase() ;
return true ;
}
else
{
// le champ texte n'est pas rempli
// on donne le focus au champ
document.getElementById(champ2).focus();
return false;
}
}
else
{
// le champ titre n'est pas rempli
// on donne le focus au champ
document.getElementById(champ1).focus();
return false;
}
}
/* **************************************** */
/* prise de focus */
/* on met le champ en jaune */
/* **************************************** */
function myFocusFunction(idChamp)
{
document.getElementById(idChamp).style.backgroundColor = "yellow";
}
/* **************************************** */
/* Perte de focus */
/* on met le champ en blanc */
/* **************************************** */
function myBlurFunction(idChamp)
{
document.getElementById(idChamp).style.backgroundColor = "white";
}
/* **************************************** */
/* Affichage ou masquage de l'aide */
/* **************************************** */
function afficheMasque (idChamp)
{
// si le champ est caché (hidden) , on le rend visible
// on change le libellé du bouton en "Masquer les astuces"
if (document.getElementById(idChamp).style.visibility=="hidden")
{
// rend visible la balise désignée par id
document.getElementById(idChamp).style.visibility="visible";
document.getElementById('BTN').value='Masquer les astuces';
}
else // sinon on le masque et le libellé devient "Afficher les astuces"
{
document.getElementById(idChamp).style.visibility="hidden";
document.getElementById('BTN').value='Afficher les astuces';
}
}
Comme pour inclure des propriétés CSS ou des fonctions PHP dans un fichier, il y a également un moyen pour inclure des fonctions externes JavaScript comme le montre l'exemple suivant:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<script language="javascript" type="text/javascript" src="mesScripts.js"></script>
</head>
<body>
...
</body>
</html>
Ces deux tests ne sont pas suffisants car ils n'empêchent pas l'utilisateur de cliquer sur le bouton de validation de l'annonce qui reste fonctionnel !!!!!
