Javascript: cosa è e a cosa serve

JavaScript: cosa è, a cosa serve e mini tutorial

JavaScript: cosa è

JavaScript è un linguaggio di programmazione ad alto livello, orientato agli oggetti e interpretato, spesso associato al web development. Nato per aggiungere interattività alle pagine web, è rapidamente diventato uno dei linguaggi più utilizzati al mondo.

È 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.

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.

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!

Condividi questa pagina: