JavaScript pour débutants | Guide Complet

Tous les exemples de cette formation seront développés à partir d'un squelette HTML5 standard. Ce cours va vous aider à le créer.

Découvrez dans ce cours les deux façons de faire appel à du code JavaScript dans un document HTML.

Quel que soit le langage utilisé, il est toujours intéressant d'insérer des commentaires dans un programme. Cela facilite sa maintenance et précise les points épineux. Ce cours vous montre les différentes façons d'insérer des commentaires dans la partie HTML et dans la partie JavaScript d'un document HTML.

Comme la plupart des langages, JavaScript permet de définir des fonctions. Ce cours vous montre comment créer une fonction JavaScript, où l'insérer et comment l'appeler.

Dans cet exercice, vous allez définir votre première fonction JavaScript et vous allez l'appeler à plusieurs reprises pour provoquer un affichage dans le navigateur.

La gestion des exceptions dans JavaScript est comparable à celle qui a cours dans les autres langages de programmation. Elle permet de protéger une ou plusieurs instructions et de gérer les messages d'erreur affichés lorsqu'une erreur se produit à l'exécution. Ce cours vous montre comment protéger les instructions "sensibles" et comment gérer les messages d'erreur correspondants.

Dans le navigateur, certaines actions effectuées par l'utilisateur donnent lieu à des événements. Si vous mettez en place un gestionnaire d'événements, il sera automatiquement exécuté lorsque l'événement correspondant se présentera. Ce cours vous montre comment installer un gestionnaire événementiel dans un formulaire et comment le mettre en œuvre à travers un exemple pratique.

JavaScript est en mesure de travailler avec tous les types de données conventionnels. Dans ce cours, découvrez les différents types de données autorisés et leurs possibilités.

JavaScript est doté de plusieurs fonctions de conversion chaîne/numérique. Ce cours vous les fait découvrir, de façon théorique puis pratique, à travers un exercice.

JavaScript utilise la plupart des opérateurs des autres langages de programmation. Dans ce cours, découvrez tous les opérateurs utilisables en JavaScript.

Il est souvent nécessaire d'exécuter une portion de code, à la condition qu'une expression logique soit vérifiée. Pour cela, le plus simple consiste à utiliser l'instruction if ... else. Découvrez et pratiquez cette instruction à travers un exercice.

Dans un programme, il est souvent nécessaire de faire exécuter plusieurs fois un même bloc d'instructions. Plutôt que de réécrire plusieurs fois ce bloc, il est plus judicieux d'utiliser une instruction de répétition. JavaScript dispose de deux instructions de ce type : for et while. Ce cours vous montre comment utiliser l'instruction for.

Il existe une syntaxe un peu particulière mais très intéressante de l'instruction for. Découvrez-la dans ce cours.

L'instruction while exécute de façon répétitive un bloc d'instructions tant qu'une condition est vérifiée. Découvrez comment utiliser cette instruction dans ce cours.

Ce cours présente quelques particularités des boucles for et while qui peuvent être très utiles dans certains cas particuliers.

En programmation, les tableaux peuvent rendre de grands services. Ce cours vous montre leur utilité, les différentes façons qui permettent de les définir et les nombreuses méthodes qui leurs sont attachées. Il vous propose également plusieurs exercices pour que vous sachiez bien utiliser les tableaux et manipuler leur contenu.

Ce cours fait un rapide tour d'horizon des objets définis dans le langage JavaScript.

Les objets de type Date permettent de travailler avec les dates (jours, mois, années) et les heures (heures, minutes, secondes). Ce cours vous montre comment les définir et les utiliser. 

Découvrez les constantes et les méthodes des objets Math.

Lorsqu'un programme utilise fréquemment des propriétés et/ou des méthodes relatives à une même classe, il est possible de simplifier la syntaxe en utilisant la technique décrite dans ce cours.

A travers plusieurs exemples pratiques, ce cours vous montre comment utiliser les nombreuses méthodes de la classe String.

Les expressions régulières permettent de faire des recherches très précises et très efficaces dans des chaînes de caractères. Elles font souvent peur au programmeur débutant, mais vous allez voir qu'avec un peu de recul, vous pourrez les considérer comme de fidèles alliées.

Ce cours vous montre ce qu'est une expression régulière, comment la construire et comment l'appliquer sur une chaîne pour savoir si elle correspond au modèle. Une fois les bases théoriques intégrées, vous passez à la pratique sur un exercice qui vous permettra de tester si une adresse e-mail est bien formée.

Lorsqu'une page est chargée dans le navigateur, plusieurs objets sont automatiquement créés. Ce cours les passe en revue et vous montre comment les utiliser.

L'objet history contient les URL des divers sites visités. Ce cours vous montre comment utiliser ses méthodes pour vous déplacer dans l'historique de navigation.

L'objet location fait référence à l'URL courante. Il est défini implicitement par le navigateur. Ce cours vous montre comment accéder à ses propriétés pour obtenir toutes les parties de l'URL courante.

Cet objet renvoie des informations sur le type et la version du navigateur utilisé. Découvrez comment utiliser ses propriétés pour savoir exactement sur quel navigateur le code JavaScript est en train de s'exécuter.

L'objet document donne accès aux propriétés du document courant et à de nombreuses méthodes pour accéder au document ou modifier son contenu. Découvrez comment l'utiliser dans ce cours. A titre d'exemple, un exercice vous montre comment "scraper" une page afin d'extraire tous les liens qui s'y trouvent.

Les contrôles qui composent un formulaire peuvent être référencés à l'aide du tableau elements[]. Ce cours vous montre comment.

L'objet window se trouve au sommet de la hiérarchie du DOM. Ce cours vous montre comment l'utiliser pour ouvrir et fermer une fenêtre secondaire.

Saviez-vous qu'il est possible d'étendre une classe existante en lui ajoutant une ou plusieurs méthodes ? Ce cours vous montre comment procéder à travers un exemple qui ajoute la méthode even() à la classe Number.

Dans la cours précédent, vous avez appris à ajouter une méthode dans une classe JavaScript existante. Ce cours va vous montrer comment définir une nouvelle classe. Vous pourrez ainsi définir de nouveaux objets parfaitement adaptés à chaque situation.

Dans le cours précédent, vous avez appris à créer des objets en instanciant la classe Object. Ce cours va vous montrer comment parvenir au même résultat, mais en adoptant une autre approche. Ici, nous allons utiliser la notation JSON pour définir les objets.

Les événements sont des actions déclenchées par l'utilisateur. En les capturant, JavaScript va introduire de l'interactivité dans les pages Web. Ce cours vous montre comment mettre en place un gestionnaire d'événement compatible avec tous les navigateurs.

Cette section regroupe trois exercices pour vous entrainer à utiliser la fonction getElementById(), à manipuler les styles inline et les attributs.

Il est possible d'associer dynamiquement un événement à un élément HTML alors que la page Web est déjà chargée. Ce cours vous montre comment.

Il est possible de passer un ou plusieurs paramètres dans une fonction événementielle. Ce cours vous montre comment passer un ou plusieurs littéraux à une fonction.

Le mot-clé this peut être passé comme argument d'une fonction événementielle. Dans ce cas, il fait référence à l'élément sur lequel s'est produit l'événement. On pourra donc accéder à cet élément sans utiliser une instruction document.getElementById(). Ce cours vous montre le côté pratique du mot-clé this.

L'objet event fait partie de la gestion événementielle. Ce cous vous montre comment l'utiliser dans la gestion événementielle de la souris puis du clavier.

En utilisant les événements onmouseover et onmouseout, vous pouvez modifier les caractéristiques des éléments survolés. Cette technique est appelée "rollover". Découvrez comment la mettre en œuvre dans un exemple pratique.

Jusqu'ici, vous avez vu qu'il était possible de gérer les événements en JavaScript en utilisant des déclencheurs définis dans les attributs des balises concernées : onclick, onmousemove, onkeypress, etc.. Vous pouvez également mettre en place des gestionnaires d'événements en utilisant la fonction JavaScript addEventListener(). Ce cous vous montre comment.

Vous trouvez peut-être que la fonction addEventListener() est plus difficile à utiliser que les attributs de type onclick dans les balises. C'est vrai. Par contre, elle a un avantage sur la précédente : vous pouvez supprimer un gestionnaire d'événement mis en place par la fonction addEventListener() en utilisant la fonction removeEventListener(). Dans ce cours, vous mettrez ces deux fonctions en pratique.

Il est parfois nécessaire de rediriger une page vers une autre. Par exemple lorsqu'un site change de nom de domaine. Ce cours vous montre comment mettre en place une redirection en JavaScript.

Un cookie est un petit fichier texte stocké côté client par le navigateur. Ce cours vous montre comment créer, modifier, lire et invalider des cookies à l'aide de quelques lignes de JavaScript.

Dans un formulaire, lorsqu'un champ de saisie doit obligatoirement être rempli, il suffit de lui affecter l'attribut required. Ce cours vous montre comment utiliser cet attribut dans divers types de champs, et quelles sont ses limites.

Il est également possible de valider les données entrées dans un formulaire en utilisant quelques instructions JavaScript. La technique est plus complexe, mais aussi plus souple. Combinée avec la précédente, elle vous permet de valider facilement tous types de formulaires.

Ce cours vous montre comment accéder aux propriétés CSS inline, c'est-à-dire définies dans les balises HTML.

En utilisant des méthodes JavaScript, vous pouvez facilement ajouter ou supprimer une ou plusieurs classes dans un élément HTML quelconque. Ce cours vous montre comment

L'objet styleSheets permet d'activer, de désactiver, d'ajouter et de supprimer des règles CSS dans une feuille de styles interne ou externe. Dans ce cours, vous allez découvrir les possibilités, les limites et les dangers de cet objet.

Ce cours vous aide à mieux comprendre ce qu'AJAX peut apporter à vos pages Web et dans quels cas l'utiliser.

Pour communiquer facilement en AJAX avec un serveur Web, nous allons utiliser la bibliothèque jQuery. Ce cours passe en revue les termes du jargon jQuery.

Le code AJAX doit s'exécuter sur un serveur. Si vous ne disposez pas d'un serveur pour faire vos essais, ce cours vous montre comment installer un serveur local WampServer.

Ce cours vous montre comment réagir aux clics sur un bouton en utilisant des instructions jQuery.

Pour mettre à jour un élément sur une page Web en utilisant des données stockées sur le serveur, le plus simple consiste à utiliser la méthode jQuery load(). Ce cours vous montre comment procéder.

En modifiant légèrement le premier paramètre de la méthode load(), il est possible de limiter le chargement des données à une partie seulement du fichier interrogé. Ce cours vous montre comment.

La méthode load() n'est pas la seule à pouvoir récupérer des données via AJAX. Vous pouvez également utiliser la méthode jQuery $.get() pour obtenir des données envoyées par le serveur en utilisant une requête HTTP GET.Ce cours vous montre comment.

Dans l'exemple précédent, les paramètres passés apparaissaient dans l'URL. Pour garder les paramètres secrets ou pour passer des données de taille importante, vous utiliserez une requête POST. Ce cours vous montre comment procéder.

Les fichiers au format JSON (JavaScript Object Notation) permettent de représenter des informations structurées. A travers deux exemples, ce cours vous montre comment accéder à des données JSON élémentaires, puis un peu plus complexes. Vous pourrez facilement étendre le code à d'autres formes de données.

Pour terminer avec AJAX, vous allez découvrir la méthode $.ajax() dans ce cours. Très complète, mais aussi très verbeuse, elle permet d'émettre des requêtes AJAX de toutes sortes. Après ce cours, vous pourrez déterminer si vous voulez vous limiter à la méthode $.ajax() ou profiter des spécificités des autres méthodes.

Ce cours vous montre comment utiliser l'API File pour accéder aux fichiers sélectionnés par l'utilisateur dans une boîte de dialogue "Envoi du fichier".

La technique Drag and Drop (glisser-déposer en français) permet de faire glisser un élément sur un autre et de l'y déposer. Ce cours vous montre comment déplacer une image dans un <div>. Vous pourrez facilement l'étendre pour glisser-déposer d'autres éléments.

L'API de géolocalisation HTML permet d'obtenir la position géographique de l'utilisateur. A travers plusieurs exemples, vous allez voir comment la mettre en œuvre via l'API Google Maps.

Le stockage local (ou local storage) permet aux navigateurs Web de stocker des données localement. Dans ce cours, vous allez vous entrainer à utiliser les méthodes de l'objet localStorage pour stocker et retrouver des données dans un navigateur quelconque.

Les Web Workers sont des API qui exécutent des scripts JavaScript en arrière-plan indépendamment des scripts utilisés dans l'interface utilisateur. Ce cours va vous montrer comment les mettre en œuvre.

Un GPU (Graphic Processing Unit) plus ou moins puissant est présent sur toutes les cartes graphiques modernes. Son but : seconder le CPU (Central Processing Unit) dans le rendu 3D. Le GPU est une "bête de calcul" conçue pour tracer le plus vite possible de grandes quantités de triangles (c'est la base des tracés 3D).

Pour dialoguer avec le GPU en JavaScript, on utilise l'API OpenGL. A travers plusieurs exemples, ce cours va vous montrer comment dialoguer en OpenGL avec le GPU via la bibliothèque three.js.

Ce fichier ZIP contient tous les codes HTML, js, jpg, php et json de cette formation

Ce fichier PDF résume cette formation