Cours de JavaScript - Table des matières

version 4.11.3, dernière mise à jour le 13 novembre 2023.

   

Introduction

Vous trouverez la table des matières après la liste des têtes de chapitres vous permettant un accès plus rapide.

Retour au menu

Contenu de ces pages

Pour bien débuter

Le DOM est une conception de la structure d'une page permettant de manipuler ses éléments grâce à un langage de script comme JavaScript. Ces chapitres donnent son principe de fonctionnement.

Initiation à JavaScript

Ce chapitre présente un premier survol de JavaScript.

Introduction à Javascript

Ce chapitre présente les bases de JavaScript.

Premiers effets

Ce chapitre présente quelques effets simples applicables à une page Web via JavaScript.

Premiers pas dans le DOM

Ce chapitre présente un bref historique et les concepts de base du DOM.

Modifier l'apparence

Accéder aux éléments permet de modifier, ajouter ou supprimer du contenu ou modifier les styles appliqués.

Le DOM: modification du contenu dans un document

Le DOM donne la possibilité de modifier, ajouter et supprimer du contenu dans un document.

Accès aux feuilles de style par le DOM

Le DOM offre des propriétés et méthodes permettant d'accéder et modifier les propriétés des feuilles de style CSS.

Interagir avec l'interface utilisateur

Le DOM fournit aussi des moyens pour interagir avec l'utilisateur via la modification des paramètres de la fenêtre du navigateur ou la gestion des "événements" de la souris ou du clavier…

Le DOM: fenêtre, navigateur et interface-utilisateur

Le DOM permet d'accéder et de manipuler une fenêtre, ainsi que les propriétés du navigateur et ses relations avec le système.

Gestion des événements et DOM

Les "événements" sont tout ce qui se rapporte à l'interaction entre l'utilisateur et la page Web qu'il consulte. Le DOM s'accompagne d'une gestion fine de ces échanges.

Pour aller plus loin

Les chapitres précédents exposent les bases de la manipulation du DOM. Voici de quoi aller plus loin…

Bonnes pratiques de codage en javascript

La programmation en javascript atteint des limites quand des codes issus de fichiers source différents interfèrent. Il existe des méthodes de codage qui minimisent ces risques.

Les objets dans JavaScript

Un exposé en détails des fonctionnalités de la programmation orientée prototype en JavaScript

Frameworks

Quelques bibliothèques de développement et de conception pour gagner en productivité

Initiation à la bibliothèque jQuery

Ce chapitre présente les bases permettant d'utiliser la bibliothèque jQuery.

Initiation à la création de plugins jQuery

Ce chapitre présente un gabarit de construction d'un plugin jQuery

Introduction à Angular

Ce chapitre présente les bases d'AngularJS.

Initiation à JavaScript côté serveur : nodejs, Express, Websocket, MongoDB

Ce chapitre expose comment mettre en place un serveur nodejs/express de base.

Initiation à Vue3.js

Pas à pas, comment construire avec Vue3.js des applications dynamiques

Divers

Un peu de tout…

Un peu de JavaScript avec InDesign…

Ce chapitre expose les bases de l'utilisation de JavaScript dans le logiciel InDesign

Utilisation de la console

Les propriétés et méthodes utiles de la console ; débogage avec try/catch

Stocker des informations sur le poste client : cookies et API Webstorage

Le stockage d'informations côté client  webstorage

Retour au menu

Table des matières détaillée

A. Pour bien débuter

  1. Initiation à JavaScript
    1. Introduction
      1. JavaScript n'est pas Java
      2. Trois méthodes d’insertion de code JavaScript dans un document (X)HTML

      Retour au thème

    2. Syntaxe générale
      1. Conventions d’écriture
      2. Commentaires

      Retour au thème

    3. Variables
      1. Types de données
      2. Déclaration ; affectation de valeurs

      Retour au thème

    4. Fonctions
      1. Introduction
      2. Déclaration d’une fonction
      3. Valeur de paramètres par défaut
      4. Portée d’une variable

      Retour au thème

    5. Tableaux et boucles
      1. Tableau à une dimension
      2. Boucles for

      Retour au thème

    6. Opérateurs
      1. Opérateurs binaires mathématiques
      2. Opérateurs binaires de comparaison
      3. Opérateurs logiques

      Retour au thème

    7. Tests logiques
      1. Instruction if
      2. Instruction switch

      Retour au thème

  2. Introduction à Javascript
    1. Introduction
      1. JavaScript n'est pas Java
      2. Historique
      3. Insertion de code JavaScript dans un document (X)HTML

      Retour au thème

    2. Conventions
      1. Règles générales
      2. Commentaires
      3. Noms de variables et de fonctions

      Retour au thème

    3. Variables
      1. Types de données
      2. Déclaration ; affectation de valeurs

      Retour au thème

    4. Fonctions
      1. Introduction
      2. Déclaration d’une fonction
      3. Valeur de paramètres par défaut
      4. Portée d’une variable
      5. Obtenir la liste des arguments
      6. Fonctions fléchées

      Retour au thème

    5. Tableaux
      1. Tableau à une dimension
      2. Tableau multidimensionnel
      3. Méthodes des tableaux

      Retour au thème

    6. Opérateurs
      1. Opérateurs binaires mathématiques
      2. Opérateurs binaires de comparaison
      3. Opérateurs binaires logiques
      4. Opérateurs unaires

      Retour au thème

    7. Objets prédéfinis
      1. Quelques mots sur la programmation orientée objet
      2. L'objet String
      3. L'objet Math
      4. L'objet Date
      5. Trois méthodes de l'objet window pour interagir avec l'internaute
      6. Comment ajouter des méthodes et propriétés aux objets prédéfinis ?

      Retour au thème

    8. Tests et boucles
      1. Tests logiques
      2. Itérations

      Retour au thème

    9. Divers
      1. Temporisation
      2. Évaluation d'une expression

      Retour au thème

  3. Premiers effets
    1. Généralités
      1. Qu'est-ce que le DOM ?
      2. À quoi cela sert-il ?
      3. Quelles sont les techniques mises en jeu ?

      Retour au thème

    2. Les premiers effets
      1. Attributs de gestion d'événements
      2. Modification des propriétés de style
      3. Modification d'un attribut quelconque

      Retour au thème

  4. Premiers pas dans le DOM
    1. Introduction
      1. Qu'est-ce que le DOM?
      2. Conception de l'arborescence
      3. DOM et JavaScript

      Retour au thème

    2. Accès aux éléments et attributs
      1. Accès direct
      2. Accès relatif
      3. Accès par les collections

      Retour au thème

    3. Avoir des informations sur les nœuds
      1. Obtenir des informations sur la nature d'un nœud
      2. Obtenir des informations sur le contenu d'un nœud

      Retour au thème

Retour à la table des matières succincte

B. Modifier l'apparence

  1. Le DOM: modification du contenu dans un document
    1. Introduction

      Retour au thème

    2. Modification de contenu
      1. Remplacement du document entier
      2. Modification d'attributs
      3. Modification d'éléments

      Retour au thème

    3. Ajout de contenu
      1. Méthodes de création de nœuds

      Retour au thème

    4. Suppression de contenu
      1. Suppression de nœuds

      Retour au thème

  2. Accès aux feuilles de style par le DOM
    1. Généralités

      Retour au thème

    2. Propriétés générales de la feuille de style

      Retour au thème

    3. Modification, ajout et suppression de règles
      1. Ajout et suppression de règles
      2. L'élément de propriété de feuille de style

      Retour au thème

Retour à la table des matières succincte

C. Interagir avec l'interface utilisateur

  1. Le DOM: fenêtre, navigateur et interface-utilisateur
    1. Introduction

      Retour au thème

    2. La géométrie de la fenêtre et de l'écran
      1. À l'extérieur de la fenêtre du navigateur
      2. À l'intérieur de la fenêtre du navigateur

      Retour au thème

    3. Manipuler le navigateur et le système
      1. Informations sur le navigateur
      2. Informations sur le document
      3. Modification du document chargé
      4. Gestion des fenêtres

      Retour au thème

    4. Gestion de l'interface utilisateur
      1. Émuler les boutons « Arrêter » et « Imprimer »
      2. Dialoguer avec l'utilisateur
      3. Gestion des cookies
      4. Faire défiler l'affichage

      Retour au thème

  2. Gestion des événements et DOM
    1. Introduction

      Retour au thème

    2. Le flot d'événements
      1. Propagation d'événements
      2. Event bubbling (remontée d'événements)
      3. Event capture (capture d'événement)
      4. Exemple

      Retour au thème

    3. Comment appeler un événement?
      1. Par un attribut HTML
      2. Par l'utilisation d'une propriété d'un élément
      3. Par des « event listeners »

      Retour au thème

    4. L'objet event
      1. Propriétés et méthodes générales
      2. Événements souris
      3. Événements clavier
      4. Événements divers

      Retour au thème

Retour à la table des matières succincte

D. Pour aller plus loin

  1. Bonnes pratiques de codage en javascript
    1. Introduction

      Retour au thème

    2. Précautions élémentaires
      1. Ajout de contenu
      2. La mise en forme doit être effectuée à l'aide de CSS
      3. Conditionner l'exécution d'un code
      4. Une gestion stricte des erreurs et un gain de performances avec le mode strict

      Retour au thème

    3. Chargement et exécution des scripts
      1. Où placer l'élément script
      2. Lancement d'un script au chargement de la page

      Retour au thème

    4. Divers
      1. Contrôle des événements souris et clavier

      Retour au thème

  2. Les objets dans JavaScript
    1. Introduction

      Retour au thème

    2. Création et utilisation d'un objet
      1. Création simple d'un objet
      2. Création d'un littéral objet

      Retour au thème

    3. Plus simple : utiliser une fonction
      1. Introduction
      2. Déclarer un objet comme une fonction
      3. Interdire la manipulation de certaines propriétés : l'encapsulation
      4. Changer l'ordre des paramètres et proposer des valeurs par défaut
      5. ... et pour les méthodes privées ?
      6. Héritage
      7. Revenons sur this...

      Retour au thème

    4. Utilisation des classes
      1. Principe
      2. Propriétés et méthodes
      3. Création d'une sous-classe

      Retour au thème

Retour à la table des matières succincte

E. Frameworks

  1. Initiation à la bibliothèque jQuery
    1. Introduction
      1. Principe
      2. Utilisation
      3. Utilisation de plugins

      Retour au thème

    2. Les sélecteurs
      1. Sélecteurs de base
      2. Filtrage

      Retour au thème

    3. Les événements
      1. Événements du DOM
      2. Nouveaux événements
      3. Gestionnaires d’événements

      Retour au thème

    4. Quelques effets
      1. Apparition, disparition
      2. Effets personnalisés, contrôle

      Retour au thème

    5. Manipulation du DOM
      1. Création de nœuds
      2. Modification des nœuds
      3. Insertion de contenu
      4. Remplacement et suppression

      Retour au thème

  2. Initiation à la création de plugins jQuery
    1. Introduction
      1. Principe des plugins

      Retour au thème

    2. Construction pas à pas d'un plugin
      1. Introduction
      2. Pour bien commencer
      3. Les bases
      4. Permettre l'utilisation du plugin dans une chaîne de commandes jQuery
      5. Passer des options: le paramétrage et les options par défaut

      Retour au thème

  3. Introduction à Angular
    1. Généralités
      1. Contexte : les SPA
      2. Patron de conception MVC

      Retour au thème

    2. Une application de base
      1. Structure de base : module et contrôleur
      2. Pousser les données vers le DOM : la vue
      3. Binding de données bidirectionnel

      Retour au thème

    3. Directives
      1. Principe
      2. Appeler une directive dans le DOM
      3. Directives prédéfinies
      4. Définir une nouvelle directive

      Retour au thème

    4. Filtres
      1. Principe
      2. Filtres prédéfinis
      3. Définir un nouveau filtre

      Retour au thème

    5. Aller plus loin
      1. Les fonctions de scope

      Retour au thème

  4. Initiation à JavaScript côté serveur : nodejs, Express, Websocket, MongoDB
    1. Généralités
      1. Principe
      2. Installation et lancement
      3. Un serveur simple
      4. Structure type d'un projet Node
      5. Accéder au système de fichiers avec le package fs
      6. Mise en place d'un routage simple avec Express
      7. Redémarrer le serveur automatiquement en cas de changement des sources : nodemon

      Retour au thème

    2. Structurer le projet avec npm
      1. Présentation de npm
      2. Gestion du fichier package.json

      Retour au thème

    3. Le framework de test Mocha
      1. Introduction
      2. Écriture des tests
      3. Lancer et interpréter les tests

      Retour au thème

    4. Utiliser des templates : l'exemple d'EJS
      1. Introduction
      2. Mise en œuvre de base
      3. Passage de paramètre, éléments de programmation

      Retour au thème

    5. Échanges asynchrones client/serveur avec Websocket
      1. Introduction
      2. Avec socket.io
      3. Avec ws

      Retour au thème

    6. Nodejs et Mongodb
      1. Généralités
      2. Manipulation des collections
      3. Création, lecture, mise à jour et suppression de document

      Retour au thème

  5. Initiation à Vue3.js
    1. Mise en place
      1. Introduction
      2. Installation
      3. Outils de développement

      Retour au thème

    2. Syntaxe de base
      1. Vue et modèle
      2. Les directives
      3. Formulaires et gestion d'événements
      4. Propriétés calculées

      Retour au thème

    3. Modularisation
      1. Composants
      2. Structuration du projet avec Vue-CLI
      3. Routage

      Retour au thème

Retour à la table des matières succincte

F. Divers

  1. Un peu de JavaScript avec InDesign…
    1. Introduction
      1. Pourquoi un langage de script ?
      2. Les langages de script pour InDesign
      3. Comment accéder aux scripts ?
      4. Comment créer et modifier les scripts ?

      Retour au thème

    2. Quelques bases…
      1. Un premier script
      2. Les bases nécessaires de la programmation en JavaScript

      Retour au thème

    3. Le modèle objet d'InDesign
      1. Structure d'un document InDesign
      2. Les objets : propriétés et méthodes
      3. Le modèle objet d'InDesign

      Retour au thème

    4. Mise en forme de textes et d'images
      1. Mise en forme de texte
      2. Définir un style et l'appliquer

      Retour au thème

  2. Utilisation de la console
    1. La console
      1. Commandes de base
      2. Amélioration de l'affichage
      3. Débogage et surveillance des performances

      Retour au thème

    2. Intercepter les erreurs
      1. Le couple try/catch
      2. Finaliser proprement le traitement d'une erreur avec finally

      Retour au thème

  3. Stocker des informations sur le poste client : cookies et API Webstorage
    1. Gestion des cookies
      1. Principe
      2. Mise en œuvre

      Retour au thème

    2. Webstorage
      1. Généralités
      2. Lire, mettre à jour et écrire des données

      Retour au thème

Retour à la table des matières succincte

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu