CV
Langages
- C
- PHP
- Java
- Perl
- Ruby
- Javascript
- Flex 3
- Python
- GO
- C#
- TCL
- Bash
Liens
Articles
Contact

JavaScript / JQuery

Expertise (5/5)

J'utilise régulièrement JavaScript depuis 2 ans. J'ai développé de nombreux greffons pour JQuery.

Intégration de Google Map (sélection d'un lieu avec la souris).
Carrousel de photos.
Trombinoscope animé.
Slider (dans toutes les directions).
... et de très nombreuses autres fonctions plus ou moins spécifiques.

Ce document contient quelques exemples simples de réalisation.

Javascript: la portée des variables
Le "hoisting"
Les closures
Constructeurs et prototypes
Héritage
Un trombinoscope animé
Créer des liens
Initialisation de l'API Google pour un site multi-domaine
Calcul d'un âge, à partir d'une date de naissance
Sliders
Ajax

Javascript: la portée des variables

Déclaration d'une variable: var x;
Assignation d'une valeur à une variable: x = 10;

La portée des variables déclarées dans une fonction est limitée à la fonction. Mais, contrairement à d’autres langages (C, C++, Java, GO...), la portée des variables déclarées dans un bloc ({...}) n’est pas limitée au bloc. De nombreux développeurs sont spécialisés dans des langages tels que C, C++ ou Java et ce dernier point peut engendrer de nombreuses erreurs: en déclarant des variables dans des blocs, ils pensent que la portée de ces dernières est limitée aux blocs dans lesquels sont déclarées. C'est faux.

Le script ci-dessous utilise une fonction anonyme pour « isoler » les variables utilisées dans le bloc d’une boucle.

La variable x n'est pas définie en dehors de la boucle. En revanche la variable i est définie. Pour limiter la portée de la variable i on peut utiliser une fonction anonyme de la façon suivante:

Note importante sur le processus de "déclaration implicite":

la déclaration d'une variable peut être effectuée de façon implicite lors de la première assignation d'une valeur à une variable (sans utilisation du mot clé var).

Par exemple

        var i = 0; // Déclaration explicité de la variable i.
        var f = function() {
            x = 10; // Déclaration **implicite** de la variable x.
        };

Ce mécanisme de déclaration implicite est la cause de très nombreux dysfonctionnements extrêmement difficiles à diagnostiquer. En effet, il est très facile d’oublier d’utiliser le mot clé var. Et, dans ce cas, l’interpréteur JavaScript ne lance aucun avertissement.

L’interpréteur va « remonter » les « zones de portées des variables » à la recherche de la variable.

Si une variable de même nom est déclarée dans une « zone de portée » alors la nouvelle valeur sera assignée à la variable.
Sinon (si l’interpréteur « remonte » jusqu’à la zone de portée « terminale »), l’interpréteur crée une variable globale.

Illustration:

Traitement de la variable x:

La variable x n'est pas déclarée dans la function anonyme "of2()". Donc l'interpréteur va « remonter »: il cherche la déclaration de la variable x dans la fonction anonyme "of1()".
La variable x n'est pas déclarée dans la function anonyme "of1()". Donc l'interpréteur ba « remonter »: il cherche la déclaration de la variable x dans la fonction "f2()".
La variable x n'est pas déclarée dans la function anonyme "f2()". Donc l'interpréteur va « remonter »: il cherche la déclaration de la variable x dans la fonction "f1()".
La variable x est déclarée dans le function "f1()". Donc l'interpréteur assigne la valeur 3 à la variable x déclarée dans la fonction "f1()".

Traitement de la variable y:

La variable y n'est pas déclarée dans la function anonyme "of2()". Donc l'interpréteur va « remonter »: il cherche la déclaration de la variable y dans la fonction anonyme "of1()".
La variable y n'est pas déclarée dans la function anonyme "of1()". Donc l'interpréteur va « remonter »: il cherche la déclaration de la variable y dans la fonction "f2()".
La variable y n'est pas déclarée dans la function anonyme "f2()". Donc l'interpréteur va « remonter »: il cherche la déclaration de la variable y dans la fonction "f1()".
La variable y n'est pas déclarée dans la function anonyme "f1()". Donc l'interpréteur va « remonter »: il cherche la déclaration de la variable y dans la zone de portée terminale.
La variable y n'est pas déclarée dans la zone de portée terminale. Donc l'interpréteur va déclarer la variable y dans la zone de portée terminale. y est donc une variable globale.

Résultat à l'exécution:

Le "hoisting"

Le "hoisting" (to "hoist" peut être traduit pas "hisser" ou "lever") est une caractéristique originale du JavaScript. Ce mécanisme, s'il n'est pas bien compris par le développeur, peut engendrer des erreurs extrêmement difficiles à détecter.

Le "hosting" consiste à déplacer les déclarations des variables au début des blocs qui délimitent leurs portées.

Autrement dit:

Est équivalent à:

Mais, attention, ce n'est pas équivalent à:

Note importante sur le mécanisme de "hoisting": le mécanisme de "hoisting" produit parfois des effets difficiles à prédire.

// The variable "x" should be declared (since it is implicitly declared below).  
if ('undefined' === typeof x) { console.log("The variable x is not defined, but it is declared due to the hoisting mechanism."); }
x = 1;

// The variable "y" should be declared (since it is implicitly declared within the anonymous function below).  
if ('undefined' === typeof y) { console.log("The variable y is not defined, but it is declared due to the hoisting mechanism."); }

// In the anonymous function below we implicitly declare the variable "y".
(function() {
	try {
		var variable = y;
	} catch (e) {
		console.log("ERROR: " + e.message + " (you should understand: y is not **declared**)");
	}
	y = 2; // Here we "declare" y.
})();

// The variable "y" should be declared and its value shold be 2.
if ('undefined' === typeof y) { console.log("The variable y is not defined, but it is declared due to the hoisting mechanism."); }
else { console.log("The variable y is declared and tis value is: " + y); }

(function() {
	var variable = y;
	// The variable "y" should be declared and its value shold be 2.
	console.log("The variable y is declared and tis value is: " + y);
})();

Résultat à l'exécution:

Vous constatez le message suivant:

ERROR: y is not defined (you should understand: y is not **declared**)

Les closures

Wikipedia: http://fr.wikipedia.org/wiki/Fermeture_%28informatique%29

Dans un langage de programmation, une fermeture ou clôture (en anglais : closure) est une fonction qui capture des références à des variables libres dans l'environnement lexical. Une fermeture est donc créée, entre autres, lorsqu'une fonction est définie dans le corps d'une autre fonction et fait référence à des arguments ou des variables locales à la fonction dans laquelle elle est définie.

La nature asynchrone du JavaScript rend indispensable l’utilisation des closures. En effet, entre le moment où un gestionnaire d’évènement est exécuté, et le moment où il a été préalablement défini, les valeurs des variables utilisées par le gestionnaire peuvent avoir été modifiées. Il est donc indispensable de « capturer » la valeur d’une variable à un instant T afin de pouvoir utiliser cette valeur ultérieurement. Pour cela on utilise la construction suivante :


    var eventHandler = function(valueToCapture1, valueToCapture2) {
        return function() {
            // Use the captured values.
            console.log("(valueToCapture1, valueToCapture2) = " + valueToCapture1, valueToCapture2);
        };
    }

Exemple d'utilisation

ou:

Dans le code "handlers.push(eventHandler(i*2, object))", "i*2" est transmis pae copie. En revanche "object" est transmis par référence. Mais à chaque appel à la fonction "setTimeout()", une nouvelle référence est transmise. Ainsi les fonctions retournées par l'appel à "eventHandler()" utilisent des instances distinctes d'objets.

Le code "var object = { a: i }" signifie que la valeur de "object" est une référence vers un objet.

A chaque passage dans la boucle, "object" prend une nouvelle valeur (car un nouvel objet - "{ a: i }" - est créé).

Ainsi, à chaque appel de la fonction "eventHandler()", le paramètre "valueToCapture2" (qui est une référence vers l'objet "object") prend une nouvelle valeur.

Résultat à l'exécution:

Remarque sur l'utilisation d'objets (passage par référence)

Maintenant, cosidérons le code ci-dessous:

Résultat à l'exécution:

Contrairement à l'exemple précédent, on constate que la valeur affichée de "valueToCapture2.a" ne change pas (elle vaut 2). Cette valeur correspond à la valeur de "i" lors du dernier passage dans la boucle.

Explication: contrairement à ce qui se passe dans l'exemple précédent, la valeur de "valueToCapture2" ne change pas d'un passage à un autre dans la boucle. Cette valeur est égale à la référence de l'objet "object".

Pour obtenir le comportement "attendu", une solution serait de créer un clone de l'objet object, comme dans l'exemple ci-dessous.

Constructeurs et prototypes

Cette section présente deux techniques pour la création d’objets :

La première technique consiste à définir un prototype qui servira à la construction de l’objet. Ce prototype définit les propriétés et les méthodes de l’objet. Les éventuelles opérations d’initialisation de l’objet sont effectuées dans le constructeur.
La seconde technique consiste à se passer de prototype : la définition des propriétés et des méthodes de l’objet est incluse dans le constructeur. Ce dernier effectue également les éventuelles opérations d’initialisation de l’objet.

Technique 1: avec prototype

Technique 2: sans prototype

Ces deux techniques ne sont pas équivalentes. Elles diffèrent, principalement, sur deux points :

La deuxième technique consomme plus de ressources. En effet, à chaque instanciation d’un nouvel objet, les propriétés et les méthodes sont clonées. Ce n’est pas le cas si l’on définit un prototype.
La modification d’un prototype entraine la modification instantanée de tous les objets instanciés via ce prototype. Ainsi, si l’on désire ajouter une propriété à toutes les personnes, il suffit d’ajouter cette propriété au prototype ayant servi à l’instanciation des personnes.

Illustration:

A l'exécution:

Héritage

Le code ci-dessous présente deux techniques qui permettent de faire hériter un objet des propriétés et des méthodes d’un autre objet.

if (process.argv.length < 3) {
    console.log('Usage: node "%s" <test number (1|2)>', process.argv[1]);
    return;
}

var test = process.argv[2];

if (test == 1) {

    // -------------------------------------------------
    // Executing test 1.
    // -------------------------------------------------
    console.log("Executing test 1");

    (function() {

        // ---------------------------------------------
        // We define a Personne.
        // ---------------------------------------------

        var Personne = function(inName) { // This is the constructor.
            // Do some initialization.
            console.log("Executing the constructor Personne.");
            if ('undefined' != typeof inName) {
                this.name = inName;
            }
        }

        var PersonnePrototype = { // This is the prototype.
            name: undefined,
            setName: function(inName) { this.name = inName; },
            getName: function() { return this.name; }
        };

        Personne.prototype = PersonnePrototype;

        // ---------------------------------------------
        // We define a Student.
        // ---------------------------------------------

        var Student = function(inAge, inName) { // This is the constructor.
            // Do some initialization.
            console.log("Executing the constructor Student with inAge=%d and inName=%s.", inAge, inName);
            if ('undefined' !== typeof inAge) {
                this.setAge(inAge);
            }
            if ('undefined' !== typeof inName) {
                this.setName(inName);
            }
        }

        Student.prototype = new Personne();
        Student.prototype.age = undefined;
        Student.prototype.setAge = function(inAge) { this.age = inAge; };
        Student.prototype.getAge = function() { return this.age; };

        var Tom = new Student(12, "Tom");
        console.log("The student %s is %d years old.", Tom.getName(), Tom.getAge());
        var Joe = new Student();
        Joe.setName("Joe");
        Joe.setAge(20);
        console.log("The student %s is %d years old.", Joe.getName(), Joe.getAge());
        console.log("The student %s is %d years old.", Tom.getName(), Tom.getAge());
        console.log(Joe.__proto__);
        console.log(Object.getPrototypeOf(Joe));

    })();

    return;
}

if (test == 2) {

    // -------------------------------------------------
    // Executing test 2.
    // -------------------------------------------------
    console.log("Executing test 2");

    (function() {

        // ---------------------------------------------
        // We define a Personne.
        // ---------------------------------------------

        var Personne = function(inName) {
            // We define the prototype here.
            this.name = undefined;
            this.setName = function(inName) { this.name = inName; },
            this.getName = function() { return this.name; }

            // Do some initialization.
            console.log("Executing the constructor Personne with inName=%s.", inName);
            if ('undefined' !== typeof inName) {
                this.name = inName;
            }
        }

        // ---------------------------------------------
        // We define a Student.
        // ---------------------------------------------

        var Student = function(inAge, inName) {
            // We define the prototype here.
            Personne.call(this, inName);
            this.age = undefined;
            this.setAge = function(inAge) { this.age = inAge; };
            this.getAge = function() { return this.age; } 

            // Do some initialization.
            console.log("Executing the constructor Student with inAge=%d and inName=%s.", inAge, inName);
            if ('undefined' !== typeof inAge) {
                this.setAge(inAge);
            }           
        }

        var Tom = new Student(12, "Tom");
        console.log("The student %s is %d years old.", Tom.getName(), Tom.getAge());
        var Joe = new Student();
        Joe.setName("Joe");
        Joe.setAge(20);
        console.log("The student %s is %d years old.", Joe.getName(), Joe.getAge());
        console.log(Joe.__proto__);
        console.log(Object.getPrototypeOf(Joe));

    })();

    return;
}

console.log("Bad test number %d.", test);

A l'exécution:

Et:

Ces deux techniques ne sont pas équivalentes. Veuillez consulter la rubrique Constructeurs et prototypes.

Un trombinoscope animé

Cet exemple illustre une utilisation du greffon. Une série de 6 images défile sur trois "cases".

La fréquence de remplacement d'une image par une nouvelle image a été paramétrée à 1 image par seconde. Ce paramètre de configuration est configurable.
Les images sont cliquables. Chaque image est associée à une URL. Cette association est facultative. Si une image n'est pas associée à un lien, alors elle n'est pas cliquable.

Code du greffon

(function($)
{
    /**
     * Autheur: Denis BEURIVE
     * Attention : Ce fichier a fait l'objet d'un dépôt de droit d'auteur auprès de l'INPI.
     *
     * Ce greffon permet de créer des trombinoscopes.
     * Les trombinoscopes sont définis par des listes non ordonnées (<ul>).
     *
     * Chaque trombinoscope définit les propriétés suivantes :
     *    o [Obligatoire] Une liste de "canvas". Un "canvas" est une zone d'affichage pour une image (nom de l'attibut au choix).
     *    o [Obligatoire] La durée (en ms) entre deux changements d'images (attribut "period").
     *    o [facultatif] Un drapeau pour activer le mode aléatoire (attribut "rand").
     *
     * Ex: <ul trombi="canvas4,canvas5" period="3000">...</ul>
     *
     * Chaque trombinoscope contient une liste d'images.
     * Une image est définie par un item (<li>) de la liste non ordonnée qui représente le trombinoscope.
     * Chaque image définit les propriétés suivantes :
     *    o [Obligatoire] Le lien vers la source de l'image (attribut "img").
     *    o [facultatif] Un lien qui sera ouvert lorsque l'utilisateur cliquera sur l'image (attribut "href").
     *
     * Ex: <li img="images/im1.png" href="http://google.com"></li>
     *
     * Un "canvas" est une division (<div>) dans laquelle est affichée une image.
     * L'ID du canvas est représenté par l'attribut "id".
     * Le "canvas" peut contenir plusieurs images, mais *une seule* sera affectée au trombinoscope.
     * L'image affectée au trombinoscope est repérée par l'attribut "canvas".
     * 
     * Ex:  <div id="canvas1" class="span-3 ">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     * @example 
     *
     *      <script language="javascript">
     *      $(function() { $('[trombi]').trombino(); });
     *      </script>
     *
     *      <div id="canvas1" class="span-3 ">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <div id="canvas2" class="span-3">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <div id="canvas3" class="span-3 last">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <hr class="space"/>
     *
     *      <div id="canvas4" class="span-3 ">
     *          <img width="1" height="96" src="images/left.png"/>
     *      </div>
     *
     *      <div id="canvas5" class="span-3 last">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <ul trombi="canvas1,canvas2,canvas3" period="5000" [rand="yes"]>
     *          <li img="images/im1.png" href="http://google.com">Mon text 1</li>
     *          <li img="images/im2.png" href="http://google.com">Mon text 2</li>
     *          <li img="images/im3.png" href="http://google.com">Mon text 3</li>
     *          <li img="images/im4.png" href="http://google.com">Mon text 4</li>
     *          <li img="images/im5.png" href="http://google.com">Mon text 5</li>
     *          <li img="images/im6.png" href="http://google.com">Mon text 6</li>
     *          <li img="images/im7.png" href="http://google.com">Mon text 7</li>
     *          <li img="images/im8.png" href="http://google.com">Mon text 8</li>
     *      </ul>
     *
     *      <ul trombi="canvas4,canvas5" period="3000">
     *          <li img="images/im1.png">Mon text 1</li>
     *          <li img="images/im2.png">Mon text 2</li>
     *          <li img="images/im3.png">Mon text 3</li>
     *          <li img="images/im4.png">Mon text 4</li>
     *      </ul>
     */

    $.fn.trombino = function()
    {
        // http://farinspace.com/jquery-image-preload-plugin/
        if(! $.imgpreload) { alert('trombino: Could not load JQuery plugin "imgpreload.js"!'); return; }
		
        if (0 == $(this).length) { return; }
        var all = $(this);
		
        // Quel est l'attribut qui représente les trombinoscopes?
        // CF questions sur l'URL: http://api.jquery.com/selector/
        var trombinoAttribut = this.selector;
        trombinoAttribut = trombinoAttribut.replace(/^\[/, '');
        trombinoAttribut = trombinoAttribut.replace(/\]$/, '');

        // On établit la liste de toutes les images à utiliser.
        var allImages     = { };
        var allImagesList = new Array();
        for (i=0; i<$(this).length; i++)
        {
            // "Loop closure": http://trephine.org/t/index.php?title=JavaScript_loop_closures
            var f = function(configContainerElement)
            {
                var images = trombinoGetImages(configContainerElement);
				
                for (j=0; j<images.length; j++)
                {
                    var src = images[j]['img'];
                    if (! allImages.hasOwnProperty(src))
                    {
                        allImages[src] = 1;
                        allImagesList.push(src);
                    }
                }
            };
            f($(this).eq(i))
        }
	
        // On pré-charge les images.
        $.imgpreload(allImagesList,
        {
            each: null,
            all: function()
            {
                // http://www.toutjavascript.com/reference/reference.php?iref=179
                for (var i=0; i<this.length; i++) { $('body').append('<img src="' + this[i].src + '" style="display:none;"/>'); }
                runTrombino(all, trombinoAttribut);
            }
        });
    }
     
    /**
     * Cette fonction construit le trombinoscope et amorce le mécanisme de remplacement périodique des images.
     * @param inConfigContainers Liste des éléments du DOM qui représentent les trombinoscopes (<ul>).
     * @param inTrombinoAttribut Valeur de l'attribut qui sert à distinguer les trombinoscopes parmi tous les élements du document.
     *        Cette valeur sert de sélecteur JQuery pour l'exécution du greffon ($(function() { $('[trombi]').trombino(); }););
     */
     
    function runTrombino(inConfigContainers, inTrombinoAttribut)
    {
        // alert(document.images.length);
        if (0 == inConfigContainers.length) { return; }
        for (i=0; i<inConfigContainers.length; i++)
        {
            // "Loop closure": http://trephine.org/t/index.php?title=JavaScript_loop_closures
            var f = function(configContainerElement)
            {
                var period = parseInt(configContainerElement.attr('period'));
				
                // On fait disparaître le conteneur de configuration.
                // On initialise les variables de contexte.
                // var configContainerName = 'trombino' + i;
                configContainerElement.css('display', 'none');
                configContainerElement.attr('currentImage', 0);
                configContainerElement.attr('currentCanvas', 0);
				
                // On affiche les images des canves associés.
                var images       = trombinoGetImages(configContainerElement);                     	// Liste des images.
                var imagesNumber = images.length;                                            		// Nombre d'images.
                var canvas       = trombinoGetCanvas(configContainerElement, inTrombinoAttribut); 	// Liste des canvas.
                var canvasNumber = canvas.length;                                            		// Nombre de canvas.
                if (0 == canvasNumber) { alert('trombinoEventHandler: No canvas found!'); }
                for (var j=0; j<canvasNumber; j++)
                {
                    var selector = '#' + canvas[j] + ' img[canvas=yes]';
                    var img = $(selector);
                    if (0 == img.length) { alert('trombinoEventHandler: Can not find image! ' + selector); return; }
                    img.attr('src', images[j]['img']);
					
                    if (undefined != images[j]['href'])
                    {
                        img.css('cursor', 'pointer');
                        img.click(function(){ window.open(images[j]['href']); return false; });
                    }
                }
				
                // http://klevo.sk/javascript/javascripts-settimeout-and-how-to-use-it-with-your-methods/#comment-4449
                window.setTimeout( function() { trombinoEventHandler(configContainerElement, inTrombinoAttribut, period ); }, 50, 'JavaScript');
            };
            f(inConfigContainers.eq(i))
        }
    }
	
	/**
     * Cette fonction est exécutée périodiquement. Elle est responsable du changement des images au sein d'un trombinoscope.
     * @param Éléments du DOM qui représente le trombinoscope (<ul>) sur lequel on change une image.
     * @param inTrombinoAttribut inTrombinoAttribut Valeur de l'attribut qui sert à distinguer les trombinoscopes parmi tous les élements du document.
     *        Cette valeur sert de sélecteur JQuery pour l'exécution du greffon ($(function() { $('[trombi]').trombino(); }););
     * @param Durée (en ms) entre deux exécutions de la fonction.
     */
    
    function trombinoEventHandler(inConfigContainer, inTrombinoAttribut, inPeriod)
    {
        // Le mode aléatoire d'affichage des images est-il activé?
        var rand = inConfigContainer.attr('rand');
        if (undefined == rand) { rand = false; }
        else { rand = rand == 'yes' ? true : false; }
    	
        var currentImage    = parseInt(inConfigContainer.attr('currentImage'));         // Index courant (dans la liste des images).
        var images          = trombinoGetImages(inConfigContainer);                     // Liste des images.
        var imagesNumber    = images.length;                                            // Nombre d'images.
        var canvas          = trombinoGetCanvas(inConfigContainer, inTrombinoAttribut); // Liste des canvas.
        var canvasNumber    = canvas.length;                                            // Nombre de canvas.

        // Index courant (dans la liste des canvas du tormbino).
        var currentCanvas = rand ? Math.floor(Math.random()*canvasNumber) : parseInt(inConfigContainer.attr('currentCanvas'));
		
        // http://api.jquery.com/descendant-selector/
        var img = $('#' + canvas[currentCanvas] + ' img[canvas=yes]');
        if (0 == img.length) { alert('trombinoEventHandler: Can not find image!'); return; }
		
        // On supprime l'association sur l'évènement "click".
        // Cette action est indispensable, sinon les gestionnaires d'évènement vont "s'empiler".
        img.unbind('click');
		
        // On change d'image.
        // L'animation ci-dessous ne change pas la valeur de la propriété "display" de l'image.
        // L'image ne "disparaît" pas du document. Il n'est pas nécessaire de "fixer" la taille du cadre.
        img.animate({'opacity':0}, 500, function() { img.attr('src', images[currentImage]['img']).fadeIn(1000); }).animate({'opacity':1}, 500);

        //  Si un lien est défini pour cette image, alors on crée le lien.
        if (undefined != images[currentImage]['href'])
        {
            img.css('cursor', 'pointer');
            img.click(function(){ window.open(images[currentImage]['href']); return false; });
        }
        
        // On passe à l'image suivante, et au canvas suivant.
        currentImage  = currentImage+1  >= imagesNumber? 0: currentImage+1;
        currentCanvas = currentCanvas+1 >= canvasNumber? 0: currentCanvas+1;
        inConfigContainer.attr('currentImage',  currentImage);
        inConfigContainer.attr('currentCanvas', currentCanvas);
		
        // On réarme l'horloge pour déclencher une nouvelle exécution de la fonction.
        window.setTimeout( function() { trombinoEventHandler(inConfigContainer, inTrombinoAttribut, inPeriod); }, inPeriod, 'JavaScript' );
    }
    
    /**
     * Cette fonction retourne un tableau qui contient les informations relatives à toutes les images d'un trombinoscope.
     * @param inConfigContainer Éléments du DOM qui représente le trombinoscope (<ul>) pour lequel on désire extraire la liste des images.
     * @return La fonction retourne un tableau d'objets. Chaque objet présente les attributs suivants :
     *         o img: Lien vers la source de l'image.
     *         o href: Lien associé à un click sur l'image. Cet attribut peut prendre la valeur "undefined".
     *         o text: Du code HTML associé à l'image.
     */
    
    function trombinoGetImages(inConfigContainer)
    {
        var images = new Array();
	
        var list = inConfigContainer.children('li');
		
        if (0 == list.length) { alert("trombinoGetImages: Can not find the list of images."); }
        for (j=0; j<list.length; j++)
        {
            var item = list.eq(j);
            var href = item.attr('href'); // Cet attribut est facultatif. La valeur de cette variable peut être non définie.
            
            images.push({img:item.attr('img'), text:item.html(), href:href});
        }
        return images;
    }
    
    /**
     * Cette fonction retourne la liste des IDs des "canvas" associés à un trombinoscope.
     * @param inConfigContainer Éléments du DOM qui représente le trombinoscope (<ul>) pour lequel on désire extraire la liste IDs des "canvas".
     * @param inTrombinoAttribut inTrombinoAttribut Valeur de l'attribut qui sert à distinguer les trombinoscopes parmi tous les élements du document.
     *        Cette valeur sert de sélecteur JQuery pour l'exécution du greffon ($(function() { $('[trombi]').trombino(); }););
     */
    
    function trombinoGetCanvas(inConfigContainer, inTrombinoAttribut)
    {
        var list = inConfigContainer.attr(inTrombinoAttribut);
        return list.split(',');
    }

})( jQuery );

Utilisation

Création de la zone d'affichage des images

Une image est affichée dans un "bloc DIV". Ce bloc est identifié par son nom, associé à l'attribut "id". Le code ci-dessous crée trois blocs alignés horizontalement. Chaque bloc est utilisé pour afficher une image.

    <div class="span-5 column"> </div>
    <div class="span-1 column"><img width="1" height="150" src="images/examples/js-trombino-left.png"/></div>
    
    <!-- Zone d'affichage de la première image. -->
    <div class="span-4 column" id="canvas1">
        <img canvas="yes" width="149" height="150" src="images/examples/js-trombino-img1.png"/>
    </div>
    
    <!-- Zone d'affichage de la deuxième image. -->
    <div class="span-4 column" id="canvas2">
        <img canvas="yes" width="149" height="150" src="images/examples/js-trombino-img2.png"/>
    </div>
    
    <!-- Zone d'affichage de la troisième image. -->
    <div class="span-4 column" id="canvas3">
        <img canvas="yes" width="149" height="150" src="images/examples/js-trombino-img3.png"/>
    </div>
    
    <div class="span-6 column last"> </div>

Création du trombinoscope

On associe un trombinoscope à une liste de zones d'affichage (en l'occurrence "canvas1", "canvas2", "canvas3").
On définit la fréquence de remplacement d'une image (ici, on remplace une image par une autre toutes les 1 secondes.
On spécifie que l'on ne désire pas activer le "mode aléatoire". Dans le mode aléatoire, l'image à remplacer est choisie aléatoirement.

Chargement du Javascript et démarrage du trombinoscope

L'utilisation du greffon de trombinoscope nécessite le chargement de l'excellent greffon suivant :

https://github.com/farinspace/jquery.imgpreload

Créer des liens

Ce greffon très simple permet d'appliquer des liens sur des zones du document.

Un lien sur un texte.
Un lien sur un (autre) texte.

Un lien sur une image:

Code du greffon

// Autheur: Denis BEURIVE

(function($)
{
    /**
     * Ce greffon applique à des éléments un lien. Ce lien est matérialisé par le changement du pointeur de souris.
     * @example <img link="http:/google.com" src="/images/google.png" />
     * 
     *			<script  language="javascript">
     *			$('[link]').linker();
     *			</script>
     */

    $.fn.linker = function()
    {
        if (0 == $(this).length) { return; }

        // Quel est l'attribut qui représente les liens?
        // CD questions sur l'URL: http://api.jquery.com/selector/
        var linkAttribut = this.selector;
        linkAttribut = linkAttribut.replace(/^\[/, '');
        linkAttribut = linkAttribut.replace(/\]$/, '');

        for (i=0; i<$(this).length; i++)
        {
            var f = function(inElement)
            {
                // Quel est le lien?
                var link = inElement.attr(linkAttribut);
				
                // On assigne à l'élément un pointeur de souris spécial.
                inElement.css('cursor', 'pointer');
		        
                // On assigne à l'élément un lien.
                inElement.click(function(){ window.open(link); return false; });
            };
            f($(this).eq(i))
        }
    }
})( jQuery );

Utilisation

Pour associer un lien à un élément du document, il suffit d'ajouter à l'élément un attribut dont la valeur pointe vers le lien désiré. Dans le code ci-dessous, nous avons choisi d'utiliser l'attribut "link". Le choix du nom de l'attribut est arbitraire. Ce nom sera utilisé lors de l'activation du code Javascript (le nom de l'attribut sera passé en argument au greffon).

Création de la zone d'affichage des liens

Chargement du Javascript et démarrage

Initialisation de l'API Google pour un site multi-domaine

Il est courant d'associer plusieurs noms de domaines à un même site. Or, les clés d'utilisation de l'API Google sont liées à un seul nom de domaine. Le code ci-dessous permet une initialisation de l'API Google quel que soit le nom de domaine utilisé.

// Autheur: Denis BEURIVE

function initGoogeApi()
{
	var googleApiKeys = new Array();
	googleApiKeys['mon-site.com'] = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRRM07KJyyPVV7FBkBG4AsMiNOs3VRQQQY_hR0TmTyiQhYIg6YP134N10w';
	googleApiKeys['mon-site.org'] = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRTWFMwVesQaxusA4sA7huFv8G0lCxT9b8HZEls8-pX8wQWZAcg5csoHiA';
	googleApiKeys['mon-site.fr']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRQRlkWhloZKyd5SxdXfZqwQHZPOZBQuQUYs6qo7Mz6dT3DYvdBR9x_RZA';
	googleApiKeys['mon-site.eu']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRSxSswci-l4mhYmTQjwnW1_UmMTyBTlSy0qLOuA9opABYwQ3RWOOnJbhg';
	googleApiKeys['monsite.com']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRSZhpGKWNvLRUQ0m88BCek7GneUoRTC8MHfSFNvnXdt98h1f8Zp2cVMIQ';
	googleApiKeys['monsite.org']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRTYp1NFijgaes9p8QLKwxVtJomx_BQwDbea3CR3w7zIXoaJcz0_LamGag';
	googleApiKeys['monsite.fr']   = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRSCJtyl3oqxL4Ldn0-knz0wcxwr0BSRXMeBrdg5OUkgdegvfHy_CkREKg';
	googleApiKeys['monsite.eu']   = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRS-7_cDrhSxnC37RAR2pqNkJ4VmrBRfmF3ywnY2QBchYHPgiS-QKH_5Gw';
	googleApiKeys['monsite.net']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRTFcO89IHYOhIMGZHCXEZPt4iyOehQWoUMvoYaDloEHjPDxTuq4WCwcVw';
	googleApiKeys['exemple.com']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRQS7Uob8cBMVCw7EVtke2s_l__xcxSP0C3PtJd9W4qRFd5qNAkVmI0XfA';

	var loc = document.location.host;
	document.write('<script type=text/javascript src="http://maps.google.com/maps?file=api&v=2&key="'+googleApiKeys[loc]+'"></script>\n'); 
}

Calcul d'un âge, à partir d'une date de naissance

Si vous développer un site communautaire, il peut être intéressant de déporter les calculs des âges de vos membres sur le client.

/**
 * Cette fonction calcule l'âge à partie de la date de naissance. 
 * @author Denis BEURIVE
 * @param inDob Data de naissance sous la forme "YYYY-MM-DD".
 * @return La fonction retourne l'âge. 
 */

function getAge(inDob)
{ 
	var age = 12;
	var today = new Date(); 

	d = inDob.split("-");
	var byr      = parseInt(d[0]); 
	var nowyear  = today.getFullYear();
	var bmth     = parseInt(d[1],10)-1;   // radix 10!
	var bdy      = parseInt(d[2],10);   // radix 10!
	var dim      = daysInMonth(bmth+1,byr);
	var age      = nowyear - byr;
	var nowmonth = today.getMonth();
	var nowday   = today.getDate();
	if (bmth > nowmonth) {age = age - 1}  // next birthday not yet reached
	else if (bmth == nowmonth && nowday < bdy) {age = age - 1}

	return age;
}

function daysInMonth(month,year)
{
	var dd = new Date(year, month, 0);
	return dd.getDate();
}

Sliders

Code du greffon

/**
 * This file implements sliders.
 * @author Denis BEURIVE
 * @warning Ce code a fait l'objet d'un dépôt de droit d'auteur auprès de l'INPI.
 */

(function($)
{
    /**
     * This function is an event handler. It is executed each time the user requests a new slide.
     * @param inEvent Event object, thrown by JQuery.
     *        This object contains the following properties:
     *        o panel: The element that represents the frame around the sliders.
     *        o sens: This property defined wether the user wants to show the previous or the next element.
     *          Possible value: "next" or "prev".
     *        o options: List of options for this slider.
     * @Note The solution below has been implemented, but it is not used anymore, since the "mutex solution" is simpler.
     *       It is possible to deactivate the event handler, in the event handler:
     *       inEvent.data.button.unbind(inEvent);
     *
     *       To reactivate it after the animation:
     *       var inButton = inEvent.data.button; // It is necessary to pass the element that represents the button.
     *       var terminationCallback = function() { inButton.bind('click', { panel:inPanel, direction:inDir, sens:inSens, decal:inDecal, button:inButton }, function(event) { slide(event); } ); };
     *       var options = { 'duration':'slow', 'complete':terminationCallback };
     *       slidingTable.animate(properties, options);
     *       slidingTable.effect("bounce", { times:1, direction:bounceDirection, distance:15 }, 300, terminationCallback);
     */
    
    function sliderEventHandler(inEvent)
    {
        // The frame around the sliders.
        var panel = inEvent.data.panel;
        // Sens: 'next' (slide left or slide down) or 'prev' (slide right or slide up).
        var sens = inEvent.data.sens;
        // Options.
        var options = inEvent.data.options;
        
        // Shall we continue?
        if (1 == parseInt(panel.attr('mutex'))) { return; }
        panel.attr('mutex', '1');
        
        // Configuration for the various effects.
        var configs =    {
                            'horizontal':    {
                                                direction: 'left', // Used for sliding effect
                                                next: 'right',     // Used for bouncing effect
                                                prev: 'left'       // Used for bouncing effect
                                            },
                            'vertical':        {                
                                                direction: 'top',  // Used for sliding effect
                                                next: 'down',      // Used for bouncing effect
                                                prev: 'up'         // Used for bouncing effect
                                            }
                        };
        
        // Element that will slide.
        var slidingWrapper = panel.children('div');
        // Name of the CSS property to play with while sliding.
        var slideDirection = configs[options['direction']]['direction'];
        // Number of pixels to slide.
        var decal = 'horizontal' == options['direction'] ? panel.width() : panel.height();
        
        // DEBUG 
        // console.debug("Déplacement de " + decal + 'px' + ' sur ' + panel.width() + 'x' + panel.height());
        // console.debug("Fenêtre glissante: " + slidingWrapper.width() + 'x' + slidingWrapper.height())
        
        // If we reach the limit, in which direction do we bounce?
        var bounceDirection = configs[options['direction']][sens];
        // Function to execute while the animation is over.
        var terminationCallback = function() { panel.attr('mutex', '0'); };
        // Maximum allowed distance for the slide.
        var max = 'horizontal' == options['direction']  ? slidingWrapper.attr('maxLeft') : slidingWrapper.attr('maxTop');
        // Current distance.
        var current = 'horizontal' == options['direction'] ? slidingWrapper.css('left') : slidingWrapper.css('top');

        // DEBUG
        // console.debug("Courant: " + current + ' / Max: ' + max);
        
        // Perform the animation.
        // At the end: re-bind the event to the button.
        if (sens == 'next')
        {
            if (current != max) 
            {
                var animationProperties = {};
                var animationOptions = { 'duration':'slow', 'complete':terminationCallback };
                animationProperties[slideDirection] = '-=' + decal + 'px';
                slidingWrapper.animate(animationProperties, animationOptions);
            }    else { slidingWrapper.effect("bounce", { times:2, direction:bounceDirection, distance:15 }, 300, terminationCallback); }
        }
        else
        {
            if (current != '0px') 
            {
                var animationProperties = {};
                var animationOptions = { 'duration':'slow', 'complete':terminationCallback };
                animationProperties[slideDirection] = '+=' + decal + 'px';
                slidingWrapper.animate(animationProperties, animationOptions);
            }    else { slidingWrapper.effect("bounce", { times:2, direction:bounceDirection, distance:15 }, 300, terminationCallback); }
        }
    }
    
    /**
     * This function is the entry point for the current plugin.
     * @note The slides are made of tables (<table></table>).
     *       In case of an error, make sure to check the CSS properties for the table and for its columns.
     *       CSS properties to check are:
     *       + border-collapse (table only)
     *       + border-width (table and column)
     *       + border-style (table and column)
     *       + padding (table and column)
     *       + margin (table and column)
     */
    
    $.fn.slider = function()
    {
        if (0 == $(this).length) { return; }

        // Which attribute represents sliders?
        var sliderAttribut = this.selector;
        sliderAttribut = sliderAttribut.replace(/^\[/, '');
        sliderAttribut = sliderAttribut.replace(/\]$/, '');

        // Create all sliders returned by the JQuery's selector.
        for (i=0; i<$(this).length; i++)
        {
            var f = function(panel)
            {
                // Name of the current slider.
                var panelName = panel.attr(sliderAttribut);
                
                // List of slides associated with the current slider.
                var list = panel.children('ul');
                var items = list.children('li');
                
                // Set options.
                var options = { direction: 'vertical' };
                var direction = panel.attr('direction');
                if (undefined != direction) { options['direction'] = direction; }

                // Set overflow property, so that sliders dont't "escape".
                panel.css('overflow', 'hidden');
                var panelWidth = panel.width();
                var panelHeight = panel.height();
                // console.debug("Largeur de la zone d'affichage: " + panelWidth + 'px');
                // console.debug("Hauteur de la zone d'affichage: " + panelHeight + 'px');
                
                // Create sliding table.
                // Note: The following CSS properties are very important.
                var table = $('<table></table>');
                table.css('border-width', '0px');
                table.css('border-style', 'none');
                table.css('border-collapse', 'collapse');
                table.css('padding', '0px');
                table.css('margin',  '0px');
                table.css('width', panelWidth + 'px');
                
                // Create all columns
                var columns = new Array();
                for (j=0; j<items.length; j++)
                {
                    var div = $('<div>' + items.eq(j).html() + '</div>');
                    div.css('overflow', 'hidden');
                    div.css('width', panelWidth + 'px');
                    div.css('height', panelHeight + 'px');
                    div.css('border-width', '0px');
                    div.css('border-style', 'none');
                    div.css('padding', '0px');
                    div.css('margin',  '0px');
                    
                    // Note: The following CSS properties are very important.
                    var td = $('<td></td>');
                    td.css('padding', '0px');
                    td.css('margin',  '0px');
                    td.css('border-style', 'none');
                    td.css('border-width', '0px');
                    td.html(div);
                    
                    // DEBUG
                    // console.debug('Largeur de la division interne: ' + div.width());
                    // console.debug('Largeur de la colonne interne: ' + td.width());
                    
                    columns.push(td);
                }

                // Create the wrapper (for IE only!).
                var wrapper = $('<div></div>');
                wrapper.css('padding', '0px');
                wrapper.css('margin',  '0px');
                wrapper.css('position', 'relative');
                wrapper.css('top', '0px');
                wrapper.css('left', '0px');
                
                // Set local properties that will be used into the event handler.
                wrapper.attr('maxLeft', ((items.length - 1) == 0 ? '' : '-') + panelWidth  * (items.length - 1) + 'px');
                wrapper.attr('maxTop',  ((items.length - 1) == 0 ? '' : '-') + panelHeight * (items.length - 1) + 'px');
                wrapper.attr('mutext', '0');

                // We create row(s).
                if (options['direction'] == 'horizontal')
                {
                    var row = $('<tr></tr>');
                    for (col in columns) { row.append(columns[col]); }
                    table.append(row);
                    wrapper.width(items.length * panelWidth);
                    wrapper.height(panelHeight);
                }
                else
                {
                    for (col in columns) { table.append($('<tr></tr>').append(columns[col])); }
                    wrapper.width(panelWidth);
                    wrapper.height(items.length * panelHeight);
                }
                wrapper.append(table);
                
                // DEBUG
                // console.debug("Largeur du tableau inséré dans la zone d'affichage: " + table.width() + 'px');
                // console.debug("border-collapse: " + table.css('border-collapse'));
                // console.debug("Largeur de l'englobant: " + wrapper.width() + 'px');
                
                // We delete the original list, used to define the slides.
                list.remove();
                
                // We add the new table to the panel.
                panel.append(wrapper);
                
                // We assign the event handler on the "previous / next" elements.
                $('#' + panelName + 'Next').bind('click', { panel:panel, options:options, sens:'next' }, function(event) { sliderEventHandler(event); } );
                $('#' + panelName + 'Prev').bind('click', { panel:panel, options:options, sens:'prev' }, function(event) { sliderEventHandler(event); } );
            }
            f($(this).eq(i));
        }
    }

})( jQuery );

Démonstration

Note: Les liens "précédent" et "suivant" peuvent être remplacés par des images, des boutons... Ces liens peuvent être disposés n'importe où sur le document.

Création des zones de défilement

Les diapositives sont définies dans une liste non indexée.

Les contrôles de défilement sont identifiés par leur ID, construit à partir de l'ID de la zone de défilement des diapositives. Si "IZ" est l'ID de la zone de défilement des diapositivesn alors :

ID du contrôle pour afficher les diapositives suivantes : "IZNext"
ID du contrôle pour afficher les diapositives précédentes : "IZPrev"

La direction de défilement est définie par la valeur de l'attribut "direction".

direction="horizontal": Défilement horizontal
direction="vertical": Défilement vertival

Première zone : défilement horizontal

    <!-- Zone de commande de défilement -->
    <div class="span-3"> </div>
    <div class="span-9" style="text-align : left;"><a id="firstSliderPrev" href="#" onClick="return false;">Précédent</a></div>
    <div class="span-9" style="text-align : right;"><a id="firstSliderNext" href="#" onClick="return false;">Suivant</a></div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de commande de défilement -->
    
    <hr class="space"/>
    
    <!-- Zone de défilement -->
    <div class="span-3"> </div>
    <div class="span-18" style="background:#F6FFB2; height:96px;" direction="horizontal" id="firstSlider" slider="firstSlider">
        <ul>
            <li>
                <img src="images/examples/firefox.png" />
            </li>
            <li>
                <img src="images/examples/safari.png" />
            </li>
            <li>
                <img src="images/examples/chrome.png" />
            </li>
        </ul>
    </div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de défilement -->

Seconde zone : défilement vertical

    <!-- Zone de commande de défilement -->
    <div class="span-3"> </div>
    <div class="span-9" style="text-align : left;"><a id="secondSliderPrev" href="#" onClick="return false;">Précédent</a></div>
    <div class="span-9" style="text-align : right;"><a id="secondSliderNext" href="#" onClick="return false;">Suivant</a></div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de commande de défilement -->
    
    <hr class="space"/>
    
    <!-- Zone de défilement -->
    <div class="span-3"> </div>
    <div class="span-18" style="background:#F6FFB2; height:96px;" direction="vertical" id="secondSlider" slider="secondSlider">
        <ul>
            <li>
                <img src="images/examples/firefox.png" />
            </li>
            <li>
                <img src="images/examples/safari.png" />
            </li>
            <li>
                <img src="images/examples/chrome.png" />
            </li>
        </ul>
    </div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de défilement -->

Chargement du Javascript et démarrage

    <!-- Chargement des feuilles de style (CSS) pour JQuery-UI.
         Note : Cette action n'est pas indispensable pour l'utilisation du greffon. Autrement dit, pour cet exemple, il est possible de passer cette étape.
         Note : Le chemin vers le fichier "jquery-ui-1.8.16.custom.css" dépend de votre environnement.
      -->
    <link href="css/jquery-ui/jquery-ui-1.8.16.custom.css" media="screen" rel="stylesheet" type="text/css" >

    <!-- Chargement de JQuery-UI et de JQuery. -->
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

    <!-- Chargement du greffon responsable de la création des zones de défilement. -->
    <script type="text/javascript" src="js/slider.js"></script>

    <!-- Création des zones de défilement. -->
    <script type="text/javascript">
        $(function() { $("[slider]").slider(); });
    </script>

Note: Le sélecteur JQuery ("[slider]", en l'occurrence) est déterminé en fonction des noms des attributs associés aux zones de défilement des diapositives. Dans cet exemple, les deux zones de défilement se voient attribuer le même attribut ("slider", en l'occurrence). Ceci n'est pas une obligation. Il est possible d'attribuer des attributs différents. Dans ce cas, la méthode devra être appelée autant de fois qu'il y a d'attributs différents.

Ajax

Le code ci-dessous illustre l’utilisation de Jquery pour le chargement de données et de code à exécuter.

<html>
	<head>
		<script type="text/javascript" src="jquery.js"></script>
		
		<script type="text/javascript">
			jQuery(document).ready(function($) {

				// Define a function that will be set as handler for all HTTP failures.
				// This function is executed if a HTTP request failes.
				function httpErrorHandler()
				{
					alert("HTTP request failed!");
				}

 				// ----------------------------------------------------------------------
				// 1. Load a javascript script, using jQuery.get(), and execute it.
				// 
				// Please note that, because we specify that we expect a script, then the
				// loaded script is automatically executed. That's the reason why we set 
				// a fake HTTP handler.
				// 
				// We could use jQyery.getScript(). But jQyery.getScript() does not allow
				// us to send values to the server (through the GET request).
 				// ----------------------------------------------------------------------

				var url1           = 'js_to_load_and_execute.js';
				var data_to_send_1 = {};
				jQuery('#click_me_script').click(function() {
					var jqxhr = jQuery.get(url1, data_to_send_1, function(){}, 'script');
					jqxhr.error(httpErrorHandler);
				});
				
 				// ----------------------------------------------------------------------
				// 2. Load a JSON file and execute it.
 				// ----------------------------------------------------------------------
				
				// Define a function that will be set as HTTP handler.
				// This function is executed if the HTTP request succeeds.
				// We know that the loaded JSON contains an object. This object has 2 attributs:
				//   - js: the javascript code to execute.
				//   - string: a string.
				function httpJsonHandler(in_data)
				{
					// Execute the javascript code.
					jQuery.globalEval(in_data.js);
					
					// Print the string.
					alert("The string is :" + in_data.string);
				}
				
				// Apply the handler to the link.
				// When the link is clicked, a HTTP request is sent to the server.
				// We are asking for the JSON file "json_to_load_and_execute.js".
				// Note that we specify that we are expecting to get JSON data.
				var url2           = 'json_to_load_and_execute.js';
				var data_to_send_2 = {};
				jQuery('#click_me_json').click(function() {
					var jqxhr = jQuery.get(url2, data_to_send_2, httpJsonHandler, 'json');
					jqxhr.error(httpErrorHandler);
				});
				
			});
		</script>
	</head>
	<body>
	
	<a href="#" id="click_me_script">Click me to load SCRIPT</a>
	<br/>
	<a href="#" id="click_me_json">Click me to load JSON</a>
	
	
	
	</body>
</html>

js_to_load_and_execute.js

json_to_load_and_execute.js