Tutoriel JavaScript en exemples. Widgets et scripts

Introduction à JavaScript
Si l'on connait le langage C ou PHP, ce manuel suffira à utiliser JavaScript, notamment pour comprendre et utiliser les exemples et démos de ce site.

JavaScript et C: Héritage et différences

Variables et constantes
Les variables JavaScript sont dynamiques.

• L'objet Number. Attributs et méthodes de l'objet nombre.
• L'objet String. Détail de toutes les méthodes de chaîne de caractères.
• L'objet Array. Avec un test interactif des attributs et méthodes de tableau.
• L'objet Date.
• Booléens et objet Boolean.
• Les règles de visibilité.
• Peut-on passer des variables par référence en JavaScript?

Les opérateurs

Les tableaux
Ils sont dynamiques et dotés d'attributs et méthodes.

• Tableau associatif.
• For each.
• Les pièges des tableaux.
• Nouvelles méthodes de Array.
• Tableau en compréhension. Modifier ou filtrer un tableau en une seule commande.

Les fonctions
Définition et utilisation de fonctions.

• Fonctions prédéfinies. On peut les utiliser dans tout script.
• La fonction eval. Cette fonction intégrée permet d'ajouter du code JavaScript dynamiquement.
• La méthode bind. Résoudre les problèmes de this.

Les structures de contrôle
Structures conditionnelles et boucles.

Expression régulière
Traitement de texte selon des règles de correspondance.

• L'objet RegExp. Pour passer des expressions régulières à un formulaire.

Evènements

• La souris et le div. Connaître la position de la souris dans un calque, quelles propriétés?
• Illusion d'optique. Démonstration: comment changer une image quand on presse le bouton de la souris.

Les objets
En JavaScript, ils sont dynamiques et se développent durant le traitement.

• This et new, une relation étroite. Comment une fonction devient objet.
• Copie d'objet JavaScript: référence, avatar et double. Assigner un objet à une variable ne fait qu'ajouter une référence au même objet. Comment réaliser une copie indépendante?
• Classe et héritage en JavaScript classique. Il est tout à fait possible de définir un constructeur et d'hériter d'une autre classe sans attendre ES6.

JavaScript et PHP
Partage de variables entre PHP et les pages Web. Ajouter des variables à celles des formulaires.

JavaScript asynchrone
Comment réaliser un code asynchrone comme celui de d'Analytics, de Google.

Les nouvelles fonctions de ECMAScript
Et tests d'implémentation.

• Promise
  Attendre la fin d'un processus pour effectuer un traitement.
• Async/Await
  Exemples d'utilisation.
• Import et module simplifiés
  Comment importer des modules de la façon la plus simple possible.
  
• JavaScript sans callback
  On peut éviter le code spaghetti avec les fonctions nommées ou les promises, notamment quand les fonctions asynchrones sont chaînées.
• Remplacer un callback par une promise
  Et utiliser des fonctions asynchrones de façon synchrone.
• Proxy
  Outil de simplification du code, le proxy permet de séparer l'essentiel de l'application de l'accessoire.
• Convertir Map en objet et inversement
  Ces conversions permettent notamment de stocker le contenu d'une Map dans un fichier, mais les Map imbriquées compliquent la tâche.

Aide-mémoire JavaScript
L'essentiel dans une seule page.

Formulaires

Création et utilisation d'un formulaire
Principes et objets de formulaire en HTML 4 et HTML 5. Comment accéder à ses éléments, insérer un bouton.

Liste de tous les objets de formulaire HTML

Envoi et réception des données selon les objets de formulaire.
Traitement des valeurs et envoi à une page web ou un script sur le serveur.

• Passer des données d'un page HTML à une autre. Comment passer des paramètres à une page Web? Cela peut être accompli par un formulaire et un script simple qui extrait les valeurs de la chaîne de paramètres.
• GET ou POST. Quelle méthode choisir?
• Frames et formulaires. Comment passer des données de formulaire entre les frames d'un jeu de cadres.

Personnaliser input text

Checkbox, comment passer l'état à une autre page

Select
Gérer les listes et menus.

Table et requête JSON
Stocker une table dans un fichier JSON et accéder au contenu avec une requête de style SQL.

Objets HTML

Windows
Création dynamique de fenêtre en JavaScript.

• Location. Elément de Window pour obtenir les paramètres de l'URL de la page.
• History. Interface à l'historique de navigation.
• Boites de dialogue. Interagir avec l'utilisateur avec alert, confirm, prompt.
• Ouvrir une fenêtre en JavaScript.
• setTimeout et setInterval. Les délais à l'exécution.

Navigator
Pour identifier le navigateur de l'internaute.

Image Map
Des hyperliens dans les images.

• Images dynamiques. Remplacer une image.

Lightbox sans framework
Pour réaliser une lightbox et afficher du texte ou des images dans une boite, seules quelques descripteurs CSS suffisent. Du code JavaScript est ajouté pour changer dynamiquement le contenu de la boite.

Onglets en CSS sans framework
Un Tab Panel pour un site Web ou une application, sans framework, en simple CSS ou avec quelques lignes de JavaScript pour insérer le contenu dans la même page.

• Onglets avec frames.
• Panneaux à onglet pour une application HTML. Lorsque le contenu est déjà dans la page.

Bouton à deux états
Comment créer un bouton ou une commande textuelle basculant entre deux états.

Votes pour un article
Comment afficher une image qui donne le nombre de points attribués à un article.

Image mystérieuse
Remplacer dans un effet de fondu un texte par une image afin qu'elle ne soit affichée qu'au moment voulu.

Barre de navigation
Accéder aux pages d'un article.

Tutoriel des bookmarklets
Un moyen simple d'incorporer des fonctionnalité à une page Web ou d'en rajouter au navigateur.

• Bookmarklets de recherche
  Ajoutez des boutons de recherche avancée.
• Informations sur la page
  Ajouter des bookmarks qui fournissent des informations statistiques ou descriptives sur toute page affichée par le navigateur.