Code-source


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

00002          

00003     /* ############################################### */     

00004          

00005     function demonstration() {     

00006          

00007     /* ############################################### */     

00008          

00009     var elt1  = document.createElement("h1");     

00010     var h1txt = document.createTextNode("Bonjour à tous !") ;     

00011     document.getElementById('body').appendChild(elt1) ;     

00012     elt1.appendChild(h1txt) ;     

00013     elt1.setAttribute("id","ddd") ;     

00014          

00015     var elt2 = document.createElement("p");     

00016     elt2.setAttribute("id","mpp") ;     

00017     document.getElementById('body').appendChild(elt2) ;     

00018     /* ce qui suit se voit quand même : une modification dynamique */     

00019     /* d'un objet est automatiquement répercutée par le navigateur */     

00020     var txt2 = document.createTextNode("ceci est écrit dynamiquement par javascript") ;     

00021     elt2.appendChild(txt2) ;     

00022     elt2.setAttribute("class","monjaune") ;     

00023     elt2.setAttribute("className","monjaune") ;     

00024          

00025     var elt3 = document.createElement("p");     

00026     var gras = document.createElement("b");     

00027     var fin3 = document.createTextNode(" de ") ;     

00028     document.getElementById('body').appendChild(elt3) ;     

00029     elt3.setAttribute("id","mdp") ;     

00030     elt3.setAttribute("class","monbleu") ;     

00031     elt3.setAttribute("className","monbleu") ; /* pour IE */     

00032     var txt3 = document.createTextNode("Passons maintenant à ") ;     

00033     elt3.appendChild(txt3) ;     

00034     gras.appendChild(document.createTextNode("l'imbrication")) ;     

00035     elt3.appendChild(gras);     

00036     elt3.appendChild(fin3);     

00037     elt3.appendChild(document.createTextNode("balises.")) ;     

00038          

00039     fin = document.createElement("h1");     

00040     txtfin = document.createTextNode("Bonsoir tous.") ;     

00041     fin.appendChild(txtfin) ;     

00042     document.getElementById('body').appendChild(fin) ;     

00043     fin.setAttribute("id","fdd") ;     

00044     document.getElementById("fdd").firstChild.insertData(7, " à ") ;     

00045          

00046     changementsDynamiques_1() ;     

00047     changementsDynamiques_2() ;     

00048          

00049     } // # fin de function demonstration     

00050          

00051     // ###############################################     

00052          

00053     function changementsDynamiques_1() {     

00054          

00055     /* ############################################### */     

00056          

00057        var elt5 = document.createElement("h1");     

00058        var elt6 = document.createElement("p");     

00059        var lien = document.createElement("a") ;     

00060        var finX = document.getElementById("fdd");     

00061          

00062        // si on écrit     

00063        //    body.appendChild(elt5);     

00064        // alors le paragraphe est créé tout à la fin alors     

00065        // que nous voulons le mettre avant le dernier H1     

00066        finX.parentNode.insertBefore(elt5,finX) ;     

00067        txt5 = document.createTextNode("Changements Dynamiques 1") ;     

00068        elt5.appendChild(txt5) ;     

00069          

00070        finX.parentNode.insertBefore(elt6,finX) ;     

00071        elt6.appendChild(lien) ;     

00072        elt6.style.textAlign = "center" ;     

00073        lien.setAttribute("href","#") ;     

00074        lien.appendChild(document.createTextNode("cliquez ici pour du changement.")) ;     

00075        lien.setAttribute("class","ahref_rectangulaire") ;     

00076        lien.setAttribute("className","ahref_rectangulaire") ; /* pour IE */     

00077        lien.onclick = function() {     

00078          

00079          var elt7 = document.createElement("h1");     

00080          elt7.appendChild(document.createTextNode(" ... et voilà !")) ;     

00081          elt7.setAttribute("id","temporaire1") ;     

00082          document.body.insertBefore(elt7,document.getElementById("fdd")) ;     

00083          var para  = document.createElement("p");     

00084          var href  = document.createElement("a") ;     

00085          document.body.insertBefore(para,document.getElementById("fdd")) ;     

00086          para.appendChild(href) ;     

00087          para.setAttribute("id","temporaire2") ;     

00088          href.setAttribute("href","#") ;     

00089          href.setAttribute("class","ahref_rectangulaire2") ;     

00090          href.setAttribute("className","ahref_rectangulaire2") ; /* pour IE */     

00091          href.appendChild(document.createTextNode("suppression du nouveau paragraphe.")) ;     

00092          href.onclick = function() {     

00093             document.body.removeChild(document.getElementById("temporaire1")) ;     

00094             document.body.removeChild(document.getElementById("temporaire2")) ;     

00095             document.getElementById("mpp").setAttribute("class","monbleu") ;     

00096             document.getElementById("mdp").setAttribute("class","monjaune") ;     

00097          } ; // fin de href.onclick     

00098          

00099        } ; // fin des actions si on clique     

00100          

00101     } ; // # fin de function changementsDynamiques_1     

00102          

00103     // ###############################################     

00104          

00105     function changementsDynamiques_2() {     

00106          

00107     // ###############################################     

00108          

00109        var elt8 = document.createElement("h1");     

00110        var elt9 = document.createElement("p");     

00111        var eltA = document.createElement("a") ;     

00112        document.body.insertBefore(elt8,document.getElementById("fdd")) ;     

00113        elt8.appendChild(document.createTextNode("Changements Dynamiques 2")) ;     

00114        document.body.insertBefore(elt9,document.getElementById("fdd")) ;     

00115        elt9.appendChild(eltA) ;     

00116        elt8.style.textAlign = "right" ;     

00117        elt9.style.textAlign = "right" ;     

00118        eltA.appendChild(document.createTextNode("changement de tous les H1.")) ;     

00119        eltA.setAttribute("href","#") ;     

00120        eltA.setAttribute("class","ahref_rectangulaire2") ;     

00121        eltA.setAttribute("className","ahref_rectangulaire2") ;     

00122        eltA.onclick = function() {     

00123          document.body.style.backgroundColor = "#CCFFFF" ;     

00124          document.body.style.backgroundImage = "url('beige.jpg')" ;     

00125          

00126          var lesH1 = document.getElementsByTagName("h1") ;     

00127          for(idh=0;idh<lesH1.length;idh++)  {     

00128            lesH1[idh].setAttribute("class","nouveauH1") ;     

00129            lesH1[idh].setAttribute("className","nouveauH1") ;     

00130          } ; // fin pour idh     

00131        } ; // fin des actions si on clique     

00132          

00133     } ; // # fin de function changementsDynamiques_2     

00134     // ###############################################     

00135          

00136     function addEvent(obj, evType, fn){     

00137      if (obj.addEventListener){     

00138        obj.addEventListener(evType, fn, false);     

00139        return true;     

00140      } else if (obj.attachEvent){     

00141        var r = obj.attachEvent("on"+evType, fn);     

00142        return r;     

00143      } else {     

00144        return false;     

00145      }     

00146     } // # fin de function addEvent     

00147          

00148     // ###############################################     

00149          

00150     addEvent(window, 'load', demonstration);     

00151     // pas pour IE :     

00152     //  addEvent(window, 'load', changementsDynamiques_1);     

00153     //  addEvent(window, 'load', changementsDynamiques_2);
Listing du fichier tutjsdyn.js
