Cenni su ECMAscript/Javascript
|
|
|
- Clementina Giuseppe
- 5 anni fa
- Visualizzazioni
Transcript
1 Cenni su ECMAscript/Javascript Vincenzo Della Mea (PWLS Appendice B) Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 1
2 Sommario Scripting client e server side principi Scripting client-side Javascript a cosa serve? Il linguaggio Javascript Basi Esempi Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 2
3 Linguaggi di scripting linguaggi di programmazione per automazione, manipolazione, e personalizzazione delle funzioni fornite da un sistema software (che di solito incorpora il linguaggio di scripting stesso) Web scripting: il sistema software è costituito da client e server Web (browser, server http) client-side: il linguaggio fornisce costrutti per interagire con ciò che appare nel browser (finestre, documenti HTML e CSS) e per gestire input/output utente server-side: il linguaggio fornisce costrutti per interagire con le informazioni disponibili al server http (dati client, richieste,risorse locali) i programmi sono contenuti, direttamente o indirettamente, nei file HTML (ed interpretati rispettivamente dal browser o da un modulo del server) Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 3
4 CLIENT Schema globale di funzionamento SERVER FILE XHTML contenente: script output (xhtml) output, dhtml, interazione,... script output (xhtml) http server->client script interpretato nel browser FILE XHTML contenente: script output (xhtml) script client side script output (xhtml) script interpretato da un modulo del server FILE XHTML contenente: script server side script client side script server side Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 4
5 ECMAScript/Javascript in principio, sia client- che server-side usato essenzialmente lato client ECMAScript è il nome standard (~) di Javascript (Netscape) e Jscript (Microsoft) specifica ECMA-262: Caratteristiche: linguaggio orientato agli oggetti (con semplificazioni) sintassi simile a Java in congiunzione con DOM (Document Object Model) permette il cosiddetto Dynamic HTML (DHTML): pagine interattive e contenuto modificabile Nuova vita con AJAX Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 5
6 A cosa serve? a controllare ed elaborare l input utente nei form, prima che venga spedito al server; a creare pagine che funzionano diversamente su browser diversi (per venire incontro alle varie incompatibilità); a creare piccole animazioni (es rollover images, ecc.) a interagire con l utente in generale; a interagire con aspetti del browser (dialoghi,nuove finestre, ecc.)... Applicazioni web ricche con AJAX Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 6
7 ECMAscript: basi Un programma è una collezione di oggetti comunicanti. Gli oggetti sono insiemi di proprietà con attributi che spiegano come usarle (es.: ReadOnly). Proprietà: contengono oggetti, valori primitivi o metodi. Valori primitivi: tipi predefiniti Undefined, Null, Boolean, Number, String. Oggetti predefiniti: Global, Object, Function, Array, String, Boolean, Number, Math, Date, RegExp, Error, DOM: oggetti associati al browser ed alle pagine visualizzate, input/ouput. Metodi: funzioni associate agli oggetti. Usuali operatori predefiniti (operazioni, confronti, ecc.). Funzioni definibili dall utente. Niente input/output (dato dall ambiente ospite, es.: DOM). Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 7
8 Dove vanno gli script? un programma ECMAscript si chiama script; di solito è costituito da una o più funzioni richiamate in base all input dell utente; è possibile inserire gli script: nell intestazione o nel corpo di un documento XHTML (tag <script>), in un file esterno da richiamare tramite URI, direttamente in appositi attributi degli elementi XHTML. Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 8
9 Il solito primo programma <html> <head> <title>esempi ECMAscript</title> </head> <body> che linguaggio usiamo? <h1>primo esempio</h1> <p>testo scritto con ECMAscript:</p> <script type="text/javascript"> document.writeln("<p>buongiorno, mondo</p>"); </script> </body> </html> writeln è un suo metodo, e scrive una linea di testo document è un oggetto definito nel DOM, e si riferisce al documento HTML o XHTML Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 9
10 Secondo esempio <h2>secondo esempio</h2> <p>viene mostrato un dialog box...</p> <script type="text/javascript"> window.alert("buongiorno, mondo"); </script> alert è un suo metodo, e visualizza un dialogo window è un oggetto definito nel DOM, e si riferisce alla finestra corrente Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 10
11 Terzo esempio <h2>terzo esempio</h2> <p>usiamo delle variabili...</p> <script type="text/javascript"> var oggi = new Date(); var testo="oggi è il : " +oggi.tostring(); document.writeln(testo); </script> + è un operatore predefinito tostring è un operatore per la conversione Date è un oggetto predefinito; se il costruttore new è usato senza argomenti, restituisce la data corrente Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 11
12 Visibilità delle variabili In Javascript le variabili possono essere: globali (una variabile dichiarata al di fuori di tutte le funzioni, con o senza parola chiave var, è globale: può essere usata ovunque nel documento); locali (una variabile dichiarata all interno di una funzione è locale: può essere usata solo all interno della funzione in cui è definita). Eccezione: una variabile dichiarata all interno di una funzione senza parola chiave var è accessibile globalmente (ma solo dopo che la funzione che la dichiara viene richiamata). Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 12
13 Quarto esempio <h2>quarto esempio</h2> <p>un possibile input dell'utente...</p> <p onmouseover='window.alert("non farlo...")'>cosa succede quando passo con il mouse su questo paragrafo?</p> onmouseover è un attributo comune (come onclick, onload, ecc.). Il suo valore permette di richiamare una funzione Javascript quando il mouse passa sull elemento. Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 13
14 <head><title>esempi ECMAscript</title> <script type="text/javascript"> function quintoesempio() { var adesso = new Date(); window.alert(adesso.tostring()); } </script> </head> <body> Quinto esempio definisco una funzione nello head la richiamo nell elemento <h2>quinto esempio</h2> <p>come prima, più elegante...</p> <p onclick="quintoesempio()">per favore, che ora è?</p> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 14
15 DOM - Document Object Model è un interfaccia indipendente da piattaforma e linguaggio di programmazione che permette di accedere a struttura, contenuto e stile di un documento web (XHTML, XML) due raccomandazioni W3C scopo: accedere ai documenti caricati dal browser modificare dinamicamente il contenuto delle pagine (struttura, contenuto, stile) in ECMAscript, viene implementata da una serie di oggetti che rappresentano documenti, finestre, eventi, ecc. Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 15
16 W3C DOM Diversi livelli: Level 1: Core, HTML Level 2: Core, Viewes, Events, Style, etc i browser non implementano tutto correttamente! ma si stanno adeguando alla versione W3C Compatibilità dei diversi browser: Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 16
17 Oggetti importanti document: documento HTML/XHTML, contenuto in un oggetto di tipo window e contenente un numero arbitrario di elementi childnodes, doctype, URL, title, StyleSheets,... element : elementi XHTML (XML) in un documento. Alcuni elementi speciali hanno metodi speciali (body, table) attributes, classname, childnodes, style,... nodelist: array di elementi attribute: attributi di un elemento window: finestra in cui è visualizzato il documento name, location, document, locationbar, history,... event: evento di input (gestione mouse, tastiera, ) Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 17
18 Sesto esempio: head <head><title>esempi DOM</title> <script type="text/javascript"> function elemento(el) { testo = document.createtextnode(el.tagname); tipo = document.getelementbyid("tipo"); tipo.replacechild(testo,tipo.firstchild); } </script> recupero l elemento </head> con id=tipo creo un nodo testuale rimpiazzo il primo (e unico) con contenuto uguale figlio di tipo con il nome del tag al nome del tag di el Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 18
19 <body> Sesto esempio: body <h1 onclick="elemento(this);">esempi DOM</h1> <h2 onclick="elemento(this);">primo esempio</h2> <p>sei posizionato su un elemento di tipo <strong id="tipo">-</strong>.</p> <p onclick="elemento(this);">questo è un paragrafo.</p> <ul> <li onclick="elemento(this);">questo è un elemento di una lista</li> <li onclick="elemento(this);">anche questo</li> </ul> <h3 onclick="elemento(this);">una intitolazione di terzo livello</h3> <p onclick="elemento(this);">seguita da un paragrafo</p> ho associato l azione elemento(this) tramite evento onclick. this è l elemento stesso, che viene passato come argomento Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 19
20 Sesto esempio: discussione la funzione elemento(el) ricava il nome del tag dell elemento el (come stringa) e lo sostituisce al contenuto dell elemento il cui id è tipo. è diverso dall uso di document.writeln! per fare ciò, estrae l elemento il cui id è tipo dalla lista degli elementi del documento se la richiamo tramite onclick= elemento(this), l argomento è uguale all elemento chiamante e quindi viene stampato il suo tag. Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 20
21 Settimo esempio: rollover tipica applicazione di Javascript quando passo con il mouse su un immagine, essa cambia si può fare in tanti modi ne vediamo uno compatibile con W3C DOM non adatto ai browser più vecchi Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 21
22 Settimo esempio: head <head><title>esempi DOM</title> <script type="text/javascript"> function normale() { imm = document.getelementbyid("cambia"); imm.setattribute("src", " latoserver.dimi.uniud.it/~vdm/icona1.png "); } function sparisci() { imm = document.getelementbyid("cambia"); imm.setattribute("src", " latoserver.dimi.uniud.it/~vdm/icona2.png "); } </script> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 22
23 Settimo esempio: body <body> <h1>esempio di rollover image</h1> <p>utilizzando il DOM W3C</p> <img id="cambia" src="icona1.png" onmouseover="sparisci();" onmouseout="normale();"> </body> dichiaro due funzioni che impostano l attributo src dell elemento con id cambia all una o l altra immagine utilizzando i due attributi onmouseover e onmouseout, associo le due funzioni prima dichiarate all elemento img con id cambia Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 23
24 DOM e Javascript (2) Form, esempi Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 24
25 Strutture di controllo Sequenza: {istr1; istr2;.} if(condizione) istruzione else if (cond2) istruzione2 else istruzione3; for(varespr; espr1;espr2) istruzione; es: for(var i=0; i<max; i++) document.writeln(i); do istruzione while(condizione); es: do x=x+1 while (x<75); while(condizione) istruzione; es: while (x<75) do x=x+1; (break, continue, for-in,..) Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 25
26 Attenzione! ai cicli infiniti non c è modo di uscirne facilmente! Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 26
27 Input utente: i form un form è un elemento XHTML che contiene elementi speciali, detti controlli, che permettono l input dall utente: campi di testo, bottoni, radio button, checkbox, etc. l utente completa il form i dati così ottenuti vengono di solito inviati ad un server per elaborazioni successive Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 27
28 <form> <form action= URI della risorsa che manipolerà i dati method= post get (metodo http di invio) enctype= tipo codifica (es. application/xwww-form-urlencoded ) id= name=. >controlli</form> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 28
29 Controlli/1 <label for= controllo accesskey= carattere > etichetta per il controllo con id specificato in for=... <input type= text password checkbox radio submit reset file hidden image button id= name= value= valoreiniziale. /> type= text : campo di testo type = submit : bottone di invio type= reset : bottone di cancellazione type=hidden: valori nascosti passati al server. Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 29
30 Controlli/2 <select size="dimensione" multiple=""> <option selected="" value="val1">valore 1</ option> <option value="val2">valore 2</option> </select> selezione tra più item (es. tramite menu popup o lista di selezione), eventuale selezione multipla ed eventuale opzione preselezionata <textarea.rows="righe" cols="colonne">testo editabile</textarea> input di testo su più linee Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 30
31 Esempio 8: un form <form action="" method="post" id="modulo" ><p> <label for="nome">nome:</label> <input type="text" id="nome" /> <label for="cognome">cognome:</label> <input type="text" id="cognome" /> <br /> <label for="eta">età</label> <input type="text" id="eta" /> <label for="via">indirizzo</label> <input type="text" id="via" size="40" /> <br /> <input type="submit" value="spedisci" /></p> </form> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 31
32 Es.8: aggiungiamo una selezione <label for="condizione">condizione:</label> <select name="condizione" id="condizione"> <option value="studente">studente</option> <option value="lavoratore">lavoratore</option> <option value="pensionato">pensionato</option> <option value="disoccupato">disoccupato</option> </select> <br /> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 32
33 Form e Javascript attributi che permettono di agire in corrispodenza di eventi utente che accadono nel form o nei controlli: in <form>: i soliti + onsubmit, onreset, onkeypress, onkeydown, onkeyup, nei controlli: i soliti + onfocus, onblur, onselect, onchange, onkeypress, onkeydown, onkeyup,... Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 33
34 Es.8: aggiungiamo delle verifiche In head: function controlla() { f = document.forms["modulo"]; c = f.elements; if(!c["nome"].value) window.alert("attenzione: manca il nome!"); if(!c["cognome"].value) window.alert("manca il cognome!"); anni = (c["eta"].value)/1; if(!anni (anni<=0) (anni>120)) window.alert("eta sbagliata"); } In <form >:...onsubmit= controlla();return false quando si cerca di spedire il form, viene verificata la presenza di nome cognome ed età numerica <120 Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 34
35 Es.8-2: modifica In head: function controlla() { f = document.forms["modulo"]; c = f.elements; errore=""; if(!c["nome"].value) errore=errore+"attenzione: manca il nome!\n"; if(!c["cognome"].value) errore=errore+"manca il cognome!\n"; anni = (c["eta"].value)/1; if(!anni (anni<=0) (anni>120)) errore=errore+ Eta' sbagliata"; if(errore) window.alert(errore); } In <form >:...onsubmit= controlla();return false quando si cerca di spedire il form, viene verificata la presenza di nome cognome ed età numerica <120 Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 35
36 Es.8-3: configurare la selezione... In head: function impostaopzioni() { f = document.forms["modulo"]; c = f.elements; anni=(c["eta"].value)/1; if(anni<=16) c["condizione"].selectedindex = 0; if(anni>=65) c["condizione"].selectedindex = 2; } Nel form: <input type="text" id="eta" onblur="impostaopzioni();" /> Quando si esce dal campo eta, con Javascript si pre-seleziona un elemento del menu condizione Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 36
37 Esempio 9: lo stile In head: function cambia() { f = document.forms["modulo2"]; c = f.elements; dove = document.getelementbyid("qui"); dove.style.color = c["colore"].value; } In body: <form action="" method="post" id="modulo2"> <p id="qui"> <label for="colore">colore:</label> <select id="colore" size="1" onchange="cambia()"> <option selected="" value="black">nero</option> <option value="yellow">giallo</option> <option value="red">rosso</option> <option value="green">verde</option> </select></p></form> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 37
38 Trucco utile <script type="text/javascript"> <!-- codice javascript //--> Per nascondere gli script Javascript ai browser che non li supportano: </script> Complementi di Tecnologie Web A.A M. Franceschet, V.Della Mea e I.Scagnetto - 38
Javascript. - Corso Web Design - Media Dream Academy. Stefano Gaborin
Javascript - Corso Web Design - Media Dream Academy Stefano Gaborin stefano.gaborin@above.company www.above.company Cos è Javascript? JavaScript è un linguaggio di programmazione interpretato. Utilizzato
Tecnologie di Sviluppo per il Web
Tecnologie di Sviluppo per il Web JavaScript Introduzione versione 2.1 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina) G. Mecca Università della Basilicata
JavaScript JavaScript Programmazione lato client JScript JavaScript ECMAScript
Programmazione lato client Netscape: Microsoft: JScript ECMAScript (ECMA-262) (European Computer Manufactures Association) Linguaggio di script interpretato con alcune caratteristiche Object Oriented HTTP
Modulo o Form in Html
Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona
HTML Interazione con l utente
HTML Interazione con l utente Il web è interattivo e per questo motivo una pagina html deve prevedere la possibilità, per l'utente, di inviare informazioni o effettuare delle scelte. Il linguaggio HTML,
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
D B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
Programmazione Web. Javascript.
Programmazione Web Javascript diegozabot@yahoo.it Introduzione Cos è Javascript è un linguaggio di scripting lato client, interpretato direttamente dal browser. Implementato per la prima volta in Netscape
Programmazione client-side: JavaScript
Programmazione client-side: JavaScript JavaScript: Introduzione JavaScript è un linguaggio di programmazione/scripting molto flessibile, utilizzato in vari settori applicativi (proposto da Netscape) Nelle
Introduzione alla programmazione lato client con Javascript
Introduzione alla programmazione lato client con Javascript Luca Di Gaspero Dipartimento di Ingegneria Elettrica, Gestionale e Meccanica Università degli Studi di Udine Docente Dipartimento di Ingegneria
@2011 Politecnico di Torino 1
Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti
scrivere window.alert(). 2 Nell esempio sarebbe scritto solo var hello, senza pertanto attribuire alla variabile hello alcun valore
In genere il metodo alert() è usato per verificare il valore delle variabili durante la fase di correzione degli errori (debugging), fase che può essere svolta anche con l ausilio di appositi programmi
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
JavaScript. Caratteristiche del JavaScript. Javascript consente di rendere dinamiche le pagine HTML
JavaScript Caratteristiche del JavaScript Javascript consente di rendere dinamiche le pagine HTML Javascript è un linguaggio di programmazione con il quale è possibile produrre applicazioni eseguibili
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
HTML 6. Il modulo. Tipi di controlli. Esempio di modulo. I moduli a.k.a. form
I moduli a.k.a. form HTML 6 Il modulo Un modulo è un'area della pagina predisposta per accettare dei dati in ingresso dall'utente Gli utenti forniscono dati al WEB server che restituisce una risposta (pagina
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
Esercizi su JavaScript, DOM e Web Storage
Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma, a.a. 2017/2018 Esercizi su JavaScript, DOM e Web Storage Esercizio
HTML: CSS: Le proprietà di base per dare stile ai form
HTML: Elementi di base: caselle e aree di testo, radio button, checkbox, bottoni submit e reset, campi nascosti, file upload, menù di selezione. Accessibilità dei form: label, fieldset e legend, optgroup
Caratteristica Web app. Desktop app.
Filippo Geraci Caratteristica Web app. Desktop app. Grafica buona Illimitata Interattivita buona Illimitata Uso della rete Molto elevato Dipende da app. Accessibile da Ogni computer Dove installato Aggiornamenti
JavaScript (2) Gestori di eventi. Programmazione lato client. Durante l interazione con l utente il browser genera un certo numero di eventi
Dove si scrivono gli script? Programmazione lato client JavaScript (2) istruzione1; istruzione2; istruzione3; Gli script sono eseguiti dal browser durante l analisi del codice HTML Attenzione:
Caratteristica Web app. Desktop app.
Filippo Geraci Caratteristica Web app. Desktop app. Grafica buona Illimitata Interattivita buona Illimitata Uso della rete Molto elevato Dipende da app. Accessibile da Ogni computer Dove installato Aggiornamenti
JavaScript (2) Programmazione lato client. Dove si scrivono gli script? Gli script sono eseguiti dal browser durante l analisi del codice HTML
Programmazione lato client JavaScript (2) Dove si scrivono gli script? istruzione1; istruzione2; istruzione3; Gli script sono eseguiti dal browser durante l analisi del codice HTML Attenzione:
Programmazione lato client. JavaScript (2) Applicazioni di Rete M. Ribaudo - DISI. Dove si scrivono gli script?
Programmazione lato client JavaScript (2) Dove si scrivono gli script? istruzione1; istruzione2; istruzione3; Gli script sono eseguiti dal browser durante l analisi del codice HTML Attenzione:
"-//W3C//DTD XHTML 1.1//EN
XHTML 1.1 extensible HyperText Markup Language DOCTYPE All inizio di un documento xhtml bisogna specificare a quali regole ci atteniamo. Tutti i documenti che scriveremo inizieranno con 2 righe particolari:
HTML 6. I moduli a.k.a. form
HTML 6 I moduli a.k.a. form 1 Il modulo Un modulo è un'area della pagina predisposta per accettare dei dati in ingresso dall'utente Gli utenti forniscono dati al WEB server che restituisce una risposta
JavaScript Gestione Eventi. Prof. Francesco Accarino IIS Atiero Spinelli Sesto San Giovanni via leopardi 132
JavaScript Gestione Eventi Prof. Francesco Accarino IIS Atiero Spinelli Sesto San Giovanni via leopardi 132 Gli eventi Gli eventi sono utilizzati per richiamare istruzioni o funzioni. Ad un evento può
Form HTML. <form> campi del modulo </form>
Form HTML I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. L inserimento di un form in una pagina web avviene mediante il tag FORM. Attributi del form campi
JavaScript (4) Programmazione lato client. document.forms[] Oggetto form. Oggetto form. È uno degli oggetti più importanti del DOM
![JavaScript (4) Programmazione lato client. document.forms[] Oggetto form. Oggetto form. È uno degli oggetti più importanti del DOM](/thumbs/55/36873350.jpg "JavaScript (4) Programmazione lato client. document.forms[] Oggetto form. Oggetto form. È uno degli oggetti più importanti del DOM")
Programmazione lato client JavaScript (4) Oggetto form Oggetto form È uno degli oggetti più importanti del DOM Durante la lettura di un file HTML, viene creato un array con tante celle quanti sono i moduli
HTML Settima lezione. 7 Aprile di Ivano Stranieri
HTML 4.01 Settima lezione 7 Aprile 2004 di Ivano Stranieri 0 Lezione precedente Cosa sono i FRAME A cosa servono i FRAME Sintassi Attributi Collegamenti e NOFRAME IFRAME Vantaggi e svantaggi dei FRAME
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8. Andrea Marchetti IIT-CNR 2011/2012
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8 Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2011/2012 Architettura di una applicazione Web Browser Web HTTP Server Web Dati View Control
xhtml e css vengono letti dal browser È possibile aggiungere script vengono eseguiti dal browser attenzione alla sicurezza!!
Dynamic (x)html DHTML Pagine dinamiche xhtml e css vengono letti dal browser È possibile aggiungere script vengono eseguiti dal browser attenzione alla sicurezza!! possono gestire l interazione (complessa)
Guida introduttiva al PHP
Fabio Castellini 26/01/2016 Guida introduttiva al PHP Cos'è il PHP? Il PHP è un linguaggio di scripting interpretato, simile al JavaScript, per intenderci, originariamente concepito per la programmazione
JavaScript - 2. Ambiente di esecuzione Javascript
JavaScript - 2 Ambiente di esecuzione Javascript L ambiente del web browser 1 Per capire come funziona JavaScript lato client bisogna capire la struttura dell ambiente di programmazione offerto da un web
HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo
JavaScript è un linguaggio di scripting sviluppato per dare interattività alle pagine HTML Può essere inserito direttamente nelle pagine Web In
Prof. Puglisi JavaScript è un linguaggio di scripting sviluppato per dare interattività alle pagine HTML Può essere inserito direttamente nelle pagine Web In pratica è lo standard «client-side» per implementare
Politecnico di Milano Facoltà del Design Bovisa. Ing. Marco Funaro Dipartimento di Elettronica e Informazione.
Introduzione a JavaScript Facoltà del Design Bovisa Ing. Marco Funaro Dipartimento di Elettronica e Informazione funaro@elet.polimi.it Un po di storia Introdotto per la prima volta nel 1995 per Netscape
Prefazione... xi. Da leggere prima di iniziare...xiv. Capitolo 1 Introduzione a JavaScript Sezione A Programmazione, HTML e JavaScript...
SOMMARIO Prefazione... xi Panoramica del libro... xi Caratteristiche distintive...xii Aspetti qualificanti del libro...xii Browser Web da usare... xiii Ringraziamenti... xiii Da leggere prima di iniziare...xiv
Corso di Web Programming
Corso di Web Programming 7. JavaScript Parte II (Complementi) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica
Lato client: vuol dire che le operazioni programmate vengono svolte e visualizzate direttamente sul computer dell'utente collegato
Introduzione al linguaggio PHP Hypertext preprocessor Lato client: vuol dire che le operazioni programmate vengono svolte e visualizzate direttamente sul computer dell'utente collegato Lato server: vuol
I moduli HTML Interazione per l invio di informazioni in Internet
I moduli HTML Interazione per l invio di informazioni in Internet Sviluppo di siti web UD09 Fablab Design Interazione e uso dei moduli Uno dei fattori che ha decretato il successo del Web è senz'altro
HTML Sintassi di HTML Tag principali per i contenuti I Forms
Lezione 1 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni
Programmazione web lato client con JavaScript. Marco Camurri 1
Programmazione web lato client con JavaScript Marco Camurri 1 JavaScript E' un LINGUAGGIO DI PROGRAMMAZIONE che consente di inserire codice in una pagina web Sintassi simile a Java (e al C), ma NON E'
JavaScript Distribuire il calcolo
Documenti e Calcolo JavaScript Distribuire il calcolo Prof. Andrea Omicini Corso di Sistemi Distribuiti A.A. 2002/2003 Parte IV HTML Linguaggio per la descrizione di documenti Information-oriented Mobilità
Metodologie Informatiche applicate al Turismo
Metodologie Informatiche applicate al Turismo 11. Realizzare Siti Dinamici e Applicazioni Web Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it
Corso di JavaScript. M. Malatesta 4-Funzioni e strutture di controllo-03
Corso di JavaScript 4 Funzioni e strutture di controllo 1 Prerequisiti Conoscenza HTML Architettura client-server Programmazione ad oggetti (Java, C++) Concetto di programmazione ad eventi Parametri formali
La connessione ai database MySQL tramite script PHP versione 5.5
La connessione ai database MySQL tramite script PHP versione 5.5 Php è un linguaggio di scripting che estende le funzionalità del server Web, mentre MySQL è un programma server che si occupa della gestione
Internet, il web e il linguaggio HTML. percorso 3. Form
Form Se le pagine web utilizzassero il linguaggio HTML limitatamente ai soli tipi di tag visti sino a questo punto, la comunicazione tra impianto tecnologico (computer, dati, programmi ecc.) ed utente
AJAX. Riccardo Rosati
AJAX Riccardo Rosati Linguaggi e tecnologie per il Web Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma a.a. 2016/2017 http://www.dis.uniroma1.it/~rosati/lw/ AJAX AJAX
AJAX. Riccardo Rosati
AJAX Riccardo Rosati Linguaggi e tecnologie per il Web Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma a.a. 2017/2018 http://www.dis.uniroma1.it/~rosati/lw/ AJAX AJAX
STRUTTURA BASE DELLA PAGINA HTML
INDICE INDICE... 1 Convenzioni e simboli usati... 1 STRUTTURA BASE DELLA PAGINA HTML... 1 Alcuni dei Principali TAG Html:... 2 Gli attributi dei TAG Html:... 2 ALIGN... 2 attributi del tag ... 2
Array, Funzioni e interazione con l utente
Array, Funzioni e interazione con l utente Laboratorio di Progettazione Web AA 2010/2011 Claudio Lucchese / Chiara Renso ISTI- CNR claudio.lucchese@isti.cnr.it Gli array sono contenitori in grado di memorizzare
JAVASCRIPT. Programmazione iterativa, Introduzione al DOM
JAVASCRIPT Programmazione iterativa, Introduzione al DOM PROGRAMMAZIONE ITERATIVA LA PROGRAMMAZIONE ITERATIVA Flusso naturale del programma: viene eseguita un istruzione dopo l altra fino a che non si
Il tag form indica l'inizio della costruzione di un modulo. Necessita del tag di chiusura
LE FORM Le form, note in italiano anche come moduli sono delle strutture che permettono all'utente di inserire dei dati o di effettuare delle scelte. Le form, prese singolarmente non sono nient'altro che
LEZIONE 5. Introduzione a Javascript
LEZIONE 5 Introduzione a Javascript ARCHITETTURA CLIENT SERVER Richiesta Request Indirizzo Web (URL) + dati Risposta Response HTML-CSS-Javascript WEB SERVER Un Web Server è un server che fornisce servizi
JAVASCRIPT. JavaScript è un linguaggio di scripting sviluppato per dare interattività alle pagine HTML.
JAVASCRIPT JavaScript è un linguaggio di scripting sviluppato per dare interattività alle pagine HTML. Può essere inserito direttamente nelle pagine Web è lo standard «client-side» per implementare pagine
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione
HTML Ottava lezione. 14 Aprile di Ivano Stranieri
HTML 4.01 Ottava lezione 14 Aprile 2004 di Ivano Stranieri 0 Lezione precedente Cosa sono i FORM I moduli per interagire con l utente Tag INPUT Bottoni Campi testuali Le scelte Altri tipi di campi particolari
1. (6 punti) Spiegare il significato, in modo dettagliato, del pezzo di codice seguente di una servlet:
Università degli Studi di Camerino Corso di Laurea in Informatica A.A. 2015/2016 Prova Scritta di Programmazione Web, 21 Febbraio 2017 VIII Appello Docenti: Francesco Tiezzi e Luca Tesei Nome e Cognome:
Il linguaggio PHP. Elementi base
Il linguaggio PHP Elementi base Il Linguaggio PHP PHP è un acronimo ricorsivo che sta per PHP Hypertext Preprocessor Sintassi di base: un blocco di scripting PHP può stare ovunque in un documento, inizia
Introduzione a JavaScript
Introduzione a JavaScript Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it Documenti e Calcolo HTML Linguaggio per la descrizione
Mantenimento dello stato
Mantenimento dello stato Laboratorio Progettazione Web AA 2010/2011 Claudio Lucchese / Chiara Renso ISTI- CNR claudio.lucchese@isti.cnr.it Abbiamo visto come il passaggio di informazioni (parametri) tra
Corso di Applicazioni Telematiche
Programmazione client-side: JavaScript e jquery Corso di Applicazioni Telematiche A.A. 2009-10 Prof. Simon Pietro Romano Università degli Studi di Napoli Federico II Facoltà di Ingegneria Programmazione
Ogni script in HTML deve essere inserito in una coppia di tag <script> e </script>.
Programmazione web lato client Script Frammento di codice, in genere di complessità relativamente bassa e privo di interfaccia grafica, scritto in un linguaggio di programmazione di tipo interpretato detto
OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
Mantenimento dello stato
Mantenimento dello stato Laboratorio Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - c.renso@isti.cnr.it Abbiamo visto come il passaggio di informazioni (parametri) tra le pagine possa avvenire
Corso di PROGRAMMAZIONE IN RETE
Corso di PROGRAMMAZIONE IN RETE Laurea Specialistica - Media Education Dr. Annamaria Bria 1 1 Dipartimento di Matematica Università della Calabria Riferimenti MANUALE http://www.w3.org/tr/1999/rec-html401-19991224/
HTML. Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file.
Con la sigla HTML si intende: HYPER TEXT MARKUP LANGUAGE HTML Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file. Iper testo Un documento o pagina puo essere collegato ad
3.3.6 Gli operatori Le funzioni di accesso al tipo Le strutture di controllo Le funzioni
IIndice Capitolo 1 Da dove partiamo: pagine web statiche 1 1.1 Principi di base.............................. 1 1.1.1 Il paradigma client-server.................... 1 1.1.2 Ipertesto, multimedia, ipermedia................
Introduzione a JavaScript. Prof. Francesco Accarino IIS Altiero Spinelli via leopardi 132 Sesto San Giovani
Introduzione a JavaScript Prof. Francesco Accarino IIS Altiero Spinelli via leopardi 132 Sesto San Giovani Principali caratteristiche di JavaScript È un linguaggio interpretato È un linguagio basato sugli
Il Web come Interfaccia Utente di un Sistema Informativo
Web e basi di dati Il Web come Interfaccia Utente di un Sistema Informativo Occorre un meccanismo di interazione con il DBMS (attraverso il server Web) per la specifica di query e/o modifiche, es.. basate
04/05/2011. Lezione 6: Form
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
HTML: tag. HTML: tag. HTML: tag. HTML: un semplice esempio
HTML: tag Alcuni tag prevedono un identificatore di inizio () e di fine marcatura () altri sono dei tag singoli (es.: , ). Esistono delle codifiche per rappresentare in modo universale
Interazione con l utente : i moduli.
Interazione con l utente : i moduli. Nelle lezioni fin qui riportate, non abbiamo mai trattato l input di utente. Nelle applicazioni web, l input dell utente si acquisisce tramite i moduli (o FORM) HTML.
Mashup con Javascript
Mashup con Javascript Browser components UI: address bar, back/forward button, bookmarking menu etc Every part of the browser display except the main window The browser engine - marshalls the actions between
ISTITUTO ISTRUZIONE SUPERIORE "Q. Sella" BIELLA
1) [40pt]Scrivere il codice html per la visualizzazione della form di figura e aggiungere il codice Javascript che realizzi le seguenti operazioni dopo aver cliccato sul pulsante Invia. Se non risulta
Javascript e CSS nelle pagine WEB
1 Javascript e CSS nelle pagine WEB Esempi applicativi Autrice: Turso Antonella Carmen INDICE ARGOMENTI 2... 5 LEZIONE 1... 6 COSA SONO I JAVASCRIPT... 6 LEZIONE 2... 8 STRUTTURA DEL LINGUAGGIO JAVASCRIPT
JavaScript - 4. Modello ad oggetti tradizionale. L ambiente del web browser 1
JavaScript - 4 Modello ad oggetti tradizionale L ambiente del web browser 1 Per capire come funziona JavaScript lato client bisogna capire la struttura dell ambiente di programmazione offerto da un web
Strumenti a disposizione
FORM Strumenti a disposizione L'HTML visto fino ad ora permette di descrivere solo documenti statici e passivi Colori, immagini, testi, etc... L'utente può solo interagire con i link Non sempre questo
Tecnologie di Sviluppo per il Web
Tecnologie di Sviluppo per il Web JavaScript Concetti Fondamentali versione 2.1 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina) G. Mecca Università
Il linguaggio JavaScript
Il linguaggio JavaScript Laura Farinetti Dip. Automatica e Informatica Politecnico di Torino farinetti@polito.it L. Farinetti - Politecnico di Torino 1 JavaScript z Linguaggio di scripting sviluppato da
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 7. HTML Parte III (Aspetti avanzati) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso
Corso di JavaScript. Prerequisiti. A1 - Introduzione. Conoscenza HTML Architettura client-server. M. Malatesta A1-Introduzione-01 14/05/2012
Corso di JavaScript A1 - Introduzione 1 Prerequisiti Conoscenza HTML Architettura client-server 2 1 Introduzione In questa Unità introduciamo il linguaggio JavaScript, descrivendone brevemente la nascita
Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL
Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL DOCUMENT OBJECT MODEL (DOM) DOM fornisce una rappresentazione del documento HTML in composizione gerarchica di oggetti (DOM TREE). Questo albero di
Divisions e spans. Esercizio. <html> <head> <title>esempio uso del tag span</title> <style> <!--
Divisions e spans L applicazione degli stili può essere eseguita anche su sezioni di testo tramite i tag div e span. Div suddivide il testo analogamente a come si suddivide un articolo in titolo, sottotitolo,paragrafi,
Un esempio. JavaScript. Un altro esempio. Un altro esempio
JavaScript Linguaggio definito da Netscape JScript: la versione MicroSoft (basata su ECMAScript) Serve ad arricchire una pagina HTML con codice da eseguirsi sul cliente Un esempio http://www.di.unipi.it/~ghelli/didattica/bdl07/es
Introduzione: programmazione lato server e CGI
(PWLS: intro cap.2, 2.2, 2.3, 2.4) Introduzione: programmazione lato server e CGI Vincenzo Della Mea (vincenzo.dellamea@uniud.it) Ivan Scagnetto (ivan.scagnetto@uniud.it) Complementi di Tecnologie Web
II LINGUAGGIO HTML...1
Indice 1 II LINGUAGGIO HTML...1 1.1 INTRODUZIONE AL WWW...1 1.2 IL DOCUMENTO HTML...2 1.2.1 Elementi...3 1.2.2 Attributi...4 1.2.3 Riferimenti a caratteri...4 1.2.4 Commenti...4 1.3 STRUTTURA GLOBALE DI
Un esempio. cizi/ese4/menusubmit.html :
JavaScript Linguaggio definito da Netscape JScript: la versione MicroSoft (basata su ECMAScript) Serve ad arricchire una pagina HTML con codice da eseguirsi sul cliente Un esempio http://www.di.unipi.it/~ghelli/didattica/bdl/eser
Linguaggi di scripting
Linguaggi di scripting In generale uno script è un piccolo programma (al limite una sola istruzione) il cui codice viene inserito all'interno di una pagina HTML o collegato ad esso, e interpretato dal
Argomenti XML JSON. Linguaggi per la definizione e lo scambio di dati strutturati, semi-strutturati, non strutturati. XML Data Model JSON
XML JSON Argomenti 2 Linguaggi per la definizione e lo scambio di dati strutturati, semi-strutturati, non strutturati XML Data Model JSON 3 XML XML extensible Markup Language 4 Modello di dati XML Nato
HTML ELEMENTI CONTENITORI. Elementi contenitori. <body> Nel body ci sono elementi vari (testi, immagini, moduli...)
HTML Elementi contenitori [corso avanzato] HTML5 ELEMENTI ELEMENTI CONTENITORI Nel body ci sono elementi vari (testi, immagini, moduli...) Oggi i siti organizzano lo spazio del body
Oggetto window. Proprietà dell'oggetto window
Oggetto window L'oggetto window rappresenta lo spazio fisico contenente il documento dell'utente ed è quello che si trova a livello più alto nel DOM. Questo oggetto in pratica rappresenta la finestra del