1. Javascript et les formulaires
  2. Javascript et la mise en page
  3. Les bibliohèques Javascript: Vanilla JS
Ce qui suit n'est pas un cours structuré de Javascript, pour cela vous trouverez des références sur le web (en particulier l'excellent cours de Jean Gourdin que nous republions); il s'agit de découvrir le langage à partir d'exemples simples amusants ou pas, utiles ou inutiles.

Les exemples proposés dans le paragraphe traitement de formulaires simples montent qu'il est facile de concevoir des exercices type QCM pour des apprentissages, affichables dans un navigateur en utilisant un code compact, efficace, rapide et pérenne (nul besoin d'intelligence artificielle !).

Javascript et les formulaires ↑ 

Les formulaires sont des éléments de page (voir HTML) destinés à interagir avec l'utilisateur et à faciliter le recueil de données, au delà des simples liens. Si les formulaires ont été conçus au départ pour envoyer les données par courriel ou pour les adresser pour traitement à des scripts (comme CGI ou PHP), l'évolution de Javascript en fait un langage de choix pour traiter ces données sur la machine cliente. Bien que par défaut le formulaire envoyait les données sur l'URL courante il devait contenir dans tous les cas un attribut action. L'attribut est devenu facultatif en HTML 5 et vous n'en avez pas besoin pour traiter les données par javascript.

De même le nom du formulaire et le nom du champ sont des attributs essentiels pour envoyer les données, mais facultatifs si le traitement est réalisé par Javascript. Aujourd'hui, on accède plus souvent aux différents éléments par leur identité qui est un attibut plus universel que le nom. De plus pour une question d'accessibilité des pages il est recommandé d'associer un label à chaque contrôle et cette association se fait souvent par l'identité, obligeant ainsi à définir une identité pour chaque champ.

Exemples ↑ 

Les fonctions Javascript se placent traditionnellement dans l'en-tête de la page, surtout si elles n'occupent pas trop de place; à défaut, il est possible de les définir dans le corps de la page ou même en bas de page pour éviter de ralentir l'affichage de celle-ci, l'important étant qu'elles soient entièrement chargées lors de leur appel.
Traitement de formulaires simples:
cases à cocher
boutons radio
menus de selection

Affichage de dates:
date du jour
date de modification d'un fichier

Traitement de dates:
horloge simple, horloge à la mode Freebox
compte à rebours, compte à rebours en secondes
anniversaire, anniversaire (nouvelle version)

Calculs:
Le poids idéal

Caractères, textes et nombres:
Caractères et nombres
convertisseur ADN → protéines.

Autres:
JavaScript Image Player d'après Martin Holecko
Eliza d'après

Javascript et la mise en page ↑ 

Redimensionner un <canvas>:
Billard, l'interface graphique de JSmol
 ↑ Prise en charge des CSS par les formulaires HTML.
Pour appliquer des styles aux éléments de formulaires.

Les bibliothèques Javascript: Vanilla JS ↑ 

Javascript étant de plus en présent dans les pages web (même celles qui n'interagissent pas avec l'utilisateur) de très nombreuses bibliothèques offrant des scripts "clé en main" censés offrir une facilité d'édition des pages et des fonctionnalités évoluées prolifèrent. Certaines de ces solutions sont complexes à installer. Elles compliquent surtout la maintenance des pages. Et lorsqu'elles font appel à des bibliothèques de scripts situées sur un serveur différent de celui hébergeant le script principal, le navigateur refusera le plus souvent d'exécuter les commandes pour des raisons de sécurité.

Il convient donc de privilégier (surtout si on est un tant soit peu programmeur et qu'on maitrise même seulement un peu Javascript) l'utilisation limitée de bibliothèques et les bibliothèques les plus légères; le mieux étant de s'en passer complètement. Le terme de Vanilla JS a été connoté pour définir les scripts qui s'affranchissent des bibliothèques et pour dénoncer l'utilisation abusive de bibliothèques lentes et difficiles à maintenir.

 ↑ Vanilla JS.
Attention, ce site construit avec humour est destiné à vous faire comprendre que la bibliothèque Vanilla JS est tout simplement... Javascript!

 ↑ jQuery. jquery.com.
 ↑ Jquery. jqueryui.com.

Références

 Javascript. Il s'agit du cours de Jean Gourdin disparu du site de l'académie de Créteil et que nous republions ici grâce à sa licence GFDL.

Toutes les pages qui suivent (du Mozilla Developper Network) ont le mérite d'être mises à jour régulièrement:
 ↑ Technologies web pour développeurs >JavaScript.
 ↑ Grammaire et types de données JavaScript..

Bibliographie

  Patrick Trau. 2002. Cours d'introduction à Javascript.
Une page de l'époque héroïque offrant une présentation générale.

 Gilles Chagnon.
Un autre cours en ligne qui semble maintenu à jour.

 ↑ Flanagan D.. 1998. Javascript : The Definitive Guide. O'Reilly, Sebastopol, CA, USA.

Crédits

La coloration syntaxique du code Javascript et HTML est assurée par Prism.

Adresse de cette page: http://www.didac-tic.fr/web/javascript/index.php