5 – DOM history location document

Pubblicato il di

History

ci permette di controllare la storia delle pagine visiatate dal browser. Come ogni oggetto del DOM ha dei metodi e delle proprietà, tra cui troviamo la lenght che corrisponde al numero di volte che una pagina è visitata dal browser tramite link esterni. interrogato.

<a href="history.html">vai </a>

un link alla pagina history.html in cui ci sarà:

<script type="application/javascript">
    alert(history.length);
</script>
<a href="prova.html">torna </a>

Come si vede ogni pagina viene conteggiata quindi l’alert mostrerà un incremento di 2 valori nel contatore di history. Aggiungiamo un pulsante per tornare alla history tramite il metodo history.back()

<input type="button" value="TORNA" onclick="history.back()"/>

In questo caso il contatore non si incrementa. simmetricamente esiste il metodo forward() che permette di andare avnti.

<input type="button" value="AVANTI" onclick="history.forward()"/>

Esiste anche il metodo history.go() che accetta come argomenti il numero di pagine cui si vuole andare (es 2 avanti 2 pagine, -2 indietro 2 pagine)

<input type="button" value="AVANTI" onclick="history.go(-1)"/>

location

Permette di gestire in maniera completa la barra dell’indirizzo. Le proprietà permettono di sezionare l’url in tutte le sue parti: possiamo chiede l’ host, hostname, url, stringa di interrogazione se presente, il protocollo, la porta …

document.write('Host: ' + window.location.host + '<br>');
document.write('Hostname: ' + window.location.hostname + '<br>');
document.write('URL: ' + window.location.href + '<br>');

Come al solito le proprietà non sono in sola lettura.

alert("clicca per cambiare sito ...");
window.location.href="http://www.apple.com";

cliccando ok, il browser salta con l’href all’indirizzo indicato. Altro metodo è il reload() che ricarica la pagina

window.location.reload(true);

Con l’argomento true, la pagina viene ricaricata dal server e nn dalla cache. Il metodo replace() , sostituisce dalla history l’url indicato.

window.location.replace("http://www.apple.com");

In sostanza l’ultima pagina visitata è come se non lo fosse, perché è un rimpiazzo .

Document

Questo è forse l’oggetto più interessante, rappresenta il documento riferito alla nostra pagina. Fa sempre parte dell’oggetto window, ma a sua volta contiene numerosi altri oggetti tra cui:

  • images[]
  • links[]
  • anchors[]
  • forms[]

Ho inserito alla fine del nome di questi oggetti delle parentesi quadre che stanno ad indicare che questi oggetti vengono rappresentati come vettori (array).

  • images

Per esempio l’oggetto images consente di accedere a tutte le proprietà delle immagini del nostro documento. La scansione delle immagini viene fatta solitamente dall’alto verso il basso e da sinistra verso destra. La prima immagine trovate nel documento sarebbe la numero zero document.images[0]. Se ho 3 immagini, avrò la 0 , la 1 e la 2 come numerazione degli indici dell’array.

<input type="button" value="ZOOM" onclick="document.images[0].width=200"/>

in questo esempio ho creato un bottone che al click accede alla proprietà width dell’immagine con indice zero impostandole il valore a 200px.

  • links

L’oggetto links corrispondono ai collegamenti, con le stesse procedure dell’oggetto images.

  • anchor

Stessa cosa per anchors (ancore) che sono i link che indirizzano alla stessa pagina

  • forms

Discorso analogo per forms, che possono anch’essi essere maggiori di 1.

Oltre all’indice si può far riferimento ad un elemento tramite il nome o identificatore (id).

<strong>QUESTO TESTO STA PER ESSERE COLORATO</strong>
<script type="text/javascript">
scelta=prompt("Scegli un colore: V=Verde, R=Rosso, B=Blu");
switch (scelta.toUpperCase())
{
    case "V": colore="00ff00";
    break;
    case "R": colore="ff0000";
        break;
    case "B": colore="0000ff";
        break;
    default: alert("Scelta non accettata...");
}
window.document.fgColor=colore;
</script>

In questo esempio ho impostato tramite prompt una finestra di scelta colore tra quelli proposti. Il comando switch contiene come argomento la proprietà toUpperCase che trasforma in maiuscolo. I vari case che impostano il colore e infine la proprietà fgColor che imposta il colore dei caratteri con quello scelto.

Altre proprietà sono impostabili come il colore dei link il linkColor, dello sfondo il bgColor, l’altezza e la larghezza che sono in sola lettura

window.document.height=400;

Vediamo come ultimo esempio una form:

<form name="dati" action="history.html" method="post">
    Nome: <input name="nome" type="text" size="60"><br>
    Cognome: <input name="nome" type="text"><br>
    <input type="submit" name="BInvia" value="INVIA">
</form>

Adesso voglio visualizzare l’orario e se non è passato mezzogiorno scrivo nel testo nome buongiorno, altrimenti buonasera.

L’oggetto Math che abbiamo precedentemente visto non ha bisogno nemmeno di essere stanziato, mentre per altri oggetti, come Date, devo prima creare un oggetto che lo contenga per accedere al suo metodo getHours() , che restituisce l’ora.

dataOdierna= new(Date);
alert(dataOdierna.getHours());

Notare il comando new che crea un nuovo oggetto e lo assegna ad una variabile. anche se questa forma è corretta, il consiglio è di definire comunque la variabile

var dataOdierna;
dataOdierna= new(Date);
alert(dataOdierna.getHours());
if (dataOdierna.getHours()>12)

se la data è superiore a 12

window.document.forms[0].elements[0].value="Buona sera";

inserisco bona sera nel campo nome. Per accedervi ripercorro tutto il DOM partendo da window, document, e prendo il primo form quello con indice zero (nel ns caso è anche l’unico), forms[0] , si può anche usare il nome della form. Poi abbiamo un vettore che contiene gli elementi della form, nel nostro caso il campo nome corrisponde ad elements[0] . Anche qui si potrebbe usare anche il nome. A questo punto accedo alla proprietà value e gli assegno un valore. vediamo adesso l’else

else 
    window.document.forms[0].elements[0].value="Buon giorno";

Le cose sono uguali. Concludo mettendo una aggiunta al testo

window.document.forms[0].elements[0].value+="per cortesia inserire il nome";

Una grande comodità è poter aggiungere al volo qualcosa senza dover assegnare il precedente valore ad una variabile e poi aggiungere qualcosa a tale variabile. Ciò è possibile tramite l’operatore += . Stessa cosa se dovessi togliere userei -= .

Vediamo il codice completo:

<form id="dati" name="dati" action="history.html" method="post">
    Nome: <input name="nome" type="text" size="60"><br>
    Cognome: <input name="nome" type="text"><br>
    <input type="submit" name="BInvia" value="INVIA">
</form>
<script type="text/javascript">
    var dataOdierna;
    dataOdierna= new(Date);
    alert(dataOdierna.getHours());

    if (dataOdierna.getHours()>12)
        window.document.forms[0].elements[0].value="Buona sera";
    else
    window.document.forms[0].elements[0].value="Buon giorno";
    window.document.forms[0].elements[0].value+="per cortesia inserire il nome";
</script>

Come detto si può usare il nome

document.dati.elements[0].value="Buona sera";

Esiste anche un metodo più semplice, soprattutto per evitare di confondersi o generare errori nel risalire nella DOM, che è quello di assegnare un id agli elementi e selezionarli tramite il metodo getElementById()

document.getElementById(“nome”).value=”Buona sera”;

Molto più semplice e compatto sto dicendo di accedere all’elemento nome e cambiare il suo value.

In rete si trovano guide e manuali sul DOM e sugli oggetti built-in js. Una buona risorsa è w3schools.com