fondamenti di javascript stefano bistarelli thanks to roberto bruni e daniela giorgetti

Fondamenti di JavaScript

Stefano BistarelliThanks to

Roberto Bruni e Daniela Giorgetti

Stefano Bistarelli 2

Script client-side: cosa sono? I

• Inizialmente le pagine web contenevano solo testo (la prima specifica di HTML non prevedeva l’inserimento di immagini)

• Oggi contengono: grafica, audio, animazioni, video… e talvolta anche informazioni utili! :-)

• I linguaggi di script per web favoriscono l’interazione tra “pagine” e utenti


Script client-side: cosa sono? II

• HTML non può né gestire scelte dell’utente, 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


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 dall’interprete (browser)


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 l’utente (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)


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

Un po’ di storia


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


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”


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 l’ECMA (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…


La famiglia cresce…

• Per accontentare anche i poveri programmatori VB (Visual Basic), MS creò anche VBScript (non supportato da Netscape)


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,…)


Panoramica delle alternative

• Java (Sun Microsystems): – Applets, virtual machine (portabile)

• Isola dell’Indonesia 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


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

JS e HTML


<SCRIPT>

• Il tag usato per inserire il codice JS in documenti HTML è <script>

• è un tag contenitore

• può essere inserito nello head (come <title>) o nel body (come <p>)

• può essere usato più volte, in punti diversi, dello stesso documento

• ha 4 attributi: defer, language, src, type


<SCRIPT>

• 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

Attributo defer

• Esempio (notare i commenti):<script type=“text/javascript” defer=“defer”>

</script>


Attributo language• Esempio: <script language=“JavaScript”>

Valore Descrizione

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)


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


Attributo src

• Serve per importare codice contenuto in un file .js (supportato da JS1.1+)– offre un’alternativa 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


Attributo type

• Ha rimpiazzato l’attributo language– Esempi

• <script type=“text/javascript”>…</script>• <script type=“text/vbscript”>…</script>

• Si può specificare una sola volta usando il tag <meta>

• <meta http-equiv=“Content-Script-Type” content=“text/javascript” />

<NOSCRIPT>• Permette di specificare cosa succede se il

browser non sa interpretare JS, oppure se JS è settato off dall’utente.

• Dovrebbe essere usato dopo ogni script, es.<script>//</script><noscript>

<p>JavaScript non attivo</p></noscript>


Sappiamo già JS!• Sappiamo celare il codice ai vecchi browser• Eventi:

• onload (onunload)• onclick

• Comandi:• document.write(“stringa”)• alert(“stringa”)

• Definizioni• function pippo { … }• var myvar = 400

• Attenzione: JS è “case sensitive” HTML no


Caricamento e visualizzazione

• A seconda di dove è scritto il codice, viene eseguito in tempi diversi

• A tempo di caricamento se nello head senza l’attributo 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


Consigli

• Tutti i comandi terminano con “;”• Racchiudere tutti i comandi/dichiarazioni in

apposite funzioni• Invocare le funzioni quando necessario• Evitare l’uso di comandi esterni alle funzioni

(eventualmente usare onload per attivarli)• Evitare di associare direttamente il codice agli

eventi (es. onclick=“alert(‘Ciao!’)” )


Sviluppo di HTML con JSCreare la pagina HTML

Aggiungere codice JavaScript

Testare la pagina

Pubblicare la pagina


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 dall’isola di Java• Ragioni di mercato

– Quando un utente accede una pagina HTML che contiene uno script, quale macchina lo esegue?

• La macchina dell’utente• 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


Quiz riassuntivi II– Cosa bisogna scrivere per chiudere uno script?

• </html> oppure </script> oppure <noscript> oppure <end>

– 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 <head> del documento

• Uno script nel <body>

• 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

Il metodo prompt

• Richiede input all’utente, es. password<html><head><title>Accesso Ristretto</title><script></script></head><body onload="checkPassword()"><noscript> JavaScript non attivo </noscript></body></html>


Esercizi

fondamenti di javascript stefano bistarelli thanks to roberto bruni e daniela giorgetti

Documents

js e html slide

netscape slide

standard slide

il fratellastro slide

orario slide

storia slide

visual basic slide

e visual basic compilati