Fondamenti di JavaScript
Stefano Bistarelli
Thanks to
Roberto Bruni e Daniela Giorgetti
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
Stefano Bistarelli
2
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
Stefano Bistarelli
3
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)
Stefano Bistarelli
4
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)
Stefano Bistarelli
5
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!!!
Stefano Bistarelli
6
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
Stefano Bistarelli
8
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”
Stefano Bistarelli
9
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…
Stefano Bistarelli
10
La famiglia cresce…
• Per accontentare anche i poveri
programmatori VB (Visual Basic), MS creò
anche VBScript (non supportato da
Netscape)
Stefano Bistarelli
11
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,…)
Stefano Bistarelli
12
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
Stefano Bistarelli
13
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
Stefano Bistarelli
14
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
Stefano Bistarelli
16
<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
Stefano Bistarelli
17
Attributo defer
• Esempio (notare i commenti):
<script type=“text/javascript”
defer=“defer”>
<!-// Si dichiara una variabile
var myvar = 500;
//-->
</script>
Stefano Bistarelli
18
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)
Stefano Bistarelli
19
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
Stefano Bistarelli
20
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
Stefano Bistarelli
21
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” />
Stefano Bistarelli
22
<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>
//<!-document.write(“<p>JavaScript attivo</p>);
//-->
</script>
<noscript>
<p>JavaScript non attivo</p>
</noscript>
Stefano Bistarelli
23
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
Stefano Bistarelli
24
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
Stefano Bistarelli
25
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!’)” )
Stefano Bistarelli
26
Sviluppo di HTML con JS
Creare la pagina HTML
Aggiungere codice JavaScript
Testare la pagina
Pubblicare la pagina
Stefano Bistarelli
27
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
Stefano Bistarelli
28
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
Stefano Bistarelli
29
Il metodo prompt
• Richiede input all’utente, es. password
<html><head><title>Accesso Ristretto</title>
<script>
<!-function checkPassword(){
if (prompt("Immetti la tua password preferita","") == "ifts")
{document.write("Ecco la pagina");}
else {document.write("Non hai accesso alla pagina");} }
//-->
</script>
</head>
<body onload="checkPassword()">
<noscript> JavaScript non attivo </noscript>
</body>
</html>
Stefano Bistarelli
30
Esercizi
Stefano Bistarelli
31