La status bar


La status bar, per chi non lo sapesse, è quella parte del browser dove, per capirci, vengono mostrati gli indirizzi quando si passa sopra un link e si trova in basso (ma si suppone che se volete modificarla con il javascrip sappiate bene dove è!!!).
Ebbene, possiamo fare in modo di manipolare i messaggi che vengono mostrati in questa barra e dargli un po' di brio.
Vediamo come, con un po' di javascript, possiamo fargli fare tutto (o quasi) quello che ci pare...


Cambiamo la scritta (che starà fissa sempre):

Attenzione! Da ora in avanti, per comodità, ci saranno solo gli script, sta a voi inserirli nei tag <script language="javascript">...</script>


window.status="Io sono il nuovo testo";
Estremamente facile da capire, per facilitarci la vita, possiamo inserirlo dentro il tag <body> tramite l'attributo onLoad="window.status='Io sono il nuovo testo!'" oppure come azione da eseguire dopo un certo evento, ad esempio per il bottone qui sotto che serve come prova [si aggiunge nel codice per il bottone onClick="window.status='Nuovo testo'"]



La funzione "cancella" è stata fatta semplicemente dicendo di scrivere una stringa vuota sulla status bar.


Ecco invece come mostrare la data sempre nella status bar
function ora_status()
{

var oggi = new Date();
var ore = oggi.getHours();
var minuti = oggi.getMinutes();
var secondi = oggi.getSeconds();

/*Questi if fanno scrivere gli zeri nel caso ore,min e sec sono minori di 10, ovvero non 14:3:7 ma 14:03:07. Graficamente più professionale!!!!*/

if (ore<10)
ore =("0"+ore);
if (minuti<10)
minuti =("0"+minuti);
if (secondi<10)
secondi =("0"+secondi);

window.status=("Sono le " + ore + "\:" + minuti + "\:" + secondi);

}
setInterval("ora_status()", 1000);

La funzione deve stare dentro i tag script e deve essere richiamata o tramite un'altra coppia di tag oppure con l' onLoad del body.
L'unica parte strana è quella con gli if; si potrebbe dire che al fine dei mostrare l'ora è inutile, ma è graficamente meglio vedere minuti e secondi scritti sempre a due cifre! Unica cosa da notare, il metodo setInterval che vuole come argomenti sia il nome della parte di codice che deve essere ripetuta sia l'intervallo dopo il quale viene richiamata (espresso in millisecondi, quindi 1000 ms = 1 sec.)



Ecco invece due modi per fare cambiare delle scritte dopo un tot di secondi.

Primo metodo:

function cambia()
{
var oggi = new Date();
var s = oggi.getSeconds();

if (s>1 && s<=10)
window.status="Secondi da 1 a 10";
else if (s>10 && s<=20)
window.status="Secondi da 11 a 20";
else if (s>20 && s<=30)
window.status="Secondi da 21 a 30";
else if (s>30 && s<=40)
window.status="Secondi da 31 a 40";
else if (s>40 && s<=50)
window.status="Secondi da 41 a 50";
else if ((s>50 && s<=59)||s=0)
window.status="Secondi da 51 a 59";
}
setInterval("cambia()", 10000);

Questa funzione usa un oggetto Date, da cui si prendono i secondi, per determinare un cambiamento della frase dopo un tempo prefissato (il setInterval specifica che questo intervallo è 10 secondi). Questo metodo serve non solo per animare la status bar ma anche gli altri oggetti che si possono creare con il javascript. Piccola nota sugli operatori booleani per chi ne fosse all'oscuro:
&& è un and logico ovvero un operatore che dice all'if (in questo caso) di verificare che ENTRAMBE le condizioni siano vere. Se lo sono esegue il codice sottostante. Se una delle due o entrambe sono false non si esegue l'azione.
Diversamente l'or logico fatto con le due barre verticali || serve per dire all'if di eseguire il codice sottostante quando almeno una delle condizioni è verificata.


Questo invece è un metodo più veloce:

function rotazione()
{
var array = new Array("Visita il nostro sito", "http\:\/\/mic\/.interfree\/.it", " e fallo conoscere ", " a tutti i tuoi amici ", " questa e\' ", " una pubblicita\' spudorata\!");

var display = array[0];

var oggi = new Date();
var sec = oggi.getSeconds();
var numero = sec%6;

window.status = array[numero];

}
setInterval("rotazione()", 1000);
Più o meno anche questa segue la "filosofia" dell'esempio precedente, ovvero tramite la chiamata a getSeconds() si prende il numero dei secondi e in base a questo risultato si scrive una frase. Questa volta però si fa attraverso una operazione di modulo (il simbolo percentuale). Per chi non lo sapesse, questo operatore serve a ritornare il resto di una divisione. Esempio pratico: 6%3 = 0, 7%3 = 1, 8%3 = 2, ecc.
Dato che gli elementi dell'array sono sei, l'operazione da fare è sec%6 che restituisce un valore da 0 a 5 (guarda un po', proprio i valori degli elementi del nostro array). Come al solito c'è un setInterval per far scorrere il tutto. Attenzione al fatto che la prima frase mostrata può non essere la prima dell'array, perché se sec%6 è ad esempio 4, si inizia dalla quinta frase dell'array!



Infine ci sono i testi che scorrono, ma non mi piacciono troppo e ora vi dico il perché. A differenza dai testi che si aggiornano dopo alcuni secondi, i testi scorrevoli necessitano di un tempo di aggiornamento veloce che porta uno sfarfallio della scritta stessa che non è poi così gradevole a vedersi.
Se comunque a voi non ve ne frega niente e le volete mettere, vi dico un paio di indirizzi utili (ci sono anche nel menu "Risorse" della pagina precedente) dove potete trovare degli script già fatti e pronti per l'uso. Il primo è http://www.html.it e un altro molto interessante è un sito il cui nome è già un programma: http://www.javascript.com

Come ultima cosa, se combinando, modificando o altro questi semplici script vi scappa fuori qualcosa di simpatico e innovativo non esitate a farmelo sapere!!!



<-Indietro