Installer un outil de travail

Pour pouvoir analyser et déboguer vos scripts JavaScript, installez dans Firefox FireBug Il vous permet notamment de visualiser le document généré par votre script.

Réagir aux événements et modifier le style

On peut accéder à un élément spécifique d'un document par son attribut id via document.getElementById(valeur_identifiant) . On peut ensuite accéder ou positionner son style par document.getElementById(valeur_identifiant).style. Par exemple,
document.getElementById(valeur_identifiant).style.backgroundColor = "red";
document.getElementById(valeur_identifiant).style.textAlign = "right";.

Allez voir sur w3schools la référence DOM HTML pour une liste bien présentée des propriétés de ces objets, ou bien Mozilla. La référence officielle se trouve sur le site du W3C.

Au passage, vous apprécierez sûrement d'ajouter un filtre anti-publicité sur votre navigateur Firefox.

Écrivez une page HTML avec des boutons qui changent la couleur du fond de la page (document.body vous permet d'accéder au corps de votre document).

Dans la page pour l'association de danse sur laquelle vous avez déjà travaillé (dans cet exercice), écrivez une fonction javascript qui colore le fond d'une section lorsque l'utilisateur passe la souris au-dessus (événements onMouseOver et onMouseOut).

Maintenant, au chargement, cette page ne doit montrer que la première section. Ensuite, un cliquant sur les liens de votre menu, seule la section correspondante doit s'afficher (être visible).

Soit une page HTML contenant une liste :

Licence
Master
Doctorat

Lorsque la souris passe sur chacun de ces éléments, elle doit afficher dans une boîte à droite un petit texte explicatif (Ceci est un diplome Bac+3, Ceci est un diplome Bac+5, Ceci est un diplome Bac+8).

Avec des formulaires

Réalisez un convertisseur degrés Fahrenheit vers degrés Celsius. Ce convertisseur doit fonctionner dans les deux sens.

Le sondage impossible.
Faites un sondage pour savoir ce que pensent les internautes de votre site. Le trouvent-ils très bien, bien, ou nul? Mais attention, dès que la souris de votre internaute se rapproche trop près d'une des options bien ou nul, les labels des options changent, de manière à ce que votre internaute ne puisse choisir que très bien.

Faites un formulaire pour saisir l'identité d'une personne :

civilité (Monsieur, Madame, Mademoiselle)
nom patronymique
nom marital
prénom
adresse mél

Les nom, prénom et adresse mél ne peuvent être remplis que quand la civilité a été choisie. Le nom marital ne peut être rempli que si l'internaute est une dame (oui, c'est un formulaire très vieille France). Enfin, le formulaire ne peut être soumis que si tous les champs sont renseignés et que l'adresse mél semble syntaxiquement correcte (au moins un @). Dans le cas où un champ pose problème, il doit être signalé visuellement.

Vous voulez permettre à un internaute de changer la feuille de style d'une page. Faites un formulaire qui propose dans une liste le noms de plusieurs feuilles de style. Lorsqu'un internaute sélectionne une feuille de style, c'est cette css qui s'applique.

Il y a plusieurs possibilités pour cet exercice : soit toutes les css sont déclarées dans l'entête de la page (en stylesheet ou en alternate stylesheet), et la sélection dans la liste détermine la feuille de style dont l'attribut disabled vaut false; soit vous remplacez l'url de la css par défaut.

Pour bénéficier d'un navigateur qui sait gérer les alternate stylesheet, vous pouvez télécharger et installer un add on pour firefox.

HTML - JavaScript - PHP - Bases de Données

Installez (si ce n'est déjà fait) un client postgresql sur votre poste. Vous pouvez vous connecter librement à la base biblio sur le serveur postgresql de slinux. Cette base modélise la gestion d'une bibliothèque, les oeuvres qu'elle propose, les exemplaires de ces oeuvres, et les emprunts faits par les adhérents. Écrivez une page qui récupère la liste des adhérents et la liste des livres empruntés de cet adhérent. La liste des livres ne doit être visible que pour un adhérent à la fois, lorsque le souris passe au-dessus de son nom (événement onMouseOver).

L'utilisateur apache peut se connecter à la base biblio sans mot de passe pour faire des requêtes select.

Si vous souhaitez utiliser un autre SGBD (MySQL) ou votre propre serveur de bases de données Postgres, vous trouverez ici le script de création et de peuplement de la base :

Ouverture de fenêtres

Cherchez de la documentation sur les ouvertures :

de fenêtres pop-up pour
- un message (alert())
- une confirmation (confirm())
- une question (prompt())
d'une fenêtre standard (objet window, méthodes open(), ...)

Dans un document HTML, ajoutez le code JavaScript nécessaire pour qu'un message apparaisse à l'arrivée d'un utilisateur sur la page et au moment de son départ.

Dans un document HTML, créez un bouton qui ouvre dans une nouvelle fenêtre le site du W3C.

Dans un document HTML, choisissez dans une liste déroulante la page que vous voulez ouvrir dans une nouvelle fenêtre.

Dans un document HTML, créez un bouton qui demande à l'utilisateur quelle page il veut voir s'ouvrir dans une nouvelle fenêtre.

Pour aller plus loin

Cherchez de la documentation sur le Web concernant :

comment cacher une colonne d'un tableau