Datasheet
Year, pagecount:2005, 25 page(s)
Language:Italian
Downloads:7
Uploaded:November 28, 2012
Size:142 KB
Institution:
-
Comments:
Attachment:-
Download in PDF:Please log in!
Comments
No comments yet. You can be the first!
Most popular documents in this category
Content extract
Introduzione a javascript ed esempi In questa piccola dispensina ci sono veloci e facili lezioni sul javascript ma soprattutto tanti esempi usati anche molto spesso che possono esemplificare il lavoro. Ci sono in tutto 10 lezioni ognuna con vari pezzi di codice di esempio per esercitarsi o produrre finezze che non si possono fare in pl/sql. Buon lavoro a tutti!!! Lezione 1 – Compilazione Dei Form Per evitare certi inconvenienti è possibile un controllo in tempo reale sulla completa compilazione del form da parte del visitatore. In altre parole, se lutente non compila tutti i campi, o solo alcuni, otterrà un messaggio di avviso che indica lerrore o la dimenticanza. Si consideri il caso pratico di un modulo informativo composto da tre campi: nome e cognome, e-mail e telefono. Di questi dati soltanto il numero di telefono è facoltativo, mentre gli altri sono considerati obbligatori. Il codice HTML che crea il form è il seguente (l’aterisco indica i campi obbligatori):
<FORM> Nome e cognome *<BR> <input type=text name="nome" size=40><BR><BR> E-mail *<BR> <input type=text name="mail" size=30><BR><BR> Telefono<BR> <input type=text name="telefono" size=20><BR><BR> <INPUT TYPE="SUBMIT" VALUE="Spedisci"></INPUT> </FORM> Impostato in questo modo il form è certamente operativo ma se spedito senza un campo obbligatorio compilato non dà alcun messaggio di avviso col rischio, già indicato in precedenza, di ricevere informazioni parziali o peggio inservibili. Javascript interviene in aiuto con una sintassi semplice e facilmente configurabile. Il codice va inserito in due fasi successive. Innanzitutto va impostato il codice all’interno dei tag <HEAD> del documento: <script> function checkrequired(which){ var pass=true if (document.images){ for (i=0;i<which.length;i++){ var tempobj=which.elements[i]
if (tempobj.namesubstring(0,8)=="required"){ if (((tempobj.type=="text"||tempobjtype=="textarea")&&tempobjvalue==)||(tempobjt ype.toString()charAt(0)=="s"&&tempobjselectedIndex==-1)){ pass=false break } } } } if (!pass){ alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite. Clicca su OK e verifica lerrore") return false } else return true } </script> La riga di codice: alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite Clicca su OK e verifica lerrore") imposta il messaggio che il browser dà in risposta quando verifica lassenza di alcuni campi obbligatori. Ovviamente il messaggio può essere modificato secondo le proprie esigenze Il resto del codice esaminato non va oltremodo modificato. La funzione checkrequired è quella che regge l’interno struttura dello script e stabilisce che i campi controllabili siano text,
textarea e select. Conclusa l’impostazione del codice Javascript è necessario apportare alcune modifiche ai singoli campi del form visto in precedenza. Per prima cosa va inserito il riferimento alla funzione checkrequired nell’apertura del form: <FORM onSubmit="return checkrequired(this)"> Successivamente è necessario anteporre ai nomi dei diversi campi che si vogliono obbligatori il termine "required". Per esempio il nome del primo campo è "nome", e per essere impostato come obbligatorio deve trasformarsi in "requirednome". Così per il campo "mail" che diventa "requiredemail". L’unico campo non modifato è "telefono", che come scritto in precedenza è facoltativo. Apportate le dovute modifiche, il form visto in precedenza assume la seguente struttura (fermo restando il codice inserito tra i tag <HEAD>): <FORM onSubmit="return checkrequired(this)"> Nome e cognome *<BR>
<input type=text name="requirednome" size=40><BR><BR> E-mail *<BR> <input type=text name="requiredmail" size=30><BR><BR> Telefono<BR> <input type=text name="telefono" size=20><BR><BR> <INPUT TYPE="SUBMIT" VALUE="Spedisci"></input> </FORM> Compilato il form e premuto il tasto li tasto "spedisci" non rimane altro che verificare gli effetti dello script. LEZIONE 2 - Gli Eventi Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli eventi. Un evento è – molto semplicemente – qualcosa che accade nel documento. Anche nella vita quotidiana un evento è qualcosa che accade: ad esempio una tazzina di caffè che cade e si rompe. Il documento dunque è lambiente entro cui vengono realizzate delle "azioni", in parte dovute alla volontà dellutente (passaggio del mouse su un link, click su qualcosa.),
altre volte dovute alla situazione contingente (la pagina è stata caricata) Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguire non appena lutente esegue una data azione: quando clicca su un bottone di un form possiamo controllare che i dati siano nel formato giusto; quando passa su un determinato link possiamo scambiare due immagini, eccetera. Gli eventi (le possibili cose che possono capitare allinterno della pagina) sono davvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilità messe a disposizione degli sviluppatori.Vediamo quali sono quegli eventi che vi capiterà più spesso di incontrare Come si può vedere dagli esempi il modo corretto per sfruttare gli eventi è quello di inserire levento allinterno della sintassi dellelemento HTML e racchiudere il codice JavaScript tra virgolette. Secondo questo modello: <ELEMENTO nomeEvento="codice JavaScript"> Abbiamo già incontrato in
precedenza l "alert" è una finestra di dialogo che avverte di qualcosa. Negli esempi qui sotto, quando viene eseguita una determinata azione, viene mostrato un alert con scritto "ciao". Si applica a Evento onLoad (elementi maggiormenti usati) BODY IMAGE Descrizione esempio "al <BODY caricamento." onLoad="alert(ciao);"> Levento scatta <IMG quanto SRC="miaImmagine.jpg" loggetto onLoad="alert(ciao);"> risulta completamente caricato. onUnLoad BODY onMouseOver A AREA INPUT (submit, reset,button, checkbox, radio,option) Applicato al <BODY BODY si onUnLoad="alert(ciao);"> verifica quando il browser "scarica" il documento. Cioè alla chiusura del documento. "al passaggio del mouse". Si verifica quando lutente passa il mouse su unarea sensibile (link o mappa). <A onMouseOver="alert(ciao);" HREF="pagina.html"> Con IE 5+ questo evento può essere
associato anche a TD, TR, eccetera onMouseOut A AREA INPUT (vedi sopra) "quando il mouse esce". Si verifica quando lutente con il mouse esce al di fuori dellarea sensibile (link o mappa). <A onMouseOut="alert(ciao);" HREF="pagina.html"> Con IE 5+ questo evento può essere associato anche a TD, TR, eccetera onClick A AREA INPUT onKeyPress A AREA INPUT "al click del mouse." <A onClick="alert(ciao);" HREF="pagina.html"> Avviene quando lutente clicca sullelemento Si verifica <TEXTAREA quando si è onKeyPress="alert(ciao);"> allinterno </TEXTAREA> dellelemento e viene premuto DIV un tasto della tastiera. onChange INPUT Si verifica <SELECT TYPE="SELECT" quando onChange="alert(ciao);"> lelemento <OPTION>uno subisce un <OPTION>due cambiamento a <OPTION>tre seguito </SELECT> dellazione dellutente. OnSubmit FORM Quando viene <FORM
NAME="mioForm" eseguita linvio ACTION="http://." del form onSubmit="alert(ciao);"> (tramite bottone o tramite invio da tastiera). onFocus A "quando <BODY lelemento ha il onFocus="alert(ciao);"> focus." (Provate la sintassi di questo Entra in azione esempio con altre finestre non appena del browser aperte, e lelemento è provate a passare dalla attivo. vostra pagina alle altre finestre e viceversa) INPUT BODY onBlur A INPUT BODY "quando <BODY lelemento non onBlur="alert(ciao);"> è più attivo." Viene richiamato quando lelemnto smette di essere attivo. Un discorso a parte merita levento onFocus, che spesso suscita dell perplessità. "onFocus" significa "quando lelemento è focalizzato": significa che in quel momento è attivo quel determinato elemento della pagina HTML. Nel caso dei link e delle mappe vi potete accorgere bene di quando lelemento ha il focus: il link o la
mappa ha infatti una piccola linea tratteggiata che lo circonda (nel caso del link, se lelemento è focalizzato, si trova nello stato "ACTIVE"). Anche nel caso delle finestre del browser è facile accorgersi di quando un elemento ha il focus: con Windows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto è azzurra (o del colore definito dallutente), in caso contrario è grigia. onBlur semplicemente è il contrario di onFocus: quando lelemento che aveva il focus lo perde (perché lattenzione dellutente si è concentrata su altro) viene azionato levento onBlur. È da notare che a uno stesso elemento possono essere attribuiti più eventi Ad esempio: <A onMouseOver="alert(passaggio sul link);" onMouseOut="alert(uscita dal link);" onClick="alert(click sul link);" HREF=”pagina.html”>testo del link </A> (Certo lalert non è lideale per far interagire i tre eventi fra loro, ma limportante è aver
compreso il concetto che allo stesso elemento possono essere collegati eventi diversi, ciascuno con il proprio codice da eseguire). Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli eventi più noti e più usati. Ogni elemento dellHTML ha a disposizione determinati eventi e non altri. Per esempio, un livello in Internet Explorer 6 è dotato di tutti i seguenti eventi (come si può vedere non cè levento onLoad, né onSubmit, perché riferiti a un livello non avrebbero alcun senso): onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove, onselectstart, oncontrolselect, onkeypress, oncut, onrowenter, onmousedown, onpaste, onreadystatechange, onbeforedeactivate, onkeydown, onlosecapture, ondrag, ondragstart, oncellchange, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, onkeyup, onresizestart, onmouseover, onmouseleave,
onmoveend, onresize, ondrop, onpage, onrowsdelete, onfocusout, ondatasetchanged, ondeactivate, onpropertychange, ondragover, onhelp, ondragend, onbeforeeditfocus, onfocus, onscroll, onbeforeactivate, onbeforecut, onclick, oncopy, onfocusin, onbeforeupdate, ondataavailable, onmovestart, onmouseout, onmouseenter, onlayoutcomplete, onafterupdate, ondragleave Chi fosse interessato a una classificazione più esauriente degli eventi può consultare il Corso JavaScript LEZIONE 3 - Ancora Eventi Gli eventi sono utilizzati per richiamare delle istruzioni. Infatti lo script va eseguito in maniera sequenziale, ma per fare in modo da inserire la dinamicità e linterattività occorre che questo resti caricato in memoria e venga attivato o richiamato solo quando si verificano particolari situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Il problema della conciliazione con le funzioni sta nel fatto che ad un evento può essere associata una sola istruzione, ma il più
delle volte lassociazione è fatta con un blocco di istruzioni e, quindi, con le funzioni che prendono il nome di handler o gestori di eventi. Gli eventi, per poter interfacciare HTML con Javascript, non vengono definiti nel tag <SCRIPT> (tranne che in qualche caso), ma sono inseriti allinterno dei tag HTML: il browser compatibile con Javascript incontrando un evento lo interpreta e lo attiva. Ecco un esempio: <A HREF="pagina.html" onclick="alert(ciao)">Link</A> notiamo come levento onClick sia inserito nel Tag come se fosse uno specificatore dello stesso. Attivare gli eventi allinterno degli script Gli eventi, tuttavia, si possono anche attivare direttamente allinterno degli Script, richiamabili come se fossero una proprietà delloggetto. La sintassi è: Oggetto.evento=handler; Per chiarire questo concetto che è utilissimo, ma raramente vedo applicato, posso raccontare un aneddoto: agli inizi del mio uso con Javascript cercavo uno script che mi
consentisse di simulare lo streaming, cioè di caricare dalla rete unimmagine di una sequenza solo quando ero sicuro che quella precedente era già stata caricata e quindi visualizzata. Usare un temporizzatore era impossibile perché leffetto variava secondo la velocità di connessione. Da un ottimo testo di Javascript, trovai un trafiletto che mi offrì lo spunto. In tal modo creai un array di immagini e operavo con il comando: document.images[num]onload=carica(); dove la funzione carica() serviva a caricare limmagine successiva. Tutto funzionava alla perfezione, anche se con qualche piccola variazione secondo i browser. Con Explorer, invece, si può utilizzare uno Script apposito per un oggetto e per un evento tramite la sintassi: <SCRIPT FOR=Object EVENT=evento>.</SCRIPT> Raggruppare gli eventi Negli ultimi tempi gli eventi si sono moltiplicati e difficile è tenerne traccia, quindi, per facilità cerchiamo di raggrupparli in sezioni omogenee: 1. Eventi attivabili
dai tasti del mouse 2. Eventi attivabili dai movimenti del mouse 3. Eventi attivabili dal trascinamento del mouse (drag and drop) 4. Eventi attivabili dallutente con la tastiera 5. Eventi attivabili dalle modifiche dellutente 6. Eventi legati al "fuoco" 7. Eventi attivabili dal caricamento degli oggetti 8. Eventi attivabili dai movimenti delle finestre 9. Eventi legati a particolari bottoni 10. Altri e nuovi tipi di eventi Nei primi due gruppi sono inseriti quegli eventi tipici del mouse o della tastiera, come il movimento o la pressione, negli altri sono inseriti gli eventi strettamente correlati agli oggetti. Il raggruppamento si richiede perché in tante trattazioni gli eventi sono descritti singolarmente è cio, anche se avvantaggia lanalisi, sgretola la sintesi: che invece è utilissima nelle situazioni più intricate. Prima della descrizione anticipiamo che tutti gli eventi hanno la propria sintassi composta sintatticamente dal loro nome col prefisso on, ad esempio
levento click è richiamato con lhandler onclick. Io darò una sintassi fatta di maiuscole e minuscole per evidenziare bene levento, ma occorre tener presente che in Netscape 3.0 levento è parte di javascript per cui deve essere scritto tutto in minuscolo. A questo gruppo si possono ricondurre i seguenti eventi: 1. onClick: attivato quando si clicca su un oggetto; 2. onDblClick: attivato con un doppio click; 3. onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse; 4. onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato; 5. onContextMenu: attivato quando si clicca il tasto destro del mouse aprendo il ContextMenu. Gli eventi onMouseDown e onMouseUp sono attivati dai due movimenti del tasto sinistro del mouse, il primo quando si preme giù il tasto e il secondo quando si solleva dopo il click. Il doppio click è un evento che ingloba gli altri e, per la precisione, attiva in successione onmousedown, onmouseup, onclick. Valore true e
false Levento onClick con JavaScript 1.1 ha aggiunto la possibilità di ricevere un valore true e false tramite il quale può essere attivato o meno. Tale possibilità è valida anche per gli eventi onMouseDown e onMouseUp e per onContextMenu. Esempio: cliccate qui, se rispondete OK il link si attiva se rispondete Annulla il link non si attiva. ecco il codice: <A HREF="link.htm" onclick="return(confirm(Sei sicuro))"> Il vantaggio è che levento onClick si attiva prima del tag associato per cui se è un link, questo è caricato dopo il completamento dellistruzione associata. In tal modo questa caratteristica si può applicare per i radio o i checkbox per non selezionarli, e per i buttoni, compresi quelli Submit e Reset, per considerarli non premuti, tranne che per un piccolo bug che rende non funionzbile lopzione per il Reset su alcune piattaforme. Interessante levento onContextMenu, anche perché spesso si chiede di disabilitare il tasto destro del mouse,
ma funziona solo con Internet Explorer 5.0 A questo gruppo si possono ricondurre i seguenti eventi: 1. onMouseOver: attivato quando il mouse si muove su un oggetto; 2. onMouseOut: attivato quando il mouse si sposta da un oggetto; 3. onMouseMove: si muove il puntatore del mouse, ma poiché questo evento ricorre spesso (lutilizzo del mouse è frequente), non è disponibile per default, ma solo abbinato con la cattura degli eventi, che si spiegherà in seguito. Gli eventi onMouseOver e onMouseOut sono complenmentari in quanto il primo è attivato nel momento in cui il puntatore è posto nellarea delloggetto il cui tag contiene levento e il secondo quando ne esce. A questo gruppo si possono ricondurre i seguenti eventi: 1. onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa; 2. onMove: attivato quando un oggetto muove una finestra o un frame; 3. onDragStart: evento attivato appena lutente inizia a trascinare un
oggetto; 4. onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella finestra dello stesso browser o anche di un altro o anche sul Desktop; 5. onDragEnter: attivato appena lutente trascina un oggetto su un obiettivo valido dello stesso o di un altro browser; 6. onDragOver: attivato quando lutente lutente trascina un oggetto su un obiettivo valido ad ospitarlo, ed è simile allevento precedente, ma viene attivato dopo quello; 7. onDragLeave: attivato quando lutente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato; 8. onDragEnd: attivato quando lutente rilascia loggetto al termine del trascinamento 9. onDrop: attivato quando il mouse si alza il tasto del mouse in seguito ad unoperazione di trascinamento; A questo gruppo si possono ricondurre i seguenti eventi: 1. onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto; 2. onKeyDown: attivato quando viene premuto il tasto; 3.
onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato; 4. onHelp: attivato quando il mouse schiacchia il tasto F1; Lultimo evento è stato naturalmente inserito in questo settore, anche se A questo gruppo si possono ricondurre i seguenti eventi: 1. onChange: attivato quando il contenuto di un campo di un form o modulo è modificato o non è più selezionato; 2. onCellChange: attivato quando si modifica un elemento in un Database, per questa sua caratteristica ha un uso non propriamente legato a Javascript; 3. onPropertyChange: evento attivato quando cambia la proprietà di un elemento; 4. onReadyStateChange: evento attivato quando lo stato del caricamento di un elemento cambia, levento è utile, ad esempio, per verificare che un elemento sia stato caricato. Importante è dire qualcosa in più su onChange: levento assomiglia molto ad onBlur, ma verifica anche che lelemento che lo richiama sia stato modificato. Questo evento, infatti, è attivato quando
viene selezionato un altro elemento da una lista o quando si modifica un campo di testo, per cui oltre allattivazione, occorre anche operare unazione. A questo gruppo si possono ricondurre i seguenti eventi: 1. onFocus: Questo handler è lopposto di onBlur per cui si attiva quando lutente entra in un campo; 2. onBlur: attivato quando il puntatore del mouse o il cursore esce dalla finestra corrente utilizzando il mouse o il carattere TAB. Applicato ai moduli, invece, tale handler si avvia se si esce dal campo il cui tag contiene il controllo; 3. onSelect: attivabile quando si seleziona del testo allinterno di una casella di testo sia col mouse sia tenendo premuto SHIFT e selezionando con i tasti Freccia; 4. onSelectStart: si attiva quando si inizia a selezionare un evento; 5. onbeforeEditFocus: si attiva con un doppio click o con un clicK su un oggetto che ha già la selezione, quando questo è in DesignMode; 6. onLoseCapture: si attiva quando un oggetto perde la cattura del mouse Gli
ultimi tre eventi sono particolarità di Internet Explorer 5.0 e richiedono ulteriori conoscenze per poter essere adoperati. A questo gruppo si possono ricondurre i seguenti eventi: 1. onLoad: Questo handler funziona nel caricamento di oggetti, per lo più finestre e immagini; 2. onUnload: è lopposto del precedente e funziona quando si lascia una finestra per caricarne unaltra o anche per ricaricare la stessa (col tasto refresh); 3. onAbort: funziona quando lutente ferma il caricamento di un oggetto cliccando su un altro link o premendo il tasto stop del browser; 4. onError: si attiva quando il caricamento di un oggetto causa un errore, ma solo se questo è dovuto ad un errore di sintassi del codice e non del browser così funziona su un link errato di unimmagine della pagina, ma non su un link errato di caricamento di una pagina intera; 5. onBeforeUnload: questo handler funziona allo stesso modo di onUnload ma si carica in un momento prima; 6. onStop: questo handler funziona quando
si ferma il caricamento della pagina con il tasto stop del browser e dovrebbe funzionare anche allo stesso modo di onUnload caricandosi prima di questo ma dopo onBeforeUnload. Gli ultimi due eventi sono particolarità di Internet Explorer 5.0 e richiedono ulteriori conoscenze per poter essere adoperati. onLoad Questo evento se ben utilizzato potrebbe simulare un effetto streaming mediante caricamento di gif o jpeg. Immaginiamo di avere a disposizione una serie di jpeg da animare Con questo evento possiamo sincronizzare la visualizzazione delle varie figure alla fine del caricamento della precedente mediante uno script del genere: <script> var whichImage=0 var maxImages=5 function changeAnimation(theImage) { ++whichImage if (whichImage <= maxImages) { var imageName="!anim" + whichImage + ".gif" theImage.src=imageName } else { whichImage=-1 return } } </script> <img name="changingAnimation" src="!anim0.gif" border=0
align="top" onLoad="changeAnimation(this)"> onError Una particolare menzione merita levento onError per la sua grande utilità ma per lo scarso utilizzo che se ne fa. Questo evento può: 1. sopprimere i messaggi di errori che il debugger mostrerebbe (messaggi discreti in Netscape, ma antiestetici in Explorer) il tutto mediante il codice di esempio <img src="corrupt.gif" onError="null"> 2. se il codice è espresso nella sezione HEAD diventa attivo per tutta la finestra e per tutti gli eventi di errore attivati dagli oggetti ivi contenuti <script>window.onerror=null</script> tuttavia un evento onError associato alla singola immagine o oggetto cattura levento per questa immagine o oggetto a discapito di quello generale 3. levento può fare di più: può indicare il tipo di errore, la riga e lURL che lo hanno causato e indicarlo in una finestra o memorizzarlo in un array. Di seguito indico listruttivo esempio mostrato sul
Reference di Netscape che serve a costruire un debugger personalizzato. Nello script ci sono degli errori e cliccando sul primo bottone e poi sul secondo si possono individuare: <script> window.onerror = myOnError msgArray = new Array() urlArray = new Array() lnoArray = new Array() function myOnError(msg, url, lno) { msgArray[msgArray.length] = msg urlArray[urlArray.length] = url lnoArray[lnoArray.length] = lno return true } function displayErrors() { win2=window.open(,window2,scrollbars=yes) win2.documentwriteln(<B>Error Report</B> <P>) for (var i=0; i < msgArray.length; i++) { win2.documentwriteln(<B>Error in file:</B> + urlArray[i] + <BR> ) win2.documentwriteln(<B>Line number:</B> + lnoArray[i] + <BR>) win2.documentwriteln(<B>Message:</B> + msgArray[i] + <P>) } win2.documentclose() } </script> </p> <form> <input type="button" value="Questo bottone ha un errore
di sintassi" onClick="alert(unterminated string)" name="button"> <p> <input type="button" value="Visualizza lerrore" onClick="displayErrors()" name="button2"> </form> 1. onResize: Questo handler si attiva quando lutente rimpicciolisce o ingrandisce una finestra o un frame o, in caso particolare per Explorer, un oggetto a cui siano stati fissati laltezza e la larghezza o anche la posizione, come ad esempio un layer; 2. onScroll: attivato quando si effettua lo scrolling della pagina sia col mouse con i tasti PGUP e PGDOWN o anche con il metodo doScroll A questo gruppo si possono ricondurre i seguenti eventi: 1. onSubmit: Questo handler è attivato dal click su tasto di Invio di un form; 2. onReset: questo handler è attivato dal click su tasto di Annulla di un form LEZIONE 4 – Metodi & Dom Un altro concetto importante è che ognuno degli oggetti del browser ha i propri metodi. Questo equivale
a dire che ognuno degli oggetti del browser ha a disposizione determinate azioni e non altre. Facciamo subito un altro esempio, per rendere più chiaro il concetto. Esiste loggetto history che contiene la storia della navigazione dellutente per quel che riguarda una finestra. Tramite il metodo back() delloggetto history è possibile mandare indietro lutente alla pagina da cui è arrivato (ovviamente lutente deve essere arrivato qui a partire da unaltra pagina, altrimenti - se la richiesta è diretta - non cè pagina verso cui tornare indietro): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <A HREF="#" onClick="history.back()">torna indietro</A> </body> </html> È evidente che il metodo back() è proprio delloggetto history, e non (per esempio) del campo del form che abbiamo visto prima. Infatti se adattate lesempio
relativo al campo del form e scrivete: onLoad="document.mioFormtestoProvaback()" non potrete che ottenere un errore. E inoltre anche se scrivete: <A HREF="#" onClick="alert(history.value)">torna indietro</A> otterrete un valore indefinito perché non state interrogando correttamente lelemento history, che è un array. Ma anche se lo interrogaste nella maniera giusta, cioè così (esamineremo in seguito questo tipo di sintassi): <SCRIPT TYPE="text/javascript"> for (n=0;n<history.lenght;n++) { document.writeln(history[n]value); } </SCRIPT> non otterreste comunque alcun valore, perché - per motivi di sicurezza - non è possibile leggere il valore della history di un documento (è possibile con Netscape 4, ma solo con determinati privilegi). Ogni oggetto ha dunque i propri, personalissimi metodi e va interrogato nella giusta maniera. Per ora non analizzeremo tutti i vari elementi che compongono il browser, i loro
metodi, e le loro reciproche relazioni, anche perché - come vedremo nella prossima lezione - differenti browser (Netscape e Internet Explorer) e differenti versioni dello stesso browser (Netscape 4 e Netscape 6) hanno sviluppato modelli diversi per concepire le relazioni reciproche di questi oggetti e metodi. LEZIONE 5 – Commenti Commenti I commenti sono parti del programma che non vengono lette dallinterprete e che, quindi, servono a spiegare e a chiarire. Questi sono racchiusi tra barre e asterischi come nellesempio sotto riportato: /*commento/ Il commento può essere posto su più righe o su una riga singola, mentre non è accettato dallinterprete il commento annidato. Un altro tipo di commento è la doppia barra, presa a prestito dal linguaggio C, ma è valida solo per commenti posti su una singola riga, anche se non la occupano per intero: int x: //commento I commenti Javascript non possono essere inseriti al di fuori dei tag che individuano lo script, altrimenti HTML li
considererà come parte del testo, e viceversa non si possono utilizzare i tag di commenti HTML allinterno dello script. Lunico commento ammissibile è quello che consente di racchiudere tutti gli script nei tag di commento di HTML, facendoli aprire dopo il tag di script e chiudere prima della chiusura del tag: <script language="JavaScript"> <!-alert("Welcome!"); //--> </script> in tal modo si maschera il codice javascript ai vecchi browser che non lo leggono e si evita che lHTML lo possa considerare come testo e, quindi, visualizzare. Tuttavia occorre tenere presente due accortezze: • alcuni browser non riconoscono il commento e visualizzano lo script; • alcuni browser, soprattutto Netscape nelle versioni più vecchie, hanno difficoltà a gestire il segno > di fine commento, per cui conviene posizionare anche un commento Javascript (//) alla sequenza -->. Spazi bianchi Javascript non bada agli spazi bianchi, tranne che per quelli
che si trovano nelle stringhe, per cui si possono omettere o anche aumentare. Il loro uso, tuttavia, con lidentazione aumenta la leggibilità del programma per cui sono vivamente consigliati. Apici Importanti sono gli apici, sia singoli ( ) che doppi (" "). I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli, a racchiudere anche le stringhe (sequenze di caratteri), per cui occorre fare attenzione ad annidare due stringhe racchiuse da apici simili, come ad utilizzare i doppi apici per le stringhe se questi già servono a racchiudere codice Javascript. Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della stringa stessa, si fanno precedere da una barra rovesciata (). Uno degli errori che si commette di frequente, è proprio quello di non utilizzare correttamente gli apici. Ad esempio il comando: alert(Questo sito e in costruzione) sembra essere scritto correttamente, ma se eseguito, il
browser ne bloccherà lesecuzione. Netscape mostrerà questo errore: missing ) after argument list. alert(Questo sito e in costruzione) più laconico Explorer, che indica solo: Previsto). Si proseguirà oltre, ma lerrore non sarà corretto finché non si scriverà alert(Questo sito e in costruzione) fdsgfdsgvfdgbfds I nomi dei dati sono chiamati identificatori e devono sottostare ad alcune regole: 1. possono contenere solo lettere, numeri e trattino di sottolineatura, per cui sono esclusi gli spazi bianchi; 2. il primo carattere deve essere sempre una lettera E utilizzabile come primo carattere anche il trattino di sottolineatura, ma il compilatore tratta quel nome in modo particolare per cui se ne sconsiglia luso; 3. Javascript è case sensitive per cui tratta diversamente le lettere in maiuscolo e in minuscolo, per tale motivo è convenzione utilizzare liniziale maiuscola per i nomi di costanti e quella minuscola per le variabili; 4. non si possono utilizzare i nomi che rientrano
nelle parole chiave Luso diffuso è di utilizzare nomi lunghi per identificare meglio il dato, adoperando queste convenzioni: 1. adoperare il trattino di sottolineatura per definire meglio il dato, così il nome tasso interesse identifica più di quanto possa fare il semplice nome x; 2. accanto allutilizzo del trattino di sottolineatura, si usa anche la notazione a cammello per cui si rende maiuscola una lettera allinterno del nome di una variabile, proprio per identificarla meglio (ad esempio TassoInteresse). LEZIONE 6 – Parole Riservate In Javascript ci sono delle parole chiave che non si possono utilizzare come identificatori di dati, eccone lelenco: abstract boolean break byte case catch char class const* continue default do if package throw double implements private throws else import protected transient extends in public true false instanceof return try final int short var* finally interface static void float long super while for native switch with function new
synchronized goto null this Le parole chieve riservate, ma correntemente non utilizzate da Javascript sono precedute dal carattere *. LEZIONE 7 – Gli Oggetti Quando programmate con JavaScript dovete immaginare che la pagina HTML sia formata da vari elementi in varia relazione fra loro. Il browser infatti (con allinterno il documento HTML) può essere infatti "sezionato" in vari elementi: • prima di tutto cè il browser stesso (loggetto navigator) • poi la finestra che contiene tutto quanto (loggetto window) • eventuali frames (loggetto window.frames) • il documento HTML vero e proprio (document) • i moduli per raccogliere linput dellutente (document.forms["nomeForm"]) • le immagini (document.images["nomeImmagine"]) • i cookie (document.cookie["nomeCookie"]) • i livelli • le applet (document.applets["nomeApplet"]) • la barra degli indirizzi (location) • la barra di stato, nella parte
bassa del browser (status) e via di seguito. Tutti gli oggetti che vediamo nel browser sono in relazione gerarchica fra di loro (ci sono elementi-padre ed elementi-figli) e tramite JavaScript - utilizzando la corretta sintassi - è possibile interrogare questi elementi, leggerne le proprietà e in taluni casi anche cambiare il valore di queste proprietà. Facciamo un esempio. Prendiamo il seguente codice HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <FORM NAME="mioForm"> <input type="text" name="testoProva" value="paradiclorobenzoro"> </FORM> </body> </html> La pagina contiene un campo di input text (che in genere serve allutente per scrivere dei dati). Se volessi conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello a oggetti e le proprietà utilizzate da
JavaScript, non avrei che da scrivere: document.mioFormtestoProvavaluelength che è un modo sintetico di scrivere: window.documentforms[mioForm]testoProvavaluelength La riga che abbiamo scritto precedentemente significa: "prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form presenti nel documento e facciamo riferimento a quello che si chiama mioForm, consideriamo poi il campo chiamato testoProva. Bene Una volta individuato testoProva, prendiamo il valore di questo campo e infine ricaviamo la lunghezza del valore di questo campo" Infatti se scriviamo un codice come questo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body onLoad="alert(document.mioFormtestoProvavaluelength)"> <FORM NAME="mioForm"> <input type="text" name="testoProva"
value="paradiclorobenzoro"> </FORM> </body> </html> al caricamento della pagina vedremo un messaggio che indica la lunghezza di "paradiclorobenzoro". Non vi preoccupate se lesempio adesso non vi è del tutto chiaro: esamineremo subito nelle prossime pagine la sintassi introdotta nelle righe di codice scritte pocanzi (vedremo subito cosa vuol dire "onLoad" e cosa vuol dire "alert"). Limportante è comprendere il concetto, che cioè una pagina web viene scomposta da JavaScript in un modello ad oggetti (ognuno con le sue proprietà) in relazione reciproca. Ovviamente la sintassi per richiamare gli oggetti non è dovuta al nostro estro, ma - visto che JavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in maniera rigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio, document.testoProvalengthmioFormvalue senza incorrere in errori) LEZIONE 8 – Le Finestre Di
Dialogo JavaScript è in grado di generare tre differenti tiplogie di "finestre implicite" (dette anche "finestre incorporate", "finestre modali", o "finestre di dialogo"), che avremo modo di utilizzare più volte nei nostri script (soprattutto lalert). Alert Abbiamo già incontrato lalert diverse volte nel corso delle nostre lezioni e si tratta senzaltro della finestra che vi capiterà di utilizzare più spesso: lalert visualizza un avvertimento, un messaggio di errore che blocca qualsiasi azione dellutente finché egli non dà il suo benestare cliccando sul bottone. La sintassi è: alert("messaggio"); Il contenuto dellalert deve essere sempre una stringa (cioè una sequenza di caratteri), il che vuol dire che deve essere racchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di convertire in automatico in un valore letterale (come nel caso dei numeri). Come per il document.write(), se dovete usare
delle virgolette allinterno del messaggio è bene che usiate i caratteri di escape (cioè il back-slash), onde evitare gli errori. Ad esempio: alert("Marco disse "Ciao Mondo!""); Ecco un esempio di alert: <A HREF="http://www.htmlit" onClick="alert(Stai per uscire);" TARGET=" blank">testo link</a> testo link Come si può vedere, finché lutente non clicca su "ok", la pagina non va verso il link indicato. Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di "chiudere prematuramente" il contenuto dellevento onClick. Confirm È una finestra che pone una domanda e chiede conferma dando la possibilità di scegliere tra due opzioni ("ok" e "annulla"). La sintassi è: confirm("messaggio"); Mentre lalert concede una sola possibilità di scelta ("ok"), il confirm dà la possibilità di scegliere tra due opzioni: <A
HREF="http://www.htmlit" onClick="confirm(Sei sicuro di voler uscire dalla pagina?);" TARGET=" blank">testo link</a> testo link Prompt È una finestra che pone una domanda e consente allutente di dare la risposta che vuole. Può avere anche un valore di risposta predefinito. La sintassi è: prompt("domanda","risposta predefinita"); la risposta predefinita è facoltativa. Ad esempio: <body onLoad="prompt(Come ti chiami?);"> o anche: <body onLoad="prompt(Come ti chiami?,inserisci qui il tuo nome);"> Per visualizzare il nome dellutente nella pagina dovremo poi "catturarlo" in qualche modo. Vedremo più avanti come fare. Nota a margine Nellottica in cui abbiamo affrontato il corso finora è bene specificare che in realtà le finestre modali sono metodi delloggetto "window". Quindi la sintassi estesa per visualizzare le finestre modali dovrebbe essere:
window.alert("messaggio"); window.confirm("messaggio"); window.prompt("domanda","risposta predefinita"); LEZIONE 9 – Le Finestre Personalizzabili Le finestre che abbiamo visto nella lezione precedente sono finestre di sistema. Hanno una grafica minimale e pre-impostata, che di solito va scarsamente daccordo con un sito dalla grafica accattivante in cui viene studiato ogni minimo particolare. Con JavaScript possiamo creare delle finestre personalizzate che si adattino alle nostre esigenze. La sintassi è questa: window.open(percorso,nome finestra,caratteristiche separate da virgola); Percorso Indica un percorso (relativo o assoluto) di un file html da inserire allinterno della finestra Nome finestra Indica il nome della finestra che abbiamo creato (opzionale) Caratteristiche separate da virgola Specifica la forma, la dimensione e la posizione della finestra, possiamo anche far sì che la finestra non sia ridimensionale, o che non ci
siano le barre degli strumenti e le barre di scorrimento. Abbiamo quindi la possibilità di specificare tre diversi parametri che ci permettono di creare una finestra che si adatti alle nostre esigenze. Il fatto che ciascun parametro sia indicato tra virgolette (semplici o doppie, non importa) ci dice inoltre che ci troviamo di fronte a delle stringhe (sequenze di caratteri). Ognuno di questi parametri può essere lasciato vuoto, ma la sua presenza va comunque indicata. Così: window.open(,,); La sintassi qui sopra apre una finestra vuota. Vediamo un esempio concreto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <SCRIPT TYPE="text/javascript"> window.open(http://wwwhtmlit,miaFinestra,); </SCRIPT> </body> </html> Come abbiamo visto nel corso delle lezioni precedenti possiamo
applicare anche la sintassi JavaScript agli eventi. Ad esempio questa sintassi apre unulteriore finestra secondaria al click del mouse. Abbiamo dunque realizzato la possibilità di cambiare due link con un solo click: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <A HREF="http://pro.htmlit" onClick="window.open(http://wwwhtmlit,miaFinestra,);">due link on un solo click</A> </body> </html> Ovviamente è possibile associare la capacità di aprire finestre secondarie anche ad altri eventi. Ad esempio con: <BODY onLoad="window.open(http://wwwhtmlit,miaFinestra,);"> la finestra secondaria si apre allapertura della pagina. E con: <BODY onUnLoad="window.open(http://wwwhtmlit,miaFinestra,);"> la finestra si apre invece alla chiusura della
pagina. È bene però non esagerare con lapertura selvaggia di finestre secondarie (le cosiddette "pop-up"), perché gli utenti di solito non le amano molto e le chiudono appena possibile. Inoltre esistono alcuni software che consentono allutente di impedire che i siti web aprano delle finestre secondarie nelle pagine in cui essi stanno navigando. Per quel che riguarda il secondo parametro (il nome della finestra) è da dire che, se il metodo window.open viene richiamato due volte allinterno della stessa pagina ed esiste già una finestra con lo stesso nome, non vengono create due differenti finestre, ma viene ricaricato il contenuto della finestra già esistente (e se la seconda finestra ha caratteristiche diverse dalla prima, le nuove caratteristiche vengono ignorate, in quanto la finestra è già stata "formata"). Inoltre se la finestra ha un nome, questo nome può essere usato come valore dellattributo "target" nei tag "A" e "FORM".
È quindi possibile ricaricare il contenuto di una finestra secondaria, semplicemente specificando il "target" del link nella finestra principale. Un esempio chiarirà tutto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <A HREF="#" onClick="window.open(http://wwwhtmlit,finestra,);">prima finestra</A><BR> <A HREF="#" onClick="window.open(http://prohtmlit,finestra,);">seconda finestra</A><BR> <A HREF="http://freephp.htmlit" target="finestra">ricarica il contenuto</A><BR> </body> </html> LEZIONE 10 – Le Finestre PersonalizzabiliCaratteristiche Finora abbiamo esaminato la seguente sintassi: window.open(percorso,nome finestra,valori separati da virgola); in cui i primi due
parametri ci permettono di specificare il percorso del file html e il nome della finestra. Abbiamo detto che il terzo parametro (lultimo della lista) ci permette di creare una finestra "come vogliamo noi". Per farlo è sufficiente impostare una serie di caratteristiche separate dalla virgola (ognuna di queste variabili si può inserire oppure omettere e non comparirà). Ad esempio: La sintassi è questa: window.open(http://wwwhtmlit,miaFinestra,width=300,height=300 ,toolbar=yes, location=no,status=yes,menubar=yes,scrollbars=no,resizable=no); NB la riga precedente non va a capo Lesempio crea una finestra di 300 x 300 con la barra degli strumenti, la barra del menu, la barra di stato (quella in basso), ma senza la barra degli indirizzi; la finestra non può essere inoltre ridimensionata. Vediamo nel dettaglio quali sono le principali caratteristiche che possono essere attribuite alla finestra: Caratteristica Valore Spiegazione La larghezza della finestra in pixel Esempio
width numerico width=400 height numerico Laltezza della finestra in pixel height=200 left numerico La distanza dalla sinistra del monitor left=300 top numerico La distanza dal lato superiore del monitor top=350 resizable yes / no Indica se la finestra può essere ridimensionata o no resizable=no fullscreen yes / no Indica se la finestra va aperta fullscreen=no a tutto schermo channelmode Indica se la finestra deve yes / no essere aperta "in modalità canale" (solo per IE) menubar yes / no toolbar La barra degli strumenti del yes / no browser (con i pulsanti "indietro", "avanti") location yes / no La barra degli indirizzi del browser location=no scrollbars yes / no Le barre di scorrimento laterali scrollbars=no status yes / no La barra di stato (quella in channelmode=no La barra del menu (quella con menubar=no scritto "File", "Modifica", ecc.) toolbar=no status=no basso) Come si può intuire
dagli esempi, la sintassi deve avere la forma: caratteristica=[valore] inoltre, come detto più volte, le varie caratteristiche devono essere separate dalla virgola. Ad esempio con: <A HREF="javascript:window.open(http://wwwhtmlit,,fullscreen=yes);">apri a tutto schermo</A> Si apre una finestra a schermo intero (che può essere chiusa dallutente solo utilizzando la combinazione di tasti Ctrl + W o ALT + F4). Invece con: window.open(sponsorhtm, , width=220,height=220,scrollbars=no); si apre una finestra analoga alla "finestra dello sponsor di HTML.it" Per evitare ogni volta di ripetere tutte quante le caratteristiche delle finestre possiamo inoltre tener presente due scorciatoie. 1. Quando una caratteristica viene omessa il suo valore: o viene impostato a "0" nel caso di left e top o viene impostato sullintera grandezza dello schermo nel caso di width e left o viene automaticamrnte impostato su "no" in tutti gli altri casi 2.
Quando una caratteristica viene impostata su "yes" o la forma "caratteristica=yes" può anche essere scritta semplicemente con "caratteristica". Ad esempio: window.open(http://wwwhtmlit,,fullscreen);" Quindi al posto di: window.open(sponsorhtm, , width=220,height=220,left=0,top=0,resizable=no,menubar=yes,toolbar=yes, scrollbars=no,locations=no,status=no); NB La riga precedente non va a capo. basterà scrivere: window.open(sponsorhtm, , width=300,height=300,menubar,toolbar); GRUPPO SUPPORTO Basi Di Dati Laboratorio Anno 2004/2005 Prof G. Ghelli
<FORM> Nome e cognome *<BR> <input type=text name="nome" size=40><BR><BR> E-mail *<BR> <input type=text name="mail" size=30><BR><BR> Telefono<BR> <input type=text name="telefono" size=20><BR><BR> <INPUT TYPE="SUBMIT" VALUE="Spedisci"></INPUT> </FORM> Impostato in questo modo il form è certamente operativo ma se spedito senza un campo obbligatorio compilato non dà alcun messaggio di avviso col rischio, già indicato in precedenza, di ricevere informazioni parziali o peggio inservibili. Javascript interviene in aiuto con una sintassi semplice e facilmente configurabile. Il codice va inserito in due fasi successive. Innanzitutto va impostato il codice all’interno dei tag <HEAD> del documento: <script> function checkrequired(which){ var pass=true if (document.images){ for (i=0;i<which.length;i++){ var tempobj=which.elements[i]
if (tempobj.namesubstring(0,8)=="required"){ if (((tempobj.type=="text"||tempobjtype=="textarea")&&tempobjvalue==)||(tempobjt ype.toString()charAt(0)=="s"&&tempobjselectedIndex==-1)){ pass=false break } } } } if (!pass){ alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite. Clicca su OK e verifica lerrore") return false } else return true } </script> La riga di codice: alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite Clicca su OK e verifica lerrore") imposta il messaggio che il browser dà in risposta quando verifica lassenza di alcuni campi obbligatori. Ovviamente il messaggio può essere modificato secondo le proprie esigenze Il resto del codice esaminato non va oltremodo modificato. La funzione checkrequired è quella che regge l’interno struttura dello script e stabilisce che i campi controllabili siano text,
textarea e select. Conclusa l’impostazione del codice Javascript è necessario apportare alcune modifiche ai singoli campi del form visto in precedenza. Per prima cosa va inserito il riferimento alla funzione checkrequired nell’apertura del form: <FORM onSubmit="return checkrequired(this)"> Successivamente è necessario anteporre ai nomi dei diversi campi che si vogliono obbligatori il termine "required". Per esempio il nome del primo campo è "nome", e per essere impostato come obbligatorio deve trasformarsi in "requirednome". Così per il campo "mail" che diventa "requiredemail". L’unico campo non modifato è "telefono", che come scritto in precedenza è facoltativo. Apportate le dovute modifiche, il form visto in precedenza assume la seguente struttura (fermo restando il codice inserito tra i tag <HEAD>): <FORM onSubmit="return checkrequired(this)"> Nome e cognome *<BR>
<input type=text name="requirednome" size=40><BR><BR> E-mail *<BR> <input type=text name="requiredmail" size=30><BR><BR> Telefono<BR> <input type=text name="telefono" size=20><BR><BR> <INPUT TYPE="SUBMIT" VALUE="Spedisci"></input> </FORM> Compilato il form e premuto il tasto li tasto "spedisci" non rimane altro che verificare gli effetti dello script. LEZIONE 2 - Gli Eventi Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli eventi. Un evento è – molto semplicemente – qualcosa che accade nel documento. Anche nella vita quotidiana un evento è qualcosa che accade: ad esempio una tazzina di caffè che cade e si rompe. Il documento dunque è lambiente entro cui vengono realizzate delle "azioni", in parte dovute alla volontà dellutente (passaggio del mouse su un link, click su qualcosa.),
altre volte dovute alla situazione contingente (la pagina è stata caricata) Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguire non appena lutente esegue una data azione: quando clicca su un bottone di un form possiamo controllare che i dati siano nel formato giusto; quando passa su un determinato link possiamo scambiare due immagini, eccetera. Gli eventi (le possibili cose che possono capitare allinterno della pagina) sono davvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilità messe a disposizione degli sviluppatori.Vediamo quali sono quegli eventi che vi capiterà più spesso di incontrare Come si può vedere dagli esempi il modo corretto per sfruttare gli eventi è quello di inserire levento allinterno della sintassi dellelemento HTML e racchiudere il codice JavaScript tra virgolette. Secondo questo modello: <ELEMENTO nomeEvento="codice JavaScript"> Abbiamo già incontrato in
precedenza l "alert" è una finestra di dialogo che avverte di qualcosa. Negli esempi qui sotto, quando viene eseguita una determinata azione, viene mostrato un alert con scritto "ciao". Si applica a Evento onLoad (elementi maggiormenti usati) BODY IMAGE Descrizione esempio "al <BODY caricamento." onLoad="alert(ciao);"> Levento scatta <IMG quanto SRC="miaImmagine.jpg" loggetto onLoad="alert(ciao);"> risulta completamente caricato. onUnLoad BODY onMouseOver A AREA INPUT (submit, reset,button, checkbox, radio,option) Applicato al <BODY BODY si onUnLoad="alert(ciao);"> verifica quando il browser "scarica" il documento. Cioè alla chiusura del documento. "al passaggio del mouse". Si verifica quando lutente passa il mouse su unarea sensibile (link o mappa). <A onMouseOver="alert(ciao);" HREF="pagina.html"> Con IE 5+ questo evento può essere
associato anche a TD, TR, eccetera onMouseOut A AREA INPUT (vedi sopra) "quando il mouse esce". Si verifica quando lutente con il mouse esce al di fuori dellarea sensibile (link o mappa). <A onMouseOut="alert(ciao);" HREF="pagina.html"> Con IE 5+ questo evento può essere associato anche a TD, TR, eccetera onClick A AREA INPUT onKeyPress A AREA INPUT "al click del mouse." <A onClick="alert(ciao);" HREF="pagina.html"> Avviene quando lutente clicca sullelemento Si verifica <TEXTAREA quando si è onKeyPress="alert(ciao);"> allinterno </TEXTAREA> dellelemento e viene premuto DIV un tasto della tastiera. onChange INPUT Si verifica <SELECT TYPE="SELECT" quando onChange="alert(ciao);"> lelemento <OPTION>uno subisce un <OPTION>due cambiamento a <OPTION>tre seguito </SELECT> dellazione dellutente. OnSubmit FORM Quando viene <FORM
NAME="mioForm" eseguita linvio ACTION="http://." del form onSubmit="alert(ciao);"> (tramite bottone o tramite invio da tastiera). onFocus A "quando <BODY lelemento ha il onFocus="alert(ciao);"> focus." (Provate la sintassi di questo Entra in azione esempio con altre finestre non appena del browser aperte, e lelemento è provate a passare dalla attivo. vostra pagina alle altre finestre e viceversa) INPUT BODY onBlur A INPUT BODY "quando <BODY lelemento non onBlur="alert(ciao);"> è più attivo." Viene richiamato quando lelemnto smette di essere attivo. Un discorso a parte merita levento onFocus, che spesso suscita dell perplessità. "onFocus" significa "quando lelemento è focalizzato": significa che in quel momento è attivo quel determinato elemento della pagina HTML. Nel caso dei link e delle mappe vi potete accorgere bene di quando lelemento ha il focus: il link o la
mappa ha infatti una piccola linea tratteggiata che lo circonda (nel caso del link, se lelemento è focalizzato, si trova nello stato "ACTIVE"). Anche nel caso delle finestre del browser è facile accorgersi di quando un elemento ha il focus: con Windows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto è azzurra (o del colore definito dallutente), in caso contrario è grigia. onBlur semplicemente è il contrario di onFocus: quando lelemento che aveva il focus lo perde (perché lattenzione dellutente si è concentrata su altro) viene azionato levento onBlur. È da notare che a uno stesso elemento possono essere attribuiti più eventi Ad esempio: <A onMouseOver="alert(passaggio sul link);" onMouseOut="alert(uscita dal link);" onClick="alert(click sul link);" HREF=”pagina.html”>testo del link </A> (Certo lalert non è lideale per far interagire i tre eventi fra loro, ma limportante è aver
compreso il concetto che allo stesso elemento possono essere collegati eventi diversi, ciascuno con il proprio codice da eseguire). Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli eventi più noti e più usati. Ogni elemento dellHTML ha a disposizione determinati eventi e non altri. Per esempio, un livello in Internet Explorer 6 è dotato di tutti i seguenti eventi (come si può vedere non cè levento onLoad, né onSubmit, perché riferiti a un livello non avrebbero alcun senso): onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove, onselectstart, oncontrolselect, onkeypress, oncut, onrowenter, onmousedown, onpaste, onreadystatechange, onbeforedeactivate, onkeydown, onlosecapture, ondrag, ondragstart, oncellchange, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, onkeyup, onresizestart, onmouseover, onmouseleave,
onmoveend, onresize, ondrop, onpage, onrowsdelete, onfocusout, ondatasetchanged, ondeactivate, onpropertychange, ondragover, onhelp, ondragend, onbeforeeditfocus, onfocus, onscroll, onbeforeactivate, onbeforecut, onclick, oncopy, onfocusin, onbeforeupdate, ondataavailable, onmovestart, onmouseout, onmouseenter, onlayoutcomplete, onafterupdate, ondragleave Chi fosse interessato a una classificazione più esauriente degli eventi può consultare il Corso JavaScript LEZIONE 3 - Ancora Eventi Gli eventi sono utilizzati per richiamare delle istruzioni. Infatti lo script va eseguito in maniera sequenziale, ma per fare in modo da inserire la dinamicità e linterattività occorre che questo resti caricato in memoria e venga attivato o richiamato solo quando si verificano particolari situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Il problema della conciliazione con le funzioni sta nel fatto che ad un evento può essere associata una sola istruzione, ma il più
delle volte lassociazione è fatta con un blocco di istruzioni e, quindi, con le funzioni che prendono il nome di handler o gestori di eventi. Gli eventi, per poter interfacciare HTML con Javascript, non vengono definiti nel tag <SCRIPT> (tranne che in qualche caso), ma sono inseriti allinterno dei tag HTML: il browser compatibile con Javascript incontrando un evento lo interpreta e lo attiva. Ecco un esempio: <A HREF="pagina.html" onclick="alert(ciao)">Link</A> notiamo come levento onClick sia inserito nel Tag come se fosse uno specificatore dello stesso. Attivare gli eventi allinterno degli script Gli eventi, tuttavia, si possono anche attivare direttamente allinterno degli Script, richiamabili come se fossero una proprietà delloggetto. La sintassi è: Oggetto.evento=handler; Per chiarire questo concetto che è utilissimo, ma raramente vedo applicato, posso raccontare un aneddoto: agli inizi del mio uso con Javascript cercavo uno script che mi
consentisse di simulare lo streaming, cioè di caricare dalla rete unimmagine di una sequenza solo quando ero sicuro che quella precedente era già stata caricata e quindi visualizzata. Usare un temporizzatore era impossibile perché leffetto variava secondo la velocità di connessione. Da un ottimo testo di Javascript, trovai un trafiletto che mi offrì lo spunto. In tal modo creai un array di immagini e operavo con il comando: document.images[num]onload=carica(); dove la funzione carica() serviva a caricare limmagine successiva. Tutto funzionava alla perfezione, anche se con qualche piccola variazione secondo i browser. Con Explorer, invece, si può utilizzare uno Script apposito per un oggetto e per un evento tramite la sintassi: <SCRIPT FOR=Object EVENT=evento>.</SCRIPT> Raggruppare gli eventi Negli ultimi tempi gli eventi si sono moltiplicati e difficile è tenerne traccia, quindi, per facilità cerchiamo di raggrupparli in sezioni omogenee: 1. Eventi attivabili
dai tasti del mouse 2. Eventi attivabili dai movimenti del mouse 3. Eventi attivabili dal trascinamento del mouse (drag and drop) 4. Eventi attivabili dallutente con la tastiera 5. Eventi attivabili dalle modifiche dellutente 6. Eventi legati al "fuoco" 7. Eventi attivabili dal caricamento degli oggetti 8. Eventi attivabili dai movimenti delle finestre 9. Eventi legati a particolari bottoni 10. Altri e nuovi tipi di eventi Nei primi due gruppi sono inseriti quegli eventi tipici del mouse o della tastiera, come il movimento o la pressione, negli altri sono inseriti gli eventi strettamente correlati agli oggetti. Il raggruppamento si richiede perché in tante trattazioni gli eventi sono descritti singolarmente è cio, anche se avvantaggia lanalisi, sgretola la sintesi: che invece è utilissima nelle situazioni più intricate. Prima della descrizione anticipiamo che tutti gli eventi hanno la propria sintassi composta sintatticamente dal loro nome col prefisso on, ad esempio
levento click è richiamato con lhandler onclick. Io darò una sintassi fatta di maiuscole e minuscole per evidenziare bene levento, ma occorre tener presente che in Netscape 3.0 levento è parte di javascript per cui deve essere scritto tutto in minuscolo. A questo gruppo si possono ricondurre i seguenti eventi: 1. onClick: attivato quando si clicca su un oggetto; 2. onDblClick: attivato con un doppio click; 3. onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse; 4. onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato; 5. onContextMenu: attivato quando si clicca il tasto destro del mouse aprendo il ContextMenu. Gli eventi onMouseDown e onMouseUp sono attivati dai due movimenti del tasto sinistro del mouse, il primo quando si preme giù il tasto e il secondo quando si solleva dopo il click. Il doppio click è un evento che ingloba gli altri e, per la precisione, attiva in successione onmousedown, onmouseup, onclick. Valore true e
false Levento onClick con JavaScript 1.1 ha aggiunto la possibilità di ricevere un valore true e false tramite il quale può essere attivato o meno. Tale possibilità è valida anche per gli eventi onMouseDown e onMouseUp e per onContextMenu. Esempio: cliccate qui, se rispondete OK il link si attiva se rispondete Annulla il link non si attiva. ecco il codice: <A HREF="link.htm" onclick="return(confirm(Sei sicuro))"> Il vantaggio è che levento onClick si attiva prima del tag associato per cui se è un link, questo è caricato dopo il completamento dellistruzione associata. In tal modo questa caratteristica si può applicare per i radio o i checkbox per non selezionarli, e per i buttoni, compresi quelli Submit e Reset, per considerarli non premuti, tranne che per un piccolo bug che rende non funionzbile lopzione per il Reset su alcune piattaforme. Interessante levento onContextMenu, anche perché spesso si chiede di disabilitare il tasto destro del mouse,
ma funziona solo con Internet Explorer 5.0 A questo gruppo si possono ricondurre i seguenti eventi: 1. onMouseOver: attivato quando il mouse si muove su un oggetto; 2. onMouseOut: attivato quando il mouse si sposta da un oggetto; 3. onMouseMove: si muove il puntatore del mouse, ma poiché questo evento ricorre spesso (lutilizzo del mouse è frequente), non è disponibile per default, ma solo abbinato con la cattura degli eventi, che si spiegherà in seguito. Gli eventi onMouseOver e onMouseOut sono complenmentari in quanto il primo è attivato nel momento in cui il puntatore è posto nellarea delloggetto il cui tag contiene levento e il secondo quando ne esce. A questo gruppo si possono ricondurre i seguenti eventi: 1. onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa; 2. onMove: attivato quando un oggetto muove una finestra o un frame; 3. onDragStart: evento attivato appena lutente inizia a trascinare un
oggetto; 4. onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella finestra dello stesso browser o anche di un altro o anche sul Desktop; 5. onDragEnter: attivato appena lutente trascina un oggetto su un obiettivo valido dello stesso o di un altro browser; 6. onDragOver: attivato quando lutente lutente trascina un oggetto su un obiettivo valido ad ospitarlo, ed è simile allevento precedente, ma viene attivato dopo quello; 7. onDragLeave: attivato quando lutente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato; 8. onDragEnd: attivato quando lutente rilascia loggetto al termine del trascinamento 9. onDrop: attivato quando il mouse si alza il tasto del mouse in seguito ad unoperazione di trascinamento; A questo gruppo si possono ricondurre i seguenti eventi: 1. onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto; 2. onKeyDown: attivato quando viene premuto il tasto; 3.
onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato; 4. onHelp: attivato quando il mouse schiacchia il tasto F1; Lultimo evento è stato naturalmente inserito in questo settore, anche se A questo gruppo si possono ricondurre i seguenti eventi: 1. onChange: attivato quando il contenuto di un campo di un form o modulo è modificato o non è più selezionato; 2. onCellChange: attivato quando si modifica un elemento in un Database, per questa sua caratteristica ha un uso non propriamente legato a Javascript; 3. onPropertyChange: evento attivato quando cambia la proprietà di un elemento; 4. onReadyStateChange: evento attivato quando lo stato del caricamento di un elemento cambia, levento è utile, ad esempio, per verificare che un elemento sia stato caricato. Importante è dire qualcosa in più su onChange: levento assomiglia molto ad onBlur, ma verifica anche che lelemento che lo richiama sia stato modificato. Questo evento, infatti, è attivato quando
viene selezionato un altro elemento da una lista o quando si modifica un campo di testo, per cui oltre allattivazione, occorre anche operare unazione. A questo gruppo si possono ricondurre i seguenti eventi: 1. onFocus: Questo handler è lopposto di onBlur per cui si attiva quando lutente entra in un campo; 2. onBlur: attivato quando il puntatore del mouse o il cursore esce dalla finestra corrente utilizzando il mouse o il carattere TAB. Applicato ai moduli, invece, tale handler si avvia se si esce dal campo il cui tag contiene il controllo; 3. onSelect: attivabile quando si seleziona del testo allinterno di una casella di testo sia col mouse sia tenendo premuto SHIFT e selezionando con i tasti Freccia; 4. onSelectStart: si attiva quando si inizia a selezionare un evento; 5. onbeforeEditFocus: si attiva con un doppio click o con un clicK su un oggetto che ha già la selezione, quando questo è in DesignMode; 6. onLoseCapture: si attiva quando un oggetto perde la cattura del mouse Gli
ultimi tre eventi sono particolarità di Internet Explorer 5.0 e richiedono ulteriori conoscenze per poter essere adoperati. A questo gruppo si possono ricondurre i seguenti eventi: 1. onLoad: Questo handler funziona nel caricamento di oggetti, per lo più finestre e immagini; 2. onUnload: è lopposto del precedente e funziona quando si lascia una finestra per caricarne unaltra o anche per ricaricare la stessa (col tasto refresh); 3. onAbort: funziona quando lutente ferma il caricamento di un oggetto cliccando su un altro link o premendo il tasto stop del browser; 4. onError: si attiva quando il caricamento di un oggetto causa un errore, ma solo se questo è dovuto ad un errore di sintassi del codice e non del browser così funziona su un link errato di unimmagine della pagina, ma non su un link errato di caricamento di una pagina intera; 5. onBeforeUnload: questo handler funziona allo stesso modo di onUnload ma si carica in un momento prima; 6. onStop: questo handler funziona quando
si ferma il caricamento della pagina con il tasto stop del browser e dovrebbe funzionare anche allo stesso modo di onUnload caricandosi prima di questo ma dopo onBeforeUnload. Gli ultimi due eventi sono particolarità di Internet Explorer 5.0 e richiedono ulteriori conoscenze per poter essere adoperati. onLoad Questo evento se ben utilizzato potrebbe simulare un effetto streaming mediante caricamento di gif o jpeg. Immaginiamo di avere a disposizione una serie di jpeg da animare Con questo evento possiamo sincronizzare la visualizzazione delle varie figure alla fine del caricamento della precedente mediante uno script del genere: <script> var whichImage=0 var maxImages=5 function changeAnimation(theImage) { ++whichImage if (whichImage <= maxImages) { var imageName="!anim" + whichImage + ".gif" theImage.src=imageName } else { whichImage=-1 return } } </script> <img name="changingAnimation" src="!anim0.gif" border=0
align="top" onLoad="changeAnimation(this)"> onError Una particolare menzione merita levento onError per la sua grande utilità ma per lo scarso utilizzo che se ne fa. Questo evento può: 1. sopprimere i messaggi di errori che il debugger mostrerebbe (messaggi discreti in Netscape, ma antiestetici in Explorer) il tutto mediante il codice di esempio <img src="corrupt.gif" onError="null"> 2. se il codice è espresso nella sezione HEAD diventa attivo per tutta la finestra e per tutti gli eventi di errore attivati dagli oggetti ivi contenuti <script>window.onerror=null</script> tuttavia un evento onError associato alla singola immagine o oggetto cattura levento per questa immagine o oggetto a discapito di quello generale 3. levento può fare di più: può indicare il tipo di errore, la riga e lURL che lo hanno causato e indicarlo in una finestra o memorizzarlo in un array. Di seguito indico listruttivo esempio mostrato sul
Reference di Netscape che serve a costruire un debugger personalizzato. Nello script ci sono degli errori e cliccando sul primo bottone e poi sul secondo si possono individuare: <script> window.onerror = myOnError msgArray = new Array() urlArray = new Array() lnoArray = new Array() function myOnError(msg, url, lno) { msgArray[msgArray.length] = msg urlArray[urlArray.length] = url lnoArray[lnoArray.length] = lno return true } function displayErrors() { win2=window.open(,window2,scrollbars=yes) win2.documentwriteln(<B>Error Report</B> <P>) for (var i=0; i < msgArray.length; i++) { win2.documentwriteln(<B>Error in file:</B> + urlArray[i] + <BR> ) win2.documentwriteln(<B>Line number:</B> + lnoArray[i] + <BR>) win2.documentwriteln(<B>Message:</B> + msgArray[i] + <P>) } win2.documentclose() } </script> </p> <form> <input type="button" value="Questo bottone ha un errore
di sintassi" onClick="alert(unterminated string)" name="button"> <p> <input type="button" value="Visualizza lerrore" onClick="displayErrors()" name="button2"> </form> 1. onResize: Questo handler si attiva quando lutente rimpicciolisce o ingrandisce una finestra o un frame o, in caso particolare per Explorer, un oggetto a cui siano stati fissati laltezza e la larghezza o anche la posizione, come ad esempio un layer; 2. onScroll: attivato quando si effettua lo scrolling della pagina sia col mouse con i tasti PGUP e PGDOWN o anche con il metodo doScroll A questo gruppo si possono ricondurre i seguenti eventi: 1. onSubmit: Questo handler è attivato dal click su tasto di Invio di un form; 2. onReset: questo handler è attivato dal click su tasto di Annulla di un form LEZIONE 4 – Metodi & Dom Un altro concetto importante è che ognuno degli oggetti del browser ha i propri metodi. Questo equivale
a dire che ognuno degli oggetti del browser ha a disposizione determinate azioni e non altre. Facciamo subito un altro esempio, per rendere più chiaro il concetto. Esiste loggetto history che contiene la storia della navigazione dellutente per quel che riguarda una finestra. Tramite il metodo back() delloggetto history è possibile mandare indietro lutente alla pagina da cui è arrivato (ovviamente lutente deve essere arrivato qui a partire da unaltra pagina, altrimenti - se la richiesta è diretta - non cè pagina verso cui tornare indietro): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <A HREF="#" onClick="history.back()">torna indietro</A> </body> </html> È evidente che il metodo back() è proprio delloggetto history, e non (per esempio) del campo del form che abbiamo visto prima. Infatti se adattate lesempio
relativo al campo del form e scrivete: onLoad="document.mioFormtestoProvaback()" non potrete che ottenere un errore. E inoltre anche se scrivete: <A HREF="#" onClick="alert(history.value)">torna indietro</A> otterrete un valore indefinito perché non state interrogando correttamente lelemento history, che è un array. Ma anche se lo interrogaste nella maniera giusta, cioè così (esamineremo in seguito questo tipo di sintassi): <SCRIPT TYPE="text/javascript"> for (n=0;n<history.lenght;n++) { document.writeln(history[n]value); } </SCRIPT> non otterreste comunque alcun valore, perché - per motivi di sicurezza - non è possibile leggere il valore della history di un documento (è possibile con Netscape 4, ma solo con determinati privilegi). Ogni oggetto ha dunque i propri, personalissimi metodi e va interrogato nella giusta maniera. Per ora non analizzeremo tutti i vari elementi che compongono il browser, i loro
metodi, e le loro reciproche relazioni, anche perché - come vedremo nella prossima lezione - differenti browser (Netscape e Internet Explorer) e differenti versioni dello stesso browser (Netscape 4 e Netscape 6) hanno sviluppato modelli diversi per concepire le relazioni reciproche di questi oggetti e metodi. LEZIONE 5 – Commenti Commenti I commenti sono parti del programma che non vengono lette dallinterprete e che, quindi, servono a spiegare e a chiarire. Questi sono racchiusi tra barre e asterischi come nellesempio sotto riportato: /*commento/ Il commento può essere posto su più righe o su una riga singola, mentre non è accettato dallinterprete il commento annidato. Un altro tipo di commento è la doppia barra, presa a prestito dal linguaggio C, ma è valida solo per commenti posti su una singola riga, anche se non la occupano per intero: int x: //commento I commenti Javascript non possono essere inseriti al di fuori dei tag che individuano lo script, altrimenti HTML li
considererà come parte del testo, e viceversa non si possono utilizzare i tag di commenti HTML allinterno dello script. Lunico commento ammissibile è quello che consente di racchiudere tutti gli script nei tag di commento di HTML, facendoli aprire dopo il tag di script e chiudere prima della chiusura del tag: <script language="JavaScript"> <!-alert("Welcome!"); //--> </script> in tal modo si maschera il codice javascript ai vecchi browser che non lo leggono e si evita che lHTML lo possa considerare come testo e, quindi, visualizzare. Tuttavia occorre tenere presente due accortezze: • alcuni browser non riconoscono il commento e visualizzano lo script; • alcuni browser, soprattutto Netscape nelle versioni più vecchie, hanno difficoltà a gestire il segno > di fine commento, per cui conviene posizionare anche un commento Javascript (//) alla sequenza -->. Spazi bianchi Javascript non bada agli spazi bianchi, tranne che per quelli
che si trovano nelle stringhe, per cui si possono omettere o anche aumentare. Il loro uso, tuttavia, con lidentazione aumenta la leggibilità del programma per cui sono vivamente consigliati. Apici Importanti sono gli apici, sia singoli ( ) che doppi (" "). I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli, a racchiudere anche le stringhe (sequenze di caratteri), per cui occorre fare attenzione ad annidare due stringhe racchiuse da apici simili, come ad utilizzare i doppi apici per le stringhe se questi già servono a racchiudere codice Javascript. Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della stringa stessa, si fanno precedere da una barra rovesciata (). Uno degli errori che si commette di frequente, è proprio quello di non utilizzare correttamente gli apici. Ad esempio il comando: alert(Questo sito e in costruzione) sembra essere scritto correttamente, ma se eseguito, il
browser ne bloccherà lesecuzione. Netscape mostrerà questo errore: missing ) after argument list. alert(Questo sito e in costruzione) più laconico Explorer, che indica solo: Previsto). Si proseguirà oltre, ma lerrore non sarà corretto finché non si scriverà alert(Questo sito e in costruzione) fdsgfdsgvfdgbfds I nomi dei dati sono chiamati identificatori e devono sottostare ad alcune regole: 1. possono contenere solo lettere, numeri e trattino di sottolineatura, per cui sono esclusi gli spazi bianchi; 2. il primo carattere deve essere sempre una lettera E utilizzabile come primo carattere anche il trattino di sottolineatura, ma il compilatore tratta quel nome in modo particolare per cui se ne sconsiglia luso; 3. Javascript è case sensitive per cui tratta diversamente le lettere in maiuscolo e in minuscolo, per tale motivo è convenzione utilizzare liniziale maiuscola per i nomi di costanti e quella minuscola per le variabili; 4. non si possono utilizzare i nomi che rientrano
nelle parole chiave Luso diffuso è di utilizzare nomi lunghi per identificare meglio il dato, adoperando queste convenzioni: 1. adoperare il trattino di sottolineatura per definire meglio il dato, così il nome tasso interesse identifica più di quanto possa fare il semplice nome x; 2. accanto allutilizzo del trattino di sottolineatura, si usa anche la notazione a cammello per cui si rende maiuscola una lettera allinterno del nome di una variabile, proprio per identificarla meglio (ad esempio TassoInteresse). LEZIONE 6 – Parole Riservate In Javascript ci sono delle parole chiave che non si possono utilizzare come identificatori di dati, eccone lelenco: abstract boolean break byte case catch char class const* continue default do if package throw double implements private throws else import protected transient extends in public true false instanceof return try final int short var* finally interface static void float long super while for native switch with function new
synchronized goto null this Le parole chieve riservate, ma correntemente non utilizzate da Javascript sono precedute dal carattere *. LEZIONE 7 – Gli Oggetti Quando programmate con JavaScript dovete immaginare che la pagina HTML sia formata da vari elementi in varia relazione fra loro. Il browser infatti (con allinterno il documento HTML) può essere infatti "sezionato" in vari elementi: • prima di tutto cè il browser stesso (loggetto navigator) • poi la finestra che contiene tutto quanto (loggetto window) • eventuali frames (loggetto window.frames) • il documento HTML vero e proprio (document) • i moduli per raccogliere linput dellutente (document.forms["nomeForm"]) • le immagini (document.images["nomeImmagine"]) • i cookie (document.cookie["nomeCookie"]) • i livelli • le applet (document.applets["nomeApplet"]) • la barra degli indirizzi (location) • la barra di stato, nella parte
bassa del browser (status) e via di seguito. Tutti gli oggetti che vediamo nel browser sono in relazione gerarchica fra di loro (ci sono elementi-padre ed elementi-figli) e tramite JavaScript - utilizzando la corretta sintassi - è possibile interrogare questi elementi, leggerne le proprietà e in taluni casi anche cambiare il valore di queste proprietà. Facciamo un esempio. Prendiamo il seguente codice HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <FORM NAME="mioForm"> <input type="text" name="testoProva" value="paradiclorobenzoro"> </FORM> </body> </html> La pagina contiene un campo di input text (che in genere serve allutente per scrivere dei dati). Se volessi conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello a oggetti e le proprietà utilizzate da
JavaScript, non avrei che da scrivere: document.mioFormtestoProvavaluelength che è un modo sintetico di scrivere: window.documentforms[mioForm]testoProvavaluelength La riga che abbiamo scritto precedentemente significa: "prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form presenti nel documento e facciamo riferimento a quello che si chiama mioForm, consideriamo poi il campo chiamato testoProva. Bene Una volta individuato testoProva, prendiamo il valore di questo campo e infine ricaviamo la lunghezza del valore di questo campo" Infatti se scriviamo un codice come questo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body onLoad="alert(document.mioFormtestoProvavaluelength)"> <FORM NAME="mioForm"> <input type="text" name="testoProva"
value="paradiclorobenzoro"> </FORM> </body> </html> al caricamento della pagina vedremo un messaggio che indica la lunghezza di "paradiclorobenzoro". Non vi preoccupate se lesempio adesso non vi è del tutto chiaro: esamineremo subito nelle prossime pagine la sintassi introdotta nelle righe di codice scritte pocanzi (vedremo subito cosa vuol dire "onLoad" e cosa vuol dire "alert"). Limportante è comprendere il concetto, che cioè una pagina web viene scomposta da JavaScript in un modello ad oggetti (ognuno con le sue proprietà) in relazione reciproca. Ovviamente la sintassi per richiamare gli oggetti non è dovuta al nostro estro, ma - visto che JavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in maniera rigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio, document.testoProvalengthmioFormvalue senza incorrere in errori) LEZIONE 8 – Le Finestre Di
Dialogo JavaScript è in grado di generare tre differenti tiplogie di "finestre implicite" (dette anche "finestre incorporate", "finestre modali", o "finestre di dialogo"), che avremo modo di utilizzare più volte nei nostri script (soprattutto lalert). Alert Abbiamo già incontrato lalert diverse volte nel corso delle nostre lezioni e si tratta senzaltro della finestra che vi capiterà di utilizzare più spesso: lalert visualizza un avvertimento, un messaggio di errore che blocca qualsiasi azione dellutente finché egli non dà il suo benestare cliccando sul bottone. La sintassi è: alert("messaggio"); Il contenuto dellalert deve essere sempre una stringa (cioè una sequenza di caratteri), il che vuol dire che deve essere racchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di convertire in automatico in un valore letterale (come nel caso dei numeri). Come per il document.write(), se dovete usare
delle virgolette allinterno del messaggio è bene che usiate i caratteri di escape (cioè il back-slash), onde evitare gli errori. Ad esempio: alert("Marco disse "Ciao Mondo!""); Ecco un esempio di alert: <A HREF="http://www.htmlit" onClick="alert(Stai per uscire);" TARGET=" blank">testo link</a> testo link Come si può vedere, finché lutente non clicca su "ok", la pagina non va verso il link indicato. Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di "chiudere prematuramente" il contenuto dellevento onClick. Confirm È una finestra che pone una domanda e chiede conferma dando la possibilità di scegliere tra due opzioni ("ok" e "annulla"). La sintassi è: confirm("messaggio"); Mentre lalert concede una sola possibilità di scelta ("ok"), il confirm dà la possibilità di scegliere tra due opzioni: <A
HREF="http://www.htmlit" onClick="confirm(Sei sicuro di voler uscire dalla pagina?);" TARGET=" blank">testo link</a> testo link Prompt È una finestra che pone una domanda e consente allutente di dare la risposta che vuole. Può avere anche un valore di risposta predefinito. La sintassi è: prompt("domanda","risposta predefinita"); la risposta predefinita è facoltativa. Ad esempio: <body onLoad="prompt(Come ti chiami?);"> o anche: <body onLoad="prompt(Come ti chiami?,inserisci qui il tuo nome);"> Per visualizzare il nome dellutente nella pagina dovremo poi "catturarlo" in qualche modo. Vedremo più avanti come fare. Nota a margine Nellottica in cui abbiamo affrontato il corso finora è bene specificare che in realtà le finestre modali sono metodi delloggetto "window". Quindi la sintassi estesa per visualizzare le finestre modali dovrebbe essere:
window.alert("messaggio"); window.confirm("messaggio"); window.prompt("domanda","risposta predefinita"); LEZIONE 9 – Le Finestre Personalizzabili Le finestre che abbiamo visto nella lezione precedente sono finestre di sistema. Hanno una grafica minimale e pre-impostata, che di solito va scarsamente daccordo con un sito dalla grafica accattivante in cui viene studiato ogni minimo particolare. Con JavaScript possiamo creare delle finestre personalizzate che si adattino alle nostre esigenze. La sintassi è questa: window.open(percorso,nome finestra,caratteristiche separate da virgola); Percorso Indica un percorso (relativo o assoluto) di un file html da inserire allinterno della finestra Nome finestra Indica il nome della finestra che abbiamo creato (opzionale) Caratteristiche separate da virgola Specifica la forma, la dimensione e la posizione della finestra, possiamo anche far sì che la finestra non sia ridimensionale, o che non ci
siano le barre degli strumenti e le barre di scorrimento. Abbiamo quindi la possibilità di specificare tre diversi parametri che ci permettono di creare una finestra che si adatti alle nostre esigenze. Il fatto che ciascun parametro sia indicato tra virgolette (semplici o doppie, non importa) ci dice inoltre che ci troviamo di fronte a delle stringhe (sequenze di caratteri). Ognuno di questi parametri può essere lasciato vuoto, ma la sua presenza va comunque indicata. Così: window.open(,,); La sintassi qui sopra apre una finestra vuota. Vediamo un esempio concreto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <SCRIPT TYPE="text/javascript"> window.open(http://wwwhtmlit,miaFinestra,); </SCRIPT> </body> </html> Come abbiamo visto nel corso delle lezioni precedenti possiamo
applicare anche la sintassi JavaScript agli eventi. Ad esempio questa sintassi apre unulteriore finestra secondaria al click del mouse. Abbiamo dunque realizzato la possibilità di cambiare due link con un solo click: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <A HREF="http://pro.htmlit" onClick="window.open(http://wwwhtmlit,miaFinestra,);">due link on un solo click</A> </body> </html> Ovviamente è possibile associare la capacità di aprire finestre secondarie anche ad altri eventi. Ad esempio con: <BODY onLoad="window.open(http://wwwhtmlit,miaFinestra,);"> la finestra secondaria si apre allapertura della pagina. E con: <BODY onUnLoad="window.open(http://wwwhtmlit,miaFinestra,);"> la finestra si apre invece alla chiusura della
pagina. È bene però non esagerare con lapertura selvaggia di finestre secondarie (le cosiddette "pop-up"), perché gli utenti di solito non le amano molto e le chiudono appena possibile. Inoltre esistono alcuni software che consentono allutente di impedire che i siti web aprano delle finestre secondarie nelle pagine in cui essi stanno navigando. Per quel che riguarda il secondo parametro (il nome della finestra) è da dire che, se il metodo window.open viene richiamato due volte allinterno della stessa pagina ed esiste già una finestra con lo stesso nome, non vengono create due differenti finestre, ma viene ricaricato il contenuto della finestra già esistente (e se la seconda finestra ha caratteristiche diverse dalla prima, le nuove caratteristiche vengono ignorate, in quanto la finestra è già stata "formata"). Inoltre se la finestra ha un nome, questo nome può essere usato come valore dellattributo "target" nei tag "A" e "FORM".
È quindi possibile ricaricare il contenuto di una finestra secondaria, semplicemente specificando il "target" del link nella finestra principale. Un esempio chiarirà tutto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <A HREF="#" onClick="window.open(http://wwwhtmlit,finestra,);">prima finestra</A><BR> <A HREF="#" onClick="window.open(http://prohtmlit,finestra,);">seconda finestra</A><BR> <A HREF="http://freephp.htmlit" target="finestra">ricarica il contenuto</A><BR> </body> </html> LEZIONE 10 – Le Finestre PersonalizzabiliCaratteristiche Finora abbiamo esaminato la seguente sintassi: window.open(percorso,nome finestra,valori separati da virgola); in cui i primi due
parametri ci permettono di specificare il percorso del file html e il nome della finestra. Abbiamo detto che il terzo parametro (lultimo della lista) ci permette di creare una finestra "come vogliamo noi". Per farlo è sufficiente impostare una serie di caratteristiche separate dalla virgola (ognuna di queste variabili si può inserire oppure omettere e non comparirà). Ad esempio: La sintassi è questa: window.open(http://wwwhtmlit,miaFinestra,width=300,height=300 ,toolbar=yes, location=no,status=yes,menubar=yes,scrollbars=no,resizable=no); NB la riga precedente non va a capo Lesempio crea una finestra di 300 x 300 con la barra degli strumenti, la barra del menu, la barra di stato (quella in basso), ma senza la barra degli indirizzi; la finestra non può essere inoltre ridimensionata. Vediamo nel dettaglio quali sono le principali caratteristiche che possono essere attribuite alla finestra: Caratteristica Valore Spiegazione La larghezza della finestra in pixel Esempio
width numerico width=400 height numerico Laltezza della finestra in pixel height=200 left numerico La distanza dalla sinistra del monitor left=300 top numerico La distanza dal lato superiore del monitor top=350 resizable yes / no Indica se la finestra può essere ridimensionata o no resizable=no fullscreen yes / no Indica se la finestra va aperta fullscreen=no a tutto schermo channelmode Indica se la finestra deve yes / no essere aperta "in modalità canale" (solo per IE) menubar yes / no toolbar La barra degli strumenti del yes / no browser (con i pulsanti "indietro", "avanti") location yes / no La barra degli indirizzi del browser location=no scrollbars yes / no Le barre di scorrimento laterali scrollbars=no status yes / no La barra di stato (quella in channelmode=no La barra del menu (quella con menubar=no scritto "File", "Modifica", ecc.) toolbar=no status=no basso) Come si può intuire
dagli esempi, la sintassi deve avere la forma: caratteristica=[valore] inoltre, come detto più volte, le varie caratteristiche devono essere separate dalla virgola. Ad esempio con: <A HREF="javascript:window.open(http://wwwhtmlit,,fullscreen=yes);">apri a tutto schermo</A> Si apre una finestra a schermo intero (che può essere chiusa dallutente solo utilizzando la combinazione di tasti Ctrl + W o ALT + F4). Invece con: window.open(sponsorhtm, , width=220,height=220,scrollbars=no); si apre una finestra analoga alla "finestra dello sponsor di HTML.it" Per evitare ogni volta di ripetere tutte quante le caratteristiche delle finestre possiamo inoltre tener presente due scorciatoie. 1. Quando una caratteristica viene omessa il suo valore: o viene impostato a "0" nel caso di left e top o viene impostato sullintera grandezza dello schermo nel caso di width e left o viene automaticamrnte impostato su "no" in tutti gli altri casi 2.
Quando una caratteristica viene impostata su "yes" o la forma "caratteristica=yes" può anche essere scritta semplicemente con "caratteristica". Ad esempio: window.open(http://wwwhtmlit,,fullscreen);" Quindi al posto di: window.open(sponsorhtm, , width=220,height=220,left=0,top=0,resizable=no,menubar=yes,toolbar=yes, scrollbars=no,locations=no,status=no); NB La riga precedente non va a capo. basterà scrivere: window.open(sponsorhtm, , width=300,height=300,menubar,toolbar); GRUPPO SUPPORTO Basi Di Dati Laboratorio Anno 2004/2005 Prof G. Ghelli
Just like you draw up a plan when you’re going to war, building a house, or even going on vacation, you need to draw up a plan for your business. This tutorial will help you to clearly see where you are and make it possible to understand where you’re going.
