Indice del corso

Il programma HelloWorld.

Di solito, quando si studia un linguaggio, per introdurre le prime nozioni e i primi concetti, si inizia con un semplice programma che invia sul dispositivo di output di default una stringa contenente il messaggio "Hello World" o una qualunque altra stringa di saluto.

Ma prima ancora ci viene spiegato da dove scaricare il programma, come installarlo, quali modifiche apportare ai file di configurazione di sistema affinchè il proprio PC possa eseguire il nostro codice. Tutte queste cose non sono necessarie. JavaScript "gira" all'interno del browser, Chrome, Safari, Edge o qualunque altro preferiamo utilizzare.

I programmi scritti in JavaScript sono interpretati quindi non è richiesta alcuna fase di compilazione ne di preparazione di un file intermedio come in Java, e, altra differenza, per mandarlo in esecuzione non dovremo invocare alcun interprete ne passarlo ad un eseguibile.

Dovremo semplicemente inserire il codice da eseguire in un file .html all'interno delle tag < script > ... < /script > che, a loro volta, possono essere inserite in qualunque altra coppia di tag. In fase di presentazione della pagina, quando il browser incontra un'istruzione all'interno di uno script, si limita ad eseguirla. Il contesto di esecuzione di JavaScript è, in prima battuta, il documento .html in cui si trova lo script in esecuzione.

Così, ecco un esempio di programma HelloWord:

			<h2 class = "JSOutput">
				<script>
					document.write('<span>Hello world!</span>'); 
				</script>
			</h2>
	

Questo è l'output che produce:

Per quanto semplice, lo script "HelloWorld" merita un'analisi accurata. Ma prima è necessario fare un passo indietro:

Verifica dell'abilitazione del browser all'esecuzione di JavaScript.

Abbiamo detto che JavaScript "gira" all'interno del browser dell'utente. Questo significa che i browser contengono un interprete di JavaScript. Normalmente i browser sono abilitati all'esecuzione degli script. Se la scritta "Hello World!!!" compare sulla tua pagina, significa che il browser che stai utilizzando è abilitato. Se così non fosse, puoi abilitarlo. Come fare è descritto in molti documenti presenti nel web. Qui potrai trovare come si abilita JavaScript nel browser.

Analisi del "programma" HelloWord.

Chiamare programma l'unico statement dello script che visualizza la stringa "Hello World!!!" sembra decisamente eccessivo, ma abbiamo bisogno di un punto di partenza per presentare il linguaggio. Qualcosa possimo dire:

1. Non esiste un punto di inizio del programma. A differenza di Java o di C non c'è bisogno di una funzione main() "cercata" da JavaScript per mandare in esecuzione il programma. L'interprete JavaScript è sempre in esecuzione all'interno del browser;
2. Gli statement di JavaScript terminano con il carattere ";" come in Java o in C;
3. document.write("Hello World!!!") si comporta come una funzione che inserisce la stringa "Hello World!!!" nel documento corrente nella posizione del codice HTML occupata dallo script in cui è stata inserita. Chi possiede qualche nozione sulla programmazione ad oggetti riconosce che write() è un metodo dell'oggetto document, ma allo stato attuale ci basta sapere che abbiamo a disposizione questa funzione per scrivere all'interno del documento.
4. Le stringhe sono una sequenza di caratteri racchiuse fra doppi apici, ".
5. Il browser prima esegue lo script poi visualizza l'elemento in cui lo script è racchiuso; lo script produce una stringa di testo a cui il browser applica le regole di stile dell'elemento in cui la stringa è inserita.

La funzione helloWorld.

Vediamo ora un altro modo per fare la stessa cosa.

Sembra inutilmente più complicata, e per un compito così facile può in effetti esserlo. Ma, mano a mano che ci addentreremo in maggiori particolari del linguaggio e realizzeremo funzioni più complesse, ne capiremo l'utilità.

Il codice della funzione helloWorld sarà scritto in un file esterno JavaScript_1.js referenziato in questo modo nel file .hmlt all'interno della tag:
       <script src="JavaScript_1.js"></script>.

Il file JavaScript_1.js contiene i seguenti statement:

				function helloWorld(saluto){
					document.write(saluto);
					return;
				}
				

Ora, in qualsiasi tag del file .html potrò invocare l'esecuzione di hello(saluto) inserendo il seguente script:

< script > helloWorld("Ciao Studente!");< /script > come, ad esempio, nell'elemento h3 che segue:

Analisi della funzione "helloWord.

Prima di analizzare il codice della funzione helloWord eseminiamo i seguenti aspetti:

1. La funzione helloWorld è scritta all'interno di un file esterno al documento html. Nel caso di questo documento, nel file JS_01.js. L'estensione dei file contenente codice JavaScript è js.
2. Il collegamento fra il documento html e il file js si ottiene con l'elemento script, assegnando all'attributo src il percorso completo del file js, come in src=JS_01.js.
3. Ho inserito la tag script nella sezione head del documento html, ma avrei potuto inserirla in qualsiasi altro punto.
4. Un file html può referenziare un numero qualsiasi di file js.
5. Nel caso di file js molto grandi, il loro caricamento potrebbe rallentare il caricamento della pagina. Per ovviare a questo inconveniente, nell'elemento script si può inserire l'attributo async che rende il caricamento del codice JavaScript asincrono rispetto al caricamento del codice html.
6. L'uso dell'attributo async in un esempio come questo, in cui JavaScript "costruisce" un elemento html mentre la pagina viene caricata potrebbe portare ad un errore. L'elemento html potrebbe essere analizzato prima del completamento del caricamento del codice js che dovrebbe "costruirlo".
7. Nel file JavaScript_1.html ho inserito la sola funzione helloWorld. Potrei inserirne quante ne voglio.
8. La dichiarazione di funzione consiste di: parola chiave function, nomeFunzione, (arg1,...,argn). La lista degli argomenti può essere omessa ma non la coppia di parentesi tonde, {codice della funzione}
9. Il codice della funzione è formato da un blocco di statement, racchiusi fra una coppia di parentisi graffe,{...} ognuno dei quali finisce con un ;
10. La funzione helloWorld si aspetta un parametro, la stringa che sarà visualizzata dal metodo write dell'oggetto document. Questo consente di utilizzarla in più posizioni con formule di saluto diverse.
11. Le funzioni terminano con lo statement return;. Se lo si omette il codice non funziona;
12. La chiamata alla funzione, dal documento html, deve essere fatta all'interno di un elemento script con lo statement helloWorld("stringa di caratteri");. Se ometto i doppi apici ", o se ometto il ; il programma non funzionerà, ma non mi sarà segnalato alcun errore. Negli esercizi vedremo un primo metodo per il debug del codice.

Una versione un po più complicata del programma HelloWorld.

Per sottolineare subito un aspetto importante di JavaScript esaminiamo il seguente script:

			<script>
				document.write('<div class = "JSOutput">');
				document.write('<p style='text-align:center;'>Hello world!</p>'); 
				document.write('<p>Benvenuti al corso di JavaScript</p>'); 
				document.write('<p>Claudio Minelli</p>)';
				document.write('</div>');
			</script>

Questo è l'output che produce:

Quello che ho voluto mostrare con questo esempio è come JavaScript possa produrre codice HTML completo di attributi e proprietà di stile.