Ripartire da Javascript

E’ un po’ di tempo che non scrivo più sul blog, lavoro e vita purtroppo non mi hanno lasciato il tempo che speravo di poter dedicare a questa attività.

In questa articolo però cerco di riprendere il ritmo e scrivere qualcosa sperando che sia utile.

Premessa

Una carenza che ho notato spesso in molti programmatori esperti è l’assenza di interesse per javascript, questa lacuna è normalmente spiegabile se il contesto di lavoro limita o addirittura evita ogni contatto con questa tecnologia.

Altro aspetto da considerare è che oggi giorno son disponibili innumerevoli librerie e framework che permettono di produrre codice qualitativamente valido in poco tempo senza doversi porre troppi dubbi sul reale funzionamento di un linguaggio.

Perchè imparare javascript

A questo punto è legittimo chiedersi perchè sia importante conoscere meglio javascript e il suo funzionamento, in risposta a questo quesito basta pensare al fatto che questo linguaggio ha come contesto naturale il browser ed insieme ad HTML e CSS costituisce la base per lo sviluppo front end di qualunque sito. Oltre a questo negli ultimi anni javascript ha trovato innumerevoli applicazioni come su NodeJs o utilizzato come solida base per applicazioni mobile. Altri linguaggi come actionscript condividono molte logiche è quindi corretto dire che i contesti di applicazione di questo linguaggio sono molteplici e diffusi.

Prima di cominciare

Le ultime premesse che mi sento di fare prima di passare al codice sono solo due:

1) Javascript è un linguaggio intepretato che nasce originariamente nel browser, Java è un universo assolutamente diverso. Il fatto che javascript abbia questo nome è dovuto semplicemente al fatto che nacque nel 1995 per Netscape 2.0 durante gli sviluppi per l’integrazione di un linguaggio di scripting per il browser che si contrapponesse a C per manifestare un ulteriore differenza rispetto al concorrente diretto del tempo Internet Explorer, da qui la scelta di essere più vicini a livello sintattico a Java rispetto che ad altri linguaggi. Il fatto che Javascript abbia degli aspetti sintattici simili a Java non vuol dire che questi due mondi abbiamo molto in comune. L’importante è ricordare che sono due linguaggi assolutamente diversi per scopo e contesto.

2) Javascript è un linguaggio di scripting che viene interpretato ed eseguito dal browser, questo vuol dire che per comprendere meglio javascript bisogna conoscere meglio i browser, l’html e il css. Queste nozioni sono comunque fondamentali nella quotidiana attività di sviluppo.

Per questo tutorial ho utilizzato sublime text 2 con l’aggiunta di emmet (precedentemente noto come zen coding), una valida alternativa come editor può essere notepad++, in realtà potete utilizzare qualunque editor di testi desiderate, le preferenza è normalmente dovuta all’abitudine.

Partiamo col codice (era ora…)

Partiamo con un esempio semplice, un file index.html con una strttura HTML5 basilare per concentrarci meglio su Javascript, come da esempio:

<!doctype html>
<html lang="it">
<head>
 <meta charset="UTF-8" />
 <title>Javascript 0.0.1</title>
</head>
<body>
 prime prove con javascript
</body>
</html>

La pagina è un semplice file html con all’interno la scritta “prime prove con javascript”.

Per aggiungere del codice javascript alla nostra pagina possiamo utilizzare il tag a chiusura esplicita <script> posizionandolo all’interno del tag <head>

<!doctype html>
<html lang="it">
<head>
 <meta charset="UTF-8" />
 <title>Javascript 0.0.1</title>
 <script></script>
</head>
<body>
 prime prove con javascript
</body>
</html>

In questo modo definiamo una porzione della pagina in cui possiamo scrivere codice javascript in modo che il browser interpreti ed esegua correttamente il codice.

Aggiungiamo all’interno del tag script una semplice istruzione javascript alert() con un messaggio a piacere.

<!doctype html>
<html lang="it">
<head>
 <meta charset="UTF-8" />
 <title>Javascript 0.0.1</title>
 <script>alert("Ecco un popup!");</script>
</head>
<body>
 prime prove con javascript
</body>
</html>

Aprendo il file nel browser vedremo un popup con la scritta “Ecco un pop up!”

Da questo semplice esempio possiamo già notare una caratteristica fondamentale del linguaggio. Aprendo il browser quello che vedremo sarà nell’ordine:

  1. il popup
  2. la scritta nella pagina html

Questo avviene perche alert() interrompe il rendering della pagina fino a che non viene chiuso il popup, grazie a questa osservazione possiamo dedurre che il codice javascript in assenza di eventi viene eseguito nel nel momento in cui il browser legge il codice, lo interpreta e lo esegue.

Per confermare questa deduzione proviamo a spostare il tag <script> in un altro punto della pagina, prima della chiusura di body, come segue:

<!doctype html>
<html lang="it">
<head>
 <meta charset="UTF-8" />
 <title>Javascript 0.0.2</title>
</head>
<body>
 prime prove con javascript
 <script>alert("Ecco un popup!")</script>
</body>
</html>

In questo caso aprendo la pagina notiamo come prima venga renderizzato il testo “prime prove con javascript” e dopo appare il popup.

Questo esempio ci dimostra che:

  1. possiamo inserire un tag script sia nel tag head che nel tag body
  2. la posizione di uno script definisce il momento di esecuzione

Volendo, è possibile eseguire il codice javascript richiamando un file esterno.

Proviamo a creare un file script.js e a scrivere all’interno il nostro codice javascript

alert("Ecco un popup!")

Nel file html possiamo modificare il tag script per richiamare il file

<!doctype html>
<html lang="it">
<head>
 <meta charset="UTF-8" />
 <title>Javascript 0.0.2</title>
</head>
<body>
 prime prove con javascript
 <script src="script.js"></script>
</body>
</html>

In risultato sarà identico con l’unica differenza che si aggiunge una chiamata al file script.js quando viene caricata la pagina index.html.

In un contesto reale dove il codice javascript sarà molto e magari suddiviso in più file per questioni di ordine sarà utile mettere le chiamate ai file javascript a fondo pagina in modo da permettere prima il caricamento dell’html, immagini e css ed in seguito del javascript necessario.

Un esempio di questa soluzione è presente nel file index.html di boilerplate.

Nel caso utilizziate una versione precedente al 5 per l’HTML o una qualsiasi versione dell’XHTML è utile ricordare di aggiungere l’attributo type al tag <script> per definirne il mime type corretto

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

Per l’XHTML è utile ricordare anche l’utilizzo di CDATA per eveitare errori nella validazione o problemi sull’interpretazione del javascript in caso di doctype strict.

<script type="text/javascript">
//<![CDATA[
codice javascript
//]]>
</script>

Per questa introduzione è tutto, la prossima volta inizieremo a parlare di variabili e sintassi. Per qualunque dubbio, scrivete un commento o direttamente a info@mauroaccornero.it

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>