1/2

Prog. Web Coté Client Contrôle de Rattrapage (Durée : 1h30)

Documents et téléphones portables non autorisés

Exercice : Dans cet exercice on vous demande de réaliser la page d’accueil du site web LinkedIn qui regroupe plus de 150 millions de professionnels dans le monde pour échanger des idées et des informations et pour faire progresser leur carrière (Voir figure 1). Les codes HTML, CSS et JavaScript doivent être dans des fichiers séparés.

- Figure 1 -

1. Notes sur le code HTML :

La page d’accueil du site comme le montre la figue 2 est composée essentiellement de trois divisions :

• La division dont l’id est " main" contient le texte de la page d’accueil ; • La division dont l’id est " inscription " contient le formulaire d’inscription ; • La division dont l’id est " recherche" contient le formulaire de recherche d’un adhérent ; • Ces trois divisions sont dans une division globale dont l’id est "conteneur" ; • Les trois images image1.gif, image2.gif et image3.gif sont dans le dossier image ; • Le lien hypertexte du texte «identifiez-vous» dans la division "inscription " est le

fichier login.html ;

Université Ibn Tofail

Faculté des Sciences

Département d’Informatique

Kénitra

A.U. 2011/2012

Filière : SMI

Semestre 5

2/2

2. Notes sur les styles CSS :

• La division "conteneur" a une largeur de 1200px ;

• La division "main" a une largeur de 700px et une longueur de 500px ;

• La division "recherche" a une largeur de 1190px et une longueur de 150px ; • Le texte “Plus de 150 millions … leur carrière” est de couleur #43A2D2 ;

• Le texte qui est dessous est de couleur : #999 ; • Les images image1.gif, image2.gif et image3.gif doivent être insérer dans une zone de

largeur 120px et de longueur 100px ; • Le fond du titre de la boîte du formulaire d’inscription est de couleur #43A2D2 ;

3. Validation du formulaire en JavaScript :

Afin de faire des vérifications sur les formulaires de la page d’accueil du site Web LinkedIn, on vous a demandé de faire la validation du formulaire d’inscription côté client (en JavaScript). Lorsqu’un formulaire est « soumis », il doit être validé avant d’être envoyé. Les règles de validation sont les suivantes: Pour les champs du formulaire d’inscription :

• Pour les champs Nom et Prénom : o Chaque champ doit accepter seulement les caractères a-z, A-Z ainsi que les

espaces ; o Ces champs sont obligatoires et doivent avoir entre 2 et 20 caractères maximum.

• Pour le champ E-mail : o Il est obligatoire et doit contenir le caractère @ ; o Il doit contenir au moins un . (point), mais celui-ci doit être positionné au moins

une lettre après le @ et doit contenir au moins 2 lettres après. o Il ne peut commencer avec le caractère @.

• Pour le Mot de passe : Il est obligatoire et doit contenir au moins 6 caractères.

Pour les champs Nom/Prénom du formulaire de recherche : • Chaque champ est optionnel, mais s’il est rempli il doit répondre aux mêmes exigences

que des champs Nom/Prénom du formulaire d’inscription ; • Lorsque le « focus » est placé sur le champ, alors le mot «Nom » ou « Prénom » est

supprimé.

Lorsqu’un formulaire n’est pas valide lors de la soumission, une boîte d’alerte (alert) avec les erreurs doit être affichée à l’écran.

Question 1 : Ecrire le code HTML de la page d’accueil du site Web.

Question 2 : Donner le fichier externe des feuilles de styles en cascades design.css en respectant les contraintes décrites précédemment.

Question 3 : Ecrire le fichier externe JavaScript validation.js qui permet la validation des formulaires d’inscription et de recherche en respectant les règles décrites précédemment.