JavaScript e la gestione dei collegamenti

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.

La collection Anchors

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:

visualizza il nome dell'ancoraggio

La collection Links

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:

un esempio sulla gestione dei link

hash: si riferisce al nome dell'ancoraggio preceduto dal simbolo #;

<a href="#up">testo tra i tag</a>
l'hash in questo caso sarà: #up

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:


Torna all'inizio | Home