JavaScript: cosa è, a cosa serve e mini tutorial

JavaScript: cosa è

JavaScript è un linguaggio di programmazione usato per rendere le pagine web interattive, aggiungendo animazioni, risposte agli input degli utenti e aggiornamenti dinamici del contenuto.

È parte della triade fondamentale delle tecnologie web, insieme a HTML per la struttura e CSS per la presentazione.

Con questo linguaggio, è possibile manipolare elementi HTML, gestire gli eventi (ad esempio il click su un pulsante) e realizzare applicazioni web complesse.

La sua versatilità è radicalmente aumentata da quando sono disponibili ulteriori framework e librerie come React, Angular e Vue, che facilitano lo sviluppo di soluzioni web più robuste.

Inoltre, grazie a ambienti come Node.js, JavaScript si è esteso anche al back-end, rendendolo un linguaggio full-stack.

JavaScript è stato creato nel 1995 da Brendan Eich, all’epoca ingegnere presso Netscape. L’obiettivo era dotare i browser di una maggiore interattività, rendendo le pagine web dinamiche oltre che statiche e solo informative.

Secondo la Developer Survey 2023 condotta da StackOverflow, il 63% degli sviluppatori conosce ed utilizza JavaScript.

JavaScript: a cosa serve

JavaScript serve a rendere le pagine web interattive e dinamiche, offrendo agli utenti un’esperienza più coinvolgente e funzionale. Ecco alcune delle principali applicazioni di JavaScript:

• Manipolazione del DOM. JavaScript permette di cambiare la struttura, il contenuto e lo stile di una pagina web in tempo reale, interagendo direttamente con il Document Object Model (DOM) della pagina.
• Gestione degli eventi. È possibile utilizzare JavaScript per catturare e rispondere a eventi come clic del mouse, pressioni di tasti o movimenti del mouse, rendendo l’interazione con la pagina più fluida ed intuitiva.
• Validazione dei form. JavaScript è comunemente usato per validare i dati inseriti in un modulo prima che vengano inviati al server, migliorando l’usabilità e la sicurezza del sito.
• Animazioni ed effetti visivi. Grazie a JavaScript, è possibile creare animazioni, transizioni e altri effetti visivi che rendono un sito web più accattivante.
• Comunicazione asincrona. Con AJAX (Asynchronous JavaScript and XML), JavaScript può comunicare con un server web e aggiornare parte del contenuto della pagina senza doverla ricaricare completamente.
• API ed integrazioni. JavaScript può interagire con altre tecnologie e servizi attraverso API, permettendo l’integrazione di funzionalità come mappe, feed di social media o sistemi di pagamento.
• Sviluppo di applicazioni web complesse. Tramite framework e librerie come React, Angular e Vue.js, JavaScript consente lo sviluppo di applicazioni web complesse con interfacce utente avanzate.
• Sviluppo Back End. Con ambienti come Node.js, JavaScript può essere utilizzato anche per lo sviluppo lato server, rendendo possibile la creazione di applicazioni full-stack.
• Applicazioni Mobile. Framework come React Native permettono di utilizzare JavaScript per lo sviluppo di applicazioni mobili native per piattaforme come Android e iOS.

Le caratteristiche specifiche di JavaScript

JavaScript, con la sua versatilità e ampia applicabilità, si distingue tra i linguaggi di programmazione per alcune specifiche caratteristiche.

Anzitutto la possibilità di manipolare il DOM (Document Object Model), che permette agli sviluppatori di modificare dinamicamente i contenuti e l’aspetto delle pagine web.

Fondamentale è anche l’event handling, attraverso cui JavaScript risponde a interazioni utente come click o tasti premuti.

AJAX (Asynchronous JavaScript and XML) rappresenta un’altra caratteristica chiave, consentendo l’aggiornamento di parti di una pagina web in modo asincrono, senza ricaricare l’intera pagina, migliorando notevolmente l’esperienza utente.

JavaScript è inoltre il motore delle SPA (Single Page Applications), che carica una singola pagina e aggiorna dinamicamente il contenuto per una navigazione fluida e veloce.

Framework come React, Angular e Vue.js, che offrono strumenti robusti per la costruzione di interfacce utente complesse, sono strettamente legati a JavaScript, dimostrando la sua flessibilità e scalabilità.

Il formato JSON (JavaScript Object Notation) è ampiamente utilizzato in JavaScript per lo scambio di dati, grazie alla sua leggibilità e semplicità.

Infine, Node.js ha espanso l’orizzonte di JavaScript al lato server, dimostrando la sua potenza e versatilità oltre l’ambiente browser.

Con l’introduzione di ES6/ES2015, JavaScript ha ulteriormente rafforzato le sue caratteristiche con funzionalità avanzate come arrow functions, classi e template literals, diventando uno strumento ancora più potente e flessibile per gli sviluppatori.

Chi utilizza JavaScript

JavaScript è un linguaggio di programmazione estremamente versatile, ed è per questo che è utilizzato da moltissimi professionisti IT.

Ovviamente, gli sviluppatori front-end lo utilizzano per creare interfacce utente dinamiche e interattive.

Gli sviluppatori back-end, grazie a tecnologie come Node.js, lo usano per costruire server e gestire la logica applicativa.

I web developer o i full stack developer combinano entrambi gli aspetti per creare applicazioni web complete.

Inoltre, data scientist e software engineer possono utilizzarlo addirittura per il machine learning e l’analisi dei dati grazie a specifiche librerie.

Imparare le basi di JavaScript può richiedere circa 3-6 mesi, mentre sviluppare competenze avanzate e applicazioni complesse può richiedere oltre un anno.

Mini tutorial

In questo mini tutorial scriveremo una funzione in JavaScript che può essere utilizzata per verificare se in un dato campo di un form un utente ha inserito un indirizzo email sintatticamente corretto.

Semplificando un po’, andremo a verificare che il testo contenga il carattere ‘@’ e, successivamente, il carattere ‘.’. Per fare un controllo più preciso avremmo potuto utilizzare le espressioni regolari, ma a quel punto il nostro tutorial non sarebbe stato più “mini”.

Ecco il codice, puntualmente commentato riga per riga:

// Definizione della funzione isValidEmail che accetta un parametro email
function isValidEmail(email) {
  // Controllo se la stringa email è vuota
  if (email === "") {
    return false; // Se è vuota, restituisco false
  }

  // Ricerca della posizione del simbolo '@' all'interno della stringa email
  const atSymbolIndex = email.indexOf("@");
  // Controllo se '@' è presente, e se non è né il primo né l'ultimo carattere
  if (atSymbolIndex === -1 || atSymbolIndex === 0 || atSymbolIndex === email.length - 1) {
    return false; // Se una di queste condizioni è vera, restituisco false
  }

  // Ricerca della posizione dell'ultimo punto '.' all'interno della stringa email
  const dotIndex = email.lastIndexOf(".");
  // Controllo se il punto è presente, se viene dopo '@', e se non è l'ultimo carattere
  if (dotIndex === -1 || dotIndex <= atSymbolIndex || dotIndex === email.length - 1) {
    return false; // Se una di queste condizioni è vera, restituisco false
  }

  // Se tutte le condizioni sono state superate, l'email è considerata valida
  return true;
}

// Test della funzione per verificare la sua correttezza
console.log(isValidEmail("[email protected]"));  // Dovrebbe restituire true
console.log(isValidEmail("testexample.com"));   // Dovrebbe restituire false
console.log(isValidEmail("[email protected]"));         // Dovrebbe restituire false
console.log(isValidEmail("@example.com"));      // Dovrebbe restituire false

Abbiamo inserito questo codice il JSFiddle, un servizio online che serve per simulare il funzionamento di una pagina web. Abbiamo ovviamente inserito anche una parte di HTML, che server per costruire la struttura sulla quale si attiverà la funzione isValidEmail che abbiamo appena scritto.

In verità abbiamo definito anche un’altra funzione, visibile su JSFiddle, che serve per gestire i risultati e modificare il DOM, scrivendo un messaggio a schermo e colorandolo di verde o di rosso.

Il codice è disponibile qui, fai una prova e buon divertimento!

FAQ

Roberto Di Bartolomeo

Roberto Di Bartolomeo ha maturato una lunga esperienza professionale in ambito IT ed Organizzazione, rivestendo ruoli dirigenziali di CIO in grandi aziende nelle industries servizi HR, banking e pubblica amministrazione. Ingegnere elettronico, ha speso i primi anni della sua carriera in una società di consulenza internazionale ed ha conseguito un master alla Bocconi di Milano. E’ partner di EgoValeo e consulente per la Digital Transformation.