Nous allons écrire le fichier
news.html qui affichera les données contenues dans news.js. Pour que ce fichier n'ait plus à
être modifié, l'affichage de la base se fera en JavaScript.En utilisant un tableau d'objets, nous allons pouvoir créer une petite base de données dont l'intérêt est de pouvoir être facilement mise à jour.
Notre base de données représentera un historique : chaque enregistrement représentera un évènement défini par un titre, une date et un contenu. Un fichier externe nommé news.js contiendra l'ensemble des enregistrements formant la base de données.
Les enregistrements de notre base de données seront représentés par des objets de type Nouvelle qui auront 3 propriétés : date, titre et contenu. Le constructeur aura la forme suivante :
Nous allons utiliser un tableau nommé base qui contiendra l'ensemble des enregistrements. Une fonction ajoute permettra d'ajouter facilement un nouvel enregistrement.
Cela nous donne :
Il nous suffit maintenant d'utiliser la fonction ajoute pour ajouter de nouveaux enregistrements. Par exemple :
L'ensemble des éléments précédents est enregistré dans le fichier news.js; c'est ce seul fichier qui devra être complété pour ajouter de nouveaux enregistrements. L'affichage des données se fera de façon indépendante.
Nous allons écrire le fichier
news.html qui affichera les données contenues dans news.js. Pour que ce fichier n'ait plus à
être modifié, l'affichage de la base se fera en JavaScript.
Le chargement de news.js se fera dans l'entête du fichier HTML en écrivant :
Pour présenter les données nous utiliserons un tableau HTML de 7 colonnes : 3 colonnes pour les données et 4 colonnes de séparations.
La déclaration du tableau et première ligne contenant les titres seront écrits en HTML :
Les lignes suivantes du tableau seront écrites en JavaScript (on ne connait pas leur nombre et leur contenu se trouve dans news.js). Nous ferons alterner des fonds blancs et gris pour améliorer la lecture.
Cela nous donne :
Nous revenons au HTML pour terminer et fermer le tableau HTML.