COSA PUÒ FARE JAVASCRIPT
CAMBIARE IL CONTENUTO HTML
In questo esempio si utilizza il metodo per "trovare" l’elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento ( innerHTML ) in "Ciao da JavaScript":
document.getElementById("demo").innerHTML = "Ciao da JavaScript";
Il form di immissione
<form action="formTest.html" class="form-dati" onSubmit="return controllaDati()"> Nome:<br />
<input type="text" value="" id="nome" name="nome" /> Cognome: <br />
<input type="text" value="" id="cognome" name="cognome" /> Data di nascita: <br />
<input type="text" value="" id="giorno_nascita" name="giorno_nascita" class="giorno" placeholder="giorno" />
<select id="mese_nascita" name="mese_nascita">
<option value="0">Gennaio</option>
<option value="1">Febbraio</option>
...
</select>
<input type="text" id="anno_nascita" name="anno_nascita" value="" class="anno" placeholder="anno" />
<button type="submit" >Invia i dati</button>
</form>
IL GESTORE (HANDLER) DELL’EVENTO ONSUBMIT
<script >
function controllaDati () {
if (document.getElementById('nome').value == '' || document.getElementById('cognome').value == ''){ alert ("Dati incompleti!");
return false;
} else { return true;
}
}
</script>
MODIFICARE GLI ATTRIBUTI HTML
<div >
<img id="interruttore" src="http://www.sisteminterattivi.org/userfiles/image/off.png" onclick="cambiaImmagine ()" />
</div>
<script>
var on = "http://www.sisteminterattivi.org/userfiles/image/on.png";
var off = "http://www.sisteminterattivi.org/userfiles/image/off.png";
var myImg = document.getElementById('interruttore');
function cambiaImmagine() { if (myImg.src == on) { myImg.src = off;
} else {
myImg.src = on;
}
}
</script>
DOVE
IL TAG SCRIPT
-
Per scrivere la sintassi è sufficiente aprire il tag <SCRIPT>. Il codice JavaScript va inserito tra l'apertura e la chiusura del tag.
-
Possiamo inserire il codice JavaScript in qualsiasi parte del documento (nella head oppure nel body) a seconda delle nostre esigenze.
FILE ESTERNO
GESTIONE DIRETTA E VENTO
-
Come abbiamo detto Javascript è fatto principalmente per rispondere a degli eventi, come quello di un utente che clicca un elemento della pagina
-
Si può associare direttamente del codice javascript all'evento di un elemento usando appositi attributi come onclick, onload, ecc:
NO SCRIPT
FUNZIONI ED EVENTI
-
Una funzione JavaScript è un blocco di codice JavaScript, che può essere eseguita quando richiesto.
-
Come abbiamo visto dagli esempi di solito un programma Javascript viene eseguito in risposta ad un evento.
-
In molti casi quindi la programmazione JavaScript consisterà nello scrivere funzioni e associarle ad eventi come il click su un bottone o l’invio di un form.
-
Ed questo sarà l’argomento di tutti i nostri esercizi.
OUTPUT
SINTASSI
JAVASCRIPT È CASE SENSITIVE
-
Tutti gli identificatori JavaScript sono case sensitive.
-
Questo significa che per JavaScript le variabili Nome e nome sono due varibili diverse.
-
E che VAR o Var non sono interpretati come la parola riservata JavaScript var.
PROGRAMMI JAVASCRPT
-
Un programma per computer è un elenco di "istruzioni" che può essere "eseguito" da parte del computer.
-
In un linguaggio di programmazione, le istruzioni del programma sono chiamati statements.
Le istruzioni JavaScript (statements) sono separate da un punto e virgola . var x = 5;
var y = 6;
var z = x + y;.
- Un blocco di istruzioni racchiuso tra parentesi graffe e viene considerato nella sintassi come un’unica istruzione.
if (document.getElementById('nome').value == '' || document.getElementById('cognome').value == ''){
alert ("Dati incompleti!");
return false;
}
ISTRUZIONI JAVASCRPT
VALORI
-
La sintassi JavaScript definisce due tipi di valori: i valori fissi e valori variabili.
-
Valori fissi sono chiamati letterali o costanti . I valori delle variabili sono chiamate variabili
-
La sintassi JavaScript definisce due tipi di valori: i valori fissi e valori variabili.
-
Valori fissi sono chiamati letterali o costanti . I valori delle variabili sono chiamate variabili
VARIABILI
ITERRUTTORE
<div class=“wrapper sfondo-grigio”>
<img id="interruttore" src="http://www.sisteminterattivi.org/userfiles/image/off.png" onclick="cambiaImmagine ()" />
</div>
// GESTORE DELL’EVENTO
<script>
var myImg;
myImg = document.getElementById('interruttore');
var on = "http://www.sisteminterattivi.org/userfiles/image/on.png"; var off = "http://www.sisteminterattivi.org/userfiles/image/off.png";
function cambiaImmagine() {
if (myImg.src == on) {
myImg.src = off;
} else {
myImg.src = on;
}
}
</script>
C O SA È U N A FUN Z I ON E
-
Una funzione (o metodo) è una costrutto presente in tutti i linguaggi di programmazione che consente di associare un gruppo di comandi ad un identificatore.
-
Quando nel programma scriverò l’identificatore saranno eseguiti tutti i comandi che compongona la funzione
-
L’uso di funzioni ha due vantaggi:
-
Le funzioni sono blocchi di codice JavaScript riutilizzabili in qualsiasi punto della pagina in cui sono inserite.
-
I metodi sono semplicemente funzioni che sono associati a un oggetto.
DEFINIZIONE
ESEMPIO
-
function hello() {
alert("Ciao gente!");
}
-
Questo codice dichiara la funzione hello. Non ha parametri e non restituisce valori.
-
La funzione viene poi definita dal blocco di codice tra le due parentesi graffe. Il comando usa la funzione alert (predefinita) per lanciare un messaggio all'utente. Se scrivo:
hello();
si aprirà la piccola finestra dei messaggi con scritto ciao gente .
ESEMPIO 2
function somma(n1, n2) {
return (n1 + n2);
}
-
Questo codice dichiara la funzione somma che accetta due parametri che devono essere numeri e restituisce un numero.
-
La funzione viene poi definita dal blocco di codice tra le due parentesi graffe. Il comando fa che la funzioni ritorni la somma dei due numeri passati come parametri. Se scrivo:
var a;
a = somma(5, 7); a conterrà 12.
FUNZIONI I NCORPORATE
-
In ogni linguaggio sono incorporate numerose funzioni che consentono di eseguire determinate attività e di accedere alle informazioni.
-
JavaScript è linguaggio orientato agli oggetti. Tutte le funzioni sono incorporate negli oggetti predefiniti.
-
Le funzioni appartenenti a un oggetto sono denominate metodi.
SCRITTURA DI FUNZIONI CON NOME
function numefunzione (parametro1, parametro2, ….) {
// Blocco di istruzioni
}
-
nomefunzione è il nome univoco della funzione. Tutti i nomi di funzione in un documento devono essere univoci.
-
parametro1, parametro2, … uno o più parametri che vengono passati alla funzione. I parametri sono detti anche argomenti.
-
Blocco di istruzioni contiene tutto il codice JavascriptScript relativo alla funzione. Questa parte contiene le istruzioni che eseguono le azioni, ovvero il codice che si desidera eseguire. Il commento // Blocco di istruzioni è un segnaposto che indica dove deve essere inserito il blocco della funzione.
SCRITTURA DI FUNZIONI ANONIME
var nomevariabile = function (parametro1, parametro2, ….) {
// Blocco di istruzioni
}
PASSAGGIO DI PARAMETRI
-
Si possono passare più parametri ad una funzione separandoli con delle virgole.
-
Talvolta i parametri sono obbligatori e talvolta sono facoltativi. In una funzione potrebbero essere presenti sia parametri obbligatori che opzionali.
-
In ogni caso se si passa alla funzione un numero di parametri inferiore a quelli dichiarati, questi conterranno il valore convenzionale undefined. Questo può provocare risultati imprevisti.
RESTITUZIONE D I V ALORI
-
Una funzione può restituire un valore che di norma è il risultato dell’operazione compiuta. Per compiere questa operazione si utilizza l’istruzione return che specifica il valore che verrà restituito dalla funzione.
-
L'istruzione return ha anche l’effetto di interrompere immediatamente il codice in esecuzione nel corpo della funzione e restituire immediatamente il controllo del flusso di programma al codice chiamante.
LE STRUTTURE DI CONTROLLO
SINTASSI DELL’ISTRUZIONE I F
-
L’istruzione if può avere due forme:
-
L'espressione che compare dopo la parola chiave if deve essere di tipo logico, se la condizione risulta vera viene eseguita l'istruzione subito seguente; nel secondo caso, invece, se la condizione risulta vera si esegue l'istruzione seguente, altrimenti si esegue l'istruzione subito dopo la parola chiave else.
-
Per più scelte invece si può usare l'else if che permette di porre una condizione anche per le alternative, lasciando ovviamente la possibilità di mettere l'else (senza condizioni) in posizione finale.
RIEPILOGO
- Che cosa è una variabile e come si dichiara ?
- Definire e /o i nizializzar e una v ariab ile
- Che cosa è una funzione e come la definisco?
- Dich iarare e d efinire una f unzione
- Che regole deve rispettare il nome di una funzione o di una variabile?
- Iniziare il nome con una lettera (A-Z o a-z) l'underscore (_) o il segno del dollaro ($).
- Continuare con un numero qualsiasi di lettere, numeri, "_" 0 "$".
- Javascript è case sensitive.
- Come agisce javascript sulla tua pagina?
- A cosa serve il ";"
- Il punto e virgole è il segno che separa le istruzioni fra loro.
- Le istruzioni NON sono separate dalla fine riga.
- A cosa serve il "."?
- Il punto è l'operatore di appartenenza indica che la proprietà o il metodo che si trova alla sua destra appartiene all'oggetto che si trova alla sua sinistra.
- Gli operatori punto possono essere usati in catena.
- A cosa servono le parentesi graffe ?
- Una coppia di { } definisce un blocco di istruzioni che vengo eseguite insieme, prima di proseguire con l'esecuzione del programma.