/* (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);
|
Retour à la page principale de
(gH)