Menu

Projet Mise à niveau : faire son miel de tous les enseignements

Objectifs pédagogiques

intégrer ce qui a été vu en cours et en exercices (JavaScript comme un langage de programmation "ordinaire" ; JavaScript pour la programmation côté client, la programmation événementielle, etc.).

Matériel pédagogique et exemples

Vous disposez des transparents (envoyés par mail par B. Habert) et du jeu d'exemples :

1. Les fonctions fournies pour créer le texte HTML d'une table correspondant à un tableau ou pour créer l'objet DOM incarnant une table HTML sont des fonctions prenant un tableau :
   • uni-dimensionnel (pas un tableau de tableaux) ;
   • sans en-tête (la première valeur ne sert pas de "titres" aux éléments suivants).
   Il faut donc les modifier pour pouvoir traiter des tableaux à 2 dimensions et avec en-être. NB Vous pouvez tester ces fonctions sous node et vous n'avez pas besoin dans un premier temps d'intégrer cela dans un script.
   Des éléments pour y arriver figurent dans les transparents à la fin.
2. Il faut vous faire une bonne représentation d'une part d'un objet table manipulé par le DOM et d'autre part de la notation textuelle en HTML.
   Vous vous inspirerez des transparents.
   Faites-le sur un petit exemple jouet, comme celui du début du fichier concernant les infirmières :
   

   id        age        etudes        diplome        anciennete        service
   41        26        3        BEPC        0.00        
   2        29        3        BEPC        2.50        Jour
   4        31        3        BEPC        7.00        Jour
   6        30        4        BEPC        7.00        Jour

Conseils :

• Relisez soigneusement les transparents
• Regardez bien les différences de fonctionnement du jeu d'exemples
• Comparez le code source des différents exemples

Préambule

La première étape va être de reprendre une partie des techniques vues jusqu'ici sur les données utilisées (Prématurés00)
NB : si nécessaire (re)lire les pages PDF fournies le premier jour et expliquant les informations attachées aux infirmières, aux bébés et aux fiches.

En entrée, vous disposez de 3 fichiers JavaScript fournissant les informations respectivement sur les infirmières, les bébés, les fiches (version de départ) :

1. fiches_depart.js
2. infirmieres.js
3. bebes_princeps.js

Ces données sont intégrés dans un script qui stocke toutes les valeurs dans une variable. À chaque fois, il s'agit d'un tableau de tableaux, du type var = [, , ...];.
Par exemple, pour les infirmières :

var tabInf = [['id', 'âge', "années d'études", 'diplôme', 'ancienneté', 'service'], ['41', 26, 3, 'BEPC', 0.00, ''], ['2', 29, 3, 'BEPC', 2.50, 'Jour'], ['4', 31, 3, 'BEPC', 7.00, 'Jour'], ['6', 30, 4, 'BEPC', 7.00, 'Jour'], ['9', 27, 3, 'BEPC', 3.00, 'Jour'], ['13', 34, 3, 'BEPC', 3.00, 'Jour'], ['18', 27, 4, 'BEPC', 2.50, 'Jour'], ['19', 28, 3, 'BEPC', 5.00, 'Jour'], ['21', 31, 4, 'BEPC', 8.00, 'Jour'], ['24', 26, 4, 'BEPC', 0.00, 'Jour'], ['32', 26, 3, 'BEPC', 0.00, 'Jour'], ['34', 31, 4, 'BEPC', 0.00, 'Jour'], ['36', 26, 4, 'BEPC', 2.00, 'Jour'], ['39', 33, 4, 'BEPC', 3.00, 'Jour'], ['43', 26, 4, 'BEPC', 2.00, 'Jour'], ['46', 21, 3, 'BEPC', 0.00, 'Jour'], ['61', 26, 4, 'BEPC', 3.00, 'Jour'], ['62', 33, 3, 'BEPC', 1.00, 'Jour'], ['65', 21, 3, 'BEPC', 0.50, 'Jour'], ['67', 25, 4, 'BEPC', 0.00, 'Jour'], ['68', 24, 4, 'BEPC', 0.00, 'Jour'], ['70', 29, 3, 'BEPC', 0.00, 'Jour'], ['81', 25, 3, 'BEPC', 0.00, 'Jour'], ['97', 25, 3, 'BEPC', 0.00, 'Jour'], ['99', 31, 4, 'BEPC', 8.50, 'Jour'], ['8', 44, 3, 'BEPC', 19.00, 'Jour'], ['3', 34, 3, 'BEPC', 5.00, 'Nuit'], ['7', 39, 4, 'BEPC', 19.00, 'Nuit'], ['10', 35, 3, 'BEPC', 11.00, 'Nuit'], ['12', 40, 3, 'BEPC', 20.00, 'Nuit'], ['14', 40, 3, 'BEPC', 14.00, 'Nuit'], ['16', 30, 4, 'BEPC', 6.50, 'Nuit'], ['20', 28, 3, 'BEPC', 6.00, 'Nuit'], ['28', 38, 3, 'BEPC', 17.00, 'Nuit'], ['44', 29, 3, 'BEPC', 2.00, 'Nuit'], ['47', 30, 3, 'BEPC', 3.00, 'Nuit'], ['58', 31, 3, 'BEPC', 8.00, 'Nuit'], ['1', 23, 4, 'BEPC', 0.00, 'Nuit'], ['17', 38, 4, 'BAC', 14.00, 'Jour'], ['33', 34, 4, 'BAC', 0.00, 'Jour'], ['22', 31, 3, 'BAC', 9.00, 'Jour'], ['73', 29, 3, 'BAC', 1.50, 'Jour']] ;

Fonctionnement :
Le premier (sous-)tableau donne les titres des cases des colonnes des autres tableaux : ['id', 'âge', "années d'études", 'diplôme', 'ancienneté', 'service']
Exemple pour l'infirmière dont les informations sont fournies dans le 2ème (sous-)tableau : ['41', 26, 3, 'BEPC', 0.00, '']

Aide : vous pouvez éventuellement rajouter des passages à la ligne et de l'indentation pour mieux voir la structure.

Résultat attendu

Structure générale

Vous devez créer un site Web structuré comme suit :

• Une page index.html qui contient un menu permettant de naviguer entre les volets du site (comme pour le CV) ;
• Une page HTML par volet :
  • inf.html
  • bb.html
  • fiches.html

Détails des pages

Pour chaque volet, il s'agit de :

• lire le fichier .js correspondant et donc disposer à l'issue de cette lecture de la variable permettant d'accéder au tableau de tableaux représentant les informations sur les entités de ce volet (les infirmières, ou les bébés, ou les fiches)
• à partir du tableau JavaScript dont vous disposez, créer sur la page le tableau HTML qui va afficher les données du tableau.

Modélisation

• Ecrire en HTML la représentation de cet exemple
• Dessiner (avec le logiciel que vous souhaitez) l'arbre DOM correspondant

Vous allez faire plusieurs versions successives (avec des noms de dossier différents)

1. Engendrement du texte HTML correspondant aux tables HTML
2. Engendrement de l'arbre table

A chaque fois, la page :

• utilisera un script pour lire les données (le tableau JavaScript) ;
• utilisera un script pour lire les fonctions permettant soit d'engendrer du texte HTML soit d'engendrer des arbres tables.
• utilisera un script pour appeler les fonctions et insérer le résultat dans la page HTML

Modus operandi

Il vous est conseillé de :

• reprendre la structure des pages HTML de votre CV
• y rajouter le maximum d'éléments que vous pouvez écrire statiquement
• recopier cette page plusieurs fois et y faire figurer les différents contenus statiques spécifiques aux pages de votre site
• écrire un script qui analyse les données et les affiche "en vrac" dans la page Web
• modifier ce script qui récupère les données analysées et modifie l'arbre DOM de la page pour y afficher les données correctement
• rajouter aux pages le script de tri de tableaux disponible à l'adresse http://yoast.com/articles/sortable-table/ et modifier vos pages pour qu'elles l'utilisent

Déroulement du projet

La journée de mardi (en F04 - si vous avez un problème pour son ouverture, voyez Samira, qui est prévenue) est consacrée à la réalisation de ces étapes.
On utilisera la fin de la semaine pour rajouter des fonctionnalités à ces tableaux.