edutecnica

Ipertesti        

Un ipertesto un insieme di documenti che ha la possibilità di essere consultato in modo non sequenziale, passando da un documento all’altro attraverso collegamenti (link) realizzati tramite parole o immagini, sui quali occorre fare click con il mouse.

Gli ipertesti hanno raggiunto una grande diffusione grazie allo sviluppo della rete Internet che ha comportato in pochi anni l’aumento dei siti web raggiungibili e della quantità di informazioni disponibili.
Gli ipertesti memorizzati su server Internet possono essere letti utilizzando opportuni programmi chiamati web browser come Chrome, Firefox, Safari, etc..

Il linguaggio utilizzato per scrivere ipertesti è l’HTML (HyperText Markup Language ).
Come dice la sigla, HTML è un linguaggio di marcatura, cioè, utilizza dei contrassegni (tag) per la formare il documento; la cosa interessante è che i documenti HTML sono dei normali testi di caratteri e di conseguenza sono visibile e modificabili con qualunque programma per il trattamento dei testi dal word processor fino al semplice editor come il blocco Note di Windows.

I testi scritti in HTML si distinguono dai normali file con estensione .txt tramite l'estensione .html o .htm.
Questi documenti non sono altro che dei normali file di caratteri ASCII all'interno dei quali vengono aggiunti i codici di formazione della pagina (tag) consistenti in sequenze di caratteri propri del linguaggio HTML che non fanno parte del testo normale e che permettono di realizzare gli elementi caratteristici di un ipertesto.
In ogni caso, un normale testo scritto col Noteblock di Windows senza codici HTML è accettato e trascritto così com’è da un interprete HTML cioè da un qualsiasi browser web.

Per quanto detto, si deduce che l' HTML è un linguaggio di marcatura che tramite opportuni "tag" marcatori consente di formare un documento che poi può essere interpretato da un browser web. La tipica struttura di un documento HTML è qui sotto riportata

L'istruzione <!DOCTYPE html > rappresenta la dichiarazione del tipo di documento (DTD = Document Type Declaration ) poi tra il tag di apertura <html> e quello di chiusura </html> si vedono le due sezioni dell'intestazione (head) ed del corpo (body).

L'intestazione contiene informazioni sul documento ed il corpo contiene il documento stesso.
I tag sono dunque istruzioni racchiuse all'interno di parentesi angolari (< >).
Esistono tanti tipi di tag; ad esempio nella sezione head dovrebbe sempre essere presente un tag <title>..</title> per dichiarare il titolo della pagina.

Per segnalare ai motori di ricerca le parole chiave associate alla pagina si usa il tag <meta name="keywords" content="matematica, geometria,statistica"> ma ne esistono molti altri.

Nel corpo della pagina (body) tra i tag più importanti troviamo il tag <p> ..</p> usato per definire un paragrafo di testo, il tag <br> per andare a capo di una riga oppure il tag <div> .. </div> per definire un generico blocco di elementi HTML.

Una cosa importante da ricordare è che i tag possono essere dotati di un attributo univoco id che può identificare i diversi elementi all'interno della pagina. Scritture come

<div id="alfa"> .. </div>
oppure
<p id="beta"> .. </p>

permettono di riferirsi a precisi elementi del documento.
La sintassi di questo linguaggio è molto tollerante, quando mancano i tag che dovrebbero esserci è il browser stesso che li ricostruisce.

Una tipica pagina scritta in HTML potrebbe essere anche strutturata nel seguente modo:


come si vede mancano completamente il tag di apertura <html> i tag <head>..</head> e <title>..</title> ma questo non impedisce alla pagina di funzionare.

JavaScript                         

Non essendo HTML in grado di elaborare delle logiche di programmazione (variabili, costrutti, cicli, etc..) la Netscape introdusse nel 1995 all'interno del suo browser Navigator un linguaggio chiamato JavaScript (più brevemente JS) il cui nome faceva in qualche modo riferimento a Java creato nel 1992 dalla Sun MicroSystem, anche se tra i due linguaggi non vi era alcun nesso. L'unica cosa che vi era in comune era la sintassi che era molto simile anche a quella del linguaggio C (standard ECMA).

Rispetto al C e a Java il linguaggio JS per funzionare non richiedeva di scaricare ed utilizzare un compilatore, ma era sufficiente un browser ed un editor di testi.

Per i nostri attuali scopi, l'intenzione è quella di fare un uso modesto di HTML che consideriamo semplicemente un interfaccia di input/output per i nostri scritti. Col Blocco Note di Windows, scriviamo, dunque, le seguenti righe di codice :


L'oggetto del nostro interesse è quanto viene racchiuso tra i due tag <script> e </script> tra questi due marcatori viene racchiuso il codice JS.
Lo script viene eseguito appena il browser legge l'HTML; la lettura avviene, ovviamente, dall'alto verso il basso, quindi dopo aver stampato le due righe di testo indicate, viene eseguito il codice JavaScript; nello specifico il nostro codice stamperà a video una stringa di saluto.

Da questo primo esperimento si conclude che JS è in grado sicuramente di eseguire degli output, ma non sappiamo ancora nulla sulle sue eventuali capacità di elaborazione.
Per questo, il nostro approccio sarà molto simile a quello già visto per gli altri linguaggi di programmazione.


In questa pagina viene scritta una stringa di descrizione e poi si va a capo (<br>) viene poi impostato un tag <div id="R" > </div> ma sarebbe uguale usare un tag <p id="R" > </p>.
Inoltre sono stati omessi i doppi apici attorno all'identificatore R anche se è consigliabile metterli.
Segue l'algoritmo vero e proprio con la dichiarazione di una costante k=3 e di una variabile var x=5 entrambe terminate dal punto e virgola.
L'output costituito dalla moltiplicazione x*k viene indirizzato sull'elemento HTML che abbiamo chiamato R sfruttando la sua proprietà innerHTML.
E' ora evidente come qualsiasi tag caratterizzato da un identificatore univoco id possa essere usato per esternalizzare il valore di una variabile JS.
Esiste una ulteriore possibilità per generare un output che è quello di usare la console di JS, ma per fare questo bisogna attivarla con la combinazione di tasti CTRL-SHIFT-J su Chrome e Firefox mentre su Safari bisogna premere CMD+ALT+J .
Per effetuare l'output verso la console avremmo usato l'istruzione:

console.log(x*k);

Bisogna ricordare che la console è l'unico strumento a disposizione dei compilatori C e Java per generare l'output; per costruire delle applicazioni stand-alone in questi linguaggi bisogna fare uso di opportune librerie grafiche che ovviamente moltiplicano il numero di righe di codice associate all'algoritmo principale.

Nel nostro caso, la filosofia è quella di usare HTML come interfaccia grafica e di delegare a JS la parte algoritmica.
Bisogna solo rimarcare due fatti importanti:

I) La sintassi HTML non è case-sensitive.
II) La sintassi JavaScript è case-sensitive.

Come dire, per HTML <DIV> e <div> è la stessa cosa.
Per   JS     var x=5 e var X=5 rappresenta la dichiarazione di due variabili diverse.

Riassumendo: JavaScript è un linguaggio di programmazione composto da righe di testo che vengono inserite all'interno di pagine web e memorizzate il file con estensione .htm.
Quando si vuole visualizzare questo tipo di pagine, il browser restituisce il contenuto completo del documento contenente sia i tag HTML che gli scritti JavaScript.
Gli algoritmi JS non sono compilati come nel caso del linguaggio C ma interpretati dal browser.

JavaScript ha una sintassi simile ai linguaggi di programmazione Java e C se si considerano le espressioni, gli operatori e le strutture di controllo.

I tipi di dati riconosciuti sono
• i numeri sia interi che quelli con la virgola (usare però il punto);
• le stringhe di caratteri;
• i valori booleani true e false;
• gli oggetti;
• i due valori speciali null e undefined.

Operatori aritmetici        

operatore simbolo esempio
addizione + a+b
sottrazione - a-b
moltiplicazione * a*b
divisione / a/b
resto % a%b

Un esempio potrebbe essere il seguente:


Notiamo come l'output sia un ibrido tra stringhe (racchiuse tra singoli apici) e risultati numerici (racchiusi tra parentesi) espresso in una forma molto simile a quella utilizzata in Java per l'istruzione System.out.println() .
Vi sono già degli operatori di assegnazione come = e += quest'ultimo in particolare non fa che aggiungere all'output una nuova riga che in HTML verrà interrotta con il marcatore <br> con un ritorno a capo.
La cosa più macroscopica è che l'operazione di divisione tra i due valori interi restituisce il loro quoziente preciso in virgola mobile; per ottenere il quoziente tra i due numeri senza i decimali siamo costretti ad usare l'istruzione parseInt() che converte un generico valore in un numero intero; come si può pensare esiste anche un'istruzione parseFloat() che restituisce il valore in virgola mobile dell'argomento che gli viene passato.
L'operatore % che restituisce l'eventuale resto della divisione tra due interi mantiene il suo comportamento invariato come in C ed in Java.

Operatori relazionali                     

operatore simbolo esempio
maggiore di > a>b
minore di < a<b
maggiore o uguale di >= a>=b
minore o
uguale di
<= a<=b
diverso da != a!=b
uguale a == a==b

Sono operatori usati quando si devono attuare delle operazioni di test che restituiscono semplicemente dei valori logici true (vero =1) o false (falso=0).


Operatori logici        

Per le operazioni che si possono applicare ai valori booleani esistono sempre i tre operatori logici AND, OR e NOT.
Se pensiamo che le variabili booleane possono assumere solo valori del tipo a=true (=1), b=false (=0) e che l'operazione logica di AND corrisponde alla moltiplicazione, quella di OR all'addizione e quella NOT alla commutazione della variabile stessa; è già possibile fare delle constatazioni.

operatore simbolo esempio
AND && a&&b
OR || a||b
NOT ! !a


Operatori di assegnazione        

operatore simbolo esempio
assegnazione = a=b
incremento e assegnazione ++ a++
decremento e assegnazione -- a--
addizione e assegnazione += a+=b
sottrazione e assegnazione -= a-=b
prodotto e assegnazione *= a*=b
divisione e assegnazione /= a/=b

Nell'esempio qui sotto riportato, la variabile x viene inizializzata a zero x=0 poi viene incrementata di 1 con l'istruzione x++ poi viene incrementata di y che vale 5.


Variabili        

JS non esegue un controllo rigido sui tipi di dato come nel caso di C e Java; quando si dichiara una variabile non è necessario specificarne il tipo. La dichiarazione di variabile viene fatta specificandone il nome (identificatore) ed assegnandogli un valore, inoltre, durante l'esecuzione dello script, alla stessa variabile possono essere associati valori di tipo diverso.
Per questo bisogna usare molta cautela in modo particolare quando si usano le stringhe con il loro operatore di concatenazione '+' dato che questo ha la priorità sulle operazioni aritmetiche.
In generale, bisogna fare attenzione, quando si usano stringhe, numeri ed operatori aritmetici.


Nella prima espressione si ha un semplice concatenamento di stringhe effettuato con l'operatore '+'.
Nella seconda espressione, rendendosi conto che non si può effettuare una sottrazione tra una stringa ed un numero, l'interprete JS effettua una conversione di cast (forzatura del tipo) su '7' che da stringa diventa numero.
Nella terza espressione la presenza della stringa '7' e dell'operatore di concatenazione '+' costringe l'interprete ad una forzatura di tipo e 1 diventa una stringa '1' da concatenare a '7'.
Nell'ultima espressione è presente l'operatore (*) per la moltiplicazione, ma uno dei due operandi non è un numero, cioè è NaN (Not a Number) e questo sarà il risultato dell'operazione.