Introduzione
JavaScript non ha bisogno di presentazioni. È uno dei linguaggi di programmazione più popolari per lo sviluppo web. Funziona in modo simile a HTML e CSS. Tutti questi linguaggi aiutano a progettare e sviluppare applicazioni e programmi basati sul web.
Quindi, in che modo JavaScript è utile in particolare? Con l'aiuto di JavaScript, puoi rendere le tue applicazioni web e le tue pagine web piuttosto interattive. Non c'è spazio per l'autocompiacimento nella sfera moderna. Devi catturare l'attenzione dei tuoi spettatori nei primi secondi e mantenerli coinvolti. Non c'è dubbio che un web design interessante e reattivo sia uno dei modi migliori per farlo. Fortunatamente, la maggior parte dei browser supporta JavaScript. Può essere eseguito sul tuo browser con l'aiuto di alcuni motori integrati.
Aggiungere JavaScript a HTML
Se desideri utilizzare file JavaScript per la tua app web, devi eseguirli fianco a fianco con il markup HTML. Ci sono due modi per aggiungere JavaScript a HTML. Un approccio consiste nel farlo inline all'interno di un documento HTML. L'altro modo è aggiungerlo come file separato. Questo file verrà scaricato insieme al documento HTML.
In questo tutorial, esploreremo in dettaglio come aggiungere JavaScript a HTML utilizzando questi due metodi.
Come aggiungere JavaScript ai documenti HTML inline
Per prima cosa, vedremo come aggiungere JavaScript a un documento HTML inline. Per fare questo, devi utilizzare il tag HTML dedicato. Si tratta di <script>. Questo tag avvolge il codice JavaScript. Puoi posizionare il tag in qualsiasi punto del tuo markup HTML. Il punto in cui lo posizioni dipende da quando desideri che JavaScript venga caricato.
Ad esempio, puoi posizionarlo nella sezione <head>, nella sezione <body> o anche dopo il tag di chiusura </body>. Se desideri tenere JavaScript lontano dal contenuto principale del codice HTML, è meglio inserire il tag nella sezione <head>. Questa conterrà il codice JavaScript. D'altra parte, potresti volere che il tuo codice JavaScript venga eseguito all'interno del layout della tua pagina web. In tal caso, dovresti posizionare il tag nella sezione <body>. Lo farai se, ad esempio, utilizzi document.write per generare contenuti.
Un modo migliore per capirlo sarebbe attraverso un esempio con del codice. Considera il seguente documento HTML vuoto. Il titolo del browser di questo documento è Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Come puoi vedere, qui non c'è traccia di JavaScript. Finora il documento contiene solo il markup HTML. Ora, vorremmo aggiungere del codice JavaScript inline per farlo caricare ed eseguire simultaneamente. Considera la seguente porzione di codice JavaScript:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
In base al codice sopra indicato, stiamo abilitando la nostra pagina web a mostrare un avviso con la data di oggi. Quindi, indipendentemente da quando il visitatore avvia il sito, la pagina mostrerà la data corrente.
Ora, per aggiungere questa porzione di codice JavaScript al documento HTML, utilizzeremo il tag <script>. Prima di tutto, devi aggiungere il codice JavaScript tra i tag <head>. Questo indica alla pagina web che questo particolare codice deve essere caricato prima degli altri contenuti della pagina. Puoi aggiungere il codice sotto i tag <title>. Ecco come fare:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La data di oggi</title> <script> let d = new Date(); alert("La data di oggi è " + d); </script> </head> <body> </body> </html> |
Il tuo codice JavaScript è ora aggiunto. La tua pagina web eseguirà e caricherà questo script prima del resto della pagina. Quando avvii il tuo sito, riceverai un avviso con la data corrente, qualcosa del genere:
Questo è il modo in cui aggiungeresti il codice alla sezione <head> del documento HTML. L'alternativa sarebbe aggiungere lo script all'interno o all'esterno dei tag <body>. Come vedrai nell'esempio seguente, aggiungeremo la porzione di codice dopo la sezione <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La data di oggi</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>La data di oggi è " + d + "</h1>" </script> </body> </html> |
Come risultato di questa modifica, vedrai qualcosa di simile ricaricando la pagina:
Come aggiungere JavaScript a HTML con un file JavaScript separato
I piccoli script JavaScript funzionano bene con i file HTML. Questo perché vengono eseguiti interamente su una sola pagina o meno. Se stai lavorando con script più grandi che occupano più pagine, il file potrebbe diventare molto difficile da comprendere. Ecco perché potrebbe essere necessario aggiungerlo come file JavaScript separato. Il file verrebbe caricato contemporaneamente al documento HTML.
In questa sezione, vedremo come aggiungere JavaScript a HTML utilizzando un file separato. Il codice è solitamente ospitato in uno o più file .js. Il documento HTML farà riferimento a questi file come a qualsiasi altra risorsa esterna. I motivi per cui potresti voler utilizzare un file JavaScript separato sono molti. Principalmente, rende il codice molto più facile da leggere e comprendere. Per non parlare del fatto che i file separati consentono alle pagine memorizzate nella cache di caricarsi rapidamente e sono anche relativamente più facili da mantenere.
Per sfruttare questi vantaggi, devi sapere come collegare i due elementi tra loro: il file JavaScript e il documento HTML. Per aiutarti a capire, prenderemo l'esempio di un piccolo progetto web. Questo ipotetico progetto contiene un file index.html principale nella root, style.css nella directory css/ e script.js nella directory js/. Ecco il nostro piccolo progetto:
|
1 2 3 4 5 6 7 8 9 10 11 |
progetto/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Per il nostro markup HTML, useremo il documento che abbiamo usato in precedenza:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La data di oggi</title> </head> <body> </body> </html> |
Ora che abbiamo i nostri due documenti, possiamo iniziare a collegarli. Dobbiamo aggiungere il codice JavaScript relativo alla data al file script.js. Lo aggiungerai come intestazione <h1> come segue:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>La data di oggi è " + d + "</h1>" |
Per collegare il codice al documento HTML, aggiungerai un riferimento allo script. Il riferimento dovrebbe essere presente all'interno o al di sotto della sezione <body> del modello HTML. Ecco il codice che utilizzerai qui:
|
1 |
<script src="js/script.js"></script> |
Come puoi vedere, stiamo usando il tag <script>. Il tag indica il file script.js che si trova nella directory js/ del progetto. Ecco come apparirà il codice nel documento HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La data di oggi</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Se vuoi, puoi apportare alcune modifiche stilistiche per abbellire la tua pagina. Ad esempio, aggiungiamo un colore di sfondo all'intestazione <h1>. Faremo questa modifica nel file style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Poiché la modifica deve essere mostrata nell'intestazione, faremo riferimento ad essa nella sezione <head> del documento HTML. Ecco come farai riferimento a questo file CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La data di oggi</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Ora che abbiamo inserito i riferimenti richiesti, puoi visualizzare le modifiche. Carica il file index.html nel tuo browser e vedrai una pagina come questa:
Se desideri aggiornare il codice, puoi modificare tutte le tue pagine da un'unica posizione. Questo rende la manutenzione delle pagine web molto semplice. Questo è il vantaggio di utilizzare un file separato per i tuoi script JavaScript.
Conclusione
Speriamo che questo tutorial ti abbia aiutato a saperne di più sul processo di aggiunta di JavaScript all'HTML. Abbiamo visto come farlo inline in un documento HTML e come aggiungerlo come file .js. Ora che conosci le basi, puoi fare molto di più con JavaScript in HTML.
Ecco alcune risorse dal nostro blog che ti aiuteranno a utilizzare ulteriormente JavaScript:
- Se stai creando la tua applicazione web, dai un'occhiata a alla nostra guida su come scegliere la migliore configurazione del server.
- Se vuoi imparare come configurare un blog con Ghost, dai un'occhiata a questo tutorial.
- Dai un'occhiata a questo tutorial per imparare a installare Node.js su Ubuntu 18.04.
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.