Questa piccola introduzione non ha la pretesa di essere esaustiva quanto le centinaia di guide online sul medesimo argomento, ma un riassunto utile allo studente di scuola superiore che si avvicina al mondo della programmazione web con questo potente linguaggio, nato un po’ sotto cattiva luce e ora divenuto pilastro fondamentale di tutti i siti web interattivi e con interfacce grafiche complesse.
Come tutti i linguaggi di programmazione orientati al web, JavaScript vanta una storia piuttosto travagliata. Nasce nel 1995 per mano della Netscape, una delle aziende più attive degli anni ’90, che darà vita, più o meno indirettamente, anche a al browser che conosciamo col nome di Firefox. E’ un linguaggio ad oggetti in grado di gestire gli eventi da tastiera e mouse che funziona lato client. Ovvero quando ci colleghiamo ad un server web, andremo a scaricare un file di testo che conterrà sia lo HTML/CSS sia il codice JavaScript: sarà poi il browser ad interpretare il tutto e a fornire all’utente il risultato grafico e le mini funzionalità messe a disposizione da JS per interagire con la pagina web e l’utente.
Il codice JS può essere immerso nello HTML con opportuni tag o essere separato in opportuni file con estensione .js. Il JS quindi non viene compilato come il C/C++ ma interpretato, con alcuni vantaggi sulla portabilità del codice su svariati browser e stratagemmi a livello di programmazione che però impattano sulle performance del codice stesso. Quest’ultimo dettaglio, per il lettore, potrebbe tranquillamente essere poco evidente.
JS ha avuto alti e, tanti, bassi, ma oggi è un caposaldo dalla programmazione web poiché elemento portante di numerosi framework, che ne sfruttano le potenzialità mettendo a disposizione degli sviluppatori degli strumenti formidabili per la realizzazione di siti web complessi nella interazione con l’utente. Un esempio su tutti? Facebook, scritto in larga parte con JavaScript e il suo framework di base React. Altri esempi sono JQuery (presente in queste pagine, ma in lento abbandono), Angular JS di Google, VUE.JS, Node.JS (che merita precisazioni visto che è lato server). Uno sviluppatore web senza JS potrebbe realizzare siti scarsamente produttivi e non potrebbe avvalersi dell’aiuto dei recenti framework con tutti le loro componenti e utilità.
Indice dei contenuti
Le versioni
Divenuto standard detto ECMAScript, oggi è giunto alla versione ES 12 del 2021, ma molti siti sono rimasti ancorati alla versione ES 5 del 2009, senza sfruttare le nuove potenzialità delle versioni successive. C’è di più, dalla versione 6 del 2015 ci sono state molte migliorie e novità che rendono JavaScript un linguaggio praticamente nuovo, una svolta quasi epocale. Colpa, in questo caso, dei browser che non hanno mai dato un supporto convincente alle nuove potenzialità e anche a causa di una certe pigrizia degli utenti nell’aggiornare i browser di casa dello smartphone.
Per quello che ci riguarda, nelle nostre lezioni, non sentiremo particolare necessità di specificare una versione piuttosto che un’altra, andando a guardare i concetti fondamentali e scomodando relativamente alcune caratteristiche recenti. Faremo sicuramente dei salti qui e li, considerando anche che i libri di testo scolastici non sono spesso così arditi e moderni su determinate tecnologia.
Il DOM
Un elemento fondamentale da capire, non specificato spesso, è quello di capire il concetto del DOM. Ogni volta che il browser comincia a “leggere ed interpretare” la pagina html scaricata ed ottenuta dal server, crea una struttura con tutti i tag che vengono trasformati in oggetti, da cui viene fuori una sorta di mappa, detta appunto Document Object Model (DOM). Prendiamo una pagina HTML ridotta all’osso e la sua mappa corrispondente
<!DOCTYPE html>
<html>
<head>
<title>esempio</title>
<meta charset="utf-8">
</head>
<body>
<h1>Esempio DOM</h1>
<p>prova</p>
</body>
</html>La mappa del DOM associato a questo frammento di codice:
Ognuno di questi quadrati diventa un oggetto che prende in sostanza vita all’interno della memoria gestita dal browser e che, fondamentalmente, nasce statica ma che può essere modificata “in corsa” durante l’utilizzo del browser aggiungendo a runtime altri blocchi html o modificando quelli esistenti, senza per questo riscaricare la versione originale dal server, ma semplicemente agendo lato client. Come possiamo agire sul DOM se non pssiamo in nessun modo modificare il codice HTML? E’ qui che ci viene in aiuto il JavaScript che può in corsa agire sul DOM ed interagire quindi con l’utente sulla pagina statica. Per essere chiari:
- JavaScript può modificare tutti i tag/elementi HTML in una pagina
- JavaScript può modificare tutti gli attributi HTML in una pagina
- JavaScript può modificare tutti gli stile CSS in una pagina
- JavaScript può rimuovere elementi o attributi HTML
- JavaScript può aggiungere elementi o attributi HTML
- JavaScript può simulare gli eventi HTML esistenti in una pagina
- JavaScript può creare gli eventi (es simulare un click o un tab) HTML in una pagina
Il primo script
Veniamo al primo esempio. Creiamo, per iniziare, una pagina HTML, il classico index.html e inseriamo il seguente codice:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Test JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Test Java</h1>
<button onclick="alert('Ciao mondo!')">Saluta</button>
</body>
</html>Il frammento è molto semplice dove l’unica novità è il tag button, del tutto equivalente al classico <input type=”button”> di una form ma senza la struttura della form per l’invio dati appunto. Tale tag ha un attributo “onclick”, insolito per chi ha sempre fatto solo un po’ di grafica con i CSS. Onclick è un attributo che si aggiunge agli oggetti della nostra pagina.
Gli script js
Alleniamoci, però, a dividere il codice che fa la grafica come quello HTML e quello che invece fa una parte di logica e di programmazione che è il JS nel nostro caso. Questo perché è meglio non immergere il codice direttamente nel file HTML, così anche per una migliore manutenzione o aggiornamento dei due ambiti che sono piuttosto separati!
Creiamo una cartella che possiamo chiamare js, un po’ come abbiamo fatto nelle nostre esercitazioni in cui abbiamo sempre creato le cartelle img e css per contenere immagini e fogli di stile. L’idea è di andare ad inserire nella cartella js, uno o più file che conterranno i nostri frammenti di codice javascript mentre nella pagina HTML ci sarà un semplice “richiamo” a quelle funzioni, mentre nella parte di intestazione sempre HTML, ci sarà una sorta di “include del file o dei file che contengono le funzioni js.” Nel nostro caso, semplicistico, creiamo dentro js un file di testo semplice rinominato script.js usando magari il tasto destro di Windows, crea->documento di testo o analogo su Linux. Il nome del file lo potete scegliere come volete. script.js è un nome standard un po’ come index.html
Dentro il file script.js semplicemente inseriremo il codice attraverso una funzioncina che esegue esattamente quanto appena visto, senza prendere parametri o gestire variabili. Assomiglia molto alle funzioni del C++ ! Non c’è nessun valore di ritorno ma è sempre mettere la voce return anche se vuota per una leggibilità migliore.
function saluta()
{
alert('Ciao mondo!');
return;
}Il file HTML si trasforma così con il caricamento nell’header e il richiamo alla funzione nell’evento del bottone:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Test JavaScript</title>
<meta charset="utf-8">
<script src="js/script.js"></script>
</head>
<body>
<h1>Test Java</h1>
<button onclick="saluta()">Saluta</button>
</body>
</html>In questo caso il codice è poco e apparentemente inutile da suddividere, ma abituiamoci da subito a questa pratica, dove nello script.js inserire 3, 4… 1000 funzioni javascript magari lunghe ed articolate che poi richiameremo semplicemente col nome della funzione. Vedremo nei prossimi esercizi e articoli come gestire e quali sono gli eventi degli oggetti HTML. Qui abbiamo visto come gestire il click su un bottone, il più intuitivo ed utile, ma ce ne sono altri particolari.
Ultima modifica 12 Novembre 2022
