1 – Inizio
I requisiti per poter seguire questo corso sono conoscenze di:
- variabili
- espressioni elementari
- selezione (if else)
- cicli
- funzioni
- vettori
- struct
- html
- CSS
Il Javascript è un cosiddetto linguaggio di scripting che permette di aggiungere comportamenti ai tag html.
Tutto il codice java script (d’ora in poi abbreviato con js) viene inserito nel tag di apertura <script> e di chiusura </script>
<script language="JavaScript"></script>
anche se formalmente più corretto utilizzare type
<script type="text/javascript"></script>
Il tag <script> può essere inserito sia nell’ <head> che nel <body>
inseriamo il primo comando, alert, che stampa a video un messaggio nel browser
<script type="text/javascript"> alert("Questo è JavaScript!"); </script>
Come si può notare ogni istruzione js termina col punto e virgola.
Inoltre js è case sensitive, ovvero differenzia le maiuscole dalle minuscole, per ricordarsi i comandi una regola comune di js è che nei comandi che contengono 2 parole, la prima è in minuscolo la seconda inizia col maiuscolo (onClick). Mentre negli oggetti preconfezionati dal linguaggio (tipo l’oggetto Math) la prima è lettera è maiuscola:
alert('il valore pi greco è:' + Math.PI);
la prima parte dell’alert è una stringa alla quale concateno (col segno +) la proprietà PI costante dell’oggetto Math.
Le stringhe possono essere delimitate o dalle virgolette o dall’apice. Se dovessimo usare un carattere delimitatore (tipo ‘ o “) all’interno della stringa, basta farlo precedere da uno slash \
alert('Questo e\' Javascript');
oppure
alert("Questo e' Javascript");
In realtà alert non è un comando, ma un metodo di un oggetto predefinito del js chiamato window. Il linguaggio riesce a determinare in automatico l’oggetto contenitore e a sopperire alla sua mancata dichiarazione, la forma corretta sarebbe
window.alert("Quest e' Javascript");
Vediamo un esempio del metodo moveTo sempre dell’oggetto window che serve a spostare la finestra del browser secondo le coordinate specificate come argomenti window.moveTo(x,y)
<script type="text/javascript"> for (i=1;i<=300;i++) window.moveTo(Math.round(Math.random()*300), Math.round(Math.random()*300)); </script>
La prima riga è il ciclo for che come parametri vede l’inizializzazione (i=1) , seguita dalla terminazione (i<=300) e si conclude con l’ incremento contatore (i++) . Il ciclo termina quando la condizione della terminazione è soddisfatta (in questo esempio viene seguito 300 volte). L’incremento i++ incrementa di una unità il valore della variabile i.
Il valore della coordinata x, nel ns caso, è Math.round(Math.random()*300). Random genera un numero casuale decimale compreso tra 0 e 1. Viene poi moltiplicato per 300 e tramite il metodo round viene approssimato al numero intero più vicino.