• Mon premier code Javascript - afficher un message

    Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

    Voici un petit code javascript qui affiche une fenêtre avec un message :

    Code Javascript  Tout sélectionner

    alert("Bonjour");
    Exécuter ce code

    Cliquez sur « Exécuter ce code » en bas à droite du code ci-dessus pour l'exécuter.
    Un petite fenêtre s'affiche :

    Dialogue ekla

    Le code javascript peut-être écrit à deux endroits dans Eklablog :

    • dans une page ou un article ;
    • dans un module.

    Si vous insérez du code dans une page ou un article, il sera exécuté lors de l'affichage de cette page ou cet article.

    Si vous insérez du code dans un module, il sera exécuté à l'ouverture du blog lors du chargement des modules.

    Si vous avez activé la navigation Full-Ajax dans les paramètres du blog, le code présent dans les modules ne s'exécutera pas à chaque changement de page, car les modules ne sont alors pas rechargés systématiquement.

    Dans un nouvel article, ajoutons ce code dans l'éditeur source HTML :

    Code Javascript  Tout sélectionner

    <script>// <![CDATA[
    alert ("Bonjour");
    // ]]></script>

    Sauvegarder et raffraîchir la page, la fenêtre qui s'affiche est (varie en fonction des navigateurs) :

    Mon premier code Javascript - afficher un message

    Ce n'est pas tout à fait ce qu'on attend.
    En fait la fenêtre vu précédemment (celle avec la barre de titre bleue) est une fenêtre créée par Eklablog en remplacement de la fenêtre standard.
    Pour pouvoir l'utiliser, il faut attendre que le javascript du blog soit totalement chargé.

    Voici le code à utiliser :

    Code Javascript  Tout sélectionner

     <script>// <![CDATA[
    // Début du code Javascript 
    	if(typeof(onJSFilesLoaded) != "object")
    	   onJSFilesLoaded = [];
    	onJSFilesLoaded.push(function(){
    	  // Début du code au chargement
    	  alert ("Bonjour"); // Pour test
    	  // Fin du code au chargement
    	});
    	// Début autres fonctions
    	// Si vous avez d'autres fonctions...
    	// Fin autres fonctions
    // Fin du code Javascript
    // ]]></script>

    On s'assure ainsi que tout soit bien chargé avant d'exécuter notre code.

    En général, on utilisera ce mécanisme qui permet d'attendre que toute la page soit chargée avant de faire des manipulations en javascript.

    « Mon premier code CSS - images au coins arrondis avec ombrage[CSS] Les sélecteurs CSS, comment formater une liste hiérarchique ? »

  • Commentaires

    1
    Dimanche 6 Avril 2014 à 15:38

    Je trouve ce script très sympa mais y a-t-il moyen d'insérer une image dedans 

    et aussi que la fenêtre soit plus petite?

    2
    Dimanche 6 Avril 2014 à 19:11

    Bonjour,

    C'est possible en programmant une fonction plus complète que la fonction « alert  » qui est très limitée.

    Je prévois un article sur le sujet.

    3
    Lundi 7 Avril 2014 à 20:28

    Merci pour votre réponse quand même :) Bonne soirée

    4
    Lundi 7 Avril 2014 à 22:21

    Repassez dans quelques jours si le sujet vous intéresse.
    L'article est en préparation.

    5
    Vendredi 13 Juin 2014 à 18:50

    Merci !!!!!

    6
    Samedi 2 Juillet 2016 à 10:53

    merci pour l'aide cool

    7
    Vendredi 2 Septembre 2016 à 21:13

    02 / 09 / 2016 

    Bonjour,

    je signale une évolution d'Eklablog (fin 2015) qui n'est pas actuellement signalée dans l'article :

    • il y a un 3ème emplacement pour écrire un code javascript : Apparence > zone de script (barre menu)
    • Cette zone de script est intégrée directement dans la page html
    • il existe maintenant une Version mobile qui ignore le thème CSS de la Version standard. Les modules sont  ignorés, ainsi que les éventuels codes qu'ils contiennent)
    • la zone de script accepte aussi du CSS (en utilisant les balises <style>..</style>). CSS qui sera chargé avec la page, dans les deux versions, mobile ou standard.
    • du texte simple, écrit hors balises dans cette zone de script apparait en clair sous le pied de page (versions standard et mobile)

     

    Merci -Thierry- pour les explications et annotations très pédagogiques cool

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :