Cours 1 introduction (pdf) et XML et DTD (pdf)

Cours 2 Technologies Web (HTML et CSS)


L'objectif de ce TP va être de créer une page de contact dynamique.

Exercice 1 : le DOM

Ouvrir les outils de développement de votre navigateur (F12 sur Windows, ou ctrl+maj+i). Inspecter les différents éléments composant votre CV.

Exercice 2 : Import de JQuery

Importer la bibliothèque JQuery dans votre page de CV, en insérant la ligne suivante dans votre head.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

JQuery est une bibliothèque Javascript, facilitant le développement de page Web.

Exercice 3 : Sélecteur JQuery

Vérifier que chaque section de votre CV est bien englobée dans un div dont l'identifiant (id) correspond au nom de la section

<h3>Formation</h3>
<div id="formation">
...
</div>

Utiliser un sélecteur jquery pour récupérer l'objet javascript correspondant à un div. Dans la console du navigateur taper:

$("#id_d_un_div");
Par exemple: 
$("#formation");

Tester avec différents div / id.

Exercice 4 : Cacher / Afficher du contenu

Toujours dans la console, afficher ou cacher une div, en utilisant les fonctions hide() et show() de JQuery:

$("#formation").hide();

Tester aussi la fonction toggle().

Exercice 5 : Ajout d'un bouton cacher/montrer

Nous allons maintenant ajouter un bouton à l'intérieur de chaque titre:

<h3>... <button style="font-size: 50%;">cacher</button></h3>

Ce bouton permettra de controler le div associé au titre. Pour ce faire, ajouter un listener au bouton:

<h3>... <button style="font-size: 50%;" onclick="afficher('id_du_div');">cacher</button></h3>

Dans le head de votre page, au sein d'une balise scriptscript ajouter la définition d'une fonction afficher:

<!DOCTYPE html>
<html>
  <head>
  ...
  <script language="javascript" type="text/javascript">
  function afficher(id_div) {
  ...
  }
  </script>
</head>
...

Sélectioner le div passé en argument, et utiliser toggle(); pour afficher/masquer le div en question.

Exercice 6 : Intégrer un script externe à la page

Créer un fichier externe, cv.js, et l'importer dans votre page html comme vu en cours. Déplacer le code contenu dans la balise script au sein de ce fichier.

Exercice 6bis : Tester sur github

Mettre à jour votre CV sur github, comme vu dans le TP précédent.

Exercice 7 : Formulaire de contact

Créer un formulaire de contact qui contient les champs (HTML5) suivants:

  • Nom
  • Email
  • Téléphone
  • Message

Rappel : les formulaires doivent contenir des entrées typées : 

<form>
  <input type="text" name="nom" />
    ...
</form>

Créer aussi un bouton de soumission en fin de formulaire.

Ajouter un event listener "onclick" sur le bouton de soumission, appelant une fonction de vérification des champs.

Créer la fonction de vérification de champs dans le head :

<!DOCTYPE html>
  <html>
    <head>
      ...
      <script language="javascript" type="text/javascript">
        ...
      </script>
    </head>
  ...

La fonction doit vérifier les champs suivants :

  • Email : que le caractère '@' soit présent dans le mail, grâce à la méthode includes('');
  • Téléphone : que le nombre de caractères dans le numéro de téléphone soit correct (10), grâce à la propriété length

Pour vérifier un champ, assurer vous qu'il a un id, et utiliser un sélecteur pour récupérer l'élément. La fonction .val(); permet de récupér le contenu du champs dans une variable.

function validation() {
  var contenu_email = $(selecteur_champ_email).val();
  ...
  valider_email(contenu_email);
function valider_email(email){
  //vérifier que l'email contient le caractère @
  //si ce n'est pas le cas afficher une alerte.
}

En cas de champ mal formé, afficher un dialogue d'alerte indiquant quel champ est incorrect.

Bonus : pour la vérification du numéro de téléphone, vérifier que tous les caractères soient des chiffres.

Rendu

Remplir le formulaire Spiral avec le lien vers la page github.io de votre cv, avant le samedi 4/03 à minuit.