Questo tutorial JavaScript è ricco di numerosi script per ogni argomento trattato. Apprendere le basi del linguaggio JavaScript con questo tutorial sarà dunque semplicissimo, creativo e divertente!

JavaScript è un linguaggio interpretato. Questo vuol dire che non è compilato, ma ogni comando viene eseguito direttamente nel browser del client (cioè di chi sta visitando la pagina web).

JavaScript è, difatti, un linguaggio utilizzato nella programmazione web lato client, mentre nella programmazione web lato server si utilizzano maggiormente linguaggi come ad esempio PHP, Python, Ruby o Perl.


Introduzione al tutorial

JavaScript è un linguaggio veloce e performante e si integra perfettamente con HTML5. È orientato agli oggetti ed agli eventi, anche se in modalità diversa rispetto a linguaggi come Java oppure C++.

Infatti si dice che JavaScript è orientato ai prototipi, perché ciascun oggetto eredita funzionalità da un altro oggetto definito prototipo.

Il successo di JavaScript è dovuto anche alla presenza di numerose librerie e framework come jQuery, Vue, React, AngularJS ecc.., che consentono di sviluppare potenti applicazioni web.

Nelle successive lezioni del tutorial JavaScript, presente sulla piattaforma Coding Creativo, studieremo delle applicazioni che utilizzano alcune librerie e framework JavaScript.

Citiamo alcuni framework tra i più importanti:

Bootstrap https://getbootstrap.com/ serve per i CSS ma si possono integrare le DATA API.

Pure https://purecss.io/

Backbone.js – https://backbonejs.org/

AngularJS https://angularjs.org/

Ember https://emberjs.com/

Canjs https://canjs.com/


Perché inserire JavaScript all’interno delle pagine HTML?

I motivi possono essere molteplici:

Validare dei form (moduli html);

Gestire degli eventi all’interno di una pagina;

Aggiungere degli effetti alle pagine (tipo slideshow, photogallery);

Aprire finestre aggiuntive, soprattutto a scopo pubblicitario;

Realizzare un menù responsive per i dispositivi mobili;

Fornire messaggi di risposta in base a delle scelte effettuate

Per questo e per tanti altri motivi è necessario imparare JavaScript!


Come viene inserito JavaScript all’interno di una pagina HTML?

Ci sono tre modalità di inserimento:

– direttamente nella pagina html come blocchi di codice racchiusi tra il tag script;

– oppure in un foglio JavaScript esterno che poi viene collegato alla pagina html (la modalità consigliata per la maggior parte delle volte);

– infine anche in modalità in linea, cioè all’interno del tag html (ormai in disuso).

Prima modalità – inserimento nella stessa pagina html

Il codice JavaScript viene incluso nella pagina web con il tag <script>…</script> spesso dopo l’apertura di <head> e prima della sua chiusura </head>, ma può essere inserito anche in altri punti della pagina.

Utilizziamo anche l’attributo type che sta ad indicare il tipo di codice che si sta utilizzando, nel nostro caso text/javascript, come indicato nell’esempio sotto:

<script type="text/javascript">...</script>

Tra il tag di apertura e quello di chiusura inseriamo le funzioni che devono essere eseguite e che poi saranno richiamate nella pagina html.

<script type="text/javascript">
   function nomeFunzione(parametri){
     ...
   }
</script>

Seconda modalità – inserimento in un file esterno

In questo caso si inserisce il collegamento al file esterno, la maggior parte delle volte, prima della chiusura del body, in modo da garantire il caricamento del DOM.

Utilizziamo sempre il tag script con l’attributo type e l’attributo src dove indichiamo il percorso del file.

<script type='text/javascript' src='script.js'></script>

Terza modalità – inserimento in linea

Questa modalità è ormai in disuso, ma è utile sapere che il codice può essere inserito ad esempio in un tag html. Ecco un semplice esempio:

<h1 onclick="changeText('Coding Creativo')">....</h1>

Continuiamo il nostro tutorial JavaScript facendo un altro semplice esempio di utilizzo:

<!DOCTYPE html>
<html lang="it">
  <head>
    <title>Coding Creativo</title>
    <script type="text/javascript">
        window.alert("Benvenuto su coding creativo");
    </script>
  </head>

 <body>
   <header>
     <h1>Coding Creativo</h1>
     <h2>Fare coding divertendosi</h2>
   </header>

   <article>
     <h2>
       <a name="scratch">Scratch</a>
     </h2>
     <p>
       Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. <br>L'interfaccia grafica è molto intuitiva e semplice da usare. <br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch...
    </p>
   </article>
   <footer>
     <p>Creato da Coding creativo</p>
    </footer>

 </body>
</html>

Salviamo la nostra pagina e vedremo il messaggio come da figura sotto.

javascript tutorial

Non appena cliccheremo l’ok, si aprirà il nostro sito web. Quindi in questo modo abbiamo inserito, una semplice finestra che viene visualizzata prima dell’apertura del sito (questa pratica comunque non è molto utilizzata, ma serve solo da primo semplice esempio!).

Continueremo il nostro tutorial JavaScript nelle prossime lezioni parlando delle finestre di messaggio, JavaScript alert.

Alcuni link utili

Indice argomenti tutorial JavaScript

Template responsive con html

Come creare un css responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web