fbpx
i

Class aptent taciti sociosqu
ad litorato rquent per conubia nostra

Created by

26 ACADEMY, leading

E-learning platform in Europe

Les objectifs de ce module sont multiples. Assimiler les manipulations qui sont propres au JavaScript dans un environnement browser, comme cibler des éléments html afin de pouvoir effectuer des actions en fonction d'événements utilisateurs. Dans ce module, autant les anciennes méthodes sont abordées que les standards actuels de programmation.

Part #1 - Les sélecteurs de noeuds html

Les « anciens » sélecteurs

Il faut quand même les connaître car même s’ils sont de moins en moins utilisés, vous les rencontrerez souvent dans des projets de maintenance de code.

– document.getElementById()

La méthode getElementById() renvoie un objet de type Element représentant l’élément dont la propriété id correspond à la chaîne de caractères spécifiée. (L’id est censé être unique sur votre page)

 

var elem = document.getElementById(‘paragraph1’);

– document.getElementsByTagName()

Renvoie une HTMLCollection des éléments avec le nom de balise HTML donné.

Part #2 - Insérer dans le DOM et modifier le CSS à la volée

Insérer dans le DOM et modifier le CSS à la volée

ous connaissez l’instruction document.write() pour écrire dans une zone html mais elle est plutôt limitée. Vous allez voir ici dans cette première partie deux autres manières d’insérer des données dans l’arbre du DOM de manière plus ciblée.

 

Les instructions innerHTML et textContent

innerHTML va en fait vous permettre de remplacer du contenu par un autre ou de le concaténer:

 

Par exemple, vous pouvez EFFACER le contenu entier du document en affectant la propriété innerHTML du body à une chaîne de caractère vide.

document.body.innerHTML = «  »;

Si vous voulez rajouter du contenu avant la fin du body il faut tout simplement utiliser l’opérateur de concaténation:

document.body.innerHTML += « 
A new line! »;

Attention, innerHTML renverra à la place les chaînes suivantes: &, <, > respectivement « & », « <" et ">« . Utilisez textContent pour obtenir une copie exacte du contenu de ces nœuds.

Part #3 - Les évenements

avaScript est un langage événementiel asynchrone. La gestion des événements est un sujet essentiel dans le cadre de ce langage. JavaScript n’est pas limité à l’écoute d’événements liés au DOM. Vous verrez dans un prochain module que l’on peut aussi par exemple écouter les événements liés au chargement d’un document. Mais dans ce module, vous vous focaliserez essentiellement sur les différentes manières de déclarer/supprimer des gestionnaires d’événements liés au DOM.

 

Certificate of achievement

FAITES L'ESSAI C'EST SANS ENGAGEMENT

Choisissez l’un de nos forfaits et bénéficiez d’un mois gratuit et un abonnement en illimité à plus de 1500 heures de contenues e-learning

1 mois GRATUIT pour toute offre choisie
SILVER ENGAGEMENT 12 MOIS
19 € Par mois

Accès à l’ensemble du catalogue de cours

Tableau de bord de progression

Videos streaming

Exercices et quizz d’évaluation

Espace collaboratif

Certificats de réussite de cours

Fiches en téléchargement

Accessible depuis tous appareils

Accès 24/24 et 7/7

Support technique

Assistance

SILVER SANS ENGAGEMENT
25€ Par mois

Accès à l’ensemble du catalogue de cours

Tableau de bord de progression

Videos streaming

Exercices et quizz d’évaluation

Espace collaboratif

Certificats de réussite de cours

Fiches en téléchargement

Accessible depuis tous appareils

Accès 24/24 et 7/7

Support technique

Assistance