VbScript, JavaScript e DHTML
Il VBScript è un linguaggio di scripting particolarmente utilizzato nello sviluppo di applicazioni Web in Asp (Microsoft Active Server Pages) che, non avendo un linguaggio di scripting proprietario, si servono proprio del VBScript come linguaggio di scripting.
Tuttavia il VBScript nasce come linguaggio di scripting client-side con scarso supporto da parte di browser diversi da Microsoft Internet Explorer. Per questo è particolarmente utilizzato per lo sviluppo di applicazioni Intranet, magari come servizio interno aziendale sul Web.
In un caso come quello appena citato VBScript trova ideale impiego, più di quanto possa trovarne il più rinomato e potente Javascript: la semplicità sintattica di VbScript è molto gradita agli sviluppatori proprio per siti/applicazioni basati sul concetto di rete locale Intranet.
Lo scopo di questo articolo è mostrare al lettore come sia possibile... non migrare verso VBScript abbandonando Javascript (una sciocchezza simile non la farei mai!), ma trovare rifugio in questo linguaggio per risolvere velocemente, e con una certa semplicità, problemi altrimenti risolvibili con Javascript, linguaggio più ostico per chi "ha fretta" :-)
Un esempio che di certo metterà il lettore in condizione di affrontare la lettura di questo articolo con un certo piacere, è la realizzazione di un menu dinamico semplicee, personalizzabile e funzionale. In pratica sarà affrontata la filosofia DHTML sostituendo il Javascript con VBscript nella fatidica coppia con i fogli di stile Css.
Per rendere l'idea su cosa stiamo andando a realizzare è possibile pensare al famoso menu "Gestione Risorse" di Ms Windows '98: una serie di voci principali che, al click del mouse su ciascuna di queste, aprirà nella parte sottostante la voce di riferimento una serie di link associabili a quella voce.
Il DHTML col VBscript
Non c'è particolare differenza concettuale tra il DHTML sviluppato con Javascript da quello sviluppato col VBScript, le proprietà ed i metodi sono gli stessi, essendo proprietari del DHTML, ricordo soltanto che il VBScript è un linguaggio case-insensitive, quindi utilizzare una proprietà tipo className riscrivendola come classname è la stessa cosa, ma per rimanere fedeli alle strutture sintattiche C-like che regolano il DHTML rispetteremo maiuscole e minuscole come se stessimo sviluppando in Javascript.
Approfitto per spendere una nota che renderà felici i programmatori Visual Basic, che mi aspetto siano quelli che più degli altri lettori apprezzeranno questo argomento: nella stesura dei codici di esempio verrano rispettate maiuscole e minuscole nella stessa maniera in cui Ms Visual Basic 6 le gestisce in automatico... la memoria fotografica è fondamentale!
Ora al lavoro!
Prepariamo la struttura HTML del menu
La struttura HTML del menu è fondata su di una gerarchia precisa, in cui i migliori alleati sono l'ordine e la schematizzazione, quindi niente più che una bella tabella è la soluzione che meglio si addice a questa esigenza.
Ecco il codice:
<table>
<tr>
<td class="VocePrincipale" onClick="VBMenu(0)">Voce principale # 1</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div id="VariLink0" class="NascondiMenu">
<a href="#" class="SottoVoci">Sotto-voce # 1</a><br>
<a href="#" class="SottoVoci">Sotto-voce # 2</a><br>
<a href="#" class="SottoVoci">Sotto-voce # 3</a><br>
</div>
</td>
</tr>
<tr>
<td class="VocePrincipale" onClick="VBMenu(1)">Voce principale # 2</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div id="VariLink1" class="NascondiMenu">
<a href="#" class="SottoVoci">Sotto-voce # 1</a><br>
<a href="#" class="SottoVoci">Sotto-voce # 2</a><br>
<a href="#" class="SottoVoci">Sotto-voce # 3</a><br>
</div>
</td>
</tr>
</table>
In questo modo avremo due sole voci principali con i relativi sotto-menu, ho ritenuto opportuno iniziare in questo modo per rendere meglio l'idea dal punto di vista visivo, come è possibile constatare sono stati assegnati una serie di identificativi univoci di tipo id agli elementi HTML della struttura appena presentata che andranno implementati di una unità per ogni voce principale del menu, <div id="VariLink0" ...> diventerà <div id="VariLink1" ...> e così via, allo stesso modo la sub-routine che richiamiamo all'evento onClick assegnato alla cella contenente la voce principale avrà tra parentesi un numero sempre crescente di una unità: questo aspetto sarà più chiaro dopo aver esaminato il codice VBScript del menu.
Il foglio di stile Css del menu
Il foglio di stile Css che utilizziamo per il menu è di semplice comprensione per chi ha anche solo una lieve infarinatura di Css, al di là della formattazione dei font, dei colori e degli stili in generale, nel codice di seguito proposto evidenzio i passaggi fondamentali del foglio di stile al fine del funzionamento del menu:
<style type="text/css">
td.VocePrincipale {
cursor: Hand;
font-family: Verdana;
font-size: 12px;
font-weight: Bold;
}
div.NascondiMenu {
display: None;
}
div.MostraMenu {
font-family: Verdana;
font-size: 11px;
display: Inline;
}
a.SottoVoci {
color: #0000FF;
text-decoration: None;
}
a:hover.SottoVoci {
color: #FF0000;
text-decoration: Underline;
}
</style>
Come è dunque possibile constatare le uniche fasi fondamentali di questo foglio di stile sono rappresentate dalle classi NascondiMenu che, come il nome stesso lascia ad intendere, nasconde il menu sia al caricamento che al secondo click sulla voce principale, ovvero dopo che è stata aperta e si è fatto riferimento, nella stessa sub-routine, all'altra classe, MostraMenu, che ovviamente mostra le sotto-voci al click sulla voce principale.
La classe VocePrincipale conferisce alla voce principale uno stile tale da farlo assomigliare ad un link, dato che, come si denota dal costrutto HTML di cui sopra, non viene creato un vero e proprio link, ma viene utilizzato all'interno della cella l'evento onClick che fa riferimento alla sub-routine che analizzeremo a breve.
La classe SottoVoci, invece, formatta i link delle sotto-voci, stilizzarli in un modo piuttosto che in un altro è un compito che demando al lettore che avrà cura di associarli allo stile del proprio sito, e comunque è un aspetto che non riguarda il menu in questione ed il suo funzionamento.
Conclusa questa parte strutturale del menu passiamo alla fase di realizzazione dello script per il suo funzionamento.
Fase clou della costruzione del menu: lo script VBScript
Lo script di riferimento per la realizzazione del menu è molto semplice e chiaro e potrà essere ampliato dal lettore che, fatta un po di pratica con la manipolazione degli stili, ed approfondita la teoria del DHTML, non avrà problemi a sbizarrirsi e creare effetti molto suggestivi!
Propongo il codice compreso di appropriati commenti:
<script language="VBScript">
Option Explicit ' Inizializza lo script, la dichiarazione può anche essere omessa ma lo rende più corretto
' Inizializza il parametro che viene riportato tra parentesi nell'apertura della sub-routine e richiamato dalle varie voci principali
Dim Identificatore
' Inizializza la variabile che farà da ITEM al menu per identificare se è aperto o chiuso
Dim Oggetto
Sub VBMenu(Identificatore)
Oggetto = "VariLink" & Identificatore
If document.all.item(Oggetto).className = "MostraMenu" Then ' Se il menu è aperto lo chiude
document.all.item(Oggetto).className = "NascondiMenu"
Else
document.all.item(Oggetto).className = "MostraMenu" ' Se il menu è chiuso lo apre
End If
End Sub
</script>
I commenti all'interno del codice non lasciano spazio ad ulteriori puntualizzazioni sull'utilizzo del suddetto codice, a dispetto delle apparenze iniziali è possibile notare che è un codice composto davvero da poche righe e pochi e semplici passaggi, per rendere il codice più leggibile ne ripropongo tutti i passi escludendo i commenti, pronto per l'uso!
<script language="VBScript">
Option Explicit
Dim Identificatore
Dim Oggetto
Sub VBMenu(Identificatore)
Oggetto = "VariLink" & Identificatore
If document.all.item(Oggetto).className = "MostraMenu" Then
document.all.item(Oggetto).className = "NascondiMenu"
Else
document.all.item(Oggetto).className = "MostraMenu"
End If
End Sub
</script>
