Tutorial JavaScript

Questo tutorial JavaScript è ricco di numerosi script per ogni argomento trattato, in questo modo sarà quindi più semplice apprendere il linguaggio JavaScript.

JavaScript è un linguaggio interpretato. Questo vuol dire che non viene compilato, dunque ogni comando viene eseguito direttamente dal browser.

Infatti è un linguaggio utilizzato nella programmazione web lato client, mentre nella programmazione web lato server si utilizzano linguaggi come ad esempio PHP o ASP.NET.


Introduzione al tutorial

JavaScript è un linguaggio veloce e performante e si integra perfettamente con HTML5.

JavaScript è un linguaggio orientato agli oggetti e agli eventi, anche se in modalità diversa rispetto a Java o 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 come JQuery, JQuery UI, D3, JCarousel, Validator, ecc.., che consentono di sviluppare potenti applicazioni web.

Vedremo, nelle altre lezioni di questo piccolo tutorial JavaScript, degli esempi di applicazioni utilizzando le sue librerie.

Un’altra caratteristica che ha contribuito al successo sono i numerosi framework. Ne cito alcuni:

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/

Vi farò vedere l’uso di qualche framework negli esempi più avanti.


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.

Può essere inserito direttamente nella pagina stessa come blocchi di codice, oppure in un foglio JavaScript esterno che poi viene collegato, oppure in modalità in linea, cioè all’interno del tag.

Prima modalità di inserimento nella stessa pagina

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.

Come attributo del tag script utilizziamo principalmente type che sta ad indicare il tipo di codice che si sta utilizzando, in questo caso si avrà:

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

Tra il tag di apertura e quello di chiusura inseriamo le funzioni che devono essere eseguite.

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

Seconda modalità di inserimento in un file a parte

In questo caso si inserisce il collegamento sempre tra il tag di apertura <head> e il suo tag di chiusura.

Utilizziamo sempre il tag script, dove nell’attributo src indichiamo il percorso del file.

<script type='text/javascript' src='jquery.js?ver=1.12.4'></script>

Terza modalità di inserimento in linea

Può essere inserito ad esempio in un tag.

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

Continuiamo il nostro tutorial JavaScript facendo un 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 funge 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


Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *