Productions personnelles en javascript depuis 2009

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, soit le micro.

JavaScript and HTML DOM Reference, tous les objets javascript, du site : "w3schools".

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

Micro résumé du javascript, non exhaustif
Voici un micro résumé non exhaustif du langage javascript et de certain de ses objets.

°) Des exemples plus développés, plus bas dans cette page.


Exécuteurs d'instruction javascript.
Permet d'écrire et de tester des instructions javascript dans une page Web, et des les exécuter. Cela peut être pratique pour faire de petits tests.

Fenêtre de debugging.
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.
La manière standard dans Firefox est d'ouvrir la console Web (ctrl+maj+i) du Développement Web.
console.log(string); permet d'afficher du texte dans la console de développement Web de Firefox.
Voir : Ouvrir la Console web, de MDN web docs.

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", nombre_option); qui affiche une chaine de caractères dans une fenêtre de "debugging" à part.
"nombre_option" est un nombre qui permet d'ignorer l'affichage ou d'afficher la date.
Pour un affichage normale, nombre_option = un nombre entre 256 + 1 et 256 + 255.
nombre_option = nombre_option | 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('id d'une balise <audio> contenant un son personnalisé.');.

Fenêtre d'écriture d'information.
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 type="application/javascript" src="librairie/WriteWindow.js"></script>
Ensuite un appel se fait par la commande : WinWrite("chaine de caractères").

Communication entre deux fenêtres, parent - enfant.
Exemple de communication entre deux fenêtres, qui se trouvent sur le même ordinateur. Ce n'est pas une communication à travers Internet !

Evenements : Images roll-over.
Lorsqu'on passe avec la souris sur une image, les événements onmouseover et onmouseout liés à 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.
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.de/en
L'effet montré ici consiste à afficher une image ou un texte lorqu'on se trouve sur une balise, et cette dernière suit la souris.
À voir aussi : Calculateur de barèmes.
À voir aussi : Indique les noms sur une photos de plusieurs personnes..

Information sur l'ordinateur.
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 <form> avec un champ <textarea> et un <button>.

Gestion d'événements et affichage dans une <div> dans un tableau.
Montre comment capturé des événements, tels que le déplacement de la souris, des cliques ou des touches pressées. Les événements sont afficher dans la page Web, dans un tableau.

Gestion d'événements et affichage dans une autre fenêtre.
Montre comment capturé des événements, tels que le déplacement de la souris, des cliques ou des touches pressées. Les événements sont afficher dans une autre page Web.

Capture d'événements du clavier.
Capture des touches du clavier et affiche le texte à l'écran.
Utilise la méthode addEventListener

Utilisation d'un timer pour connaître régulièrement la position de la fenêtre.
Vu qu'aucun événement n'est généré si une fenêtre est déplacée, utilise un Timer (minuteur) pour tester régulièrement la position de la fenêtre.

Timer, un simple exemple d'horloge numérique.
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.
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>.

Timer, pour afficher lettre à lettre une phrase à l'envers.
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.

Une horloge à aiguilles.
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.

D'autres exemples, basé sur le travail de Lionel, un de mes élèves.
Une horloge à aiguilles 1.
Une horloge à aiguilles 2.
Une horloge à aiguilles 3.
Une horloge à aiguilles 4.
Un horloge minuteur à aiguilles. Permet de jouer un son après un temps précis. L'aiguille des heures a été éliminée.

Déplacements aléatoires d'images et de textes.
Tout bouges lentement et au hasard.

Une onde se déplace.
Animation d'une onde à l'aide du timer.
Faire bouger beaucoup ( >1000) objets avec javascript ralentit beaucoup l'animation.

Une onde se déplace, avec l'utilisation d'un canvas.
Animation d'une onde à l'aide du timer.
L'animation est beaucoup plus fluide ainsi que dans l'exemple précédent. Des dizaines de milliers de traits peuvent être tracés.
De plus, le canvas, donc la plage de dessin, s'adapte à la dimension de la fenêtre.

Positionnement précis de textes à l'écran.
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.
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.

Images déplaçables par clique de la souris.
Permet de déplacer une image en cliquant sur l'image.
Utile sur smartphone.

Boule se déplaçant et raquette déplaçable.
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.

Curseurs et couleurs en javascript.
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.

Change la couleur de fond. Pas pour smartphone
Pour faire varier la couleur de fond, déplacer la souris en rond autour du centre de la fenêtre.

Change la couleur de fond. Bon pour smartphone
Un click à gauche ou droite de la fenêtre fait varier la couleur de fond.

Indique les noms sur une photos de plusieurs personnes.
À l'aide d'un codage de couleurs et d'un canevas, le nom de la personne pointée par la souris sur une photo est indiqué.

Une boîte de dialogue modale.
Permet de simuler une boîte de dialogue modale.
Une boîte de dialogue modale est une boîte de dialogue qu'on doit fermer avant de pouvoir interagir avec la fenêtre qui a ouvert cette boîte de dialogue modale.

Générateur de code HTML en javascript.
Permet de générer du code HTML en javascript.
Le principe est de modifier de code HTML d'une balise <div>, avec le code HTML désiré. On peut créer ainsi des pages Web complètes.

Exemple pour centrer une image, centrer un champ, associer un lien à un bouton, innerHTML.

Exemple d'une image qui recouvre toutes la surface de la fenêtre.
Il n'y a pas de javascript, qu'un peu de CSS, c'est très simple.

Page protégée par un pseudo mot de passe. Le niveau de sécurité est faible, mais c'est une méthode simple.
J'ai mieux en utilisant du PHP, par exemple dans la page de mon cours d'OC informatique de 4ème de 2015-2'16.
Il faudrait un site Web sécurisé (en "https://") pour être vraiment sécurité.

Lecture du microphone, pour changer le niveau de gris du fond d'écran.

Une ancienne présentation de possibilités en javascript.
Peu intéressant vu ce qui précède.


Exemples plus développés   Top

Un calculateur de barèmes

Le jeu des quatre opérations, pour apprendre le livret. Il est intéressant pour des enfants !

Le compte est max. Un jeu selon une idée de Christian Aebi, enseignant au C.O.

Le jeu des pesées, pour trouver une bille plus légère ou plus lourde que les autres.

Le jeu de la planche à clous, qui est une ébauche.

Tests : Minimisation de périmètre de rectangle, ébauche & Minimisation de périmètre de triangle, ébauche.

Transformation linéaire, matricielle . Transforme linéairement une image à l'aide d'une matrice 2x2.
Double transformations linéaires, matricielles . Une transformation linéaire, suivie d'une autre.
Transformations du Boulanger et du Photomaton. Des transformations amusantes, bijectives bien connues des mathématiciens-informaticiens.

Partenaire pour un tour de magie, mais il faut le connaître. Magie à 8 cartes.
Magie à 3 cartes, une variante simplifiée.

Jeu de mémoire, faisant intervenir le son.   Tests de sons.

Jeu de serpent, ébauche, faisant avancer un "serpent" qui grandit.
b   c

Chenille, ébauche, de boules bleues qui suivent la rouge.
b   c   e   f   g   h

Labyrinthe, aide à la conception, utile pour mes créations de labyrinthes avec Openscad.

Teste la création de fonctions splines.
Une fonction spline est dans ce cas, une fonction cubique par morceau, passant par des points donnés, et deux fois continuement dérivable.
Elle est donc continue, sa tagente et sa courbure varient continuement.

Teste la création de Math-spline. Ces Math-splines passe par des points donnés dans un plan.
Le résultat n'a pas besoin d'être une fonction et donne une courbe très naturelle passant par ces points.
La paramétrisation [X(t) ; Y(t)] de la courbe est formée de deux fonctions splines, X(t) et Y(t).
Pourquoi ces splines ne sont-ils pas standards dans les programmes CAD ?

Comparaison entre les B-splines et les Math-splines. Cette comparaison montre comment passer des B-splines aux Math-splines et vice-versa.
Cela est également valable pour des courbes fermées.

Illustrations animées de divers algorithmes de tris.

Pavez le plan hyperbolique représenté par le Disque de Poincaré, avec des polygones hyperboliques.


Exemple amusant d'une page Web affichant le contenu exacte de son code HTML. Elle est Autoréplicante !
Une version CSS, difficle à comprendre. Tiré du site Web : rosettacode.ord
Un exemple similaire en pascal sous DOS, dont l'impression est le code source du programme lui-même : Replicateur_pascal.pas.



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

Une utilisation de javascript pour une illusion d'optique.

Plusieurs exemples provenant de mon cours d'OC informatique de 3ème de 2014-2015.


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

OpenClassRooms , un site Web en français pour apprendre beaucoup de sujets concernant lînformatique. C'est une référence parmis les sites Web en français. En particulier :
° Syntaxe du JavaScript

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

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.



Plan du Site : Home   arrow   bgweb.html   arrow   productions.html   arrow   aprod2000_perso.html ( = http://www.juggling.ch/gisin/bgweb/aprod2000_perso/aprod2000_perso.html )


Page mise à jour le 16 février 2024 par Bernard Gisin     ( Envoyer un e-mail )
Hébergement par : www.infomaniak.ch