Corso di JavaScript

Primi Passi con JavaScript

 

Nella prima parte abbiamo introdotto brevemente gli oggetti e gli eventi. Vediamo come devono essere organizzate le istruzioni all’interno del codice HTML:

I tre elementi distintivi: Il corpo principale, Il gestore degli eventi, le funzioni

Così come in HTML anche Javascript, in grandi linee, ha la sua struttura che può essere organicamente suddivisa in tre elementi distinti: Il corpo principale, Il gestore degli eventi, le funzioni.
Cominciamo da quest'ultimo elemento.

Le funzioni

Le funzioni sono delle parti di codice che possono essere invocate o richiamate in qualsiasi momento si verifichi un evento proveniente sia dal corpo principale che eventualmente anche da un'altra funzione. E' corretto inserire le funzioni all'interno dell'intestazione del codice HTML, e quindi comprese tra <HEAD> e </HEAD>, in modo tale da permettere al browser di caricare subito in memoria queste parti di codice, con la finalità di averle immediatamente a disposizione.

Il corpo principale

Il corpo principale contiene le  istruzioni Javascript comprese tra <SCRIPT LANGUAGE=”Javascript”> e </SCRIPT> inserite subito dopo <BODY> in HTML.
All’interno del corpo principale inseriremo tutte le istruzioni del nostro programma, comprendendo eventualmente tutte le eventuali chiamate a funzioni già inserite nell’intestazione.

Il gestore degli eventi

L’interattività tra l’utente ed il programma viene fornita dal gestore degli eventi, il quale rileva in tempo reale tutti gli spostamenti del mouse, la pressione dei tasti del mouse e della tastiera ma anche di altri eventuali strumenti di input installati sulla macchina.
Vediamo ora un breve e semplice esempio:

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="Javascript">
   function Saluto()
   {
    window.alert("Salve, amici di SoftwarePlanet!");
   }
  </SCRIPT>
 </HEAD>
 <BODY>
  <FORM>
<input type=button value="Clicca per invocare la funzione Saluto()"  onClick="Saluto()">
  </FORM>
 </BODY>
</HTML>


In questo esempio è stato realizzato un bottone (<input type=button … ), alla cui pressione viene invocata la funzione Saluto() ( … onClick="Saluto()"> ), quest’ultima utilizza un METODO inserito all’interno della funzione: alert.

Per visualizzare questo esempio:
http://www.softwareplanet.net/MaterialeCorsi/CorsoJavaScript/Esempio-002.1.htm

I metodi

Un metodo è una specie di funzione appartenente ad un oggetto, ed è il sistema per manipolare o maneggiare le proprietà dell’oggetto.
In questo caso l’oggetto è window, il suo metodo è alert che consente di vedere a video una finestra di warning o di avvertimento. In termini pratici, alla pressione del bottone, verrà visualizzato al centro dello schermo ‘Salve, amici di SoftwarePlanet!’
I metodi, quindi, sono proprietà degli oggetti, e noi dobbiamo imparare a sfruttare tutte queste proprietà a nostro vantaggio.
Anche nella vita quotidiana utilizziamo dei metodi, a volte senza rendercene conto, per esempio supponiamo di avere un oggetto: la lampadina. Questo oggetto ha due possibilità, essere: accesa (ON) o spenta (OFF). Il metodo, per cui sarà possibile cambiarne lo stato è l’interruttore.
Se dovessimo avere questa situazione in Javascript, sintatticamente, e facendo una analogia con il metodo alert, potremmo scrivere in questo modo per accendere la luce:

lampadina.interruttore(“ON”); oppure lampadina.interruttore(1);

e scrivere così per spegnere la luce:

lampadina.interruttore(“OFF”); oppure lampadina.interruttore(0);

interruttore ,dunque, è il metodo dell’oggetto lampadina.

Adesso proviamo un altro semplicissimo esempio facendo conoscenza con il metodo write:

Il metodo write

Sul famoso manuale del linguaggio C (Kerninghan-Ritchie), ma anche su altri manuali di linguaggi di programmazione, uno dei primi esempi che viene realizzato è fare apparire la celebre frase: “Salve Mondo!”.
Proviamo a realizzare questo esempio in Javascript:

<HTML>
 <HEAD>

 </HEAD>
 <BODY>
  <SCRIPT LANGUAGE="Javascript">
    document.write(“Salve Mondo!”);
  </SCRIPT>
 </BODY>
</HTML>


Per visualizzare questo esempio:
http://www.softwareplanet.net/MaterialeCorsi/CorsoJavaScript/Esempio-002.2.htm

Nei linguaggi di programmazione ad oggetti, la notazione del punto interposta tra document e write indica l’appartenenza di quest’ultimo a document, come metodo.

Praticamente write è un metodo dell’oggetto document, in questo caso il suo scopo è di fare apparire sul browser la stringa di caratteri “Salve Mondo!” .
Infine al termine di ogni istruzione Javascript interpreta il punto e virgola come fine istruzione.

Finora abbiamo visto che Javascript è un linguaggio molto simile ad altri linguaggi di programmazione, la cui grammatica è molto semplice da acquisire. Potremmo azzardare questa definizione: “Javascript rispetta le direttive della programmazione strutturata, ma è basato sugli OGGETTI, che possiedono delle proprietà. Queste proprietà possono essere delle VARIABILI, e quindi hanno un determinato valore, oppure possono essere dei METODI, ovvero delle funzioni in grado di svolgere determinati compiti.”
Javascript è stato realizzato prevalentemente per arricchire il linguaggio di formattazione HTML. Le istruzioni Javascript sono di grande ausilio non solo per il WebDesigner, che potrà utilizzare le sue potenzialità per migliorare le pagine web, ma anche per il programmatore che avrà il controllo del linguaggio CLIENT-SIDE, ovvero dalla parte del browser.

Nella prossima parte, vedremo che esistono due tipi di Javascript: lato server (SERVER-SIDE), e lato client (CLIENT-SIDE).

 

Torna all'indice Generale del corso di Corso di JavaScript di Software Planet