Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte

Transcript

1 Piano triennale regionale Rete Politecnica PO FSE 2014/2020 Regione Emilia Romagna - Obiettivo Tematico 10 - Asse III Istruzione e formazione Priorità di Investimento 10.4 Obiettivo specifico 10 Operazione Rif. PA /RER intitolata Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte approvata con DGR n del 25/07/2016 e cofinanziata con risorse del Fondo sociale europeo PO e della Regione Emilia-Romagna Soggetto attuatore titolare: SIDA GROUP S.R.L. Anno di produzione: 2016/2017 Unità formativa n. 10 Principali linguaggi per creare applicativi web e progettazione e sviluppo siti web Lezioni del 21/03/2017 Docente: Bruno Migliaretti

2 ESERCIZIO Come costruire un pulsante on/off con css e javascript

3 HTML <div class="foto-on-off"> <!-- L'elemento img carica un'immagine casuale da lorempixel.com --> <img src=" id="myimage"> <!-- L'evento onclick del bottone fa eseguire la funzione spegniaccendi a cui viene passato come parametro this parola riservata che indica l'elemento colpito dall'evento --> <button onclick="spegniaccendi(this)" title="on/off"></button> </div>

4 HTML Quando l'utente fa click con il mouse sul bottone viene richiamata <div class="foto-on-off"> <!-- L'elemento img la funzione carica spegniaccendi. un'immagine casuale La funzione da lorempixel.com spegniaccendi --> <img src=" elabora l'elemento html che viene passato id="myimage"> come parametro. this <!-- L'evento onclickindica del l'elemento bottone che riceve l'evento (il click). fa eseguire la funzione spegniaccendi a cui viene passato come parametro this parola riservata che indica l'elemento colpito dall'evento --> <button onclick="spegniaccendi(this)" title="on/off"></button> </div>

5 body { background-color: #888888; color: #eeeeee; /* Contenitore di immagine e bottoni*/.foto-on-off { width: 60%; margin: 15px auto; text-align: center; CSS

6 CSS /* stilizzazione dell'immagine */.foto-on-off img{ /* l'immagine è sempre all'interno dell'elemento che la contiene*/ max-width: 100%; height: auto; /* Stato iniziale (completamente trasparente) */ opacity: 0; /* Se l'immagine è più stretta del contenitore viene collocata al centro*/ margin: 0 auto 15px; display: block; /* Il cambio di proprietà genera una transizione di due secondi */ transition: all 2s;

7 CSS.foto-on-off button { /* Il bottone non ha né bordo né colore di sfondo e un margine a destra */ border: 0; background-color: transparent; margin-right: 10px; /* bordo circolare */ border-radius: 50%; /* immagine di sfondo che contiene i due stati del bottone */ background-image: url( /* positione iniziale dell'immgine di sfondo */ background-position = "top left"; /* dimensioni del bottone*/ width: 80px; height: 80px; /* Ombreggiatura */ box-shadow: black px; /* Puntatore del mouse (manina) */ cursor: pointer;

8 Immagine di sfondo 160px 80px

9 Bottone (immagine di sfondo allineata a sinistra) 80px 80px background-position: left top

10 Bottone (immagine di sfondo allineata a destra) 80px background-position: right top

11 Bottone (arrotondamento del bordo) border-radius: 50%

12 Bottone (alone esterno) box-shadow: black px

13 L'ISTRUZIONE IF

14 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

15 SINTASSI DELL ISTRUZIONE IF 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.

16 BLOCCO IF If (condizione) { //comandi se condizione è vera // il programma continua qui

17 BLOCCO IF ELSE If (condizione) { comandi se condizione è vera else { comandi se condizione è falsa // il programma continua qui

18 SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

19 Dichiaro la funzione spegniaccendi SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

20 Direttiva function SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

21 Nome della funzione SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

22 Parametro (variabile che contiene in questo caso un elemento HTML) su cui la funzione compie la sua elaborazione SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

23 Parentesi tonde che seguono SEMPRE il nome della funzione sia che includano dei parametri che no SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

24 Parentesi graffe che racchiudono lo script che viene eseguito quando la funzione viene richiamata SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script> Parentesi graffe che racchiudono lo script che viene eseguito quando la funzione viene richiamata

25 Se la condizione compresa tra le SCRIPT parentesi tonde è vera vengono eseguiti i comandi compresi tra le parentesi graffe che seguono l'istruzione if <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

26 SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante falsa vengono acceso) eseguiti i comandi compresi le if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script> Se la condizione compresa tra le parentesi tonde è parentesi graffe che seguono else

27 La funzione elabora l'elemento contenuto nella variabile btn che viene passata come parametro SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1; </script>

28 SCRIPT <script> // Spegne/accende l'immagine function spegniaccendi(btn) { // Se il backgrounde del bottone è allineato a destra // (pulsante acceso) if (btn.style.backgroundposition == "right top") { // lo allineao a sinistra (spento) btn.style.backgroundposition = "left top"; // e rendo l'immagine completamente trasparente document.getelementbyid('myimage').style.opacity = 0; // altriemnti... else { // lo allineo a destra (acceso) </script> btn.style è la propripietà che raccoglie tutti gli stili definiti per l'elemento btn btn.style.backgroundposition corrisponde alla regola di stile che definisce la posizione dell'immagine di sfondo document.getelementbyid('myimage').style è la propripietà che raccoglie tutti gli stili definiti per l'elemento document.getelementbyid('myimage') document.getelementbyid('myimage').style.opacity corrisponde alla regola di stile che definisce l'opacità dell'elemento btn.style.backgroundposition = "right top"; // e rendo l'immagine completamente opaca document.getelementbyid('myimage').style.opacity = 1;

29 LE TABELLE DI VERITÀ Le espressioni booleane (che, cioè, hanno un valore true o false) possono essere composte da più condizioni o confronti. Prendiamo questi enunciati: esco se il tempo è bello ed è caldo esco se il tempo è bello o è caldo non esco se il tempo non è bello e non è caldo non esco se il tempo non è bello o non è caldo

30 LE TABELLE DI VERITÀ esco se il tempo è bello ed è caldo enunciato 1 congiunzione enunciato 2 risultato tempo bello ed temperatura caldo esco true && true true false && true false true && false false false && fasle false

31 LE TABELLE DI VERITÀ esco se il tempo è bello o è caldo enunciato 1 congiunzione enunciato 2 risultato tempo bello o temperatura caldo esco true true true false true true true false true false fasle false

32 LE TABELLE DI VERITÀ non esco se il tempo non è bello e non è caldo enunciato 1 congiunzione enunciato 2 risultato non (tempo è bello e temperatura è caldo) non esco! (true && true) false! (true && false) false! (false && true) false! (false && false) true

33 le tabelle di verità non esco se il tempo non è bello o non è caldo enunciato 1 congiunzione enunciato 2 risultato non tempo è bello o temperatura è caldo non esco! (true true) false! (true false) true! (false true) true! (false false) true

34 gli operatori logici operazione javascript precedenza uguaglianza == 1 disuguaglianza!= 1 maggiore > 1 maggiore o uguale >= 1 minore < 1 minore o uguale <= 1 and && 2 or 2 not! 2

35 RIEPILOGO

36 Che cosa è una variabile e come si dichiara?

37 Definire e/o inizializzare una variabile var adesso; var adesso = new Date();

38 Che cosa è una funzione e come la definisco?

39 Dichiarare e definire una funzione function somma(n1, n2){ return n1 + n2; funzione con nome

40 A cosa serve il ";"? var nome; var oggi;

41 Il punto e virgole è il segno che separa le istruzioni fra loro. Le istruzioni NON sono separate dalla fine riga.

42 A cosa serve il "."? if (str.length < 2)

43 A cosa servono le parentesi graffe? {...

44 Una coppia di { definisce un blocco di istruzioni che vengo eseguite insieme, prima di proseguire con l'esecuzione del programma.