Scribd
Carica
10 visualizzazioni41 pagine

Informatica 4°

Il documento fornisce una panoramica completa dei tag HTML e dei loro attributi, spiegando la loro funzione e utilizzo. Include dettagli su tag fondamentali come <html>, <head>, <body>, <meta>, <title>, e vari tag per la formattazione del testo e la creazione di strutture come tabelle e liste. Inoltre, illustra l'importanza di metadati e design responsivo per migliorare l'esperienza utente su diverse piattaforme.

Caricato da

whxps4pvmy
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
10 visualizzazioni41 pagine

Informatica 4°

Il documento fornisce una panoramica completa dei tag HTML e dei loro attributi, spiegando la loro funzione e utilizzo. Include dettagli su tag fondamentali come <html>, <head>, <body>, <meta>, <title>, e vari tag per la formattazione del testo e la creazione di strutture come tabelle e liste. Inoltre, illustra l'importanza di metadati e design responsivo per migliorare l'esperienza utente su diverse piattaforme.

Caricato da

whxps4pvmy
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 41

HTML

<!doctype html > dichiarazione che comunica al browser il tipo di documento che dovrà
interpretare, in modo che possa farlo correttamente

per fare commenti in html, racchiudere ciò che si vuole tra <!— commento —>

attributi: elementi interni ai tag, che ne specificano le informazioni o configurazioni, dopo


essere stati aperti vanno chiusi

tag cosa fa attributI che si spiegazione esempio


possono attributi
applicare

< html> tag che


</html> racchiude
l’intero
contenuto della
pagina web

<meta> tag che charset, name, charset: attributo <meta


contiene content che definisce tra charset=”UTF-8”>
soltanto doppi apici il set
metadati, dati di caratteri da <meta
relativi alla usare per la name=”viewport”
pagina web, pagina web, es: content=”width=de
che non UTF-8 è una vice=width,
appariranno codifica che usa initial-scale=1.0”>
nella pagina gruppi di byte
stessa, ma per
sono importanti rappresentare i
per trasmettere caratteri unicode
informazioni al
browser, ai
motori di ricerca
e ad altri servizi
del web.

"viewport"
fornisce al
browser
istruzioni su
come controllare
le dimensioni
della pagina e la
scala iniziale.

width=device-wi
dth: Imposta la
larghezza del
viewport (la
"finestra"
attraverso la
quale il tuo sito
web è
visualizzato)
sulla larghezza
effettiva del
dispositivo.

initial-scale=1.0:
Imposta il livello
di zoom iniziale
quando il sito
viene caricato
per la prima
volta. Un valore
di 1.0 indica
nessun
ingrandimento o
rimpicciolimento
iniziale.

Questi parametri
sono
fondamentali per
garantire che il
tuo sito web sia
visualizzato
correttamente su
una vasta
gamma di
dispositivi,
adattando la
larghezza del
contenuto alla
larghezza
effettiva dello
schermo del
dispositivo e
impostando una
scala iniziale
appropriata. In
sintesi, questi
tag
contribuiscono a
migliorare
l'esperienza
dell'utente su
dispositivi con
schermi di
diverse
dimensioni,
supportando
così il design
responsivo del
tuo sito.

<head> tag che


</head> contiene
metadati, ossia
informazioni
relative alla
pagina web,
come ad
esempio il titolo
della linguetta
che si legge
quando si apre
la pagina web

<title> </title> tag che


racchiude il
titolo che si
legge sulla
linguetta che si
vede quando si
apre la pagina
web

<style> tag in cui


</style> inserire le css
da applicare
alla pagina web

<script> tag che viene type="text/java


</script> utilizzato per script"
incorporare o funzioni
referenziare variabili
codice id
JavaScript
all'interno di tutte queste
una pagina web cose possono
essere scritte
anche:
- in head
- in body
- in un file
esterno con
estensione .js
che va incluso
negli attributi,
ad esempio:
type="text/java
script
src="percorso
file.js""
<button> tag che type, tutti gli type: attributo <button
</button> definisce un eventi che specifica il type=”button” >
pulsante tipo di bottone scritta che appare
sensibile al clic su cui premere
del mouse </button>

<body> tag entro il leftmargin, leftmargin: <body>


</body> quale sono text, attributo che leftmargin=”185”
scritti tutti gli background, imposta il text=”black”
elementi che bgcolor, margine sinistro background=”imma
definiscono il onload del contenuto gine.img”
contenuto all'interno del bgcolor=”pink”
effettivo, visibile corpo della onload=”funzione()
della pagina pagina, in base ”>
al numero scritto
dopo l’uguale, scrivo tuttecos
che indica il
numero di pixel </body>
da cui il margine
deve essere
costituito

text: attributo
che imposta il
colore delle
scritte

background:
attributo che
consente di
impostare
un’immagine
come sfondo

bgcolor: attributo
che imposta il
colore dello
sfondo

onload:attributo
che fa eseguire
la funzione
specificata in
script quando si
verifica il
caricamento
completo del tag
body della
pagina

<H1,2,3,4,5, tag che imposta


6> la formattazione
</H1,2,3,4,5, dell’intestazione
6> delle pagine
web, che
possono avere
6 dimensioni,
ordinate in
ordine
decrescente da
1a6

<p> </p> tag che align, class, align: attributo <p align=“center”
definisce un eventi, id che allinea in </p>
paragrafo, ossia una certa
un blocco di posizione un
testo standard elemento,
paragrafi,
immagini,
tabelle, ecc della
pagina web

<div> </div> tag che crea class


una divisione in
sezioni il body
della pagina,
ciascuna delle
quali funge da
contenitore per
le altre pagine

<font> tag che align, face, face: attributo <font


</font> specifica la size, color che definisce il align=“center”
formattazione carattere da face=“verdana”
del testo, quindi usare nel testo size=“4”
ne descrive color=“black”>
colore, size: attributo
grandezza ecc definisce la
del carattere grandezza del
carattere del
testo

color: attributo
che definisce il
colore del tag

<tt> </tt> tag che


permette di
scrivere in
mono
spaziatura

<br> tag che


definisce
l’interruzione di
una riga, non ha
tag di chiusura
e consente di
andare a capo

<b> </b> tag che scrive in


grassetto la
frase che
racchiude

<i> </i> tag che scrive in


corsivo la frase
che racchiude

<mark> tag che


</mark> evidenzia ciò
che il testo che
racchiude

<pre> </pre> tag che


visualizza il
testo nella
pagina web
esattamente
come è scritto
nel codice,
mantenendo gli
stessi a capo e
spazi bianchi

<u> </u> tag che scrive in


sottolineato la
frase che
racchiude

<s> </s> tag che scrive in


barrato la frase
che racchiude

<small> tag che scrive in


</small> piccolo la frase
che racchiude

<sup> tag che scrive in


</sup> alto la frase che
racchiude

<sub> tag che scrive in


</sub> basso la frase
che racchiude

<em> </em> tag enfatizza la


frase che
racchiude

<hr> tag che width, color width:attributo <hr width=“50%”


permette di che definisce lo color=“black”>
inserire una spessore della
linea orizzontale linea inserita
all’interno della nella pagina o la
pagina web larghezza di
un’immagine,
riducendo o
aumentando le
sue dimensioni
rispetto alle
dimensioni
originali

<a> </a> tag che rende href, target href: contiene il <a>
possibile percorso del link href=“https://chat.o
l’ipertestualità, penai.com/c/157a5
collegamenti o target: b0a-4648-4bb2-b6
link tra le stabilisce se il 4b-fa8ac1e4aec5”
risorse web, link viene aperto target=“_blank/_sel
quindi tra una nella stessa f” Premere su
pagina web e pagina della questo link per
un’altra pagina web vedere un gatto
originale (_self) </a>
o in un’altra
pagina (_blank)

<img> tag che src, width, src: attributo che <img


consente di height, indica il percorso src=“nome_immagi
inserire usemap de file ne.img” width=“75”
un’immagine (abbreviazione height=“75”
all’interno della di “source”, usemap=“#mappa”
pagina web origine) >

width: attributo
che definisce la
larghezza di
un’immagine,
riducendo o
aumentando le
sue dimensioni
rispetto alle
dimensioni
originali

height:attributo
che definisce la
larghezza di
un’immagine,
riducendo o
aumentando le
sue dimensioni
rispetto alle
dimensioni
originali

usemap:
attributo che
consente di
identificare
l’immagine
acquisita come
mappa

<header> tag che <header>


</header> racchiude i <h1> Pen
titoli/sottotitoli Pineapple Apple
della pagina Pen</h1>
web
<h3> un video che
<section> tag generico ha fatto la storia
</section> che definisce </h3>
una sezione di
documento, che </header>
contiene al suo
interno altri tag, <section>
ovvero article e <nav>
nav <ul>
<li>
<nav> tag che simula <a href=”#”>
</nav> un menù di Penna
navigazione </a>
</li>
<article> tag che
</article> racchiude il <li>
contenuto <a href=”#”>
principale di Mela
una pagina web </a>
</li>
<footer> tag che
</footer> contiene il testo
</ul>
a piè di pagina
</nav>
<article>
facciamo finta che
abbia scritto
davvero un articolo
</article>
</section>

<footer>
<p>
disclaimer: tutto ciò
che state leggendo
è frutto della mia
interpretazione,
non affidatevi
troppo a una come
me
</p>
</fotter>
<ol> </ol> tag che type, start type: attributo <ol type=“i”
definisce un che stabilisce start=“10”>
elenco puntato l’indice della lista <li> ananas</li>
secondo un ordinata, <li> mela </li>
indice ordinato, a=lettera, <li> penna </li>
come un i=numero </ol>
numero romano
normale, 1=numero di
romano o una partenza
lettera
start=indice di
partenza

<ul> </ul> tag che <ul>


definisce un <li> ananas</li>
elenco puntato <li> mela </li>
secondo un <li> penna </li>
indice non </ul>
ordinato, come
un pallino

<li> </li> tag che


contiene ogni
punto
dell’elenco
puntato

<dl> </dl> tag che


contiene una
<dl>
<dt> ananas 🍍 </dt>
lista descrittiva
🍎🍏
<dd> frutto giallo </dt>
<dt> mela </dt>

🖊️
<dt> </dt> tag che <dd> frutto rosso o verde</dt>
contiene i <dt> penna </dt>
termini da <dd> utensile per scrivere </dd>
definire della </dl>
lista

<dd> </dd> tag che


contiene le
definizioni dei
termini da
definire di una
lista descrittiva

<table> tag che border, border: attributo


</table> contiene l’intera cellpadding, che definisce lo <table
tabella cellspacing spessore del cellspadding=5,
align, bgcolor, bordo della cellspacing=3,
width, height tabella align=“center”,
bgcolor=“#FF0000”
cellpadding: , width=“75%”,
attributo che height=“75%”>
specifica la
spaziatura <caption> Frutti
interna delle tutti </caption>
celle all’interno <tr>
di una tabella <th> MELA </th>
<th> ANANAS
cellspacing: </th>
attributo che <th> PENNA </th>
specifica la </tr>
spaziatura tra le <!— riga di
celle di una intestazione —>
tabella <tr>
<td> frutto rosso
<tr> </tr> tag che </td>
identifica ogni <td colspan="2">
riga della frutto giallo </td>
tabella <td rowspan="2">
utensile per
<caption> tag che scrivere </td>
</caption> identifica la riga </tr>
di intestazione
della tabella

<th> </th> tag che


identifica le
intestazioni,
come ad
esempio, la
prima cella di
ogni colonna

<td> </td> tag che colspan colspan:


identifica ogni attributo che
cella cella rowspan indica quanti
contenente dei riquadri
dati nella tabella orizzontali della
(rowspan=+di tabella una
una determinata
riga)(colspan=+ cella dovrebbe
di una colonna) occupare

rowspan:
attributo che
indica quanti
riquadri verticali
della tabella una
determinata
cella dovrebbe
occupa

<img> tag che src, width, <img


consente di height, src=“nome_immagi
inserire usemap ne.estensione”
un’immagine width=“75”
all’interno della height=“75”
pagina web usemap=“#mappa”
>

<map> tag che name name: attributo <map>


</map> consente di che identifica name=“mappa”
suddividere l’immagine che </map>
un’immagine in si intende
più parti e di suddividere in
assegnare ad più aree attive
ogni parte un
link differente

<area> tag che shape, coords, shape: attributo <area>


</area> definisce l’area href che identifica la shape=“rect”
a cui si vuole forma della coords=“0,0,100,10
collegare un link mappa a cui 0”, href=“link”
associare il link </area>
considerato
<area>
coords: attributo shape=“circle”
che identifica le coords=“1,1,5”,
coordinate href=“link” </area>
precise in cui è
racchiusa l’area <area>
a cui si vuole shape=“poly”
collegare un link coords=“1,2,3,4”,
se è un href=“link” </area>
rettangolo,
quadrato,
bisogna inserire
le coordinate di
2 vertici opposti,
quello in alto a
sinistra e quello
in basso a
destra

<svg> </svg> tag che width, height RETTANGOLO


consente di <svg width=“70”
disegnare height=“75” >
percorsi,
riquadri, cerchi, <a> href=“link”
testo e target=“_blank/_sel
immagini f”</a>
grafiche e di
collegarle a dei <rect x=“5” y=“10”
link esterni. width=“70”
Vantaggi: il height=“75”
browser stroke=“red”
ricalcola, stroke-width=“5”
ricostruisce la fill=“green” >
figura in base
allo schermo <text> fill=white
che si vuole font-size=“40”
utilizzare. SI ha font-family=“verdan
quindi una a” x=45 y=50 CIAO
figura sempre </text>
ben definita </svg>

CERCHIO
<svg width=“70”
height=“75” >

<a href=“link”
target=“_blank/_sel
f”>

<circle cx=“100”
cy=“50” r=“40”
stroke=“red”
stroke-width=“5”
fill=“green” >

<text> fill=white
font-size=“40”
font-family=“verdan
a” x=45 y=50 CIAO
</text>
</a>
</svg>

ANIMAZIONE
<style>
rect {width: 100 px;
height:100 px;
background:red;
transition
duration:5s;}

rect: hover {width:


300 px;}
<style>
…

<svg width=“400”
height=“400” >

<rect x=“50” y=“20”


fill=“green”/ >

</svg>

<video> tag che width, height, controls: fa <video


</video> consente di controls, apparire i width=”450”, “360”
gestire un autoplay tradizionali controls>
filmato (facoltativo) elementi di
muted gestione del <source
(facoltativo) video src=”qual.webm”
(avvio/arresto, type=”cosa.webm/
scorrimento, ogg/mp4” >
volume e
dimensione) </video>

autoplay: fa
partire
automaticament
e il video inserito

muted: disattiva
automaticament
e l’audio del
video inserito

<audio> tag che <audio>


</audio> consente di
gestire un file <source
audio src=”qual.webm”
type=”cosa.mpeg/
wav/ogg” >

</audio>

<source> tag che effettua src, type <source


il collegamento src=”qual.webm”
al file del video type=”cosa.webm/
ogg/mp4” >

<form> tag che style <!DOCTYPE html>


</form> contiene l’intero type="text/css"> <html>
modulo fieldset{display: <head>
inline-block;} <meta
</style> charset="UTF-8">
<fieldset> tag che crea un <title>modulo
</fieldset> determina quadrato HTML</title>
l’aspetto grafico type: specifica il <style
del modulo, tipo di input type="text/css">
crea dei inserito fieldset { display:
contorni e li dall’utente., che inline-block; }
distacca dal può assumere </style>
resto della valore: </head>
pagina 1)text <body>
2)password <h3>Inserisci i
<input> tag che type 3)email: Campo tuoi dati</h3>
consente di fare name di testo per <form>
un inserimento autofocus l'inserimento di <fieldset>
value un indirizzo <p>nome</p>
placeholder email. <input
required type="text"
4)radio:
id (Pulsante di name="nome"
opzione per le autofocus>
<select> tag che mostra name opzioni di
</select> un menù a value selezione <p>nazione</p>
tendina singola in un <select
gruppo.) name="nazione">
<option> tag all’interno 5)submit:Pulsant <option
</option> del quale si e di invio per value="Italia">Italia
racchiudono le inviare i dati del </option>
opzioni possibili modulo al server <option
del menù a 6)reset: Pulsante value="Svizzera">
tendina per ripristinare i Svizzera</option>
valori del modulo <option
ai loro valori value="altro">altro
<legend> tag che al posto name </option>
predefiniti.
</legend> del riquadro fa </select>
7)file: Per il
una cornice <p>anno di
caricamento di
grafica nascita</p>
file tramite un
modulo. <input
<textarea> tag che rows(righe),
8) number: type="text"
</textarea> permette di cols(colonne)
Campo di testo name="anno"
creare nel
per l'inserimento placeholder="AAA
modulo una
di numeri. A">
casella di testo
html </fieldset>
(ad esempio in
9) date: Per <br><br>
cui l’utente può
<fieldset>
inserire un selezionare una
<p>e-mail</p>
commento) data <input
10)checkbox: type="email"
(Casella di name="email">
controllo per le
opzioni di <p>password</p>
<input
selezione
type="password"
multipla) name="pwd"
11)url: Campo di required>
testo per </fieldset>
l'inserimento di <br><br>
un URL. <fieldset>
name: specifica <input
il campo type="submit"
dell’input value="INVIA">
autofocus:attribu <input
to che fa sì che type="reset"
all’apertura di value="CANCELLA
una pagina il ">
cursore si trovi </fieldset>
già in quella </form>
casella così che <h3>Inserisci un
l’utente possa PIN (4 cifre)</h3>
già iniziare a <input type="text"
digitare senza id="num"
dover prima autofocus>
<br><br>
spostare il <button
cursore sulla type="button"
casella onclick="verifica()"
value: attributo >VERIFICA</butto
che permette di n>
specificare un <p
testo di default, id="feedback"></p
(poi viene >
comunque data <script>
la possibilità di function
confermare o verifica() {
cancellare il var x, y, avviso;
testo) x=
placeholder: document.getElem
attributo che entById("num").val
permette di ue.length;
specificare un y=
testo di colore document.getElem
sbiadito per il entById("num").val
modello di ue;
compilazione (il if (y.indexOf(" ")
testo sparisce >= 0)
appenal’utente y=
inizia< a document.getElem
compilare) entById("num").val
submit si usa ue;
soolo all’interno if (y.indexOf(" ")
dei moduli e e >= 0) {
serve solo per avviso =
l’invio dei dati al "Attenzione:
server rimuovi gli spazi
reset genera un bianchi!";
pulsante che ha } else if (x != 4)
la funzione di {
cancellare tutto avviso =
ciò che è stato "Attenzione: il PIN
inserito nei deve essere di 4
campi del cifre";
modulo per } else if
ricominciare la (isNaN(y)) {
compilazione, avviso =
required: "Input non valido:
attributo che deve essere
rende numerico";
obbligatoria la } else {
compilazione del avviso = "OK,
campo se si l'input è valido";
prova a inviare i }
dati lasciando
vuota una document.getElem
casella entById("feedback"
).innerHTML =
avviso;
}
</script>
<br><br>
<fieldset>
<legend> Paese
d’origine </legend>
<select
name="nazione">
<option
value="Italia">Italia
</option>
<option
value="Svizzera">
Svizzera</option>
<option
value="altro">altro
</option>
</select>
</fieldset>
<fieldset>
<legend>
Confermo di
essere
maggiorenne
</legend>
<input
type="radio"
name="anni"
value="mag">si<br
>
<input
type="radio"
name="anni"
value="min">no<br
>
</fieldset>
<fieldset>
<legend> Lascia
un commento:
</legend>

<textarea></textar
ea>
<input
type="radio"
name="anni"
value="mag">si<br
>
<input
type="radio"
name="anni"
value="min">no<br
>
</fieldset>
</body>
</html>

colori in html

codifica cosa fa sintassi

nome del colore in inglese applica all’elemento in cui è color=“white”


posto l’attributo il colore
scritto

codice rgb applica all’elemento in cui è color=rgb(0,146,98)


posto l’attributo un colore tra
i 256^3 possibili nella scala
cromatica, in base alla
quantità di rosso, verde e
blu, stabilità rispettivamente
dai 3 numeri tra parentesi,
che sono compresi tra 0 e
255

codice esadecimali applica all'elemento in cui è color=#FF0000


posto l’attributo un colore
descritto dai 6 cifre
esadecimali, da 00 a FF,
ogni 2 cifre corrispondono
ad uno dei 3 valori del
codice rgb

CSS: linguaggio dei fogli di stile che permette di trasformare l’aspetto visivo delle pagina
web, curandone l’estetica

pseudoclasse: consente di settare un tag in relazione al suo stato, nella pseudoclasse ci


sono due punto e non uno come nelle classi

per differenziare un link già visitato da uno da visitare, colorare il link, inserire nell’head il tag
style interviene sul colore del link,

CSS (che straminch!ia stiamo facendo? ovviamente)


<style> <body>
sfondo-1:hover { <div class=“sfondo-1”>
background-color: red; </div>
} <div class=“sfondo-2”>
.sfondo-2:hover { </div>
background-color: orange; <div class=“sfondo-3”>
} </div>
.sfondo-3:hover { <div class=“sfondo-4”>
background-color:yellow </div>
} <div class=“sfondo-5”>
.sfondo-3:hover { </div>
background-color:green <div class=“sfondo-6”>
} </div>
.sfondo-5:hover { <div class=“sfondo-7”>
background-color:blue </div>
} </body>
.sfondo-6:hover { l’”*” indica che la regola scritta tra {} va
background-color:purple applicata a tutte le parti del programma
} considerabili come boxe, per cui tutte le
.sfondo-7:hover { parti di programma che contengono almeno
background-color:pink un attributo tra: margin, padding, height,
} width, border
a:link{color:red} <!--link non visitato=rosso> Quello che è scritto tra {} indica che la
dimensione dei boxe Questo significa che
a:visited{color: green} <!--link l'altezza e la larghezza di un elemento
visitato=verde> includeranno il bordo e il padding, e non
a:hover{color:pink} <!--link con mouse solo il contenuto.
sopra=rosa> indica che tutto il testo contenuto in body
a:active{color:black} <!--link nel momento in sarà di tipo arial
cui è premuto=nero> i titoli saranno messi su uno riquadro verde,
a 10px di distanza dai bordi, allineati al
(link rela"stylesheet" types"text/ess" centro e bianchi
hrefa"still/responsivo.oss"> il menù dei comandi è spostato a sinistra,
infatti l’attributo float definisce la posizione
* {box-sizing: border-box;} di un elemento rispetto al suo contenitore
body {font-family: Arial;} lo spazio dal boxe è il 30% dello spazio
header {background-color: green; totale dello schermo
padding: 10px; l’altezza viene impostata a 250 px
text-align: center; il tipo di carattere viene impostato a 18px, lo
color: white;} sfondo è del colore che corrisponde a
nav {float: left; quelle cifre esadecimali e lo spazio tra le
width: 30%; scritte e le celle è 15px
height: 250px;
font-size: 18px; rimuove i punti elenco e lo spazio dai bordi
background: #cccccc; degli elementi non ordinati all’interno della
padding: 15px;} barra di navigazione

nav ul {list-style-type: none; allinea a sinistra la sezione principale della


padding: 0;} pagina, aggiunge 20px dal bordo sinistro,
imposta la larghezza della sezione al 70%,
article {float: left; imposta il colore dello sfondo e l’altezza a
padding: 20px; 200 px
width: 70%;
background-color: #f1f1f1; mette uno sfondo giallo al piè di pagina, lo
height: 200px;} allinea a sinistra, imposta la larghezza al
massimo, il padding a 10px, allinea il testo
footer {background-color: yellow; al centro e rende il testo blu
float:left;
width: 100%; stabilisce che, quando si verifica la
padding: 10px; condizione tra (), in questo caso quando la
text-align: center; larghezza della pagina è 550px, viene
color: blue;} applicata la regola posta tra {}, in questo
caso la larghezza di nav e article diventa il
@media (max-width: 550px) 100% della pagina e l’altezza è deteminata
{nav, article {width:100%; height:auto;}} automaticamente in base al contenuto

</style>

BOX MODEL tag che costituisce un modello a riquadri in


cui ogni tag contenitore è considerato come
un tag a sé stante

attributi:
width: lunghezza contenuto
height: altezza contenuto
border: spessore cornice contento
padding: spazio tra il contenuto e la sua
cornice
margin: spazio tra la cornice e gli altri box
della pagina

altezza complessiva box:


height+2*(margin+border+padding)

responsive web design: tecnica di progettazione di pagine web flessibili che si


adattino in modo automatico ai diversi schermi dei dispositivi con cui le si consulta

JAVASCRIPT: linguaggio di programmazione scripting, lato client, a eventi, orientato


agli oggetti, case sensitive
Scripting perché è un linguaggio che rimane semplice testo (script) che è interpretato ed
eseguito a runtime, senza essere compilato e trasformato in codice binario.
Lato client,perchè è eseguito dal browser dell'utente e non dal server web che ospita il sito
visitato
a eventi: basato sulle interazione che avvengono attraverso l'interfaccia grafica del browser
orientato agli oggetti: gli oggetti in JavaScript possono contenere proprietà (dati) e metodi
(funzioni) che definiscono il comportamento dell'oggetto, ma il linguaggio non comprende le
classi
case sensitive: fa distinzione tra lettere maiuscole e minuscole
GERARCHIA OGGETTO PRINCIPALE

DOM DOCUMENT
● document object model ● oggetto principale del DOM
● rappresentazione gerarchica e associato alla pagina web corrente.
strutturata di una pagina web che ● Attraverso esso è possibile
consente agli script, come quelli accedere agli elementi della pagina,
scritti in JavaScript, di accedere modificarne il contenuto, la struttura
dinamicamente e manipolare il o gli attributi e gestire eventi.
contenuto, la struttura e lo stile di ● document.getElementById(nome_id)
una pagina web. può essere utilizzato per ottenere un
● Rappresenta la pagina come un riferimento a un elemento HTML con
albero di oggetti, dove ogni nodo un determinato ID, infatti viene
dell'albero rappresenta un elemento invocato il metodo getElementById
della pagina (come tag HTML) e gli dell’oggetto document e gli viene
oggetti forniscono metodi e proprietà passato come parametro “id”, che è
per manipolare quegli elementi. il tag su cui si vuole agire

BOM: WINDOW
● browser object model oggetto chiave nel BOM che fornisce
● gerarchia di oggetti manipolabili un'interfaccia per interagire con la finestra
attraverso JavaScript che del browser e gestire vari aspetti
rappresentano l'interfaccia grafica dell'ambiente di esecuzione del JavaScript
del browser. all'interno di una pagina web
● comprende oggetti come document
e window

codice descrizione

<!doctype html> type="text/javascript" attributo che


<meta charset="UTF-8"> specificare il tipo di contenuto all'interno
<html> del tag <script>
<head> function nomefunzione: La funzione
`nomefunzione` in questo caso è utilizzata
<!--> EVENTI DEL MOUSE<-> per visualizzare un messaggio di
<script type="text/javascript"> benvenuto attraverso un popup di avviso
function nomefunzione() (`alert`)
{alert ("benvenuti nel mio sito");} alert: metodo che fa apparire nella pagina
web un riquadro contenente la scritta
specificata come argomento tra doppi apici
function funzioneMouseOver(obj) obj : oggetto su cui si è verificato l'evento.
{
obj.innerHTML = "ciaooo" obj.innerHTML: modifica il contenuto
} HTML dell'oggetto utilizzando la proprietà
function funzioneMouseOut(obj) innerHTML scrivendo "ciaooo" al posto di
{ quanto scritto nel paragrafo in cui è stata
obj.innerHTML = "tutto bene?" chiamata la funzione onmouseover
}
In generale, questo codice sembra essere
function funzioneOnClick(obj) un esempio di gestione di eventi in
{ JavaScript per cambiare dinamicamente il
obj.innerHTML = "io più o meno" contenuto di un elemento quando il mouse
} si trova sopra di esso
funzioneMouseOver: funzione che viene
function funzioneContextMenu(obj) chiamata quando si verifica l'evento
{ "onmouseover", ovvero quando il puntatore
obj.innerHTML = "anche se..." del mouse entra in un elemento
}
function funzioneDoubleclick(obj) ra in un elemento
{
obj.innerHTML = "devo dire" onmouseout:
} evento che si verifica quando il puntatore
del mouse si sposta fuori da un elemento .
function funzioneMouseDown(obj) onclick: evento si verifica quando l'utente
fa clic su un elemento HTML
{
oncontextmenu:
obj.innerHTML = "vorrei essere ovunque evento che si verifica quando l'utente fa
tranne che a fare info" clic con il pulsante destro del mouse su un
} elemento HTML per aprire il menu
contestuale
function funzioneMouseEnter(obj) ondblclick: evento che si verifica quando
{ l'utente fa doppio clic su un elemento
HTML
obj.innerHTML = "non so come fare a
onmousedown:
prendere 6" evento che si verifica quando un utente
} preme un pulsante del mouse su un
elemento HTML
function funzioneMouseLeave(obj) onmouseenter: evento si verifica quando il
{ puntatore del mouse entra in un elemento
onmouseleave: evento si verifica quando il
obj.innerHTML = "mi affido al padre
puntatore del mouse lascia un elemento
eterno anche sta volta"
}
</script>
</head>
<!--> EVENTI DEL MOUSE<->
<body onload="nomefunzione()">
<p
onmouseover="funzioneMouseOver(this)" style serve per fare un quadrato
style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center"> stato iniziale: scritta che compare nel
stato iniziale quadrato prima dell’evento
</p> this: parola chiave che indica che l’oggetto
<p onmouseout="funzioneMouseOut(this)" al cui interno la si usa
style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center">
stato iniziale
</p>
<p onclick="funzioneClick(this)"
style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center">
stato iniziale
</p>
<p
oncontextmenu="funzioneContextMenu(this)
" style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center">
stato iniziale
</p>
<p ondblclick="funzioneDblClick(this)"
style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center">
stato iniziale
</p>
<p
onmousedown="funzioneMouseDown(this)"
style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center">
stato iniziale id=attributo HTML utilizzato per
</p> assegnare un identificatore unico a un
<p elemento all'interno di un documento
onmouseenter="funzioneMouseEnter(this)"
HTML.
style="background-color:pink; width:150px;
height:20px; padding:40px; text-align:
center"> il metodo getElementById individua tramite
l’id il tag nome id (che è scritto in p) e gli
stato iniziale
assegna il testo tra “”
</p>
<p innerHTML viene quindi utilizzata per
onmouseleave="funzioneMouseLeave(this)" impostare il contenuto (innerHTML)
style="background-color:pink; width:150px; dell'elemento selezionato.
height:20px; padding:40px; text-align:
center">
stato iniziale
</p>
<!--> EVENTI CON BUTTON<-> il testo dopo l’uguale tra “” viene assegnato
<script> al paragrafo che ha come id quello tra
function nomefunzione() { parentesi e viene quindi stampato a video
alert("benvenuti nel mio sito");
} var: parola chiave per dichiarare una
variabile. La
stessa variabile può assumere valori
function funzioneMouseOver(obj) { diversi
obj.innerHTML = "ciaooo";
} x: variabile a cui viene assegnata la
larghezza della pagina misurata dalla
function funzioneMouseOut(obj) {
proprietà del BOM innerWidth
obj.innerHTML = "tutto bene?";
} y: variabile a cui viene assegnata la
lunghezza della pagina misurata dalla
function funzioneOnClick(obj) {
obj.innerHTML = "io più o meno"; proprietà del BOM innerHeight
}
z:variabile in cui viene memorizzato
l’elemento HTML ottenuto con l’ID
function funzioneContextMenu(obj) {
“dimensioni” e che rappresenta il paragrafo
obj.innerHTML = "anche se..."; su cui si vuole agire
}
typesElement: variabile uguagliata a vari
function funzioneDbliclick(obj) { valori con la proprietà innerHTML
obj.innerHTML = "devo dire";
} typeof: operatore che restituisce il tipo di
dato dei valori anche se nessuna variabile
è stata dichiarata
function funzioneMouseDown(obj) {
obj.innerHTML = "vorrei essere nome: variabile string (sequenze di
ovunque tranne che a fare info"; caratteri tra “”), inizializzato a Isa
}
numero: variabile number, numeri decimali
e non, inizializzato come 17 per l’età e
function funzioneMouseEnter(obj) {
1,65 per l’altezza
obj.innerHTML = "non so come fare
a prendere 6"; true/false: variabile boolean
}
nullValue : variabile assegnata a null,
function funzioneMouseLeave(obj) { ovvero un valore assegnabile
obj.innerHTML = "mi affido al padre intenzionalmente per indicare l'assenza di
un valore o un riferimento nullo
eterno anche sta volta";
} indefinita: variabile undefined
</script>
</head> la variabile somma viene inizializzata alla
<body onload="nomefunzione()"> somma di età+compleanno, può essere sia
<button quella aritmetica che la concatenazione di
onmouseover="funzioneMouseOver(this)" > due stringhe, perchè:
stato iniziale LE VARIABILI IN JAVASCRIPT
</button> POSSONO ASSUMERE VALORI DI TIPO
<button DIVERSI
onmouseout="funzioneMouseOut(this)" >
+:operatore usato per concatenare
stato iniziale
- variabili
</button> - funzioni
<button onclick="funzioneOnClick(this)" > - tag
stato iniziale distingue la sua funzione in base alle
</button> variabili a cui è applicato
<button
oncontextmenu="funzioneContextMenu(this) =: operatore di assegnamento, si può
comporre in +=, -=, *=, /=, %= (var1+=var2
">
è uguale a dire var1=var2+var1)
stato iniziale
</button> ai aggiunge agli operatori logici NOT(!)
<button
ondblclick="funzioneDbliclick(this)" > operatori di confronto, che controllano che
stato iniziale due dati siano uguali o diverse sia il valore
</button> che in tipo sono: === e !==
<button
TUTTI GLI ALTRI OPERATORI SONO
onmousedown="funzioneMouseDown(this)" UGUALI
style="background-color:pink; width:150px;
height:60px;">
stato iniziale
</button>
<button
onmouseenter="funzioneMouseEnter(this)">
stato iniziale
</button>
<button
onmouseleave="funzioneMouseLeave(this)>
stato iniziale
</button>
</body> numeri_angelici: stampa a video sulla
<!-->DOCUMENT<-> pagina web tutto l’array
<p id="uno"> </p>
numeri_angelici[1]; per stampare a video
<script>
un elemento preciso dell’array, si scrivono
document.getElementById("uno").innerHTM le stesse cose che servono per stampare a
L="testo inserito con javascript"; video tutto l’array,ma si indica il suo indice
</script> tra [ ]
<!-->WINDOW<->
<p id="window"></p> somma Numeri: variabili destinata a
<script> contenere la somma degli elementi
var x = window.innerWidth; dell’array,si può scrivere la somma come
var y = window.innerHeight; nel primo modo, “manualmente”, facendo
var z = la somma di tutti gli elementi associati
all’indice tra [ ] oppure con un ciclo for
document.getElementById("window");
length: metodo che restituisce il numero di
z.innerHTML = "La finestra è larga " + x + elementi presenti nell’array
" px e alta " + y + " px";
</script>
<!-->VARIABILI IMPLICITE<->
<p id="types 1"></p>
<script>
var typesElement =
document.getElementById("types 1");
typesElement.innerHTML =
typeof "Isa" + "<br>" +
typeof 17 + "<br>" + push: metodo che aumenta di uno la
typeof 165.5 + "<br>" + dimensione dell’array ed inserisce nella
typeof true + "<br>" + cella aggiunta l’elemento tra (“ ”), se si fa
typeof "Isa"; stampare a video in questo modo riporta 4,
</script> ovvero la dimensione dell’array
<!-->VARIABILI ESPLICITE<->
unshift: metodo che aggiunge un elemento
<p id="types 2"></p> allinizio dell’array
<p id="types 3"></p>
<p id="types 4"></p> sort: metodo che ordina l’array in ordine
<p id="types 5"></p> alfabetico o numerico, funziona anche con
<p id="types 6"></p> array misti
<script>
var nome = "Isabella"; shift: metodo che elimina il primo elemento
var età = 17; dell’array e restituisce l’elemento eliminato
var altezza = 160.5;
var boolean = true; pop: metodo per eliminare l’ultimo
var nullValue = null; elemento dell’array
var indefinita;
var compleanno=23112006;
document.getElementById("types
2").innerHTML = età+compleanno + "viene elenco è una variabile a cui viene
stampato come una somma perché il primo assegnato il tag ol, cioè quello che dà
elemento che compare è la somma tra le inizio ad una lista ordinata, viene
variabili numeriche che quindi vengono interpretata come stringa
interpretate come numeri"; i: variabile contatore
var somma=età+compleanno; for: ciclo iterativo per stampare a video
document.getElementById("types l’elenco
3").innerHTML = "somma tra la mia età ed il
mio compleanno: "+somma;

compleanno="23112006";
somma=età+compleanno;
document.getElementById("types
4").innerHTML = "somma tra la mia età ed il
mio compleanno: "+somma;
document.getElementById("types
5").innerHTML = "somma tra la mia età ed il
mio compleanno: "+età+compleanno+". In proprietà dell’oggetto
questo caso invece, siccome età e variabili con cui si esegue il ciclo for/in, che
compleanno non sono le prime variabili a - non ha un indice numerico
comparire vengono interpretate come - esegue in modo iterativo le
stringhe da accodare"; istruzioni tra {} ripetendole una
document.getElementById("types volta per ogni oggetto
6").innerHTML = Questa riga non verrà
stampata a video perchè vanno sempre
messi gli apici!!+età+compleanno;
</script>
<!-->ARRAY<->
</script>
<p id="unoo"></p>
<p id="due"></p>
<p id="tre"></p>
<p id="quattro"></p>
<p id="cinque"></p>
<p id="sei"></p>
<p id="sette"></p>
<p id="otto"></p>
<p id="nove"></p>
<p id="dieci"></p>
<p id="undici"></p>
<script>
var numeri_angelici = [111, 222, 333];
var misto = [111, "ananas", 33.3];
document.getElementById("unoo").innerHT
ML = numeri_angelici;

document.getElementById("due").innerHTM
L = numeri_angelici[1];

var sommaNumeri = numeri_angelici[0] +


numeri_angelici[1] + numeri_angelici[2];

document.getElementById("tre").innerHTML
= sommaNumeri;

for(var i=0; i<numeri_angelici.length; i++)


{

document.getElementById("quattro").innerH
TML = sommaNumeri;
}

document.getElementById("cinque").innerH
TML = numeri_angelici.length;

var frutti = ["mela", "ananas", "pera"];

document.getElementById("sei").innerHTML
= frutti;

document.getElementById("sette").innerHT
ML = frutti.push("arancia");

document.getElementById("otto").innerHTM
L = frutti.unshift("pesca");
document.getElementById("nove").innerHT
ML = frutti.sort();

document.getElementById("dieci").innerHTM
L = frutti.shift();

document.getElementById("undici").innerHT
ML = frutti.pop();

</script>

<!-->ELENCHI<->
<p id=”elenco”> </p>
<script>
var elenco = "<ol>";
var i;
var frutti = ["mela", "ananas", "pera"];
for (i = 0; i < frutti.length; i++) {
elenco = elenco + "<li>" + frutti[i] + "</li>";
}
elenco = elenco + "</ol>";
document.getElementById("elenco").innerH
TML = elenco;
</script>
<!-->OGGETTO, ESEMPIO
SENZA METODI <->
<p id=”obj”> </p>
<script>
var oggetto= {nome=”rettangolo”,
lunghezza:16.5, larghezza:8.5};
var x, testo=” ”;
for (x in oggetto)
{
testo=testo+oggetto[x]+ “ ”;
}
document.getElementById("oggetto").innerH
TML =testo;
</script>
<!-->OGGETTO, ESEMPIO
CON I METODI<->
<p id="funzione"></p>
<script>
var oggetto =
{
nome: "Isabella",
anni: 17,
altezza: 160.5,
stampa: function()
{
return this.nome + " ha " + this.anni + " anni
ed è alta " + this.altezza + " cm";
}
};
document.getElementById("funzione").inner
HTML = oggetto.stampa();
</script>
<!-->OGGETTO 2, ESEMPIO
CON I METODI<->
<p id="obj2"></p>
<script>
var oggetto2 =
{
nome2: "Anna",
anni2: 16,
altezza2: 170.5,
stampa2: function(nome2, anni2,
altezza2)
{
return nome2 + " ha " + anni2 + " anni ed è
alta " + altezza2 + " cm";
}
};
document.getElementById("obj2").innerHTM
L = oggetto2.stampa2(oggetto2.nome2,
oggetto2.anni2, oggetto2.altezza2);
</script>

<!-->METODO COSTRUTTORE<->
<p id="m1"></p>
<p id="m2"></p>
<script>
function MetodoCostruttore (nome, anni,
altezza)
{
this.nome=nome;
this.anni=anni;
this.altezza=altezza;
};
var Elisa = new MetodoCostruttore("Elisa",
17, 165.5);
var Emma = new
MetodoCostruttore("Emma", 17, 162.5);
document.getElementById("m1").innerHTML
= Elisa.nome+" ha "+Elisa.anni+" anni ed è
alta "+Elisa.altezza;
document.getElementById("m2").innerHTML
= Emma.nome+" ha "+Emma.anni+" anni ed
è alta "+Emma.altezza;
</script>

PHP: linguaggio di programmazione scripting, lato server,case sensitive (non sempre),


software open source, debolmente tipizzato
Scripting perché è un linguaggio che rimane semplice testo (script) che è interpretato ed
eseguito a runtime, senza essere compilato e trasformato in codice binario.
Lato server,perchè ogni codice PHP risiede su un web server, che interpreta i comandi del
linguaggio e produce pagine web poi inviate al browser del client, interpretato da XAMPP
case sensitive ma non sempre:
- nome funzione può essere scritto come si vuole, viene sempre interpretato
correttamente
- nomi di variabili devono iniziare tutte con “$”
software open source:
- libero
- in continuo sviluppo
- eseguibile da tanti programmi per ogni sistema operativo
debolmente tipizzato: non è necessario dichiarare negli script il tipo di dato contenuto nelle
variabili perché l’interprete lo riconosce al momento dell’esecuzione del programma

quindi ha 2 vantaggi:
1) sgrava il browser dell’utente dal compito di eseguire script che potrebbero rallentare
il caricamento della pagina
2) evita problemi di compatibilità tra il linguaggio e il browser del client

CODICE DESCRIZIONE
<!DOCTYPE html> apertura e chiusura del tag php
<html> dichiarazione di una variabile numerica
<head> funzione che stampa la stringa nella pagina web
<meta charset="UTF-8"> Stringa di testo che contiene il testo "x = 5/2 = ".
<title>PHP: tipi di dato</title> operatore di concatenazione (.), che viene utilizzato per
</head> unire la stringa di testo alla variabile $x.
<body> istruzione che viene stampata nella pagina web
<?php La funzione gettype restituisce il tipo di dato della variabile
$x=5/2; x
echo "x = 5/2 = ".$x."<br>"; dichiarazione di una variabile string
echo "Il tipo di dato di x è " .gettype($x). "<br><br>"; funzione che restituisce il numero di caratteri della stringa
$y = 1; (spazi compresi)
echo "Il tipo di dato di y è " .gettype($y).“<br>"; variabile string a cui viene assegnato un carattere della
$frase= “Buongiorno a tutti”; stringa
echo strlen($frase). “<br><br>”; funzione che ricerca una sottostringa
$lettera=$frase{3}; “or”: sottostringa da ricercare
echo $lettera.“<br><br>”; funzione che permette di mandare a capo il testo così da
echo stristr($frase, “or”).“<br>”; rispettare un margine prefissato
$frase: stringa su cui agire
echo wordwrap($frase, 8, “<br>”); 8:numero massimo di caratteri per riga
<br>”: carattere da usare a fine riga
echo str_word_count(“ciaooo sono isa”).“<br>”; restituisce il numero di parole che compongono la stringa
tra parentesi in base al riconoscimento degli spazi bianchi
echo strpos(‘ciaooo sono isa’, ‘isa’).“<br>”; trova la prima occorrenza della sottostringa specificata
nel secondo argomento all’interno della prima

sostituire la parte di stringa indicata nel primo argomento


echo str_replace(“ciaooo”, “oooooo”, ‘ciaooo sono con quello che è indicato nel secondo
isa’).“<br>”; per stampare il contenuto di una variabile si usa la dot
notation
$k=true;
echo "il valore di y è ".$y. "<br><br>";
$z=10;
echo "Il tipo di dato di z è " .gettype($z). ";<br>"; dichiarazione di una variabile booleana
echo "il valore di z+5 è ".($z+5). "<br><br>";
echo "Il tipo di dato di k è " .gettype($k). ";<br>";
echo "il valore di k è ".$k;
operatore di comparazione di valore
if($x==$y) {echo “x e y sono uguali”.”<br><br>”}
else {echo “x e y NON sono uguali”.”<br><br>”}
if($x===$y) {echo “x e y sono identiche”.”<br><br>”} operatore di comparazione dei tipi
else {echo “x e y NON sono identiche”.“<br><br>”}

function rettangolo($lato1, $lato2)


{
echo “il lato 1 misura ”.$lato1. “<br> “il lato 2
misura”.$lato2.“<br> l’area misura ”.lato1*lato2;
}
rettangolo(10,20); inizializzazione degli attributi

$x=11; variabile globale: variabile dichiarata all’esterno delle


function mia_funz() funzioni, con ambito di visibilità limitato all’intero script php
{ escluse le funzioni, per farla visualizzare all’interno delle
echo “la variabile vista dentro la funzione è x= ”.$x; funzioni bisogna precedere la dichiarazione della variabile
con “global”
}
mia_funz();
echo “<br><br>”; non visualizzabile perchè l’ambito di visibilità della
echo “la variabile vista fuori dalla funzione è x= ”.$x; variabile globale non si estende all’interno della funzione,
per visualizzarla va resa global anche all’interno della
funzione

variabile locale: variabile dichiarata all’interno di uno script


php, con ambito di visibilità limitato alla funzione

static: parola chiave da precedere alla dichiarazione di una


variabile per far sì che quando viene chiamata essa
contenga ancora il valore che le era stato assegnato
dall’ultima esecuzione della funzione
$giorni = array ("lunedi","martedi", "mercoledì") ; array classico: strumento che permette di visualizzare dati
di tipo diverso, come string e integer, associati ad un
indice numerico che parte da 0(se non si scrive nulla
relativamente agli indici viene assegnato ad ogni elemento
dell’array un indice numerico in modo automatico)

$giorni = array (1=>"lunedì", 2=>"martedì", array associativo: strumento che permette di visualizzare
3=>"mercoledì") dati di tipo diverso, come string e integer, associati ad un
indice a scelta numero o stringa, che parte da un indice
scelto, da specificare
$giorni = array (“day1”=>"lunedì", “day2”=>"martedì",
“day3”=>"mercoledì") indice=key

struttura iterativa che fintantoché nell'array $giorni trova


foreach($giorni as $chiave => $valore) una chiave $chiave a cui è associato un valore $valore,
{ esegu le istruzioni racchiuse tra parentesi graffe
echo $chiave.“: ”.$valore.“<br>”;
ogni valore è associato ad una chiave
}
=>: operatore che stabilisce la relazione tra chiave e
valore e è permette al ciclo di non confondersi
sort($giorni);
print_r($giorni); ordina gli array classici in ordine crescente

rsort($giorni);
ordina gli array classici, in ordine decrescente dei valori;
print_r($giorni);

asort($giorni);
print_r($giorni); ordina l'array per valori: rimescola quindi le lettere così che
siano in ordine alfabetico

visualizza a schermo il contenuto di un array,


semplicemente passandone il nome come argomento alla
funzione;

foreach(range(0,100,10) as $decine) range: funzione che si usa se si vuole creare un array i cui
elementi formano una sequenza con intervalli regolari, es:
{
tabellina del 10
echo $decine.” ”;
} 0: valore di partenza
100: valore finale
10: frequenza dell’intervallo

restituisce la dimensione di un array, contando il numero


$numero_elementi = count($giorni); dei suoi elementi, ed è utile per «ciclare» gli array
echo "Numero di elementi nell'array giorni: " . indicizzati
$numero_elementi; numericamente
opera in modo analogo, ma per ogni elemento visualizza
anche il tipo di dato, oltre al valore.
$misto = array ("Isabella”, 17, 1.65, true)
var_dump($giorni).“<br>”;

ordina gli array associativi, in base ai valori degli elementi,


in ordine crescente
ordina gli array associativi in base ai valori degli elementi,
in ordine decrescente
asort($giorni);
ordina gli array associativi in base alle chiavi degli
print_r($giorni); elementi, in ordine crescente
arsort($giorni); ordina gli array associativi in base alle chiavi degli
print_r($giorni); elementi, in ordine decrescente
ksort($giorni);
print_r($giorni);
krsort($giorni);
print_r($giorni);

criterio di accessibilità

metodo getter per accedere all’età private


class persona
{
public $nome = "";
private $anni= "17";
public function getAnni() metodo setter per accedere all’età private
{
return $this->anni." ";
}
dichiarazione di un oggetto
public function setAnni($nuovo) inizializzazioni attributi dell’oggetto
{
$this->anni = $nuovo;}
}
$studente1 = new persona; variabile automatica o superglobale: variabile predefinita a
$studente1->nome="Anna"; cui si può accedere dall’interno dello script, incluse le
funzioni, consente di memorizzare informazioni utili ai
echo $studente1->nome." ha
creatori di siti web a personalizzare i contenuti delle
".$studente1->getAnni()."anni<br><br>"; pagine web:
- sui file in esecuzione
echo $_SERVER['PHP_SELF']; - sulla sessione internet
echo "<br>"."<br>"; - sulla trasmissione di dati tra client e server
in particolare questa è un array associativo di variabili, in
cui tra [‘ ’] sono specificate le sue chiavi

'PHP_SELF': chiave che contiene il nome e la posizione


del file in esecuzione
'HTTP_HOST': chiave che contiene il nome del server host
che esegue lo script
'HTTP_USER_AGENT': chiave che contiene il sistema
operativo e il browser del client
'SERVER_PORT':chiave che contiene la porta di accesso
al server
echo $_SERVER['HTTP_HOST']; 'SERVER_SIGNATURE': chiave che contiene il software
echo "<br>"."<br>"; utilizzato dal server
echo $_SERVER['HTTP_USER_AGENT']; 'SERVER_PROTOCOL': chiave che contiene il protocollo
echo "<br>"."<br>"; di trasmissione utilizzato
'REQUEST_TIME':chiave che contiene l’istante di tempo
echo $_SERVER['SERVER_PORT']; in cui è stata inviata la richiesta
echo "<br>"."<br>"; 'HTTP_ACCEPT_LANGUAGE': chiave che contiene le
echo $_SERVER['SERVER_SIGNATURE']; lingue accettate dal client in ordine di preferenza
echo "<br>"."<br>"; substr: funzione che permette di selezionare una stringa a
echo $_SERVER['SERVER_PROTOCOL']; partire da una sottostringa, ha come parametri
echo "<br>"."<br>"; 1) stringa di partenza
2) posizione iniziale della sottostringa
echo $_SERVER['REQUEST_TIME']; 3) numero di lettere della sottostringa
echo "<br>"."<br>";
echo $_SERVER['HTTP_ACCEPT_LANGUAGE'];

substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2)

MODULO LATO CLIENT DESCRIZIONE


<div>
<center><h1>Compila il modulo</h1>
<form action="http://localhost/prove_PHP/moduli_php.php"
method="get" target="_blank"> percorso del file php
<fieldset style="display:inline"> metodo del php usato per l’invio dei dati
<p>Nome:</p><input name="nome"><br>
<p>Nazione di provenienza</p>
<select name="nazione">
<option value="Italia">Italia</option>
<option value="Spagna">Spagna</option>
<option value="Francia">Francia</option>
<option value="Germania">Germania</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Portogallo">Portogallo</option>
<option value="Inghilterra">Inghilterra</option>
<option value="Belgio">Belgio</option>
<option value="Danimarca">Danimarca</option>

</select>
<p>e-mail</p><input type="email" name="email">
<p>Password </p><input type="password" name="pwd">

<p>Lascia un commento</p><textarea name="scrivi"


cols="25" rows="10"></textarea><br><br>
</fieldset></form> </center>
</div>
</body></html>

MODULO LATO SERVER DESCRIZIONE


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LATO SERVER</title>
<style>
header{
background-color: blue;
padding: 10px;
color: white;
}
aside{
background-color: #e0e0d1;
font-size: 20px;
padding:10px;
width:500px;
}
</style>
</head>
<body >
<header>
<h1 align="center">Ecco il risultato della compilazione del
tuo modulo!</h1></header>
<aside>
<?php tag utilizzato per contenuti accessori o non centrali rispetto
echo "<br> <b>L'utente: </b>".$_GET["nome"]." al contenuto principale della pagina
".$_GET["cognome"]." <br><b>E' nato in data: $_GET: variabile superglobale, quindi un array associativo
</b>".$_GET["datanascita"]; in cui la chiave identifica il dato trasmesso al server,
echo "<br><b>Maggiorenne: </b>".$_GET["anni"]; alternativa: POST
echo "<br> <b>Proviene dal/dall': </b>".$_GET["nazione"];
echo "<br> <b>Ecco la sua e-mail: </b> ".$_GET["email"];
echo "<br><b> Ecco la sua password:</b>
".$_GET["pwd"];
echo "<br><b>Ecco il suo commento:
</b>".$_GET["scrivi"];
?>
</aside>
</body>
</html>

COOKIE DESCRIZIONE
<?php funzione PHP che restituisce la data e l'ora corrente
$nome = "mio_cookie"; secondo un particolare formato
$valore = "ultima visita: ".date(DATE_W3C); funzione che crea un cookie, lo invia al browser del cliente
setcookie($nome, $valore); e lo recupera, va chiamata prima dell'apertura della pagina
?> web dal client
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP e i cookie</title>
</head> isset: funzione che ha come argomento in contenuto del
<body> cookie restituito da $_COOKIE, variabile superglobale
<br> che memorizza il contenuto del cookie
<?php
if(!isset($_COOKIE[$nome]))
{echo "Cookie non settato.";}
else
{echo "Cookie settato! <br> ";
echo $_COOKIE[$nome];}
?>
</body>
</html>

INFORMAZIONE 1. materia prima che si ottiene relazionando,


interpretando e correlando in modo opportuno più
dati
2. può essere trasformata in sistemi informativi
3. Costituisce una risorsa per qualsiasi
organizzazione il cui valore effettivo è stabilito dalla
categoria in cui si può collocare

VALORE INFORMAZIONE inversamente proporzionale alla quantità di


informazioni di quel tipo disponibili, infatti, in un
grafico che mette sull’asse x la quantità di
informazione disponibile e sull’asse y il valore
dell’informazione si può notare che le informazioni
meno disponibili salgono di valore

ORDINE DI IMPORTANZA DELLE INFORMAZIONI A 1. Fonti informative primarie o dati grezzi


PARTIRE DAL BASSO 2. informazioni selezionate
3. report
4. indicazioni strategiche
FONTI INFORMATIVE PRIMARIE O DATI GREZZI informazioni più disponibili e con meno valore, che
possono essere considerate informazioni solo se
interpretate nel modo corretto

INFORMAZIONI SELEZIONATE informazioni molto disponibili, ma che hanno poco


valore

REPORT informazioni non molto disponibili con un certo valore

INDICAZIONI STRATEGICHE informazioni rare e preziose, date dall’elaborazione di


dati grezzi

SISTEMA INFORMATIVO componente di un’organizzazione che ha il compito di


gestire le informazioni

COS’E’ LA GESTIONE DELLE INFORMAZIONI 1. acquisizione


2. produzione
3. elaborazione
4. conservazione
5. distribuzione

SISTEMA INFORMATICO sottoinsieme automatizzato di un sistema informativo,


costituito dalle tecnologie informatiche e di automazione,
come le applicazioni automatiche di un elaborato
elettronico, che rendono il sistema informativo
computerizzato e più efficiente

COME GESTISCE LE INFORMAZIONI IL SISTEMA attraverso la rappresentazione codificata di un database


INFORMATICO?

COS’E’ UN DATABASE? una collezione di dati gestite da un DBMS

COS’E’ UN DBMS? sistema software che gestisce grandi masse di dati, di


ordine di gigabyte e terabyte, condivise da più applicazioni
ed utenti, e di cui ne garantisce la persistenza per cui la
loro sopravvivenza di fronte a malfunzionamenti dei
programmi

CHE REQUISITI DEVONO SODDISFARE I SERVIZI 1. attenzione ai problemi di efficienza per ottimizzare
OFFERTI DA UN DBMS? le richieste di ricerca nei dati
2. l’autenticazione e controllo degli accessi ai dati, per
garantire la persistenza, la condivisione dei dati e
la loro integrità, quindi la
non-modifica/danneggiamento dei dati
3. la disponibilità di funzionalità che permettono di
semplificare la trascrizione dei dati, lo sviluppo
delle applicazioni e l’amministrazione dei database

CHE SVANTAGGI HA UN FILE SYSTEM RISPETTO AD ● i meccanismi di condivisione sono più limitati, in
UN DBMS? particolare, il file non può essere modificato
simultaneamente da più persone
● ci potrebbero essere descrizioni errate e
inconsistenti perché l’accesso ai file condivisi
richiede che i file stessi siano descritti nel codice
sorgente della applicazioni
● non può rendere disponibili molti servizi offerti solo
dal DBMS

RIDONDANZA ripetizione dovute a copie multiple di uno stesso dato,


che costituisce un problema per più ragioni:
● spreca memoria di massa e tempo di calcolo
utilizzato per propagare le modifiche su tutte le
copie di un dato
● può generare problemi di inconsistenza delle
diverse copie di dati

ACCESSIBILITA’ DBMS le autorizzazioni all’accesso dei dati di un database


vengono associate in modo distinto a seconda del
tipo di utente e il criterio con cui si consente
l’accesso è stabilito dall’amministratore del
database

ARCHITETTURA DBMS 1. dispositivi della memoria di massa in cui sono


memorizzati i dati
2. programmi di gestione chiamati manager per
- l’immagazzinamento dei dati chiamato storage
- la memorizzazione temporanea chiamata buffer
- l’indicizzazione chiamata index
3. query manager per
- analizzare
- autorizzare
- ottimizzare
- eseguire
richieste
4. transaction manager per coordinare l’invio delle
richieste
5. concurrency manager per gestire gli accessi
concorrenti ai dati
6. logging per la protezione dai guasti

FASI DI PROGETTAZIONE DI UN DATABASE 1. CONCETTUALE: rappresentazione astratta delle


categorie dei dati in esame e delle correlazione tra
loro
2. LOGICA: progettazione strutturale di un modello
dei dati che descrive come vanno organizzati e che
vincoli devono rispettare
3. FISICA: memorizzazione di dati e strumenti
hardware e software necessari per gestirli e
renderli accessibili agli utenti

MODELLO E-R modello entity-relationship, quindi entità-associazione,


strumento usato per modellare la realtà nella fase
di progettazione concettuale dei database

ENTITY categoria/classificazione di cose che presentano


proprietà comuni e riguardo alle quali sono
disponibili dati da trattare
RELATIONSHIP ⇒ ASSOCIAZIONE Legame Tra 2 o più entità caratterizzato da una
cardinalità

CARDINALITA’ ciò che indica quanti legami possono esistere tra le


COS’E’ istanze delle 2 entità
QUANTI E QUALI TIPI ESISTONO 3
ESEMPI uno-a-uno, uno-a-molti, molti-a-molti

ATTRIBUTI descrizioni delle caratteristiche rappresentabili in forma


di dati, che possono essere assegnate a ogni
entità ed ad ogni associazione, nella
rappresentazione tabellare diventa l’intestazione di
una colonnna

CHIAVE PRIMARIA attributo che identifica univocamente ogni istanza di


un’entità

CHIAVE ESTERNA O FOREIGN KEY attributo che permette di rappresentare l’associazione


tra entità

ISTANZA esempi specifici di un entità, corrispondono al valore


che ciascun attributo di un modello razionale può
assumere, quindi al contenuto effettivo delle celle

MODELLO LOGICO DEI DATI l'astrazione logica che descrive la struttura dei dati, le
associazioni tra loro e i vincoli che devono
rispettare con lo scopo di tradurre in uno schema
logico le informazioni contenute nel modello e-r.

MAPPING processo di traduzione del modello e-r nel modello


logico-razionale

MODELLO RELAZIONALE modello logico di dati che traduce il modello e-r in


tabelle

COMPONENTI RELAZIONE 1) parte intensionale, data dallo schema del


database, che descrive la struttura di dati e
permette di interpretare i dati dell’istanza
2) parte estensionale, data dall’istanza, cieè i dati
inseriti nello schema

SCHEMA ciascuno corrisponde ad ogni entità

INTESTAZIONE COLONNA attributo

TUPLA riga istanziata della tabella, insieme degli attributi

3 LINGUAGGI ASSOCIATI AL DBMS DDL, DML, DCl

DDL linguaggio che


- definisce gli schemi logici del database
- definisce e modificare la struttura delle tabelle e i
vincoli intra-tabella, cioè interni a una tabella, e
inter-tabella, cioè tra tabelle diverse
DML linguaggio che
- permette di interrogare il database
- modificarne le istanze
- compiere operazioni semplici su singole tabelle e
per la modifica dei dati delle tabelle
- effettuare operazioni su più tabelle mediante
l'operatore JOIN.

DCL linguaggio che consente di impartire comandi


gestionali, per esempio il controllo degli accessi al
database

SQL 1) settoriale: serve solo per i database, i database, le


tabelle e le relazioni tra tabelle ma non per altro
2) non è standard, ogni sua parte ha delle regole
diverse
3) query language ⇒linguaggio strutturato per l’
interrogazione al database, per ricavare
informazioni dai dati
4) linguaggio dichiarativo, non computazionalmente
completo, manca di alcune strutture tipiche del
linguaggio
5) crea le strutture: diversamente dai linguaggi di
programmazione procedurali, cioè, non specifica la
sequenza di operazioni da compiere per ottenere il
risultato; si limita invece a descrivere il risultato
desiderato, supponendo che l'elaboratore conosca
già la sequenza di azioni da compiere per ottenerlo

MODELLO RELAZIONALE - ha l’obiettivo di rendere possibile l'indipendenza


fisica e logica dei dati
- permette all'amministratore e al progettista di
intervenire sul database - con modifiche che di
norma mirano a migliorare l'efficienza dei
programmi applicativi - senza interferire con ciò
che vede l'utente finale.

INDIPENDENZA FISICA si ha quando una riorganizzazione dei dati nei


dispositivi di memorizzazione non ha effetti
collaterali sui programmi applicativi, che
continuano a funzionare come prima, quindi
l'utente finale del database non noterà alcun
cambiamento

INDIPENDENZA LOGICA si ha quando perfino un cambiamento dello schema


logico del database (che comporterà
necessariamente anche modifiche a livello fisico)
è trasparente per l'utente, cioè non è visibile
nell'interfaccia del DBMS, che rimane immutata.

MODELLO GERARCHICO O RETICOLARE - modello fortemente influenzato da considerazioni


di natura fisica
- a differenza del modello relazionale, esiste una
vera e propria teoria relazionale che si può usare
per progettare i database, per definire i linguaggi e
per ottimizzare le richieste di informazione da parte
dell'utente.

RELAZIONE - in linguaggio informatico è sinonimo di tabella


- è un insieme di tuple
- in essa tutt le tuple sono distinte tra loro e il loro
ordinamento non è importante
- nel modello relazionale dve essere nella prima
forma normale, i domini di ogni attributo devono
essere atomici, non ulteriormente suddivisibili

NULL - simbolo speciale che denota l’assenza di un valore


nel dominio d non è un valore del dominio stesso
- dato che NULL non corrisponde ad alcun valore,
due attributi che hanno entrambi valori NULL sono
diversi
- una chiave primaria non può essere NULL perchè
ciò renderebbe inutile la tupla

VINCOLO DI INTEGRITA’ proprietà che deve essere soddidfatta dalle istanze e


rende integri i dati di una tabella

VINCOLO DI TUPLA vincolo che esprime condizioni su ciascun record di


una tabella , indipendentemente dagli altri record.
Nel caso in cui è presente, i dati della tupla non
possono essere del tutto indipendenti tra loro

VINCOLO DI DOMINIO O VINCOLO SUI VALORI - caso particolare dei vincoli sulla tupla
- vincolo che si riferisce ai valori ammissibili
- Può essere ad esempio il dominio di una colonna,
cioè i valori per cui una colonna è limitata, es, nella
colonna voti, le istanze possono assumere valori
tra 1 e 10

VINCOLO DI CHIAVE vincoli che vieta la presenza di tuple distinte in cui certi
attrbuti hanno lo stesso valore

VINCOLO REFERENZIALE
colonna che deve essere chiave primaria ID_ nomeclasse

Potrebbero piacerti anche