Corso Web Developer Lezione 1 – Cenni su JavaScript.

Presentazione sul tema: "Corso Web Developer Lezione 1 – Cenni su JavaScript."— Transcript della presentazione:

1 Corso Web Developer Lezione 1 – Cenni su JavaScript

2 INTRODUZIONE Javascript è un linguaggio di scrittura che permette di aggiungere veri e propri programmi alle tue pagine web. Con javascript si possono creare: piccole applicazioni, come la calcolatrice o giochetti molto semplici Animazioni Convalidare i form Controllare il browser del navigatore Gestire e controllare l’apertura di nuove finestre

3 Dove inserire il codice JavaScript Siccome javascript non è HTML, devi avvertire il browser che hai aggiunto javascript a una pagina in HTML. Questo si fa usando il tag. Il browser si servirà di e per capire dove inizia e finisce la parte di javascript.

4 Esempio JavaScript La Mia Pagina Javascript alert("Benvenuto nel mio mondo!!!"); La parola alert ("attenzione") è un comando standard javascript che fa spuntare sullo schermo una casella-allarme. Il visitatore dovrà cliccare sul bottone "OK" della casella per poter procedere.

5 Il primo programma Oltre a sapere dove deve essere inserito il codice JavaScript, è importante conoscere le seguenti indicazioni: Le righe in javascript terminano sempre con punto e virgola. Metti sempre il testo tra " ". Le lettere maiuscole sono diverse dalle minuscole. Per esempio, un comando javascript si chiama onMouseOver. Scrivendo invece Onmouseover, sarebbe come se avessi scritto qwHETweriuh, perché javascript non lo capisce. L'uso non corretto delle maiuscole è probabilmente l'errore più comune per i programmatori di javascript a tutti i livelli!!

6 Il primo programma 2 La Mia Pagina Javascript Ciao!!! document.write("Benvenuto nel mio mondo!!!"); Buon divertimento... Il comando javascript document.write dice al browser che ciò che segue all'interno delle parentesi dovrà essere scritto nel documento.

7 Il primo programma 3 L'esempio di programma che hai appena visto si vedrebbe così sulla tua pagina: Benvenuto nel mio mondo!!!

8 Posizionamento degli Script Guarda questo esempio per capire dove javascript scrive il testo: La Mia Pagina Javascript Ciao!!! document.write("Benvenuto nel mio mondo!!!"); Buon divertimento... Ciao!!! Benvenuto nel mio mondo!!! Buon divertimento...

9 LETTERE MAIUSCOLE My Page myvalue=2; myvalue=5; result=myvalue+myvalue; document.write(result); My Page myvalue=2; Myvalue=5; result=myvalue+Myvalue; document.write(result); 107

10 POP UP BOXES Si possono creare tre tipi diversi di finestre che compaiono sullo schermo ("popup windows") Alert, Confirm e Prompt

11 ALERT BOX La sintassi per un' alert box ("casella di allarme") è: alert("yourtext"); L'utente dovrà cliccare su "OK" per procedere. Si usa generalmente quando si vuole essere sicuri che una certa informazione arrivi all'utente. Normalmente si tratta di avvertimenti di ogni genere. (Esempi tipici sono informazioni tecniche come "Questo sito richiede Shockwave Flash plug-in").

12 CONFIRM BOX: La sintassi per un confirm box ("casella di conferma") è: confirm("yourtext"); L'utente deve cliccare su "OK" o "Cancel" per procedere. Si usa generalmente quando si vuole che l'utente verifichi o accetti qualcosa. Esempi tipici sono la verifica dell'età, come "Confermi di avere più di 57 anni" o informazioni tecniche come "Hai un plug-in per Shockwave Flash?" - Se l'utente clicca su "OK", la casella rimanda il valore true. - Se l'utente clicca su "Cancel", la casella rimanda il valore false. if (confirm("Sei d'accordo?")) alert("Sono d'accordo") else alert ("Non sono d'accordo");

13 PROMPT BOX La sintassi per il prompt box ("casella di informazioni") è: prompt("yourtext","defaultvalue"); L'utente dovrà cliccare su "OK" o "Cancel" per procedere dopo avere inserito il testo. - Se l'utente clicca su "OK" la casella permette l'entrata. - Se l'utente clicca su "Cancel", la casella rimanderà l'informazione null. Siccome in genere viene fatto un qualche uso dell'informazione inserita nella casella, è normale immagazzinare l'input in una variabile, come ti mostra l'esempio qui sotto: username=prompt("Inserisci il tuo nome per favore","");

14 Variabili In JavaScript le variabili non sono “tipizzate” ovvero non è necessario definire il tipo di una variabile (int, char ecc..) Non è necessario dichiarare le variabili (questo può essere anche causa di errori!)

15 ASSEGNARE VALORI ALLE VARIABILI La maniera più comune di assegnare un valore a una variabile è l'uso del simbolo =. Guarda questi esempi e osserva i modi diversi per ottenere variabili contenenti sia valori sia testi. Nota in particolare l'uso delle parentesi per controllare il trattamento di formule complesse.

16 Esempi sulle variabili EsempioValore risultante a=2; a=2; a++; a=2; a--; a=2; b=a++; a=2; b=3; c=a+b; a=2; d=a+6; First="Henrik"; Last="Petersen"; Full=First+" "+Last; a=2*7; b=20/5; c=(20/5)*2; d=20/(5*2); a=2 a=3 (2+1) a=1 (2-1) b=3 (2+1) c=5 (2+3) d=8 (2+6) First=Henrik Last=Petersen Full=Henrik Petersen a=14 (2*7) b=4 (20/5) c=8 (4*2) d=2 (20/10)

17 IF & ELSE La sintassi generale per gli "if statements" (dove ad ogni opzione corrisponde un diverso comportamento) è: if (condition) {action1} else {action2}; Ancora una volta, è importante notare che if si scrive "if". L'uso delle maiuscole ("IF") causerebbe un errore.

18 Operatori di confronto OperatoreSpiegazioneEsempio ==uguale a 4==5 (falso) 5==5 (vero) 5==4 (false) !=non uguale a 4!=5 (vero) 5!=5 (falso) 5!=4 (vero) <minore di 4<5 (vero) 5<5 (falso) 5<4 (falso) >maggiore di 4>5 (falso) 5>5 (falso) 5>4 (vero) <=minore o uguale a 4<=5 (vero) 5<=5 (vero) 5<=4 (falso) >=maggiore o uguale a 4>=5 (falso) 5>=5 (vero) 5>=4 (vero)

19 E, OPPURE & NON Per completare i tuoi if statements, puoi usare i cosiddetti operatori logici. E si scrive && ed è usato quando si vuole verificare se più di una condizione è vera. Es: Se il cesto contiene uova e il cesto contiene pancetta, possiamo avere uova con pancetta. La sintassi è: if (condition && condition) {action}

20 Oppure si scrive || e viene usato quando si vuole verificare se più condizioni sono vere (|| si ottiene usando il tasto shift combinato con il tasto \ ) Es: Se il cesto contiene latte oppure il cesto contiene acqua, avremo qualcosa da bere. La sintassi è: if (condition || condition) {action}

21 Non si scrive ! ed è usato per invertire il risultato. Es: Se il cesto non contiene uova o non contiene pancetta, non possiamo avere uova con pancetta. La sintassi è: if (!(condition)) {action}

22 FUNZIONI Invece di inserire javascript nella tua pagina in modo che il browser svolga i compiti assegnati dal programma, potresti avere bisogno di usare javascript soltanto in occasioni particolari. Per esempio, se componi un codice javascript per cambiare il colore di fondo della pagina quando l'utente clicca su un certo bottone, è necessario informare il browser che il programma non dovrà partire subito dopo essere stato caricato. Per impedire al browser di far partire un programma appena caricato, bisogna scrivere il programma come una funzione. Se javascript viene scritto sotto forma di funzioni, gli ordini verranno eseguiti soltanto dopo una specifica richiesta. In questo modo si ottiene il controllo completo della determinazione dei tempi.

23 Esempio con funzione function myfunction() { alert("Benvenuto nel mio mondo!!"); }

24 Vedi l’esempio… Esempi\Benvenuto.html

25 La sintassi generale di una funzione è: function functionname(variable1, variable2,..., variableX) { // Qui vanno le righe di javascript per la funzione }

26 EVENTI Gli eventi sono delle azioni che possono essere identificate da javascript. Un esempio potrebbe essere l'evento onMouseOver, che viene messo in atto quando l'utente fa scorrere il mouse su un oggetto. Un altro evento è onLoad, che viene messo in atto appena la pagina è stata completamente caricata. Normalmente gli eventi sono usati in combinazione con le funzioni, in modo che la funzione possa partire solo al momento in cui si verifica l'evento.

27 Ecco una lista dei più importanti eventi riconosciuti da javascript: EventoSi verifica quando tag HTML onFocus=""Il form field è messo a fuocoselect, text, textarea onBlur=""Il form field perde fuocoselect, text, textarea onChange=""Il contenuto di un field cambiaselect, text, textarea onSelect=""Un testo è selezionatotext, textarea onMouseOver=""Il mouse scorre su un linkA onMouseOut=""Il mouse scorre al di fuori di un linkA onClick=""Il mouse clicca su un oggetto A, button, checkbox, radio, reset, submit onLoad=""La pagina è completamente caricatabody, frameset onUnload="" Il browser apre un nuovo documento body, frameset onSubmit=""Il bottone di invio viene cliccatoform

28 Cicli Ci sono due tipi diversi di loop: for e while. Il loop for si usa quando si sa già quante volte il programma dovrà ripetere una certa operazione. Il loop while si usa quando si vuole che questo continui ad operare finché una certa condizione risulterà soddisfatta.

29 LOOP FOR SINTASSI: for (variable=startvalue; variable<=endvalue; variable=variable+incrementfactor) { // Inserisci qui la riga di programma destinata al loop. } Inserisci un variable name ("nome di variabile") dove dice variable. Inserisci il valore di partenza del loop dove dice startvalue. Inserisci il valore finale del loop dove dice endvalue. Inserisci il fattore che ogni loop deve incrementare dove dice incrementfactor. Nota: L'incrementfactor può anche essere negativo, se si vuole. Inoltre il segno, == o altro.

30 Esempio FOR Celsius-Fahrenheit Converter CELSIUS FAHRENHEIT for (celsius=0; celsius "+celsius+" " +((celsius*9/5)+32)+" "); }

31 Il risultato…Esempi\Celsius.htmlEsempi\Celsius.html

32 LOOP WHILE: SINTASSI: while (variable<=endvalue) { // Inserisci qui la riga di programma destinata al loop. } Inserisci un variable name ("nome di variabile") dove dice variable. Inserisci il valore finale del loop dove diceendvalue. Nota: Il segno, == o altro.

33 Esempio While Celsius-Fahrenheit converter CELSIUS FAHRENHEIT celsius=0; while (celsius "+celsius+ " "+((celsius*9/5)+32)+" "); celsius=celsius+1; }

34 BREAK & CONTINUE Esistono due comandi speciali che si possono usare nei loop: break e continue. break semplicemente interrompe il loop e continua con ciò che segue il loop. Per esempio si potrebbe avere un loop in grado di calcolare la radice quadrata dei numeri decrescenti a partire da 50. Siccome il calcolo della radice quadrata di numeri negativi è un'operazione matematica non consentita, sarebbe opportuno interrompere il loop nel momento in cui la radice quadrata di zero sarà stata calcolata. Per fare questo bisognerà inserire all'interno del loop: if (value==0) {break};

35 continue continue interrompe il loop in corso e continua con il valore seguente. Per esempio si potrebbe avere un loop in grado di dividere un certo valore per un fattore di numeri compresi tra -50 e +50. Siccome la divisione per zero è un'operazione matematica non consentita, ecco come sarebbe il loop: for (value=-50; value "); }

36 Un po’ di cose interessanti Dopo aver visto gli aspetti fondamentali di javascript vediamo ora qualche esempio….

37 Bottoni animati Sistemiamo il bottone sulla pagina come una qualsiasi altra immagine su una pagina web. Poi aggiungiamo un evento onMouseOver all'immagine. L'evento farà partire una funzione javascript che, quando il mouse passerà sul bottone, sostituirà l'immagine iniziale con una seconda immagine. Infine aggiungiamo all'immagine anche un evento onMouseOut. Questo evento farà partire una funzione javascript che ripristinerà l'immagine iniziale quando l'utente allontanerà il mouse dal bottone.

38 IL CODICE HTML Un'immagine regolare funzionante come un bottone-link appare in questa maniera nel codice HTML:

39 Dare un nome agli oggetti Per rendere possibile a javascript di cambiare l'immagine, dobbiamo darle un nome che verrà utilizzato da javascript come riferimento. Nel nostro caso, ecco come apparirà l'HTML: Ora il bottone ha un nome che sarà usato come riferimento quando vorremo che javascript lo sostituisca con un'altra immagine.

40 Gli eventi Ora il bottone ha un nome che sarà usato come riferimento quando vorremo che javascript lo sostituisca con un'altra immagine. Dobbiamo dire al browser che dovrà eseguire una funzione in grado di sostiutire l'immagine, quando il mouse verrà fatto scorrere sull'immagine. Questo si ottiene con l' evento onmouseOver. In più dobbiamo anche dire al browser che quando il mouse viene fatto scorrere fuori dall'area del bottone, entrerà in gioco un altro javascript per ripristinare l'immagine iniziale. Questo si ottiene con l'evento onmouseOut.

41 La pagina WEB

42 Il codice completo HTML sarà dunque: Questo è tutto quello che c'è da fare per quanto riguarda la parte HTML della pagina. Il resto viene fatto con javascript. Nota: Gli eventi-mouse si aggiungono al tag - NON al tag image. Questo perché i browser non cercano eventi di tipo mouseover sulle immagini. Anche se sembra stupido, è vero. Perciò si possono animare le immagini soltanto quando queste funzionano come links. Siccome i browser accettano gli eventi mouseover soltanto sui link, registreranno un evento riguardante il mouse su un'immagine, se l'immagine è un link.

43 IL CODICE JAVASCRIPT // Assumendo che l'immagine del "bottone su" si chiami "button_ok.gif" // E che l'immagine del "bottone giù" si chiami "button_cancel.gif“ // Possiamo leggere queste due immagini come variabili chiamate button1up e button1down. button1up = new Image; button1up.src = "button_ok.gif"; button1down = new Image; button1down.src = "button_cancel.gif"; // Ora le due immagini sono definite // Il passo successivo riguarda le due funzioni che occorrono. // La prima funzione si chiama MouseOverRoutine, // e fa passare da button1up a button1down. function MouseOverRoutine(ButtonName) { if (ButtonName=="button1") {document.button1.src = button1down.src;} } // Ora il nostro bottone passerà da button1up a button1down // quando si presenterà un evento mouseover. // Per completare il programma dovremo soltanto inserire la funzione inversa, che farà // l'esatto contrario quando si presentrerà un evento mouseout. function MouseOutRoutine(ButtonName) { if (ButtonName=="button1") {document.button1.src = button1up.src;} }

44 Esempi\BottoneAnimato.html

45 Lavorare con i FORM Javascript può essere utilizzato anche per la convalida dei FORM o per interagire con essi. Immaginiamo di voler fare un semplice form che dato il prezzo di un prodotto, la percentuale di IVA da applicare sappia calcolare l’ammontare del IVA ed il prezzo dell’oggetto.

46 Struttura della pagina HTML

47 Il codice del FORM Costo dell'oggetto: IVA Totale IVA Netto

48 Il codice JAVASCRIPT function calcola() { document.listino.tiva.value=document.listino.costo.value*document. listino.iva.value/100; document.listino.netto.value=parseInt(document.listino.tiva.value) +parseInt(document.listino.costo.value); } Esempi\Form.html parseint() serve per la conversione di una stringa nel suo corrispettivo numerico

49 Modifica delle proprietà della pagina JavaScript può essere utilizzato anche per modificare o leggere le proprietà di una pagina. Ad esempio è possibile modificare il colore di sfondo di una pagina dal codice Javascript. Costruiamo una pagina con due pulsanti uno per cambiare lo sfondo in rosso ed uno in blu.

50 Struttura della pagina HTML

51 Il codice HTML

52 Il codice JavaScript function CambiaColore(colore) { if(colore == 1) { document.bgColor = '#FF0000'; } else document.bgColor = '#0000FF'; }

53 Il Risultato… Esempi\CambiaSfondoRB.html Un po’ più complesso…. Esempi\sfumatura.htm

54 JavaScript e Multimedia Con JavaScript è possibile comandare anche degli oggetti multimediali, ad esempio far partire o fermare l’esecuzione di un video o di un brano musicale. In questo esempio vedremo come riprodurre o arrestare un file musicale.

55 La pagina WEB

56 Il codice HTML

57 Il codice JavaScript function playSound() { document.suono.play(); } function stopSound() { document.suono.stop(); } Esempi\suono.htm

58 Corso Web Developer Lezione 1 – Fine