Roma @ IED
27 Marzo 2015
La programmazione in informatica si riferisce all'insieme delle attivita' e tecniche con la quale l'uomo istruisce un computer sulle operazioni che dovra' compiere per raggiungere un determinato risultato.
I computer sono piuttosto stupidi, possono fare solo quello che l'uomo gli "ordina" di fare e gli "insegna" come fare...
e quando il programmatore (o l'utente) commette degli errori nelle istruzioni (o negli input), il computer smette di funzionare correttamente
e ancora una volta richiedera' l'intervento di un uomo
Per consentirci di esprimere piu' sinteticamente operazioni complesse, abbiamo nel tempo inventato una notevole quantita' di astrazioni
Ogni astrazione introduce le proprie regole, funzionalita' e limitazioni
Inizialmente, non esistendo i linguaggi di programmazione, i programmi venivano scritti cosi':
00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000
Attraverso gigantesce pulsantiere e schede perforate si inserivano nei computer programmi tradotti manualmente dall'uomo in lunghe sequenze di 0 e 1.
E' del programmare il compito di tradurre la serie di passi descritti nel proprio linguaggio naturale in qualcosa che possa essere interpretato da un computer:
1. Salva il numero 0 nella locazione di memoria 0. 2. Salva il numero 1 nella locazione 1. 3. Salva il valore della locazione 1 nella locazione 2. 4. Sottrai il numero 11 dal valore della locazione 2. 5. Se il valore della locazione 2 e' il numero 0, Salta all'istruzione 9. 6. Aggiungi il valore della locazione 1 alla locazione 0. 7. Aggiungi il numero 1 al valore della locazione 1. 8. Salta all'istruzione 3. 9. Stampa il valore della locazione di memoria 0.
Che e' sicuramente piu' leggibile della sequenza di 0 ed 1 ma ancora molto di basso livello...
Introducendo dei nomi al posto delle locazioni di memoria e del numero di istruzione, e utilizzando l'identazione il funzionamento del programma diventera' ancora piu' chiaro ad un altro uomo:
Set "total" to 0. Set "count" to 1. [loop] Set "compare" to "count". Subtract 11 from "compare". If "compare" is zero, continue at [end]. Add "count" to "total". Add 1 to "count". Continue at [loop]. [end] Output "total".
Lo pseudo-codice non ha delle regole vere e proprie ed i computer non sono in grado di interpretarlo, e' solo un modo per rappresentare ed organizzare le nostre intenzioni.
Per poter comunicare le istruzioni ai computer in un linguaggio simile a quelli utilizzati dall'uomo sono stati inventati i linguaggi di programmazione, come Javascript:
var total = 0, count = 1;
while (count <= 10) {
total += count;
count += 1;
}
console.log(total); // -> 55
Cosa puo' fare JavaScript in una pagina web?
Cosa puo' fare JavaScript in una pagina web?
interrogare il server (o i server) senza dover ricaricare la pagina (e.g. XHR AJAX request, Server sent event, websocket, e recentemente WebRTC)
salvare e gestire dati (e.g. gestire strutture di dati in memoria, cosi' come forme di storage persistenti come localStorage/sessionStorage o IndexedDB)
JavaScript e' un linguaggio interpretato (contrario di compilato), i linguaggi interpretati hanno il vantaggio di essere naturalmente portabili, ma molti degli errori si verificheranno solo a runtime (durante la loro esecuzione)
JavaScript e' un linguaggio dinamico (contrario di statico), i linguaggi dinamici hanno il vantaggio di essere in genere piu' sintetici e flessibili consentendoci di non specificare il tipo delle variabili (che verra' determinato a runtime), ma gli errori commessi verranno segnalati solo a runtime
All'interno dei Developer Tools abbiamo a disposizione un tool Console che costituisce la nostra interfaccia interattiva verso l'interprete JavaScript integrato nella pagina web.
Possiamo utilizzare la console JavaScript per effettuare rapidi esperimenti, verificare la nostra conoscenza del contesto in cui viene eseguito il nostro codice e fare analisi di un bug (problema/errore) in maniera interattiva.
Lo standard HTML prevede un tag script con il quale e' possibile chiedere al browser di caricare ed eseguire del codice JavaScript.
<script>...</script>
<script src="path/to/file.js"></script>
Nel nostro codice JavaScript possiamo inserire dei commenti mediante due sintassi:
// commento su una singola linea
...
/* commento
...
multilinea */
...
Le singole istruzioni possono essere delimitate dal carattere di punteggiatura "punto e virgola" (;):
// due istruzioni separate esplicitamente
istruzione01; istruzione02;
// due istruzioni separate implicitamente
istruzione01
istruzione02
Come tutti i linguaggi di programmazione, JavaScript, avra' bisogno di effettuare delle elaborazioni, tra cui ci sono sicuramente le operazioni matematiche.
Dovremo avere quindi a nostra disposizione almeno un tipo numerico: Number
> 5 + 3.0
8
> 010 // base ottale
8
> 0x0f // base esadecimale
15
> 5e-1 // notazione esponenziale
0.5
Dovendo comunicare con noi, l'applicazione avra' sicuramente la necessita' di poter manipolare del testo.
Dovremo quindi avere a disposizione un tipo di dato per le sequenze di caratteri: String
> "Hello " + "World" + "!!!"
"Hello World!!!"
Per poter rappresentare delle condizioni avremo bisogno di un tipo di dato Booleano e di poter eseguire delle operazioni booleana (AND, OR e NOT): Boolean
> true && true
true
> true || false
true
> false && true
false
> !false
true
Mediante questi tipi primitivi, spesso componendoli attraverso i tipi composti (e.g. Array ed Object), potremo:
Poter assegnare dei nomi alle variabili ci consente di comporre degli algoritmi sugli stessi e mantenere un buon livello di leggibilita'.
> var total = 0
> total
0
> var welcomeStr = "Hello"
> welcomeStr
"Hello"
> var currentEl
> currentEl
undefined
> typeof total
"number"
> typeof currentEl
"undefined"
> total = "Totale: 0"
> typeof total
"string"
Adesso che sappiamo come assegnare dei nomi ai nostri dati, possiamo utilizzare questi nomi per combinare questi dati tra loro:
> var welcomePrefixStr = "Hello ";
> var welcomeSuffixStr = "!!!";
> var userNameStr = "Luca";
> var welcomeStr = welcomePrefixStr + userNameStr +
welcomeSuffixStr;
> welcomeStr
"Hello Luca!!!"
Una cosa a cui e' necessario prestare attenzione sono le conversioni da un tipo di dato ad un altro (casting) che avverranno automaticamente combinando tipi di dato diversi:
> var totalStr = "Total: ";
> var total = 15;
> var totalLabel = totalStr + total
> totalLabel
"Total: 15"
> typeof totalLabel + total
"string"
Mediante le funzioni possiamo racchiudere e riutilizzare blocchi di istruzioni:
// dichiarazione della funzione "validateLoginForm"
function validateLoginForm() {
// codice javascript che valida il form di login
...
}
`
richiamando la funzione per nome:
// richiama la funzione "validateLoginForm"
validateLoginForm();
Come le funzioni matematiche, le funzioni JavaScript spesso accettano (o necessitano) dei parametri (dati in ingresso alla funzione) e ritornano un risultato (dato in output alla funzione)
function sum(a, b) {
return a + b;
}
var total = sum(5, 10);
creazione di un documento HTML con un tag script
aggiungere del testo alla pagina mediante la funzione document.write
<!DOCTYPE html>
<html>
<head>
<script>
document.write("OK");
</script>
</head>
<body>
</body>
</html>
chiedere all'utente di inserire il proprio nome (mediante la funzione prompt)
memorizzare il valore in una variabile
utilizzare la variabile in una composizione di strighe
scrivere la stringa risultante nel documento (mediante document.write)
chiedere all'utente di inserire il proprio nome (mediante la funzione prompt)
var name = prompt("Please enter your name",
"Luca");
concatenare il nome dell'utente all'interno di un messaggio di benvenuto
var msg = "Hello " + name + "! How are you?"
<!DOCTYPE html>
<html>
<head>
<script>
var name = prompt("Please enter your name", "Luca");
var msg = "Hello " + name + "! How are you?";
document.write(msg);
</script>
</head>
<body>
</body>
</html>
aggiungere alla stringa del messaggio di benvenuto la sintassi del tag H1
"<h1> Hello " + name + "! How are you? </h1>"
Cosa succede al nodo testo aggiunto al documento da document.write?
Creare uno script con due funzioni:
function sum(a, b) {
return a + b;
}
function readAndSumNumbers() {
var first = prompt("Insert the first number");
var second = prompt("Insert the second number");
var total = sum(parseFloat(first),
parseFloat(second));
document.write("Total: " + total);
}
<!DOCTYPE html>
<html>
<head>
<script>
function sum(a,b) {
...
}
function readAndSumNumbers() {
...
}
readAndSumNumbers()
</script>
</head>
<body>
</body>
</html>
Cosa succede se una delle due stringhe in input non fosse una stringa numerica?