Fondamenti di JavaScript Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti.

Presentazione sul tema: "Fondamenti di JavaScript Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti."— Transcript della presentazione:

1

2 Fondamenti di JavaScript Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti

3 Stefano Bistarelli2 Script client-side: cosa sono? I Inizialmente le pagine web contenevano solo testo (la prima specifica di HTML non prevedeva linserimento di immagini) Oggi contengono: grafica, audio, animazioni, video… e talvolta anche informazioni utili! :-) I linguaggi di script per web favoriscono linterazione tra pagine e utenti

4 Stefano Bistarelli3 Script client-side: cosa sono? II HTML non può né gestire scelte dellutente, né prendere decisioni, né iterare dei task I linguaggi di script sono linguaggi di programmazione con sintassi semplice, facili da imparare, che permettono di fare le cose utili con pochi comandi ad-hoc I linguaggi di script per web combinano lo scripting con HTML per ottenere pagine interattive

5 Stefano Bistarelli4 Script client-side: cosa sono? III Gli script per web indicano al browser la lista di azioni che deve eseguire e quindi sono linguaggi interpretati (non compilati, non come Java) Hanno il vantaggio di essere facilmente modificabili Il risultato dipende molto anche dallinterprete (browser)

6 Stefano Bistarelli5 Script client-side: cosa fanno? Gestiscono messaggi sulla linea di status del browser Validano i dati delle form durante la compilazione (e possono eseguire dei calcoli sui dati inseriti) Visualizzano messaggi e possono richiedere dati in apposite finestrelle (alert box) Animano il contenuto della pagina (es. immagini) interagendo con lutente (es. spostamenti cursore) Definiscono banner interattivi Adattano le pagine ai browser che le visitano Riconoscono i plug-in installati e quelli richiesti E altro ancora… (es. menu a tendina, orario)

7 Stefano Bistarelli6 Esempi La famiglia Oliver La danza dei dinosauri Ok, la data è giusta! Campo minato professionale/amatoriale (1/2/3)professionaleamatoriale123 Hai dimenticato qualcosa! Io so che browser usi Non premete quel pulsante! Aiuto! chiamate la disinfestazione!!!

8 Un po di storia

9 Stefano Bistarelli8 La nascita Netscape sviluppò un linguaggio chiamato Livescript con lo scopo di rendere le pagine HTML più dinamiche e validare form prima della spedizione (spostare logica dal server al client) Con il parallelo sviluppo di Java, Netscape si accordò con Sun per progettare un linguaggio di script con sintassi simile E magicamente Livescript divenne… JavaScript

10 Stefano Bistarelli9 La crescita Nel 1995 JavaScript (JS) era sostenuto dalle più importanti industrie (Apple, Borland, Informix, Oracle, Digital, HP, IBM…) e la Microsoft? Visto che Netscape non voleva vendere il brevetto, MS decise di reingegnerizzare JS basandosi sulla documentazione pubblica Nacque JScript, il fratellastro

11 Stefano Bistarelli10 Incomprensioni in famiglia JavaScript 1.1 supportato da N.N. 3.0 in poi JScript 1.0 supportato da I.E. 3.0 in poi –Ma i due erano abbastanza compatibili… Poi nacquero dialetti proprietari che complicarono la vita a molti programmatori Un accordo con lECMA (European Computer Manufacturers Association) permise di definire un standard che tutti potessero supportare (ECMAScript) Ma Netscape e Microsoft hanno ripreso ad estendere JavaScript e Jscript oltre lo standard…

12 Stefano Bistarelli11 La famiglia cresce… Per accontentare anche i poveri programmatori VB (Visual Basic), MS creò anche VBScript (non supportato da Netscape)

13 Stefano Bistarelli12 Le 4 fasi del web 1)1989: Ipertesti solo caratteri, nessuna grafica 2)1993: HTML statico con grafica (suoni e video richiedevano applicazioni esterne) Primo browser grafico: Mosaic di NCSA (National Center for Supercomputing Applications) 3)1994: Documenti dinamici basati su CGI creazione pagine on-demand on-the-fly 4)1995: Documenti attivi (plug-ins, Java, JS,…)

14 Stefano Bistarelli13 Panoramica delle alternative Java (Sun Microsystems): –Applets, virtual machine (portabile) Isola dellIndonesia e termine slang per caffè ActiveX (Microsoft): –Controls (anche permanenti), permette di eseguire programmi VisualC++ e Visual Basic (compilati), linguaggio proprietario Il linguaggio delle libertà: si può fare un po di tutto! la pagina web che ti spegne il computer la pagina web che ti formatta il disco fisso Per fortuna: signature digitale per controllare la provenienza VBScript (Microsoft): –Risposta Microsoft a Javascript, sintassi à la Visual Basic

15 Stefano Bistarelli14 CGI e server-side scripting CGI (Common Gateway Interface): –Non un linguaggio, ma una specifica standard che permette di eseguire dei programmi sui web server –Programmi CGI possono essere programmi Perl, C, Visual Basic, o anche script PHP, Active Server Pages, Java Server Pages, Cold Fusion JS server-side e molti altri Esempio tipico: gestione dei dati inviati con forms CGI eseguiti sul server vs JS eseguito sul client (browser) CGI possono leggere e scrivere file

16 JS e HTML

17 Stefano Bistarelli16 Il tag usato per inserire il codice JS in documenti HTML è è un tag contenitore può essere inserito nello head (come ) o nel body (come ) può essere usato più volte, in punti diversi, dello stesso documento ha 4 attributi: defer, language, src, type

18 Stefano Bistarelli17 defer : dice se lo script genera contenuto nella pagina (es. tramite il metodo document.write() ) language : (obsoleto) nome e versione del linguaggio di scripting src : URL di uno script esterno (file.js) type : sostituisce language

19 Stefano Bistarelli18 Attributo defer Esempio (notare i commenti): <!-- // Si dichiara una variabile var myvar = 500; //-->

20 Stefano Bistarelli19 Attributo language Esempio: ValoreDescrizione JavaScript JS 1.0 supportato da NN2+ e IE3+ JavaScript1.1 JS 1.1 supportato da NN3+ e IE3+ JavaScript1.2 JS 1.2 supportato da NN4+ e IE4+ JavaScript1.3 JS 1.3 supportato da NN4.5+ e IE5+ JavaScript1.4 JS 1.4 supp. da HotJava3+ MozillaNavigator5 JavaScript1.5 JS 1.5 supportato da NN6+ e IE5.5+ (in parte)

21 Stefano Bistarelli20 Ancora su language Se non è definito, alcuni browser assumeranno JS1.0 di default Rende possibile definire insiemi multipli di funzioni JS Così i browser vecchi gestiranno comunque i dati, mentre quelli nuovi si avvantaggeranno di funzionalità innovative Esempio

22 Stefano Bistarelli21 Attributo src Serve per importare codice contenuto in un file.js (supportato da JS1.1+) –offre unalternativa a scrivere il codice nel documento stesso –favorisce il riuso di funzioni in documenti diversi –nel.js non possono essere usati i tag HTML! Esempio

23 Stefano Bistarelli22 Attributo type Ha rimpiazzato lattributo language –Esempi … Si può specificare una sola volta usando il tag

24 Stefano Bistarelli23 NOSCRIPT Permette di specificare cosa succede se il browser non sa interpretare JS, oppure se JS è settato off dallutente. Dovrebbe essere usato dopo ogni script, es. //<!-- document.write( JavaScript attivo ); //--> JavaScript non attivo

25 Stefano Bistarelli24 Sappiamo già JS! Sappiamo celare il codice ai vecchi browser Eventi: onload (onunload)onunload onclick Comandi: document.write(stringa) alert(stringa) Definizioni function pippo { … } var myvar = 400 Attenzione: JS è case sensitive HTML no

26 Stefano Bistarelli25 Caricamento e visualizzazione A seconda di dove è scritto il codice, viene eseguito in tempi diversi A tempo di caricamento se nello head senza lattributo defer A tempo di visualizzazione della pagina se nel body Se invece il codice fa parte di una funzione, allora viene eseguito solo (e sempre) quando la funzione viene invocata Esempio

27 Stefano Bistarelli26 Consigli Tutti i comandi terminano con ; Racchiudere tutti i comandi/dichiarazioni in apposite funzioni Invocare le funzioni quando necessario Evitare luso di comandi esterni alle funzioni (eventualmente usare onload per attivarli) Evitare di associare direttamente il codice agli eventi (es. onclick=alert(Ciao!) )

28 Stefano Bistarelli27 Sviluppo di HTML con JS Creare la pagina HTML Aggiungere codice JavaScript Testare la pagina Pubblicare la pagina

29 Stefano Bistarelli28 Quiz riassuntivi I –Perché Javascript e Java hanno nomi simili? Javascript è una versione ridotta di Java La sintassi di Javascript assomiglia a quella di Java Entrambi provengono dallisola di Java Ragioni di mercato –Quando un utente accede una pagina HTML che contiene uno script, quale macchina lo esegue? La macchina dellutente Il web server dove risiede la pagina Su macchine diverse a seconda del browser (es. NN o IE) –Quali linguaggi sono supportati sia da NN che da IE? VBScript Javascript ActiveX

30 Stefano Bistarelli29 Quiz riassuntivi II –Cosa bisogna scrivere per chiudere uno script? oppure oppure oppure –Cosa NON può fare Javascript client-side sui dati di una form? Validarla Spedirla per posta elettronica Salvare i valori in una base di dati sul server –Quale script viene eseguito prima? Uno script nella del documento Uno script nel Uno script associato ad un pulsante –Cosè CGI? Un linguaggio di scripting per i web servers Una specifica per eseguire programmi sui web server una compagnia che produce web servers

31 Stefano Bistarelli30 Il metodo prompt Richiede input allutente, es. passwordpassword Accesso Ristretto <!-- function checkPassword(){ if (prompt("Immetti la tua password preferita","") == "ifts") {document.write("Ecco la pagina");} else {document.write("Non hai accesso alla pagina");} } //--> JavaScript non attivo

32 Stefano Bistarelli31 Esercizi