Mis à jour le 16/01/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Configurez votre environnement de travail

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Après cette introduction à la programmation et à JavaScript, il est temps de passer à des choses plus concrètes. Pour pouvoir commencer à programmer dans de bonnes conditions, il est nécessaire de disposer d'un environnement de travail adapté.

Coder avec JavaScript en ligne

Une solution simple et très rapide pour coder avec JavaScript consiste à utiliser un "bac à sable" en ligne. Il s'agit de sites Web qui permettent d'écrire du code HTML/CSS/JavaScript et d'observer immédiatement le résultat. Les plus connus sont JSFiddle, JS Bin et CodePen

Ces sites sont très pratiques pour expérimenter et partager des morceaux de code. Toutefois, il est plus confortable de configurer sa propre machine pour obtenir un environnement de développement  fonctionnel.

Coder avec JavaScript sur sa machine

Choisir un navigateur Web

Un navigateur Web est un logiciel conçu pour afficher des pages Web. C'est le type de logiciel qu'on utilise pour surfer sur le Web. Tous les ordinateurs actuels, qu'ils soient fixes, portables ou mobiles, intègrent au moins un navigateur Web. Les plus connus sont Firefox, Chrome et Internet Explorer, mais il en existe bien d'autres. 

Ce cours utilise Firefox, qui présente le triple avantage d'être libre, gratuit et de respecter au mieux les standards du Web. 

Le logo de Firefox : un panda roux

Si Firefox n'est pas déjà présent sur votre machine, téléchargez-le depuis cette page puis installez-le. S'il est déjà installé, assurez-vous de disposer de la dernière version disponible en suivant ces instructions de mise à jour.

Une fois Firefox installé ou mis à jour, lancez l'application.

Firefox en action

Comme tous les navigateurs Web, Firefox est capable d'exécuter du code JavaScript. Nous allons l'utiliser pour tester nos programmes écrits en JavaScript. Il dispose d'outils dédiés au développement Web dont nous allons faire un usage intensif dans ce cours. Affichez ces outils en sélectionnant Développement Web puis Outils de développement dans le menu Outils de Firefox.

Les outils de développement Web de Firefox

Les outils de développement peuvent être affichés avec un thème clair ou sombre (icône Options des outils située en haut à droite de la fenêtre des outils). Choisissez le thème qui vous convient le mieux. Vous pouvez également zoomer ou dézoomer pour obtenir une taille de texte confortable.

Choisir un éditeur de code

Comme nous l'avons vu, programmer consiste essentiellement à écrire des lignes de code dans des fichiers. N'importe quel logiciel capable d'éditer du texte peut être utilisé pour créer des programmes. Cependant, il existe des logiciels spécialisés dans l'édition de code qui apportent au programmeur une aide précieuse. Certains d'entre eux offrent de nombreux services pour écrire, tester et publier ses programmes. On les appelle des environnement de développement intégrés, ou encore IDE en anglais. Parmi les IDE les plus connus, citons Eclipse, WebStorm ou encore Visual Studio.

Pour ce cours, nous allons nous contenter d'un "simple" éditeur de code, plus facile à prendre en main. Parmi les éditeurs les plus populaires à l'heure actuelle, on trouve Sublime Text, Atom et Brackets. C'est ce dernier que nous allons utiliser.

Le logo de Brackets
Le logo de Brackets

Brackets est un éditeur de code open source créé par la société Adobe et disponible sous Windows, Mac OS X et Linux. Il est spécialisé dans l'édition pour le Web et dispose de fonctionnalités très pratiques pour coder avec HTML, CSS et JavaScript. Il est lui-même écrit dans ces langages.

Pour installer Brackets, rendez-vous sur le site http://brackets.io et téléchargez la dernière version du logiciel pour votre système. Lancez ensuite l'installation du logiciel sur votre machine. Ceci fait, lancez Brackets.

Brackets avec le thème Light
Brackets avec le thème Light

Lors de sa première utilisation, Brackets affiche un dossier "Premiers pas" contenant une introduction au logiciel écrite sous la forme d'une page Web. Pour afficher cette introduction, cliquez sur le fichier nommé index.html puis allez dans le menu Fichier et choisissez Aperçu en direct.

L'apparence de l'éditeur est modifiable grâce aux thèmes. Pour modifier le thème courant, allez dans le menu Affichage puis choisissez Thèmes. Pour ma part, je préfère le thème Dark, mais prenez celui que vous trouvez le plus lisible.

Brackets avec le thème Dark
Brackets avec le thème Dark

Par défaut, Brackets analyse les fichiers JavaScript en temps réel à l'aide de l'outil JSLint. Cette analyse peut être utile pour corriger ses erreurs mais produit parfois des avertissements superflus. Elle peut être désactivée en décochant l'option Effectuer une analyse lint des fichiers à l'enregistrement dans le menu Affichage.

Enfin, nous allons ajouter à Brackets une extension très pratique pour mettre en forme le code source. Cette extension se nomme Beautify. Pour l'installer, allez dans le menu Fichier et choisissez Gestionnaire d'extensions. Parmi les extensions disponibles, recherchez "Beautify" puis installez l'extension.

Organiser son code source

On y est presque ! Vous voilà maintenant prêt(e) à faire vos premiers pas de programmeur. La toute dernière étape consiste à prévoir l'organisation du code source sur votre machine, afin de rassembler tous vos fichiers JavaScript au bon endroit plutôt que d'en laisser traîner partout. Ah j'oubliais, la rigueur fait partie des qualités du bon programmeur ^^

Sur votre machine, créez un répertoire (un dossier) nommé intro-javascript à l'emplacement de votre choix. Vous pouvez le créer dans votre répertoire personnel, sur le bureau ou encore dans votre Dropbox. Il contiendra tous les fichiers liés à ce cours. Dans ce répertoire, créez un répertoire nommé chapitre_1. Il contiendra les fichiers associés au premier chapitre. À présent, créez dans chapitre_1 deux répertoires nommés js et html.

Dans Brackets, allez dans le menu Fichier et choisissez Ouvrir un dossier. Naviguez jusqu'à votre dossier intro-javascript puis cliquez sur le bouton Ouvrir. Dans la vue arborescente qui s'affiche sur la gauche, cliquez sur chapitre_1 puis cliquez avec le bouton droit sur le répertoire js, et lancez la commande Nouveau fichier. Donnez au nouveau fichier le nom cours.js et le contenu ci-dessous.

console.log("Bonjour en JavaScript !");

Toujours dans Brackets, cliquez avec le bouton droit sur le répertoire html et lancez la commande Nouveau fichier. Enregistrez ce fichier sous le nom cours.html et donnez-lui le contenu suivant.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Introduction à JavaScript</title>
</head>

<body>
    <script src="../js/cours.js"></script>
</body>

</html>

Vous ne comprenez rien à ce que vous venez de taper ou (ne niez pas) de copier/coller ? Pas de panique ! Il s'agit d'une petite page Web écrite dans le langage HTML, qui utilise des balises comme <title> ou <body> pour décrire le contenu de la page.

HTML n'est pas un langage de programmation mais un langage de description de contenu. Habituellement, une page HTML contient de nombreuses balises qui permettent d'afficher des informations de manière structurée, avec des titres, des images, des liens vers d'autres pages, etc.

Notre page Web est un peu particulière, puisqu'elle ne contient aucun contenu affichable par un navigateur. Le rôle de cette page est d'indiquer au navigateur quel fichier JavaScript nous voulons exécuter, grâce à la balise <script>. Celle-ci contient le chemin d'un fichier source (src="../js/cours.js") : on dit qu'elle "pointe" vers ce fichier. Le chemin indiqué ici est celui du fichier cours.js situé dans le répertoire chapitre_1/js. Les deux points (..) au début du chemin permettent de remonter d'un niveau dans l'arborescence des répertoires par rapport à l'emplacement du fichier HTML. Lorsqu'un navigateur Web essaiera d'afficher la page cours.html, il exécutera le code JavaScript contenu dans le fichier cours.js

Vous devez obtenir l'arborescence ci-dessous.

Arborescence des fichiers source
Arborescence des fichiers source

Tester son premier programme

Lorsqu'on ouvre une page Web dans un navigateur, son contenu s'affiche dans sa fenêtre principale et le résultat de l'exécution du code JavaScript qu'elle contient éventuellement s'affiche dans sa console.

La vidéo ci-dessous montre comment faire pour tester le programme cours.js que vous venez d'écrire.

Basculez vers Firefox et ouvrez la page Web cours.html que nous venons de créer (menu Fichier puis Ouvrir un fichier, puis naviguez jusqu'à l'emplacement du fichier). Rien ne s'affiche dans le navigateur, ce qui est normal : notre page Web n'a aucun contenu affichable. En revanche, la console des outils de développement affiche le message "Bonjour en JavaScript !". Cela signifie que le navigateur a réussi à ouvrir le fichier cours.js et à exécuter son code. En cliquant sur l'onglet Débogueur des outils de développement, vous pouvez visualiser le fichier source JavaScript exécuté par le navigateur.

Si vous pouvez observer le résultat ci-dessus sur votre machine, j'ai deux bonnes nouvelles à vous annoncer :

  1. Votre environnement de travail est prêt pour la suite de ce cours.

  2. Vous avez écrit votre toute première ligne de JavaScript ! 

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite