[Article] Javascript non intrusif

<?php /** * Javascript */ function Hello() { window.alert('Coucou !'); } /** * HTML */ <div id="content"> <h1>Le titre</h1> <p> Le contenu de la page avec plein de blabla... // Première méthode <a href="javascript:Hello();">Cliquez-moi !</a><br /> // Deuxième méthode <a href="#onclick" onclick="Hello()">Cliquez-moi !</a> </p> </div>

<?php /** * Javascript */ function Hello() { window.alert('Coucou !'); return false; } /** * HTML */ <div id="content"> <h1>Le titre</h1> <p> Le contenu de la page avec plein de blabla... <a href="#onclick" onclick="Hello()">Cliquez-moi !</a> </p> </div>

<?php /** * Javascript */ function Hello() { // On accède à l'élément a#fcHello var oLink = document.getElementById('fcHello'); // Si le noeud est défini if(oLink != undefined) { // On ajoute un style oLink.style.cursor = 'pointer'; // On défini l'événement onclick oLink.onclick = function() { window.alert('Coucou !'); return false; }; } } /** * HTML */ <div id="content"> <h1>Le titre</h1> <p> Le contenu de la page avec plein de blabla... <a id="fcHello">Cliquez-moi !</a> </p> </div>

Code PHP :

<?php 

/**

 * Javascript

 */

function Hello(sName)

{

    window.alert('Coucou ' + sName + ' !');

    return false;

}



// Création du texte du lien

var sText = document.createTextNode('Cliquez-moi !');



// Création de l'élément a

var oLink = document.createElement('a');

// Ajout d'un identifiant à cet élément

oLink.setAttribute('id', 'fcHello');

// On injecte le texte dans l'élément a

oLink.appendChild(sText);

// On ajoute du style

oLink.style.cursor = 'pointer';

oLink.style.textDecoration = 'underline';

// On attache à l'événement onclick la fonction Hello

oLink.onclick = function() { Hello('Jean'); };



// On  accède à l'élément div#content

var oDivision = document.getElementById('content');

// Si l'élément éxiste

if(oDivision != undefined) {

    var bChild = oDivision.hasChildNodes();

    // Si l'élément possède des enfants

    if(bChild == true) {

        // Récupération de tous les éléments p

        var aParagraph = oDivision.getElementsByTagName('p');

        // Si les éléments sont défini

        if(aParagraph != undefined) {

            var iParagraph = aParagraph.length;

            // On parcours le tableau des éléments

            for(var i = 0; i < iParagraph; i++)

            {

                // On insert le lien avant le premier paragraphe et on sort de la boucle

                oDivision.insertBefore(oLink, aParagraph[i]);

                break;

            }

        }

    }

}



/**

 * HTML

 */

<div id="content">

    <h1>Le titre</h1>

    <p>Le contenu de la page avec plein de blabla...</p>

</div>