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

MODIFIER DU CONTENU HTML GRACE AU JAVASCRIPT

Les objets JavaScript document et element

Nous avons vu dans le chapitre précédent qu’on pouvait accéder au contenu d’un élément HTML grâce à la propriété innerHTML.

Rappelons le : la propriété innerHTML appartient bien à l’objet Element, et non pas à Document.

L’objet Element va bien évidemment hériter de toutes les méthodes et propriétés de son parent Document, et va également posséder des méthodes et des propriétés qui lui sont propres.

Notez qu’on va toujours utiliser les propriétés et méthodes de l’objet Document sur Document lui même.

Ainsi, on écrira par exemple document.getElementByid() pour accéder à un élément HTML dans une page.

En revanche, on va appliquer les propriétés et méthodes de l’objet Element sur des objets de type element, c’est-à-dire sur les éléments HTML sur lesquels on travaille en particulier.

On n’écrira donc pas element.innerHTML ; on appliquera innerHTML sur un élément en particulier ou plus exactement sur l’objet représentant l’élément (auquel on accèdera grâce aux méthodes de l’objet Document).

Cela est logique et intuitif lorsqu’on y pense : on ne travaille jamais que sur un document à la fois, il n’y a donc pas d’ambiguïté par rapport à l’objet Document. En revanche, lorsqu’on utilise innerHTML par exemple, on cherche à accéder au texte contenu dans un élément en particulier. Il faut donc cibler précisément cet élément avant.

Voici un premier exemple pratique ci-dessous :

On récupère le contenu d’un élément HTML grâce aux propriété de l’objet JavaScript element

On utilise innerHTML et textContent sur un élément en particulier

Essayer ce code !

Modifier le contenu d’un élément HTML

La propriété innerHTML va également nous servir à modifier le contenu d’un élément HTML.

Pour cela, il suffit d’utiliser innerHTML sur un élément et de lui affecter une nouvelle valeur textuelle.

Pour modifier le contenu d’un élément HTML, on affecte tout simplement une nouvelle valeur avec innerHTML

Nous avons modifié le contenu de notre titre h1 grâce à innerHTML en JavaScript

Essayer ce code !

Ici, on accède à notre élément h1 grâce à la méthode getElementById() de l’objet Document, puis on modifie son contenu en affectant une nouvelle valeur à son innerHTML.

Lorsqu’on affiche la page, on s’aperçoit bien que notre titre a changé. Cela commence à être très intéressant, puisque c’est la première étape pour pouvoir modifier ce que l’on souhaite sur notre page de manière dynamique, c’est-à-dire selon les préférences de chaque visiteur.

Notez que l’on peut également utiliser d’autres opérateurs d’affectation pour modifier le contenu d’un élément HTML. Par exemple, en utilisant +=, on va rajouter du contenu.

On peut ajouter du contenu dans un élément HTML avec innerHTML

Nous avons rajouté du texte dans notre titre en JavaScript grace à innerHTML

Essayer ce code !

Modifier la valeur d’un attribut HTML

Pour modifier la valeur d’un attribut HTML, nous allons généralement utiliser la propriété attribute de l’objet Element.

Pour utiliser cette propriété, nous n’allons pas écrire attribute mais bien le nom de l’attribut donc on souhaite modifier la valeur (comme href par exemple).

Ensuite, nous n’aurons plus qu’à affecter une nouvelle valeur à l’attribut ciblé.

Essayons immédiatement de modifier la valeur d’un attribut href. Pour cela, commençons par reprendre notre page HTML, et utilisons notre propriété.

Utilisation de la propriété attribute de l’objet JavaScript element

On modifie la valeur de notre attribt href grâce à la propriété attribute de l’objet element

La valeur de l’attribut href de notre élément a à bien été modifiée en JavaScript

Essayer ce code !

Attention néanmoins si vous souhaitez modifier la valeur d’un attribut class : ce mot est un mot réservé en JavaScript et on ne peut donc pas l’utiliser comme cela.

A la place de class, il faudra donc utiliser la propriété className comme ceci :

Utilisation de className pour modifier la valeur d’un attribut class en JavaScript

Nous avons bien pu modifier la valeur d’un attribut class en JavaScript grâce à className

Essayer ce code !

Notez également que dans le cas d’attributs non standards (ce qui est très rare), nous utiliserons alors plutôt les méthodes getAttribute() (pour accéder à l’attribut) et setAttribute() (pour modifier un attribut).

Cependant, contentez vous pour le moment de retenir la première méthode présentée qui est très largement la plus utilisée.

Modifier le CSS d’un élément HTML

Pour ajouter ou modifier le style CSS d’un élément HTML, on va utiliser la propriété style de l’objet Element suivie de la propriété CSS à ajouter / modifier.

Par exemple, pour changer la couleur ou la taille d’un texte, on procèdera comme ceci :

Utilisation de la propriété style de l’objet JavaScript element

On utilise la propriété style pour modifier les styles CSS de nos éléments HTML en JavaScript

Essayer ce code !

Notre titre va donc dorénavant apparaître en orange et avec une taille de 40px.

Notez que lorsqu’on utilise cette propriété, il faut supprimer le tiret des propriétés CSS qui en contiennent et mettre une majuscule au deuxième mot (font-size devient fontSize par exemple).

Il est possible que vous pensiez que tout ce que nous avons fait jusqu’à présent est sans intérêt. En effet, on peut également très bien changer la couleur de nos textes en CSS.

C’est vrai. Cependant, l’intérêt du JavaScript va une nouvelle fois être de pouvoir changer la couleur d’un texte dynamiquement, c’est-à-dire en temps réel par rapport aux préférences d’un utilisateur par exemple. Et pour parvenir à faire cela, il faut déjà apprendre à faire ce que l’on fait depuis quelques chapitres. Accrochez vous donc !

Chapitre précédent

Chapitre suivant