/* (gH)   -_-  demodomjs.js  ;  TimeStamp (unix) : 22 Juin 2008 vers 12:57 */

/* ############################################### */

function demonstration() {

/* ############################################### */

var elt1  = document.createElement("h1");
var h1txt = document.createTextNode("Bonjour à tous !") ;
document.getElementById('body').appendChild(elt1) ;
elt1.appendChild(h1txt) ;
elt1.setAttribute("id","ddd") ;

var elt2 = document.createElement("p");
elt2.setAttribute("id","mpp") ;
document.getElementById('body').appendChild(elt2) ;
/* ce qui suit se voit quand même : une modification dynamique */
/* d'un objet est automatiquement répercutée par le navigateur */
var txt2 = document.createTextNode("ceci est écrit dynamiquement par javascript") ;
elt2.appendChild(txt2) ;
elt2.setAttribute("class","monjaune") ;
elt2.setAttribute("className","monjaune") ;

var elt3 = document.createElement("p");
var gras = document.createElement("b");
var fin3 = document.createTextNode(" de ") ;
document.getElementById('body').appendChild(elt3) ;
elt3.setAttribute("id","mdp") ;
elt3.setAttribute("class","monbleu") ;
elt3.setAttribute("className","monbleu") ; /* pour IE */
var txt3 = document.createTextNode("Passons maintenant à ") ;
elt3.appendChild(txt3) ;
gras.appendChild(document.createTextNode("l'imbrication")) ;
elt3.appendChild(gras);
elt3.appendChild(fin3);
elt3.appendChild(document.createTextNode("balises.")) ;

fin = document.createElement("h1");
txtfin = document.createTextNode("Bonsoir tous.") ;
fin.appendChild(txtfin) ;
document.getElementById('body').appendChild(fin) ;
fin.setAttribute("id","fdd") ;
document.getElementById("fdd").firstChild.insertData(7, " à ") ;

changementsDynamiques_1() ;
changementsDynamiques_2() ;

} // # fin de function demonstration

// ###############################################

function changementsDynamiques_1() {

/* ############################################### */

   var elt5 = document.createElement("h1");
   var elt6 = document.createElement("p");
   var lien = document.createElement("a") ;
   var finX = document.getElementById("fdd");

   // si on écrit
   //    body.appendChild(elt5);
   // alors le paragraphe est créé tout à la fin alors
   // que nous voulons le mettre avant le dernier H1
   finX.parentNode.insertBefore(elt5,finX) ;
   txt5 = document.createTextNode("Changements Dynamiques 1") ;
   elt5.appendChild(txt5) ;

   finX.parentNode.insertBefore(elt6,finX) ;
   elt6.appendChild(lien) ;
   elt6.style.textAlign = "center" ;
   lien.setAttribute("href","#") ;
   lien.appendChild(document.createTextNode("cliquez ici pour du changement.")) ;
   lien.setAttribute("class","ahref_rectangulaire") ;
   lien.setAttribute("className","ahref_rectangulaire") ; /* pour IE */
   lien.onclick = function() {

     var elt7 = document.createElement("h1");
     elt7.appendChild(document.createTextNode(" ... et voilà !")) ;
     elt7.setAttribute("id","temporaire1") ;
     document.body.insertBefore(elt7,document.getElementById("fdd")) ;
     var para  = document.createElement("p");
     var href  = document.createElement("a") ;
     document.body.insertBefore(para,document.getElementById("fdd")) ;
     para.appendChild(href) ;
     para.setAttribute("id","temporaire2") ;
     href.setAttribute("href","#") ;
     href.setAttribute("class","ahref_rectangulaire2") ;
     href.setAttribute("className","ahref_rectangulaire2") ; /* pour IE */
     href.appendChild(document.createTextNode("suppression du nouveau paragraphe.")) ;
     href.onclick = function() {
        document.body.removeChild(document.getElementById("temporaire1")) ;
        document.body.removeChild(document.getElementById("temporaire2")) ;
        document.getElementById("mpp").setAttribute("class","monbleu") ;
        document.getElementById("mdp").setAttribute("class","monjaune") ;
     } ; // fin de href.onclick

   } ; // fin des actions si on clique

} ; // # fin de function changementsDynamiques_1

// ###############################################

function changementsDynamiques_2() {

// ###############################################

   var elt8 = document.createElement("h1");
   var elt9 = document.createElement("p");
   var eltA = document.createElement("a") ;
   document.body.insertBefore(elt8,document.getElementById("fdd")) ;
   elt8.appendChild(document.createTextNode("Changements Dynamiques 2")) ;
   document.body.insertBefore(elt9,document.getElementById("fdd")) ;
   elt9.appendChild(eltA) ;
   elt8.style.textAlign = "right" ;
   elt9.style.textAlign = "right" ;
   eltA.appendChild(document.createTextNode("changement de tous les H1.")) ;
   eltA.setAttribute("href","#") ;
   eltA.setAttribute("class","ahref_rectangulaire2") ;
   eltA.setAttribute("className","ahref_rectangulaire2") ;
   eltA.onclick = function() {
     document.body.style.backgroundColor = "#CCFFFF" ;
     document.body.style.backgroundImage = "url('beige.jpg')" ;

     var lesH1 = document.getElementsByTagName("h1") ;
     for(idh=0;idh<lesH1.length;idh++)  {
       lesH1[idh].setAttribute("class","nouveauH1") ;
       lesH1[idh].setAttribute("className","nouveauH1") ;
     } ; // fin pour idh
   } ; // fin des actions si on clique

} ; // # fin de function changementsDynamiques_2
// ###############################################

function addEvent(obj, evType, fn){
 if (obj.addEventListener){
   obj.addEventListener(evType, fn, false);
   return true;
 } else if (obj.attachEvent){
   var r = obj.attachEvent("on"+evType, fn);
   return r;
 } else {
   return false;
 }
} // # fin de function addEvent

// ###############################################

addEvent(window, 'load', demonstration);
// pas pour IE :
//  addEvent(window, 'load', changementsDynamiques_1);
//  addEvent(window, 'load', changementsDynamiques_2);