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

OU ECRIRE LE CODE JAVASCRIPT

Où écrire notre code JavaScript ?

On va pouvoir placer du code JavaScript à trois endroits différents :

  • Dans l’élément head d’une page HTML ;
  • Dans l’élément body d’une page HTML ;
  • Dans un fichier portant l’extension « .js » séparé.

Bien que cette dernière méthode soit généralement recommandée, notamment pour des gros projets, parfois vous serez « obligé » d’écrire votre code JavaScript dans votre fichier HTML.

Pour cette raison, nous allons étudier chacun de ces trois cas dans cette partie.

Du JavaScript dans l’élément head d’une page HTML

Le premier endroit où l’on peut placer du code JavaScript est dans l’élément head d’un fichier HTML.

Dans ce cas, il faudra placer le JavaScript à l’intérieur d’un élément script.

On placera généralement l’élément script à la fin de notre élément head.

On écrit un script dans l’élément head de notre fichier HTML

On affiche le code JavaScript écrit dans l’élément head de notre fichier HTML

Du JavaScript dans l’élément body d’une page HTML

On peut également écrire notre code JavaScript au sein de l’élément body d’un fichier HTML.

Dans ce cas là également, nous utiliserons un élément script et préférerons le placer à la fin de notre page.

On écrit un script dans l’élément body de notre fichier HTML

On affiche le code JavaScript écrit dans l’élément body de notre fichier HTML

Notez que lorsqu’on écrit du JavaScript dans un fichier HTML, que ce soit dans l’élément head, le body ou les deux, on peut utiliser autant d’éléments script que l’on veut.

Cependant, pour des raisons évidentes de performance et de clarté, on essaie souvent de placer tout notre code JavaScript dans un même élément script.

Si vous choisissez d’écrire plusieurs scripts dans une même page HTML, ceux-ci serons lus linéairement, c’est-à-dire dans leur ordre d’écriture.

Regardez plutôt l’exemple ci-dessous :

On ouvre plusieurs éléments script dans une même page HTML

Le script le plus haut dans la page HTML est lu en premier

Le script le plus bas dans la page HTML est lu en dernier

Essayer ce code !

Du JavaScript dans un fichier « .js » séparé

Finalement, on peut écrire notre code JavaScript dans un fichier séparé portant l’extension « .js ».

C’est très souvent la méthode recommandée dans le cas de gros projets car elle permet une meilleure maintenabilité du code grâce à la séparation des langages, et car on va pouvoir réutiliser un même code JavaScript dans plusieurs fichiers HTML.

Dans ce cas, nous allons devoir lier nos fichiers HTML et JavaScript en utilisant à nouveau un élément script et son attribut src.

En valeur de l’attribut src, nous allons indiquer le chemin relatif du fichier .js par rapport au fichier .html. Si nos deux fichiers sont dans le même dossier, par exemple, il suffira d’indiquer le nom du fichier JavaScript.

Par exemple, si l'on souhaite lier un fichier JavaScript script.js à un fichier HTML placé dans le même dossier nous écrirons :

On lie notre page HTML à un fichier JavaScript avec l’élément script et son attribut src

On écrit le JavaScript dans un fichier séparé

Le JavaScript écrit dans un fichier séparé s’affiche bien

Méthode utilisée dans ce cours

Dans ce cours, j’écrirai mon code JavaScript dans l’élément body de mes fichiers HTML, afin que vous puissiez voir d’un coup le code HTML et le code JavaScript dans chaque leçon.

C’est la meilleure manière selon moi pour faciliter votre apprentissage.

Chapitre précédent

Chapitre suivant