Imparare a programmare in JavaScript è semplice e divertente.
In questo tutorial JavaScript troverai tantissimi esercizi ed esempi per ogni argomento trattato per apprendere seguendo la tecnica di ‘imparare facendo’.
Apprendere le basi del linguaggio JavaScript con questo tutorial sarà dunque semplicissimo, creativo e divertente!
Iniziamo con qualche breve concetto di teoria!
Corsi registrati su
C, C++, Python, JavaScript
Corsi in diretta per la formazione di Front End Developer e Back End Developer
Programmare in JavaScript – definizioni
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.
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.
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!).
Conclusioni
Abbiamo semplicemente spiegato come iniziare a programmare in JavaScript nelle prossime lezioni continueremo il nostro tutorial spiegando pian piano i concetti base e mettendoli in pratica.
Alcuni link utili
Indice argomenti tutorial JavaScript
Come trovare immagini per il sito web
Quali colori scegliere per un sito web
Quali font scegliere per un sito web
