Argomenti trattati: gestione di ancoraggi e collegamenti.
La gestione dei collegamenti è basata in JavaScript su 2 insiemi di oggetti: anchor e link.
Parliamo di insieme perché è logico presupporre che un documento HTML contenga più punti di ancoraggio e più collegamenti.
Per richiamare l'insieme di questi elementi si può utilizzare la sintassi:
document.anchors[n]
oppure:
document.links[n]
dove n è il numero che rappresenta l'elemento dell'Array
considerato: è quindi necessaria una minima conoscenza su come gestire un
Array, per accedere ad un certo elemento di una collezione.
Le ancore e i link nell'Array che racchiude tutti quelli presenti nel documento vengono numerati a partire da zero,
secondo il loro ordine dall'inizio alla fine
del documento.
Rappresenta il testo o le immagini racchiuse tra i tag <A></A>, che
costituiscono i punti di ancoraggio del modello ipertestuale.
La proprietà fondamentale dell'oggetto anchor è la proprietà
name,
che si riferisce ad un collegamento all'interno della stessa pagina, a
volte chiamato anche "segnalibro". Un esempio è in questo stesso
documento, nel collegamento centrale in fondo alla pagina, il cui testo
è "Torna all'inizio".
Cliccando, si ritorna all'inizio della pagina anche se la pagina si
era fatta scorrere, e si era arrivati alla parte inferiore.
La sintassi HTML è:
<a href="#up">Torna all'inizio</a>
<!-- (link) -->
<a name="up"></a>
<!-- (ancoraggio) -->
Applicando la proprietà al nostro esempio, possiamo ricavare
il nome dell'ancoraggio attraverso JavaScript:
Un collegamento rappresenta il riferimento ad un'altra pagina HTML, o ad un altro file. "Cliccare" su un collegamento vuol dire:
Le proprietà fondamentali di un link sono riferite:
| text: si riferisce al testo utilizzato per creare il link. Per un esempio, visualizza il seguente documento: |
| hash: si
riferisce al nome dell'ancoraggio preceduto dal simbolo #;
<a href="#up">testo tra i tag</a>
host: si riferisce al nome web della macchina su cui risiede il documento e alla porta; Il valore può essere ad esempio: server:80 hostname: rappresenta il nome della macchina host dell'URL Il valore può essere ad esempio: server href: rappresenta l'indirizzo completo della proprietà HREF del link Il valore può essere ad esempio: http://server/nome_web_cartella/nome_file.htm pathname: rappresenta il percorso fisico del file Il valore può essere ad esempio: nome_web_cartella/nome_file port: rappresenta la porta del percorso Il valore può essere ad esempio: 80 protocol: rappresenta il protocollo di comunicazione del percorso Il valore può essere ad esempio: http: search: rappresenta la porzione di ricerca, eventualmente presente in una richiesta al Server Il valore può essere ad esempio: ?sex=M |
| target: rappresenta
il nome della finestra in cui sarà visualizzato il collegamento
Se il collegamento è realizzato in una finestra diversa da quella principale, su cui il link è collocato, questa proprietà potrà avere diversi valori (es. _blank o _self) |
In questa spiegazione non saranno trattate le particolarità delle mappe cliccabili, argomento descritto a parte.
Quando si vuole utilizzare un evento
su un collegamento, occorre porre una certa attenzione.
Per default, con un click su un collegamento il browser dovrebbe caricare un
altro documento.
Il codice:
<a href="mia_pagina.htm" onclick="alert('Benvenuti nel mio sito')">testo</a>
fa comparire l'alert col messaggio di benvenuto,
poi viene caricata mia_pagina.htm.
Ma non sempre si vuole che accada. In questo
caso, è possibile scrivere:
<a href="JavaScript" onclick="alert('Benvenuti nel mio sito'); return false">testo</a>
oppure:
<a href="JavaScript:alert('Benvenuti nel mio sito')">testo</a>
Nel primo caso, si utilizza l'evento onclick, non si da alcun collegamento alla pagina, ma si nega l'azione di default di apertura di un altro documento con return false.
Nel secondo caso, si lega direttamente l'istruzione
al richiamo del codice JavaScript nell'attributo HREF del link.
Di seguito, sono descritti alcuni degli eventi propri del collegamento
ipertestuale che possono essere inseriti nello stesso tag <A></A>
che lo specifica.
Eventi principali del tag <A></A> supportati da MSIE: