Exemples de javascripts, en développement.

Le but de cette page est de fournir des outils pour développer des pages web dynamiques et interactives en javascript.

"Dynamique" signifie que des images ou du texte bouge à l'écran, avec possiblités d'avoir des sons.
"Interactive" signifie que l'utilisateur peut agir, soit avec la souris, soit avec le clavier.  Le micro, je ne sais pas ?

Cliquez sur  démo  pour avoir une démonstration dans une nouvelle fenêtre.
Cliquez sur  source  pour voir le code source dans une nouvelle fenêtre.

Micro résumé du javascript, non exhaustif. 
Voici un micro résumé non exhaustif du langage javascript et de certain de ses objets.
Il y a également une fenêtre de test, qui permet de tester les instructions javascript.

Fenêtre de debugging.  démo   source
Lors d'un développement d'un programme, généralement, il ne marche pas !  Donc on passe la majeur partie de son temps à chercher les erreurs.  Pour cela, différents outils sont utiles.  Celui que je préfère est la possibilité d'écrire dans une fenêtre de "debugging" divers informations au choix, à divers endroits du programme.  Pour cette raison, j'ai développé une routine de librairie permettant d'écrire ces informations.
Voici un exemple qui permet d'afficher diverses informations dans une fenêtre prévue à cet effet.
L'ordre principale est la commande DBW("chaine de caratrères", nOption); qui affiche une chaine de caractères dans une fenêtre de "debugging" à part.
nOption est un nombre qui permet d'ignorer l'affichage ou d'afficher la date.
Pour un affichage normale, nOption = un nombre entre 256 + 1 et 256 + 255.
nOption = nOption | 512 pour afficher la date.
"DBW" signifie "Debug Write".
Pour jouer un son, on peut appeler : DBBeep("");  DBBeep('1');  DBBeep('2');  DBBeep('3');  ou  DBBeep('non d'un fichier de son en wav ou mp3');.

Cet exemple est long, mais l'utilisation est très simple. Il faut inclure dans l'en-tête la ligne :
< script langage="JavaScript" src="librairie/DebuggingWindow.js">< /script >
Ensuite un appel se fait par la commande : DBW(...) décrite ci-dessus.

Fenêtre d'écriture d'information.  démo   source
Durant des essais en javascript, il peut être agréable d'afficher certaines informations dans une fenêtre. C'est la raison d'être de cette routine de librairie qui permet d'afficher des informations simplement.
L'utilisation est très simple. Il faut inclure dans l'en-tête la ligne :
< script langage="JavaScript" src="librairie/WriteWindow.js">< /script >
Ensuite un appel se fait par la commande : WinWrite("chaine de caractères").

Les formulaires, une interaction avec l'utilisateur.  démo   source
Les formulaires sont des objets qui permettent à l'utilisateur d'entrer des données et de cliquer sur des boutons.

Evenements : Images roll-over.  démo   source
Lorsqu'on passe avec la souris sur une image, l'événement "onMouseOver" lié à l'image permet de déclancher une action.   L'action peut être de n'importe quel type, faire apparaître une autre image, jouer un son, exécuter une fonction etc.

onMouseOver, un bel effet.  démo   source
Utilise une librairie de routines développées par Walter Zorn qui permettent des effets spéciaux.
La référence du site web fournissant cette librairie est : http://www.walterzorn.com/
L'effet montré ici consiste à afficher une image lorqu'on se trouve sur un lien, et l'image suit la souris.

Information sur l'ordinateur.  démo   source
Donne de l'information sur l'ordinateur tel que le système d'exploitation utilisé, le navigateur utilisé, l'URL de la page web et les paramètres qui lui sont transmis.
Montre également comment utiliser une balise "FORME" avec un champ "TEXTAREA" et un "BUTTON".

Gestion d'événements.  démo   source
Montre comment capturé des événements, tels que le déplacement de la souris, des cliques ou des touches pressées.

Gestion d'événements clavier et position de la souris.  démo   source
Capture plus simple de la position de la souris et du clavier.

Capture d'événements du clavier.  démo   source
Capture des touches du clavier et affiche le texte à l'écran.

Joue un sons suite à une action.  démo   source
Losqu'on click sur un lien formé par du texte ou une image, ou lorsqu'on passe sur un texte ou une image, un son est joué.
Pour que cela fonctionne, il faut que quicktime soit installé.
Sous linux, installé le paquet  "libquicktime1" .
Il est bon d'avoir aussi "Greffons GStreamer pour ffmpeg" et "Greffons GStreamer pour mms, wavpack, quicktime, musepack".

Timer, un simple exemple d'Horloge.  démo   source
Le timer est ce qui permet à une page web d'être dynamique. Ainsi il est possible de faire bouger des images, générer des sons à des instants prédéfinis etc.
Le timer est tellement importants, que plusieurs exemples seront donnés.
Ici, le timer sert à afficher l'heure. Trois méthode pour afficher l'heure sont illustrées.
Dans une FORM, avec un champ TEXT, une fois sélectionnable, une fois non sélectionnable et en utilisant la balise DIV, très importante en DHTML (Dynamique Hyper Text Markup Language).

Timer, autre exemple.  démo   source
Cet exemple montre comment afficher un texte lentement, lettre par lettre.
Voici un autre exemple de timer. Avec la balise DIV ... /DIV, c'est une partie indispensable pour créer des pages web dynamique.
Cette balise DIV est utilisée dans cet exemple, qui montre aussi comment l'utiliser pour ajouter du texte dans une page html.

Horloge à aiguilles.  démo   source
Cet exemple affiche une horloge à aiguilles, qui bougent comme sur une montre normale.
Cet exemple est plus sophistiqué que les précédents. Il utilise le timer, pour la partie dynamique, c'est-à-dire pour faire bouger les aiguilles.
Mais la partie plus sophistiquée est l'utilisation de la balise "DIV", de la commande : "getElementById" et de l'attribut "innerHTML".
Plusieurs balises DIV sont rajoutées dans la seule balise DIV définie au départ, ceci pour ajouter différents éléments dans la page.

Une onde se déplace.  démo   source
Essai d'animation d'une onde.
Faire bouger beaucoup ( >100) objets avec javascript raplentit beaucoup l'animation.

Positionnement précis de textes à l'écran.  démo   source
Cet exemple montrer comment positionner précisément un texte à l'écran avec un second texte qui le suit.
La longueur et la taille du premier texte est variable, le second texte tient compte de cette variation.
Cet exemple est facilement transposable à des images.

Images déplaçables avec la souris.  démo   source
Permet de déplacer une image en faisant un cliquer déplacer sur l'image.
Une difficulté est que la commande "document.addEventListener('mousedown', myMouseDown, true);"
ne fonctionne pas correctement dans ce cas. Il faut capturer le "mousedown" différemment.

Boule se déplaçant et raquette déplaçable.  démo   source
Exemple plus complet, d'utilisation du timer et de la souris pour laisser une boule blanche se déplacer à l'écran, rebondir sur les bords de la fenêtre et sur une raquette que l'on peut déplacer avec la souris.
Illustre le timer, le positionnement d'objets, la comparaison de positions d'objets et le déplacement d'objets avec la souris. Utilise des parties de l'exemple précédent.

Pour tracer des lignes droites.  démo   source
Exemple montrant comment tracer des lignes droites.
L'utilisation des "<DIV" est indispensable. (Les "<SPAN" seraient utilisablent aussi.)

Un test raté pour tracer des lignes droites.  démo   source
Exemple raté, mais avec des caractéristiques intéressantes.

Curseurs et couleurs en javascript.  démo   source
Cet exemple est assez complexe. Six curseurs ont été créés pour manipuler la couleur d'un texte et du fond de ce texte. Il n'est pas optimal, mais fonctionne correctement. Aucun timer n'est utilisé, mais les captures de souris sont fortement utilisées dans la gestion des curseurs.

Exemple d'interface entre javascript et java, plus particulièrement avec GeoGebra.

Voici quelques tutoriaux et références concernant le Web et le javascript

http://www.toutjavascript.com/ en français
C'est un excellant site, qui vous enseigne les bases du javascript, vous donne des renseignement sur des outils proches du javascript, comme le DHTML et le PHP et vous donne plus de 130 exemples en javascript.
Exemples ,   tutoriaux ,   références

www.siteduzero.com/
Une autre référence en français. En particulier :
° Syntaxe du JavaScript
° Faire connaissance avec JavaScript
° JavaScript et la POO...
° Visite guidée des objets JS
° Annexes, qui parlent des variables, des tests, des boucles, des tableaux et des fonctions.

http://www.w3schools.com/ en anglais
LA référence de base du Web.

http://www.w3schools.com/tags/ en anglais
LA référence sur les balises HTML

http://www.w3schools.com/jsref/default.asp en anglais
LA référence sur le javascript

http://www.getelementbyid.com/scripts/index.aspx en anglais
Plus de 40 bons exemples en javascript pour faire du DHTML (Dynamic Hyper Text Markup Language)
C'est à dire des pages web dynamiques.

http://docs.sun.com/source/816-6409-10/contents.htm en anglais.
Une référence de SUN sur le javascript.

https://developer.mozilla.org/en/HTML/Element en anglais
Une référence de Mozilla sur les balises HTML.

https://developer.mozilla.org/en/Web_Development en anglais
Une référence générale de Mozilla.

Voici d'autres exemples que j'ai développé sur un autre site web.

Un jeux en javascript, pour apprendre le livret : le jeux des 4 opérations.

Une utilisation de javascript pour une illusion d'optique.

Lien sur ma page concernant GeoGebra avec des exemples d'interface entre le java de GeoGebra et le javascript.

Voici LA référence qui m'a donné envie d'apprendre le javascript.
ZERO, des maths pour le collège et des énigmes logiques

Un exemple qui montre qu'on peut simuler le langage BASIC en javascript.
Le BASIC de Apple

Plan du Site : index.html    javascript.html