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
visibili 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, CTRL-SHIFT-K su 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.