Corso javascript

Cos'è la programmazione?

Si tratta di un termine usato in tanti contesti differenti: informatica, economia, politica, didattica, ecc.
Più o meno la definizione è la stessa in tutti i settori.
La programmazione è un insime di azioni ordinate in base a criteri logici o cronologici, dirette alla realizzazione di un determinato obiettivo.
Il programma di storia ad es. consiste nello studio dei vari eventi rilevanti secondo un ordine prevalentemente cronologico (si studia prima ciò che è più vecchio e poi man mano si giunge agli eventi più recenti), pur non mancando criteri differenti.
Il programma politico prevede un insieme di azioni ordinate secondo criteri (ideologici, emotivi, realistici, clientelari) e dirette al miglioramento delle condizioni di vita della popolazione (o di una sua parte).

Anche lo scaldabagno ha in sè una sorta di programma. Con il suo sensore (termostato) misura la temperatura dell'acqua e, se la temperature scende sotto una determinata soglia, accende la resistenza facendo riscaldare l'acqua. Con questo lavoro, lo scaldabagno è in grado di fornire costantemente acqua calda.
Il programma della lavatrice è un po' più complesso di quello di uno scaldabagno e permette una maggiore interazione da parte dell'utente, che ha la possibilità di decidere le temperature, la durata, le fasi di lavaggio ecc.
In generale quindi possiamo definire programmazione tutte le azioni ordinate, accomunate da uno specifico scopo.

Programmazione:

azioni - logica - obiettivi

Le azioni devono avere una qualche logica ordinativa ma non è escluso che anche azioni casuali abbiano la loro logica.
La logica è il sistema di criteri che dà un senso alle azioni in relazione all'obiettivo. Le azioni non sono fatte tanto per fare ma hanno un qualche legame che le collega all'obiettivo. Non è detto però che azioni e logica siano utili e corrette per la realizzazione dello scopo e, infatti, un programma (economico, politico, didattico, informatico) può fallire.

Con la programmazione informatica, il programmatore scrive le sue azioni (nella forma di comandi o istruzioni) in un codice testuale o grafico, elaborando più o meno complesse strategie per il raggiungimento di un determinato obiettivo.
La serie di tutorial che seguono sono finalizzati a conoscere innanzitutto le azioni realizzabili (comandi e istruzioni) e a ben focalizzare gli obiettivi. La logica, invece, dipende da ciò che dobbiamo realizzare e dall'esperienza che abbiamo maturato.


Il corso è destinato a principianti per apprendere le nozioni e le strutture basilari di un linguaggio di programmazione (possibilmente valide per tutti i linguaggi):

le variabili;
i blocchi;
il comando if;
il comando for;
le funzioni;
le stringhe;
gli array;

Il corso è realizzato in javascript perchè è un linguaggio immediato (non ha bisogno di installazioni, compilatori, librerie, ecc), ha una struttura comune ai principali linguaggi in circolazione e non risulta troppo complicato.
In passato era un linguaggio snobbato in quanto, i problemi di compatibilità fra browser ne limitavano drasticamente l'utilizzo. Oggi invece, sia per il venir meno di Flash, sia per l'espansione lato server realizzata da NodeJS, sta diventando un linguaggio di programmazione sempre più diffuso e richiesto. Per programmare in javascript è sufficiente creare un file del blocco note, assegnare un nome a piacere e modificare l'estenzione da .txt a .html (per far ciò bisogna visualizzare le estenzioni dei files).
All'interno del nostro file scriviamo:

<script>
alert("ciao");
</script>

quindi salviamo (Ctrl + s) e trasciniamo il file nel browser (ad es. Chrome).
Man mano che modifichiamo (e salviamo) il codice del nostro programma possiamo osservarne il risultato premendo semplicemente sul tasto "aggiorna" del browser.
Chiariamo alcuni aspetti:
1. le parentesi che vengono aperte devono essere chiuse.
2. le parentesi si distinguono in tonde, quadre, graffe e angolari. Ciascuna ha la sua particolare applicazione (che poi vedremo meglio nel dettaglio).
3. alla fine di ogni istruzione va posto il punto e virgola salvo due particolari condizioni:
a. dopo una parentesi graffa (che chiude un blocco);
b. quando un'istruzione è contenuta in un'altra istruzione;
4. è possibile introdurre commenti attraverso due modalità:
a. // per i commenti mono-rigo;
b. /* codice */ per i commenti multi-rigo;
5. è buona norma rendere il codice più leggibile con l'uso delle tabulazioni
6. l'istruzione più comoda per visualizzare un risultato è alert("ciao"); il testo che dobbiamo scrivere è racchiuso tra virgolette. E' tuttavia possibile utilizzare delle variabili.

Variabili

Le variabili non sono altro che contenitori di dati, necessari per la costruzione e il funzionamento dei programmi. Le variabili, e quindi i dati in esse contenuti, possono subire trasformazioni nello svolgimento del programma attraverso svariate operazioni.

x = 15;
y = -17;
name = "John";
book = "Harry Potter";

Le variabili quindi hanno un nome (a sinistra del segno di uguaglianza) e un valore (a destra), che può essere dei tipi più diversi (interi, decimali, stringhe, ecc). Il segno di uguaglianza è definito di assegnazione ed è il comando che permette di "riempire" la variabile in questione di un certo contenuto.
Per quanto riguarda il nome, alle veriabili possiamo dare il nome che preferiamo con l'unico limite di non interferire con le parole chiave riservate del linguaggio, che creerebbero confusione nell'interpretazione da parte del compilatore. Al di là di tale limite, si consiglia di dare alle variabili un nome che abbia un senso nella logica del programma (evitando quindi i soliti nomi pippo, pluto e paperino).
Le variabili possono contenere diversi tipi di dato e in javascript (a differenza di altri linguaggi caratterizzati dalla cd tipizzazione rigida) non è necessario predefinire (all'atto della creazione della variabile) il tipo di dato. Una variabile quindi può contenere inizialmente un intero che durante lo svolgersi del programma si trasforma in decimale e poi in stringa.

a = 12;
b = 14.5;
a = a + b;
alert(a);

-> 26.5

La prima variabile contiene un intero e la seconda un decimale. La variabile a subisce una riassegnazione: il contenitore a riceve la somma dei valori di a e b (passando da contenitore di valore intero a decimale).

name = "John";
surname = "Smith";
comp = name+surname;
alert(comp);

-> JohnSmith

In questo caso l'operatore somma svolge, rispetto a variabili con contenuto stringa, una funzione di concatenazione. La terza variabile contiene la concatenazione della prima e della seconda stringa.

a = "James";
b = 15;
c = a + b;
alert(c);

-> James15

In questo esempio vediamo che la somma fra una stringa e un intero genera comunque una stringa. In poche parole se una variabile della somma è una stringa, anche le altre verranno trattate come tali.

a = "James";
b = 16;
c = 4;
d = b + c;
a = a + d;
alert(a);

-> James20

L'argomento variabile va completato con la questione dell'ambito di validà, che rimando ad altro momento.

Blocchi

Altro concetto fondamentale che va introdotto per la comprensione di js (e in generale di molti altri linguaggi di programmazione), è quello di blocco. Il blocco non è altro che un sottoprogramma che viene definito fra due parentesi graffe e azionato da talune specifiche istruzioni (che poi andremo a vedere nel dettaglio). Facciamo degli esempi:

<script>
function max(a, b)
{
	if(a > b)
	{
		return a;
	}
	else
	{
		return b;
	}
}

var x = max(5, -3);
alert(x);
</script>

-> 5

Si tratta di una piccola funzione (di cui parleremo specificamente in seguito) che, dati due numeri, trova il numero maggiore. Quelle parti di programma inserite fra le parentesi graffe (della funzione e degli if) sono appunto i blocchi. Per prima cosa voglio richiamare l'attenzione su alcuni aspetti fondamentali: la nidificazione e le tabulazioni. Ogni blocco segue una determinata istruzione (funzione, if o for) e può contenere altri blocchi. Nel nostro es. il blocco della funzione contiene anche due blocchi relativi alle istruzioni if. Il nostro esempio quindi contiene 3 blocchi: il blocco della funzione contiene anche gli altri due.

A
{
	B
	{
		E
		{
			F
			{
				ciao;
			}
		}
	}
	C
	{
		ciao;
	}
	D
	{
		ciao;
	}
}

In questo esempio astratto vediamo 6 blocchi (che seguono altrettante istruzioni) disposti nel seguente ordine: il blocco A comprende i blocchi B, C e D; il blocco B contiene il blocco E; il blocco E contiene il blocco F. I blocchi inseriti uno nell'altro si definisco nidificati o annidati. La tabulazione (gli spazi) non è indispensabile al funzionamento del programma, ma fortemente raccomandato ai fini di una buona leggibilità del codice. La struttura a blocchi ci permette di introdurre anche un altro concetto fondamentale della programmazione e cioè, la visibilità (in inglese scope). Aiutiamoci con un esempio.

A
{
	var x = 10;
	B
	{
		var y = 20;
		D
		{
			alert(x + y);
		}
	}
	C
	{
		alert(y); // errore
	}
}

Abbiamo 4 blocchi: il blocco A contiene B e C; B contiene D. La variabile x è dichiarata nel blocco A ed è quindi accessibile a tutti i blocchi contenuti in A. Invece la variabile y, dichiarata in B è accessibile in D ma non in C (perchè C è esterno a B).

if

Tutti i linguaggi di programmazione hanno la possibilità di definire condizioni, ossia situazioni, fatti, eventi che possono realizzarsi o meno e che il programma ha il compito di verificare. In quasi tutti i linguaggi di programmazione l'istruzione (o meglio, la coppia di istruzioni) più diffusa e importante è l'if/else. In inglese la particella if equivale al nostro se. Essa ha lo scopo di attivare un determinato sottoprogramma nel momento in cui si verifica la condizione prestabilita. Vediamo un esempio.

<script>

var a = Math.round(Math.random() * 100);

if(a > 50)
{
	alert("il numero è maggiore di 50");
}

</script>

Viene generato un numero casuale fra 0 (compreso) e 100 (escluso) e inserito nella variabile a. Se il numero in questione è maggiore di 50 viene lanciato il comando alert. Come possiamo vedere, il comando if è seguito da una coppia di parentesi tonde in cui viene definita la condizione, quindi segue il blocco tra parentesi graffe, ossia il sottoprogramma che si attiva al realizzarsi della condizione.

if ( condizione ) { conseguenza }

Vediamo altri esempi:

var v1 = parseInt(document.getElementById("input_1").value);
var v2 = parseInt(document.getElementById("input_2").value);
if(v1 + v2 == 15)
{
	alert("ok");
}

Le variabili v1 e v2 contengono un intero. Se la somma dei due valori è 15 viene stampata la stringa ok.

for

prova1234.