Objet SPINNER |
Un spinner est un objet graphique constitué d'une zone de saisie (texte contenant un nombre entier) associée à 2 boutons : flèche vers le hautet flèche vers le bas
.
Son fonctionnement est le suivant :
- Le clic avec la souris sur la flèche
- Le clic avec la souris sur la flèche
- L'utilisateur peut modifier directement le nombre par modification dans la zone de saisie (avec contrôle de la valeur saisie).
De nombreuses options permettent de personnaliser son fonctionnement :
Voici un exemple de spinner dont la valeur peut varier de 0 à 20 : L'ensemble des fichiers permettant de manipuler cet objet, ainsi qu'une page HTML de test, sont accessibles pour téléchargement au format d'archive Zip en cliquant ICI.
- Taille de la zone de saisie
- Valeur initiale
- Valeur d'incrément
- Nombre de chiffres affichés après la virgule
- Bornes minimale et maximale
- Circularité : après avoir atteint la borne maximum, on repasse directement au minimum (et inversement) ou le compteur reste bloqué à la borne
- Position des boutons : à droite ou à gauche de la zone de saisie
- Période de répétition si un des boutons reste enfoncé
Le manuel d'utilisation de cet objet est disponible ICI.
Pour lire les fichiers d'archive Zip, vous devez disposer d'un logiciel compatible avec WinZip.
Pour obtenir WinZip (shareware), cliquez sur l'icône :
Poissons qui suivent la souris |
J'ai récupéré ce code JavaScript sur le site de Frank Milard (http://www.asaisir.com/a-la-page).
Pour l'utiliser, il vous faut :
- le code du script : fish.js à enregistrer dans le même répertoire que la page dans laquelle vous souhaitez l'utiliser
- les fichiers images des poissons : clic droit sur chacune des 2 images ci dessous puis Enregistrer l'image sous ...
- le code à inclure dans votre page pour l'utiliser :
<script src="..../fish.js"></script>
Déboguage des JavaScripts |
Quand un JavaScript ne fonctionne pas correctement, Netscape et Internet Explorer permettent de visualiser les erreurs.
Mais, bien entendu, le mode opératoire pour visualiser l'erreur est différent selon le navigateur.
Ce code JavaScript permet de s'affranchir du navigateur en traitant soi-même les erreurs.
Dans le cas présent, je fais afficher une fenêtre popup, centrée sur l'écran, qui affiche les informations d'erreur.
Par exemple, cliquer sur le bouton ci-dessous pour générer une erreur de JavaScript :Pour l'utiliser, il vous faut :
- le code du script : error.js à enregistrer sur le serveur
- le code à inclure dans votre page pour l'utiliser :
Dans la partie HEAD de votre page, ajouter les deux lignes suivantes :
<script src="..../error.js"></script>
<script language="JavaScript"> window.onerror = prReportError; </script>
où .... est le répertoire dans lequel se trouve le fichier de script
Horloge digitale |
Ce code, également trouvé sur le site The JavaScript Source (http://javascript.internet.com), permet d'afficher une horloge digitale, comme celle ci-dessous.
J'ai un peu adapté ce script pour permettre l'affichage au format 24 heures (sans AM ou PM).
Pour l'utiliser, il vous faut :
- les fichiers images des chiffres : clic droit sur chacune des images ci dessous puis Enregistrer l'image sous ... (les enregistrer dans un répertoire nommé pics)
- le code du script : digital-clock.js à enregistrer sur le serveur dans le même répertoire que le sous-répertoire digital-clock
- le code à inclure dans votre page pour l'utiliser :
Dans l'entête de votre page (entre les balises <head> et </head>) ajouter la ligne suivante :<script src="..../digital-clock.js"></script>Dans la déclaration du corps de votre page (dans la balise <body>) ajouter le code suivant :
<body onLoad='clock_run();'>Dans le corps de votre page (entre les balises <body> et </body>) ajouter le code suivant à l'endroit où vous voulez créer l'horloge digitale :
<script language=javascript> clock_set(path , height); </script>
où path est le chemin d'accès aux images des nombres de l'horloge
et height est la hauteur des images affichées (si ce paramètre n'est pas indiqué, la hauteur utilisée est 18 pixels)