Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

@Elenchi

Gli elenchi possono essere di vari tipi

Elenchi semplici (non ordinati);

§ Elenchi numerati o puntati (ordinati);

§ Elenchi di definizioni.

§

È possibile annidare elenchi, anche di tipo diverso.

Ogni elenco contiene un codice pricipale, che specifica di che tipo di elenco si tratta dei tipi elencati

precedentemente, ed un codice secondario che indica il tipo di voci dell’elenco.

Gli elenchi ordinati sono molto utili per cerare anche l’indice della pagina Web contenente i collegamenti

alle varie parti del documento (usando i link).

elenchi semplici (non ordinati) <ul>

Gli sono molto comuni e vengono creati con il tag (unordered list).

<li> </li>.

Ciascuna voce dell’elenco è preceduta dal tag (list item) e termina con il tag

</ul>.

L’elenco termina con il tag di chiusura

Se non specificato l’elenco viene effettuato con pallini neri e un’indentazione leggermente scostata da

sinistra.

elenchi numerati o puntati (ordinati) <ol>

Gli vengono iniziati con il tag (ordered list).

<li> </li>

Ciascuna voce dell’elenco è preceduta dal tag (list item), termina con il tag e viene visualizzata

con un numero intero progressivo (di default i vengono usati numeri arabi).

</ol>.

L’elenco termina con il tag di chiusura

elenchi di definizioni

Gli sono usati per costruire elenchi di parole seguite ciascuna dalla sua definizione.

<dl>

Questi elenchi iniziano con il tag (definition list) . <dt>

Ogni parola che deve essre spiegata e definita viene introdotta dal tag (definition term) e termina

</dt>.

con il tag

La parola da definire è allineata a sinistra mentre la definizione è indentata.

<dd> </dd>.

La definizione inizia con il tag (definition data) e termina con il tag <li>.

Per correggere un elenco basta inserire un nuovo elemento nella posizione corretta con il tag

Il vantaggio è davvero evidente nelle liste ordinate perché il browser aggiorna automaticamente la

numerazione progressiva della lista.

Possono essere usati alcuni attributi per modificare gli elenchi:

start (deprecated): permette di iniziare una lista con un numero diverso da 1.

<ol start=”4”>

Es.:

value (deprecated): modifica il numero di un singolo elemento;

anche i successivi elementi saranno numerati a seguire.

<li value=”5”>

Es.:

type(deprecated): modifica la numerazione degli elementi della lista (di default è decimal,

cioè numeri arabi). Elenco dei tipi permessi da type:lower-roman, upper- roman,

lower-alfa, upper-alfa, decimal.

style: permette di scegliere il tipo di numerazione degli elementi della lista se essa è ordinata (di

default è decimal, cioè numeri arabi).

<ol style=”list-style-type=”lower-greek”>

Es.:

Se la lista non è ordinata questo attributo può modificare il pallino pieno davanti alle

voci.

Di default c’è disk (pallino pieno), poi l’attributo può assumere i valori circle (pallino

vuoto) o square (quadratino).

<ul style=”list-style-type=disc/circle/square”>

Es.: 3

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

@Link

I link servono a collegarsi ad altre pagine Web, oppure ad alcune zone della stessa pagina che potrebbero

essere nascoste (ancore).

Il collegamento ad altre pagine Web viene fatto in questo modo:

<a href=”pagina di destinazione.html”>etichetta</a>

<a> href

Questo testo viene posizionato nella sorgente; il tag indica ancora, mentre l’attributo (hypertext

reference) specifica la destinazione del collegamento.

L’etichetta è ciò che comparirà nella pagina Web e solitamente appare in blu o sottolineato.

</a>.

Il tag termina con

Facendo click con il mouse sull’etichetta verrà visualizzata la pagina di destinazione.

È possibile associare link (collegamenti) sia a testi che a immagini.

La destinazione del collegamento ipertestuale può esere di vari tipi, a seconda di dove si trovi la pagina

cercata che si vuole visualizzare, rispetto alla pagina che contiene il link:

pagina nella stessa cartella

pagina nella stessa directory

pagina sullo stesso server

pagina in un server diverso

ed eventualmente:

se si vuole accedere ad una specifica porzione di testo all’interno di una pagina

Destinazione del collegamento nello stesso documento che contiene il link (ancora)

Se la pagina (documento HTML) è molto lunga e si vuole fare riferimento ad altre sezione di tale

documento, si possono usare le ancore.

È utile creare un’ancora per ogni sezione poiché facilita la navigazione in profondità della pagina.

Al click il browser visualizza la sezione che contiene l’ancora, ma non ne individua la posizione precisa

(se questa non è per esempio un titolo).

Per mostrare al visitatore la posizione precisa è bene evidenziare la parte cercata in grassetto o comunque

con un carattere riconoscibile.

Costruzione di un’ancora:

nella porzione che si vuole collegare si scrive (destinazione del collegamento):

<a name=”nome ancora”>parole o titolo a cui si vuole fare riferimento</a>

nella sorgente si scrive (sorgente del collegamento):

<a href=”#nome ancora”>etichetta</a>

é possibile un’alternativa ad href:si può utilizzare l’attributo di identificazione univoca id per identificare

univocamente la destinazione del link.

Si scrive:

<h2 id=”nome ancora”> parole o titolo a cui si vuole fare riferimento</a>

il valore di id essendo unico all’interno del documento trasforma l’elemento in un’ancora.

Destinazione del collegamento nella stessa cartella o nella stessa directory (URL relativo)

Se la pagina di destinazione si trova nella stessa cartella, l’URL relativo, è il semplice nome del file:

<a href=”nome del file.html”>etichetta</a>

Se la pagina di destinazione si trova nello stesso server ma in un livello diverso della gerarchia della

directory, il nome del file va preceduto dall’indicazione della cartella in cui si trova:

<a href=”percorso/nome del file.html”>etichetta</a>

.. vai su di un livello

/ vai giù di un livello

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone 4

Se la destinazione è una parte specifica di un altro documento si può fare seguire al nome del file il nome

dell’ancora nell’altro documento:

<a href=”nome del file.html#nome ancora”>etichetta</a>

Destinazione del collegamento in un altro server (URL assoluto)

Quando la destinazione di un collegamento è su un altro computer serve L’URL completo del documento

di destinazione, incluso il nome del server su cui si trova il file.

Al click solitamente viene visualizzata la homepage del documento a cui si rifersice il collegamento.

È possibile fare anche collegamenti ad immagine che è bene siano compresse per permettere all’utente di

scaricarle velocemente.

Un’altra opportunità è fare un collegamento associato ad una immagine: l’immagine viene mostrata come

origine del link, su cui si può fare click e che quindi funge da etichetta.

La sintassi è:

< a href=”nome del file.html”><img src=”nome della foto.jpeg”/></a>

@Tabelle

Con il CSS (Cascading Style Sheet) se ne possono creare anche di veramente complesse.

<table> </table>.

Una tabella inizia con il tag e termina con il tag

La larghezza totale di una tabella standard è 600 pixel.

I layout si espandono e si contraggono se le dimensioni della tabella sono espresse in percentuali invece

che in numero di pixel.

Le tabelle sono successioni di righe, si possono assegnare nomi a righe e colonne, le tabelle possono

essere annidate ma rallentano notevolmente il browser.

<tr> </tr>.

Ogni riga inizia con il tag (table row) e termina con il tag

<td>

Il tag (table data) indica il contenuto della cella (allineato a sinistra orizzontalmente e al centro

</td>.

verticalmente) e termina con il tag <th>

Il nome della riga o della colonna può essere specificato in apertura dal tag (table header) e in

</th>.

chiusura dal tag

L’attributo border specifica lo spessore dei bordi in pixel della tabella e può assumere solo valori interi.

<caption> </caption>.

Il titolo di una tabella può essere specificato con il tag di apertura e chiusura

align

Di default le tabelle vengono allineate a sinistra ma con l’attributo si possono allineare anche al

centro o a destra.

Al fianco delle tabelle è possibile scrivere e se il testo non trova spazio di fianco alla tabella prosegue

sotto; se spostiamo la tabella da sinistra a destra il browser provvederà automaticamente ad allineare il

testo a destra. colspan.

È possibile ottenere celle che si estendono a più colonne usando l’attributo

<tr>

Es.: <th colspan=”2”>colonne<th>

</tr> rowspan.

è possibile ottenere celle che si estendono a più righe usando l’attributo

<tr>

Es.: <th rowsan=”3”>righe<th>

</tr> 5

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

Allineamenti

All’interno delle celle i contenuti vengono automaticamente allineati a sinistra orizzontalmente e al centro

verticalmente. align:

Se si vuole cambiare l’allineamento orizzontale si può fare uso dell’attributo i valori che può

assumere sono left, right o center.

Align può essere a tutte le celle di una riga (<tr align…) o ad una specifica cella (<td align… , <th align).

valign:

Se si vuole cambiare l’allineamento verticale si può fare uuso dell’attributo i valori che può

assumere sono middle, top, bottom, middle.

Valign può essere applicato solo alla cella di riferimento.

@Moduli (form)

Al visitatore viene fatto compilare un formulario: è il modo più comune per consentire agli utenti di

trasmettere informazioni da un browser Web ad un server.

widget,

Gli oggetti utilizzati nei moduli sono chiamati attraverso i quali è possibile creare: caselle di

testo, caselle per password, pulsanti di opzione, elenchi a discesa, menù,aree ti testo, immagini cliccabili,

due pulsanti speciali spiegati in seguito.

<form> JavaScript.

Il tag può gestire anche eventi standard come quelli di

<form>,

Ogni modulo è sempre costituito da un tag di apertura dagli elementi widget che si desidera

</form>.

inserire, dal pulsante submit (o un’immagine attiva) e dal tag di chiusura

Una pagina dovrebbe contenere un solo form.

Ogni form deve contenere obbligatoriamente un pulsante submit che permette di codificare e inviare al

server i dati introdotti.

Il pulsante reset azzera i valori di tutti i widget.

Ogni elemento deve avere un nome che serve come etichetta di riconoscimento identificativa dei valori

che vengono assegnati nella fase di elaborazione.

I dati del modulo vengono definiti come i valori di tuitti i widget di un form.

<form>

Il tag di apertura può avere fino a 24 attributi di cui due però sono obbligatori:

method: indica il metodo di invio dei dati del form. Può assumere i valori get o post.

action: indica l’URL dell’applicazione PHP da chiamare quando l’utente seleziona il tasto

submit, cioè il programma che dovrà elaborare tali dati.

In assenza dell’attributo method, get è il valore predefinito.

Dopo che l’utente ha selezionato il pulsante submit, in entrambi i casi (get o post) i dati del modulo (ossia

stringa di query.

i dati di tutti i widget) vengono codificati in una stringa di testo chiamata

Con get i server impongono una lunghezza massima della stringa di query di 100 byte, mentre con post la

lunghezza è a piacere.

Se il post ha numerosi widget è meglio usare post poiché i dati da inviare saranno molti.

<input>

Molti widget vengono specificati con l’attributo che può avere alcuni attributi:

type: indica il tipo del widget ed è specificato tra virgolette (“…”).

name: è l’identificatore del widget all’interno della stringa di query e quindi anche per il

server e lo script.

value: assume il valore che si vuole assegnare al widget (per esempio nel submit value vale

“prenota”, mentre nel reset value vale “azzera”). 6

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

I pulsanti submit e reset <input>.

Anche questi due pulsanti vengono creati con il tag

submit

Il tasto è obbligatorio e possiede due funzioni: codificare i dati del form in una stringa di query da

inviare al server e richiedere al server di eseguire un programma PHP (o altro) che elaborerà i dati e

restituirà una risposta all’utente.

Creazione:

<input type=”submit” value=”etichetta che comparirà sul pulsante”/>

reset

Il pulsante riporta tutti i valori dei widget alle impostazioni iniziali (di default).

Creazione:

<input type=”reset” value=” etichetta che comparirà sul pulsante”/>

Caselle di testo text <input>.

Anche le caselle di testo vengono create con il tag

Viene creata una casella di testo orizzontale in cui l’utente può digitare una riga di caratteri.

Creazione:

<input type=”text” name=”etichetta identificativa” size=30”/>

il valore di name è l’identificatore del dato inserito dall’utente, che serve al server e allo script per

elaborarlo. size

L’attributo specifica il numero di caratteri che la casella può contenere (visualizzare)(default è 20).

maxlength

L’attributo specifica il numero massimo di caratteri che può contenere una casella di testo;

quelli restanti verranno eventualmente ignorati.

Riquadro per parti di form

<fieldset>

Il tag è utile per organizzare il modulo in gruppi di campi correlati fra loro logicamente.

<legend>

È utile inserire all’inzio di ogni gruppo fieldset un tag che permette di dargli un titolo (una

legenda)(Es.: dati personali, dati universitari, parenti, …).

Seguono i widget che fanno parte del gruppo con possibilmente davanti un’etichetta che indica il

<label>.

contenuto che dovrà inserire l’utente; questo si può ottenere con il tag

Caselle per le password

È una casella di testo dove però va inserita una password.

Il browser non rende visibile il testo che l’utente sta inserendo, comprendolo con pallini neri o asterischi.

Creazione:

<input type=”password” name=”etichetta identificativa” size=”30”/>

Pulsanti di opzione <input>.

Anche questo widget viene creato con il tag

È un pulsante di opzione (radio) che consiste in una serie di tasti ciascuno dei quali può essere premuto

per renderlo attivo e ripremuto per disattivarlo.

Un solo tasto può essere attivo.

Tutti i pulsanti che appartengono allo stesso gruppo devono avere lo stesso valore di name.

checked=”checked”

Usando l’attributo si può specificare quale pulsante debba essere attivato alla

comparsa della pagina (molto fastidioso per l’utente).

Se tale attributo non è specificato solitamente il browser attiva la prima scelta.

Creazione:

<input type=”radio” name=”etichetta identificativa” value=”etichetta”/>etichetta che compare di

fianco al pulsante di opzione

è bene che il valore di value sia breve poiché è il valore che parte insieme a name verso il server.

Solitamente è l’iniziale o le prime due lettere dell’etichetta che compare di fianco al pulsante di opzione. 7

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

Pulsanti di opzione a scelta multipla <input>.

Anche questo widget viene creato con il tag

Sono pulsanti a scelta multipla (checkbox) che consistono in una serie di tasti che possono essere attivati

o disattivati.

Quando un pulsante viene attivato viene selezionata la stringa assegnata al suo attributo value.

Al contrario dei pulsanti di opzione questi pulsanti permettono di scelgliere più opzioni.

In questo caso la stringa inviata dal browser al server è la concatenzaione (&) delle stringhe name=value

dei pulsanti selezionati.

Anche in questo caso il valore di name è uguale per tutte le scelte.

Creazione:

<input type=”ceckbox” name=”etichetta identificativa” value=”etichetta”/> etichetta che compare

di fianco al pulsante di opzione

Menù ed elenchi a discesa

Se il numero di scelte è molto elevato il modulo diventerebbe troppo lungo e di conseguenza scomodo da

essere letto da parte dell’utente. <select>.

È più opportuno in questo caso utilizzare un menù usando il tag

name

Anche qui è presente un attributo che va specificato al fianco di select, e che indica l’identificatore

una volta che i dati saranno inviati al server.

size

L’attributo è il numero di voci del menù che vengono visualizzate all’utente.

multiple

L’attributo permette all’utente di selezionare più opzioni.

Creazione:

<select name=”etichetta identificativa” size=n” multiple=”multiple”>……..</select>

Se il valore di size è >1 e multiple viene specificato, il menù viene visualizzato come un menù a

scorrimento.

Se size non è specificato il valore di default è 1.

Se il valore di size è 1 e multiple non viene specificato, il menù viene visualizzato come un menù a

scomparsa con una una freccia di scorrimento rivolta verso il basso.

<option>voce del menù</option>.

Per elencare e specificare le voci del menù si usa il tag

Aree di testo

<textarea>

Con il tag posso creare aree di testo grandi come una pagina e che posso scorrere sia

orizzontalmente che verticalmente.

L’area di testo si amplia man mano che viene introdotto del testo e solitamente vengono usate per inserire

domande e commenti in un blog. rows cols

La dimensione della finestra viene fissata dagli attributi e (che sono da considerarsi

obbligatori);un’area di testo può contenere fino a 32700 caratteri.

Quando l’utente preme il pulsante submit il browser raccoglie le righe inserite, forma una stringa che

viene assegnata al valore di name e viene inviata verso il server nella stringa di query.

wrap=”virtual”

È possibile inseire anche l’attributo che manda a capo il testo automaticamente.

Creazione:

<textarea name=”etichetta identificativa” rows=”n” cols=”n”>righe esplicative che compaiono

nell’area di testo</textarea>

Riassunto

Quando il pulsante submit viene selezionato, i dati di query del form vengono codificati e inviati al server

che li elaborerà tramite un programma..

Il valore di un widget consiste sempre in una stringa di caratteri (anche se da inserire sono dei numeri).

Se il form contiene più di un widget, le assegnazioni che ne codificano i valori sono separati dal simbolo

&. 8

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

Se nel widget c’è un carattere speciale, esso viene codificato con il simbolo percentuale (%) seguito dal

codice ASCII per tale carattere.

Esempio di form inviata per e-mail:

<form action=mailto:bens89@hotmail.it method=”post”>

con il protocollo mailto si possono trasmettere i dati ad una casella di posta elettronica.

Mailto richiede sempre il method=”post”.

@Frame

Nella finestra di un browser possono venire visualizzati più documenti HTML alla volta.

frame.

La finsetra può essere suddivisa in più aree rettangolari chiamate

Ogni frame è in grado di visualizzare un proprio documento.

<frameset> <body>.

Il tag sostituisce il tag

<frameset> permette di indicare il numero di aree rettangolari e il relativo layout all’interno della finestra

del browser.

Il problema dei frame è che intralciano il lavoro dei motori di ricerca piochè la prima pagina è

relativamente scarna di documenti.

<frameset> rows cols

Gli attributi di sono e o entrambi.

Rows specifica l’altezza dei frame nella finestra, definendo per ogni frame la porzione che occupa

all’interno della pagina.

I livelli di occupazione possono essere indicati come numeri, percentuali o asterischi.

I numeri indicano la rappresentazione in pixel, le percentuali rappresentano la percentuale della finestra e

gli aasterischi indicano la parte rimanente della finestra.

Se vengono affiancati due asterisci significa che la parte rimanente della pagina viene suddivisa in due

parti uguali.

<frameset rows=”300, 200,400”>

Es.: <frameset rows=”22%, 33%,44%”>

<frameset rows=”22%, 33%,*>

Cols ha lo stesso significato di rows per le colonne della pagina.

<frame>

Il contenuto di ciascun frame è specificato da un tag in cui si indica il nome del file contenente

il documento da visualizzare.

src

L’attributo specifica dove si trova il contenuto del frame:

src=”nome del file.html”>

Es.:<frame

La sequenza dei tag frame è importantissima poiché essi vengono visualizzati per righe.

Se il tag frame è privo del suo attributo src verrà visualizzato un frame vuoto: i frame vuoti sono inutili

perché non possono essere riempiti in seguito.

Se il frame è piccolo per il contenuto che gli viene assegnato, vengono visualizzate le barre di

scorrimento. scrolling=”yes”.

Per applicare le barre di scorrimento a prescindere si imposta l’attributo

name

L’attributo consente di individuare il frame, ad esempio come destinazione di un collegamento.

Nel frame scriverò:

<frame src=”nome file.html” name=”etichetta”>

nel collegamento scriverò:

<a href=”nome file.html” target =”etichetta”>

in ogni collegamento l’attributo href specifica il nome del file contenente il documento, mentre

l’attributo target specifica il nome del frame in cui il documento deve essere visualizzato. 9

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

@Browser web

Un browser web (in italiano navigatore) è un programma che permette la navigazione nel web.

Consente agli utenti di interagire con testi,immagini, filamti ed altre informazioni tipicamente contenute

in una pagina web.

Il browser è in grado di interpretare il codice HTML (e più recentemente XHTML) e visualizzarlo in

forma di ipertesto. 10

Tecnologie del Web e di Internet - modulo 4 HTML - Benassi Simone

5.CSS (Cascading Style Sheet)

@Prefazione

fogli di stile in cascata CSS

I o sono stati sviluppati recentemente dal W3C e servono per migliorare la

fase di creazione di pagine web.

Il codice HTML non dà al browser le informazioni sulla disposizione grafica degli elelementi.

I fogli di stile rappresentano un metodo potente e flessibile: gli aspetti di visualizzazione di un documento

HTML dipendono molto spesso dal browser utilizzato.

CSS consente di uniformare la presentazione (layout) dei documenti, indipendetemente dal browser

utilizzato.

Molti tag HTML hanno proprietà di presentazione che, in assenza di valori espliciti, assumono valori

predefiniti (di default) diversi nei differenti browser.

Un foglio di stile può modificare un valore portandolo ad un valore predefinito per tutti i browser.

Le prime specifiche (CSS1) vennero sviluppate dal W3C nel 1996.

Verso la metà del 1998 comparve CSS2, del quale ci occuperemo noi.

Il terzo standard (CSS3) è ancora in fase di realizzazione.

Una regola di stile consiste di due parti principali:

Selettore

Dichiarazione

A sua volta la dichiarazione è suddivisa in due parti:

Proprietà

Valore

h1 {color:green}

Es.:

In questo caso il selettore è h1,la dichiarazione è quello che è racchiuso fra parentesi graffe (color:green),

la proprietà è color e il valore è green.

Caratteristica dei fogli di stile è che si possono combinare.

I fogli di stile (standard CSS2) possono essere collocati sia all’interno che all’esterno di un documento

HTML.

Lo standard è il seguente:

<head>

<style type=”text/css”

regole di stile che si vogliono applicare

</style>

</head>

Questa parte deve essere inserita nell’intestazione del documento.

È più conveniente usare fogli di stile esterni che danno maggiore flessibilità, possono essere modificati

senza cambiare il documento HTML e possono essere in comune a più documenti.

in cascata

I fogli di stile si dicono poiché possono essere definiti a tre livelli differenti.

I fogli di stile a livello più basso, che quindi vengono vengono trovati dal browser per ultimi, hanno la

precedenza su quelli a livello superiore in caso di conflitto.

I tre livelli dei fogli di stile sono, dal più basso al più alto:

Inline: CSS applicato al contenuto di un singolo tag

A livello di documento: CSS applicato all’interno del documento

Esterno: CSS applicato ai corpi di uno o più documenti

1

Tecnologie del Web e di Internet - modulo 5 CSS - Benassi Simone

Inline

Le specifiche di stile si applicano al contenuto del singolo tag e vanificano il grande vantaggio dei CSS:

imporre uno stile uniforme ai tag di un’intero documento.

Dovrebbero essere usati il meno possibile.

<h2 style=”font-size:24 pt; font-family:Arial; color:red;”>titolo</h2>

Es.:

A livello di documento

Le specifiche sono contenute nel tag <style> nell’intestazione del documento:

<head>

<style type=”text/css”

regole di stile che si vogliono applicare

</style>

</head>

Esterno

Per creare un foglio di stile esterno si seguono alcuni passi:

creare u documento di tipo testo

definire le regole di stile desiderate

salvare il documento in formato solo testo con estensione .css

collegare importare

o il foglio di stile esterno nel documento

I fogli di stile esterni possono essere:

collegati con un link nell’intestazione del documento.

<head>

<link rel=”stylesheet”

type=”text/css”

href=”nome file.css”

/>

</head>

importati nel tag style del documento che lo usa.

<head>

<style type=”text/css”

@import nome file.css

eventuali altre regole di stile che si vogliono applicare

</style>

</head>

La regola di import deve essere scritta prima delle regole di stile che eventualmente si vuole

insirerire.

@Regole delle dichiarazioni

Per ciascun tag tutte le dichiarazioni sono raggruppate all’interno di un blocco, racchiuse tra parentesi

graffe e separate da punto e virgola.

selettore {proprietà1:valore1; proprietà2:valore2; proprietà3:valore3;}

Es.:

L’ultima dichiarazione può essere seguita o meno dal punto e virgola.

Una regola di stile può essere definta anche per più tag contemporaneamente.

selettore1,selettore2 {proprietà1:valore1; proprietà2:valore2; proprietà3:valore3;}

Es.:

Se nella richiesta di stile il browser non può soddisfare la richiesta di un font specifico, decoderà

autonomamente quale usare.

Possiamo altrimenti fornire un’alternativa.

body {font-family:”Gill Sans”, sans-serif}

Es.: 2

Tecnologie del Web e di Internet - modulo 5 CSS - Benassi Simone

In questo caso il browser usaerà Gill Sans se lo possiede, altrimenti in alternativa userà Sans Serif che è

una delle cinque famiglie di font, conosciute da tutti i browser.

Dopo la virgola è obbligatorio mettere uno spazio bianco.

unità assolute

Esistono che non scalano in relazione all’ambiente in cui si trovano, come per esempio

point (pt). unità relative

Esistono anche che scalano in relazione all’ambiente in cui si trovano. Come per esempio

em en

(per la lettera M) ed (per la lettera N).

Il risultato è che i margini attorno all’elemento body sono larghi tre volte la dimesnione del carattere M o

N.

@Classi di stile

Le classi permettono di definire stili per più elementi delle pagina web.

Sono di due tipi:

classi specifiche: si riferiscono ad un solo tag.

classi generali: si possono applicare a più tag.

Classi specifiche

A ciascuna calsse viene associato un nome preceduto dal nome del tag a cui si applica ed un punto.

<style type=”text/css”

Es.: p.normal {prorietà:valore}

p.special {proprietà:valore}

</style> class

per richiamare la classe specifica si usa l’attributo nel tag che fa riferimento a quella classe.

<p class=”normal”>……</p>

Es.: <p class=”special”>……</p>

<p>……</p>

In questi esempi viene richiamata la classe normal, special e nel terzo caso non viene richiamata nessuna

classe specifica e quindi il paragrafo prende i valori predefiniti dal browser.

Classi generiche

Per applicare regole di stile a più tag si può fare riferimento a questo tipo di classi.

. italico{font-style.italic}

Es.: class

Per richiamare la classe generale si usa sempre l’attributo nel tag a cui si applica (in questo caso la

classe generale può essere richiamata in più tag diversi).

<h1 class=”italico”>……</h1>

Es.: <p class=”italico>……</p>

@Proprietà e valori carattere, colore e sfondo, testo, caselle e

Esistono 53 tipi diversi di proprietà divise in 6 categorie:

layout, elenchi, tag.

Tutte le proprietà e i relativi valori sono consultabili al sito W3C.

colori

I valori dei possono essere espressi in nomi di colori (proprio a parole), numeri esadecimali

preceduti da # o in RGB (Red-Green-Blu) che specifica il livello dei tre colori di base.

colore bianco: white #FFFFFF Rgb(255,255,255)

Es.: font-family

La proprietà viene utilizzata per specificare uno o più nomi di caratteri.

font-size

La proprietà imposta le dimensioni del carattere (espressa in pt).

font-style

La proprietà si usa per specificare il corsivo.

font-weight

La proprietà si usa per specificare il grassetto. 3

Tecnologie del Web e di Internet - modulo 5 CSS - Benassi Simone

Per gli elenchi si possono specificare la forma dei punti elenco in un elenco non ordinato o i valori di

sequenza che precedono le voci in un elenco ordinato. list-style-type

Per gli elenchi non ordinati il valore di default per la proprietà è disc, ma si può anche

impostare circle,square o none.

ul {list-style-type=”square”}

Es.: list-style-type

Per gli elenchi ordinati i valori che può assumere la proprietà sono decimal(1,2,3), upper-

alpha(A,B,C), lower-alpha(a,b,c), upper-roman(I,II,II) e lower roman(i,ii,ii).

text-align

La proprietà consente di allineare il testo orizzontalmente.

I valori che può assumere sono left,right,center e justify.

Il valore di default è left.

float

La proprietà specifica che il testo venga disposto intorno ad elementi mobili come tabelle o

immagini.

I valori possibili sono left,right e none (default).

Per collocare un’immagine alla destra, e quindi il testo alla sua sinistra, basta impostare float a right per

l’immagine.

Per impostare i margini intorno ad un elemento HTML come può essere una tabella o un’immagine si

margin-left,margin-right,margin-top margin-bottom.

usano le proprietà: e

<img>.

Possono essere impostate direttamente all’interno del tag

color

La proprietà specifica il colore degli elementi in primo piano.

background-color

La proprietà specifica invece il colore di sfondo di un elemento. 4

Tecnologie del Web e di Internet - modulo 5 CSS - Benassi Simone

6.Div & Box

Div <span>

Il tag viene utilizzato all’interno di un elemento (cioè inline).

<p><span class=”nome classe”>……</span></p>

Es.:

Dove la classe di stile viene specificata nell’intestazione o in un documento esterno.

<div>

Il tag serve per raggruppare uno o più elementi in un blocco assegnando ad esso un identificatore

per renderlo distinguibile.

<div id=”nome identificatore”>

Es.: ……

……

</div> #nomeidentificatore {dichiarazioni}

In CSS comparirà:

<div>

Il tag può anche essere usato insieme al nome di una classe.

<div class=”nome classe”>

Es.: ……

……

</div> .nome classe {dichiarazioni}

In CSS comparirà:

Box Box.

Ciascun tag HTML è racchiuso in un riquadro virtuale detto

Per tale area è possibile definire delle proprietà che riguardano:

margini (margin);

bordi (border);

riempimento (padding) tra contenuto del tag e bordo;

contenuto.

Lo spazio occupato da un box può essere fissato sia orizzontalmente (width) che verticalmente (height)

con percentuali o valori.

margin)

Il margine (proprietà può assumere anche un valore diverso per ciascuno dei quattro lati:

margin-top, marin-right, margin-bottom, margin-left.

border)

Il bordo (proprietà può essere:boder-width, border-color, border-style.

padding)

Il riempimento (proprietà può assumere valori diversi per i quattro lati: padding-top, padding-

right, padding-bottom, padding-left.

@Posizionamento dei box CSS

Il posizionamento (position) del box può essere left, right, top e bottom e calcolato in modo assoluto

(absolute) o relativo (relative).

La posizione di un elemento posizionato in maniera relativa viene calcolato a partire dalla sua posizione

originale nel documento.

Tecnologie del Web e di Internet - modulo 6 Div & Box - Benassi Simone 1

7.PHP (PHP Hypertext Preprocessor)

@Prefazione

PHP è una definizione ricorsiva.

Un blocco di scripting PHP può stare ovunque in un documento HTML.

<?php………?>

La sua sintassi di base è:

PHP è un linguaggio lato server, creato per la generazione dinamica di pagine web: può accedere a

moduli o comunicare con database.

PHP

L’interprete sul lato server non fa altro che creare una pagina web che viene poi inviata dal server

al client.

Tutta l’elaborazione viene eseguita dal programma presente sul lato server; il client vede solo il risultato

di tale elaborazione.

linguaggio facile, ma potente.

PHP è un

È gratuito quindi non ha costi di licenza (si può scaricare da http://www.php.net/).

open source

Il codice sorgente è quindi è visualizzabile senza problemi.

Il linguaggio è inoltre indipendente dalla piattaforma (Windows, MacOS, Linux, Unix); si può usare con

server Apache.

il web

PHP è un linguaggio di supporto per i database perché permette di costruire dinamicamente pagine web in

base ai dati ottenuti da una sorgente esterna come proprio può essere un database.

@Sintassi di base

Un file PHP può contenere codice HTML e blocchi di scripting.

Ciò che viene inviato al browser, dopo l’azione dell’interprete PHP è solo codice HTML.

;

Ogni linea di codice PHP deve terminare con (punto e virgola) che funge da separatore fra le istruzioni.

// /*……*/.

I commenti si possono inserire su una linea con o su più linee

echo print.

Esistono due istruzioni di stampa: e

Sintassi di echo

Echo permette di scrivere una stringa in un documento HTML generato da PHP.

Non è una funzione (metodo) ma un costrutto del linguaggio, quindi le parentesi possono essere omesse.

echo “parola”;

Es.: Echo (“parola”); non si possono usare le parentesi,

Per effettuare più stampe ma si separano gli item con una virgola.

echo “parola1” , “parola2” , “parola3”;

Es.:

in questo caso viene generato parola1parola2parola3 (tutto attaccato).

Sintassi di print()

Print() è una vera e propria funzione (metodo) che invia il proprio argomento (quello che gli passiamo tra

parentesi) al browser e restituisce true o false in base al successo dell’operazione.

Può stampare un solo valore e anche in questo caso le parentesi non sono obbligatorie.

printf() permette di scrivere una stringa formattata.

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone 1

Variabili

È possibile usare variabili per memorizzare valori (numeri o stringhe).

$nome_var=valore;

Es.:

Le variabili sono denotate dal simbolo $ (dollaro) posto come primo carattere (obbligatorio), seguito da

una lettera o un underscore (_), seguito da un numero qualsiasi di caratteri o underscore.

Si deduce che il nome di una variabile non può contenere spazi bianchi ne parole accentate.

I loro identificatori sono sensibili alle maiuscole.

scrivere $variabile è diverso dallo scrivere $Variabile

Es.:

Non è necessario dichiarare il contenuto di una variabile (come si faceva in Java).

Appena gli viene assegnato un valore la variabile assumerà come tipo contenuto proprio il tipo del valore

che abbiamo inserito.

$numero=10 questa variabile di nome numero avrà come contenuto un intero

Es.:

Le variabili sono NULL se quando usate non gli viene assegnato niente.

loosely typed

PHP è quindi un linguaggio (bassa tipizzazione).

PHP converte automaticamente i valori delle variabili al tipo corretto dei dati.

$i=5 (intero) $parola=”ciao” (stringa)

Es.:

Successivamente possono assumere un qualsiasi valore, anche di tipo diverso.

l’operazione di cast.

Si può imporre o modificare un tipo di una variabile con

integer, float, string, boolean, array object

I tipi primitivi in PHP sono 8: gli scalari i tipi composti e ed

NULL resource.

i tipi speciali e

Stringhe

Le stringhe sono normalmente racchiuse fra apici (‘…’).

<?php

Es.: $username=’Maria’;

$text=’Hello World $username’;

echo $txt;

?>

Questa parte di codice stampa Hello World $username.

Le stringhe altrimenti possono essere racchiuse fra doppi apici, ma il comportamento è diverso quando

contengono nomi di variabili.

<?php

Es.: $username=’Maria’;

$text=”Hello World $username”;

echo $txt;

?>

Questa parte di codice invece stampa Hello World Maria.

di interpolazione.

In questo caso viene fatto uso dell’operazione

di concatenazione

È possibile anche usare l’operatore (.).

<?php

Es.: $txt=”Hello Maria”;

echo $txt;

?>

<?php

$txt1=”Hello”;

$txt2=”Maria”;

echo $txt1.” “.$txt2; //fra virgolette c’è uno spazio.

?> 2

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

Nel caso di questi due codici la stampa è la stessa: Hello Maria.

here document.

Definizioni si stringhe molto lunghe in PHP si fanno con

Per stringa molto lunga si può intendere anche un intero dicumento HTML.

<<<BLOCCOHTML……

La sintassi è ………

………

BLOCCOHTML;

La parola di inizio deve essere tutta maiuscola e preceduta da tre parentesi angolari, mentre la parola di

chiusura deve essere da sola e può essere seguita da punto e virgola.

Anche in here document si possono interpolare le variabili e si può stampare il suo contenuto premettendo

a <<<BLOCCOHTML, print.

I caratteri delle stringhe vengono numerati a partire da un indice 0.

D o c u m e n t o

Es.: 0 1 2 3 4 5 6 7 8

strlen()

la funzione mi dice quanto è lunga una stringa.

Operatori

Gli operatori non differiscono da quelli utilizzati nei linguaggi di programmazione (come Java).

Aritmetici: + - * / % ++ --

Assegnamento: = += -= *= /= .= %=

Confronto: == != < > <= >= === (viene confrontato sia il tipo che il contenuto di

una variabile)

Logici: && || !

La divisione ha sempre come risultato un float.

Espressioni

Le espressioni possono essere semplici assegnamenti come.

$numero=5;

Es.:

Oppure possono coinvolgere più variabili ed essere più complesse.

$numero1=($numero2=5);

Es.:

In questo caso gli assegnamenti sono valutati da destra a sinistra.

condizionale ternario.

È possibile usufruire anche dell’operatore

<?php

Es.: $primo ? $secondo : $terzo;

?>

Se il valore della prima espressione è true (cioè diverso da 0) viene valutata la seconda espressione

altrimenti (valore della prima espressione false, cioè uguale a 0) viene valutata la terza espressione.

Istruzioni condizionali if…else.

È facile usare l’istruzione

if (condizione)

Es.: codice da eseguire se la condizione è true;

else

codice da eseguire se la condizione è false; 3

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

Selezione multipla switch.

È possibile usare l’istruzione

switch (espressione)

Es.: case etichetta1:

codice da eseguire se espressione=etichetta1; break;

case etichetta2:

codice da eseguire se espressione=etichetta2;break;

case etichetta n:

codice da seguire se espressione=etchetta n; break;

default:

codice da eseguire se espressione è diversa in tutti i casi precedenti;

Array

Ne esistono di vari tipi:

Array con chiave numerica: può essere realizzato in due modi.

1)aggiungendo gli elementi uno alla volta con assegnamenti

successivi, facendo uso delle parentesi quadre che

specificano che si tratta di un array.

$nome[0]=”Paola”;

Es.: $nome[1]=”Michele”;

$nome[2]=”Simone”;

Nella notazione con parentesi quadre, se si inserisce un nuovo

Valore senza specificare la posizione

$nome[]=”Luca”;

a questo viene assegnata automaticamente la posizione

successiva all’ultima presente, ossia la prima libera.

2)si può ottenere lo stesso risultato usando il costrutto array.

PHP assegna una chiave associativa numerica progressiva a

ciascun valore.

$name=array(‘Paola’,’Michele’,’Simone’);

Es.:

Array con chiave associativa: chiave=>valore

$anni=array (‘Paolo’=>32,’Michele’=>25,’Simone’=>21);

oppure con parentesi quadre senza utilizzare il costrutto array.

$anni[‘Paola’]=”32”;

Es.: $anni[‘Michele’]=”25”;

$anni[‘Simone’]=”21”;

count() restituisce il numero di elementi di un array.

$numero_elementi_array=count($nome)

Es.:

Come argomento della funzione count() viene passato l’array che si vuole esaminare.

In questo caso, facendo riferimento all’array “nome” del primo esempio, nella variabile chiamata

numero_elementi_array verrà salvato il valore 3 (poiché contiene 3 elementi:Paola, Michele, Simone).

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone 4

Cicli

Esistono diversi tipi di ciclo:

while: test della condizione all’inizio del codice.

<?php

Es.: $i=5;

while ($i<=5){

echo “Il numero è” .$i . ”.”;

$i++;

}

?>

do…while: test della condizione alla fine del codice.

<?php

Es.: $i=0;

do{ $i++;

echo “Il numero è” .$i . ”.”;

}

while ($i<5);

?>

for: esegue il ciclo un numero predefinito di volte.

<?php

Es.: for ($i=1;$i<=5;$i++;){

echo “Hello World numero” .$i. “.”;

}

?>

foreach: esegue il ciclo per tutti gli elementi di un array.

chiave numerica.

Es.: nel caso in cui l’array sia a

<?php

$arr=array(“uno”,”due”,”tre”);

foreach ($arr as $value){

echo “Valore:” .$value. “.”;

}

?>

In questo caso viene stampato: Valore: uno.

Valore: due.

Valore: tre.

as

La parola specifica che il contenuto dell’array ad ogni interazione venga salvato

nella variabile $value. chiave associativa.

Es.: nel caso in cui l’array sia a

<?php

$anni=array(“Paola”=>32,”Michele”=>25,”Simone”=>21);

foreach ($anni as $chiave=>$value){

echo “Chiave:” .$chiave. “===>Valore:” .$value. “.”;}

?>

Funzioni dichiarazione

La sintassi di base per la è:

function nome_funzione(parametri){

blocco di codice da eseguire;}

La sintassi di base per l’invocazione è:

nome_funzione(valori attuali passati come parametri);

Le funzioni in PHP assomigliano molto ai metodi usati nel linguaggio di programmazione Java. 5

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

variabili locali,

Le variabili definite all’interno delle funzioni sono dette mentre quelle definite

variabili globali.

all’esterno sono dette

Le variabili locali hanno validità solo all’interno della funzione, mentre le variabili globali hanno validità

all’esterno della funzione, in tutte le altre porzioni di codice.

automaticamente array globale

Le variabili globali vengono slavate all’interno di un ($GLOBAL).

Esempi di funzioi

<html>…<body>

<?php

function scrivi_mio_nome(){

echo “Simone”;}

echo “Il mio nome è”; scrivi_mio_nome();

?>

</body></html>

La funzione scrivi_mio_nome è definito senza il passaggio di nessun parametro: essa stampa il nome

Simone quando viene richiamata.

<html>…<body>

<?php

function scrivi_mio_nome($nome,$cognome){

echo $nome .”e il mio cognome è”. $cognome;}

echo “il mio nome è”; scrivi_mio_nome(“Simone”,”Benassi”);

?>

</body></html>

In questo caso vengono passati due parametri alla funzione scrivi_mio_nome, in particolare il nome e

cognome dell’utente.

La funzione stampa: il mio nome è Simone e il mio cognome è Benassi.

<html>…<body>

<?php

function somma($x,$y){

$total=$x+$y;

return $total;

echo “$x”.”+”.”$y”.”=”.”$total”;}

?>

</body></html>

La funzione somma, attraverso il passaggio di due parametri x e y, restituiesce il risultato dell’operazione.

return.

È presente l’istruizione 6

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

<html>…<body>

<?php

$cenafredda=”piatto freddo e insalata”;

function cena(){

$menuregolare=”zuppa e cotoletta”;

print “La cena è $menuregolare”;

print “in alternativa”;

print $GLOBALS[“cenafredda”]; //viene stampato il contenuto di $cenafredda

$GLOBALS[“cenafredda”]=”prosciutto e melone”;} //riassegnato il contenuto a $cenafredda

cena(); //viene richiamata la funzione cena

print $GLOBALS[“cenafredda]; //viene stampato il contenuto originale di $cenafredda

?>

</body></html>

Le variabili esterne sono globali e rintracciabili per nome se nella funzione si usa l’array $GLOBALS.

<html>…<body>

<?php

$cenafredda=”piatto freddo e insalata”;

function cena(){

global $cenafredda; //viene richiamata la variabile globale $cenafredda

$menuregolare=”zuppa e cotoletta”;

print “La cena è $menuregolare”;

print “In alternativa fino ad ora $cenafredda”; //stampato il valore originale di $cenafredda

$cenafredda=”formaggi misti”; //riassegnato il contenuto di $cenafredda

print “Ora invece $cenafredda”; }//stampato il contenuto modificato di $cenafredda

cena()

print “La cena fredda ora è $cenafredda”; //stampato il contenuto modificato di $cenafredda

?>

</body></html> parola chiave

La variabile globale è trasportata in ambito locale all’interno di una funzione utilizzando la

global.

Se non si passa nessun parametro al momento della chiamata della funzione, ed è richiesto, viene

segnalato un errore.

Si può però impostare un parametro di default all’atto della dichiarazione:

function nome_funzione(parametro=’valdefault’)

{……;}

Se non vengono passati parametri la funzione prende il valore di default.

Se vengono passati parametri, questi ultimi sovrascrivono i valori di default. 7

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

Array predefiniti

PHP 4.1.0 fornisce un insieme di array predefiniti contenenti variabili del server web.

autoglobali supergloabli.

Essi sono sempre disponibili e sono noti come array o

$_GLOBALS: contiene un riferimento a tutte le variabili globali.

$_SERVER: contiene le variabili settate nel server web.

$_GET: contiene le variabili fornite dal metodo GET HTTP.

$_POST: contiene le variabili fornite dal metodo POST HTTP

$_COOKIE: contiene le variabili fornite dai COOKIE HTTP.

$_FILES: contiene le variabili fornite all’upload di file.

$_ENV:

$_REQUEST: contiene le variabili fornite dal metodo di input GET, POST, e COOKIE.

$_SESSION: contiene le variabili di sessione correttamente registrate.

Variabili esterne a PHP

Le variabili esterne a PHP vengono usate per leggere il contenuto di un form con il metodo GET o POST.

<form action=”ricevi.php” method=”post”>

Es.: Nome: <input type=”text” name=”username”/><br/>

E-Mail: <input type=”text” name=”email”/><br/>

<input type=”submit” name=”submit” value=”invia”/>

</form>

il file ricevi.php, che è un programma PHP abilitato all’elaborazione dei dati, può ricevere gli stessi dati

in vari modi.

<?php

Es.: print $_POST[’username’];

?>

<?php

print $_GET[’username’];

?>

<?php

print $_REQUEST[’username’];

?>

Variabili hidden

In un form è possibile nascondere i dati, rendendoli invisibili sia al browser che all’utente, usando

soltanto i seguenti tre attributi:

<input type=”hidden” name=”mailto” value=”bens89@hotmail.com”>

Variabili con image submit

In un form è possibile usare un’immagine al posto del pulsante submit con la seguente sintassi:

<input type=”image” src=”nome immagine.jpg” name=”sub”/>

Quando l’utente clicca con il mouse in un punto dell’immagine il form viene trasmesso con il nome sub e

sub_x sub_y

due variabili addizionali: e che contengono le coordinate del punto dell’immagine.

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone 8

Cookie HTTP

In inglese significa “dolcetti”.

Il cookie viene mandato indietro insieme alla risposta dal server verso il client.

I cookie sono variabili che il server fa registrare al browser e che riceve agli accessi successivi dello

stesso client per ovviare alla mancanza di stato del protocollo HTTP.

Raccoglie informazioni sull’utente la prima volta che visita una pagina sul server (massimo 4milla byte).

Il cookie viene registrato sul computer dell’utente.

I cookie possono venire cancellati quando la sessione di collegamento viene chiusa, oppure possono

durare per mesi o anni.

Il browser ad ogni nuova richiesta manda il cookie in modo da farsi riconoscere dal server che gli ha già

fornito delle risposte precedentemente.

I cookie sono disponibili nell’array superglobale $_COOKIE.

setcookie():

I cookie vengono creati mediante l’utilizzo della funzione

setcookie(nome, valore, ata di scadenza, percorso valido, dominio valido);

setcookie(“volo”,”Londra”,time()+600,), percorso valido, nome server);

Es.: time()

La funzione calcola il numero di secondi trascorsi dal 1 gennaio 1970.

Sessioni HTTP

Quando i cookie sono disabilitati o le applicazioni sono complesse è bene utilizzare le sessioni, che

saranno mantenute nell’array associativo $_SESSION. session_start()

Le sessioni vengono create mediante l’utilizzo della funzione recuperando i dati di stato

dall’array superglobale $_SESSION.

La sessione permette di identificare univocamente il client.

Il default per il tempo di validità tra un accesso ed il suo successivo è 24 minuti: dopo tale tempo i dati di

stato di quella sessione vengono cancellati.

Variabili static

Una variabile statica mantiene il suo valore al termine dell’esecuzione della funzione che la contiene.

contatori.

Questo tipo di variabile può essere utilizzata per realizzare

<?php

Es.: function conta(){

static $contatore=0;

echo $contatore;

$contatore++;

}

?>

Al termine della funzione la variabile $contatore contiene il numero di volte che è stata eseguita la

funzione.

La variabile $contatore viene inizializzata solo la prima volta mentre dopo contiene il valore

incrementato.

Ad una variabile statica non può essere assegnata un’espresione.

Costanti globali

Una costante è un identificatore unico per un valore e non può essere cambiata durante l’esecuzione di

uno script.

È convenzione comune (come in Java) che i nomi delle costanti siano sempre maiuscoli.

Le costanti sono sempre globali, quindi si può accedere ad esse da qualunque punto dell script utilizzando

l’array predefinito $GLOBALS.

Le costanti non iniziano con il simbolo del dollaro ($). define()

Le costanti possono essere definite soltanto con la funzione e non con semplice dichiarazione.

solo

Le costanti possono essere valori scalari. 9

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

<?php

Es.: define(“COSTANTE”,”ciao mondo”);

echo COSTANTE;

?>

Queste quattro righe di codice definiscono una costante di nome COSTANTE e stampa il contenuto di

essa, cioè ciao mondo.

Include/Require

Servono per modularizzare la costruzione di pagine.

Vengono forniti due costrutti principali:

include(nome file);

require(nome file);

il file da includere può essere sia in estensione .php. sia in estensione .html o .js.

Classi e oggetti

Similmente a Java si possono creare classi e oggetti.

<?php

Es.: Class Oggetto{ //creazione di una classe di nome Oggetto

Function esempioOgetto(){ //definizione di un metodo di nome esempioOggetto

Echo “eseguito”;} //corpo del metodo esempioOggetto

$1=new Oggetto; //creazione di un oggetto chiamato $1 facente parte della classe Oggetto

$1->esempioOggetto();} //chiamata del metodo sempioOggetto (con ->)

?>

Gestione dei form HTML

<html>…<body>

<form action=”welcome.php” method=”get”>

Nome: <input type=”text” name=”nome”/>

Anni: <input type=”text” name=”anni”/>

<input type=”submit” value=”invia”/>

</form>

</body></html>

Cliccando sul pulsante submit i dati vengono inviati al server, in particolare al file welcom.php, che li può

elaborare.

Supponiamo che io utente abbia inserito i dati “Simone” e “21”.

Quindi verso il server partirebbero le coppie chiave valore seguenti: nome:Simone

anni:21

il browser invia al server la richiesta:

http://localhost/welcome.php?nome:Simone&anni:21

Il file welcome.php ha il seguente codice:

<html>…<body>

Benvenuto <?php echo GET[nome];?>. <br/>

La tua età è di <?php echo Get[anni];?>anni. <br/>

</body></html>

Il file viene trasformato in:

<html>…<body>

Benvenuto Simone.

La tuà età è di 21 anni.

</body></html>

prima di essere consegnato al browser. 10

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone

L’output sul lato client dopo avre spinto il pulsante submit invia è il risultato dello script welcome.php, ed

è il seguente:

Benvenuto Simone.

La tua età è di 21 anni.

In alternativa al metodo get può essere usato il metodo post.

Al posto dell’array superglobale $GET si userà l’array superglobale $POST per accedere al contenuto

delle variabili del form (ossia al contenuto dei widget: le informazioni che inserisce l’utente).

Tecnologie del Web e di Internet - modulo 7 PHP - Benassi Simone 11

8.JavaScript

@Storia

JavaScript viene sviluppato da Netscape con il nome originario di LiveScript.

Verso la fine del 1995 LiveScript divenne un progetto in comune tra Netscape e Sun Microsystems e fu

rinominato JavaScript. script.

JavaScript è un vero e proprio insieme di programmi, ma per esso si preferisce il termine

Il codice JS può essere frammentato e inserito all’interno del documento HTML in varie parti.

Esso è molto differente dal linguaggio Java.

JS ha gli oggetti ma non ha le classi, quindi non supporta il modello di sviluppo orientato agli oggetti:

polimorfismo.

anche per questo motivo non supporta l’ereditarietà e a seguire il

tipizzazione debole,

Questo linguaggio è caratterizzato da una al contrario di Java.

tipizzazione dinamica:

Le variabili non hanno bisogno di essere dichiarate e sono caratterizzate da una

nel momento della creazione di una variabile è possibile assegnargli un valore qualsiasi (stringa o

numero).

Se il contenuto della variabile cambia, cambia anche il tipo di dato contenuto in essa, senza alcun tipo di

restrizione.

Anche gli oggetti sono a tipizzazione dinamica poiché si può cambiare il numero delle proprietà e dei

metodi ad essi inerenti durante l’esecuzione dello script.

struttura

La di JS è suddivisibile in tre parti:

nucleo del linguaggio: composto da operatori, espressioni, istruzioni e sottoprogrammi;

lato client: è un insieme di oggetti che controllano il browser e le interazioni con gli utenti;

lato server: è un insieme di oggetti che rendono il linguaggio utile su un server Web.

Lo scopo originario di JS era quello di fornire funzioni di programmazione al server e al client.

Dopodichè si è evoluto come linguaggio di programmazione completo: noi ci concentreremo sull’uso lato

client.

@Usi di JavaScript

JS può fungere da alternativa per la maggior parte dei programmi contenuti nella specifica CGI:

quest’ultima richiede una capcaità di calcolo notevole al server.

Utilizzando JS parte del carico di lavoro del server viene trasferita sul client.

JS viene anche utilizzato come alternativa alle applet Java: esso è più semplice da imparare e utilizzare.

Gli script JS sono parte integrante del documento HTML mentre le applet Java sono separate dal

documento HTML che le ha chiamate.

Però le applet Java hanno una capacità notevolemente superiore di produrre immagini nei documenti.

Gli eventi, come i click, possono avviare calcoli o fornire feedback agli utenti.

Per esempio si può controllare l’idoneità dei valori di un form sul lato client, prima di inviare i dati al

server. DOM

Attraverso JS è possibile sviluppare il (Document Object Model).

documenti fortemente dinamici.

Tale modello permette di rendere i eventi.

Molte delle operazioni svolte da JS sono basate sugli

Alcune operazioni vengono eseguite da JS in risposta ad azioni dell’utente del documento (per esempio

click del mouse oppure invio di form).

Tecnologie del Web e di Internet - modulo 8 JavaScript - Benassi Simone 1

Quando il browser Web trova nel documento HTML uno scrpit JS, entra in funzione l’interprete

JavaScript.

Gli script JS possono comparire sia nell’ intestazione che nel corpo di un docuemento HTML.

Gli script che vanno interpreati una sola volta vanno inseriti nel corpo del documento, mentre gli script

che reagiscono all’interazione dell’utente vanno inseriti nell’intestazione.

Gli script inseriti nel corpo hanno la precedenza sugli script inseriti nell’intestazione.

primitivi riferimenti ad altri oggetti.

I dati si suddividono in e tipi semplici di dati primitive del

Gli oggetti hanno insiemi di proprietà, mentre i prendono il nome di

linguaggio.

@Sintassi generale

Per fare riferimento alle proprietà di un oggetto si usa il nome dell’oggetto seguito dalla proprietà, usando

notazione puntata.

la myCar.engine

Es.:

In questo caso si fa riferimento alla proprietà engine dell’oggetto myCar.

Tutte le proprietà hanno un nome e i loro valori consistono in dati o funzioni: l’insieme delle proprietà di

un oggetto è dinamico, ossia se ne possono aggiungere o cancellare in qualsiasi momento.

Tutte le funzioni sono oggetti e per farvi riferimento vengono utilizzate variabili.

Tipicamente uno script JS può comparire in due modi all’interno di un documento HTML:

<script> </script>.

con il codice JS direttamente incluso nel documento racchiuso frai i tag e

<script>

Es.: Document.write(“sequenza di caratteri”);

</script>

il codice di scripting può comparire nell’intestazione o nel corpo del documento HTML.

<script>

con il tag che fa riferimento, mediante URL, ad un file esterno che contiene il codice si

scripting.

<script src=”nome del file.js”

Es.: language=”JavaScript”

type=”text/javascript”>

</script>

src

L’attributo specifica il nome del file che contiene il codice si scripting.

type

L’attributo deve sempre essere specificato con il valore text/javascript (tipo MIME).

L’attributo language può specificare la versione del linguaggio di scripting.

Gli identificatori

Gli identificatori devono sempre incominciare con una lettera, il carattere di sottolineatura (_) o il

simbolo $ (sconsigliato per non creare ambiguità con le variabili di PHP).

I caratteri rimanenti possono essre di qualsiasi tipo e non ci sono limiti di lunghezza.

Le maiuscole sono trattate diversamente dalle equivalenti minuscole (a diverso da A).

Gli oggetti iniziano preferibilemnte con una maiuscola, mentre le funzioni iniziano preferibilmente con

una minuscola.

I nomi delle variabili sono per convenzione tenuti minuscoli.

un insieme di parole predefinite

JS dispone di come alert, open, java e self.

È bene delimitare la fine di di una istruzione JS con il punto e virgola (;).

I commenti possono essere fatti su una riga con la notazione //, oppure su più righe con la notazione /* e

*/. Tecnologie del Web e di Internet - modulo 8 JavaScript - Benassi Simone 2

Poiché non tutti i browser possiedono interpresti JavaScript, gli script talvolta vengono nascosti nei

commenti HTML, ma restano visibili ai browser che supportano JS.

<!--

Es.: Script JavaScript

//-->

Per rendere un sito Web disponibile a tutti gli utenti sarebbe necessario includere gli script nei commenti,

ma per semplicità questo argomento non verrà trattato.

I tipi di primitiva

cincque tipi di primitive:

JS dispone di number, string, boolean, undefined e null.

tre oggetti predefiniti:

Inoltre JS disponde di Number, String, Boolean.

oggetti wrapper.

Questi tre oggetti vengono detti

La funzione di questi oggetti è quella di fornire proprietà e metodi utili per operare sui valori delle

primitive.

memoria heap memoria steack

La è la memoria per l’allocazione dinamica, mentre la è la memoria

statica.

Quando necessario i valori vengono convertiti automaticamente nei tipi Number o String.

Le primitive si trovano nella memoria steack, mentre gli oggetti non sono altro che riferimenti il cui

valore si trova nella memoria heap.

Man mano che l’oggetto si ingrandisce dinamicamente (aggiunta o cancellazione di attributi di un

oggetto) viene modificata la memoria heap riferita a tale oggetto.

Letterali numerici (number)

Tutti i numeri sono valori di tipo Number: sono rappresentati in formato a 64 bit epossono essere interi o

a virgola mobile a doppia precisione. E e

Gli esponenti sono rappresentati con o con seguita da un intero con o senza segno.

Letterali stringa (string)

Una stringa è una sequenza di caratteri e/o interi delimitati da virgolette singole (‘) o doppie (“): non vi è

alcuna differenza.

Per icludere la virgoletta singola in una stringa delimitata da virgolette singole, qeusta deve essere

preceduta dal backslash (barra rovesciata \): lo stesso discorso vale per le virgolette doppie.

à

‘questo è l\’esempio’

Es.: “questo è l\’esempio”

La concatenazione di stringhe avviene con l’operatore +, come in Java.

Se uno dei due operandi è una stringa e l’altro è di un altro tipo, quest’ultimo viene convertito

dall’interprete JS automaticamente in una stringa.

Se un operando di tipo stringa viene utilizzato in un contesto numerico, esso viene convertito

automaticamente (quando è possibile: se non è possibile viene restituito NaN).

7 * “3” risulta 21 poiché il 3 stringa viene convertito in numero

Es.: 7 * “agosto” risulta Nan

Valori booleani, undefined e null

I valori booleani sono true o flase e sono il risultato di una valutazione di un’espressione (detta

espressione booleana).

Null è il valore nullo, valore posseduto da una variabile di riferimento ad oggetto quando non si riferisce

ad alcun oggetto.

Quando viene interpretato come valore booleano null vale false, mentre quando viene interpretato come

numero null vale 0.

Tecnologie del Web e di Internet - modulo 8 JavaScript - Benassi Simone 3


ACQUISTATO

1 volte

PAGINE

60

PESO

915.77 KB

AUTORE

bens89

PUBBLICATO

+1 anno fa


DETTAGLI
Corso di laurea: Corso di laurea in ingegneria gestionale
SSD:
Università: Bologna - Unibo
A.A.: 2014-2015

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher bens89 di informazioni apprese con la frequenza delle lezioni di Tecnologie del Web e di Internet e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Bologna - Unibo o del prof Scalas Maria Rita.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Corso di laurea in ingegneria gestionale

Geometria e algebra
Appunto
Appunti di analisi matematica 2
Appunto
Appunti Matematica Applicata
Appunto
Appunti di analisi 1
Appunto