Formazione - Appunti di Javascript

per la meta-sintassi utilizzata vedi note a piè di pagina

(il contenuto di tali appunti non costituisce un manuale completo di javascript bensì un riferimento per alcune particolari logiche e "trucchi" che normalmente non sono evidenziate nei manuali di riferimento e si scoprono di volta in volta utilizzando il linguaggio,
l'aggiornamento di tali appunti è continuo, per verificare la data dell'ultimo aggiornamento vedi in fondo pagina.)

Il cookie è una variabile di memoria localizzata sul client che può essere richiamata successivamente.

Importante è poter scrivere e leggere i cookie rispettivamente:

document.cookie= "miovalore=" + escape(<valore>);
document.cookie richiamato per leggere i cookie mi fornisce tutti i cookie dichiarati nel documento corrente

Per il primo caso non vi è alcun problema in quanto il valore viene registrato nel formato "miovalore=111",
mentre nel secondo caso occorre "estrarre" il cookie che interessa tramite le funzioni ch

Richiamare oggetti da una finestra all'altra...

Con il comando window.open è possibile da una pagina web richiamare l'apertura di un'altra finestra con all'interno un'altra pagina web.
Inoltre e molto utile a volte poter richiamare valori di campi presenti nella finestra chiamante o viceversa aggiornare i campi della finestra chiamante da quella aperta successivamente.
A tal scopo è molto utile l'oggetto opener.

opener è un riferimento diretto alla finestra chiamante (oggetto window) mediante questo oggetto seguito da il nome del campo presente è possibile recuperarne il valore.
Esempio: una finestra viene aperta in popup (finestra B) quindi appere in primo piano davanti alla finestra principale(finestra A), supponiamo di voler recepire dalla finestra B il valore di un campo presente nella finestra A la sintassi corretta è:

alert(opener.<nome campo>.value);

dove <nome campo> è il nome del campo presente nella finestra chiamante. Interessante è notare come javascript gestisca automaticamente le parentele tra le finestre. in tal modo il codice utilizzato è indipendente dal nome della pagina chiamante che in tal modo viene sempre riferita con opener.

Nel caso in cui nella finestra A il campo è all'interno di un oggetto form è necessario specificare anche il nome della form che lo contiene:

alert(opener.<nome form>.<nome campo>.value);

Trattare le stringhe: supponiamo che dalla pagina corrente a cui sono stati passati n parametri in GET (quindi come parametri presenti dopo il nome della pagina) vogliamo aprire una pagina con diverso nome rispetto alla corrente ma con gli stessi parametri.
Tale occasione può capitare quando si voglia ad esempio passare da una visione tabellare web a una versione della stessa tabella per la stampa che quindi deve rispettare certi parametri e deve avere un'estetica differente.
In tal caso da un pulsante "Stampa" sull'evento onclick del pulsante si può inserire il seguente codice :
"javascript:document.location = chiama_pag() ;"

function chiama_pag() {
rExp = /tabella.asp/gi;
results = window.location.href.replace(rExp, "tabella_stp.asp") ;
return results
}
nell'esempio tabella.asp è la pagina corrente e tabella_stp.asp è la pagina da aprire per la stampa

Esempio di Chat : questo esempio ci permette di capire il funzionamento di javascript integrato con ASP tramite l'oggetto Microsoft.XMLHTTP da Javascript siamo in grado di attingere alla potenza di ASP.

Prima di tutto la pagina principale della chat è una semplicissima pagina html che contiene due campi di testo e un'area dove andranno a finire i messaggi della nostra chat.
Il codice necessario per tale pagina è il seguente:

<body onload="startclock();">
<font face="verdana" size=3>Chat interna</font>
<form name=myform action="insert_msg.asp">
<input type=text name="nik" value=""><input type=button value=ok onclick="f_insert_name(document.myform.nik.value);" ><br>
<textarea name="messaggi" rows="10" cols="40" readnonly>
</textarea><br>
<input type=text name="nuovo_messaggio" size=45>
<input type=button value=Invia onclick="f_insert_client(document.myform.nuovo_messaggio.value);" >
</form>
Di seguito vediamo il contenuto della funzione javascript startclock() tale funzione fa partire l'evento di aggiornamento della zona della chat relativa ai messaggi, che dev'essere costamente aggiornata, nell'esempio il tempo di aggiornamento è stato impostato a 1000 millesimi di secondo, ma comunque si potrà regolare a piacimento.

function startclock () {
showchat();
}

function showchat () {
str_result=f_result_client(<% =request.querystring("cod")%>);
rExp = /<ReturnValue>/gi;
strr = '';
str_result1=str_result.replace(rExp,strr,str_result) ;

finoa=str_result1.lastIndexOf("<") ;

str_result2=str_result1.substr(0,finoa) ;

//alert(document.myform.messaggi.name);
document.myform.messaggi.value = "" ;
document.myform.messaggi.value = str_result2;

timerID = setTimeout("showchat()",1000);
timerRunning = true;
}

Come possiamo notare la chiamata alla funzione showchat scatena un'altra chiamata alla funzione f_result_client a cui viene anche passato un codice, vedremo poi che tale codice potrebbe essere utilizzato per creare più gruppi di discussione diversi, ma in questo esempio non ha significato.

function f_result_client(id) {
var DataToSend = "id=" + id
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //creazione oggetto Microsoft XMLHTTP
xmlhttp.Open("POST","result_client.asp",false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(DataToSend);
return xmlhttp.responseXML.xml;
}

Di seguito inserisco il codice relativo alla pagina result_client.asp che restituisce la lista dei messaggi presenti nella tabella della chat.
In pratica se viene chiama la pagina result_client.asp restituisce un pagina contenente:
<ReturnValue>utente1 -- Messaggio1[a capo]utente2 -- Messaggio2 ecc... </ReturnValue>

Il codice contenuto in tale pagina è il seguente:

<%
codice=request.form("cod")
if codice="" then
codice=request.querystring("cod")
end if
strConnAste = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+ server.MapPath("mdb-database/chat.mdb")
Set conn = Server.CreateObject("ADODB.Connection")
conn.open strConnAste
set rstConfig = Server.CreateObject("ADODB.Recordset")
'Estraggo solo gli ultimi 10 messaggi pervenuti alla chat
strsql = "select top 10 * from msgs order by id desc"
set rstConfig = conn.Execute(strsql)
do until rstConfig.eof
if rstConfig.eof then
no_msg=true
else
no_msg=false
lista_tot=lista_tot & vbcrlf & rstConfig.fields(1) & " -- " & rstConfig.fields(2)
end if
rstConfig.movenext
loop
set dataRec = Nothing
Set conn = Nothing
set cm = Nothing
set objConn = Nothing
Response.ContentType = "text/xml"

risultato=lista_tot
Response.write "<ReturnValue>" & risultato & "</ReturnValue>"
%>
L'output di tale pagina è recepito dalla funzione Javascript f_result_client e restituito all'interno della funzione javascript showchat
andando a assegnare il valore alla variabile str_result e successivamente viene "ripulito" dai tag <ReturnValue></ReturnValue> e va a valorizzare il contenuto della TextArea "messaggi" presente all'interno della form "myform"

Cambiamento dinamico classe di stile: In questo esempio si vedrà come modificare lo stile di un campo testuale dinamicamente in base alla validazione della form che lo contiene.

Abbiamo definito due classi stile nel seguente modo:

.Campo_Modulo_rw { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; border-style: outset; background-color: #FFFFFF}
.Campo_Modulo_err { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; border-style: outset; background-color: #FF8080}

Supponiamo di avere una form

Il campo normalmente appare con stile definito dalla classe Campo_Modulo_rw

Se ad esempio il campo deve essere obbligatorio nella funzione ValidateFrm() ci sarà la condizione adeguata come sotto:

function ValidateFrm() {
if (document.myform.iniz_str.value == "")
{
alert("Campo obbligatorio");
document.myform.iniz_str.className = "Campo_Modulo_err";
document.myform.iniz_str.focus();
return false
}
}

Come si può vedere nella parte evidenziata c'è il metodo per cambiare nome della Classe da utilizzare per segnalare l'errore del campo obbligatorio, nell'esempio tale cambio diventa con sfondo rosso.

Inoltre viene anche portare il cursore sul campo che presenta il problema con il metodo focus().

Aprire una finestra in popup: da una pagina qualsiasi tramite il seguente comando è possibile aprire una finestra in popup

window.open("<indirizzo http della pagina da visualizzare>","<nome della pagina popup>","<caratteristiche estetiche della pagina>")

dove:

<indirizzo http della pagina da visualizzare>: è l'indirizzo della pagina che si vuole aprire all'interno della pagina popup
<nome della pagina popup>: è il nome che si vuole attribuire alla pagina popup (il broser non apre due pagina popup con lo stesso nome)è il nome che si vuole attribuire alla pagina popup (il broser non apre due pagina popup con lo stesso nome)
<caratteristiche estetiche della pagina>: con questo argomento si possono stabilire le caratteristiche estetiche della pagina popup creata che possono essere:
alwaysLowered impostato a yes crea una finestra di popup sopra le altre finestre
alwaysRaised impostato a yes crea una finestra di popup sotto le altre finestre
channelmode impostato a yes fa apparire la finestra in modalità channel*
dependent impostato a yes, la nuova finestra popup è figlia della finestra chiamante (si chiude quando la finestra padre viene chiusa e non appare nella task bar di Windows)
directories impostato a yes la nuova finestra ha i pulsanti standard delle directory
fullscreen la nuova finestra appare in full screen
height è il valore in pixel che avrà la nuova finestra
hotkeys Quando è impostato a no, questo disabilita l'uso dei tasti hotkeys in una finestra window senza la barra dei menù
innerHeight Serve per impostare il valore di inner height della finestra in pixel
innerWidth Serve per impostare il valore di inner width della finestra in pixel
left Come screenX permette di impostare la distanza dalla parte sinistra dello schermo in pixel.
location Quando è impostato a yes crea una finestra con la barra degli indirizzi altrimenti non appare la barra degli indirizzi
menubar Quando è impostato a yes crea una nuova finestra con i menu standard (File, Edit, View, etc.).
outerHeight Questo imposta il valore in pixel di outer height
outerWidth Questo imposta il valore in pixel di outer width
resizable When set to yes this allows the resizing of the new window by the user.
screenX This allows a new window to be created at a specified number of pixels from the left side of the screen.
screenY This allows a new window to be created at a specified number of pixels from the top of the screen.
scrollbars Quando è impostato a yes la nuova finestra viene visualizzata con le barre di scorrimento standard (orizzontale e verticale) quando è necessario
status Impostato a yes nella nuova finestra appare la barra di stato standard del browser
titlebar Impostato a yes la nuova finestra avrà la barra del titolo standard del browser
toolbar Impostato a yes la nuova finestra avrà la barra degli strumenti standard (Precedente, Successiva, Home ecc.)
top Simile alla proprietà screenY, consente di creare la nuova finestra ad un nuomero specificato di pixel dalla parte alta dello schermo
width Porprietà che imposta la larghezza della nuova finestra in pixel

z-lock Quando è impostato su yes non consente alla nuova finestra di apparire sopra le altre finestre quando assume la attivazione

tipicamente tale comando si utilizza da un tag onclick su un oggetto presente sulla pagina di partenza: ad esempio nel caso si voglia aprire in una finestra esterna di help partendo da un tag help presente sulla pagina:
<a href="#" onclick="window.open('miapagina.asp','pagina_help','width=250,height=300'')>help</a>

Esempio:

<a href="#" onclick="window.open('http://....help.asp','Aiuto','height=500; width=450; menubar=no;')">help</a>

Note relative alla meta-sintassi utilizzata:

nel testo ho rappresentato le variabili che possono di volta in volta essere utilizzate
con gli oggetti presenti nello specifico ambiente in cui si utilizza il comando con la notazione <denominazione> tale
sintassi è abbastanza chiarificatrice in quanto all'interno delle parentesi "acute" ho utilizzato delle denominazioni "parlanti" in modo da rendere più compresibile la lettura.

15/09/2008