Web Design III
INTRODUZIONE A JAVASCRIPT
CARLO FRINOLLI
email: carlo.frinolli@nois3.it
fb: www.facebook.com/carlo.frinolli
Variabili
Per permettervi di “storare” i dati in modo da poter essere riutilizzati in seguito, si utilizza il concetto di variabili.
var nomeVariabile;
nomeVariabile = “VALORE”; è un’operazione (attraverso l’operatore =) che assegna il valore stringa “VALORE” alla variabile nome\Variabile.
Tipizzazione
Javascript è un linguaggio di tipizzazione blanda.
Questo significa che non è rigido sul contenuto che assume una variabile, né è troppo schizzinoso.
È quindi possibile avere
var nomeVariabile = 1;
nomeVariabile = “stringa”;
nomeVariabile = -2.33;Operazioni
È sicuramente possibile effettuare operazioni matematiche più o meno complesse nella fase di assagnazione di valore alle variabili.
Il senso è chiaramente, quello di assegnare alla variabile il risultato dell’operazione stessa.
var somma = 4 + 6;
var sottrazione = 10-3;Questo principio vale anche nel caso di assegnazione di valore alle variabili con operazioni tra altre variabili.
var somma = semisomma + 6;Variabili di appoggio
Molto spesso è necessario utilizzare delle variabili di appoggio per contare le iterazioni o le volte in cui succede una certa cosa.
var anni = 26;
anni = anni + 1;che può essere abbreviato con
anni += 1;Ancora più compatto è scrivere
anni++;var++ o ++var?
L’operatore ++ ha anche la peculiarità di cambiare il valore della variabile se applicato prima o dopo di essa.
++anni; è diverso da anni++;
Ovvero: se applicato prima il valore di anni è incrementato prima della lettura della variabile. Mentre se viene applicato dopo questo succede dopo la lettura.
var anni = 26;
var anniCopia = anni++;
alert(anniCopia);invece
var anniCopia = ++anni;
alert(anniCopia);Lo stesso vale, ovviamente nel caso di --
stringhe
Come abbiamo accennato prima rispetto ai diversi tipi di dato, esiste il tipo di dato stringa.
var stringa =”questa è una stringa”;Il senso è che una variabile può assumere un valore pari alla sequenza di caratteri lunghi a piacere purché racchiuse da una coppia di apici (doppi o singoli) bilanciati.
È chiaro che è possibile usare apici per virgolettare parole o frasi, così come siamo abituati nella lingua, con l’accortezza di dover escapare gli apici stessi.
var stringa =”questa è una ‘stringa’”;
var stringa =”questa è una \”stringa\””;
var stringa =’questa è una \’stringa\’’;Operatori e stringhe
Anche per le stringhe alcuni operatori hanno un significato.
var completa = “com” + “pleta”;avrà come risultato “completa”.
Inoltre sarà possibile giustappore delle stringhe. Ad esempio:
var nome = “Mario Rossi”;
var frase = “il mio nome è “ + nome;Sommando una stringa a un numero il risultato sarà una stringa: infatti il numero sarà trasformato in una stringa.
gli array
Se vi immaginate di avere un contenitore ordinato di variabili accessibili da un etichetta o un indice di posizione non siete andati distanti dal concetto di ARRAY.
La modalità di dichiarazione di un array in js è
var casellario = [];A questo punto si possono associare dei valori a certi indici.
casellario[0] = “Primo”;
casellario[1] = “Secondo”;È anche possibile assegnare direttamente i valori degli indici
var casellario = [“Primo”, “Secondo”, “Terzo”, “Quarto”];Diversi tipi di array...
Si possono avere quindi sia array numerici, sia di stringhe che misti.
var arrayNumerico = [1,2,3,4,5,6];
var arrayStringhe = [“Primo”, “Secondo”, “Terzo”, “Quarto”];
var arrayMisto = [“Primo”, “Secondo”, “Terzo”, “Quarto”, 23];E quanto sei lungo?
Ci sono tutta una serie di casi per i quali non è possibile sapere a priori, o ricordarsi, quanti sono gli elementi storati dentro un array, ma ci è comunque necessario sapere qual è l’ultimo o quant’è la lunghezza dell’array.
Per questo esiste una proprietà intrinseca degli array
var arrayNumerico = [1,2,3,4,5,6];
var totale = arrayNumerico.length;Qual è il risultato di questa proprietà Manuel? :)
E qual è il risultato di
alert(arrayNumerico(totale));Il flusso del programma
Operatori di confronto...
Affinché si possa utilizzare compiutamente il flusso if then else, è necessario introdurre gli operatori di confronto per le condizioni.
> < = <= >= != ==sono abbastanza ovvi.
L’operatore ! ha la proprietà di essere la negazione del valore dell’espressione booleana.
If then else!
if (condizione) {
...
istruzioni
} else {
...
istruzioni
}if then else if
if (condizione) {
...
istruzioni
} else if (condizione2) {
...
istruzioni
} then {
...
istruzioni
}Funzioni queste sconosciute?
Le funzioni sono strutture sintattiche utili a riutilizzare del codice più volte all’interno di uno script senza doverlo ripetere.
function nomeFunzione() {
// qui il nostro codice
}che viene richiamata con
nomeFunzione();Le funzioni possono avere dei parametri
function nomeFunzione(par1, par2) {
alert(par1);
alert(par2);
}Metodi?
Che differenza c'è tra metodi e funzioni? In effetti non c'è nessuna differenza sostanziale, se non che un metodo è una funzione che si associa a un determinato oggetto, mentre una funzione non ha un’associazione implicita.
In aggiunta esistono alcuni metodi propri dei browser stessi per interagire con le pagine web e la navigazione
history.back();altro non è che applicare la funzione back() all’oggetto history.
JS e DOM
Dal momento che DOM sta per Document Object Model, possiamo già sapere che questo è il terreno perfetto per usare JS e manipolarlo.
Infatti tutte le interazioni dei siti web moderni (siano esse lightboxes, sliders, popup, tooltip etc.) che prevedano l’uso di JS prevedono in qualche modo la manipolazione del DOM o l’assegnazione dinamica di CSS class al codice HTML.
Selezionare elementi DOM
document.getElementById(‘nomeid’);
document.getElementByTagname(‘tagname’);analizziamo attentamente queste due righe di codice. Qual è il loro significato?
Esercizio
Individuate l’elemento del DOM della prossima slide che è selezionato qui
document.getElementById(‘content’);
WD III - JavaScript
By Carlo Frinolli
