Comment ajouter du Javascript à une page ?

Pré-requis

  1. Création d'une page

Le corps de page doit être préalablement créé, afin que le Javascript de page y soit rattaché.

Comme pour l'ajout du CSS de page, nous allons prendre comme exemple le corps de page my-first-page.body.php qui a déjà été créé dans le tutoriel Comment créer une page.

Dynamiser la vue avec du code Javascript

L'ajout de code Javascript se fait de la même manière que pour les feuilles de style de page :

  1. aller dans le dossier racine des JS : ./application/view/js/ ;
  2. copier/coller le fichier modèle _sample.js.php, puis le renommer en my-first-page.js.php. Le nom de ce fichier doit être le même que celui de la page sur laquelle le Javascript va s'exécuter (my-first-page.body.php) ;
  3. éditer ce nouveau fichier, puis personnaliser son contenu avec du code Javascript. Par exemple ici, nous allons seulement ajouter une troisième section :
    <?php 
    //Create tags
    ?>
    var section = document.createElement("section"),
    	h2 = document.createElement("h2"),
    	p = document.createElement("p");
    	
    <?php 
    //Set tags content
    ?>
    h2.innerHTML = "My dynamic section title";
    p.innerHTML = "My dynamic section content generated by Javascript on load page.";
    
    <?php 
    //Build section content
    ?>
    section.appendChild(h2);
    section.appendChild(p);
    
    <?php 
    //Add section to body
    ?>
    document.getElementById("body").appendChild(section);
    
  4. sauvegarder, actualiser, puis admirer le résultat :
    Ma première page avec exécution du JS de page