Programmazione Web. Javascript.

Transcript

1 Programmazione Web Javascript

2 Introduzione

3 Cos è Javascript è un linguaggio di scripting lato client, interpretato direttamente dal browser. Implementato per la prima volta in Netscape 2.0 (1995) col nome LiveScript, essenzialmente per validare i moduli di invio dati (form) A seguito di accordi commerciali con la Sun viene chiamato Javascript Lotta tra Microsoft e Netscape/Sun: VbScript e JScript vs Javascript In passato le pagine HTML con uso di javascript venivano chiamate DHTML (Dynamic HTML)

4 Cosa fa Javascript effetti particolari (menu, roll-over) aprire finestre secondarie (pop-up) controllare dei dati di form prima di essere inviati programmare azioni a tempo aggiungere effetti dinamici (drag and drop, ecc.)

5 Inserimento di Javascript nel codice Utilizzo del tag SCRIPT <script language="javascript" type="text/javascript" src="nomefile.js"> </script> language: si specifica il linguaggio di scripting (deprecato: oggi non serve specificarlo) type: specifica il tipo dello script: testo/javascript src: necessario se il codice javascript si trova esternamente in un file.

6 Posizionamento degli script Gli script possono essere: esterni (si indica nell head) <script type="text/javascript" src="doc.js"></script> interni (si indica nell'head): <script type="text/javascript"> function prova(){...} <script> inline (dentro il body): <h1>titolo h1</h1> <script type="text/javascript"> document.write('<h2>titolo h2</h2>'); </script> <h3>titolo h3</h3>

7 Regole di programmazione

8 Riassunto programmazione Variabili e assegnazioni La variabile deve iniziare con una lettera e può proseguire lettere, numeri e sottolineato. x = 5; nome = Maria ; Javascript è case sensitive. Quando abbiamo nomi composti si utilizza la notazione con sottolinea (tasso_interesse) e la camel case (tassointeresse). La dichiarazione è opzionale: var x;

9 Riassunto programmazione Punteggiatura Blocchi Ogni istruzione va terminata con un ; per separarla dalle successive Una istruzione può essere composta da più frasi, in questo caso va raggruppata dalle parentesi graffe { } Commenti Apici /* */ //......

10 Valori letterali Valori letterali numerici interi numerici decimali (con punto decimale) logici (true false) stringhe (sequenze di carattere) valore nullo (null: quando le variabili sono indefinite) caratteri speciali \\ \ \ \n \f \t esempi: x = 5; d = 10.5; indice = null; trovato = false; nome = mario ;

11 Operatori assegnamento = aritmetici + - * / % -a = -= *= /= relazionali > < >= <= ==!= logici &&! stringa + += ==!=

12 Istruzioni

13 Istruzioni condizionali - if if(espressione) istruzione o blocco di istruzioni if(espressione) istruzione o blocco di istruzioni else istruzione o blocco di istruzioni

14 Istruzioni condizionali - switch switch(espressione){ case costante1: istruzioni break; case costante2: istruzioni break;... default istruzioni }

15 Istruzioni iterattive for(inizializzazione; condizionefine; incremento) istruzione o blocco di istruzioni while(espressione) istruzione o blocco di istruzioni do istruzione o blocco di istruzioni while(espressione)

16 Eventi

17 Utilizzo degli eventi Ogni tag html può essere reso sensibile a determinati eventi (mouse, tastiera, timer impostati, ecc.) E' sufficiente inserire nel tag l'evento e specificarne le istruzioni da eseguire. es. l'evento onclick viene richiamato quando si clicca sull'elemento HTML specificato. <a href="pagina.html" onclick="javascript:alert( me ne vado )">Link</a> in questo caso il link prima di spostarsi alla pagina nuova quando ci si clicca sopra visualizza un alert standard. *javascript: è attualmente un parametro opzionale

18 Colori ed eventi L oggetto document ha due proprietà: fgcolor - bgcolor che identificano rispettivamente il colore di primo piano e quello di sfondo, e accettano un testo con i colori in esadecimale o in costante. Oltre all evento onclick possiamo utilizzare gli eventi: ondblclick - doppio click onmouseover - entrata del mouse onmouseout. - uscita del mouse

19 Esercizio eventi Creare un documento che che faccia utilizzare tutti i quattro eventi visti in precedenza. Modificare il colore di primo piano e quello di sfondo a seconda degli eventi generati.

20 Accedere agli elementi

21 Accedere agli elementi del DOM DOM: Document Object Model document.getelementbyid(id) document.getelementsbytagname(tagname) document.getelementsbyclassname(classname)

22 Accedere agli elementi del DOM elemento = document.getelementbyid(id); - oggetto unico elemento.style.color = red ; elementi = document.getelementsbyclassname(classname); - elementi[2].style.color = red ; o for(i=0;i<elementi.length;i++) elementi[i].style.color = red ; array di oggetti

23 Event handler Funzione predisposta a gestire un evento. A. Dichiarazione nell html (già visto in precedenza) <div onclick= faiquesto( ) >...</div> B. Dichiarazione nel javascript come proprietà document.getelementbyid(id).onclick = faiquesto; C. Dichiarazione come listener document.getelementbyid(id).addeventlistener( click,faiquesto);