Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

LA PORTEE EN JAVASCRIPT

Qu’est-ce que la portée ?

La portée désigne la possibilité d’accéder ou non à certaines variables (et donc aux valeurs, fonctions ou objets contenus à l’intérieur de ces variables) depuis un endroit précis d'un script.

En JavaScript, les variables peuvent être définies soit localement, soit globalement dans le script.

La portée va influer sur le fait qu’on puisse récupérer la valeur qu’elles contiennent et travailler avec ces variables n’importe où dans notre script ou non.

Les variables locales

Une variable est dite « locale » lorsqu’elle est définie à l’intérieur d’une fonction (donc localement).

Une variable locale n’est accessible que localement, c’est-à-dire seulement à un endroit spécifique dans le script.

Par exemple, lorsqu’on déclare une variable à l’intérieur d’une fonction, on ne pourra utiliser cette variable qu’à l’intérieur même de notre fonction.

Par défaut, cette variable ne sera pas accessible depuis le reste de notre script. Voyons immédiatement quelques exemples pour nous en assurer.

La variable x est définie localement

x est accessible à partir de notre fonction

Essayer ce code !

Dans ce premier exemple, on définit une variable x à l’intérieur d’une fonction qu’on appelle locale().

On dit que x est définie localement par rapport à notre fonction. x ne peut donc être utilisée qu’à l’intérieur de locale().

Cette fonction a justement pour but d’afficher la valeur contenue dans la variable x. Ainsi, lorsqu’on l’appelle, on obtient la valeur de x sans aucun problème.

Cependant, si on veut afficher directement la variable x ou modifier son contenu depuis l’extérieur de notre fonction, cela ne va pas fonctionner :

On essaie d’accéde à notre variable locale depuis l’espace global

On ne peut récupérer le contenu de notre variable

Essayer ce code !

Comme vous pouvez le constater, le JavaScript ne va pas trouver la variable dont on souhaite afficher le contenu et donc rien ne va s’afficher.

Variables globales

Une variable est globale si elle est définie dans l’espace global d’un script, c’est-à-dire en dehors de toute fonction.

Une variable globale possède une portée globale et est donc accessible depuis n’importe où dans un script, même à l’intérieur des fonctions (attention, nous venons de voir que la réciproque est fausse).

Définition et utilisation de variables globales

Une variable globale est accessible depuis n’importe où dans le script

Essayer ce code !

Ici, nous avons défini une nouvelle variable x, globale. Comme x est une variable globale, on va pouvoir s’en servir n’importe où dans le script.

Ainsi, on peut commencer par effectuer des calculs sur x dans l’espace global (ici, on lui ajoute 6 par exemple) puis on peut se resservir de x dans n’importe quelle fonction.

Toutefois, notez qu’il est généralement considéré comme une très mauvaise pratique d’utiliser des variables globales au sein de contextes locaux (c’est-à-dire à l’intérieur de fonctions) pour des raisons évidentes de clarté et de lisibilité.

Variable locale ou globale ?

Ici, on va se servir de ce qu’on a appris sur la portée en JavaScript pour observer des choses intéressantes.

Nous allons créer deux variables portant le même nom, une dans l’espace global et une à l’intérieur d’une fonction.

Ces deux variables vont posséder le même nom mais être bien différentes.

Le but ici va être d’afficher simultanément le contenu de ces deux variables afin d’observer ce qui est renvoyé par le JavaScript.

Variables locale et globale

On crée deux variables différentes avec le même nom

Essayer ce code !

Ici, on définit une première variable globale x dans laquelle on stocke le chiffre 4. Ensuite, on crée une deuxième variable locale x dans laquelle on stocke le chiffre 7.

Finalement, on tente d’afficher le contenu de ces deux variables depuis l’espace global.

Sans surprise, notre variable x définie dans l'espace global renvoie bien la valeur 4.

Pour la variable locale cependant cela semblait plus problématique car je vous rappelle qu’une variable globale est accessible depuis n’importe où dans un script.

Le JavaScript sait il donc quelle variable utiliser à l’intérieur de notre fonction ? Comme vous pouvez l’observer, la réponse est oui puisque la valeur renvoyée est bien celle contenue dans notre variable x définie localement (7).

Notez une nouvelle fois qu’il est fortement déconseillé de créer plusieurs variables avec un même nom : cela aura tendance à très vite complexifier un script sans raison.

Le mot clef var

Vous devez savoir que si vous omettez le mot clef var lorsque vous voulez créer une variable, le JavaScript va automatiquement créer une sorte de variable globale.

On crée une variable globale en omettant le mot clef var

Notre variable x est accessible depuis n’importe où dans le script

Essayer ce code !

Si je vous montre ceci, c’est pour vous conseiller de ne jamais coder de cette manière.

En effet, il est largement préférable d’utiliser le mot clef var lorsque vous créez une nouvelle variable en JavaScript.

Outre le fait que cela rendra votre code beaucoup plus lisible, si vous n’écrivez pas var, le JavaScript ne va pas exactement créer une variable globale mais va utiliser des procédés légèrement différents qui pourraient vous poser problème par la suite lorsque vous voudrez travailler sur vos variables justement.

Comprendre l’intérêt de la portée

Après avoir lu ce chapitre, vous serez peut-être tenté de déclarer toutes vos variables globalement, puisqu’on peut y accéder partout.

Ne le faites pas. Ce qui peut vous sembler être un avantage ne l’est au final pas. En effet, lorsque vous vous lancerez dans un gros projet, vous aurez des centaines de variables et des milliers de lignes de code.

Créer des variables locales est un bon moyen de ne pas « polluer » l’espace global et d’éviter de nombreuses erreurs d’inattention.

Si vous déclarez toutes vas variables comme étant globales, vous serez vite perdus et risquez d’écraser des valeurs en re-déclarant une même variable.

En résumé : ne déclarez une variable globalement que si cela vous semble strictement nécessaire.

Chapitre précédent

Chapitre suivant