regola carattere

programmare

introduzione

cos'è un programma?
perché javascript
il primo programma
dove scrivere lo script
piccoli accorgimenti
gli oggetti
gli argomenti
le istruzioni
le variabili
tipi di dato
typeof
algoritmo

introduzione

cos'è un programma?

Possiamo vedere un programma come una sequenza di istruzioni che accetta dei dati in ingresso (input) e li elabora per fornire dei risultati in uscita (output):

processo input elaborazione output

perché JavaScript?

Il motivo principale per cui usare JavaScript stà nel fatto che non c'è bisogno di istallare niente: JavaScript è un linguaggio interpretato (di scripting), quindi, visto che tutti i maggiori browser includono l'interprete JavaScript, chiunque disponga di un browser web, può cimentarsi nella programmazione.

Javascript è il più utilizzato linguaggio di scripting anche per la sua semplicità sintattica e versatilità.

il primo programma

A qualunque linguaggio di programmazione ci si approcci, il primo programma sarà sempre quello che scrive la frase «Hello world!». In JavaScript l'istruzione sarà: document.write('Hello world!');.

In JavaScript abbiamo una seconda alternativa: fare apparire una finestra di dialogo di avvertimento (quella con il solo pulsante OK) con la scritta «Hello world!». Così: window.alert('Hello world!').

JavaScript

JavaScript è un linguaggio di programmazione orientato agli oggetti (programmazione contrapposta a quella procedurale).

dove scrivere lo script

Il programma JavaScript si inserisce in una pagina HTML, pertanto:

si scrive con un editor di testo (o un editor specifico per il web).
viene interpretato dal browser (dall'interprete JavaScript incluso nel browser).

Il programma JavaScript deve essere posto tra l'apertura e la chiusura del tag html script, questo può inserirsi sia nella intestazione, sia nel corpo della pagina (head e body); l'intestazione viene letta dal browser prima del corpo. Si rimanda ad altra fonte per le altre possibilità di inserire espressioni JavaScript nella pagina.

Usando il tag script, è necessario specificare la natura del suo contenuto, cioè il tipo di dati che si traferiranno (il mine type), infatti va sempre indicato l'attributo type con il valore text/javascript. Quindi:

<script type="text/javascript">
	istruzioni javascript
</script>

Tutto il contenuto del tag HTML script, sarà il programma scritto il linguaggio JavaScript.

Bisogna fare attenzione nello scrivere le varie istruzioni perché JavaScript è un linguaggio sensibile al maiuscolo, quindi distingue tra lettere maiuscole e minuscole: A ≠ a.

piccoli accorgimenti

Alcuni browser molto obsoleti non supportano il tag script, quindi mostreranno il codice come contenuto della pagina.

Per evitarlo, la regola vuole di nascondere loro il codice javascript, inserendolo come commento HTML.

Poi, però, per evitare che JavaScript provi ad interpretare la chiusura del commento html (-->) come istruzione, la si pone come commento JavaScript.

Tutto considerato, la struttura base della parte della pagina html, che contiene lo script sarà:

<script type="text/javascript">
<!--
	istruzioni javascript
// -->
</script>

quindi la nostra prima pagina sarà fatta così:

<html>
    <head>
        <title> Esercitazione JavaScript - hello world scritto nella pagina </title>
    </head>
    <body>
        <script type="text/javascript">
        <!--
        	document.write('Hello world!');
        //-->
        </script>
    </body>
</html>

e così la seconda alternativa::

<html>
    <head>
        <title> Esercitazione JavaScript - hello world scritto in una finestra di avvertimento </title>
    </head>
    <body>
        <script type="text/javascript">
        <!--
        	window.alert('Hello world!');
        //-->
        </script>
    </body>
</html>

gli oggetti

JavaScript è un linguaggio di programmazione orientato agli oggetti (in inglese OOP acronimo di Object Oriented Programming)

Semplificando, si può pensare un oggetto come la somma di proprietà e metodi:

proprietà: caratteristica dell'oggetto (valore associato) che può essere sia di sola lettura, sia di lettura e scrittura (solo consultabile o anche modificabile).
metodo: azione (funzione) associata all'oggetto.

La sintassi da utilizzare per riferirsi ad una proprietà è oggetto.proprietà e per riferirsi ad un metodo è oggetto.metodo().

Gli oggetti possono essere sia quelli predefiniti, sia quelli creati dal programma.

Ad esempio, si potrebbe definire un oggetto triangolo con le proprietà base triangolo.base ed altezza triangolo.altezza nonché definire il metodo scriviArea triangolo.scriviArea() il quale scriva nella pagina la sua area, cioè la metà del prodotto di base ed altezza (base*altezza/2).

In merito agli oggetti predefiniti si può citare l'oggetto document, il quale annovera tra le sue proprietà bgColor document.bgColor (il colore di sfondo della pagina) e tra i suoi metodi write document.write() il quale consente di scrivere nella pagina.

La proprietà bgColor dell'oggetto document è una proprietà di lettura e scrittura, può essere quindi sia consultata (letta), sia modificata (scritta).

Una proprietà di sola lettura è title (sempre dell'oggetto document) che restituisce la descrizione della pagina html specificata nel suo tag title.

gli argomenti

Tra le parentesi che seguono i nomi dei metodi vanno posti eventuali argomenti, ovvero dei parametri (dei valori) da passare (comunicare, inviare) al metodo.

Con argomenti, intendiamo dei valori, dei dati che vengono comunicati (passati) al metodo.

Ad esempio document.write('testo di prova') scriverà nella pagina la stringa testo di prova passata al metodo come argomento.

Per i metodi che necessitano di più argomenti, il separatore è la virgola: oggetto.metodo(argomento1, argomento2, ... , argomento n).

Nel processo input → elaborazione → output, vengono forniti dei valori di input, gli argomenti, all'elaborazione (ovvero al metodo) la quale restituisce un risultato in output.

A proposito di argomenti, quando si parlerà delle funzioni, varrà anche per loro lo stesso discorso.

le istruzioni

Ogni istruzione javascript inizia a nuova riga o dopo un "punto e virgola" (;), quindi non si può andare a capo lungo l'istruzione, perchè verrebbe interpretato come fine dell'istruzione.

Esempio di errore:

document.write('scrivo nella pagina il
numero 1')

Questa pagina contiene 5 istruzioni valide:

<html>
<head>
	<title> Esercitazione JavaScript - le istruzioni </title>
</head>
<body>
	<script type="text/javascript">
	<!--
		document.write("scrivo nella pagina il numero 1");
		window.alert("scritto il primo"); document.write(" il 2")
		window.alert("scritto anche il 2")
		document.write(" ed il 3");
	//-->
	</script>
</body>
</html>

Benché possa apparire come una ridondanza, ritengo buona abitudine usare sia il punto e virgola, sia l'invio. Così:

istruzione1;
istruzione2;
istruzione3;

blocco di istruzioni

Più istruzioni possono essere raggruppate in un unico blocco; basta porle tra parentesi graffe. In tal modo JavaScript le tratterà come fosse un'unica istruzione.

Sarà indispensabile unire le istruzioni in blocco nell'uso delle strutture di controllo.

le variabili

Durante l'esecuzione del programma, ci sarà bisogno di memorizzare i dati immessi dall'utente, quelli elaborati dal programma, nonché quelli che vogliamo vengano mostrati come risultato. A questo scopo useremo le variabili.

Una variabile è un nome arbitrario che fa riferimento a celle di memoria RAM

Definire (in gergo dichiarare) una variabile si può quindi immaginare come creare un cassetto con un suo nome nella memoria. In questo cassetto andremo a memorizzare i nostri dati.

la vita delle variabili

I dati che il programma ha memorizzato nelle variabili (nella memoria RAM) resteranno sino a quando la pagina è aperta, infatti, per motivi di sicurezza, appena si abbandona la pagina contenente lo script, viene liberato tutto lo spazio di memoria che veniva utilizzato.

Non a caso non è necessario in JavaScript dichiarare le variabili (si possono usare all'occorrenza senza averle prima dichiarate): la loro vita è piuttosto breve.

La distinzione che è indispensabile conoscere è quella tra:

variabili globali: valide in tutta la pagina
varibili locali: valide solo all'interno di una funzione

Ma delle funzioni si parlerà più avanti.

Per ora ci basta sapere che benché la dichiarazione delle variabili sia facoltativa, sarà bene abituarsi a dichiararle sempre.

A questo scopo si utilizza l'espressione var seguita dal nome della variabile.

Volendo dichiarare una variabile a si avrebbe:

var a;

quando serve di dichiarare più variabili, non è necessario usare più volte l'espressione var in questo modo

var a;
var b;
var c;

ma basta separarle con una virgola, così:

var a, b, c;

tipi di dato

Come detto sopra un programma elabora dei dati immessi dall'utente per fornire altri dati come risultato di un elaborazione ed essi saranno memorizzati in delle variabili, ma quanti sono i tipi di dato? In JavaScript solamente quattro:

numero (non distingue tra interi o a virgola mobile)
stringa (codice alfanumerico: lettere maiuscole, minuscole, segni di punteggiatura, caratteri speciali e anche numeri)
booleano (valore logico true o false)

valori speciali (NaN, undefined, null...)

JavaScript è un linguaggio a tipizzazione debole:

non è necessario specificare il tipo di variabile:: basta dichiarare la variabile (var a;) senza specificare il tipo di dato che la variabile conterrà, infatti verrà impostato automaticamente quando le verrà assegnato un valore; Quindi con a = 3 ovvero assegnando alla variabile a il valore 3, la variabile diventerà automaticamente di tipo numerico, con a = 'ciao mondo!' di tipo stringa e con a = true di tipo logico.
dichirazione ed inizializzazione simultanea: si può dichiarare una variabile e, contestualmente, assegnarle un valore iniziale, quindi le due istruzioni var a; (dichiarazione della variabile a) e a = 3; (sua inizializzazione al valore 3) si possono fondere in un'unica istruzione: var a = 3; (dichiarazione ed inizializzazione insieme).
il tipo di variabile non è fisso:: si può convertire automaticamente il tipo di variabile (a = 3; ... a = 'ciao mondo!';): cioè trasformare automaticamante una variabile numerica in una contenente dati di tipo stringa
non è necessario dichiare le variabili:: come già detto, si possono utilizzare delle variabili direttamente quando servono senza averle prima dichiarate (... a = 3; ...).

i numeri

I tipi di dato numerico possono assumere dei valori da

le stringhe

Le stringhe di testo vanno sempre poste tra virgolette, javascript permette sia l'uso di virgolette doppie (") sia di virgolette semplici ('). Si usino le seconde.

In generale, una volta iniziata una stringa con le virgolette semplici, si continuerà ad interpretare tutto come testo (anche eventuali virgolette doppie) sino alla seguente virgoletta singola.

Se si inizia una stringa con le virgolette doppie, vale lo stesso discorso: si concluderà alle successiva virgoletta doppia

Quindi se la stringa è tra virgolette singole, le virgolette doppie al suo interno vengono interpretate come testo e non come chiusura della stringa (idem per una stringa tra virgolette doppie).

Infatti non ci sarà nessun problemi in questi casi:

stringa1 = 'albebra di "Boole"'
stringa2 = "l'informatica per esempi"

Ma in questi sì:

stringa1 = 'l'albebra di "Boole"'
stringa2 = "l'informatica "per esempi""

Infatti, l'apostrofo tra l e algebra, non verrebbe considerato come testo, ma chiuderebbe prematuramente la stringa1 e anche le virgolette prima di per esempi, chiuderebbero la stringa2.

Volendo che JavaScript, interpreti le virgolette come un carattere qualsiasi (e non come delimitatore di stringa), le si devono far precedere da una barra rovesciata, così:

stringa1 = 'l\'albebra di "Boole"'
stringa2 = "l'informatica \"per esempi\""
window.alert(stringa1);
window.alert(stringa2);

Questi si dicono carratteri di escape.

I più utili sono:

caratteri di escape
codice	funzione
\'	virgoletta singola (quando interpretabile come delimitatore di stringa)
\"	virgoletta doppia (quando interpretabile come delimitatore di stringa)
\\	barra rovesciata (quando interpretabile come carettere si escape)
\n	nuova riga (a capo)
\&	carattere & (quando interpretabile come operatore logico)

Volessimo quindi visualizzare in una finestra di avvertimento una barra rovesciata tra virgolette singole, faremo così:

' apertura stringa
\' aperte virgolette
\\ barra rovesciata
\' chiuse virgolette
' chiusura stringa

Ed ecco il risultato:

window.alert('\'\\\'');

Provare per credere.

i logici

I tipi di dato logico, detti anche booleani (perchè trattati nell'algebra di Boole) possono assumere i soli valori true e false.

curiosità

L'algebra di Boole, fu introdotta dal matematico George Boole (1815 - 1864) ritratto di George Boole

i valori speciali

In JavaScript si dispone di particolari valori speciali detti costanti, essi sono:

infinity
NaN
null
undefined

infinity è un valore numerico che rappresenta un numero positivo troppo grande (che supera il limite consentito). Per un numero negativo che eccedesse il limite, si avrebbe -infinity.
NaN è l'acronimo di «not a number», significa quindi «non un numero». Lo si potrebbe ottenere provando a convertire in numero una stringa che non contiene numeri.
null è un valore speciale che di solito si assegna ad una variabile quando la si vuole definire senza inizializzarla ad un valore specifico (var a = null).
undefined, è il valore che viene assegnato ad una variabile soltanto dichiarata (ma non inizializzata a nessun valore): var a;.

typeof

Per verificare la natura di un dato o del dato contenuto in una variablie si usa l'operatore speciale typeof il quale restituisce una stringa che ci informa sulla natura del dato analizzato.

Provando:

<html>
<head>
	<title> Esercitazione JavaScript - typeof </title>
</head>
<body>
<script type="text/javascript">
<!--
	window.alert(typeof(3)); //typeof(3) restituisce la stringa 'number' al metodo alert di window
	window.alert(typeof('JavaScript')); //typeof(JavaScript) restituisce la stringa 'string' al metodo alert di window
	window.alert(typeof(true)); //typeof(true) restituisce la stringa 'boolean' al metodo alert di window

	var n = 33;
	var s = '33';
	var l = false;
	window.alert(typeof(n)); //typeof(n) analizza il contenuto della variabile n e restituisce la stringa 'number' al metodo alert di window
	window.alert(typeof(s)); //typeof(s) analizza il contenuto della variabile s e restituisce la stringa 'string' al metodo alert di window
	window.alert(typeof(l)); //typeof(l) analizza il contenuto della variabile l e restituisce la stringa 'boolean' al metodo alert di window
	
//-->
</script>
</body>
</html>

algoritmo

Una delle tecniche per la rappresentazioni degli algoritmi è il diagramma di flusso. In questo modo si indica ogni parte dell'algoritmo tramite un simbolo grafico, i principali sono:

elementi dei diagrammi di flusso

Riassumendo quanto già visto:

Per le assegnazioni si usa l'operatore di assegnazione (=).
Per l'output nella pagina, ci si può scrivere con document.write(msg) ove msg è la stringa da scrivere nel corpo dellla pagina html.
Come altro output, si può far apparire una finestra di avvertimento con window.alert(msg) ove msg sarà la stringa scritta nella finestra di avvertimento.

Come si scorpirà strada facendo:

Per l'input useremo il metodo prompt dell'oggetto window.
Le condiziono corrisponderanno alle strutture di controllo