Piano triennale regionale 2016-2018 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 2016-5714/RER intitolata Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte approvata con DGR n. 1194 del 25/07/2016 e cofinanziata con risorse del Fondo sociale europeo PO 2014-2020 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
ESERCIZIO Come costruire un pulsante on/off con css e javascript
HTML <div class="foto-on-off"> <!-- L'elemento img carica un'immagine casuale da lorempixel.com --> <img src="http://lorempixel.com/1024/640" 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>
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="http://lorempixel.com/1024/640" 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>
body { background-color: #888888; color: #eeeeee; /* Contenitore di immagine e bottoni*/.foto-on-off { width: 60%; margin: 15px auto; text-align: center; CSS
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;
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(http://didattica.brunomigliaretti.com/...); /* positione iniziale dell'immgine di sfondo */ background-position = "top left"; /* dimensioni del bottone*/ width: 80px; height: 80px; /* Ombreggiatura */ box-shadow: black 0 0 20px; /* Puntatore del mouse (manina) */ cursor: pointer;
Immagine di sfondo 160px 80px
Bottone (immagine di sfondo allineata a sinistra) 80px 80px background-position: left top
Bottone (immagine di sfondo allineata a destra) 80px background-position: right top
Bottone (arrotondamento del bordo) border-radius: 50%
Bottone (alone esterno) box-shadow: black 0 0 20px
L'ISTRUZIONE IF
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 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.
BLOCCO IF If (condizione) { //comandi se condizione è vera // il programma continua qui
BLOCCO IF ELSE If (condizione) { comandi se condizione è vera else { comandi se condizione è falsa // il programma continua qui
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>
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>
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>
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>
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>
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>
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
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>
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
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>
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;
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
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
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
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
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
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
RIEPILOGO
Che cosa è una variabile e come si dichiara?
Definire e/o inizializzare una variabile var adesso; var adesso = new Date();
Che cosa è una funzione e come la definisco?
Dichiarare e definire una funzione function somma(n1, n2){ return n1 + n2; funzione con nome
A cosa serve il ";"? var nome; var oggi;
Il punto e virgole è il segno che separa le istruzioni fra loro. Le istruzioni NON sono separate dalla fine riga.
A cosa serve il "."? if (str.length < 2)
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.