Appunti su JavaScript

Codice JavaScript

Quando la pagina viene caricata ecco le istruzioni JavaScript che inizializzano gli event handler sugli elementi testxx.

var test1 = document.getElementById('test1');
var test2 = document.querySelector('#test2');
var test3 = document.querySelector('#test3');
var test4 = document.querySelector('#test4');
var test5 = document.querySelector('#test5');
var test6 = document.querySelector('#test6');
var test7 = document.querySelector('#test7');
var test8 = document.querySelector('#test8');
var test9 = document.querySelector('#test9');

test1.addEventListener('click',test01);
test2.addEventListener('click',test02);
test3.addEventListener('click',test03);
test4.addEventListener('click',test04);
test5.addEventListener('click',test05);
test6.addEventListener('click',test06);
test7.addEventListener('click',test07);
test8.addEventListener('click',test08);
test9.addEventListener('click',test09);







function test01(){ 
/* Prova del metodo: 
*  element document.getElementById(String);
*  Con String = 'test1' l'elemento restituito è quello contenente l'etichetta test_01 stessa.*/
   var el = document.getElementById('test1'); 
/*   var el = document.querySelector('#test1');  fornisce lo stesso risultato */ 
   alert('function test01(): elemento cliccato: ' + el.innerHTML);
   return;
}


function test02(){  
/* Prova del metodo: 
*  element[] document.getElementsByTagName(String);
*  Con String = 'h2' restituisce un array di oggetti consistente di tutti gli elementi html con tag <h2>.*/  
   var el = document.getElementsByTagName('h2'); 
/* var el = document.querySelectorAll('h2'); fornisce lo stesso risultato.*/  
   alert('function test02(): la pagina contiene ' + el.length + 
         ' elementi con tag h2:');
   for(var i=0; i< el.length; i++){
      alert(el[i].innerHTML);
   }
   return;
}


function test03(){ 
/* Prova del metodo: 
*  element[] document.getElementsByClassName(String);
*  Con String = 'pulsante' restituisce un array di oggetti consistente di tutti gli elementi html 
*  con class="pulsante"*/  
   var el = document.getElementsByClassName('pulsante');
/*   var el = document.querySelectorAll('.pulsante'); fornisce lo stesso risultato.*/     
   alert('function test03(): la pagina contiene '+ el.length + 
         ' elementi con classe  pulsante:');
   for(var i=0; i< el.length; i++){
      alert (el[i].innerHTML);
   }
   return;

   
   
   
   
function test04(){
/* Prova del metodo: 
   String element.innerHTML=String;*/
   var el=document.getElementById('pDaModificare');
   if (el.textContent == "PARAGRAFO DA CAMBIARE"){
      el.innerHTML="<mark>PARAGRAFO MODIFICATO</mark>";
   }else{
      el.innerHTML="<mark>PARAGRAFO DA CAMBIARE</mark>";
   }
   return;
}



function test05(){
   /* Prova del metodo: 
   contenuto element.attributo=contenuto;*/
   var el=document.getElementById('pHidden');
   if (el.hidden == false){
      el.hidden=true;
   }else{
      el.hidden=false;
   }
   return;
}












function test06(){
   /* Prova del metodo: 
    element.setAttribute('attributo', valore);*/
   var el=document.getElementById('pHidden');
   if (el.hidden == false){
      el.setAttribute('hidden', true);
   }else{
      el.hidden=false;
      /* el.setAttribute('hidden', false);
         non fa quello che mi aspetto, o non ho capito come funziona hidden, o 
         non ho capito come funzione setAttribute(attributo, valore). ci ritornerò
         se e quando avrò capito dove è il problema.*/
   }
   return;
}
 
 
 
 
function test07(){
   /* Prova del metodo: 
   document.createElement(element);*/
   var nuovoParagrafo=document.createElement('p');
   nuovoParagrafo.innerHTML = '<mark>pippo</mark>';
   alert ('NuovoParagrafo ' + nuovoParagrafo.innerHTML + ' creato.');
   return;
}





function test08(){
   /* Prova del metodo: 
   void document.removeChild(element);*/  
   var parametro = 'view'
   var el = document.getElementsByClassName(parametro);
   /* getElementsByClassName('className') restituisce un array di elementi, ma cosa c'è in questi elementi?
   C'è il codice html racchiuso negli elementi contrassegnati con class='className'.
   Nel documento in oggetto c'e nè uno solo.*/    
   alert('Esploro il contenuto di ' + parametro);
      for (var i=0; i<el.length; i++){
         alert ('el['+ i + ']: ' + el[i].innerHTML);
      }
   /* Il paragrafo che voglio rimuovere si trova in el[0]. Questo l'ho capito dal pezzetto di codice precedente. 
   allora lo cancellerò con:
   el[0].removeChild(document.getElementById('test_08'));
   ma non funziona. Dagli esempi di utilizzo trovati nel web, ho capito che gli oggetti elements hanno una
   proprietà children consistente nel array di elementi html che contencono. Il paragrafo che voglio 
   eliminare è nell'array el[0].children[]. Ma in quale posizione è ? Lo stabilisco con il pezzetto 
   di codice seguente:*/  
   alert('el[0].children.length ' + el[0].children.length );
   var k=-1;
   for(var i=0; i< el[0].children.length; i++){
      if (el[0].children[i].textContent == 
         document.getElementById('test_08').textContent){
         k=i;
         alert('found ' + i);
      }else{/*alert (el.children[i].textContent);*/} 
   } 
   /* Se all'uscita del loop precedente, k è diverso da -1, significa che ho trovato il paragrafo
   che voglio rimuovere e che questo  si trova all'indice k del array el[0].children[]. Ora posso rimuoverlo*/
   if (k!=-1){
      el[0].removeChild(el[0].children[k]);
   }else{
      alert('Elemento: '+ document.getElementById('test_08') + ' non trovato' );
   }   
   return;
}


function test09(){
   /* Prova del metodo: 
    * void document.appendChild(element);
   *
   * 1 - Creo un nuovo paragrafo con document.createElement;
   * 2 - Aggiungo la proprietà id al paragrafo creato con element.setAttribute;
   * 3 - Ottengo l'elemento padre a cui appendere il nuovo paragrafo con
   *     document.getElementsByClassName;
   * 4 - appendo il nuovo paragrafo all'elemento padre.
   */   
   var nuovoParagrafo=document.createElement('p');
   nuovoParagrafo.innerHTML = '<mark>pippo</mark>';
   nuovoParagrafo.setAttribute('id',"pippo");
   var padre=document.getElementsByClassName('view');
   padre[0].appendChild(nuovoParagrafo);
   alert ('Il nuovo paragrafo è stato inserito in fondo alla pagina');
   return;
}