introduzione a javascript - apogeonline.com · 6 capitolo 1 linguaggio ipertestuale a marcatura per...

Una società che si occupa della progettazione di siti Web, la Web-Adventure, vi ha recentemente assunto. Siete eccitati all’idea dilavorare per una società che crea siti Web, perché, come fannoattualmente molte persone, dedicate parecchio tempo alla navi-gazione su Internet. Sapete che le pagine Web sono costituite dainformazioni di vario genere formattate in vari modi; inoltre ave-te notato che alcuni siti sono più interattivi di altri e presentanofunzioni che alcuni anni fa non erano disponibili. Ormai sembrache giochi, moduli d’ordine, animazioni e vari tipi di effetti visivisiano parte integrante di quasi tutte le pagine Web che capita divisitare. Finalmente saprete come si sviluppano queste pagine Webe ne siete entusiasti. Il vostro primo obiettivo alla WebAdventureconsiste nel comprendere le fasi di sviluppo e di programmazio-ne, individuando al contempo quale sia il ruolo di JavaScript.

Caso

Introduzionea JavaScript

CAPITOLO 1

2 CAPITOLO 1

SEZIONE A

Programmazione, HTMLe JavaScript

In questa sezione imparerete:• Che cosa sia il World Wide Web• A che cosa serva JavaScript• Nozioni su Hypertext Markup Language• Come creare un documento HTML• Nozioni sul linguaggio di programmazione JavaScript• Nozioni sulla logica di programmazione

Il World Wide WebJavaScript vive e opera all’interno delle pagine Web presenti sul World Wide Web. Percomprendere come funziona JavaScript, è utile sapere qualcosa su come funziona il WorldWide Web.

Il World Wide Web (in breve, il “Web”) venne creato nel 1989 al CERN (ConseilEuropéen pour la Recherche Nucléaire), a Ginevra, in Svizzera, quale sistema per facilitarel’accesso incrociato a documenti posti su Internet. I documenti vengono individuati eaperti mediante collegamenti ipertestuali, che contengono un riferimento a un determi-nato documento. HTML (HyperText Markup Language) è un linguaggio semplice, usatoper progettare le pagine che appaiono nel World Wide Web. Un browser Web è un pro-gramma che visualizza documenti HTML sullo schermo di un computer. Attualmente idue browser Web più diffusi sono Netscape Navigator e Microsoft Internet Explorer.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

In questo libro i termini documento HTML e pagina Web saranno usati interscambiabilmente.

Ogni pagina Web o documento ha un indirizzo univoco noto come URL (UniformResource Locator). Potete pensare a un URL come al numero di telefono di una paginaWeb. Ogni URL è costituito da quattro parti: un protocollo (di solito HTTP), un servi-zio, il nome di dominio relativo a un server Web o l’indirizzo IP (Internet Protocol) di unserver Web, e infine un nome di file. HTTP (HyperText Transfer Protocol) gestisce icollegamenti ipertestuali usati per navigare nel Web: si può pensare a HTTP come almotore del Web, infatti garantisce che i browser elaborino e visualizzino correttamente ivari tipi di informazioni contenute nelle pagine Web (testo, grafica e altre informazioni).La porzione relativa al protocollo di un URL è seguita da due punti (:), due barre (//) e dalservizio, che di solito è www (World Wide Web). Un nome di dominio è un indirizzounivoco usato per identificare un computer, spesso un server Web, su Internet. Il nome di

INTRODUZIONE A JAVASCRIPT 3

dominio è costituito da due parti separate da un punto (.). La prima parte del nome didominio è solitamente composta da testo che identifica una persona o una organizzazione,come DonGosselin oppure Course. L’ultima parte di un nome di dominio identifica iltipo di istituzione o di organizzazione. Per esempio, com (company) contraddistingue leaziende private, gov (government) indica enti governativi, mentre edu (educational) si rife-risce alle istituzioni avente carattere educativo. Nel nostro caso, course.com è il nome didominio di Course Technology. Alcuni esempi di URL interi possono essere: http://www.DonGosselin.com e http://www.course.com.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Un Internet Protocol (IP) o indirizzo IP, costituisce un altro metodo per identificare inmodo univoco i computer o i dispositivi connessi a Internet, mediante una serie di quat-tro gruppi di numeri separati da punti. Tutti i nomi di dominio di Internet sono associati a

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

un indirizzo IP univoco.

In un URL è possibile che un determinato nome di file o una combinazione di nomidi directory e di file seguano il nome di dominio o l’indirizzo IP. Se l’URL non specifica unnome di file, il server Web che effettua la richiesta cerca un file chiamato INDEX.HTMLnella radice della directory specificata. La Figura 1.1 mostra le parti che compongono unURL di esempio, grazie al quale si apre un documento chiamato html_ref.html.

URL di esempio: http://www.sandia.gov/sci_compute/html_ref.html

Protocollo

Nome di dominio

Directory

Nome di file

Figura 1.1 URL di esempio.

Ruolo di JavaScript nel WebLo scopo originario del World Wide Web consisteva nell’individuare e visualizzare infor-mazioni. Dopo che il Web si è espanso oltre l’ambito ristretto della comunità scientifica eaccademica, le persone hanno iniziato a rendersi conto del fatto che una maggiore interattivitàavrebbe reso il Web più utile. A poco a poco le applicazioni commerciali del Web crebberoe con esse anche le esigenze di interattività e aspetto accattivante dei siti. I documenticreati mediante semplice codice HTML, però, sono statici, dato che lo scopo primario diHTML è spiegare a un browser quale debba essere l’aspetto di un documento. Potetepensare a un documento HTML approssimativamente come se si trattasse di un docu-mento creato con un programma di elaborazione testo o di desktop publishing: tutto ciòche si può fare è guardarlo o stamparlo. In risposta alla richiesta di una maggiore interattività,Netscape ha sviluppato il linguaggio di programmazione JavaScript, da usare con il suobrowser: Navigator.

JavaScript fa scaturire la scintilla della vita in HTML e rende dinamiche le pagineWeb. Quelli che erano documenti HTML statici, con JavaScript diventano applicazioni,come per esempio giochi o moduli d’ordine. Si può usare JavaScript per cambiare il conte-

4 CAPITOLO 1

nuto di una pagina Web dopo che questa è stata visualizzata da un browser, in modo dainteragire con un utente attraverso moduli e controlli, allo scopo di creare effetti visivicome le animazioni e di controllare la finestra del browser Web. Nessuna di queste opera-zioni era fattibile prima della creazione di JavaScript.

In larga misura proprio grazie a JavaScript, oggi il Web viene usato per svariati scopi,compresi pubblicità e intrattenimento. Attualmente sono molte le attività commerciali(destinate con ogni probabilità ad aumentare in futuro) che hanno un sito Web. Per atti-rare utenti, un sito Web deve essere eccitante, interattivo e visivamente stimolante. I sitiWeb commerciali adoperano “segnali luminosi” per pubblicizzare particolarità, animazio-ni, interattività, controlli intuitivi per la navigazione e molti altri tipi di effetti volti afacilitare la vendita dei loro prodotti. Sul Web è inoltre molto facile imbattersi in giochi,animazioni e altre forme di intrattenimento. Tutti questi tipi di applicazioni e di effettipossono essere creati con JavaScript.

Per meglio comprendere tutto quello che potete fare con JavaScript, esaminate leFigure 1.2, 1.3 e 1.4. Avrete occasione di creare questi programmi nei capitoli successivi.La mappa visualizzata nella Figura 1.2 è un’immagine a mappa. Passando il mouse su unostato presente nella mappa lo si evidenzia e se ne visualizza il nome sotto l’immagine.Creerete l’immagine a mappa nel Capitolo 2. La Figura 1.3 mostra la calcolatrice in lineache creerete nel Capitolo 3. L’ultimo programma, mostrato nella Figura 1.4, è un moduloin linea per la registrazione di prodotti e lo creerete nel Capitolo 6. Questi sono solo alcuniesempi riguardanti i programmi che avrete occasione di creare con JavaScript e l’ausilio diquesto libro.

Figura 1.2 Immagine a mappa.


Figura 1.4 Modulo di registrazione di un prodotto.

Figura 1.3 Calcolatrice in linea.

6 CAPITOLO 1

Linguaggio ipertestuale a marcaturaPer lavorare con JavaScript dovete conoscere HTML (HyperText Markup Language, lin-guaggio ipertestuale a marcatura) e sapere come si creano le pagine Web, dato che JavaScriptesiste all’interno di queste ultime. La sezione corrente prende in considerazione i principifondamentali di HTML necessari per essere in grado di operare con JavaScript. In seguito,quando ve ne sarà l’esigenza, saranno introdotte ulteriori nozioni di HTML. Se avete giàfamiliarità con questo linguaggio, potete saltare questa sezione.

I documenti HTML devono essere documenti di testo contenenti istruzioni diformattazione chiamate tag unitamente al testo da visualizzare nella pagina Web. Sono itag HTML che permettono di formattare il testo in grassetto o in corsivo, per esempio,oppure di creare controlli per l’input dell’utente (come pulsanti di scelta e caselle di con-trollo). Esistono anche tag HTML che permettono di visualizzare nel documento (ovveronella pagina Web) immagini e altri oggetti.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

I documenti HTML devono avere come estensione di file .html o .htm.

Quando si apre un documento HTML con un browser Web, il documento vieneassemblato e formattato in base alle istruzioni contenute nei tag. Il processo attraverso ilquale un browser Web assembla e formatta un documento HTML si chiama parsing orendering. I tag sono racchiusi tra parentesi angolari (< >) e sono per lo più costituiti da untag iniziale e da un tag finale che delimitano il testo, o altri elementi, oggetto di unaspecifica formattazione o di un determinato controllo. Per esempio, il tag iniziale perattribuire il grassetto a una riga di testo è <B>, mentre il tag finale è </B>. Tutto il testocompreso tra questa coppia di tag appare in grassetto quando aprite il documento HTMLin un browser Web. La riga che segue è un esempio di come attribuire il grassetto in undocumento HTML.

<B>Questo testo appare in grassetto in un browser Web.</B>

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

HTML non fa distinzione tra lettere maiuscole e minuscole, perciò potete anche usare <b>al posto di <B>. Tenete però presente che per convenzione i tag HTML si scrivono in ma-

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

iuscolo.

Tutti i documenti HTML iniziano con <HTML> e terminano con </HTML>. Questi tagsegnalano a un browser Web che le istruzioni presenti tra i due tag devono essere assemblatein un documento HTML. I tag <HTML>...</HTML> di apertura e chiusura sono obbliga-tori e contengono tutto il testo e tutti gli altri tag che costituiscono il documento HTML.HTML mette a disposizione molti tag per la creazione di documenti HTML. Alcuni tra itag più comuni sono elencati nella Figura 1.5.

Numerosi tag HTML possono essere opportunamente configurati con vari parametri,chiamati attributi. Gli attributi si pongono prima della parentesi angolare di chiusura deltag iniziale. Per esempio, il tag <IMG>, che incorpora un’immagine o un video clip in undocumento HTML può essere configurato mediante un certo numero di attributi, tra iquali c’è anche SRC, il quale specifica il nome di file dell’immagine o del video clip. Per


includere l’attributo SRC nel tag <IMG>, basta digitiate <IMG SRC=“miaimmagine.gif”>.Dovete inserire il valore dell’attributo tra doppi apici.

Tag HTML Descrizione

<B>...</B> Formatta in grassetto il testo che racchiude.<BODY>...</BODY> Racchiude il corpo del documento HTML.<BR> Inserisce un’interruzione di riga.<CENTER>...</CENTER> Centra il testo rispetto alla finestra del browser e in base

all’ampiezza della pagina.<HEAD>...</HEAD> Racchiude l’intestazione di una pagina e contiene informa-

zioni sull’intera pagina.<Hn>...</Hn> Tag relativi al livello di intestazione, con n che rappresenta

un numero compreso tra 1 e 6.<HR> Inserisce una riga orizzontale.<HTML>...</HTML> Tag obbligatori che segnano rispettivamente l’inizio e la fine

del documento.<I>...</I> Formatta in corsivo il testo che racchiude.<IMG SRC=“...”> Inserisce il file di un’immagine.<P> Dà inizio a un nuovo paragrafo.<STRONG>...</STRONG> Formatta con un carattere più pesante (simile al grassetto) il

testo che racchiude.<TABLE>...</TABLE> Crea una tabella. Ogni riga di tabella è definita da <TR> e

ogni cella di tabella è definita da <TD>.<TITLE>...</TITLE> Racchiude il titolo della pagina, ovvero il testo che appare

nella barra del titolo del browser. Questo tag deve apparireall’interno dei tag <HEAD>.

<U>...</U> Sottolinea il testo che racchiude.

Figura 1.5 Tag HTML più usati.

Due tag importanti sono <HEAD> e <BODY>. Il tag <HEAD> contiene informazioni chevengono usate dal browser Web ed è posto all’inizio di un documento HTML, dopo il tag<HTML> di apertura. All’interno della coppia di tag <HEAD>...</HEAD> si possono inseriresvariati tag per facilitare la gestione del contenuto di un documento. Il tag <TITLE> con-tiene il testo che viene visualizzato nella barra del titolo di un browser ed è l’unico elemen-to obbligatorio per il tag <HEAD>. Con l’eccezione del tag <TITLE>, gli elementi contenutinel tag <HEAD> non influiscono sulla presentazione (rendering) del documento HTML.Quando in un documento HTML si includono programmi JavaScript, questi ultimi ap-paiono spesso all’interno della coppia di tag <HEAD>...</HEAD>. La Figura 1.6 elenca itag posti all’interno della coppia di tag <HEAD>...</HEAD>.

Dopo il tag <HEAD> c’è il tag <BODY>, che contiene il corpo della pagina HTML. Gliattributi del tag <BODY> determinano l’aspetto di un documento HTML. La Figura 1.7elenca gli attributi del tag <BODY>.

Quando un browser Web presenta un documento HTML, ignora i caratteri nonstampabili come spazi, tabulazioni e “a capo” presenti nel codice; solo i tag HTML ricono-sciuti e il testo vengono inclusi nel documento finale che appare nel browser Web. Nonpotete usare gli “a capo” nel corpo di un documento HTML per inserire spazio prima e

8 CAPITOLO 1

dopo un paragrafo; a questo scopo il browser riconosce solo i tag di paragrafo <P> e <BR>.Se usate i tag <P> per creare righe vuote in un documento HTML, tenete presente chedeterminati browser Web, come Internet Explorer, ignorano i tag privi di contenuto. Seusate il tag <P> per creare una riga vuota in un documento HTML, il browser Web po-trebbe anche ignorarlo. Per impedire che ciò accada, inserite il codice corrispondente auno spazio unificatore o non interrompibile: (non-breaking space) e un tag finale,in modo che il paragrafo abbia il seguente aspetto: <P> </P>. La Figura 1.8 mostraun documento HTML, mentre la Figura 1.9 ne mostra l’aspetto in un browser Web.Come potete constatare, non è stato usato il carattere “è”, ma il codice è. Quandocreate documenti HTML non dovete mai usare le lettere accentate: utilizzate i codiciappropriati oppure, se avete fretta, la corrispondente lettera non accentata seguita da apo-strofo (per esempio: e’). Solo così avrete la certezza che tali caratteri verranno visualizzaticorrettamente in ogni circostanza.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Alcuni tag HTML, come i tag di paragrafo <P>, non esigono il tag finale. Tuttavia browser

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

diversi hanno esigenze diverse per quanto concerne la presenza del tag finale.

Creazione di un documento HTMLDato che i documenti HTML sono file di testo, li potete creare con qualsiasi editor ditesto, come Blocco note o WordPad, oppure con un qualsiasi programma di elaborazionetesto in grado di salvare file di solo testo. Se usate un editor di testo per creare un docu-

Tag HTML Descrizione

<TITLE>...</TITLE> Contiene il titolo del documento, che appare nella barra deltitolo di un browser.

<STYLE>...</STYLE> Identifica un foglio stile.<LINK> Specifica un collegamento esterno tra il documento HTML

e una fonte esterna.<SCRIPT>...</SCRIPT> Fa riferimento a script incorporati.<ISINDEX> Crea un modulo di ricerca a un solo campo.<BASE> Identifica l’URL di base del documento.<META> Contiene le proprietà del documento.

Figura 1.6 Tag HTML posti all’interno della coppia di tag <HEAD>...</HEAD>.

Attributo Determina

ALINK Il colore di un collegamento attivo.BACKGROUND L’immagine di sfondo.BGCOLOR Il colore di sfondo.LINK Il colore di un sito non visitato.TEXT Il colore del testo.VLINK Il colore di un collegamento visitato.

Figura 1.7 Attributi del tag <BODY>.


<HTML>

<HEAD>

<TITLE>Ciao a tutti!</TITLE>

</HEAD>

<BODY>

<H1>Ciao a tutti! (Questo è il tag H1)</H1>

<H2>Questa è una riga di testo formattata con il tag H2</H2>

<P>Questa porzione di corpo del testo contiene svariati tag di

formattazione dei caratteri, incluso <I>corsivo</I>, <B>grassetto</B>,

<U>sottolineato</U> e <STRIKE>barrato</STRIKE>. La riga di codice che

segue crea un’interruzione di riga seguita da una linea

orizzontale.<BR>

<HR>

<IMG SRC=“checkmrk.jpg”>Questa riga contiene un’immagine.

</BODY>

</HTML>

Figura 1.8 Un documento HTML.

Figura 1.9 Un documento HTML in un browser Web.

10 CAPITOLO 1

mento HTML, non potrete vedere il risultato finale fino a quando non aprirete il docu-mento in un browser Web. Esistono però svariate applicazioni (chiamate editor HTML)progettate apposta per creare documenti HTML. Alcuni editor HTML diffusi, comeMicrosoft FrontPage e Adobe PageMill, hanno un’interfaccia grafica che permette di cre-are pagine Web e vedere immediatamente il risultato: in modo analogo a quanto avvienecon il WYSIWYG (What You See It’s What You Get, ciò che vedete è ciò che ottenete) neiprogrammi di elaborazione testo. Inoltre esistono parecchi word processor, inclusi MicrosoftWord e WordPerfect, che permettono di salvare i file come documenti HTML. Tuttiquesti editor HTML creano sempre banali file di testo, ma automatizzano il processo diapplicazione dei tag. Per esempio, se create con Word un documento contenente del testoin grassetto e poi lo salvate come documento HTML, verrà inserito automaticamente iltag <B> nel testo del file HTML creato.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Ricordatevi che browser Web diversi presentano i documenti HTML in modi diversi. Peresempio, un documento HTML visualizzato in Internet Explorer può apparire diverso in

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Navigator.

È arrivato il momento di creare un documento HTML contenente alcuni dei tagesaminati in questa sezione. Potete usare un qualsiasi editor di testo, come Blocco note oWordPad, oppure potete usare un editor HTML.

Come creare un documento HTML

1 Avviate l’editor di testo o l’editor HTML e create un nuovo documento.2 Digitate <HTML> per iniziare il documento HTML. Ricordate che tutti i docu-

menti HTML devono iniziare con <HTML> e finire con </HTML>.3 Premete Invio e aggiungete al documento i tag <HEAD> e <TITLE>, come segue.

Il titolo apparirà nella barra del titolo del browser Web. Ricordate che la coppiadi tag <HEAD>...</HEAD> deve includere la coppia di tag <TITLE>...</TITLE>.La coppia di tag <TITLE>...</TITLE> non può esistere esternamente alla cop-pia di tag <HEAD>...</HEAD>.

<HEAD>

<TITLE>Esempio di pagina Web</TITLE>

</HEAD>

4 Premete Invio e digitate <BODY> per iniziare il corpo del documento HTML.5 Premete Invio, poi digitate i tag e il testo che seguono per creare il corpo del do-

cumento HTML.

<H1>Ciao a tutti!</H1>

<P>Questa è la mia prima pagina Web.</P>

<HR>

<H2>Questa riga è H2 </H2>

<H3>Questa riga è H3 </H3>

<P>La riga che segue è vuota.</P>


<P> </P>

<P><B>grassetto</B>, <I>corsivo</I>, <U>sottolineato</U></P>

6 Premete Invio, poi concludete il documento digitando i tag che seguono per chiu-dere le coppie <BODY>...</BODY> e <HTML>...</HTML>.

</BODY>

</HTML>

7 Salvate il file come CiaoATutti.html nella cartella Lezione.01 del Disco Dati.○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Alcuni server Web non interpretano correttamente gli spazi eventualmente presentinei nomi dei file HTML. Per esempio, se il nome del nostro file fosse Ciao A Tutti.html(con uno spazio prima di “A” e uno dopo), potrebbe non essere compreso da alcuni

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

server. Per tale ragione i nomi di file presenti in questo libro non includono spazi.

8 Avviate Navigator, Internet Explorer o un altro browser Web. Poi aprite il fileCiaoATutti.html. La Figura 1.10 visualizza il file così come appare in Netsca-pe Communicator 4.51, versione italiana (Netscape Communicator è un pacchettodi cui fa parte anche Netscape Navigator).

9 Chiudete il browser Web facendo clic sul pulsante Chiudi .

Figura 1.10 CiaoATutti.html in Netscape Communicator 4.51.

12 CAPITOLO 1

Il linguaggio di programmazione JavaScriptJavaScript è un linguaggio di scripting. Il termine linguaggio di scripting fa riferimento ailinguaggi di programmazione che sono eseguiti da un interprete incorporato in un browserWeb. L’interprete converte il codice di programmazione in un formato eseguibile ognivolta che il programma viene eseguito, una riga alla volta. I programmi scritti in un lin-guaggio di scripting, come JavaScript, sono interpretati quando un motore di scriptingcarica una pagina HTML. Un motore di scripting è un interprete che fa parte di unbrowser Web. Un browser Web contenente un motore di scripting per convertire gli script,viene chiamato host di scripting. Per esempio, Navigator e Internet Explorer sono en-trambi host di scripting per i programmi JavaScript.

Il linguaggio JavaScript è stato introdotto per la prima volta in Navigator ed era origi-nariamente chiamato LiveScript. Quando venne rilasciato Navigator 2.0, il nome era cambiatoin JavaScript 1.0. In seguito Microsoft rilasciò una sua versione di JavaScript in InternetExplorer 4.0 e la chiamò JScript. Le versioni più recenti sono rispettivamente JavaScript1.5 in Navigator 6, attualmente in beta, e JScript 5.5 in Internet Explorer. Purtroppoqueste due implementazioni non sono compatibili al 100% tra di loro. L’obiettivo diquesto testo è creare programmi JavaScript in grado di funzionare indifferentemente conNavigator o con Internet Explorer. Di conseguenza in questo libro l’attenzione si concen-tra sul codice JavaScript compatibile con Netscape JavaScript 1.2, che è supportato daNavigator 4 e Internet Explorer 4. Netscape JavaScript 1.2 viene considerato lo standardcorrente di JavaScript ed è grosso modo compatibile con JScript 2.0.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

L’ECMA (European Computer Manufacturer’s Association), ha prodotto una versione in-ternazionale standardizzata di JavaScript chiamata ECMAScript, la quale è approssimati-vamente compatibile con JavaScript 1.1. Si presume che le versioni future di JavaScript(Netscape) siano perfettamente conformi a ECMAScript. Quando uscì JScript 3.0, Microsoft

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

affermò che era già conforme al 100% a ECMAScript.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Molte persone ritengono che JavaScript sia correlato al linguaggio di programmazione Javao addirittura ne sia una versione semplificata. In realtà si tratta di due linguaggi del tuttodiversi l’uno dall’altro. Java è un linguaggio di programmazione compilato, orientato aglioggetti, creato da Sun Microsystems ed è notevolmente più difficile da padroneggiare ri-spetto a JavaScript, che è invece un linguaggio di scripting interpretato creato da Netscape.Benché Java sia spesso usato per creare programmi eseguibili da una pagina Web, i pro-grammi Java sono programmi esterni eseguiti indipendentemente dal browser. Per con-tro, i programmi JavaScript sono eseguiti all’interno di una pagina Web e sono controllati

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

dal browser.

JavaScript è disponibile in due formati: lato client e lato server. JavaScript lato clientstandardizzato è il formato disponibile per le pagine HTML visualizzate nei browser Web(il client). JavaScript versione 1.2 in Navigator 4.0 e ECMAScript è una versione latoclient. JavaScript lato server viene usato con i server Web per accedere ai file system, co-municare con altre applicazioni, accedere ai database ed effettuare altre operazioni. Attual-mente JavaScript lato server è proprietario e specifico di ogni produttore. Ogni produttoredi server Web propone una sua versione del linguaggio e quindi dovete conoscere le diffe-renze che caratterizzano i vari prodotti: non esiste uno standard per il lato server analogo aECMAScript. JavaScript lato client e lato server condividono le stesse caratteristiche fon-


damentali di programmazione. La Figura 1.11 illustra la correlazione esistente tra JavaScriptlato client e JavaScript lato server.

Figura 1.11 Relazione presente tra JavaScript lato client e JavaScript lato server.

Logica di programmazione e debuggingTutti i linguaggi di programmazione, incluso JavaScript, hanno una loro sintassi, ovverouna serie di regole proprie del linguaggio. Per scrivere un programma dovete conoscere lasintassi specifica del linguaggio di programmazione che si usa e anche capire la logica diprogrammazione dei computer. Con logica di programmazione si fa riferimento a ciò cheriguarda l’esecuzione delle varie parti del programma nell’ordine giusto per ottenere ilrisultato desiderato. Per esempio: pur sapendo guidare bene l’auto, potreste non raggiun-gere la destinazione prevista se non seguite la strada giusta. Analogamente, potreste esserein grado di usare correttamente la sintassi di un linguaggio di programmazione, ma nonessere capaci di creare un programma funzionante, strutturato logicamente. Tra gli esempidi errori logici ne troviamo alcuni banali, come moltiplicare tra loro due valori quando siaveva intenzione di effettuare una divisione oppure produrre l’output prima di aver otte-nuto l’input richiesto. Il codice JavaScript che segue contiene un altro esempio di errorelogico:

var count = 1

while (count <= 10) {

alert(“Il numero è ” + count)

}

Nel codice di questo esempio è presente un’istruzione while, che si usa per ripetereun comando o una serie di comandi in base alla valutazione di determinati criteri. Ilcriterio nell’esempio è dato dal valore di una variabile chiamata count (nel Capitolo 2verranno fornite ulteriori informazioni sulle variabili). Si presume che l’istruzione whilevenga eseguita fino a quando la variabile count è minore o uguale a 10. Tuttavia nel corpodell’istruzione while non è presente alcun codice che modifichi il valore della variabilecount, la quale manterrà dunque il valore 1 in ogni iterazione del ciclo. In questo caso,continuerà ad essere visualizzata una finestra di dialogo contenente la stringa di testo Ilnumero è 1, indipendentemente da quante volte premerete il pulsante OK. Questo tipo dierrore logico viene chiamato ciclo infinito.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Non preoccupatevi di come sia costruito il codice JavaScript presentato: il solo scopo del-

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

l’esempio era far comprendere meglio che cosa si intende per errore logico.

Qualsiasi errore in un programma che provochi il malfunzionamento di quest’ultimo,sia esso dovuto a sintassi sbagliata oppure a un difetto di tipo logico, viene chiamato “bug”

JavaScriptlato server

JavaScriptlato client

Caratteristichedi base

14 CAPITOLO 1

(a volte italianizzato in “baco”). Di conseguenza, il debugging descrive le operazioni me-diante le quali gli errori di un programma vengono individuati e corretti. La leggendanarra che il termine debugging sia stato coniato da Grace Murray Hopper, una matematicache fu di valido aiuto per lo sviluppo del linguaggio di programmazione COBOL. Sembrache negli anni ‘40 un insetto abbia mandato in cortocircuito uno dei primi computer chela Hopper stava usando. Una volta rimosso l’insetto, effettuando quindi il “debugging” delsistema, il problema è stato risolto. Oggi con bug si fa riferimento a ogni tipo di problemacorrelato alla progettazione e operatività di un programma.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Non confondete bug e virus. I bug sono problemi interni a un programma che si verifica-no a causa di un errore nella sintassi, di problemi di progettazione o di errori al momen-to dell’esecuzione. I virus sono programmi a sé stanti progettati per “infettare” un computere provocare danni più o meno gravi. Per la precisione, anche i programmi dei virus pos-sono contenere bug, in tal caso non funzionano correttamente e non riescono a portare

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

a termine i guasti che i loro creatori auspicavano.

Molti linguaggi di programmazione includono comandi e altre funzioni volti a facili-tare l’individuazione di bug. Tuttavia la versione di JavaScript oggetto di questo libro noncontiene alcuno strumento utile per il debugging. Si prevede che le versioni future diJavaScript incorporino strumenti di queste genere. Per venirvi incontro, nel testo sonopresenti dei suggerimenti (opportunamente evidenziati) su come individuare gli errori.

Tenete però presente, come avrete occasione di leggere nei consigli di debugging, chequesta non è una scienza esatta: ogni programma che si scrive è diverso e richiede metodidiversi per trovare gli errori. Le vostre capacità logiche e analitiche costituiscono la miglio-re risorsa a disposizione per effettuare il debugging.

Nella sezione successiva inizierete a imparare come si creano i programmi in JavaScript.

Riepilogo• HTML (HyperText Markup Language) è un semplice protocollo usato per progettare le pagi-

ne Web che appaiono nel World Wide Web.• Il World Wide Web è pilotato da HTTP (HyperText Transfer Protocol), che gestisce i collega-

menti ipertestuali usati per navigare nel Web.• Ogni documento Web ha un indirizzo univoco noto come URL (Uniform Resource Locator).• JavaScript dona vita a HTML e rende dinamiche le pagine Web trasformandole in applicazio-

ni, come giochi o moduli d’ordine.• I documenti HTML devono essere documenti di testo contenenti istruzioni di formattazione,

chiamate tag, e il testo che verrà visualizzato nella pagina Web.• I tag HTML sono di vario genere, dai comandi di formattazione ai controlli che permettono al-

l’utente di fornire un input, ai tag che consentono di visualizzare immagini grafiche e altri og-getti.

• Il processo attraverso il quale un browser Web assembla e formatta un documento HTML si chia-ma parsing o rendering.

• Un interprete converte il codice di programmazione in un formato eseguibile ogni volta che ilprogramma viene eseguito, una riga alla volta.

• JavaScript è un linguaggio di programmazione interpretato.• Un motore di scripting è un interprete che fa parte di un browser Web. Un browser Web con-

tenente un motore di scripting per convertire gli script si chiama host di scripting.


• JavaScript standardizzato lato client è il formato JavaScript disponibile per le pagine HTML vi-sualizzate nei browser Web.

• Tutti i linguaggi di programmazione, incluso JavaScript, hanno la loro sintassi, cioè regole propriedel linguaggio.

• La logica di programmazione su cui si fonda ogni programma comporta l’esecuzione delle va-rie parti del programma nell’ordine giusto per produrre il risultato desiderato.

• Il debugging è la fase in cui si cercano e si correggono gli errori presenti in un programma.

Domande1. __________ gestisce i collegamenti ipertestuali usati per navigare nel Web.

a. Netscape Navigatorb. CERN (Conseil Européen pour la Recherche Nucléaire)c. HTTP (HyperText Transfer Protocol)d. Internet Explorer

2. Ogni documento Web ha un indirizzo univoco noto come __________.a. indirizzo IPb. collegamento ipertestualec. URL (Uniform Resource Locator)d. nome di domino

3. Gli elementi HTML __________.a. devono includere un tag iniziale e uno finaleb. includono solo un tag inizialec. possono contenere un tag finale, dipende dall’elemento HTMLd. non contengono alcun tag iniziale o finale

4. HTML __________.a. distingue le maiuscole dalle minuscoleb. non distingue le maiuscole dalle minuscolec. impone l’uso della lettera iniziale maiuscolad. impone l’uso delle lettere maiuscole

5. I documenti HTML iniziano e terminano con la coppia di tag __________.a. <BODY>...</BODY>b. <HEAD>...</HEAD>c. <HTML>...</HTML>d. <WEB>...</WEB>

6. Gli attributi HTML sono posti all’interno della __________.a. parentesi angolare iniziale del tag inizialeb. parentesi angolare iniziale del tag finalec. parentesi angolare finale del tag inizialed. parentesi angolare finale del tag finale

7. Le regole di un linguaggio di programmazione si chiamano __________.a. procedureb. assemblaggioc. sintassid. logica di programmazione

16 CAPITOLO 1

8. L’esecuzione delle varie istruzioni e procedure di un programma nell’ordine giusto al fine di pro-durre il risultato desiderato, si chiama __________.a. ragionamentob. assemblaggio direzionalec. sintassid. logica di programmazione

9. Il termine linguaggio __________ viene usato per fare riferimento ai linguaggi interpretati chesi eseguono da un browser Web.a. di programmazione Internetb. macchinac. assemblyd. di scripting

10. La versione di JavaScript che costituisce il formato disponibile per le pagine HTML in un browserWeb si chiama JavaScript __________.a. precompilatob. lato serverc. incorporatod. lato client

Esercizi1. Progettate un documento HTML da usare come home page di una società che vende articoli

sportivi. Se disponete di clipart, inserite le immagini degli articoli sportivi che la società vende,come palloni da basket, guanti da baseball e racchette da tennis. Per ogni articolo inserite infor-mazioni come il produttore e il costo. Inserite le sezioni <HEAD> e <BODY> nel documento. Nellasezione <HEAD> inserite un <TITLE>. Usate almeno cinque diversi elementi HTML per formattarela sezione <BODY>. Salvate il documento HTML come ArticoliSportivi.html nella cartellaLezione.01 sul vostro Disco Dati. Anche se state usando solo elementi HTML statici per cre-are la pagina Web (cioè non potete ancora includere alcun elemento dinamico JavaScript, comeun modulo d’ordine), fate un elenco degli elementi dinamici che vi piacerebbe aggiungere allavostra pagina Web, come un modulo per la richiesta del catalogo.

2. Cercate in Internet, usando Yahoo! oppure un altro motore di ricerca, informazioni relative allastoria del World Wide Web e scrivete un componimento di una pagina su ciò che avete appreso.

3. Visitate il sito Web di W3C (World Wide Web Consortium), all’indirizzo http://www.w3c.orge leggete le ultime specifiche relative a HTML. Scrivete un riassunto dei miglioramenti appor-tati al linguaggio HTML e spiegate in che modo essi influiranno sulla progettazione di pagineWeb.

4. Cercate nel Web tre esempi di programmi completi o di effetti creati con JavaScript. Descrive-te i programmi e gli effetti in un componimento di una pagina e valutatene l’efficacia.

5. Jakob Nielsen scrive una nota rubrica su Internet, chiamata Alertbox, all’indirizzo http://www.useit.com/alertbox/. Leggete su Alertbox i tre articoli che seguono e scrivete una bre-ve descrizione di quanto avete appreso: “The top ten new mistakes of web design (May 30, 1999)”,ovvero, i dieci principali nuovi errori della progettazione Web; “Who commits the ‘Top TenMistakes’ in web design? (May 16, 1999)”, ovvero, chi commette i dieci principali errori nellaprogettazione Web? E infine “‘Top Ten Mistakes’ revisited three years later (May 2, 1999)”, ovvero,i dieci principali errori riesaminati tre anni dopo.

6. Visitate un negozio di libri o Internet alla ricerca di informazioni sulla logica di programmazionee il debugging. Scrivete un componimento di una pagina su ciò che avete appreso.

7. Cercate in Internet informazioni su protocolli di Internet, nomi di dominio e indirizzi IP. Scriveteun breve riepilogo per descrivere in che modo questi elementi interagiscono tra di loro.

introduzione a javascript - apogeonline.com · 6 capitolo 1 linguaggio ipertestuale a marcatura per...

Documents