Appunti Javascript

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:

<font face=”verdana” size=3>Chat interna</font>

</textarea><br>

</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

</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 conviene 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:

Esempio:

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.