Università di Bergamo Facoltà di Ingegneria Applicazioni Internet B Paolo Salvaneschi B5_2 V1.7 Java Script Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie. Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall’ autore. Sono graditi commenti o suggerimenti per il miglioramento del materiale B5 Java Script Paolo Salvaneschi 1 INDICE • • • • • • JavaScript nei browser Web - DOM Finestre e frame L’oggetto document L’oggetto form JavaScript e CSS Gestione degli eventi B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 2 2 JavaScript nei browser Web - DOM • Contesto di esecuzione e gerarchia di oggetti lato client • L’oggetto window – Rappresenta la finestra (o frame) in cui è visualizzato il documento • L’oggetto document – Rappresenta il documento HTML B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 3 3 JavaScript nei browser Web - DOM self, window, parent, top vari oggetti window navigator oggetto navigator frames[] array di oggetti window location oggetto location Finestra corrente history oggetto history document oggetto document screen oggetto screen La gerarchia di oggetti JavaScript DOM Document Object Model forms[] array di oggetti form anchors[] array di oggetti anchor links[] array di oggetti link images[] array di oggetti image applets[] array di oggetti applet elements[] array di elementi di moduli HTML: Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarea options[] array di oggetti option enbeds[] array di oggetti incorporati B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 4 4 JavaScript nei browser Web - DOM • Nella figura sono rappresentate solo le proprietà che si riferiscono ad altri oggetti (esistono altre proprietà) • Le variabili globali sono proprietà dell’oggetto window – Ogni volta che un documento è caricato in una finestra o frame l’oggetto window è riportato al suo stato di default – Tutte le variabili e funzioni definite dagli script persistono fino a che il documento corrente è sostituito da uno nuovo B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 5 5 JavaScript nei browser Web - DOM • DOM Document Object Model • Interfaccia di programmazione per rappresentare, accedere e manipolare i vari elementi che compongono il documento – DOM Internet Explorer – DOM Netscape – DOM W3C B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 6 6 JavaScript nei browser Web - DOM • Modello di programmazione guidato da eventi • Eventi di interazione persona/macchina definiti in HTML e gestiti dal browser che attiva codice JavaScript B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 7 7 Finestre e frame • L’oggetto window • Proprietà di window – – – – self, window riferimento all’oggetto window stesso status testo visualizzato nella riga di stato del browser name nome della finestra document riferimento all’oggetto che rappresenta il documento HTML visualizzato nella finestra – frames[] array di oggetti window che rappresentano i frames presenti nella finestra B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 8 8 Finestre e frame – history riferimento all’oggetto che rappresenta l’elenco cronologico delle pagine visualizzate – navigator riferimento all’oggetto che fornisce informazioni sul browser utilizzato – location l’URL del documento attualmente caricato nella finestra o frame. Se si imposta la proprietà ad un URL differente, il browser carica il relativo documento – screen riferimento all’oggetto che fornisce informazioni sullo schermo utilizzato –… B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 9 9 Finestre e frame • Metodi di window – alert() visualizza messaggio in finestra di dialogo con pulsante OK di chiusura – confirm() visualizza domanda in finestra di dialogo con pulsanti OK e annulla. Restituisce true / false – prompt() visualizza una finestra di dialogo che riceve una stringa – close() open() print() B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 10 10 Finestre e frame – moveBy(dx,dy) sposta in una posizione relativa dx n. pixel per cui spostare verso destra dy n. pixel per cui spostare verso basso – moveTo(x,y) sposta in una posizione assoluta – resizeBy(dw, dh) ridimensiona la finestra dw n.pixel di cui aumentare la larghezza dh n.pixel di cui aumentare l’altezza – resizeTo(width, height) ridimensiona a altezza e larghezza definita B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 11 11 Finestre e frame – scrollBy(dx, dy) fa scorrere un documento nella finestra dx pixel a destra dy pixel verso il basso – scrollTo(x, y) x, y coordinate orizzontali e verticali del documento che vengono visualizzate nell’angolo superiore sinistro – focus() blur() richiedono o cedono il focus di tastiera per la finestra B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 12 12 Finestre e frame – setInterval(code, interval) Esegue il codice code specificato a intervalli interval (in msec). Restituisce un valore che può essere passato a clearInterval(intervalId) per rimuovere il timeout – clearInterval(intervalId) – setTimeout(code,delay) Esegue il codice code specificato dopo un tempo delay (in msec). Restituisce un valore che può essere passato a clearTimeout(timeoutId) per rimuovere il timeout – clearTimeout(timeoutId) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 13 13 Finestre e frame window.open(url,name,features,replace) Restituisce il riferimento all’oggetto finestra url stringa URL visualizzato nella nuova finestra (se omesso, finestra vuota) name stringa nome della nuova finestra (se nome finestra già esistente restituisce solo il riferimento alla finestra e ignora features) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 14 14 Finestre e frame features stringa caratteristiche della finestra “caratteristica = valore,caratteristica = valore ….” height width resizable (= yes,no) Se la caratteristica non è presente menubar (= yes,no) nella stringa si assume no toolbar (= yes,no) scrollbars (= yes,no) status(= yes,no) … replace boolean (=true : non crea nuova voce in cronologia ma sovrascrive) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 15 15 Finestre e frame <BODY> <SCRIPT> //parametri var w = 200; // larghezza finestra in pixel var h = 300; // altezza finestra in pixel var x = 400 //coordinata orizz. angolo sup sin var y = 300 //coordinata vert. angolo sup sin var win1 = window.open ("Es1_js_tagscript.htm", "finestra1","width=" + w + ",height=" + h ); win1.moveTo(x,y); </SCRIPT> <form> <input type="button" value="Chiudi la finestra" onclick="win1.close();"> </form> </BODY> B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 16 16 Finestre e frame <BODY> <SCRIPT> var w = 400; //larghezza finestra in pixel var h = 200; //altezza finestra in pixel var x = 400; //coordinata orizz. angolo sup sin var y = 300; //coordinata vert. angolo sup sin var win1 = window.open ("", "finestra1","width=" + w + ",height=" + h+ ",menubar=yes, toolbar=yes,status=yes,scrollbars=yes,resizable=yes"); win1.moveTo(x,y); …scrivi nella nuova finestra……….. B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 17 17 Finestre e frame • Frame • Ogni window possiede una proprietà frames[], array di oggetti window • Relazioni tra frames – frames[0] così una finestra (frame) si riferisce al suo primo frame – parent così il frame si riferisce alla finestra (frame) genitore – top così il frame si riferisce alla finestra di più alto livello nella gerarchia B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 18 18 Finestre e frame • Relazioni tra frame window frames[0] frames[1] parent.frames[0] B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 19 19 Finestre e frame • Riferimento al frame come posizione o come nome <frameset cols="200,*"> <frame name="indice" src=“file_indice.htm"> <frame name="contenuto" src=“file_contenuto.htm"> </frameset> <p><a href="es23_linkinterno.htm" target="contenuto"> TESTO1</a></p> window frames[0] frames[1] parent.frames[1] B5 Java Script B5 Java Script parent.frames[1] parent.contenuto Paolo Salvaneschi Paolo Salvaneschi 20 20 L’oggetto document • Ogni oggetto window ha una proprietà document • L’oggetto document fornisce a JavaScript l’accesso interattivo al documento HTML – Proprietà del documento – Oggetti che compongono il documento e loro proprietà B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 21 21 L’oggetto document • Proprietà di document – – – – – – – title bgcolor fgcolor (colore sfondo, colore testo) … images[] <IMG> forms[] <FORM> anchors[] <A name=“name”> links[] <A href……> (se c’è name è creato anche un anchors) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 22 22 L’oggetto document • Proprietà di document – applets[] <APPLET> –… – document.all[name] Internet Explorer 4. Array che contiene nell’ordine tutti gli elementi della pagina HTML identificati per numero o nome (name, id) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 23 23 L’oggetto document • Accesso agli oggetti componenti il documento La prima form del documento <FORM name="f1"> <INPUT type="button" value="premere"> </FORM> document.forms [0] //si riferisce al modulo per posizione document.f1 //si riferisce al modulo per nome document.forms.f1 //si riferisce all’oggetto form //come proprietà denominata dell’array forms document.forms["f1"] //idem con sintassi array B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 24 24 L’oggetto document • Metodi di document – open() apre un flusso di output su cui scrivere con write() – close() chiude il flusso di dati e visualizza l’output – write() aggiunge dati ad un documento – writeln() idem + carattere di nuova riga B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 25 25 L’oggetto document Documenti generati dinamicamente <BODY> <SCRIPT> var w = 400; //larghezza finestra in pixel var h = 200; //altezza finestra in pixel var x = 400; //coordinata orizz. angolo sup sin var y = 300; //coordinata vert. angolo sup sin var win1 = window.open ("", "finestra1","width=" + w + ",height=" + h+ ",menubar=yes, toolbar=yes,status=yes,scrollbars=yes,resizable=yes"); win1.moveTo(x,y); … B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 26 26 L’oggetto document … win1.document.open(); win1.document.write("<h2>Testo scritto nella nuova finestra</h2>"); win1.document.write("<p>Nel mezzo del cammin di nostra vita.......</p>"); win1.document.close(); </SCRIPT> <form> <input type="button" value="Chiudi la finestra" onclick="win1.close();"> </form> </BODY> B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 27 27 L’oggetto form • Oggetto form • Ogni form (<form> </form>) è un elemento di forms[] nell’ordine in cui appaiono nel documento • Proprietà elements[] – Tutti gli oggetti che rappresentano i vari elementi di input della form, nell’ordine in cui appaiono nel documento – document.forms[0].elements[1] il secondo campo della prima form B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 28 28 L’oggetto form • Oggetto form – document.forms.lenght numero degli elementi • Metodi – submit() inoltro della form – reset() reset della form • Form e elementi di form possono essere identificati per nome (attributo tag HTML) – Form di nome calcola con elemento di nome numero : document.calcola.numero B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 29 29 L’oggetto form • Tutti gli elementi di form hanno le seguenti proprietà: – type (lettura) identifica il tipo di elemento – name (lettura) stringa specificata dall’attributo HTML name – form (lettura) riferimento all’oggetto form in cui è contenuto – value (lettura/scrittura) valore dell’elemento B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 30 30 L’oggetto form • Tipi di elementi <input type="text" name=“cognome" size="30"> <textarea name="Consigli" rows="7" cols="25 wrap> document.forms[0].cognome.value B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 31 31 L’oggetto form <select name=“anni"> <option>meno di un anno</option> <option>da uno a tre anni</option> <option>da tre a dieci anni</option> document.forms[0].anni.selectedIndex Proprietà che specifica per numero l’opzione selezionata document.forms[0].anni.options[1].text Testo della seconda opzione document.forms[0].anni.options[1].selected Stato di selezione della seconda opzione B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 32 32 L’oggetto form <input type="radio" name=“tipofoto" value="tipo1">Bianco/Nero <br> <input type="radio" name=“tipofoto" value="tipo2" checked>Colore document.forms[0].tipofoto[0].checked Proprietà che specifica se l’elemento è attivo (Booleano: true se pulsante attivo) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 33 33 L’oggetto form <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <SCRIPT language="JavaScript"> function eleva_al_quadrato() { var x = document.calcola.numero.value; document.calcola.risultato.value = x*x; } </SCRIPT> </HEAD> … B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 34 34 L’oggetto form </HEAD><BODY> <H1>Funzione eleva al quadrato</H1> <form name="calcola"> <table> <tr> <td>Numero:</td> <td><input type="text" name="numero" size="12" onchange="eleva_al_quadrato();"></td> </tr> <tr><td>Numero al quadrato:</td> <td><input type="text" name="risultato" size="12"></td> </tr> <tr> <td><input type="button" value="Calcola" onclick="eleva_al_quadrato();"></td> </tr> </table> </form> </BODY></HTML> B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 35 35 L’oggetto form Controllo dell’input di una form B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 36 36 L’oggetto form <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> //Funzione di servizio //Restituisce true se la stringa contiene solo spazi bianchi (blank,a capo, tab) //string.charAt(n) restituisce l'ennesimo carattere di una stringa //string.lenght intero che contiene il n. di caratteri di una stringa function isblank(s) { for(var i = 0; i < s.length; i++) {var c = s.charAt(i); if ((c != ' ') && (c != '\n') && (c != '\t')) return false;} return true; } … B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 37 37 L’oggetto form //Funzione di verifica della form function verify(f) { var msg; var empty_fields = ""; //esamina tutti campi della form //per ogni campo vuoto scrive il nome del campo in una stringa //f.lenght numero di elementi nella form passata con this for(var i = 0; i < f.length; i++) { var e = f.elements[i]; if ((e.type == "text") && !e.optional) { if ((e.value == "") || isblank(e.value)) { empty_fields += "\n " + e.name;} } } … B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi NB 1 NB 2 38 38 L’oggetto form //se la stringa dei campi vuoti è vuota restituisce true //altrimenti visualizza il messaggio e restituisce false if (!empty_fields) return true; if (empty_fields){ msg = "I seguenti campi obbligatori sono vuoti:" + empty_fields + "\n"; alert(msg); return false; } } </SCRIPT> true false … Vedi gestione eventi B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 39 39 L’oggetto form <BODY> <H2>Controllo dei campi obbligatori</H2> <FORM onsubmit=" this.Nome.optional = false; this.Cognome.optional = false; return verify(this);"> Nome: <INPUT type="text" name="Nome"> Cognome: <INPUT type="text" name="Cognome"><br> <INPUT type="submit" value="Spedisci i dati"> </FORM> </BODY> </HTML> true false Vedi gestione eventi NB 2 Attributo dell’oggetto “campo di input” di nome “Nome” this Vedi gestione eventi B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 40 40 JavaScript e CSS • Utilizzare JavaScript per cambiare dinamicamente gli attributi di stile applicati ai singoli elementi di un documento – La proprietà style di un elemento permette di scrivere gli stili associati all’elemento (stili in linea-come se fossero associati con l’attributo style) – E’ possibile leggere gli stili associati ad un elemento solo se associati con l’attributo style (non con i fogli stile) B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 41 41 JavaScript e CSS <HTML><HEAD> <SCRIPT language="JavaScript"> function uno() {document.all.container1.style.visibility="visible"; document.all.container2.style.visibility="hidden";} function due() {document.all.container1.style.visibility="hidden"; document.all.container2.style.visibility="visible";} </SCRIPT> <STYLE type="text/css"> #container1 { position:absolute; top: 2in; left: 2in; width: 2in; visibility: visible; } ………… B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 42 42 JavaScript e CSS #container2 { <FORM> position:absolute; <INPUT name="Adamello1" type="button" top: 2in; value="Adamello" left: 2in; onclick="uno()"> width: 2in; <INPUT name="Adamello2" type="button" visibility: hidden; value="Lobbie" } onclick="due()"> </STYLE> </FORM> </HEAD> </BODY> <BODY> </HTML> <H1>Scegli il luogo</H1> <DIV id="container1"> <IMG src="..\immagini\ada_sal.jpeg" alt="Adamello“ width="300" height="300"> <P><b>l'Adamello da sud</b></P> </DIV> <DIV id="container2"> <IMG src="..\immagini\ada_lobbie.jpeg" alt="Corno Bianco“ width="300" height="300" > <P><b>Le Lobbie da Nord</b></P> </DIV> …………………….. B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 43 43 Gestione degli eventi • Schema di gestione degli eventi – Ogni volta che un fatto significativo definito (es. fine caricamento) accade ad un documento o ad una sua parte (es. click sul pulsante di invio form) – il browser genera un evento – Un’applicazione JavaScript può registrare un gestore di eventi per quell’evento (porzione di codice o funzione associata all’evento) – Quando si verifica l’evento il browser richiama il gestore B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 44 44 Gestione degli eventi • Eventi e tipi di eventi – Eventi di base (click del mouse) – Eventi semantici (inoltro di un modulo) onclick onload onfocus onsubmit onblur … onkeydown onkeyup onchange onmouseover onmouseout … B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 45 45 Gestione degli eventi • Registrazione del gestore di evento • Si utilizzano gli attributi degli elementi HTML che associano eventi a tag • Il gestore è una stringa di codice JavaScript utilizzata come valore dell’attributo <input type="button" value=“Premi qui" onclick="alert("grazie");"> <input type="button" value="Calcola" onclick="eleva_al_quadrato();"> B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 46 46 Gestione degli eventi • Restituzione dello stato • Il codice del gestore di eventi può contenere un’istruzione return che valuta un’espressione e restituisce true / false <FORM method= POST action="http://nome.server/cgi.bin/programma" onsubmit="return validateForm();"> • Significato del valore restituito per il browser: – All’accadere dell’evento il browser esegue un’azione di default (es. inviare la form) – La restituzione di false al browser evita l’esecuzione B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 47 47 Gestione degli eventi • this • Richiamare un gestore di eventi significa chiamare un metodo dell’elemento su cui si è verificato l’evento • this si riferisce all’elemento che ha attivato l’evento B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 48 48 Gestione degli eventi //Funzione di verifica della form function verify(f) { … //se la stringa dei campi vuoti è vuota restituisce true //altrimenti visualizza il messaggio e restituisce false if (!empty_fields) return true; if (empty_fields){ msg = "I seguenti campi obbligatori sono vuoti:" + empty_fields + "\n"; alert(msg); return false; } } </SCRIPT> Set a true o false lo … stato di ritorno B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 49 49 Gestione degli eventi <BODY> <H2>Controllo dei campi obbligatori</H2> <FORM method= GET action="http://nome.server/cgi.bin/programma" onsubmit= "this.Nome.optional = false; this.Cognome.optional = false; return verify(this);"> Nome: <INPUT type="text" name="Nome"> Cognome: <INPUT type="text" name="Cognome"><br> <INPUT type="submit" value="Spedisci i dati"> </FORM> </BODY> </HTML> B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi true false Gestisce stato ritorno this L’oggetto Form 50 50 Gestione degli eventi • Modelli di gestione di eventi: – – – – Modello di base portabile Modello ad eventi standard DOM Level2 Modello Internet Explorer Modello Netscape • Problemi di compatibilità tra browser diversi B5 Java Script B5 Java Script Paolo Salvaneschi Paolo Salvaneschi 51 51