Uno script al giorno, stavolta HTML e Javascript!
Ci è stato chiesto come funziona la comparsa o scomparsa dei menu nella guida agli Script di Jaws. Presentiamo quindi nel dettaglio sia come devono essere predisposti i tag html della pagina, sia quale codice Javascript consenta questa azione.
Per una proficua lettura è necessaria una minima famigliarità con il codice html. Non è invece indispensabile una conoscenza del linguaggio Javascript, anche se saranno ugualmente fornite alcune indicazioni per poter comprenderne il funzionamento.
Visualizzare una sezione di testo.
IN una pagina html, per nascondere o visualizzare sezioni di testo tramite la pressione di un pulsante o di un link, è possibile servirsi di una funzione scritta in linguaggio Javascript.
Il testo da elaborare deve essere contenuto dentro ad una sezione delimitato da tag
<div>
, cui sia stato assegnato un nome tramite l'attributo
id
, nel modo seguente:
<div id="txt_001">
Testo da trattare
</div>L'identificativo usato nell'esempio è composto da due parti:
- Le prime tre lettere, le quali costituiscono un prefisso indicante la tipologia del controllo da identificare, che in questo caso è una sezione di testo, e quindi
txt. - Un suffisso, il quale può avere un nome esteso o essere di tipo numerico, come nel nostro caso
001.
Usando questa forma, all'inizio la sezione sarà ovviamente visibile, che è l'impostazione predefinita.
Se invece avessimo un menu da nascondere, per evitare che all'ingresso nella pagina fosse letto ogni volta l'elenco delle sue voci, bisognerebbe che all'inizio tale menu fosse nascosto. Questo risultato si ottiene ponendo nel tag iniziale anche l'attributo
style
, che non abbisogna di traduzioni. Tramite questo attributo si possono fare molteplici impostazioni , cambiando le proprietà degli elementi cui viene applicato.
Nel nostro caso, la proprietà da modificare è
display
, (Visualizza), e le dobbiamo assegnare il valore
none
, (Niente).
Riprendendo l'esempio di prima, ed inserendo nella sezione da nascondere anche i collegamenti di un menu composto da tre voci, la forma da usare dovrebbe essere ora la seguente:
<div id="VDM001" style="display:none">
<a href="#">Prima voce</a>
<a href="#">Seconda voce</a>
<a href="#">Terza voce</a>
</div>Se avete notato, poiché il contenuto da trattare sono ora delle voci di menu, abbiamo usato il prefisso
vdm
, che ne rappresenta l'acronimo, come prima parte del nome identificativo.
Quando poi si vorrà far visualizzare nuovamente i tre collegamenti, il valore
none
dovrà essere riportato al suo valore predefinito,
block
, (Bloccare). In questo caso, il solo attributo avrebbe questo contenuto:
style="display:block"Una volta stabilita la porzione della pagina su cui operare , è necessario disporre di un controllo che ci consenta di eseguire il cambio di visualizzazione, ed una funzione javascript che materialmente la esegua. Passiamo quindi ad esaminare questi ulteriori elementi, il primo dei quali sarà proposto dapprima in una forma, poi in un'altra, ma solo dopo aver analizzato il codice Javascript necessario.
Nascondere i menu.
La prima soluzione che esaminiamo prevede di utilizzare un pulsante, e quindi il tag
<button>
, per far nascondere o visualizzare un elemento della pagina che, come detto, simuliamo siano delle voci di menu.
IN questo tag, si dovranno usare almeno QUATTRO attributi, che proponiamo ciascuno con il loro contenuto, ASSIEME AD una breve spiegazione.
- type="button", che permette di utilizzare il pulsante per avviare, in questo caso, la funzione javascript.
- id="btn001", identificativo formato secondo lo stesso schema usato in precedenza, con lo stesso suffisso numerico, ma con il prefisso
btn
, che indica in questo caso una contrazione del nome del tag. - tabindex="1", che consente di inserire anche il pulsante nell'elenco degli elementi raggiungibili tramite la tastiera, ed in particolare con i tasti Tab.
- onclick="nomeFunzione ('parametri');", dove quella posta tra virgolette è la funzione chiamata al proporsi dell'evento
onclick
, il quale si verifica quando sul pulsante si preme il tasto Invio o si fa clic con il mouse. Da notare che i parametri posti tra le parentesi tonde della funzione devono essere specificati tra apostrofi, o se preferite tra apici, in quanto le virgolette sono già utilizzate per contenere l'insieme della chiamata quale valore dell'attributo.
Senza entrare ora nei dettagli della funzione, basterà dire che grazie alla chiamata della funzione inserita nell'attributo
onclick
, la pressione sul pulsante del tasto Invio, o del pulsante sinistro del mouse, cambierà ciclicamente la visibilità del testo contenuto nell'elemento identificato dal nome
VDM001.
Al tempo stesso, sarà modificata l'etichetta del pulsante, passando dall'iniziale
"Mostra menu"
, al successivo
"Nasconde menu"
, e così via.
Tornando alla forma in cui inserire il pulsante, soprattutto quando si prevede di avere all'inizio il testo nascosto, potrebbe essere utile racchiudere tale pulsante tra intestazioni di un certo livello, ad esempio il secondo, così da renderlo subito più evidente e facilmente raggiungibile anche per chi utilizza software di sintesi vocale.
Sulla base di quanto sin qui esposto, e prevedendo di dare alla funzione Javascript il nome
cambiaStato ()
, la riga di codice html col pulsante potrebbe avere l'aspetto seguente:
<h2><button type="button" id="btn001" tabindex="1" onclick="cambiaStato ('VDM001', 'menu');"> Mostra menu</button></h2>A questo punto, dopo aver creato la chiave di accensione del nostro sistema, abbiamo bisogno del motore che serve a farlo agire in una pagina web.
Realizziamo del codice Javascript.
Come detto, anche chi non conosce il linguaggio Javascript potrà servirsi delle informazioni fornite, limitandosi a copiare il codice proposto.
Per coloro che invece almeno un po' se ne intendono, diremo che sarà creata una funzione la quale cambierà:
- La già citata proprietà
display
, servendosi del metodo
getElementById
, applicato all'oggetto
Document. - L'etichetta del pulsante, servendosi, oltre a
getElementById
, anche del metodo
innerHTML.
Per fare questo, così come già accennato, alla funzione bisognerà passare due parametri:
- il nome della sezione della quale invertire la visualizzazione, specificando appunto l'ID dell'elemento che, come già esaminato, sarà
VDM001. - Il termine usato come seconda parte dell'etichetta, da aggiungere alla prima parte
"Mostra"
o
"Nasconde"
, i quali sono preimpostati dalla funzione stessa. Nel caso in cui non si specifichi nulla, come secondo parametro, essendo questo opzionale , l'etichetta dell'elemento usato per chiamare la funzione non sarà modificato.
Siccome il primo parametro passato riguarda l'elemento da nascondere o visualizzare, la modifica all'etichetta del pulsante avviene ricavando l'ID di quest'ultimo dal primo. Se ricordate, per creare l'identificativo del pulsante, avevamo mantenuto invariata la seconda parte dell'ID, quella dopo la terza lettera, mentre nelle prime tre era presente la contrazione
btn.
In questo caso, dunque, la prima parte del nome viene sostituita da questo prefisso, usando il metodo
substr
, (Contrazione di SottoStringa), la quale ha due parametri:
- La posizione di partenza della sottostringa da estrarre, considerando che il primo carattere si trova alla posizione 0. Nel nostro caso, dovendo partire dal quarto carattere della stringa iniziale, il punto d'inizio sarà quindi
3. - La lunghezza della stringa da estrarre. Se non si specifica alcun valore, essendo il parametro opzionale, sarà restituita la porzione sino al termine della stringa. Nel nostro caso, dato che è proprio questo il risultato da ottenere, come secondo parametro non sarà specificato nulla.
Per completezza d'informazione, quando si specificasse solo il primo dei due parametri, lo stesso risultato si potrebbe ottenere anche con i metodi
Substring
, (Sottostringa), e
Slice
, (Fetta). IN entrambi questi metodi, infatti, il primo parametro è lo stesso di
substr
, mentre il secondo, anche in questo caso opzionale , consente di indicare la posizione del carattere prima della quale far terminare la porzione di stringa da estrarre.
La funzione cambiaStato ().
Dopo averne illustrato il funzionamento generale, resta solo da dire che essa è costituita da delle strutture di controllo annidate:
- IL controllo principale, che verifica se il primo parametro, l'id dell'elemento di cui modificare la visualizzazione, è stato individuato tra quelli presenti nella schermata. In caso positivo, il flusso continua, altrimenti si esce dalla funzione.
- Il controllo sullo stato della visibilità, che prende una o l'altra via invertendo l'impostazione attiva in quel momento.
- Un terzo controllo, interno ai due rami del secondo, dove si controlla che l'ulteriore parametro sia stato specificato. In tal caso, l'etichetta del pulsante viene modificata, utilizzando una sua prima parte, preimpostata dalla funzione, e la seconda parte, che corrisponde al parametro stesso.
Codice.
function cambiaStato (id, etichetta){ // cambia ciclicamente la visibilità dell'elemento indicato
if (document.getElementById){ // se un elemento con l'identificativo specificato esiste,
if(document.getElementById(id).style.display == 'none') { // se l'elemento è nascosto,
document.getElementById(id).style.display = 'block'; // lo visualizza
if (etichetta) { // se è specificato un termine come secondo parametro,
document.getElementById('btn'+id.substr(3)).innerHTML = "Nasconde " + etichetta; // aggiorna l'etichetta del pulsante, invertendo l'azione compiuta
} // fine controllo secondo parametro
}else{ // se invece l'elemento è visualizzato,
document.getElementById(id).style.display = 'none'; // lo nasconde
if (etichetta) { // se è specificato un termine come secondo parametro,
document.getElementById('btn'+id.substr(3)).innerHTML = "Mostra " + etichetta; // aggiorna l'etichetta del pulsante, ripristinando quella originale
} // fine controllo secondo parametro
} // fine controllo stato
} // fine controllo presenza elemento
} // fine funzione cambiaStatoPorre il codice in una libreria esterna.
Una volta messo a punto il codice, dobbiamo ora rendere disponibile la funzione Javascript alla pagina html. Per chi avesse già esperienza, può scegliere il modo che preferisce per farlo, mentre gli altri possono intanto consultare questa esaustiva pagina dedicata all'argomento.
A prescindere dal caso che stiamo analizzando, , in genere conviene dislocare il codice realizzato in un normalissimo file di testo, che costituirà una nostra personale
libreria.
In tale file andrà inserito il codice così come ve lo abbiamo proposto, avendo soltanto cura di dare a questo file un nome con estensione
js.
Per indicare questo file alla pagina html, ci si dovrà servire del tag
<script>
, con l'attributo
src
, il quale dovrà contenere il nome della nostra libreria completo di percorso.
Ipotizzando di porre questo file nella stessa cartella dove si trovi la pagina html, e di assegnare a questa il nome
personal.js
, si potrebbe quindi specificare soltanto il percorso relativo, utilizzando questa forma:
<script src="./personal.js"></script>Questa riga di codice andrebbe posta possibilmente nell'intestazione della pagina, tra i tag
<head>
e
</head>
, ma non ci sono particolari obblighi al riguardo.
Esempio di pagina per gestire i menu.
Riunendo tutti i pezzi che abbiamo esaminato sinora, per collaudare il nostro sistema dobbiamo inserirli tutti in una pagina html. Qui ci limiteremo ad aggiungere i tag iniziali e finali, che ciascuno poi sarà libero di personalizzare a piacere, ed un titolo alla pagina stessa.
Anche per avere un ulteriore elemento nella pagina, abbiamo aggiunto soltanto una riga che simboleggia un eventuale contenuto, presente oltre alle voci di menu da nascondere.
Diamo in ogni caso per scontato, in questo esempio, che il codice Javascript sia stato trasferito in una libreria dal nome
personal.js
, e che questa si trovi nella stessa cartella dove è caricata la nostra pagina html.
Copiate quindi il codice seguente, servendovi anche del pulsante posto sotto, creando con esso una pagina web autonoma:
<html>
<head>
<title>Mostra-Nascondi menu</title>
<script src="./personal.js"></script>
</head>
<body>
<h2><button type="button" id="btn001" tabindex="1" onclick="cambiaStato ('vdm001', 'menu');">Mostra menu</button></h2>
<div id="vdm001" style="display:none">
<a href="#">Prima voce</a>
<a href="#">Seconda voce</a>
<a href="#">Terza voce</a>
</div>
<p>Contenuto della pagina.</p>
</body>
</html>Se invece volete provare subito come funziona, il codice riportato sopra è proposto di seguito come pagina web operativa:
Contenuto della pagina.
Questa semplice pagina è stata testata con Internet Explorer, Google Chrome e Microsoft Edge, ed in quest'ultimo caso con Jaws 2020. Se avete modo di provarla con altri browser, o altre configurazioni, fate gentilmente sapere tramite i commenti quale esito ha avuto il vostro test.
Grazie!
Visualizzare il contenuto di una voce.
L'altro modo per servirsi della funzione Javascript
cambiaStato ()
, è quello di visualizzare il contenuto di un elenco di voci, ad esempio di un dizionario o di un glossario. Si potrebbe avere così una pagina che all'inizio ha come visibili solo i titoli delle voci, inseriti dentro a dei link che, cliccandoci sopra, sarà visualizzato il testo soltanto della singola voce desiderata.
Partendo dall'esempio precedente, sarà eliminato il pulsante, ed i link diventano i titoli delle singole voci. Poiché la funzione resta comunque la stessa svolta in precedenza dal pulsante, i primi tre caratteri del nome che contraddistingue il singolo titolo rimangono il prefisso
btn
, seguiti da un suffisso numerico questa volta crescente.
Della precedente sezione, contrassegnata dal tag
<div>
, ne sarà creata una per ciascuna voce. In questo caso, poiché il contenuto da nascondere all'inizio è un testo, l'identificativo delle singole sezioni avranno come prefisso la contrazione
txt
, seguita ovviamente dallo stesso suffisso numerico usato per i corrispondenti titoli.
La vera novità di questo tipo di utilizzo è quello di poter indicare il nome della funzione javascript direttamente come contenuto dell'attributo
href
, dove normalmente si mettono i percorsi dei link da aprire. Per poterlo fare, si deve usare come prefisso il termine
javascript:
, ponendo il nome della funzione appena dopo i due punti e senza specificare un carattere Punto e Virgola dopo la chiusura delle parentesi.
Inoltre, altra novità, in questo caso non si dovrà specificare un secondo parametro alla funzione, in quanto l'etichetta che sarà visualizzata nel link dovrà essere mantenuta. Casomai, per ovviare al problema di avere come dicitura visualizzata solo dei titoli di voce da aprire, senza altre istruzioni al riguardo, si potrebbe utilizzare l'attributo
alt
, specificando che cliccando sul link in cui ci si trova sarà visualizzato, appunto, il contenuto della voce stessa.
Ricapitolando, le modifiche alla forma precedente sono le seguenti:
- Sostituire il pulsante con un collegamento per ciascuna voce di cui visualizzare il titolo.
- Creare una sezione di testo per ciascuna voce visualizzata, usando il prefisso
txt
nel nome identificativo.
La funzione svolta da queste sezioni rimarrà tuttavia invariata, rimanendo nascoste all'ingresso nella pagina web.
Al tag
<a>
, che indica il collegamento, saranno quindi applicati tre attributi, proposti di seguito assieme al loro contenuto:
- id="btn00x", dove
x
è il numero progressivo della voce da visualizzare. - href="javascript:cambiaStato('txt00x')", dove al nome della funzione viene posto come primo parametro l'ID della sezione corrispondente, con il suffisso numerico progressivo. Soprattutto, alla funzione non viene indicato un secondo parametro.
- alt="Mostra o nasconde il testo della voce", che costituisce il testo alternativo letto dalle sintesi vocali al passaggio sul link.
Così come nel caso precedente, si consiglia di racchiudere i collegamenti dentro a delle intestazioni, che nell'occasione potrebbero essere di terzo livello. in tal modo, anche senza visualizzare l'elenco dei link, le voci si potranno scorrere premendo il numero 3 sulla tastiera.
Esempio di pagina con l'elenco di voci testuali.
Anche in questo caso, dopo una breve parte di presentazione, riprendiamo l'esempio proposto in precedenza, soltanto aggiornato a questa modalità di utilizzo della funzione javascript.
Oltre alle modifiche già elencate, abbiamo tolto solo la riga col contenuto generico di pagina, ponendo però un titolo di secondo livello per le voci.
Ecco, dunque, proposto di seguito il codice da poter copiare, tramite l’apposito pulsante posto sotto:
<html>
<head>
<title>Mostra-Nascondi Voci di testo</title>
<script src="./personal.js"></script>
</head>
<body>
<h2>Elenco delle voci.</h2>
<h3><a id="btn001" href="javascript:cambiaStato('txt001')" alt="Visualizza o nasconde il testo della voce">Prima voce</a></h3>
<div id="txt001" style="display:none">
<p>Testo della prima voce.</p>
</div>
<h3><a id="btn002" href="javascript:cambiaStato('txt002')" alt="Visualizza o nasconde il testo della voce">Seconda voce</a></h3>
<div id="txt002" style="display:none">
<p>Testo della seconda voce.</p>
</div>
<h3><a id="btn003" href="javascript:cambiaStato('txt003')" alt="Visualizza o nasconde il testo della voce">Terza voce</a></h3>
<div id="txt003" style="display:none">
<p>Testo della terza voce.</p>
</div>
</body>
</html>Anche in questo caso, per chi volesse fare subito una prova, poniamo di seguito il codice precedente in versione già operativa:
Elenco delle voci.
Prima voce
Seconda voce
Terza voce
Uno Script al giorno, toglie gli ostacoli di torno!
Questo articolo fa parte della citata iniziativa, che qui viene presentata nel dettaglio., nella quale si daranno spazio a script per vari linguaggi realizzati dagli utenti, oppure messi a punto sulla base di specifiche richieste da questi pervenuteci.
Per ulteriori informazioni, o inviare materiale, rivolgetevi direttamente a: