Javascript illusionista

Altra cosa molto utilizzata in applicazioni Ajax è la possibilità di poter settare due proprietà dello stile CSS di un oggetto chiamate visibility e display in modo da fare scomparire e apparire l'oggetto a piacimento. Bisogna far pratica anche con questo aspetto (altrettanto semplice) prima di scrivere applicazioni Ajax serie. Ecco il secondo esempio che illustra come fare a diventare prestigiatori in Javascript.

<script> function script2() { var e = document.getElementById("pippo"); if (e.style.visibility == 'hidden') { e.style.visibility = 'visible'; e.style.display = 'block'; } else { e.style.visibility = 'hidden'; e.style.display = 'none'; } } </script>; <div id="pippo"> Io scompaio e appaio! </div> <input type="button" value="Clicca per far sparire/ricomparire" onClick="script2()" />

Anche in questo caso l'idea di base non è difficile da capire. Prendiamo il riferimento dell'oggetto con document.getElementById come al solito e modifichiamo lo stile dell'oggetto a nostro piacimento tamite oggetto.style.nomeProprietà per fare quello che vogliamo. Qualcuno di voi che non conosce molto bene i CSS si chiederà come mai modifichiamo sia la proprietà visibility che display. La prima viene settata a visible se si vuole che l'oggetto sia visibile, mentre il valore di hidden la fa scomparire. La seconda invece viene settata a none quando si vuole che l'oggetto non prenda più spazio nella pagina, altrimenti anche se invisibile occuperebbe lo spazio ugualmente. A volte ciò è desiderabile, altre volte non lo è. Si noti come la proprietà dispaly venga settata a block quando si vuole far ricomparire l'oggetto: questo valore è infatti il default per un DIV ma varia al variare dei diversi elementi HTML, ad esempio per altri elementi il valore di default è inline. Se volete saperne di più cercate un buon tutorial sui CSS in giro. Congratulazioni! Sapete la metè delle cose che bisogna sapere per utilizzare Ajax in maniera rudimentale. Dunque andiamo a scoprire l'altra metè della storia.