Installer un outil de travail
Le cours en version transparents et en version article.
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.
Vous pouvez utiliser aussi le navigateur Chromium qui a des outils agréables pour déboguer et pister vos scripts JavaScript.
Ajoutez le site
de w3Schools dans vos
signets et utilisez-le pour vos problèmes de syntaxe en
Javascript.
Au passage, vous apprécierez sûrement d'ajouter un filtre
anti-publicité sur votre navigateur Firefox.
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.
É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 :
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. Dans
ce cas, vous pouvez récupérer toutes les feuilles de style d'un
document par document.styleSheets qui vous
retourne les feuilles de style dans un tableau. Vous accédez
ensuite directement à l'attribut disabled
par document.styleSheets[i].disabled, auquel vous
pouvez affecter la valeur booléenne souhaitée.
- 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
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 :