Che cos’è JavaScript e come funziona?

6 Dicembre 2019

JavaScript è diventato un punto fermo nello sviluppo web moderno. Questo linguaggio potente si è evoluto in uno strumento essenziale per la comprensione di qualsiasi sviluppatore web.

JavaScript ha caratteristiche speciali che lo differenziano dai linguaggi di programmazione tradizionali. Analizzeremo cosa è, come funziona e cosa puoi farci. Analizziamolo.

Che cos'è JavaScript?

JavaScript è un linguaggio di scripting per il web. È un linguaggio interpretato, il che significa che non ha bisogno di un compilatore per tradurre il suo codice come C o C ++. Il codice JavaScript viene eseguito direttamente in un browser Web.

L'ultima versione della lingua è ECMAScript 2018, rilasciata a giugno 2018.

JavaScript funziona con HTML e CSS per creare app Web o pagine Web. JavaScript è supportato dalla maggior parte dei browser Web moderni come Google Chrome, Firefox, Safari, Microsoft Edge, Opera, ecc. La maggior parte dei browser mobili per Android e iPhone ora supporta anche JavaScript.

JavaScript controlla gli elementi dinamici delle pagine Web. Funziona con i browser Web e, più recentemente, anche con i server Web. Anche le API (Application Programming Interface) sono supportate da JavaScript, offrendo così più funzionalità.

Comprendere tutti i modi in cui funziona JavaScript è un po 'più semplice quando si capisce come funziona la programmazione Web, quindi impariamo di più.

Elementi costitutivi delle app Web

Esistono tre componenti che creano siti Web e app: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) e JavaScript. Ognuno ha un ruolo nella creazione di un'app Web.

HTML è un linguaggio di markup che crea lo scheletro della pagina web. Tutti i paragrafi, sezioni, immagini, titoli e testo sono scritti in HTML. Il contenuto appare sul sito Web nell'ordine in cui sono scritti in HTML.
CSS controlla lo stile e gli aspetti aggiuntivi del layout. Il CSS viene utilizzato per creare il design del sito Web creando colori, caratteri, colonne, bordi, ecc. Porta il sito Web da semplici elementi di testo a disegni colorati.
Il terzo elemento è JavaScript. HTML e CSS creano la struttura, ma non fanno nulla da lì. JavaScript crea attività dinamica sulla tua app. Lo scripting in JavaScript è ciò che controlla le funzioni quando si fa clic sui pulsanti, come vengono autenticati i moduli password, come viene controllato il supporto.

Tutte e tre le parti lavorano in armonia tra loro per creare app in scala reale. Sarebbe una buona idea saperne di più su HTML e CSS se non ti senti completamente a tuo agio con loro.

Come funziona JavaScript?

Prima di scrivere JavaScript è importante sapere come funziona sotto il cofano. Ci sono due pezzi importanti da imparare: come funziona il browser Web e Document Object Model (DOM).

Il browser Web carica una pagina Web, analizza l'HTML e crea dai contenuti il cosiddetto Document Object Model (DOM). Il DOM presenta una vista live della pagina Web al tuo codice JavaScript.

Il browser prenderà quindi tutto ciò che è collegato all'HTML, come immagini e file CSS. Le informazioni CSS provengono dal parser CSS.

HTML e CSS sono messi insieme dal DOM per creare prima la pagina web. Quindi, il motore JavaScript del browser carica i file JavaScript e il codice incorporato ma non esegue immediatamente il codice. Attende il completamento del caricamento di HTML e CSS.

Fatto ciò, JavaScript viene eseguito nell'ordine in cui è stato scritto il codice. Ciò comporta l'aggiornamento del DOM tramite codice JavaScript e il rendering dal browser.

L'ordine qui è importante. Se JavaScript non attendesse il completamento di HTML e CSS, non sarebbe in grado di modificare gli elementi DOM.

Cosa posso fare con JavaScript?

JavaScript è un linguaggio di programmazione completo che può fare la maggior parte delle cose che può fare un linguaggio normale come Python. Questi includono:

Dichiarare le variabili.
Memorizzazione e recupero di valori.
Definizione e invocazione di funzioni.
Definizione di oggetti e classi JavaScript.
Caricamento e utilizzo di moduli esterni.
Scrittura di gestori di eventi che rispondono agli eventi clic.
Scrivere codice server.
E altro ancora.

Avvertenza: poiché JavaScript è un linguaggio così potente , è anche possibile scrivere malware, virus e hack del browser per infliggerli agli utenti. Questi vanno dal furto di cookie del browser, password, carte di credito al download di virus sul tuo computer.

Utilizzando JavaScript

Diamo un'occhiata ad alcune basi di JavaScript con esempi di codice.

Dichiarare le variabili

JavaScript viene digitato in modo dinamico, il che significa che non è necessario dichiarare il tipo di variabili nel codice.

 let num = 5; let myString = "Hello"; var interestRate = 0.25;

operatori

aggiunta

 12 + 5 >> 17

Sottrazione

 20 - 8 >> 12

Moltiplicazione

 5 * 2 >> 10

Divisione

 50 / 2 >> 25

Modulo

 45 % 4 >> 1

Array

 let myArray = [1,2,4,5]; let stringArray = ["hello","world"];

funzioni

JavaScript può scrivere funzioni, ecco una semplice funzione che aggiunge numeri.

 function addNumbers(num1,num2){ return num1 + num2; } >> addNumbers(10,5); >> 15

Loops

JavaScript può eseguire loop per iterazione, loop come per loop e while loop.

 for(let i = 0; i < 3; i++){ console.log("echo!"); } >> echo! >> echo! >> echo!

 let i = 0; while(i < 3) { console.log("echo!"); i++; } >> echo! >> echo! >> echo!

Commenti

 // Writing a comment

 /*Writing a multi-line comment You can use as many lines as you like to break up text and make comments more readable */

In una pagina Web

Il modo più comune per caricare JavaScript in una pagina Web è utilizzare il tag HTML dello script . A seconda delle esigenze, è possibile utilizzare uno dei seguenti metodi.

Caricare un file JavaScript esterno in una pagina Web come segue:

 <script type="text/javascript" src="/path/to/javascript"></script>

È possibile specificare l'URL completo se javascript proviene da un dominio diverso dalla pagina Web come segue:
```
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
```

J
avaScript può essere incorporato direttamente nell'HTML. Ecco un

 <script type="text/javascript"> alert("Page is loaded"); </script>

Oltre a questi metodi ci sono modi per caricare il codice JavaScript su richiesta. In effetti, ci sono framework dedicati al caricamento e all'esecuzione di moduli JavaScript con dipendenze appropriate risolte in fase di esecuzione.

Questi sono argomenti più avanzati, in questo momento stai imparando le basi.

Snippet di codice JavaScript di esempio

Ecco alcuni semplici esempi di codice JavaScript per illustrare come viene utilizzato nelle pagine Web. Questi sono esempi di codice che funzionano con il DOM.

Quanto segue seleziona tutti gli elementi in grassetto nel documento e imposta il colore del primo su rosso.
```
 var elems = document.getElementsByTagName('b'); elems[0].style.color = 'red'; 
```

Vuoi cambiare l'immagine in un tag img ? Quanto segue associa un gestore eventi per l'evento click di un pulsante.

 <img id="myImg" src="prev-image.png"> <button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button>

Aggiornare il contenuto del testo di un elemento di paragrafo ( p )? Imposta la proprietà innerHTML dell'elemento come mostrato:

 <p id="first-para">Hello World</p> <button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button>

Questi esempi di codice offrono solo uno sguardo a cosa puoi fare usando JavaScript sulla tua pagina web. Esistono molti tutorial che possono insegnarti come programmare per iniziare. Puoi provarlo su qualsiasi pagina web, anche questa! Apri la tua console e prova del codice JavaScript.

Ora sai cosa fa JavaScript

Speriamo che questa introduzione abbia portato alcune intuizioni su JavaScript e ti entusiasmi della programmazione web. C'è molto altro da sapere su JavaScript. Una volta che ti senti più a tuo agio, perché non provare ad imparare come usare il Document Object Model ?

Leggi l'articolo completo: cos'è JavaScript e come funziona?