JavaScript pour débutants | Guide Complet
4.0 (45 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
462 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JavaScript pour débutants | Guide Complet to your Wishlist.

Add to Wishlist

JavaScript pour débutants | Guide Complet

Un guide indispensable pour rendre vos pages Web interactives !
4.0 (45 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
462 students enrolled
Created by Michel Martin
Last updated 8/2016
French
Curiosity Sale
Current price: $10 Original price: $100 Discount: 90% off
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • 2 Articles
  • 90 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Ecrire des programmes JavaScript et les intégrer dans leurs pages Web
  • Utiliser les classes existantes du langage JavaScript
  • Ajouter des méthodes à des classes existantes
  • Accéder aux éléments du DOM
  • Manipuler les classes CSS en JavaScript
  • Modifier les attributs inline des balises HTML en JavaScript
  • Créer des fonctions événementielles pour réagir au clavier, à la souris et aux événements système
  • Valider des formulaires en HTML5 et en JavaScript
  • Créer, lire, modifier et invalider des cookies
  • Interagir avec les feuilles de style en JavaScript
  • Dialoguer avec un programme serveur via AJAX
  • Gérer les drag and drop sur une page Web
  • Utiliser l'API de géolocalisation de Google
  • Stocker des données et gérer le Local Storage
  • Lancer et contrôler des Web Workers
  • Afficher des données en 3D via WebGL
View Curriculum
Requirements
  • La connaissance des langages HTML et CSS est un plus mais n'est pas obligatoire pour suivre cette formation
Description

Cette formation vidéo va vous montrer comment utiliser le langage JavaScript pour dynamiser vos pages Web. Elle s'adresse à un public débutant et intermédiaire. Lorsque vous l'aurez entièrement suivie, vous saurez comment :

  • Utiliser les instructions du langage JavaScript. Vous pourrez ainsi écrire toutes sortes de codes pour répondre à toutes sortes de situation. De la validation locale de formulaires à l'utilisation d'API en passant par la modification du DOM, et bien d'autres sujets encore.
  • Déboguer votre code pour trouver rapidement l'instruction ou les instructions qui bloquent son exécution ou provoquent des comportements que vous n'avez pas prévus.
  • Accéder aux objets par défaut du langage JavaScript et créer vos propres objets. Tout en améliorant les possibilités du langage, vous pourrez définir des objets qui correspondent exactement à ce dont vous avez besoin dans vos projets personnels ou ceux développés dans votre entreprise.
  • Créer du code pour réagir aux événements de l'utilisateur et du système. Ce code permettra par exemple de réagir aux clics souris, aux frappes sur le clavier, au redimensionnement de la fenêtre du navigateur ou encore à l'horloge système. Lorsqu'un tel événement se produira, le contenu de la page pourra changer de façon dynamique pour améliorer l'expérience de l'utilisateur.
  • Interagir avec un programme serveur en AJAX. Pour être le plus efficace possible, les échanges AJAX se feront via la bibliothèque jQuery.
  • Utiliser des API pour faciliter vos développements : drag and drop, géolocalisation, local storage, web workers, 3D avec WebGL.

Il ne s'agit là que de quelques-uns des sujets abordés dans cette formation. Que vous débutiez en programmation JavaScript ou que vous ayez déjà une certaine expérience, vous y trouverez un ensemble de techniques qui simplifieront vos futurs projets, raccourciront vos temps de développement et augmenteront sa pérennité.

Tout au long de la formation, de nombreux exercices vous sont proposés. Pour bien apprendre à programmer en JavaScript, vous devez jouer le jeu et vous appliquer à résoudre chacun des exercices proposés. Rassurez-vous, la difficulté ira croissante. Et vous serez en mesure de résoudre les premiers exercices même si vous n'avez actuellement aucune connaissance en JavaScript !

Je vous souhaite une bonne lecture et beaucoup de découvertes toutes aussi passionnantes les unes que les autres !

Who is the target audience?
  • Ce cours est fait pour tous ceux qui veulent dynamiser leurs pages Web et se différentier des sites traditionnels
  • Il n'est pas fait pour ceux qui ne veulent pas retrousser leurs manches et coder de façon soutenue en JavaScript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
73 Lectures
06:22:54
+
Module 1 – Brève introduction avant de commencer à coder
7 Lectures 18:35

Dans ce cours, découvrez pourquoi une même page peut s'afficher différemment en fonction du navigateur Web utilisé.

Preview 05:02

D'où vient le langage JavaScript ? Y a-t-il plusieurs versions ? Ces questions trouveront une réponse dans ce cours.

Preview 01:53

Pour que vos scripts JavaScript puissent s’exécuter dans un navigateur Web, il est nécessaire que l’exécution de JavaScript soit activée dans ce navigateur. Découvrez comment activer et désactiver l'exécution de JavaScript dans les principaux navigateurs.

Preview 04:21

Ce cours vous montre comment tester avec du code si l'exécution de JavaScript est activée dans un navigateur quelconque.

Tester si JavaScript est activé
01:17

La saisie du code HTML peut se faire dans un simple éditeur de texte, comme le Bloc-Notes de Windows. Mais vous lui préfèrerez un éditeur de code à coloration syntaxique. Ce cours vous suggère deux éditeurs de code gratuits et vous donne les sites à partir desquels ils peuvent être installés.

Editeurs de code HTML/XHTML/CSS/JavaScript
01:47

Tous les navigateurs Web actuels intègrent un débogueur accessible avec la touche de fonction F12. Découvrez les possibilités offertes par ce débogueur. Vous y aurez souvent recours dans les autres cours de cette formation.

Débogage dans le navigateur
01:40

Ce cours passe en revue quelques détails importants que vous devez avoir en mémoire avant de commencer à coder et tout au long du codage.

A savoir avant de commencer à coder
02:35
+
Module 2 - Le langage JavaScript
9 Lectures 43:10

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

Squelette standard
01:55

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

Où insérer le code JavaScript ?
08:16

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.

Des commentaires dans le code
00:57

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.

Une fonction dans une balise <script>
02:07

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.

Exercice
05:25

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.

Gestion des exceptions
06:12

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.

Mise en place d'un gestionnaire d'événements
06:27

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.

Variables et types de données
05:20

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.

Conversions de types
06:31
+
Module 3 – Tout d'horizon du langage JavaScript
7 Lectures 44:39

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

Opérateurs et expressions
11:12

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.

L'instruction de contrôle if... else [.. else]
06:40

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.

Instructions répétitives
05:40

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

Un cas particulier de l'instruction for
03:36

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.

L'instruction while
00:45

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

Quelques astuces à connaitre sur les boucles
06:51

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.

Définition d'un tableau
09:55
+
Module 4 – Programmation objet en JavaScript
16 Lectures 01:11:46

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

Les objets par défaut de JavaScript
01:51

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. 

L'objet Date
04:57

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

L'objet Math
00:54

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.

Utilisation d'un objet par défaut
02:24

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

L'objet String
04:53

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.

Les expressions régulières - l'objet RegExp
08:07

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.

Les objets liés au navigateur
03:54

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 history
05:00

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.

L'objet location
04:42

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 navigator
04:42

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.

L'objet document
04:15

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

Le tableau elements[]
02:09

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.

L'objet window
06:44

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.

Extension des objets prédéfinis
05:35

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.

Définition d'objets avec la classe Object
08:27

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.

Définition d'objets avec la notation JSON
03:12
+
Module 5 - Evénements et données
13 Lectures 01:17:33

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.

Accès aux éléments du DOM
08:20

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

Exercices sur la fonction getElementById
12:11

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.

Associer dynamiquement un événement à un élément
03:58

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.

Passage de paramètres littéraux dans la fonction événementielle
04:13

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.

Passage du mot-clé this dans une fonction
03:55

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.

Passage du mot-clé event dans une fonction
08:25

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.

Effet Rollover
06:54

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.

Version moderne du gestionnaire d'événements
04:04

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.

Suppression d'un gestionnaire d'événements
05:33

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.

Redirection en JavaScript
01:57

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.

Cookies
02:33

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.

Formulaires - Validation en HTML5
06:39

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.

Validation de formulaires en JavaScript
08:51
+
Module 6 - Interaction JavaScript CSS
3 Lectures 17:09

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

Accès aux propriétés CSS en JavaScript
06:03

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

Ajouter/supprimer une classe
02:48

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.

L'objet StyleSheet
08:18
+
Module 7 - AJAX
7 Lectures 44:39

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

Le concept d’échanges asynchrones avec HTTP
03:58

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.

Vocabulaire jQuery
04:34

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.

Installation du serveur WampServer
06:31

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

Réagir au clic sur un bouton en jQuery
01:40

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.

Charger un fichier avec AJAX
15:40

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.

Charger une partie d'un fichier
04:53

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.


Requête GET
07:23
+
Module 8 – Les API JavaScript
9 Lectures 01:05:17

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.

Requête POST
04:54

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.

Charger des données JSON
07:56

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.

La méthode $.ajax()
04:39

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".

API File
05:09

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.

Drag and Drop
06:17

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.

Géolocalisation
09:15

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.

Local Storage
08:33

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.

Web Workers
04:42

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.

WebGL
13:52
+
Code source de la formation
1 Lecture 00:03

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

Le fichier ZIP des codes sources
00:03
+
Bonus - PDF de la formation
1 Lecture 00:02

Ce fichier PDF résume cette formation

PDF de la formation
00:02
About the Instructor
Michel Martin
4.1 Average rating
158 Reviews
2,196 Students
15 Courses
Formateur informatique

Bonjour à tous,

Je m'appelle Michel Martin. Je suis ingénieur ESIEA, MVP Microsoft depuis 2004, auteur de plus de 350 livres d'informatique et de formations vidéo, créateur de sites Web et formateur en entreprise.

A travers mes formations vidéo sur Udemy, je vais vous faire partager ma passion pour l'informatique et l'électronique.

J'ai commencé à créer des formations vidéo en 2000. Depuis toutes ces années, la technique utilisée a énormément varié. Aujourd'hui, mes vidéos sont toujours courtes et directes. Elles traitent un sujet ou un problème spécifique et vous montrent en quelques minutes comment le résoudre.

Si vous avez des questions sur cette formation, je serais heureux d'y répondre. N'hésitez pas à me joindre pour en discuter avec moi.