Javascript: primi passi

Javascript (spesso abbreviato con JS) è un linguaggio di programmazione, di tipo interpretato, rappresentante uno dei più utilizzati al mondo, orientato agli oggetti e meglio conosciuto come linguaggio di scripting client-side per pagine web.

L’enorme diffusione di JavaScript è dovuta principalmente sia al fiorire di numerose librerie nate allo scopo di semplificare la programmazione sul browser, che alla nascita di framework lato server e nel mondo mobile che lo supportano come linguaggio principale.

JavaScript viene eseguito direttamente lato "client-side" della pagina web e può essere utilizzato per dare un design e stabilire il comportamento delle pagine web quando viene scatenato un particolare evento da parte dell'utente. JavaScript è semplice da apprendere e nello stesso tempo rappresenta un linguaggio che permette un controllo quasi totale sulla pagina web.

Il linguaggio permette di programmare sia in modo procedurale sia orientato agli oggetti. Questi vengono creati a livello di programmazione, allegando metodi e proprietà agli oggetti altrimenti vuoti in fase di esecuzione.

DA DOVE INIZIARE

JavaScript è un linguaggio dinamico di programmazione che, quando applicato a un documento HTML, può dare interattività dinamica al sito web.

JavaScript è incredibilmente versatile: dalle piccole attività, con slider (carousel), gallerie di immagini, layout fluttuanti, alle risposte al premersi di un bottone. Acquisendo maggiore esperienza, si potrà essere in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro.

HELLO WORLD!

Partendo da un semplicissimo file index.html, che supponiamo sia formato semplicemente da un titolo e un testo, nel seguente modo:

 

<h1>Indice della pagina</h1>

<p>descrizione della pagina</p>

 

ed integrando la seguente riga di codice, prima del tag di chiusura </body>:

 

<script src="scripts/main.js"></script>

 

stiamo semplicemente applicando il contenuto del file javascript col nome main.js alla pagina index.html.

Se ora nel file main.js scrivessimo la seguente porzione di codice:

 

var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1

myHeading.textContent = 'Hello world!'; // Cambio il testo

A questo punto al posto del testo “Indice della pagina” verrà scritto “Hello world!”.

Quindi così come in genere viene fatto con le classi in CSS, in cui si selezionano tutti gli elementi HTML con quella classe o con quell’ID e gli si assegniamo degli attributi, anche in questo caso abbiamo selezionato il tag h1 con la funzione querySelector e abbiamo cambiato il suo valore usando un’altra funzione chiamata textContent.

LE BASI DEL LINGUAGGIO

Alcune delle principali funzionalità di Javascript sono comuni a molti altri linguaggi di programmazione.

Introduciamo di seguito alcuni dei concetti fondamentali da cui partire per cominciare a studiare Javascript.

VARIABILI

Le variabili sono contenitori dove si possono immagazzinare o salvare dei valori. La dichiarazione di una variabile avviene tramite la parola chiave var (vedremo che non è l’unica parola chiave possibile e capiremo le differenze) e seguita da un nome arbitrario, che però deve rispettare alcune regole per essere valido (ad esempio deve cominciare con una lettera, il simbolo _ oppure $ e ci sono alcune keyword, come ad esempio delete, che non possono essere usate).
Javascript è case sensitive, quindi myVariable è diversa da myvariable.

Dopo aver dichiarato una variabile le si può assegnare un valore. L’assegnazione avviene tramite il simbolo di =, banalmente nel seguente modo:

myVariable = ‘Mario Rossi’

si può ovviamente effettuare un unico passaggio facendo dichiarazione e assegnazione in un’unica riga:

var myVariable = ‘Mario Rossi’

COMMENTI

È sempre buona norma commentare ciò che si scrive, sia per tener traccia di eventuali modifiche al codice, sia per consentire una più facile lettura a posteriori.
In Javascript e possibile inserire dei commenti in due modi:

1. Se i commenti sono sviluppati su più linee, all’interno dei simboli:

 /*
commenti multilinea
*/

 

2. Se invece sono previsti su singola linea, allora subito dopo i simboli:

// commenti inline

OPERATORI

Un operatore è un simbolo matematico che produce risultati basandosi su due valori (o variabili).
Gli operatori più importanti sono:

• addizione o concatenazione: +
• sottrazione, moltiplicazione: -
• moltiplicazione: *
• divisione: /
• assegnazione: =
• identità: ===
• negazione: !
• non uguaglianza: !==

STRUTTURE CONDIZIONALI

I condizionali sono strutture di codice che permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato.
La più comune di queste strutture è chiamata if...else.
Ad esempio:

var fullName = 'Mario';

if ( fullName === 'Mario') {

  alert('Ciao, Mario!');

} else {

  alert('Come ti chiami?');

}

In questo caso, semplicemente viene fatto un controllo sulla variabile fullName: se il valore contenuto nella variabile corrisponde a quello indicato, allora si entra nel blocco dell’if, altrimenti viene eseguito il codice contenuto nell’else.

FUNZIONI

Le Funzioni sono un modo per impacchettare funzionalità che possono essere riutilizzate. Quando c’è bisogno di una procedura, è possibile chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta.

Le funzioni spesso prendono degli argomenti che servono come dati per far funzionare il codice della funzione stessa. Questi dati vanno tra parentesi e sono separati dalla virgola.

Ad esempio, la funzione alert() fa apparire una finestra con un avviso nel browser, e l’avviso che deve comparire deve essere passato all’interno delle parentesi:

alert(“Hello World!”);

EVENTI

La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano “quanto succede” nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'evento click che è inizializzato dal browser quando si utilizza il mouse.
Ad esempio, con la seguente porzione di codice facciamo apparire un alert quando clicchiamo sul titolo h1 della nostra pagina:

document.querySelector('h1').onclick = function() {

    alert('Hai cliccato sul titolo!');
 

}

CONCLUSIONI

Questa voleva essere una rapida messa a fuoco su Javascript e sui suoi concetti di base.
Abbiamo finora introdotto i concetti fondamentali per porre le basi all’apprendimento del nostro nuovo tutorial.

Ovviamente lo studio di Javascript prevede una conoscenza, seppur minima, dell’HTML e in parte del CSS, poiché interagisce con essi.

Abbiamo visto cosa sono le variabili e come si dichiarano, quali sono i principali operatori, cosa sono le strutture condizionali e le funzioni, ed infine abbiamo visto come creare facilmente un evento.
Tutto questo verrà approfondito e perfezionato nei prossimi articolo del tutorial.