Exécuter plusieurs fonctions au chargement d'une page

OpenClassrooms

Formation

En Semi-présenciel Paris

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Les meilleurs cours en Web Design

Afficher tout

Afficher tout

Description

  • Typologie

    Formation

  • Méthodologie

    En semi-présentiel

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Les matières

  • Mise en page

Le programme

Introduction du cours

Bonjour, amis Zéros :)

Il est possible de lancer plusieurs fonctions au chargement de la page en utilisant l'évènement onload de l'élément body. Mais dans ce tutoriel, je vais vous apprendre à charger plusieurs fonctions avec le gestionnaire d'événement traditionnel, qui est sous la forme window.onload. Nous apprendrons aussi à le faire par les addEventListener.

Comment faire les choses proprement ?

Comme expliqué en introduction, j'ai conseillé d'utiliser le gestionnaire d'événements traditionnel, au lieu de celui en-ligne.

Gné o_O

Le gestionnaire d'événements traditionnel permet d'éclaircir le code XHTML car le lancement des scripts au chargement de la page est paramétré dans les fichiers, et on n'a pas à faire ce genre de chose :

<body onload="scope(); load_events(); date()">

Avec le gestionnaire d'événements traditionnel, on met à la fin du fichier javascript cette ligne :

//Code.... window.onload = fonction_du_fichier; //SANS parenthèses (pas le droit aux arguments donc :( )

C'est propre, c'est clean, c'est cool :)
Oui mais voilà...

Un problème bien ennuyeux

Si vous essayiez de lancer plusieurs fonctions depuis plusieurs fichiers, vous allez vous rendre compte... que seul le dernier est chargé :euh:
Comment est-ce possible ?
En fait, quand vous refaites window.onload = truc_machin, vous écrasez la fonction précédente (elle est remplacée par la suivante).

:ange: Moi je sais comment on va faire pour régler ça ! On va faire window.onload += truc_machin et tout rentrera dans l'ordre !

Perdu :p Ce serait trop simple.

La solution n°1 : l'array de fonctions

Comment va-t-on faire pour régler ce problème ?

Je vous donne le raisonnement :

  • On va stocker toutes les fonctions à charger en même temps que la page dans un array de fonctions, avec... une fonction

  • On les exécute une par une via une autre fonction, qui sera elle lancée par window.onload

En théorie, ça marche, mais dans la pratique ? A vos claviers :-°

...

var FunOnl = new Array(); //L'array qui sert au stockage des fonctions function lancer(fonction) { //Fonction qui devra être appelée à la place de window.onload FunOnl[FunOnl.length] = fonction; //On stocke les fonctions dans l'array. Il commence à 0, et length donne l'indice du dernier élément + 1. } window.onload = function() { //On appelle ça une fonction anonyme (elle n'a pas de nom, la pauvre ;) ) for(var i = 0, longueur = FunOnl.length; i < longueur; i++) //On utilise longueur pour ne pas recalculer la taille à chaque fois. FunOnl[i](); //On exécute les fonctions. };

Il vous suffit maintenant de faire appel à lancer() plutôt que window.onload pour lancer vos scripts aux chargements de page !
C'est une première solution, elle marche, mais on peut faire mieux :D

La solution n°2 : "l'écouteur" d'événements

OK, OK, la solution précédente marche. Mais notre fonction serait plus simple si, plutôt que de créer notre array de fonctions (c'est un peu tordu), on "surveillait" la fenêtre, pour savoir quand elle est chargée. Ensuite, on ajoute successivement les fonctions à charger en les "ajoutant" au gestionnaire onload.

Aque comment on fait ça ?

On va utiliser une méthode appelée addEventListener (spécification du W3C). Elle s'utilise comme suit :

element.addEventListener("événement_sans_on_devant", fonction_a_executer, propagation_evenement_(booleen));

Mais comme IE a implémenté la fonctionnalité avant sa standardisation, lui utilise une fonction appelée attachEvent :

element.attachEvent("évènement", fonction);

A partir de ces informations, ce serait bien qu'on créer notre propre fonction addEvent, qui combinerait les 2, comme ça on aurait pas à écrire en double le gestionnaire.
Je vous aide un peu : pour la première fonction standard, je n'entrerai pas dans les détails, mais sachez qu'il faut mieux mettre true pour le 3ième argument.
Allez, au boulot :)

...

function addEvent(obj, event, fct) { if (obj.attachEvent) //Est-ce IE ? obj.attachEvent("on" + event, fct); //Ne pas oublier le "on" else obj.addEventListener(event, fct, true); }

En plus, vous pourrez utiliser cette fonction pour virer tous les attributs onclick, etc... de vos pages XHTML :)
Je vous mets un exemple d'utilisation de notre fonction :

function al1() { alert(1); } //Trois fonctions quelconques function al2() { alert(2); } function al3() { alert(3); } addEvent(window , "load", al1); //On les lance toutes les deux au chargement de la page addEvent(window , "load", al2); addEvent(document.getElementById('truc'), "click", al3); //Un clic sur "truc" déclenche la fonction al3()

Et maintenant, notre fonction lancer(), devenue riquiqui :

function lancer(fct) { addEvent(window, "load", fct); }

Merci à Thunderseb pour l'idée de la gestion des événements ;)

Voilà, un petit script bien pratique qui vous servira sûrement.

En espérant vous avoir été utile, merci d'avoir lu ce tuto :)

  • #
Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter
  • Thématiques du cours : Javascript Web

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.

Catégories liées

  • Cours de Mise en page
  • Cours mise niveau scientifique
  • Cours mise scene theatre
  • Cours Web Design
  • Cours Web Design a distance
  • Formation a distance
  • Cours Web Design (75) Paris
  • Cours (75) Paris
  • Formations OpenClassrooms

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Exécuter plusieurs fonctions au chargement d'une page

Prix sur demande

Les meilleurs cours en Web Design

Afficher tout

Afficher tout