COSA PUÒ FARE JAVASCRIPT

CAMBIARE IL CONTENUTO HTML

  • In Javascript molte istruzioni si chiamano metodi.

  • Uno dei tanti metodi HTML è getElementById () .

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>

 

  • Tradotto in linguaggio naturale funzione controllaDati risulta:

  • Se

    • il valore dell’elemento con id="nome" è uguale a nessun testo

      • o

    • il valore dell’elemento con id="nome" è uguale a nessun testo

      • Apro la finestra di alert e mando un messaggio all’utente

      • Restituisco il valore false

      • Apro la finestra di alert e mando un messaggio all’utente

      • Restituisco il valore false

  • Altrimenti
    • Restituisco il valore true
       

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

  • JavaScript può essere collocato sia nella sezione <body> che nella sezione <head> di una pagina HTML.

  • All’interno della pagina HTML lo scritto va inserito all’interno del tag <script>.

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

  • Quando si scrive codice di una certa lunghezza e/o che potrebbe essere ripetuto su più pagine

  • Quando si utilizza un libreria Javascript esistente:

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

  • All'interno del tag noscript può essere utilizzata la sintassi HTML per visualizzare messaggi

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

  • JavaScript NON ha specifiche funzioni di stampa o di visualizzazione.

  • In JavaScript l’output può avvenire:

    • Utilizzando window.alert () .

    • Scrivendo direttamente sulla pagina HTML usando document.write().

    • Scrivendo o modificando il contenuto un elemento HTML, utilizzando la propietà innerHTML .

    • Scrivendo nella console del browser, utilizzando console.log () .

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

  • Le istruzioni JavaScript (righe di comando, stataments) sono composte da:

  • Valori, operatori, espressioni, parole chiave e commenti.
     

 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

  • Prima di usare una variabile la dichiaro usando l’istruzione var.

  • Per assegnare alla variabile un valore utilizzo l’operatore di assegnazione (“=“)
     

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:

    • evitare di scrivere codice ripetitivo
    • rendere il mio programma modulare facilitando così modifiche e correzioni.

  • 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

  • Una funzione deve essere dichiarata e definita;

    • cioè vanno specificati il nome e il numero di parametri che verranno utilizzati nel corpo della funzione

    • e successivamente dovremo scrivere il corpo della funzione vera e propria.

    • all’interno del corpo della funzione potrò definire un valore di ritorno.

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

}
  • nomevaribile è il nome di una variabile.
  • parametro1, parametro2, … uno o più parametri che vengono passati alla funzione. I parametri sono detti anche argomenti.
  • Blocco di istruzioni contiene tutto il codice ActionScript relativo alla funzione. Questa parte contiene le istruzioni che eseguono le azioni, ovvero il codice che si desidera eseguire.

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

  • Le strutture di programmazione che mi consentono di prendere decisioni sono essenzialmente due:

    • condizionale: faccio una determinata cosa se una condizione risulta vera altrimenti ne faccio un'altra

    • iterativa (o loop): ripeto una determinata operazione finche una condizione risulta vera

SINTASSI DELL’ISTRUZIONE I F

  • L’istruzione if può avere due forme:

    • if ( espressione ) blocco di istruzioni

    • if ( espressione ) blocco di istruzioni else blocco di istruzioni

  • 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.