Programmazione in javascript

I linguaggi di programmazione.

Primi passi in JavaScript.

data di oggi:

I linguaggi di programmazione sono un insieme di parole chiave, dette istruzioni, che consentono di scrivere un programma, cioè un insieme di istruzioni che consentono di raggiungere un risultato visibile sul computer.

Ora noi ci poniamo lo scopo di scrivere una pagina per verificare l'apprendimento dei nostri allievi. Più che una vera interrogazione possiamo preparare dei quiz, utili sia per la autovalutazione dell'allievo, sia per la valutazione da parte del docente.

La pagina che vogliamo ottenere è la seguente: esercizi

In pratica vogliamo vedere se i nostri allievi hanno appreso alcuni concetti che noi riteniamo fondamentali, cioè quelli illustrati nella nostra lezione teorica, la volta scorsa, quella sui colori, I colori

Poiché si tratta di una valutazione, siamo costretti ad utilizzare un programma, cioè scrivere una serie di istruzioni, idonee a porre delle domande al nostro alunno, leggere le sue risposte, valutarle o con un giudizio o con un voto.

Un linguaggio di programmazione adatto allo scopo è il linguaggio JavaScript. Oggi cominciamo a vedere i primi elementi sia di JavaScript sia di programmazione.

La programmazione è un'arte molto complessa che si acquisisce programmando per diversi anni. Comunque, con un pò di impegno tutti i docenti ci riescono.

Noi ora proviamo.

Le domande

Quante domande dobbiamo fare nel nostro quiz?

Il modo più semplice è di porre dieci domande, di dare un punto per ogni risposta esatta, in modo che il massimo voto sia dieci, ovvero dieci decimi.

Formuliamo la prima domanda:

1) - Il nome del seguente coloreè:
giallo
rosso
verde

Per fare questo, prepariamo una pagina nuova, la salviamo col nome coloriquiz.htm nel solito modo. ( su come salvare vedi: Una prima pagina in html ).

La risposta esatta, la sappiamo, è la seconda, cioè il rosso. Abbiamo deciso di dare tre possibilità di risposta, di cui due sono false, mentre una sola è quella esatta, cioè è vera.

FrontPage lo inserisce automaticamente nel punto voluto.

Cancelliamo "Invia" e "Reimposta" che non ci servono.

Vediamo, invece come funziona il pulsante, leggendo il codice html che è il seguente:

comando	significato
<input	inizia una istruzione di ingresso di dati. Input, con la n, vuol dire ingresso di dati, che devono essere memorizzati nel computer, per essere poi analizzati
type="radio"	la parola: "type" indica il tipo di comando con cui si acquisisce un dato da memorizzare; radio è proprio il tipo nostro, cioè un pulsante di scelta.
value="V1"	value vuol dire il valore che attualmente è memorizzato nel nostro pulsante di scelta. FrontPage inserisce V1 oppure V2 oppure V3. Ma ora non ci interessa.
checked	Se presente, indica che il pulsante è selezionato. selezionato non selezionato Quindi checked vuol dire selezionato. Se lo cancelliamo il pulsante è non selezionato, cioè non scelto all'inizio.
name="R1">	Name vuol dire il nome che diamo al pulsante, per distinguerlo dagli altri pulsanti presenti. Il nome è una cosa importante. E ne parliamo ora.

La funzione del nome.

Nei pulsanti di tipo radio il nome svolge un ruolo importante.

Vediamo la differenza praticamente.

Questi sono tre pulsanti che hanno lo stesso nome e cioè quiz1. Inizialmente sono tutti e tre non selezionati. Avendo però lo stesso nome, si può selezionare uno solo; quindi quando selezioniamo un altro, la selezione si sposta, cioè si cancella quella precedente.

Questi sono tre pulsanti con nomi diversi, l'uno lo abbiamo chiamato quiz1a, poi quiz1b, poi qiz1c.

Essendo i nomi diversi li possiamo selezionare tutti e tre contemporaneamente.

Nel nostro caso, poiché la risposta esatta è una sola, dobbiamo dare lo stesso nome a tutti e tre i pulsanti.

Se poi i quiz sono dieci, daremo i seguenti nomi

quiz1

quiz2

quiz3

quiz4

....

...

quiz10

I nomi vanno dati senza spazi.

Esempio errato

name="quiz 4" è errato perché vi è uno spazio.

Va corretto togliendo lo spazio e cioè quiz4.

Se ora esaminiamo sempre la stessa domanda e proviamo a rispondere:

1) - Il nome del seguente coloreè:
giallo
rosso
verde

vediamo che non succede nulla, tranne il fatto automatico che il pulsante selezionato si sposta.

Primi elementi su JavaScript.

Non succede nulla perché il linguaggio html non ci consente di succedere nulla che sia degno di una valutazione; occorre quindi far ricorso a JavaScript.

FrontPage ci fornisce notevoli elementi per apprendere il linguaggio JavaScript e ce li fornisce in lingua italiana.

Infatti se dal menu "Strumenti" scegliamo "Macro" e poi "Microsoft Script Editor" entriamo in una seconda parte di FrontPage in cui è presente un programma che ci consente di scrivere delle istruzioni in JavaScript.

Premendo poi il tasto funzione "F1" entriamo nella guida in italiano del linguaggio; guida che è utile stampare o tutta in una volta, in modo da aver un manuale di carta, oppure man mano che le istruzioni ci servono.

Noi questa parte di FrontPage la useremo solo per apprendere le istruzioni e i vari comandi, che sono ricchi di esempi.

Mentre per scrivere in JavaScript useremo FrontPage nella parte iniziale, mettendo la pagina in modalità html e scrivendo in modo corretto le istruzioni in JavaScript.

Ora proviamo.

Utilizzando la figura

ci portiamo in modalità html

e scriviamo il seguente testo:

<script language="JavaScript">
<!--

// -->
</script>

Il testo lo scriviamo normalmente senza però toccare i tasti che modificano il carattere, in quanto è un semplice testo che contiene dei comandi che devono essere espressi solo in html oppure in JavaScript.

Sarà compito di FrontPage modificare i colori;

noi dobbiamo invece guardarli i colori per capire se abbiamo scritto bene; però solo alla fine della scrittura, cioè prima di salvare.

Il testo lo scriviamo dopo la istruzione di inizio body e cioè <body>.

vediamo ora di capire cosa abbiamo scritto.

comando	significato
<script language="JavaScript">	Indica che da questo punto inizia un linguaggio di programmazione mediante delle istruzioni. Tale linguaggio è proprio JavaScript. Notare che script language deve essere blu mentre il resto è di colore nero. Ma questo lo fa automaticamente, noi dobbiamo solo controllare. Se il testo diventa tutto blu o tutto bordeaux, qualcosa non va. Dopo averlo scritto premiamo "Invio" sulla tastiera per andare all'altro rigo.
<!--	Questo testo va scritto così, e indica la prima riga del codice di IavaScript. Il colore sarà bordeaux
// -->	Poi premiamo "Invio" per lasciare una riga vuota. Indica che il codice JavaScript è finito. Cioè è l'ultima linea di codice. Dopo inizierà l'html.
</script>	Qui siamo in html. Indica che lo script in JavaScript è finito.