L’oggetto “window” del Javascript.

Ciao! In questa lezione andiamo a conoscere l’oggetto window. E’ l’oggetto principale utilizzato nel Javascript ed è rappresentato dall’intera “finestra” del browser. Se la finestra è composta da una pluralità di “frames” (cioè se ad esempio nel sorgente della pagina sono presenti degli <iframe>), il browser creerà un’oggetto window per la finestra e tanti altri oggetti “window ” per quanti sono i frame attivi nella pagina. L’oggetto window è ricco di proprietà e metodi, vediamo di seguito i più utilizzati!

Proprietà dell’oggetto window

  • frames – (GET) restituisce un array contenente tutti i frames presenti nella pagina;
  • innerHeight e innerWidth – (GET) restituisce l’altezza e la larghezza interna della finestra del browser;
  • lenght – (GET) restituisce il numero dei frames presenti nella finestra;
  • opener – (GET) restituisce il riferimento alla finestra madre che ha aperto la finestra corrente (se esiste);
  • outerHeight e outerWidth – (GET) restituisce l’altezza e la larghezza esterna della finestra del browser (comprende toolbar e scrollbar);
  • pageXOffset pageYOffset – (GET) restituisce il valore (in pixel) dell’eventuale scroll sull’asse orizzontale e verticale;
  • parent – (GET) restituisce il riferimento alla finestra che contiene il frame corrente;
  • self – (GET) restituisce un riferimento alla finestra corrente;
  • top – (GET) restituisce un riferimento alla finestra principale (utile in caso di frames incapsulati).

Metodi dell’oggetto window

  • alert() – mostra una finestra di avviso;
  • close() – chiude la finestra corrente;
  • confirm() – mostra una finestra di dialogo con un messaggio di richiesta conferma;
  • open() – apre una nuova finestra;
  • print() – stampa (mostra a video) il contenuto della finestra corrente;
  • prompt() – apre una finestra di dialogo dove l’utente è invitato a scrivere qualcosa in un campo testo;
  • scrollTo() – esegue uno scrolling automatico del documento verso le coordinate specificate.
  • setInterval() e clearInterval() – imposta (ed annulla) una serie di istruzioni da eseguirsi ad intervalli di tempo prestabiliti;
  • setTimeout() e clearTimeout() – imposta (ed annulla) una serie di istruzioni da eseguirsi una volta dopo un dato intervallo di tempo.

Molti metodi dell’oggetto window saranno approfonditi nel seguito del corso, all’interno di lezioni dedicate come nel caso delle finestre di dialogo (alert, confirm e prompt) e delle temporizzazioni (setInterval, clearInterval, setTimeout, clearTimeout). Nella prossima lezione, invece, andremo ad approfondire l’utilizzo del metodo open() vedendo come creare e gestire finestre a comparsa (pop-up).

L’oggetto “this” del Javascript

Nella lezione scorsa vi ho introdotto il concetto di “oggetto” del linguaggio Javascript, d’ora in poi quindi darò per scontato che con la lezione precedente voi avete ben in mente cosa questo significhi e come questo concetto debba essere gestito per poterlo padroneggiare e implementare quindi in uno script! Passando all’argomento di questa nuova lezione vi debbo introdurre una parola molto importante nella programmazione Javascript e nel  uso dei suoi oggetti nativi, la quale è il this, grazie a questo particolare identificatore, infatti, è possibile far riferimento “a se stesso”, cioè all’oggetto nativo “this” stesso del linguaggio Javascript (in inglese “this” vuol dire letteralmente “questo”!). L’utilizzo del this in Javascript differisce rispetto ad altri linguaggi orientati agli oggetti. Come detto, infatti, Javascript non conosce il concetto di classe e pertanto non è sempre facile identificare l’oggetto al quale il this si riferisce. Il problema principale, quindi, è identificare il contesto al quale il this fa riferimento! Andiamo quindi ora ad approfondire il this e il suo utilizzo nel linguaggio Javascript in modo da superare questo problema che ci viene imposto!

L’utilizzo del this in modalità inline

Ci è permesso utilizzare l’oggetto this anche all’interno di una funzione Javascript, ma in questo caso le cose si fanno più complesse. Vi faccio un esempio:

function faccioQualcosa() { alert(this.style.color); }

Fino a qui nessuno problema, finché, non viene richiamata la funzione senza che essa venga associata ad alcun oggetto, come di seguito:

<script>faccioQualcosa();</script>

Quest’ultimo codice sopra riportato produrrebbe un errore! Data la mancanza di un’associazione esplicita con un oggetto, infatti, il this si presume riferito al generico oggetto window e, pertanto, nel caso concreto finirebbe col produrre un errore.

Vi faccio di seguito un altro esempio:

document.getElementById('mioDiv').onclick = faccioQualcosa();

In questo caso la funzione, invece, produrrebbe il risultato atteso, cioè mostrerebbe all’atto del click, un alert con il valore della proprietà CSS “color” settata nell’attributo “style” dell’elemento selezionato. In questo caso, infatti, il contesto di this sarebbe lo specifico oggetto relativo all’elemento selezionato. Il contesto, infatti, sarebbe:

document.getElementById('mioDiv')

e non più il generico oggetto window.

Utilizzare this all’interno di un oggetto

Un altro ruolo importante che il this può assumere, è quello all’interno di un oggetto. Infatti nell’ottica di una programmazione orientata agli oggetti, l’oggetto this assume un significato particolare. Dentro ad un oggetto, infatti, this, come già detto all’inizio della lezione, fa riferimento all’oggetto stesso.

Dettata quest’ultima nota importante, direi che questa lezione finisce qui, spero come sempre di esservi piaciuto, e in tal caso voglio un bel mi piace all’articolo! Ma soprattutto spero che tutto sia chiaro, altrimenti non esitate a contattarmi per qualsiasi tipo di domanda o aiuto per comprendere meglio la lezione! Io vi saluto qui e vi rimando al prossimo articolo augurandovi un buon proseguimento qui su WorldTecno, ciao! 😉

Gli oggetti nativi del Javascript

Nella lezione vedremo più da vicino ciò che ho accennato nella prima lezione cioè quella introduttiva, nella quale vi ho detto che Javascript è un linguaggio orientato agli oggetti, e questo significa che allo sviluppatore è consentito creare quindi degli oggetti personalizzati, che poi come vedremo in una delle lezioni conclusive di questo corso, nelle stesse API del linguaggio Javascript sono già presenti degli oggetti nativi e che questi ultimi vengono messi a disposizione dello sviluppatore. Da quest’ultima accezione possiamo, dunque, definire un oggetto come la parola chiave che permette di richiamare una libreria incorporata nel browser, tuttavia un oggetto da solo serve a poco, per cui c’è bisogno, che su un qualsiasi oggetto dato venga applicato ad esso un metodo o una proprietà che fanno riferimento all’oggetto che invoca(richiama) uno di questi due elementi.

Introdotto questo nuovo concetto, passiamo a vedere ora la sintassi per implementare quanto detto, nonché la sintassi corretta per separare il nome di un oggetto da un metodo o da una proprietà:

oggetto.metodo(parametri)

oppure

oggetto.proprietà

Dunque si può notare che l’utilizzo del carattere punto ‘.’ (DOT NOTATION) che fa da elemento di concatenazione tra l’oggetto ed il metodo o la proprietà. I nomi dei metodi sono seguiti da parentesi tonde all’interno delle quali si “passano” dei parametri, diversi (per numero e tipo) a seconda del caso. Le proprietà, invece, restituiscono (GET) o settano (SET) dei valori propri dell’oggetto in questione.

Nelle prime lezioni di questo corso abbiamo già visto all’opera un metodo applicato ad un oggetto, più precisamente il metodo write dell’oggetto document, con la seguente sintassi:

document.write('Scrivo qualcosa...');

Vediamo ora un esempio per capire circa come funzionano le proprietà sia per recuperare un valore (GET) che per settarne uno nuovo (SET). Per mostrarvi l’esempio faccio riferimento alla proprietà href dell’oggetto location:

/* Estraggo la URL della pagina corrente /* var pagina = location.href; /* Setto una nuova URL per un redirect */ location.href = 'http://www.sito.com/nuova-pagina.html';

Gli oggetti nativi più importanti di Javascript sono:

  • window – questo oggetto rappresenta la finestra del browser; fanno parte dell’oggetto window altri due (sotto)oggetti:
    • location – questo oggetto rappresenta la URL corrente;
    • history – questo oggetto contiene la cronologia delle pagine web visitate dall’utente;
  • navigator – questo oggetto contiene una serie di informazioni riguardo al browser utilizzato dall’utente;
  • screen – questo oggetto contiene una serie di informazioni relative alla risoluzione dello schermo dell’utente;
  • document – questo oggetto fa riferimento al documento aperto nel browser o, più precisamente, al suo nodo radice; appartengono all’oggetto document tutti gli oggetti corrispondenti a ciascun sotto nodo del documento HTML; A ciascun elemento, ancora, appartengono tutti gli oggetti corrispondenti ad eventuali attributi;

Quindi come avrete capito l’oggetto document è il più complicato in quanto è strutturato in vari livelli, e quindi avremo diversi oggetti tra loro concatenati, ad esempio:

/* Accedo ad uno specifico nodo del documento HTML Ad esempio recupero tutto il suo contenuto attraverso la proprietà innerHTML */ var contenuto = document.getElementById('mioParagrafo').innerHTML; /* Accedo ad uno specifico attribito di un dato nodo HTML Ad esempio recupero il valore dell'attributo alt di un'immagine attraverso la proprietà value */ var stile = document.getElementById('miaImmagine').alt.value;

In realtà la manipolazione del DOM(Document Object Model) è assai più complicata e infatti torneremo poi più avanti su quest’altro argomento. Per il momento ci limitiamo a questi semplici esempi giusto per capire in che modo è strutturato l’oggetto document.

Altri Oggetti Javascript: Date, Math, Array, RegExp, …

Oltre agli oggetti citati prima, Javascript dispone di altri oggetti integrati nelle API(librerie) del linguaggio. Questi oggetti sono utilizzati per svolgere operazioni comuni come, ad esempio, operazioni sulle date, calcoli matematici, la creazione di vettori ed eseguire controlli tramite espressioni regolari. Date, Array, RegExp(Regular Expression – Espressioni Regolari) necessitano di un costruttore per poter essere utilizzati:

var data = new Date(); var vettore = new Array(); var re = new RegExp();

L’oggetto Math, invece, non necessità di alcun costruttore per essere utilizzato come potete vedere qui di seguito:

var n = 0.97; var i = Math.ceil(n); document.write(i);

Vedremo più approfonditamente in seguito il funzionamento di ciascuno di questi oggetti e il concetto di costruttore del linguaggio Javascript. Per quanto riguarda questa lezione sugli oggetti del Javascript direi che è tutto e vi inviato a mettere un mi piace se vi è piaciuta, inoltre vi invito a condividere i miei articoli sui vari social per permettere a WorldTecno di crescere sempre più in fretta nel web! Infine vi ricordo di contattarmi in caso qualcosa non fosse chiaro o per qualsiasi particolare informazione e curiosità, ci rivediamo al prossimo articolo ciao! 😉

Le funzioni in Javascript e la loro realizzazione

Tanti sono gli elementi chiave di un linguaggio di programmazione, ma le più importanti sono le funzioni, e quindi è arrivato il momento di vedere cosa esse siano e come si implementano in un programma, che nel nostro caso sarà scritto in linguaggio Javascript. Una funzione quindi raccoglie in se tutte le istruzioni per farsi carico di un determinato compito da risolvere all’interno di un programma. Una funzione, quindi, è una parte (relativamente) autonoma di un programma in quanto si fa carico di un compito specifico che può essere ripetuto più volte in diversi punti del programma stesso. Organizzare un programma in funzioni consente in una maggiore pulizia del codice sorgente e, soprattutto, facilita il riutilizzo del codice e, di conseguenza, consente di creare programmi più snelli e semplici di mantenere ed aggiornare. Introdotto il concetto di funzione vediamo ora la sintassi per creare una funzione nel caso del linguaggio Javascript qui di seguito:

function nomeFunzione(argomenti) { istruzioni; }

Come si può notare dal segmento di codice ho utilizzato la parola chiave function propria del linguaggio Javascript, e ho assegnato un nome alla funzione, in questo caso “nomeFunzione” e, come si può constatare, utilizziamo le parentesi tonde subito dopo per passare alla funzione eventuali argomenti (cioè dei dati che la funzione potrà utilizzare per la sua elaborazione), detti anche parametri formali della funzione. Si noti che il passaggio di argomenti è del tutto facoltativo, in mancanza il nome della funzione sarà seguito da delle parentesi vuote (non essendo possibile ometterle). Il contenuto della funzione, ovvero le istruzioni che compongono il programma, viene racchiuso tra parentesi graffe { e }. Una cosa importante è quella di non dare alle funzioni nomi che indicano parole chiave utilizzate da Javascript, ad esempio non è possibile utilizzare write() come nome di una funzione: “write”, infatti, è un metodo dell’oggetto document e creando una funzione con questo nome (o con altre parole riservate) ci verrà restituito un errore (questo perché è come se si tentasse di sovrascrivere una funzione predefinita del linguaggio Javascript).

E’ tuttavia possibile utilizzare il nome Write() oppure WRITE(), dato che javascript è un linguaggio case-sensitive, ovvero riconosce differenze tra maiuscolo e minuscolo: in questo modo l’interprete non riconoscerà la funzione Write() come nome di un metodo, ma come parola “estranea” alla sintassi Javascript e la considererà valida. Valgono, inoltre, per i nomi delle funzioni le stesse considerazioni fatte in occasione dei nomi delle variabili.

I parametri delle funzioni

Un parametro è in genere un valore soggetto a variazioni, ad esempio una stringa di testo o un numero. I parametri vengono “passati” alla funzione all’interno delle parentesi tonde che seguono al nome della funzione (parametri formali). Se sono più di uno, i parametri delle funzione devono essere separati da una virgola:

function nomeFunzione(arg1, arg2, ..., argN) {
  istruzioni;
}

Facciamo un esempio di una semplice funzione per il calcolo dell’IVA su un prezzo:

function calcolaIVA(prezzo, aliquota){
  var iva = (prezzo/100)*aliquota;
  alert(iva + ' Euro');
}

Per richiamare la funzione:

<span onclick="calcolaIVA(100,22)">clicca qui</span>

Facendo click apparirà un alert con il valore dell’IVA applicata al prezzo passato in argomento (nel nostro caso il risultato sarà “22 Euro”). Tuttavia, nelle funzioni di un linguaggio di programmazione, compreso il Javascript, si fa un ulteriore distinzione di tipo parametro funzione, è cioè si riconoscono come parametri attuali quei parametri passati ad una funzione durante la sua invocazione in un certo punto del programma (es. var c = calcoloIva(200, 22)), quest’ultimi parametri definiti sono quelli che appaiono nelle parentesi della chiamata di funzione (“invocazione”).

Infine si può parlare di due tipi di “passaggio parametri”:

  • Passaggio per valore: questo metodo consiste nel passare come parametri alla funzione invocata dei parametri come valori numerici o variabili con valore inizializzato a priori (es. calcoloIVA(100, 22) oppure var x = 100; var y = 100; somma(x, y)).
  • Passaggio per riferimento: quest’altro metodo invece consiste nel creare una corrispondenza tra i valori attuali passati nella chiamata della funzione e quelli dichiarati come parametri formali nella dichiarazione della funzione, in modo che il linguaggio gestirà in automatico i valori che la funzione dovrà elaborare e modificare nel corso dell’esecuzione del programma.

La parola chiave return

Nel mio esempio il risultato della funzione viene mostrato all’interno di una finestra di avviso. Molto spesso, in realtà, il frutto dell’elaborazione di una funzione viene restituito attraverso l’utilizzo della keyword return, viene cioè restituito sotto forma di valore di ritorno. Così facendo la funzione non si interessa del modo in cui il valore verrà eventualmente mostrato a video, ma si limita ad effettuare la sua elaborazione ed a restituirne il risultato alla routine principale. Vediamo, quindi, l’esempio del nostro calcolatore di IVA modificato:

function calcolaIVA(prezzo,aliquota){
  var iva = (prezzo/100)*aliquota;
  return iva;
}

Per ottenere lo stesso risultato di prima, quindi, avrei dovuto impostare l’alert() direttamente nell’evento onclick del tag <span> in questo modo:

<span onclick="alert(calcolaIVA(100,22))">clicca qui</span>

L’utilizzo di return è molto utile quando la funzione viene utilizzata in diversi punti del programma ed il suo risultato viene manipolato in modi differenti. Utilizzando return, inoltre, il risultato di una funzione può essere utilizzato anche per valorizzare una variabile, come nel seguente esempio:

var tax = calcolaIVA(100,22);

Chiarito anche quest’ultimo aspetto, direi che anche la lezione di oggi sulle funzioni in Javascript finisce qua! Spero come sempre che tutto sia chiaro e che l’articolo sia di vostro gradimento! Per qualsiasi chiarimento o informazione sapete che potete contattarmi utilizzando il modulo presente nella pagina contatti di WorldTecno. Vi invito inoltre a lasciare commenti e mi piace per mostrare il vostro piacere verso WorldTecno e i miei articoli, tuttavia vi rimando al prossimo articolo e vi auguro un buon proseguimento, Ciao! 😉

 

Gli eventi del Javascript

Nella vita di tutti i giorni noi tutti eseguiamo delle azioni, le quali ovviamente sono però scatenate da un qualcosa che in modo automatico attiva nel nostro cervello un impulso che appunto viene colmato dall’esecuzione di una determinata azione. Tuttavia, questa cosa si presenta regolarmente anche nel mondo della programmazione, infatti per poter fare eseguire ad un dispositivo una qualche azione diretta ad effettuare un attività qualsiasi ad essa corrispondente, c’è bisogno di un “evento” che scateni tutto ciò! Per fare un esempio e chiarire meglio le idee, possiamo pensare che nella vita di tutti i giorni uscire con gli amici di solito genera nei vari soggetti del gruppo qualcosa di diverso ma piacevole (si spera!), beh questo accade anche nella programmazione se per esempio si pensa al click del mouse (paragonato all’uscire in compagnia) su un pulsante (paragonato ad ogni soggetto del gruppo di amici), genera un qualche cosa all’interno della finestra che si sta visualizzando (paragonato alla situazione piacevole del momento della giornata in cui il gruppo di amici esce insieme).

Sostanzialmente possiamo definire un evento Javascript come qualcosa che accade all’interno del documento HTML che è il nostro contesto. Nella maggior parte dei casi a scatenare l’evento è un comportamento dell’utente (ad esempio un click su un dato elemento della pagina) altre volte, invece, è una situazione contingente che prescinde da una qualsivoglia azione dell’utente (come ad esempio il caricamento della pagina). Tuttavia Javascript supporta moltissimi eventi che, con l’evolversi del linguaggio, sono andati via via arricchendosi. In questa lezione vedremo gli eventi principali e più utilizzati e, soprattutto, vedremo come utilizzarli al fine di indirizzare il comportamento dei nostri script.

La sintassi di un evento Javascript

Un evento si richiama direttamente all’interno dell’elemento HTML che lo riguarda, incorporando un attributo nel codice dell’elemento stesso, quella che segue è la sintassi:

<elemento attributoEvento="istruzione Javascript">

Vediamo di seguito un esempio pratico, implementando l’attributo onClick su un pulsante:

<input type="button" value="Invia" onclick="alert('Hai cliccato!')">

Dato che l’HTML non è un linguaggio case-sensitive (cioè sensibile alle maiuscole e alle minuscole) è indifferente scrivere onClick, onclick oppure ONCLICK, ma è necessario specificare i parametri (ad esempio il nome della funzione) con le giuste maiuscole e minuscole all’interno di un evento (questo perché la funzione legata all’evento è gestita da Javascript, il quale invece è case-sensitive).

Gli eventi principali di Javascript

  • Eventi del tag <body>: due eventi molto utilizzati in associazione al corpo della pagina sono onload e onunload attraverso i quali si intercetta, rispettivamente, l’apertura e la chiusura della pagina, eccone l’esempio<body onload="alert('Benvenuto!');"><body onunload="alert('Torna a trovarci!');">

Da segnalare che l’evento onload può essere efficacemente applicato anche al tag <img> per identificare il momento in cui la data immagine viene effettivamente scaricata dal browser. Altri eventi associabili al corpo della pagina sono onresize e onscroll che servono, rispettivamente, ad intercettare il ridimensionamento della finestra e lo scrolling al suo interno. Quest’ultimo evento, oltre che al tag <body>, può essere associato anche ad altri elementi della pagina come, ad esempio, un DIV con l’overflow:scroll.

  • Eventi legati al mouse: l’attività del mouse è, solitamente, uno dei fattori più rilevanti all’interno di una buona parte delle applicazioni web. Un click su un elemento o il passaggio del cursore in una determinata porzione della pagina, infatti, sono tra gli eventi più comunemente utilizzati. Vediamo i principali eventi che rientrano in questa categoria:
    • onclick – click col tasto sinistro del mouse;
    • ondblclick – doppio click col tasto sinistro del mouse;
    • oncontextmenu – click col tasto destro del mouse;
    • onmouseover – ingresso del mouse su un dato elemento;
    • onmouseout – uscita del mouse da un dato elemento;
    • onmousemove – il cursore del mouse si sta muovendo sopra un dato elemento;

Questi eventi possono essere associati ad una molteplicità di tag HTML come, ad esempio, immagini, div, paragrafi, bottoni, ecc. Vediamo di seguito alcuni esempi:

<img src="foto.jpg" onclick="alert('Hai cliccato la foto!')"> <img src="foto.jpg" ondblclick="alert('Hai fatto doppio click sulla foto!')"> <img src="foto.jpg" onmouseover="alert('Sei passato col mouse sulla foto!')"> <img src="foto.jpg" onmouseout="alert('Hai spostato il mouse fuori dalla foto!')">

  • Eventi legati alla tastiera: Un altra serie importante di eventi è scatenata dalla pressione, da parte degli utenti, dei tasti della tastiera del computer. Gli eventi rilevanti sono tre:
    • onkeypress – generica pressione di un tasto;
    • onkeydown – l’evento si scatena mentre l’utente sta premendo un tasto;
    • onkeyup – l’evento si scatena quando l’utente rilascia un tasto che ha premuto;

Vediamo un esempio:

<input type="text" onkeydown="alert('hai premuto un tasto!')">

  • Eventi legati ai form:  Una altra fitta serie di eventi Javascript è quella che riguarda i form ed i loro elementi. I due eventi che riguardano il tag <form> sono onsubmit e onreset utilizzati, rispettivamente, per intercettare l’invio ed il reset di un modulo HTML. Ecco i due esempi:

<form onsubmit="alert('Hai inviato il modulo!')">

<form onreset="alert('Hai cancellato il modulo!')">

  • Gli eventi che riguardano i singoli elementi dei form (input, textarea, select, ecc.) sono, invece, molteplici. I più utilizzati sono:
    • onfocus – l’elemento viene selezionato (e quindi attivato);
    • onblur – l’elemento perde il focus (e quindi disattivato);
    • onchange – l’elemento viene modificato nel contenuto;

Per fare un esempio: un campo input acquista il focus quando ci si clicca sopra per iniziare a scriverci dentro, viceversa lo perde quando si clicca su un altro elemento. Per quanto riguarda l’evento change questo è tipico delle selectbox, dei campi input e delle textarea e si verifica quando, a seguito dell’azione dell’utente, si ha un cambiamento del loro contenuto.

Altri eventi generali

Oltre a quelli menzionati, Javascript supporta molteplici altri eventi legati, ad esempio, al trascinamento di un elemento draggable o alla riproduzione di elementi multimediali. In questa sede, tuttavia, non ritengo opportuno affrontare tematiche ulteriori a quelle “di base” e pertanto rinvio il lettore a futuri ed ulteriori approfondimenti.

Detto ciò, direi che anche quest’altra lezione sul corso di programmazione base Javascript termina qui, mi auguro di essere stato abbastanza chiaro anche in questa lezione, per qualsiasi chiarimento o informazione generale potete contattarmi attraverso il modulo della pagina contatti, come sanno già molti utenti che mi seguono. Infine vi auguro un buon proseguimento qui su WorldTecno, io vi rimando al prossimo articolo, ciao! 😉

I due comandi break e continue di Javascript

Dopo la lezione precedente dove ho introdotto il concetto delle strutture iterative (o cicli iterativi) è importante introdurre subito di seguito i due comandi molto frequenti in un ciclo iterativo, il comando break e il comando continue.

Il comando break

Il break lo abbiamo già visto quando abbiamo analizzato la struttura di controllo switch; in realtà i suoi ambiti di impiego non si terminano li, in quanto il comando break può essere utilizzato anche all’interno di strutture iterative come, ad esempio un ciclo for(), di cui abbiamo parlato nella lezione precedente a questa. Vediamo un esempio:

var i; for (i = 0; i < 10; i++) { if (i == 3) break; document.write('Conto: ' + i); }

Come è facile intuire, il comando break ha la funzione di interrompere un ciclo in un momento arbitrario, così facendo l’interprete Javascript blocca l’esecuzione del ciclo e riprende l’interpretazione del codice a partire dalle istruzioni successive al ciclo stesso.

Il comando continue

Il continue al contrario del break, invece, serve per stoppare una singola iterazione del ciclo o, più semplicemente, per saltare un passaggio. Si supponga, ad esempio, di voler stampare a video una serie di numeri ad esclusione di uno specifico valore, come nel seguente esempio:

var i; for (i = 0; i < 10; i++) { if (i == 3) continue; document.write('Conto: ' + i); }

Infatti nell’esempio che vi ho riportato qui sopra, verranno stampati tutti i numeri dallo 0 al 9, ma verrà escluso il numero 3 e quindi il 3 sarà l’unico numero della sequenza a non essere stampato!

Attraverso il comando continue, in pratica, l’interprete Javascript “salta” una specifica iterazione passando alla successiva. Se con il comando break il ciclo terminava appena esso veniva eseguito, con il continue questo procede sino alla sua terminazione naturale.

Direi che finisce qui questa breve lezione per introdurre questi due comandi fondamentali per avere potenzialmente a disposizione più strumenti per gestire al meglio l’utilizzo e l’implementazione dei cicli iterativi in un programma, in modo da avere su di essi il pieno controllo, beh spero come al solito di essere stato abbastanza chiaro per tutti voi e di esservi stato utile nella comprensione della programmazione in linguaggio Javascript. Per qualsiasi informazione o chiarimento vi ricordo che avete a disposizione la pagina contatti, io vi saluto qui e vi rimando al prossimo articolo, Ciao! 😉

I cicli in Javascript: while, do-while e for.

Vi è mai capitato qualche volta che per qualsiasi motivo, avete dovuto ripetere una serie di azioni un determinato numero di volte o finché non avevate raggiunto lo scopo di un qualche cosa che stavate facendo? Beh io penso che capiti quasi praticamente a tutti noi nella vita di tutti i giorni, ma vedremo in questo corso che questa cosa non vale solamente nel mondo reale, ma vale anche in altri ambiti, e uno di questo è proprio quello in cui ci troviamo con questo corso, ovvero quello della programmazione! Vedremo quindi che per una serie di motivi vari, i quali li vedremo anche in altre successive lezioni oltre che questa, può nascere per un programmatore l’esigenza di dover far compiere al suo programma una serie di istruzioni un determinato numero di volte, o finché non si verifichi una particolare condizione (N.B. se non hai ancora guardato le lezioni precedenti di questo corso ti invito a farlo perché sono fondamentali per continuare da questo punto in poi, soprattutto per capire alcuni concetti come appunto il “verificarsi di una condizione all’interno di un programma”).

Bene! Fatta questa breve premesse iniziamo a mettere a fuoco questo nuovo concetto di “ripetizione di un insieme di istruzioni”, e per fare ciò abbiamo bisogno di introdurre un nuovo elemento della programmazione, le iterazioni, o detti più comunemente, cicli. Per quanto riguarda Javascript, nonché il linguaggio che stiamo trattando in questo corso, supporta diverse strutture iterative:

  • for();
  • do{ } while();
  • while();

Vediamo singolarmente queste tre strutture iterative focalizzandoci sul loro funzionamento, facendo anche degli esempi pratici di implementazione.

Il ciclo for()

Un ciclo for() serve a ripetere una serie di istruzioni un determinato numero di volte impostato all’interno delle parentesi del for() da parte del programmatore. Per definire quindi un ciclo for() si imposta all’interno delle sue parentesi:

  • Una variabile contatore a cui si assegna un valore di partenza arbitrario (solitamente 0);
  • La condizione di terminazione (e cioè un valore della variabile contatore) la quale una volta raggiunta, blocca il ciclo e lo fa terminare;
  • Uno step (dall’inglese “passo”), ovvero un istruzione di incremento o decremento (esempio: ++, –) che ad ogni ciclo del for() incrementa o decrementa la variabile contatore.

Si dice che la variabile contatore del ciclo for() non debba essere obbligatoriamente dichiarata ma che questo passaggio sia facoltativo, ma si osservi però che per le buone norme di programmazione questa cosa invece è di fondamentale importanza, sia per la leggibilità e facile comprensione del codice, ma soprattutto per evitare che in alcuni casi il nostro programma non funzioni o non venga compilato correttamente. Un esempio di utilizzo del ciclo for() è il seguente:

var i; for (i=0; i<3; i++) { /* istruzioni che verranno ripetute 3 volte */ }

Come si può vedere nel segmento di codice qui sopra riportato ho definito una variabile “i” che svolge il ruolo di contatore. All’interno delle parentesi tonde che seguono il  for ho definito il valore di partenza (i=0), la condizione che termina il ciclo (i<3) ed il nostro step (i++). In pratica for eseguirà le istruzioni contenute tra le parentesi graffe per tre volte in quanto al primo passaggio “i” avrà valore 0, al secondo 1, al terzo 2 ed a questo punto terminerà in quanto la condizione di terminazione ci dice che il ciclo dovrà continuare sino a quanto “i” è minore di 3.

Più avanti, nel proseguimento di questo corso, ritroveremo i cicli for() nella lezione dedicata agli array dove assumono un ruolo determinante nell’esplorazione del contenuto del vettore.

Il ciclo while()

A differenza di for(), il ciclo while() non prevede l’utilizzo di alcun contatore ma semplicemente l’indicazione di una condizione di terminazione: il ciclo terminerà non appena la condizione impostata si verifica. La sintassi del ciclo while() è la seguente:

while (condizione) { istruzioni; }

Vediamo ora un semplice esempio di utilizzo del while():

var i = 0; while (i < 10) { document.write('Conto: ' + i); i++; }

Per fare un esempio similitudine tra un ciclo for() e un while(), possiamo vedere che il seguente for() equivale al while() appena visto:

var i; for (i=0; i<10; i++) { document.write('Conto: ' + i); }

Nell’esempio del while(), come in for(), il ciclo è determinato da una variabile numerica, in realtà nulla vieta di impostare un ciclo while() che utilizza come condizione un altro tipo di variabile come, ad esempio, un valore booleano.

Il ciclo do{} while()

La struttura do{} while() è una variante del semplice while(). La differenza tra le due sintassi consiste nel fatto che il controllo della condizione avviene dopo l’esecuzione dell’istruzione e non prima (quindi sostanzialmente il while() viene detto “ciclo iterativo pre-condizionale” mentre il do{} while() è detto “ciclo iterativo post-condizionale” proprio per questa particolarità in cui la validazione della condizione del ciclo avviene prima nel caso del while() e dopo nel caso del do{} while(); E quindi per questo la differenza, da un punto di vista pratico, è che l’istruzione viene eseguita sempre almeno una volta nel caso del do{} while(). Questa è la sua sintassi:

do { istruzioni; } while (condizione);

Vediamo anche per il ciclo do{} while() un esempio pratico:

var i = 0; do { document.write('Conto: ' + i); i++; } while (i < 10);

Osservazione importate sui cicli iterativi

Attenzione ai loop!  In chiusura di questa altra lezione dedicata ai cicli iterativi nella programmazione in Javascript, ritengo fare un doveroso avvertimento, il quale andrebbe fatto sempre in qualsiasi linguaggio di programmazione perché riguarda strettamente l’utilizzo dei cicli iterativi in un programma e la loro implementazione all’interno di un blocco di codice: quando impostate un ciclo abbiate sempre cura di impostare con attenzione la condizione conclusiva che deve SEMPRE verificarsi. Questo è molto importante per evitare un grosso problema che si riscontra spesso nell’ambito della programmazione, infatti, se la condizione non dovesse mai verificarsi, il ciclo continuerebbe all’infinito e quindi si entrerebbe appunto in un ciclo iterativo senza un termine (il così detto loop). Da un punto di vista pratico del Javascript un loop comporterebbe un esaurimento delle risorse del client ed un blocco del browser, quindi si tratta di una situazione che non deve mai potersi verificare!

Fatta quest’ultima importante osservazione direi che questa mia lezione sui cicli iterativi del linguaggio Javascript finisce qui! Mi auguro che anche con quest’altro articolo sia stato d’aiuto per molti e vi invito a condividere i miei articoli sui social in modo da aiutare WorldTecno a crescere nel Web! Inoltre vi invito a rimanere sempre connessi e aggiornati con WorldTecno! E per qualsiasi dubbio o informazioni sapete dove contattarmi, io farò in modo di essere presente costantemente e di soddisfare ogni dubbio o richiesta! Ora vi saluto ci rivediamo al prossimo articolo ciao! 😉

JavaScript: Strutture condizionali (operatore ternario)…

 

Oltre ai costrutti ifelse ifelse e switch esiste anche una terza sintassi attraverso la quale è possibile indirizzare il flusso di un programma a seconda che una data condizione si verifichi oppure no. Questa sintassi è nota come operatore ternario e consiste nel scrivere in modo più “compatto” una struttura condizionale.

 

E’ bene precisare che questo tipo di sintassi è molto comoda ed utile se si devono affrontare condizioni semplici del tipo if – else, mentre è assolutamente meno adatta per controlli complessi ed articolati con troppi costrutti annidati (es: if – if – else if – else), anche perchè questo tipo di sintassi si scrive su una singola singola e non si può andare a capo, altrimenti viene generato un errore di sintassi.

Vediamo ora la sintassi dell’operatore ternario in Javascript:

condizione ? istruzione1; : istruzione2;

Questa sintassi può essere tradotta in questo modo: se la condizione è vera esegui l’istruzione n1, in caso contrario esegui l’istruzione n2.

Si può dire, dunque, che il simbolo del punto interrogativo (?) che viene posto dopo la condizione, equivale ad un costrutto if, mentre i i due punti (:) a quello di un else.

Scendo più nel dettaglio per farvi capire meglio, vediamo quindi un esempio pratico:

var piove = false; document.write(piove == true ? 'Fuori piove' :
'Non serve l\'ombrello'); 

Nell’esempio riportato sopra ho utilizzato una sola condizione (piove == true) ma nessuno vieta di utilizzare, anche con l’operatore ternario, delle condizioni composite, ad esempio:

var piove = false; var freddo = true;
document.write(piove == true && freddo == true ? 'Piove e fa freddo'
: 'Ho visto giornate peggiori');

Da segnalare, infine, che è possibile combinare tra loro due o più operatori ternari per gestire situazioni più complesse, ad esempio:

var piove = false; var sole = true; document.write(piove == true ? 'Fuori piove'
: (sole == true ? 'Che bella giornata!' : 'Piuttosto nuvoloso'));

In questo caso il primo operatore, cioè quello più esterno, verifica che il valore della variabile sia “piove”, mentre il secondo, il quale si attiva solo se la prima variabile ha valore false, effettua un controllo sulla seconda variabile e controlla che il suo valore sia “sole” in modo da decidere infine quale frase stampare a video.

Direi che anche questa lezione sul corso di programmazione Javascript si conclude qui, vi invito a mettere mi piace e a condividere l’articolo se vi è piaciuto, e spero come sempre di essere stato abbastanza chiaro, per concludere vi saluto e vi dò l’arrivederci al prossimo articolo, ciao e buon proseguimento! 😉

JavaScript: strutture condizionali (switch).

 

Nella precedente lezione abbiamo visto come creare una struttura condizionale utilizzando le clausole if, else if e else, in realtà questo costrutto non è l’unico tipo di struttura di controllo disponibile in JavaScript. Infatti in questa lezione, vedremo come orientare il flusso di programma attraverso l’utilizzo del costrutto switch.

Utilizzando lo switch viene presa in esame una data variabile e vengono definiti una serie di comportamenti, definiti dal comando case, a seconda che questa abbia un determinato valore. La sintassi del costrutto switch è la seguente:

switch(variabile) { 
  
  case valore1: 
    istruzioni;
    break;

  case valore2:
    istruzioni;
    break;
  
  ...
  
  case valoreN:  
    istruzioni;
    break;

  default: 
    istruzioni;
}

Come si può notare:

  • il costrutto si apre con la parola switch seguita da una parentesi tonda, al cui interno è specificata la variabile da valutare;
  • vengono poi definiti una serie di casistiche attraverso la parola case seguita dai due punti (:), e poi da un possibile valore della variabile presa in esame;
  • all’interno di ogni blocco case sono inserite delle istruzioni al termine delle quali deve essere inserito il comando break al fine di interrompere il flusso dello switch;
  • l’ultimo blocco è contraddistinto dalla parola default seguita dai due punti (:), che definisce le istruzioni da eseguire qualora nessuno dei casi si sia verificato.

Come spero avrete capito si tratta di una sintassi che, in alcune circostanze, può essere usata in alternativa al classico if.

Vediamo qui di seguito un esempio:

// creo un oggetto data
var oggi = new Date();

// individuo il mese corrente
var mese = oggi.getMonth();

switch (mese) {
  case 0:
    alert("Gennaio");
    break;
  case 1:
    alert("Febbraio");
    break;
  case 2:
    alert("Marzo");
    break;
  case 3:
    alert("Aprile");
    break;
  case 4:
    alert("Maggio");
    break;
  case 5:
    alert("Giugno");
    break;
  case 6:
    alert("Luglio");
    break;
  case 7:
    alert("Agosto");
    break;
  case 8:
    alert("Settembre");
    break;
  case 9:
    alert("Ottobre");
    break;
  case 10:
    alert("Novembre");
    break;
  case 11:
    alert("Dicembre");
    break;
}

Come è evidente, un simile risultato si sarebbe potuto raggiungere anche utilizzando una serie di if ed else if, quindi evidentemente la scelta su quale sintassi utilizzare dipende esclusivamente dalle preferenze del programmatore.

Ed eccoci arrivati infondo ad un’altra lezione del mio corso sulla programmazione JavaScript, spero che l’articolo sia come sempre di vostro gradimento e che tutto sia stato chiaro anche in questa breve lezione, in ogni caso sapete ormai come e dove potermi contattare per qualsiasi chiarimento… Vi invito a lasciare un mi piace all’articolo se vi è piaciuto, io vi lascio qui e vi auguro un buon proseguimento, ci rivediamo al prossimo articolo, ciao! 😉

JavaScript: Le strutture condizionali (if, else if e else).

 

Con la valigia di conoscenza che abbiamo riempito finora, finalmente da questa lezione in poi inizieremo a scrivere qualche programmino vero e proprio, però per poter fare ciò dobbiamo prima di tutto prendere conoscenza delle cosiddette strutture di controllo del flusso del programma dette anche semplicemente condizioni.

Come in ogni linguaggio di programmazione che si rispetti, anche in Javascript è possibile definire delle condizioni al verificarsi delle quali deve o meno accadere qualcosa. Per fare ciò ci si serve degli operatori if, else if, else i quali corrispondono alle specifiche condizionali “se”, “oppure se” e “oppure”.

La sintassi in Javascript per eseguire un’istruzione if è la seguente:

if (condizione) {
  istruzioni;
}

La condizione segue l’istruzione if e viene racchiusa tra le parentesi tonde, mentre le istruzioni da eseguire, nel caso la condizione si verifichi, vengono racchiuse tra le parentesi graffe.

Se per caso vi è una sola istruzione e questa viene scritta su una singola riga è possibile omettere le parentesi graffe come nel seguente esempio:

if (condizione) istruzione;

Inoltre possiamo dire al programma come comportarsi in caso la condizione non si verifichi attraverso l’ausilio di else:

if (condizione) {
  istruzioni;
}else{
  istruzioni;
}

Con l’utilizzo di else non c’è bisogno di specificare tra parentesi tonde la condizione, dato che il programma valuterà tutte le altre situazioni possibili, al di fuori di quella specificata nell’istruzione if. Quindi se la prima condizione if non si verifica il programma eseguirà quanto specificato nel blocco else.

Questa vista finora è una struttura condizionale molto semplice, in realtà è possibile realizzare strutture condizionali molto più complesse, attraverso l’introduzione della clausola else if che in semplici parole aggiunge N nuove possibilità, in quanto a differenza di ifelse che possono essere utilizzate una sola volta, al contrario else if la si può utilizzare molteplici volte creando così molteplici nuove possibilità, come nel seguente esempio:

if (condizione 1) {
  istruzioni;
}
else if (condizione 2) {
  istruzioni;
}
else if (condizione 3) {
  istruzioni;
}
else if (condizione N) {
  istruzioni;
}else{
  istruzioni;
}

Vediamo ora un esempio di una semplice struttura di controllo finalizzata a stampare a video un messaggio differente a seconda della risoluzione dello schermo dell’utente:

var screenwidth = screen.width;
if (screenwidth < 400) {
  document.write('Stai usando uno smartphone');    
}
if (screenwidth < 800) {
  document.write('Stai usando un tablet');    
}else{
  document.write('Stai usando un computer');    
}

In questo esempio molto banalmente si intercetta la larghezza dello schermo dell’utente e attraverso una struttura condizionale a tre blocchi facciamo apparire sullo schermo dell’utente un messaggio diverso a seconda della risoluzione dello schermo che viene utilizzato.

Di seguito vediamo invece un esempio che mostra come costruire istruzioni condizionali composite, e più precisamente vedremo come utilizzare l’operatore logico AND (&&) per creare blocchi condizionali composti da più condizioni:

// creo un oggetto data
var saluto = new Date();

// individuo l'ora corrente
var oo = saluto.getHours();

if (oo > 06 && oo <= 12) {
  document.write("Buon giorno!");
}
else if (oo > 12 && oo <= 18) {
  document.write("Buon pomeriggio!");
}
else if (oo > 18 && oo <= 22) {
  document.write("Buona sera!");
}
else {
  document.write("Buona notte!");
}

Anche qui come l’esempio precedente utilizziamo una struttura condizionale a più blocchi in modo da far apparire a schermo un messaggio differente a seconda dell’orario attuale di sistema.

Creazione di condizioni complesse

Quando si concatenano due o più condizioni è necessario stare molto attenti all’uso delle parentesi tonde, mentre se si concatenano diverse condizioni sempre col medesimo operatore l’uso di parentesi tonde non è necessario:

if (a == true && b == true && c == true) { ... }

In questo caso il blocco if si realizzerà se tutte e tre le condizioni sono vere.

Altrimenti l’uso delle parentesi diventa indispensabile, se si costruiscono condizioni complesse utilizzando una pluralità di operatori logici:

if ((a == true && b == true) || c == true) { ... }

In quest’ultimo esempio il blocco if si realizzerà solo se “a” e “b” sono true, oppure se è true solo la variabile “c”.

E con quest’ultimo accorgimento direi che finisce qui un’altra lezione sulla programmazione JavaScript, vi invito a mettere un mi piace all’articolo se è stato di vostro gradimento e per qualsiasi chiarimento ormai sapete a quale contatto trovarmi. Spero come sempre di essere stato più chiaro possibile e di esservi stato di aiuto anche con questa lezione, detto ciò vi lascio qui e vi auguro un buon proseguimento, noi ci rivediamo al prossimo articolo, ciao! 😉

The following two tabs change content below.