Javascript. - Corso Web Design - Media Dream Academy. Stefano Gaborin

Transcript

1 Javascript - Corso Web Design - Media Dream Academy Stefano Gaborin [email protected]

2 Cos è Javascript? JavaScript è un linguaggio di programmazione interpretato. Utilizzato sia client-side che server-side. Viene allegato o incorporato in un documento HTML. Conferisce dinamicità alle pagine HTML (animando, modificando contenuto, effettuando controlli).

3 Javascript e HTML Viene principalmente inserito tramite Il tag <script> all interno di pagine HTML: <script>... codice JavaScript </script> Può essere richiamato da file esterni: <script src= ilmiofile.js ></script> Può essere associato ad eventi all interno di elementi HTML: <img src= img.jpg onclick=...codice JavaScript.">

4 Prima implementazione Prima implementazione javascript in pagina HTML: Hello World <!doctype html> <html> <head> <title>hello World</title> </head> <body> <script> document.writeln("hello world!"); </script> </body> </html>

5 Riferimento a file esterno Implementazione Javascript con riferimento a file esterno: <!doctype html> <html> <head> <title>hello World</title> </head> <body> <script src= js/file.js"></script> </body> </html>

6 Riferimento a file esterno Il file richiamato sarà nella directory locale js, avrà il nome di file.js ed il suo contenuto sarà: document.writeln("hello world! ); Potrebbe essere sullo stesso server con un percorso assoluto: <script src= ></script> Oppure su un server esterno o su una cdn: <script src= ></script>

7 Associazione ad eventi Javascript può essere incluso negli elementi HTML, associandolo ad un evento: Pressione di un bottone Movimento del mouse sopra un elemento Modifica campi di un form Esiste un set di eventi che possono essere associati a qualunque elemento del documento HTML tramite l uso di attributi.

8 Set eventi: attributi (1) onclick: Click sull elemento. ondblclick: Doppio click sull elemento. onmousedown: Il tasto (sinistro) del mouse viene premuto. onmouseup: Il tasto (sinistro) del mouse viene rilasciato. onmouseover: Il mouse si trova sopra l elemento. onmouseout: Il mouse si sposta da sopra l elemento.

9 Set eventi: attributi (2) onkeypress: Pressione di un tasto mentre il focus è sull elemento. onkeydown: Un tasto è premuto mentre il focus è sull elemento. onkeyup: Un tasto è rilasciato mentre il focus è sull elemento. onfocus: Si pone il focus sull elemento. onblur: Si sposta il focus su un altro elemento. onchange: L elemento viene modificato.

10 Set eventi: attributi (3) onsubmit: Si preme il bottone submit (per i form). onreset: Si preme il bottone reset (per i form). onselect: L utente seleziona il testo contenuto nell elemento. onload: Al caricamento della pagina/dell elemento. onunload: Alla chiusura della pagina. onresize: La finestra del browser viene ridimensionata.

11 Implementazione eventi Una possibile implementazione di codice javascript associato ad un evento potrebbe essere: <!doctype html> <html> <head> <title>hello world</title> </head> <body> <button onclick="alert('sono stato cliccato')">cliccami</button> </body> </html>

12 Tipi di dato Numeri: qualsiasi valore numerico. Stringhe: vengono rappresentate mediante l uso di virgolette o apici, ad esempio Hello World. Booleani: valori come TRUE e FALSE, sono considerati TRUE le stringhe non vuote e i numeri diversi da 0, sono considerati FALSE le stringhe vuote e il numero 0.

13 Operatori Operatori matematici binari: +,-,*,/ unari: -,- -,++ Operatori di stringa: + (concatenazione) Operatori di confronto: ==,!=, <,>,<=,>= Operatori logici: &&,,!

14 Variabili in javascript Una variabile, in informatica, è un insieme di dati modificabili situati in una porzione di memoria (una o più locazioni di memoria) destinata a contenere dei dati, suscettibili di modifica nel corso dell'esecuzione di un programma. Una variabile è caratterizzata da un nome (inteso solitamente come una sequenza di caratteri e cifre).

15 Variabili in javascript Per utilizzare variabili in javascript basterà definirle con la sintassi: var miaprimavariabile=1; var miasecondavariabile= Hello world ; Una volta definita la variabile possiamo iniziare ad operare con la stessa: alert(miaprimavariabile); document.writeln(miasecondavariabile);

16 Variabili in javascript Un implementazione di variabili in un codice javascript potrebbe essere il seguente: <!doctype html> <html> <head> <title>hello world</title> </head> <body> <script> var contenuto="hello World"; document.writeln(contenuto); </script> </body> </html>

17 Variabili in javascript Alcuni esempi di operazioni su variabili e relativo output: <script> var x=3; var y=2; alert(x+y+"j"); // Output 5J alert( J"+x+y); // Output J32 alert( J"+(x+y)); // Output J5 </script>

18 Comandi in javascript In javascript esistono due principali categorie di comandi: di selezione, di iterazione. Comandi di selezione: if (CONDIZIONE) { codice da eseguire } if (CONDIZIONE) { codice da eseguire } else { codice da eseguire } switch(variabile) { case a : codice da eseguire break; case b : codice da eseguire break; default: codice da eseguire break; }

19 Comandi in javascript Possibile implementazione ciclo if.. else if else: var useragent=navigator.useragent; // La funzione test ricerca una stringa usando le espressioni regolari. // Se la stringa viene trovata ritorna TRUE, altrimenti FALSE. if ( /firefox/i.test(useragent) ) { alert("browser rilevato: Firefox ); } else if ( /chrome/i.test(useragent) ) { alert("browser rilevato: Chrome"); } else if ( /safari/i.test(useragent) ) { alert("browser rilevato: Safari"); } else { alert("browser sconosciuto"); }

20 Comandi in javascript Possibile implementazione switch case: // Il metodo getday() dell'oggetto Date() restituisce i giorni della settimana come numeri da 0 a 6. switch (new Date().getDay()) { case 0: alert( Domenica ); break; case 1: alert( Lunedì ); break; case 2: alert( Martedì ); break; // }

21 Comandi in javascript Comandi di iterazione: while (CONDIZIONE) { codice da eseguire } do { codice da eseguire } while (CONDIZIONE) for ( var i=0; i < 10; i++ ) { codice da eseguire }

22 Comandi in javascript Possibili implementazioni ciclo while e do while: // Ciclo while var i=0; while (i < 10) { document.writeln("la variabile i ha valore " + i + ", ancora inferiore di 10<br>"); i++; } // Ciclo do while var i=0; do { document.writeln("la variabile i ha valore " + i + ", ancora inferiore di 10<br>"); i++; } while (i < 10);

23 Comandi in javascript Possibile implementazione ciclo for: for (i = 0; i < 5; i++) { } console.log("i ha valore: " + i);

24 Array in javascript Gli array in JavaScript sono un tipo di strutture di dati: se le variabili sono delle scatole in cui inserire i dati, gli array possono essere visti come scatole a scomparti multipli, in cui ogni scomparto ha il suo numero d ordine. Particolare tipo di variabile che ci permette di inserire molteplici dati in maniera ordinata.

25 Array in javascript Per definire un array in javascript occorre inizializzarlo: var nuovoarray = new Array(); Oppure così: var nuovoarray = []; Per definire gli elementi interni di un array: nuovoarray[0]= Elemento 1 ; nuovoarray[1]= Elemento 2 ; nuovoarray[2]= Elemento 3 ;

26 Array in javascript Per accedere ad un elemento dell array: alert(nuovoarray[1]); Per scansionare un array, quindi accedervi e ottenere tutti gli elementi è possibile mediante un ciclo di iterazione: for (var i = 0; i < nuovoarray.length; i++) { console.log(a[i]); }

27 Funzioni in javascript Le funzioni in javascript sono definite dall istruzione function. La funzione può prevedere argomenti. La funzione può prevedere il ritorno di un valore.

28 Funzioni in javascript Una possibile implementazione di una funzione, passando argomenti ed ottenere un valore di ritorno, potrebbe essere: function somma(x, y) { } var somma=x+y; return somma; alert(somma(5,2));

29 Funzioni in javascript Analogamente anche senza restituzione di valore, possiamo utilizzare le funzioni per racchiudere delle istruzioni: function controlloform() { var valoretesto=document.getelementbyid('testo').value; if ( valoretesto == "" ) { alert('attenzione: compila il campo per procedere'); return false; } }