JavaScript

da Cristina | Mar 1, 2019 | Javascript, Web

JavaScript, è diventato un elemento cardine nella programmazione web lato client. Il linguaggio è progettato per essere eseguito direttamente nei browser web, consentendo agli sviluppatori di creare esperienze interattive e dinamiche per gli utenti. Il suo nome, talvolta confuso con il linguaggio di programmazione Java, è in realtà stato scelto per sfruttare il crescente interesse nei confronti di Java in quel periodo.

È essenziale comprendere la distinzione tra la programmazione web lato client e lato server. JavaScript opera nel primo ambito, il lato client, il che significa che gli script sono interpretati direttamente sul computer di ogni utente dal suo browser. Al contrario, i linguaggi web lato server eseguono il loro codice sul server che ospita il sito web, inviando il risultato elaborato al browser dell’utente che ne ha fatto richiesta.

Storia di JavaScript

JavaScript è stato creato da Brendan Eich mentre lavorava presso Netscape Communications Corporation nei primi anni ’90. Fu introdotto per la prima volta nel 1995 nel browser Netscape Navigator 2.0. Originariamente, JavaScript era stato sviluppato con l’obiettivo di rendere le pagine web interattive, consentendo agli sviluppatori di aggiungere piccoli script direttamente nelle pagine HTML.

Nel 1997, JavaScript è stato standardizzato attraverso il processo di Ecma International, e la specifica risultante è nota come ECMAScript. ECMAScript è il nucleo del linguaggio JavaScript e ha subito diverse evoluzioni nel corso degli anni, con nuove versioni che introducono nuove funzionalità e miglioramenti.

Alcune versioni significative di ECMAScript includono:

1. Nel 1999 ECMAScript 3 (ES3): Rilasciato nel 1999, ha consolidato diverse caratteristiche del linguaggio e ha fornito una base stabile per gli sviluppatori per molti anni.
2. ECMAScript 5 (ES5): Introdotta nel 2009, ha aggiunto nuove funzionalità, inclusa la modalità “strict” per migliorare la sicurezza e la correttezza del codice.
3. ECMAScript 6 (ES6) o ECMAScript 2015: Rilasciato nel 2015, è stata una delle revisioni più significative, introducendo molte nuove caratteristiche come arrow functions, template literals, classi, e destructuring.

Da ES6 in poi, il comitato ECMAScript ha adottato un modello di rilascio annuale, introducendo nuove funzionalità ogni anno. Le versioni successive, come ES2016, ES2017, e così via, hanno continuato a migliorare il linguaggio.

L’attenzione alla compatibilità è sempre stata una priorità, e gli sviluppatori spesso utilizzano strumenti di transpilazione come Babel per convertire il codice scritto in versioni più recenti di ECMAScript in una forma compatibile con le versioni precedenti, garantendo così un’ampia adozione e compatibilità tra i browser.

Questa breve panoramica storica sottolinea l’importanza di JavaScript e la sua continua evoluzione nel mondo dello sviluppo web. Ora, con questa comprensione, possiamo procedere all’approfondimento dei concetti, iniziando dalla stampa del primo messaggio in output.

Stampa del primo messaggio in output

Nella precedente lezione, ci siamo concentrati sull’integrazione del codice JavaScript nelle pagine web e sulle diverse modalità per farlo ora vederemo come stampare a video il primo messaggio.

Iniziamo utilizzando due metodi:

document.write e document.writeln

Questi metodi possono essere utilizzati per scrivere del testo direttamente nel documento HTML. La differenza principale tra i due è che document.writeln aggiunge una nuova riga (newline) dopo il testo, mentre document.write non lo fa. Pertanto, se vuoi che il testo successivo venga visualizzato su una nuova riga, document.writeln può essere utile.

Vediamo un esempio stampando la frase ‘Hello World!:

// Utilizzo di document.write
document.write("Hello World!");

// Utilizzo di document.writeln
document.writeln("Hello World!");

Tuttavia, entrambi i metodi possono comportare problemi in contesti più complessi e l’uso di metodi moderni come console.log è generalmente preferito per scopi di debugging e logging.

Iniziare a studiare JavaScript

Per iniziare con JavaScript, è importante comprendere alcuni concetti fondamentali. Ecco alcune aree chiave da esplorare:

1. Variabili e Tipi di Dati:
   • Imparare a dichiarare variabili usando var, let e const.
   • Familiarizzare con i tipi di dati come stringhe, numeri, booleani, array e oggetti.
2. Operatori:
   • Conosci gli operatori aritmetici, di confronto e logici.
3. Strutture di Controllo:
   • Esplorare istruzioni condizionali come if, else, switch.
   • Capire i cicli come for, while e do-while.
4. Funzioni:
   • Comprendere come dichiarare e chiamare funzioni.
   • Apprendere concetti come i parametri delle funzioni e il ritorno dei valori.
5. Eventi e Gestione degli Eventi:
   • Scoprire come gestire gli eventi nell’interfaccia utente, come il clic del mouse o la pressione di un tasto.
6. Oggetti e Array:
   • Approfondire la creazione e la manipolazione di oggetti e array.
7. DOM (Document Object Model):
   • Comprendere come il DOM rappresenta la struttura di un documento HTML e come JavaScript può interagire con esso per modificare dinamicamente il contenuto della pagina.
8. AJAX e Fetch API:
   • Studiare la comunicazione asincrona con il server, anche utilizzando la Fetch API.
9. Gestione degli Errori:
   • Imparare a gestire gli errori con try-catch per garantire un flusso di esecuzione più robusto.
10. ES6 e Versioni Successive:
    • Esplorare le caratteristiche introdotte in ECMAScript 2015 (ES6) e versioni successive, come le arrow functions, le template literals, e le destructuring assignments.

IDE JavaScript

Un IDE (Integrated Development Environment) è uno strumento software che fornisce un ambiente completo per lo sviluppo di applicazioni. Per lo sviluppo in JavaScript, ci sono diversi IDE che offrono funzionalità avanzate per scrivere, testare e debuggare il codice.

Tra gli IDE più popolari per lo sviluppo in JavaScript troviamo Visual Studio Code (VSCode):

• Visual Studio Code è un IDE leggero e potente sviluppato dalla Microsoft. È estensibile con una vasta gamma di plugin, supporta il debugging integrato per JavaScript e TypeScript, e offre funzionalità come l’autocompletamento del codice, il controllo di versione e molto altro.

Si possono anche utilizzare ambienti online come ad esempio JSFiddle, CodePen, Repl.it o altri, senza installare nessun software sul proprio computer.

Concetto di funzione in JavaScript

Ora, approfondiremo ulteriormente alcuni concetti chiave, tra cui quello fondamentale di “funzione”. Le funzioni in JavaScript svolgono un ruolo cruciale, consentendo agli sviluppatori di organizzare e riutilizzare il codice in modo efficiente, promuovendo la modularità e la chiarezza del codice. Continuando il nostro tutorial, esploreremo come le funzioni possono essere utilizzate in maniera potente e versatile nella programmazione JavaScript.

Parleremo delle funzioni in dettaglio più avanti ma dato che nelle prossime lezioni inserirò degli esempi con le funzioni in JavaScript in questa lezione dò una breve definizione.

function JavaScript

Una function è un blocco di codice dove inserire delle istruzioni ed è eseguita quando è invocata (chiamata).

In genere una funzione viene richiamata in una pagina web tramite un pulsante o al verificarsi di un determinato evento.

Una function in JavaScript ha un nome ed inoltre può avere anche dei parametri racchiusi tra due parentesi tonde.

Le istruzioni da eseguire sono invece indicate tra parentesi graffe.

Facciamo dunque degli esempi per capire meglio il funzionamento:

function ora() { 
    const d = new Date();
    const ora = d.toLocaleTimeString();
    alert(ora);
}

Notiamo innanzitutto che stiamo utilizzando new Date() per creare un oggetto di tipo Date.

L’oggetto Date è utilizzato per lavorare con le date e con gli orari. Il metodo toLocaleTimeString restituisce l’ora.

All’interno della function ora(), che non ha parametri racchiusi tra parentesi tonde, memorizziamo l’ora in una variabile e richiamiamo il metodo alert. Ricordiamo che il metodo alert() serve per creare una finestra che si apre nel browser. Nel nostro caso specifico mostrerà l’ora.

Dopo inseriamo nella nostra pagina web un richiamo alla funzione creata in JavaScript nel punto desiderato.

Ad esempio si può inserire un pulsante che al click richiami la funzione ora.

<input onclick="ora()" value="Mostra l'ora" type="button">

Potete vedere il risultato facendo clic sul pulsante sotto: ‘mostra l’ora‘. Vi mostrerà l’orario attuale.

Realizziamo lo stesso esempio ma visualizzando il messaggio nella pagina html, piuttosto che in una finestra di dialogo. Utilizziamo il semplice metodo document.write per questo scopo, come nell’esempio sotto:

function ora() { 
    const orario = new Date();
    const ora = orario.toLocaleTimeString();
    document.write("Altro modo per visualizzare un messaggio! ");
    document.write("<p>Orario: " + ora + "</p>");
}

<body onload="ora()">
...
</body>

Provate ad inserire questo codice per visualizzare l’orario nella vostra pagina web per vederne il risultato. Nelle prossime lezioni introdurremo le varaibili e le costanti.

Link utili

Corso su JavaScript in diretta

1 – Sommario JavaScript

2 – Come utilizzare gli alert

3- Come utilizzare JavaScript confirm