Sessione13 - Dispensa Java

Sessione 13
Html 5 CSS Javascript
1
Il linguaggio Html
Html è il linguaggio utilizzato per scrivere le pagine web di qualsiasi applicazione web.
I web browser, come Firefox, Chrome, Internet Explorer, Opera, Safari etc., detti anche user-agent, sono i programmi software
in grado di interpretare il codice Html e visualizzare (renderizzare dall’inglese to render, visualizzare) le pagine web.
Ad esempio, ogni volta che andiamo su internet per visualizzare un sito web quello che facciamo è aprire un browser e digitare
nella barra degli indirizzi del browser l’url del sito che vogliamo visitare. Questo si traduce in una richiesta web al web server
che gestisce il sito web che stiamo contattando. Il web server invierà una risposta web contenente la pagina Html corrispondente
all’url che abbiamo richiesto ed il nostro browser si incaricherà di renderizzarla a video.
Html è l’acronimo di Hyper Text Markup Language, ovvero un linguaggio fatto di tags per rappresentare informazioni testuali
con hyperlink che collegano tra di loro (appunto link) pagine diverse o sezioni diverse della stessa pagina web.
Un tag è un elemento testuale rappresentato tramite la sintassi <tag_di_apertura> </tag_di_chiusura> che dà un valore
semantico agli elementi della pagina compresi tra il tag di apertura ed il tag di chiusura.
2
Ad esempio, il tag head serve ad indicare che gli elementi della pagina Html compresi tra i tag <head> e </head> rappresentano
l’intestazione della pagina e non devono essere renderizzati dal browser (per lo meno non nella parte interna della pagina web),
viceversa il tag body serve ad indicare che gli elementi della pagina Html compresi tra i tag <body> e </body> rappresentano il
corpo della pagina e devono essere visualizzati dal browser.
Vediamo la struttura di una prima pagina Html (versione 5) d’esempio;
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Prima pagina html</title>
</head>
<body>
Ciao, questa è una prima pagina di prova Html.
</body>
</html>
3
Analizzando i singoli tag della pagina notiamo:
• <!DOCTYPE html>: indica che il documento rappresenta una pagina Html
• <html>: tutta gli elementi della pagina Html devono essere compresi tra i tag di apertura e chiusura html
• <head>: tag di intestazione della pagina Html. Serve a fornire informazioni sulla pagina, come ad esempio il titolo e il
character-encoding (codifica dei caratteri). Le informazioni del tag head non devono essere renderizzate dal browser
• <meta charset="ISO-8859-1">: tag informativo, interno alla sezione head, che indica il tipo di codifica di carattere da
utilizzare. La più diffusa al livello internazionale è la UTF-8. La codifica ISO-8859-1 è utilizzata nell’Europa Occidentale.
Ad esempio, i caratteri accentati, come “è” “ à” etc., sono ammessi solo con codifica ISO-8859-1. In generale è preferibile
usare la codifica UTF-8 ed evitare i caratteri accentati, sostituendo ad esempio il carattere è con i due caratteri e’ (e + il
carattere apostrofo)
• <title>: tag informativo, interno alla sezione head, che rappresenta il titolo della pagina web. Il titolo viene visualizzato dal
browser esternamente alla pagina web, tipicamente nella parte superiore della scheda del browser (nella linguetta della
scheda del browser)
4
• <body>: tag che rappresenta il corpo della pagina web. Gli elementi della pagina Html compresi tra il tag di apertura e
quello di chiusura di body sono candidati ad essere renderizzati dal browser (candidati perché come vedremo in seguito
alcuni elementi possono essere esplicitamente nascosti o comunque non visualizzati)
Una pagina Html è, quindi, un file di testo con in cui sono inseriti dei tag specifici del linguaggio. Il file tipicamente ha
un’estensione .html o .htm.
Lo studio di Html consiste essenzialmente nello studio dei tantissimi tag messi a disposizione dal linguaggio. In questa sede, non
potendo trattare in maniera esaustiva tutti i tag del linguaggio, ci limiteremo a trattare quelli fondamentali. Come al solito, sul
web è gratuitamente disponibile una vastissima documentazione per approfondire la conoscenza del linguaggio.
Html headings
Gli html headings, <h1> <h2> <h3> fino a <h6>, sono tag che servono a formattare il testo compreso tra i tag in una modalità
pre-impostata dal linguaggio. Il testo compreso tra i tag sarà renderizzato dal browser in grassetto (bold) e ad una dimensione via
via decrescente partendo da <h1> fino ad arrivare a <h6>.
Il tag <hr> serve a creare una linea orizzontale.
Ecco un esempio:
<!DOCTYPE html>
5
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Prova del tag h1</h1>
<hr>
</body>
</html>
Nota sugli esempi di questa sessione: per provare tutti gli esempi di questa sessione basta aprire i file con un web browser.
6
<br>
Il tag <br> serve a creare una riga vuota nella pagina.
Da notare che nel testo che viene scritto nelle pagine Html tutti gli spazi precedenti e successivi al testo non vengono renderizzati
dal web browser. Se si vuole forzare la visualizzazione di uno spazio bianco occorre usare l’istruzione (acronimo di new
blank space).
<pre>
Il tag <pre> serve a renderizzare il testo così come viene scritto, quindi senza applicate formattazioni di default dell’html; pre sta
infatti per “pre-formatted”.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
7
<body>
Testo scritto
senza tag
pre
<pre>
Testo scritto
con tag
pre
</pre>
</body>
</html>
Attributi dei tag Html
I tag html possono presentarsi con una sintassi del tipo:
<tag attributo=”valore_attributo”>…..</tag>
L’attributo style
8
Il testo presente tra un tag di apertura ed un tag di chiusura viene renderizzato dal browser con uno stile grafico di default, che
comprende, tra le altre cose, colore di sfondo, colore del testo, font del testo, dimensione del testo, stile del testo (normale,
grassetto, corsivo) etc.
Lo stile di default di un tag può essere modificando definendo l’attributo style. Diciamo subito che questa non è considerata una
best-practice. Come vedremo quando parleremo di CSS (Cascading Style Sheet), la best-practice è definire gli stili della pagina
Html in un file CSS esterno alla pagina e linkare lo stile dalla pagina Html; ma questo lo vedremo dopo, quando parleremo di
CSS. Per adesso vediamo la possibilità che comunque offre l’Html di impostare uno stile direttamente su di un tag.
La sintassi da usare è:
<tag style=”property1:valore1; property2=valore2;……; propertyN=valoreN”>….</tag>
Dove property1, propertyN si chiamano CSS-property.
Vediamo qualche esempio di CSS-property.
• background-color: per impostare il colore di sfondo all’interno del tag
• color: per impostare il colore del testo all’interno del tag
• font-family: per impostare il tipo di font del testo all’interno del tag
9
• font-weight: per impostare il testo in grassetto, in corsivo o lasciarlo normale
• text-align: per stabilire l’allineamento del testo all’interno del tag (a sinistra, centrato, giustificato)
• width: imposta la dimensione orizzontale del contenuto del tag
• height: imposta la dimensione verticale del contenuto del tag
<div> e <span>
<div> e <span> sono due tag che servono solo come “delimitatori”, ovvero servono solo per marcare alcune zone della pagina
Html, magari perché si vuole cambiare lo stile grafico di quella sezione della pagina. L’unica differenza tra i due tag sta nel fatto
che <div> istruisce il browser per renderizzare una riga vuota prima e dopo il tag, mentre con il tag <span> questo non accade.
Guardiamo il seguente esempio che mostra l’utilizzo delle css-property e dei tag <div> e <span>:
<!DOCTYPE html>
<html>
<head>
<title>Background-color</title>
</head>
<body style="background-color: red">
<h1 style="color: blue; font-family: verdana; font-style: italic; text-align: center"> Prova font</h1>
Prima del div
<div style="color: red; background-color: yellow; width: 200; height: 100; text-align: center">
Dentro il div
10
</div>
Dopo il div e prima dello span
<span style="color: red; background-color: yellow; width: 200; height: 100; text-align: center">
Dentro lo span
</span>
Dopo lo span
</body>
</html>
Commenti
I commenti in Html iniziano con la sequenza di caratteri 
Esempio:

HyperLink
Gli hyperlink in html hanno la seguente struttura:
<a href=”www.sito.com”> Testo da mostrare </a>
11
Quindi occorre usare il tag <a> valorizzando l’attributo href con l’indirizzo del sito che vogliamo aprire.
La pagina del sito web linkata tramite l’attributo href si aprirà al posto della pagina correntemente visualizzata dal browser,
sostituendosi ad essa. Se si vuole cambiare questo comportamento si può utilizzare l’attributo target.
12
Nell’esempio seguente la pagina http://ww.google.it viene aperta in una nuova scheda (tab) del browser:
<!DOCTYPE html>
<html>
<head>
<title>HyperLink</title>
</head>
<body>
<a href="http://www.google.it" target="_blank">Google</a>
</body>
</html>
Immagini
Un’immagine viene inserita in una pagina Html attraverso il tag <img>. Ad esempio:
<img src=”immagine.gif” alt=”descrizione immagine” style=”width: 50px; height: 50px”>
13
L’esempio appena mostrato inserisce nella pagina Html l’immagine immagine.gif, che dovrà trovarsi nella stessa directory del
file .html (altrimenti si deve indicare il path relativo dell’immagine rispetto al file .html), riservando all’immagine un’area di
50x50 pixels e indicando tramite l’attributo alt come testo alternativo (il testo mostrato quando si passa col mouse sopra
l’immagine) la stringa “descrizione immagine”.
Tra l’altro un’immagine può anche diventare “cliccabile” ovvero un link se viene posizionata all’interno di un tag <a> come
viene fatto nel successivo esempio:
<!DOCTYPE html>
<html>
<head>
<title>HyperLink</title>
</head>
<body>
<a href="http://www.google.it" target="_blank">Google</a>
<hr>
<div style="background-color: white">
<h3>Immagine clessidra</h3>
<img src="waiting.png" alt="clessidra" style="width:52px; height: 52px">
</div>
<hr>
<h3>Immagine cliccabile che apre il sito http://www.google.it</h3>
<a href="http://www.google.it" target="_blank">
</a>
</div>
</body>
14
</html>
Tabelle
In una pagina Html possiamo inserire una tabella tramite il tag <table>. Le righe della tabella sono inserita tramite il tag <tr>
mentre per le singole celle si usa il tag <td>. E’ possibile anche definire delle intestazioni (header) per i nomi delle colonne
tramite il tag <th>.
Tra gli attributi applicabili al tag <table> sono sicuramente degni di nota gli attributi
• border: per impostare un bordo della tabella
• cellspacing: per impostare dello spazio aggiuntivo all’esterno delle celle della tabella
• cellpadding: per impostare dello spazio aggiuntivo all’interno delle celle della tabella
• width e height: scorciatoie per impostare direttamente le dimensioni della tabella senza dover usare le css-proerty
all’interno dell’attributo style
15
Vediamo subito un esempio di tabella Html:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<div align="center">
<table border="1" cellspacing="0" cellpadding="50" width=200px height=200px>
<tr>
<th>Nome</th>
<th>Cognome</th>
</tr>
<tr>
<td align="center">Mario</td>
<td align="center">Rossi</td>
</tr>
<tr>
<td align="center">Franco</td>
<td align="center">Verdi</td>
</tr>
</table>
</div>
</body>
</html>
16
Liste
In una pagina Html si possono inserire liste non ordinate e ordinate rispettivamente con i tag <ul> e <ol> (UnorderedList e
OrderdList).
Ciascun elemento della lista sarà rappresentato dal tag <li>.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Liste</title>
</head>
<body>
<div align="left">
<h3>Linguaggi di programmazione</h3>
<ul>
<li>Java</li>
<li>.Net</li>
<li>Php</li>
</ul>
</div>
<hr>
<div align="left">
<h3>Bevande</h3>
<ol>
<li>Caffe'</li>
<li>Latte</li>
<li>Acqua</li>
</ol>
17
</div>
</body>
</html>
Iframe
E’ possibile inglobare una pagina Html all’interno di un’altra con il tag <iframe> nel seguente modo:
<iframe src=”paginaInterna.html” width=”200px” height=”200px”></iframe>
Per esempio, potremmo inserire la pagina dell’esempio delle liste visto prima all’interno di un’altra pagina nel seguento modo:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<h3>Contenuto iframe:</h3>
<iframe src="8_liste.html" width="400px" height="400px"></iframe>
</div>
<hr>
<h3>Ciao</h3>
</div>
</body>
</html>
18
Un iframe può essere usato anche come target di un hyperlink, come mostrato nel successivo esempio.
<!DOCTYPE html>
<html>
<head>
<title>Iframe 2</title>
</head>
<body>
<div>
<iframe src="vuoto.html" width="1200px" height="500px" name="_iframeInterno"></iframe>
</div>
<h3>Immagine cliccabile che apre il sito http://www.bing.it</h3>
<a href="http://www.bing.it" target="_iframeInterno">
</a>
</div>
</body>
</html>
Nell’esempio abbiamo creato un file html vuoto, vuoto.html, lo abbiamo inserito all’interno di un iframe e abbiamo fatto aprire il
link alla pagina http://www.bing.it nell’iframe.
19
Form
Una pagina Html può inviare dati ad un web server, ad esempio perché vuole leggere dei dati esposti dal web-server o perché
vuole aggiornare dei dati sul web-server.
Lo scenario tipico è quello in cui la pagina Html che vuole inviare dati al web-server si trova essa stessa su di un web-server (che
può anche essere lo stesso web-server a cui vuole inviare i dati).
Ovvero, lo scenario tipico è quello in cui un utente sta navigando su di un sito web e apre una pagina Html che richiede
l’inserimento di dati da parte dell’utente, o richiede che l’utente effettui delle scelte tra alcune opzioni che gli vengono mostrate a
video, e a seguito dell’inserimento dati e/o delle scelte effettuate, l’utente clicca su di un bottone e invia una richiesta ad un web-
server (come detto sullo stesso sito web o su di un altro). La richiesta web viaggerà insieme ai dati selezionati/inseriti dall’utente
e può essere di tipo GET o POST.
Precisiamo un concetto che ci tornerà utile tra un attimo, quando metteremo in luce le principali differenze tra richieste GET e
POST, ovvero il concetto di query-string.
La query-string è la parte dell’url che inizia col carattere ? e successiva al nome del web-server. Ad esempio, nell’url
http://www.sito.com?campo1=valore1&campo2=valore2 la query-string sarà campo1=valore1&campo2=valore2.
Le principali differenze tra i due tipi di richieste sono:
• una richiesta GET invia al web-server i dati della pagina Html in chiaro nella query-string, mentre una richiesta POST invia
i dati in modo non visibile nell’url
20
• la dimensione dei dati che possono viaggiare per una richiesta GET (quindi nella query-string) sono molto più contenute di
quelle relative ad una richiesta POST
Pertanto quando i dati che stiamo inviando sono dati sensibili, come ad esempio una password, o quando i dati che stiamo
inviando sono di notevoli dimensioni, si deve usare una richiesta POST.
In linea generale è preferibile usare una richiesta GET soltanto per richieste “in lettura” al web server, con invio di dati di
dimensioni ridotte e senza invio di dati sensibili. In tutti gli altri casi è preferibile usare una richiesta POST.
In entrambi i tipi di richiesta il tag utilizzato nella pagina Html che effettua la richiesta è il tag <form>.
La sintassi del tag <form> è:
<form action=”paginaServer.jsp” method=”POST”>
<input type=””….>
…..
<input type=””….>
<textarea>…..</textarea>
<select>
<option>
….
<option>
</select>
21
….
<input type=”submit” value=”invia”>
</form>
Il valore dell’attributo action deve specificare l’indirizzo sul web-server dove sarà in ascolto un componente del web-server in
grado di elaborare le richieste web e fornire in risposta delle opportune pagine Html.
Questi componenti del web-server sono tipicamente applicazioni software scritte in:
• Java: è il caso che vedremo nel nostro corso
• Php
• .Net o comunque in tecnologie Microsoft
Continuando l’analisi del tag <form>, l’attributo method indica il tipo di richiesta web, se GET o POST. Se omesso, quindi in
caso di default, viene usata la richiesta GET.
Nei tag <input>, <textarea>, <select> che vedremo tra poco, sono presenti i dati che la pagina Html desidera inviare al web-
server.
In particolare il tag <input> con attributo type=Submit è un bottone che quando cliccato fa partire l’effettiva richiesta al web-
server.
22
• <input type=”text”>: in questo caso il browser renderizza nella pagina Html una piccola area in cui è possibile digitare del
testo che sarà inviato al web-server (dopo il submit della form)
• <input type=”radio”>: in questo caso il browser renderizza un menu con più opzioni mutuamente esclusive, ciascuna
opzione rappresenta un possibile dato da inviare al web-server. L’utente scegliendo tra le opzioni determina quale dato
inviare al web-server (dopo il submit della form)
• <input type=”checkbox”>: come per radio, cambia solo la renderizzazione grafica del browser che tipicamente visualizza
una casella spuntabile e cambia il fatto che ogni singolo checkbox è singolarmente spuntabile o meno. Quando il checbox
viene spuntato, il dato ad esso associato viene inviato al web-server (dopo il submit della form)
• <input type=”hidden”>: in questo caso c’è un dato pre-impostato nella pagina html che verrà sempre inviato al web-server
a prescindere dalle scelte che farà l’utente sulla pagina Html stessa. Il dato in questione è nascosto all’utente (perciò
hidden)
• <input type=”password”>: identico al tag <input type=”text”> con l’unica differenza che in questo caso il browser
renderizza il testo oscurando la sequenza di caratteri immessi
• <input type=”submit”>: come già detto è un bottone che quando cliccato dall’utente determina l’invio effettivo dei dati
della form al web-server
23
• <textarea>: come <input type=”text”>, solo che in questo caso l’area disegnata dal browser, preposta all’inserimento del
testo da parte dell’utente, sarà più grande rispetto al caso di <input type=”text”>. Quindi è da preferire quando l’utente
deve scrivere un testo abbastanza lungo da inviare come dato al web-server
• <select>: come per <input type=”radio”>, anche qui cambia solo la renderizzazione grafica del browser che tipicamente
visualizza un menu a tendina. select può essere impostato per accettare un unico valore (quindi opzioni mutuamente
esclusive come radio) o per accettare più opzioni. Il default è a singolo valore. In ogni caso il valore/i selezionato/i nella
select determina l’invio al web-server del dato/i associato (dopo il submit della form)
Vediamo un esempio che illustra una form con le varie opzioni appena esposte per inviare i dati al web-server:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="" method="GET">
Nome(text): <input type="text" name="inputText"/>
<br>
<br>
Password(password): <input type="password" name="inputPassword"/>
<br>
<br>
Descrizione(textArea):
<br>
24
<textarea name="inputTextArea"></textarea>
<br>
<br>
Accetti le condizioni? (checkBox)
<input type="checkbox" name="inputCheckbox" checked="checked"/>
<br>
<br>
Sesso (radio):
<br>
<input type="radio" name="inputRadio" value="maschio" checked="checked">Maschio
<br>
<input type="radio" name="inputRadio" value="femmina">Femmina
<br>
<br>
Qui inviamo un campo nascosto "campo1=valore1"
<input type="hidden" name="campo1" value="valore1">
<br>
<br>
Selezionare la bevanda (select)
<br>
<select>
<option value=""></option>
<option value="latte" >Latte</option>
<option value="caffe" selected>Caffe'</option>
<option value="acuqa">Acqua</option>
</select>
<br>
<input type="submit" value="Invia i dati">
</form>
</body>
</html>
25
Da notare che:
• l’attributo action della form è stato lasciato vuoto perché non abbiamo un web-server con un componente in grado di
rispondere alla nostra richiesta (lo vedremo più avanti nel corso)
• l’attributo method è stato impostato a GET per permettere di vedere la query-string con i dati dopo il click sul submit
• l’attributo checked sul checkbox che preimposta il campo come selezionato (si può comunque modificare)
• l’attributo selected sulla select che preimposta la option relativa come selezionata (si può comunque modificare)
La trattazione, nonostante abbastanza corposa, è come già detto assolutamente non esaustiva. Esistono molti altri tag Html, e
anche per i tag di cui abbiamo parlato esistono comunque molti altri attributi di cui non abbiamo parlato; esistono anche altri
“controlli” delle form, ovvero altri modi per poter inviare dati al web server attraverso una form. In particolare, la versione 5 di
Html ha introdotto molte novità, aggiungendo per esempio una serie di controlli nelle form che semplificano il lavoro di chi
scrive le pagine Html, così come molti nuovi tag semantici, ovvero che servono a dare un significato speciale alle parti che
compongono la nostra pagina Html. Inoltre la versione Html5 ha aggiunto anche alcune API (Application Program Interface) per
poter effettuare alcune operazioni di notevole utilità come ad esempio il drag&drop di file direttamente dal computer dell’utente
alla pagina web. Alcune di questi tag, attributi, controlli di form e funzionalità le incontreremo andando avanti durante il corso.
26
CSS
CSS, ovvero Cascade Style Sheet, è il linguaggio che descrive come renderizzare graficamente, quindi come presentare, una
pagina Html.
La coppia Html/CSS mette in evidenza un concetto molto ricorrente nella programmazione sul quale torneremo anche più avanti
nel corso: separazione tra modellazione dati e presentazione dei dati. In Html descriviamo i dati della pagina web e con il
CSS definiamo come presentarli graficamente. Mantenere separati i due aspetti è una best-practice che ha il grande vantaggio
pratico di poter cambiare la visualizzazione dei dati senza dover cambiare il modello sottostante dei dati.
Come già visto, ogni tag Html presenta un attributo style attraverso cui poter impostare le css-property per specicare lo stile da
applicare al tag.
La definizione delle css-property può essere fatta in vari modi come vedremo tra poco, ma iniziamo subito ad anticipare che la
strada preferibile, la best-practice, è definire le css-property in un file separato (o n file), con estensione .css, e linkare il file dalla
pagina Html. Attraverso la definizione di un file CSS esterno sarà possibile cambiare l’intera grafica di un sito web modificando
solo il file CSS.
La sintassi di definizione di uno stile è:
27
selettore { property_1: value_1; property_2: value_2}
Il selettore può essere:
• un tag Html
• il valore dell’attributo id di un tag Html
• il valore di un attributo class di un tag Html
Ad esempio, se scriviamo:
h1 {
background-color: red;
stiamo impostando il colore di sfondo rosso per tutti i tag <h1> della nostra pagina Html.
Se invece scriviamo:
#id_1 {
}
28
stiamo impostando il colore di sfondo rosso per i tag della nostra pagina Html con attributo id=”id_1”, come ad esempio:
<div id=”id_1”>
<span id=”id_1”>
Infine, se scriviamo
.class1{
}
stiamo impostando il colore di sfondo rosso per tutti i tag della nostra pagina web con attributo class=”class1”, come ad
esempio:
<div class=”class1”>
<span class=”class1”>
Inoltre, si può specializzare maggiormente il selettore a cui applicare uno stile concatenando più selettori.
Ad esempio, scrivendo:
div.class1 {
}
29
stiamo impostando il colore di sfondo rosso soltanto per i tag <div> con attributo class=”class1”; quindi se nella pagina Html
abbiamo due tag:
<div class=”class1”>
<span class=”class1”>
lo stile non si applicherà al tag <span> (né ad altri eventuali tag con attributo class=”class1”) ma solo al tag <div>.
I selettori possono anche essere aggregati nel seguente modo:
div, span, h1 {
}
In questo caso stiamo impostando il colore di sfondo rosso per tutti i tag div, span e h1.
Andiamo adesso a vedere i modi in cui si può applicare uno stile ad una pagina Html:
1. in un un file esterno (best-practice). In questo caso si crea il file .css contenente le varie css-property e si linka il file nella
pagina Html, nella sezione <head>, nel seguente modo: <head> <link rel=”stylesheet” type=”text/css”
href=”stile.css”> </head>
2. direttamente nella pagina Html, all’interno della sezione <head>, si crea un tag <style> in cui si definiscono tutti gli stili
della pagina
3. direttamente negli attributi style dei singoli tag della pagina Html si definiscono individualmente gli stili da applicare ai tag
30
La prima opzione è la best-practice perché consente di definire in un unico punto tutti gli stili della nostra applicazione web;
inoltre, tenendo lo stile in un file separato, tale file è linkabile da qualunque pagina Html della nostra applicazione che desideri
utilizzarlo.
Per quanto concerne la priorità di applicazione degli stili, se lo stesso stile fosse definito in tutti e tre i modi suddetti, l’ordine di
priorità darebbe massima priorità agli stili definiti negli attributi dei tag, poi a quelli definiti nel tag <style> e successivamente
agli stili definiti nei file esterni.
Inoltre per gli stili definiti tramite due o tre delle opzioni suddette vale il principio dell’ereditarietà (per questo si parla di
Cascading): gli stili definiti negli attributi dei tag ereditano da quelli definiti nel tag style che a loro volta ereditano da quelli
definiti nei file CSS esterni.
Ad esempio, supponiamo di definire in un file CSS esterno
div {
color: green;
}
ed in una pagina Html, nel tag style:
div {
background-color: yellow;
text-align: center;
31
}
ed in un tag div della nostra pagina Html:
<div style=”font-weight: bold”>
Testo su cui applicheremo gli stili
</div>
Lo stile definito come attributo del tag div prende massima priorità ed imposta il testo in grassetto (bold), eredita dallo stile
definito attraverso il tag <style> l’allineamento al centro ed il colore di sfondo giallo, ed eredita poi dal CSS esterno il colore del
testo verde (ma non il background-color rosso, perché questa property è stata già ereditata dal tag style dove ha priorità superiore
rispetto al file CSS esterno).
In definitiva, il testo dentro il tag div sarà in grassetto, allineato al centro, di colore verde e con sfondo giallo.
32
JavaScript
Tramite l’Html siamo in grado di scrivere pagine web “statiche”, ovvero pagine che rappresentano dati in un formato
comprensibile per i web browser. L’unica forma di interazione consentita per gli utenti delle pagine Html è quella offerta dalle
form che consentono di inviare dati al web-server. Tuttavia, quest’ultima è, come già detto, una forma di interazione client-
server. L’utente, lato client, inserisce dei dati nella form Html, li invia tramite una richiesta HTTP al web-server dove un
componente, lato server, elabora i dati e restituisce una risposta HTTP (nel nostro caso il componente lato server è un programma
Java, ma potrebbe essere un programma Php o un programma .Net).
JavaScript è, invece, un linguaggio di programmazione lato client, che consente di dinamicizzare la pagina Html direttamente lato
client. JavaScript è infatti un linguaggio che viene direttamente interpretato dal web-browser.
Notiamo quindi subito delle caratteristiche peculiari di JavaScript che lo distinguono rispetto a linguaggi di programmazione lato
server come Java, Php o .Net:
• JavaScript è un linguaggio interpretato. Pertanto (cfr. sessione introduttiva a Java) il codice JavaScript non necessita di
essere compilato, ma viene direttamente eseguito da un engine in grado di comprenderlo, come appunto i web browser
• JavaScript è un linguaggio lato client
33
• JavaScript è un linguaggio non fortemente tipizzato. A differenza di Java, dove una variabile deve essere rigorosamente
definita come appartenente ad un tipo (primitivo o classe) e tutte le operazioni ammesse sulla variabile sono diretta
conseguenza della sua tipizzazione, in JavaScript una variabile può essere dichiarata senza specificare un tipo, può essere
utilizzata in differenti porzioni di codice come variabile di tipi differenti
A parte le eccezioni fondamentali appena elencate, la sintassi JavaScript presenta diverse similitudini con la sintassi Java (e
potremmo dire con quelle di un qualunque linguaggio di programmazione di alto livello). Anche in JavaScript esistono i tipi
che rappresentano stringhe, numeri, date etc., è possibile dichiarare funzioni (come i metodi di una classe Java) ed è possibile
persino dichiarare oggetti JavaScript.
Un utilizzo classico del codice JavaScript è quello di rispondere, tramite una funzione, ad un evento scatenato dall’utente della
pagina web.
Ad esempio, nella nostra pagina Html è presente un bottone e al click dell’utente sul bottone scatta una funzione JavaScript.
Infatti il codice Html predispone una serie di eventi, che gestiscono ad esempio il click su di un bottone, il focus in un’area di
testo (quando si clicca con il mouse in un’area per l’inserimento di testo della pagina Html, <input type=”text>, ed il prompt
inizia a lampeggiare nell’area di testo), il blur dall’area di test (l’opposto del focus, quindi quando si perde il focus spostando
il mouse). Su ciascuno di questi eventi si può agganciare l’invocazione di una funzione JavaScript, in gergo si parla di event
handler.
34
Questa tecnica di gestione degli eventi, tramite evento ed event-handler, è un’altra tecnica tipica dei linguaggi di
programmazione.
Un utilizzo tipico di JavaScript che deriva come immediata conseguenza della gestione ad eventi appena descritta è quello
della validazione delle form Html: si validano i dati inseriti da parte dell’utente in una forma Html prima di inviarli al web-
server, in modo da segnalare all’utente un eventuale errore prima di far partire inutilmente una richiesta HTTP verso il web
server.
Ad esempio, si pensi al caso di una form che prevede l’inserimento di un indirizzo e-mail da parte dell’utente. Un controllo
lato client, quindi nel codice JavaScript, che quantomeno l’indirizzo e-mail contenga il carattere “@” e contenga un dominio
come ad esempio .com piuttosto che .it permetterebbe di evitare un’inutile richiesta HTTP inviata al web server in caso di dati
scorretti.
Quanto appena detto ci dà l’opportunità di illustrare un altro concetto essenziale nella programmazione web: le validazioni
dei dati vanno sempre ripetute anche lato server.
Per quanto una validazione dei dati offra i vantaggi suddetti e quindi sia sempre consigliabile, è comunque una best-practice
ripetere la validazione anche lato server. Il codice lato server, infatti, potrebbe essere richiamabile anche in modo diverso dal
un determinato codice lato client. Potrebbero essere scritti, magari anche da persone diverse, diversi client che richiamano lo
35
stesso codice lato server; ecco perché un codice lato server robusto non dovrebbe mai fare affidamento sul fatto che la
validazione dei dati sia già stata effettuata lato client.
Un altro utilizzo tipico del codice JavaScritp è la manipolazione del DOM, Document Object Model, della pagina Html.
Una pagina Html presenta un modello ad oggetti, detto Dom, in base al quale tutti gli elementi (tag) della pagina fanno parte
di una gerarchia di oggetti che parte da Document, che rappresenta l’intera pagina Html. Ad esempio:
• document.body per accedere al corpo della pagina Html
• document.window per accedere alla finestra del browser all’interno della quale è stata aperta la pagina Html
• document.forms per accedere a tutte le form definite all’interno della pagina Html
• document.getElementById(“id”) per accedere direttamente all’elemento identificato dall’attributo id
Particolarmente diffuso è l’utilizzo di document.getElementById() che consente di recuperare direttamente un elemento della
pagina Html attraverso il valore del suo attributo id. Sull’elemento così ottenuto è possibile ad esempio modificare il suo
contenuto testuale attraverso la funzione innerHtml o semplicemente leggere il valore del testo contenuto nel tag.
36
Ad esempio, se in una pagina Html avessimo scritto:
<div id=”id_div”>
Testo all’interno del div con id=”id_div”
</div>
in una parte del nostro codice JavaScript potremmo accedere al testo contenuto nel div, tramite
document.getElementById(“id_div”)
e potremmo modificare il testo scrivendo:
document.getElementById(“id_div”).innerHtml = “Nuovo testo all’interno del div con id=’id_div’”;
Tramite JavaScript si può aprire una finestra di popup con un messaggio informativo rivolto all’utente della nostra applicazione,
invocando il metodo alert() che accetta come parametro di ingresso la stringa da mostrare nella popup.
Ad esempio, potremmo pensare di recuperare il testo contenuto in un div e mostrarlo in una finestra di popup tramite le
istruzioni:
37
var s = document.getElementById(“id_div”);
alert(“Il contenuto del div è: “ + s);
Sempre manipolando il Dom di una pagina Html tramite JavaScript potremmo pensare anche di cambiare lo stile di un tag della
pagina e fondendo i concetti di gestione degli eventi e di manipolazione del Dom, potremmo pensare di fare tutte le operazioni
suddette di manipolazione della pagina Html come risposta ad un evento scatenato dall’utente.
Il codice JavaScript può essere inserito:
• all’interno della sezione <head> della pagina Html nel tag <script>
• all’interno della sezione <body> della pagina Html nel tag <script>
• in un file separato con estensione .js, la best-practice, linkando il file nella pagina Html attraverso l’istruzione <script
src=”nomeFile.js”>
38
Vediamo adesso un esempio che mostra l’utilizzo di JavaScript, insieme anche ad un minimo di CSS:
<!DOCTYPE html>
<html>
<head>
<title>Primo esempio JavaScript</title>
<script src="sito.js"></script>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
<div id="id_div" class="center addPadding">
Testo iniziale all'interno del div con id "id_div"
</div>
<div class="center addPadding">
<button class="addPadding" onclick="visualizza('id_div')">Clicca per vedere il contenuto del
div</button>
<br >
<button class="addPadding" onclick="cambiaTesto('id_div','Nuovo testo del div')">Clicca per
cambiare il contenuto del div</button>
</div>
<div class="center addPadding">
Inserisci un nuovo testo: <input type="text" id="inputTextId">
<br >
<button class="addPadding" onclick="cambiaTesto2('inputTextId','id_div')">Clicca per cambiare il
contenuto del div</button>
</div>
</body>
</html>
39
Il contenuto del file sito.js è:
function visualizza(id) {
var s = document.getElementById(id).innerHTML;
alert('Il testo e\': ' + s);
}
function cambiaTesto(id,newTesto) {
document.getElementById(id).innerHTML = newTesto;
}
function cambiaTesto2(id1,id2) {
var s = document.getElementById(id1).value;
document.getElementById(id2).innerHTML = s;
}
Mentre il contenuto del file stile.css è:
h1 {
}
#id_1 {
background-color: yellow;
}
.class1 {
color: white;
40
font-weight: bold;
background-color: green;
}
p.class1 {
color: orange;
font-weight: bold;
background-color: blue;
}
h2 {
color: white;
background-color: black;
}
.center {
align: center;
text-align: center;
}
.addPadding {
padding: 20px;
margin: 20px;
}
Grazie alla sua semplicità di utilizzo (possiamo senz’altro dire che un programmatore Java è certamente in grado di comprendere
JavaScript con molta facilità) ed alla sua conseguente enorme diffusione (ad oggi JavaScript è il linguaggio più diffuso al
mondo), si è verificata negli ultimi anni una proliferazione di librerie JavaScript (moltissime delle quali free ed open source) che
41
hanno consentito di semplificare la programmazione JavaScript ancora ulteriormente e di effettuare con poche righe di codice
elaborazioni lato client anche molto complesse. Una su tutte, tra queste librerie, è senz’altro JQuery.
Anche la trattazione di JavaScript meriterebbe un corso a parte. In questo corso Java cerchiamo di dare solo gli elementi di base
per poter comprendere almeno cos’è JavaScript e soprattutto gli esempi che verranno mostrati più avanti nel corso.
Per quanto, infatti, è in corso da moltissimo tempo un’annosa (e spesso inutile) discussione su cosa sia più giusto demandare
all’elaborazione lato server (quindi nel caso nostro in Java) e cosa sia più giusto demandare all’elaborazione lato client (quindi
JavaScript) è sicuramente inevitabile che in un progetto web, uno sviluppatore si trovi a dover comprendere entrambi i tipi di
tecnologie. Questo è il motivo per il quale, in un corso che resta comunque un corso Java, dovendo trattare la parte web abbiamo
ritenuto indispensabile fornire almeno questi elementi di base di Html, CSS e JavaScript.
Come più volte detto nel corso, anche a proposito di Java, l’approccio del programmatore che lavora in questo settore deve essere
sempre quello di avere una visione d’insieme delle varie componenti in gioco e andare di volta in volta ad approfondire in base
alle reali esigenze dei progetti su cui si lavora.
42

Sessione13 - Dispensa Java

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Sessione13 - Dispensa Java

Caricato da

Copyright:

Formati disponibili

Sessione 13

Html 5 CSS Javascript

Vediamo la struttura di una prima pagina Html (versione 5) d’esempio;

• <!DOCTYPE html>: indica che il documento rappresenta una pagina Html

Il tag <hr> serve a creare una linea orizzontale.

Il tag <br> serve a creare una riga vuota nella pagina.

Attributi dei tag Html

I tag html possono presentarsi con una sintassi del tipo:

<tag style=”property1:valore1; property2=valore2;……; propertyN=valoreN”>….</tag>

Dove property1, propertyN si chiamano CSS-property.

Vediamo qualche esempio di CSS-property.

• background-color: per impostare il colore di sfondo all’interno del tag

• color: per impostare il colore del testo all’interno del tag

• width: imposta la dimensione orizzontale del contenuto del tag

• height: imposta la dimensione verticale del contenuto del tag

Gli hyperlink in html hanno la seguente struttura:

<a href=”www.sito.com”> Testo da mostrare </a>

<img src=”immagine.gif” alt=”descrizione immagine” style=”width: 50px; height: 50px”>

• border: per impostare un bordo della tabella

La sintassi di definizione di uno stile è:

Il selettore può essere:

• il valore dell’attributo id di un tag Html

• il valore di un attributo class di un tag Html

• JavaScript è un linguaggio lato client

• document.body per accedere al corpo della pagina Html

• document.getElementById(“id”) per accedere direttamente all’elemento identificato dall’attributo id

Testo all’interno del div con id=”id_div”

e potremmo modificare il testo scrivendo:

document.getElementById(“id_div”).innerHtml = “Nuovo testo all’interno del div con id=’id_div’”;

alert(“Il contenuto del div è: “ + s);

Il codice JavaScript può essere inserito:

Mentre il contenuto del file stile.css è:

Potrebbero piacerti anche