LEZIONE 5. Introduzione a Javascript

Transcript

1 LEZIONE 5 Introduzione a Javascript

2 ARCHITETTURA CLIENT SERVER Richiesta Request Indirizzo Web (URL) + dati Risposta Response HTML-CSS-Javascript

3 WEB SERVER Un Web Server è un server che fornisce servizi sul Web Per comunicare con il client usa i protocolli HTTP o HTTPS Elabora le richieste in arrivo dai client (HTTP request) Invia al client il risultato dell elaborazione (HTTP response): La richiesta può consistere in una semplice risorsa statica già esistente sul server (una pagina HTML, un immagine, ecc.). In questo caso la risorsa viene semplicemente inviata al client. In molti casi la richiesta presuppone la creazione della risorsa. In questo caso il web server esegue un programma e invia al client il risultato dell elaborazione. In ogni caso ciò che arriva la client e una risorsa web standard: una pagina web completa (HTML/CSS/Javascript) o un suo componente.

4 BROWSER Un Web browser è un HTTP client. È un programma, cioè, che interagisce con un HTTP server, richiedendone i servizi. Riceve i dati dal server e li ricompone Visualizza i risultati inviati dal server come pagine Web, mostrandone il contenuto e interpretando correttamente i linguaggi che vengono utilizzati per descriverne i contenuti Esegue programmi scritti in Javascript elaborando dati, coè, senza necessariamente coinivolgere il server.

5 LE APPLICAZIONI WEB Quindi programmare per il web significa scrivere due applicazioni in grado di comunicare tra loro. Oggi si parla di: Progettazione e programmazione Front End l applicazione client che invia richieste (e interpreta le risposte) Progettazione e programmazione Back End l applicazione server che riceve le richieste dell applicazione client, prepara le risposte e le invia al client.

6 L ELEMENTO FORM

7 FORM L elemento HTML Form, identificato dal tag <form></form> è uno degli elementi fondamentale nella costruzione della interattività di una pagina web e consente di inviare un gruppo di dati inseriti dall utente al server. È quindi l elemento fondamentare nella costruzione di una applicazione client-server. L'elemento <form> può contenere uno o più dei seguenti elementi del modulo: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>

8 ESEMPIO

9 ESEMPIO

10 ESEMPIO

11 ESEMPIO <form id="searchform" action="web"> <input id="q" name="q" value="" class="search-box" autocomplete="off" data-ordinal="0"> <input id="sbut" type="submit" value="cerca Risposte" class="cssbutton"> <input id="qsrc" type="hidden" name="qsrc" value="0"> <input id="origin" type="hidden" name="o" value="0"> <input id="partner" type="hidden" name="l" value="dir"> <input id="qo" type="hidden" value="homepagesearchbox" name="qo"> </form>

12 ESEMPIO

13 ESEMPIO Protocollo

14 ESEMPIO host/percorso

15 ESEMPIO separatore query string

16 ESEMPIO name value

17 ESEMPIO <form id="searchform" action="web"> <input id="q" name="q" value="" class="search-box" autocomplete="off" data-ordinal="0"> <input id="sbut" type="submit" value="cerca Risposte" class="cssbutton"> <input id="qsrc" type="hidden" name="qsrc" value="0"> <input id="origin" type="hidden" name="o" value="0"> <input id="partner" type="hidden" name="l" value="dir"> <input id="qo" type="hidden" value="homepagesearchbox" name="qo"> </form>

18 FORM Oltre agli attributi che condividono con tutti gli altri elementi HTML (id, class, style) l elemento form e gli elementi contenuti in un form hanno attributi specifici legati alla loro funzione di trasmissione dei dati. I più importanti sono: method e action (attributi dell elemento form) name e value (attributi degli elementi contenuti)

19 Attributo ACTION L' attributo action definisce l'azione da eseguire quando il form viene inviato. Normalmente, il modulo viene inviato ad una pagina web dinamica contenete cioè un programma eseguibile dal server. Se scrivo: <form action="action_page.php"> Verrà eseguito lo script server «action_page.php» e il risultato dell elaborazione verrà inviato al client.

20 Attributo METHOD L' attributo method specifica il metodo HTTP ( GET o POST ) da utilizzare per inviare i dati: <form action="action_page.php" method="get"> o: <form action="action_page.php" method= post"> Quando si utilizza GET, i dati del modulo saranno visibili nell url della pagina e non potranno superare i 2Kb:

21 Attributi NAME e VALUE L' attributo name specifica il nome con cui il dato inviato sarà identificato nell elaborazione lato server: <input id="q" name="q" value=""> L' attributo name specifica il valore iniziale che contiene il campo specificato <input id="origin" type="hidden" name="o" value="0">

22 INPUT L elemento <input> elemento è il più importante del <form> e in origine indica un generico elemento in grado interagire con l utente. La sua funzione è determinato dal valore che assume l attributo type che, quindi è obbligatorio.

23 INPUT <input type = "text"> definisce un campo di input di una riga per l'immissione di testo. <input type = "password"> definisce un campo password (come sopra ma le lettere immesse non sono visibili) <input type = "radio"> definisce un pulsante di scelta esclusiva tra più opzioni alternative che hanno lo stesso attributo name: <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>

24 INPUT <type = "checkbox" input> definisce una casella di controllo. Le caselle di controllo lasciare che un utente seleziona zero o più opzioni di un numero limitato di scelte. <input type = "submit"> definisce un pulsante che invia i dati. <input type = "reset"> definisce un pulsante che azzera i dati immessi. <input type = "button"> definisce un pulsante generico, che normalmente lancia un programma lato client. Per type = submit reset button l attributo value definisce l etichetta che vene mostrata sul pulsante.

25 TEXTAREA Il tag <textarea> definisce un controllo di input di testo multilinea. Un'area di testo può contenere un numero illimitato di caratteri. Per default il testo viene reso in un font a larghezza fissa (di solito Courier). <textarea rows="4" cols="50"> Inserisci un testo. </textarea>

26 BUTTON Il tag <button> definisce un pulsante cliccabile. Contrariamente che per l'elemento input all'interno di un elemento <button> Posso inserire qualsiasi tipo di contenuto. L attributo type può assumere i valori: submit, button e reset che hanno lo stesso significato che per l elemento input- <button type="button">cliccami!</button>

27 SELECT L'elemento <select> viene utilizzato per creare un elenco a discesa. I tag <option> all'interno dell'elemento <select> definiscono le opzioni disponibili nella lista. <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select>

28 JAVASCRIPT

29 COSA È JAVASCRIPT JavaScript è un linguaggio di programmazione.

30 PROGRAMMA È Una serie di istruzioni che il computer è in grado di eseguire Che elaborano DATI (INPUT) Per risolvere un problema implementando un algoritmo E ottenere un risultato (OUTPUT)

31 COSA È UN LINGUAGGIO DI PROGRAMMAZIONE E' un linguaggio formale dotato di una sintassi ben definita che viene utilizzato per scrivere programmi che realizzano algoritmi.

32 COSA È UN LINGUAGGIO DI PROGRAMMAZIONE Serve a facilitare la programmazione dei calcolatori rendendo possibile descrivere gli algoritmi e le strutture dei dati in una forma più vicina a quella del linguaggio umano scritto.

33 COSA È UN LINGUAGGIO DI PROGRAMMAZIONE A seconda del metodo utilizzato per tradurre il testo delle istruzioni in linguaggio macchina vengono suddivisi in due categorie: compilati e interpretati.

34 LINGUAGGI COMPILATI Il sorgente (un file di testo con le operazioni da eseguire) viene compilato in codice macchina e viene impacchettato in un particolare file detto eseguibile che il computer è in grado di eseguire direttamente senza bisogno di altro software; È specifico di un determinato sistema operativo e la compatibilità tra sistemi diversi può essere garantita solo dal fatto che esistano compilatori specifici per ogni sistema.

35 Linguaggi compilati Script e risorse: (che variano a seconda del linguaggio usato) Compilatore specifico del Sistema Operativo (Di solito in più passaggi) Un file di testo (file sorgente) viene trasformato in una serie di istruzioni semplici che il processore del computer è in grado di eseguire direttamente (codice macchina) File eseguibile Windows Linux Apple

36 LINGUAGGI SEMICOMPILATI Per semplificare la gestione della compatibilità non si compila il sorgente per uno specifico ambiente ma per una macchina virtuale. Per essere eseguiti i programmi presuppongono che la macchiana virtuale sia installata.

37 Linguaggi compilati Script e componenti Compilatore File eseguibile sulla Virtual Machine Virtual machine su Linux Questo schema vale sia per la Java Virtual Machine che per la Virtual Machine Flash (Adobe Air). Virtual machine su Windows Virtual machine su Apple

38 Linguaggi interpretati Script Interprete Lo script viene eseguito immediatamente: uno script javascript viene interpretato dal browser e da un output sul monitor, sulla stampante, un output audio, ecc.

39 COMPILATO <> INTERPRETATO compilazione: lo script viene elaborato dal compilatore prima di essere eseguito e la maggior parte degli errori di sintassi vengono individuati interpretazione: Lo script viene eseguito così com'è, il controllo della correttezza del codice è affidato direttamente all'esecuzione dello stesso.

40 JAVASCRIPT Script in inglese significa "copione" o "sceneggiatura",. Il browser legge una riga, la interpreta e la esegue, poi passa alla successiva e fa la stessa cosa, e così di seguito fino alla fine dello script. Javascript è un linguaggio interpretato L interprete utilizzato per eseguirlo è il browser

41 JAVASCRIPT 1. è in grado di leggere e scrivere gli elementi HTML. Tramite JavaScript è possibile modificare la struttura del documento HTML in tempo reale, senza interagire con il server 2. può essere utilizzato per convalidare i dati inseriti dall'utente prima di inviarli al server.

42 JAVASCRIPT 3. può essere utilizzato per avere informazioni sul Browser del visitatore. In questo modo possiamo decidere come comportarci a seconda del Browser che sta leggendo la pagina 4. può essere utilizzato per creare i cookie e quindi archiviare e recuperare informazioni sul computer del visitatore

43 COSA PUÒ FARE JAVASCRIPT: ESEMPI

44 CAMBIARE IL CONTENUTO HTML In Javascript molte istruzioni si chiamano metodi. Uno dei tanti metodi HTML è getelementbyid (). In questo esempio si utilizza il metodo per "trovare" l elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento ( innerhtml ) in "Ciao da JavaScript": document.getelementbyid("demo").innerhtml = "Ciao da JavaScript";

45 CAMBIARE IL CONTENUTO HTML In Javascript molte istruzioni si chiamano metodi. Uno dei tanti metodi HTML è getelementbyid (). In questo esempio si utilizza il metodo per "trovare" l elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento ( innerhtml ) in "Ciao da JavaScript": La pagina html document.getelementbyid("demo").innerhtml = "Ciao da JavaScript";

46 CAMBIARE IL CONTENUTO HTML In Javascript molte istruzioni si chiamano metodi. Uno dei tanti metodi HTML è getelementbyid (). In questo esempio si utilizza il metodo per "trovare" l elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento ( innerhtml Trova ) in nella "Ciao pagina html da l elemento JavaScript": che ha come attributo id="demo" document.getelementbyid("demo").innerhtml = "Ciao da JavaScript";

47 CAMBIARE IL CONTENUTO HTML In Javascript molte istruzioni si chiamano metodi. Uno dei tanti metodi HTML è getelementbyid (). In questo esempio si utilizza il metodo per "trovare" l elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento ( innerhtml ) in "Ciao da JavaScript": Rappresenta il contenuto html dell elemento che ha come attributo id="demo" document.getelementbyid("demo").innerhtml = "Ciao da JavaScript";

48 CAMBIARE IL CONTENUTO HTML In Javascript molte istruzioni si chiamano metodi. Uno dei tanti metodi HTML è getelementbyid (). In questo esempio si utilizza il metodo per "trovare" l elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento Operatore di assegnazione. Un nuovo ( innerhtml ) in "Ciao da JavaScript": contenuto html viene attribuito all elemento che ha come attributo id="demo" document.getelementbyid("demo").innerhtml = "Ciao da JavaScript";

49 CONTROLLARE I DATI Il form di immissione <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option>... </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

50 Pagina a cui vengono passati i dati per l elaborazione CONTROLLARE I DATI Il form di immissione <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option>... </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

51 CONTROLLARE I DATI Il form di immissione type="text" è un campo in cui inserire una riga di testo <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option>... </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

52 CONTROLLARE I DATI Il form di immissione id="nome" identifica l elemento HTML per poi trovarlo con document.getelementbyid <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option>... </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

53 CONTROLLARE I DATI Il form di immissione name="nome" associa il dato inserito dall utente ad un nome che lo identificherà nell elaborazione lato server <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option>... </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

54 CONTROLLARE I DATI Il form di immissione <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option> type="submit" indica che il... pulsante invierà il form </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

55 CONTROLLARE I DATI Comando Javascript che viene eseguito quando viene inviato il form (evento onsubmit) Il form di immissione <form action="formtest.html" class="form-dati" onsubmit="return controlladati()"> Nome:<br /> <input type="text" value="" id="nome" name="nome" /> Cognome: <br /> <input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br /> <input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" /> <select id="mese_nascita" name="mese_nascita"> <option value="0">gennaio</option> <option value="1">febbraio</option>... </select> <input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" /> <button type="submit" >Invia i dati</button> </form>

56 <script > CONTROLLARE I DATI Il gestore (handler) dell evento onsubmit function controlladati () { if (document.getelementbyid('nome').value == '' document.getelementbyid('cognome').value == ''){ alert ("Dati incompleti!"); return false; } else { } } </script> return true;

57 Comando che crea la funzione controlladati <script > CONTROLLARE I DATI Il gestore (handler) dell evento onsubmit function controlladati () { if (document.getelementbyid('nome').value == '' document.getelementbyid('cognome').value == ''){ alert ("Dati incompleti!"); return false; } else { } } </script> return true;

58 <script > CONTROLLARE I DATI Il gestore (handler) dell evento onsubmit function controlladati () { if (document.getelementbyid('nome').value == '' document.getelementbyid('cognome').value == ''){ alert ("Dati incompleti!"); return false; } else { } } </script> return true; Blocco di istruzioni delimitato da { e }. Quando eseguo la funzione eseguo questo blocco di istruzioni.

59 <script > CONTROLLARE I DATI Istruzione condizionale l gestore (handler) dell evento onsubmit if (document.getelementbyid('nome').value == ' document.getelementbyid('cognome').value == '') function controlladati () { if (document.getelementbyid('nome').value == '' document.getelementbyid('cognome').value == ''){ alert ("Dati incompleti!"); return false; } else { } } </script> return true; == Operatore di confornto (sono uguali?) Or logico

60 CONTROLLARE I DATI Il gestore (handler) dell evento onsubmit <script > function controlladati () { if (document.getelementbyid('nome').value == '' document.getelementbyid('cognome').value == ''){ alert ("Dati incompleti!"); return false; } else { } } </script> return true; Blocco di istruzioni delimitato da { e } eseguito se vero Blocco di istruzioni delimitato da { e } eseguito se falso

61 La pagina html CONTROLLARE I DATI Il gestore (handler) dell evento onsubmit document.getelementbyid('nome').value <script > function controlladati () { if (document.getelementbyid('nome').value == '' document.getelementbyid('cognome').value == ''){ alert ("Dati incompleti!"); return false; } else { } } </script> Trova nella pagina html l elemento con attributo id ="nome" return true; Valore che l utente ha inserito nell elemento con attributo id ="nome"

62 IL GESTORE (HANDLER) DELL EVENTO ONSUBMIT Tradotto in linguaggio naturale funzione controlladati risulta: Se il valore dell elemento con id="nome" è uguale a nessun testo o il valore dell elemento con id="nome" è uguale a nessun testo Apro la finestra di alert e mando un messaggio all utente Restituisco il valore false Altrimenti Restituisco il valore true