Costruire un generatore on-line di javascript - ASPCode.it - ASP

Costruire un generatore on-line di javascript

Data di pubblicazione: 19/08/2002 Voto della community: 3,89 (Votanti: 3)

In questo tutorial vedremo come realizzare un sistema gratuito e utilizzabile direttamente on-line per creare javascript, in questo caso vedremo come fare per una popup. Naturalmente lo script è adattabile a differenti usi dai css al DHTML. Tutto il sistema richiederà una sola pagina .asp (popup.asp). Per seguire il tutorial è d'obbligo avere una conoscenza minima di ASP e VBScript.

La struttura della nostra pagina

Analizziamo ora la struttura della nostra pagina. Tutto il funzionamento è riassunto nel seguente diagramma:

Immagine 1 - Il funzionamento del sistema

Come potete vedere il funzionamento è molto semplice. Quando l'utente immette i dati, lo script controlla che siano giusti e, se lo sono, prosegue alla creazione del javascript ed invia l'output all'utente. Se i dati sono sbagliati o contengono contraddizioni, lo script stesso pensa a correggerli basandosi su un modello standard.

Il codice

Per prima cosa realizziamo il form con cui l'utente specificherà le proprietà della pop-up.
Il form assomiglierà al seguente:

Immagine 2 - Il form

Di seguito è riportato il codice relativo al form. Per ora non fate caso ai valori assegnati ai vari campi. Prestate attenzione invece al campo hidden che è quello che comunica allo script asp che il form è stato inviato. Senza questo campo lo script mostrerebbe sempre il form senza mai elaborare i dati.

<form name="popup" method="post" action="popup.asp"><input type="hidden" name="inviato" value="si">
<ol><li> <b>Informazioni varie:</b><br>
Nome variabile:
<input type="text" name="variabile" value="<%=strVariabile%>">
<br>
Url finestra:
<input type="text" name="url" value="<%=strUrl%>">
(per indirizzi internet ricordati: http://) <br>
<br>
</li>
<li> <b>Dimensioni:</b><br>
Larghezza:
<input type="text" name="larghezza" value="<%=strLarghezza%>">
pixel<br>
Altezza:
<input type="text" name="altezza" value="<%=strAltezza%>">
pixel <br>
<br></li>
<li> <b>Opzioni:</b><br>
Ridimensionabile:
<input type="radio" name="redimensionabile" value="1"<% if strRedimensionabile = "1" then %> checked <% End if %>>
Si
<input type="radio" name="redimensionabile" value="0"<% if strRedimensionabile = "0" then %> checked <% End if %>>
No<br>
Barre di scorrimento:
<input type="radio" name="scroll" value="1"<% if strScroll = "1" then %> checked <% End if %>>
Si
<input type="radio" name="scroll" value="0"<% if strScroll = "0" then %> checked <% End if %>>
No <br>
Menu:
<input type="radio" name="menu" value="1"<% if strMenus = "1" then %> checked <% End if %>>
Si
<input type="radio" name="menu" value="0"<% if strMenus = "0" then %> checked <% End if %>>
No <br>
Barra degli strumenti:
<input type="radio" name="tool" value="1"<% if strTool = "1" then %> checked <% End if %>>
Si
<input type="radio" name="tool" value="0"<% if strTool = "0" then %> checked <% End if %>>
No <br>
Barra di stato:
<input type="radio" name="status" value="1"<% if strStatus = "1" then %> checked <% End if %>>
Si
<input type="radio" name="status" value="0"<% if strStatus = "0" then %> checked <% End if %>>
No <br>
Barra dell'indirizzo:
<input type="radio" name="indirizzo" value="1"<% if strIndirizzo = "1" then %> checked <% End if %>>
Si
<input type="radio" name="indirizzo" value="0"<% if strIndirizzo = "0" then %> checked <% End if %>>
No </li></ol><br><input type="submit" value="Invia  "> <input type="reset" value="Reset">
</form>

Passiamo ora a vedere il codice asp. Il programma per prima cosa controlla tramite la seguente istruzione se il form è stato inviato: If Request.Form("inviato") = "si" then, ed in pratica non fa altro che chiedere il valore del campo hidden. Se la condizione risulta vera lo script raccoglie tutti i dati ed esegue un controllo sul loro valore. Se esso è nullo oppure errato, viene portato ad un valore predefinito. L'ultima parte del codice crea il javascript da presentare in output all'utente, montando i vari dati raccolti in precedenza. Se invece la condizione risulta falsa, mostriamo il testo di intestazione: "Crea pop-up personalizzate con pochi click!". Il form quindi è sempre visibile ed i valori assegnati ai vari campi sono quelli che l'utente ha inserito e che può modificare per ottenere un risultato diverso.

<%
If Request.Form("inviato") = "si" then
'Il form è stato inviato
'Creo le variabili e prendo i valori dei campi
'------------------------------------------------
'Nome variabile
Dim strVariabile
strVariabile = Request.Form("variabile")
if strVariabile = "" or isNumeric(strVariabile) = true then strVariabile = "x"

'Url
Dim strUrl
strUrl = Request.Form("url")
if strUrl = "" then strUrl = "http://www.aspcode.it"

'Caratteristiche
Dim strLarghezza, strAltezza, strRedimensionabile
Dim strScroll, strMenu, strTool, strMenus, strIndirizzo
strLarghezza = Request.Form("larghezza")
if strLarghezza = "" or isnumeric(strLarghezza) = false then strLarghezza = "350"

strAltezza = Cstr(Request.Form("altezza"))
if strAltezza = "" or isnumeric(strAltezza) = false then strAltezza = "350"

strRedimensionabile = Request.Form("redimensionabile")
if strRedimensionabile = "" then strRedimensionabile = "0"

strScroll = Request.Form("scroll")
if strScroll = "" then strScroll = "0"

strMenus = Request.Form("menu")
if strMenus = "" then strMenus = "0"

strTool = Request.Form("tool")
if strTool = "" then strTool = "0"

strStatus = Request.Form("status")
if strStatus = "" then strStatus = "0"

strIndirizzo = Request.Form("indirizzo")
if strIndirizzo = "" then strIndirizzo = "0"

'Creo il javascript
Dim strJs
strJs = "function finestra(){"& chr(10) &_
strVariabile &"=window.open('"& strUrl &"', "&_
"'','" &_
"width="& strLarghezza &","&_
"height="& strAltezza &","&_
"resizable="& strRedimensionabile &","&_
"scrollbars="& strScroll &","&_
"menubar="& strMenus &","&_
"toolbar="& strTool &","&_
"status="& strStatus &","&_
"location="& strIndirizzo &_
"');"& chr(10) &"}"

'Output all'utente...

else
'se il form non è stato inviato allora mostro all'utente l'intestazione del form
Response.write("Crea pop-up personalizzate con pochi click!")
end if
%>

<form name=......>
.....................
</form>

Resta ora da vedere l'output che l'utente riceverà. Naturalmente questo è modificabile ed adattabile alle proprie necessità, ma una bozza potrebbe essere la seguente:

Immagine 3 - Form output

Ed ecco il codice:

Il codice completo

Ecco, infine, tutto il codice della nostra pagina popup.asp: