JavaScript

Esempi di javascript

Cliccando sui file indicati vengono avviati i documenti contenenti programmi in javascript di cui a lato è indicato il "codice sorgente" (che potresti visualizzare anche usando il menu View/Visualizza del browser).
Se gli script non si avviano potrebbe essere che tra le opzioni del browser sia stata disattivata l'esecuzione degli script (in tal caso controlla le impostazioni del browser ed eventualmente modificale; è utile, poi, almeno quando lavori con gli script, attivare l'opzione di controllo-errori/debugging degli script).
Per informazioni di base sull'Html clicca qui. Una guida completa a JS la puoi trovare qui. Molti esempi li trovate qui e qui (per le rappresentazioni grafiche vedi qui).

Link al file codice sorgente del file

om1
<html> <head> <script language="javascript"> function Calcola() { t = document.Perc.t.value; d = document.Perc.d.value; document.Perc.p.value = 100/t*d } </script> </head> <body> <center> Metti <i>Totale</i> e <i>Dato</i>. Clicca e ottieni <i>Percentuale</i> <form name="Perc"> Totale = <input type="text" name="t" value="" size=10> Dato = <input type="text" name="d" value="" size=30> <br/> Percentuale = <input type="text" name="p" value="" size=30> (%)<br/> <input type="button" value="clicca" onClick="Calcola()"> </form> </center> </body> </html>

Corrisponde al primo esempio di programma in QBasic della voce Calcolatore 2, e al programma in R presente nel paragrafo successivo.
Se osservi il documento che ottieni cliccando om1 vedi che contiene testi e caselle.
Il contenuto della pagina è quello che nel codice della pagina è compreso tra i "tag" <body> e </body>. I tag <center> e </center> fanno sì che il contenuto sia centrato.
La parte del documento organizzata in caselle (modulo) è tra i tag <form> e </form>; essa forma un oggetto (ossia un componente) a cui, con la proprietà name viene dato nome "Perc". Le caselle sono dei sotto-oggetti del modulo (considerabili anche come sue ulteriori proprietà) specificati con i tag <input>; a ciascuna viene dato un nome ed altre proprietà: una dimensione e un tipo di contenuto.
Il tag <br/> indica un "a capo".
Il bottone è il sotto-oggetto di tipo "button". L'attributo "onClick" specifica che se si verifica l'evento "pulsante cliccato" viene avviata l'azione (o metodo) "Calcola()" descritta dalla omonima function (così in Javascript vegono chiamati i sottoprogrammi, ossia delle sequenze di istruzioni a cui è stato dato un nome in questo caso "Calcola" - mediante il quale possono essere richiamate).
Il programma in senso stretto è quello racchiuso tra i tag <script> e </script>. In questo caso lo script è descritto non nel corpo della pagina-web, ma nella intestazione, compresa tra i tag <head> e </head>, ed è costituito solamente dalla function Calcola(); in questo modo il sottoprogramma viene caricato subito, al momento della apertura del file. Ricordiamo che nelle istruzioni di JS lettere diverse solo per la dimensione (come "a" e "A") sono considerate diverse.
Il contenuto della function è delimitato da "{" e "}". All'interno le istruzioni (che in questo caso sono tutte assegnazioni) sono delimitate da ";". La presenza di un "a capo" senza ";" o "}" non basta per delimitare una istruzione.
Le prime due assegnazioni leggono i contenuti (ossia i valori: value) delle caselle di nome "t" e "d" del modulo di nome "Perc". La terza mette un valore nella casella "p". Nelle assegnazioni è presente document: in questo modo viene indicata la pagina web attualmente visualizzata. In breve: document.Perc.t.value indica la proprietà "value" della proprietà (o sotto-oggetto) "t" della proprietà (o sotto-oggetto) "Perc" dell'oggetto "document".

om2
<script language="javascript"> function Cambia() { m = document.monete.I.value; s=''; a=0; b=; c=0; if (m==500) {a=2; b=1; c=0} else { if (m==200) {a=0; b=2; c=0} else {if (m==100) {a=0; b=0; c=2} else {s=m} }} for (i=0; i<a; i++) {s=s+' 200'} for (i=0; i<b; i++) {s=s+' 100'} for (i=0; i<c; i++) {s=s+' 50'} document.monete.O.value=s} </script>

Corrisponde al primo tra gli esempi dell'appendice sul QBasic presente nella voce Calcolatore 2, versione "vecchia", e a questo programma per R. Abbiamo messo solo lo script (la descrizione del modulo - di nome "Monete" con caselle di nomi "I" e "O" - è simile a quella di Om1; se vuoi puoi comunque esaminarla aprendo il codice sorgente).
Qui compaiono degli if inscatolati l'uno nell'altro. La condizione viene messa tra tonde. Si usano "==" invece di "=", "!=" invece di "<>", "&&" invece di "and", "||" invece di "or", "!" invece di "not". Le istruzioni da eseguire sono messe tra graffe.
Compaiono anche dei cicli for: il ciclo viene eseguito a partire dal valore assegnato alla "variabile contatore" (in questo esempio "i") fino a che si verifica la condizione indicata; "i++" è una abbreviazione per "i=i+1", e indica come viene modificata la variabile contatore ad ogni fine ciclo.

om3
<script language="javascript"> function Cambia() { m = document.monete.I.value; s=''; a=0; b=; c=0; switch(m) { case ('500'): {a=2; b=1; c=0} break; case ('200'): {a=0; b=2; c=0} break; case ('100'): {a=0; b=0; c=2} break; default: {s=m} break} i=1; while (i<=a) {s=s+' 200'; i=i+1} i=1; while (i<=b) {s=s+' 100'; i=i+1} i=1; while (i<=c) {s=s+' 50'; i=i+1} document.monete.O.value=s} </script>

Questa è una variante del precedente in cui sono usati case (analogo al SELECT CASE del QBasic) e while (analogo al WHILE-WEND). Dal contesto si capiscono sintassi e semantica di queste istruzioni.

om4
<html><head></head><body> tabulazione di f tale che f(x) = x<sup>3</sup>+1 <pre> <script language="javascript"> function Ar(h) {a=Math.round(h*10e5)/10e5} with(Math) { for (x=0; x<=2; x=x+1/10) {Ar(x); x=a; y = pow(x,3)+1; Ar(y); y=a; document.write('x = '); document.write(x); document.write(' f(x) = '); document.writeln(y)}} </script> </pre> </body></html>

In questo caso lo script è nel corpo della pagina-web. In una pagina-web possono essere presenti più script.
I contrassegni html <pre> servono a far usare un carattere monospazio e a far accettare gli "a capo" anche senza usare il contrassegno <br>.
La function Ar(h) arrotonda il valore introdotto al posto di h e lo assegna alla variabile a: usa la funzione round che arrotonda agli interi (Ar moltiplica il numero per 100000, poi arrotonda e infine ridivide per 100000). Se non si arrotondasse potrebbe comparire invece di un "3.275" un "3.750000000002" dovuto a problemi di approssimazione del computer. "round" non è in genere usabile negli script; è una funzione sotto-oggetto di in un "oggetto-libreria" di nome Math. Per usarla occorre scrivere Math.round.
Nel seguito dello script la funzione y=x³+1 è descritta usando la funzione "pow" ("pow(x,y)" sta per quello che in QBasic è indicato "x^y"). In questo caso non si è messo Math.pow in quanto col comando with(Math) {...} si è fatto sì che questa "libreria" fosse "caricata" e sottointesa automaticamente.
Nelle "chiamate" di Ar, Ar(x) e Ar(y), si sono usate al posto di h x e y: h è solo un "nome" (o "parametro formale") per indicare l'input; nelle chiamate può essere sostituito.
Il ciclo for fa variare x da 0 a 2 con incrementi di 1/10.
write fa scrivere sulla pagina web. Il prefisso document indica l'"oggetto" costituito dal documento html che si sta usando (non stiamo scrivendo in una casella o in un altro oggetto, ma nell'usuale spazio della pagina web). writeln introduce un "a capo" finale (che viene visualizzato nella pagina-web grazie alla presenza del tag <pre>).
Più avanti sono elencate altre funzioni presenti in Math.

Nota 1. Nelle caselle dei moduli vengono messi testi. Nel caso si metta in una variabile x il conenuto della casella di nome A del modulo M (supponiamo sia 12) e in una variabile y il contenuto della casella B dello stesso modulo (supponiamo sia 7), se poi si fa scrivere x+y, può accadere venga visualizzato "127", ossia la concatenazione delle stringhe "12" e "7", in quanto (data l'ambiguità di "+", che può essere usato anche tra stringhe) JS interpreta x e y come stringhe. Per evitare questi problemi si possono usare, invece di x=M.A.value e y=M.B.value, x=Number(M.A.value) e y=Number(M.B.value). Infatti Number converte da "stringa" a "numero". Una alternativa potrebbe essere quella di usare delle particolari istruzioni che stabiliscono il tipo delle variabili.

Nota 2. In JS le stringhe si possono delimitare sia con una coppia di doppi apici (") che con una coppia di singoli apici ('). La assegnazione x="'casa'" mette in x non casa ma 'casa', così come x='"casa"' mette in x "casa". Per introdurre " si potrebbe anche usare \": l'uso di \ come prefisso consente la visualizzazione di caratteri speciali; ad es. \\ permette la visualizzazione di \. In una stringa posso inserire anche dei tag Html; ad es. document.write("corso Europa<br><b>Genova</b>") produce la scritta di "Genova" in grassetto (bold) e su una nuova riga.

Da QUI puoi accedere ad altri esempi, alcuni realizzati come varianti dei precedenti om4 e om2, che illustrano le considerazioni di "nota 2", altri aspetti delle function e l'uso delle variabili indiciate (di cui si parla alla voce Calcolatore-5). Altri esempi li trovi nella sezione "Programmini apribili" a cui accedi da .

Operatori aritmetici: + - (binario e unario) * / % (mod: 14%5 vale 4)

Inserimento di commenti: si può inserire un commento facendolo precedere da una coppia di barre // (tutto ciò che le segue, prima dell'A_Capo, non viene letto dall'interprete); se si vuole inserire un commento su più righe (o se si vuole isolare una parte di programma che temporaneamente non si vuol far eseguire dall'interprete) basta racchiuderlo tra un /* e un */

Note.
• Se si costruisce uno script e si vogliono ottenere informazioni sulla eventuale presenza in esso di errori di sintassi occorre che il browser (tra le opzioni/preferenze) abbia impostata la "Notifica degli errori degli script", indicata in tal modo o con altre espressioni ("JavaScript console on error", "JavaScript debugger", ...) a seconda del tipo di browser.

• Una tecnica utile per individuare l'eventuale presenza di errori "logici" (ossia non dovuti a scorrettezze sintatticche che compromettono l'esecuzione e possono essere individuate nel modo indicato sopra, ma dovuti a ad altri sbagli nella stesura che fanno sì che il programma non si comporti come noi vorremmo) consiste nell'introdurre delle istruzioni come window.alert('max = '+max); che consentono di interrompere temporaneamente l'esecuzione (riprendibile con un click su [ok]) e visualizzare dei messaggi. In questo caso viene visualizzato il valore che, in quel punto dell'esecuzione dello script, ha la variabile max. A destra quello che si vede sullo schermo nel caso del browser Internet Explorer.

• Se si vuole che un documento Html sia aperto in primo piano basta che nella sua intestazione sia presente uno script contenente il comando window.focus().

JavaScript dispone delle seguenti function come metodi dell'oggetto-libreria Math:

Math.abs(a)     // the absolute value of a
Math.acos(a)    // arc cosine of a
Math.asin(a)    // arc sine of a
Math.atan(a)    // arc tangent of a
Math.atan2(a,b) // arc tangent of a/b
Math.ceil(a)    // integer closest to a and not less than a
Math.cos(a)     // cosine of a
Math.exp(a)     // exponential of a
Math.floor(a)   // integer closest to and not greater than a
Math.log(a)     // log of a base e
Math.max(a,b)   // the maximum of a and b
Math.min(a,b)   // the minimum of a and b
Math.pow(a,b)   // a to the power b
Math.random()   // pseudorandom number in the range 0 to 1
Math.round(a)   // integer closest to a 
Math.sin(a)     // sine of a
Math.sqrt(a)    // square root of a
Math.tan(a)     // tangent of a
Math.PI         // π

JavaScript di fronte situazioni che in linguaggi "standard", come il Basic, il C, il Pascal, ..., darebbero luogo ad errori in corso di esecuzione ( run-time error), come ad es. una divisione per 0, in genere non interrompono l'esecuzione, assegnando eventuali valori convenzionali ai termini non definiti. Ad esempio nel caso dello script seguente (azionalo!), con cui si vuole eseguire il calcolo di alcuni termini, a √(-1) e a 1/0 vengono assegnati, rispettivamente NaN ("not a number") e Infinity.

jscalc
<pre><script>with(Math) { document.writeln('(2^100)^3 = ', pow(pow(2,100),3)); document.writeln('(2^1000)^3 = ', pow(pow(2,1000),3)); x=2; document.write('x=2 '); document.writeln('sqrt(2*x)+1/x = ', sqrt(2*x)+1/x); x=-1; document.write('x=-1 '); document.writeln('sqrt(2*x)+1/x = ', sqrt(2*x)+1/x); x=0; document.write('x=0 '); document.writeln('sqrt(2*x)+1/x = ', sqrt(2*x)+1/x); } </script></pre>

Torna a Calcolatore 2

Link al file	codice sorgente del file
om1	<html> <head> <script language="javascript"> function Calcola() { t = document.Perc.t.value; d = document.Perc.d.value; document.Perc.p.value = 100/t*d } </script> </head> <body> <center> Metti <i>Totale</i> e <i>Dato</i>. Clicca e ottieni <i>Percentuale</i> <form name="Perc"> Totale = <input type="text" name="t" value="" size=10> Dato = <input type="text" name="d" value="" size=30> <br/> Percentuale = <input type="text" name="p" value="" size=30> (%)<br/> <input type="button" value="clicca" onClick="Calcola()"> </form> </center> </body> </html>
Corrisponde al primo esempio di programma in QBasic della voce Calcolatore 2, e al programma in R presente nel paragrafo successivo. Se osservi il documento che ottieni cliccando om1 vedi che contiene testi e caselle. Il contenuto della pagina è quello che nel codice della pagina è compreso tra i "tag" <body> e </body>. I tag <center> e </center> fanno sì che il contenuto sia centrato. La parte del documento organizzata in caselle (modulo) è tra i tag <form> e </form>; essa forma un oggetto (ossia un componente) a cui, con la proprietà name viene dato nome "Perc". Le caselle sono dei sotto-oggetti del modulo (considerabili anche come sue ulteriori proprietà) specificati con i tag <input>; a ciascuna viene dato un nome ed altre proprietà: una dimensione e un tipo di contenuto. Il tag <br/> indica un "a capo". Il bottone è il sotto-oggetto di tipo "button". L'attributo "onClick" specifica che se si verifica l'evento "pulsante cliccato" viene avviata l'azione (o metodo) "Calcola()" descritta dalla omonima function (così in Javascript vegono chiamati i sottoprogrammi, ossia delle sequenze di istruzioni a cui è stato dato un nome in questo caso "Calcola" - mediante il quale possono essere richiamate). Il programma in senso stretto è quello racchiuso tra i tag <script> e </script>. In questo caso lo script è descritto non nel corpo della pagina-web, ma nella intestazione, compresa tra i tag <head> e </head>, ed è costituito solamente dalla function Calcola(); in questo modo il sottoprogramma viene caricato subito, al momento della apertura del file. Ricordiamo che nelle istruzioni di JS lettere diverse solo per la dimensione (come "a" e "A") sono considerate diverse. Il contenuto della function è delimitato da "{" e "}". All'interno le istruzioni (che in questo caso sono tutte assegnazioni) sono delimitate da ";". La presenza di un "a capo" senza ";" o "}" non basta per delimitare una istruzione. Le prime due assegnazioni leggono i contenuti (ossia i valori: value) delle caselle di nome "t" e "d" del modulo di nome "Perc". La terza mette un valore nella casella "p". Nelle assegnazioni è presente document: in questo modo viene indicata la pagina web attualmente visualizzata. In breve: document.Perc.t.value indica la proprietà "value" della proprietà (o sotto-oggetto) "t" della proprietà (o sotto-oggetto) "Perc" dell'oggetto "document".

om2	<script language="javascript"> function Cambia() { m = document.monete.I.value; s=''; a=0; b=; c=0; if (m==500) {a=2; b=1; c=0} else { if (m==200) {a=0; b=2; c=0} else {if (m==100) {a=0; b=0; c=2} else {s=m} }} for (i=0; i<a; i++) {s=s+' 200'} for (i=0; i<b; i++) {s=s+' 100'} for (i=0; i<c; i++) {s=s+' 50'} document.monete.O.value=s} </script>
Corrisponde al primo tra gli esempi dell'appendice sul QBasic presente nella voce Calcolatore 2, versione "vecchia", e a questo programma per R. Abbiamo messo solo lo script (la descrizione del modulo - di nome "Monete" con caselle di nomi "I" e "O" - è simile a quella di Om1; se vuoi puoi comunque esaminarla aprendo il codice sorgente). Qui compaiono degli if inscatolati l'uno nell'altro. La condizione viene messa tra tonde. Si usano "==" invece di "=", "!=" invece di "<>", "&&" invece di "and", "\|\|" invece di "or", "!" invece di "not". Le istruzioni da eseguire sono messe tra graffe. Compaiono anche dei cicli for: il ciclo viene eseguito a partire dal valore assegnato alla "variabile contatore" (in questo esempio "i") fino a che si verifica la condizione indicata; "i++" è una abbreviazione per "i=i+1", e indica come viene modificata la variabile contatore ad ogni fine ciclo.

om3	<script language="javascript"> function Cambia() { m = document.monete.I.value; s=''; a=0; b=; c=0; switch(m) { case ('500'): {a=2; b=1; c=0} break; case ('200'): {a=0; b=2; c=0} break; case ('100'): {a=0; b=0; c=2} break; default: {s=m} break} i=1; while (i<=a) {s=s+' 200'; i=i+1} i=1; while (i<=b) {s=s+' 100'; i=i+1} i=1; while (i<=c) {s=s+' 50'; i=i+1} document.monete.O.value=s} </script>
Questa è una variante del precedente in cui sono usati case (analogo al SELECT CASE del QBasic) e while (analogo al WHILE-WEND). Dal contesto si capiscono sintassi e semantica di queste istruzioni.

om4	<html><head></head><body> tabulazione di f tale che f(x) = x<sup>3</sup>+1 <pre> <script language="javascript"> function Ar(h) {a=Math.round(h*10e5)/10e5} with(Math) { for (x=0; x<=2; x=x+1/10) {Ar(x); x=a; y = pow(x,3)+1; Ar(y); y=a; document.write('x = '); document.write(x); document.write(' f(x) = '); document.writeln(y)}} </script> </pre> </body></html>
In questo caso lo script è nel corpo della pagina-web. In una pagina-web possono essere presenti più script. I contrassegni html <pre> servono a far usare un carattere monospazio e a far accettare gli "a capo" anche senza usare il contrassegno <br>. La function Ar(h) arrotonda il valore introdotto al posto di h e lo assegna alla variabile a: usa la funzione round che arrotonda agli interi (Ar moltiplica il numero per 100000, poi arrotonda e infine ridivide per 100000). Se non si arrotondasse potrebbe comparire invece di un "3.275" un "3.750000000002" dovuto a problemi di approssimazione del computer. "round" non è in genere usabile negli script; è una funzione sotto-oggetto di in un "oggetto-libreria" di nome Math. Per usarla occorre scrivere Math.round. Nel seguito dello script la funzione y=x³+1 è descritta usando la funzione "pow" ("pow(x,y)" sta per quello che in QBasic è indicato "x^y"). In questo caso non si è messo Math.pow in quanto col comando with(Math) {...} si è fatto sì che questa "libreria" fosse "caricata" e sottointesa automaticamente. Nelle "chiamate" di Ar, Ar(x) e Ar(y), si sono usate al posto di h x e y: h è solo un "nome" (o "parametro formale") per indicare l'input; nelle chiamate può essere sostituito. Il ciclo for fa variare x da 0 a 2 con incrementi di 1/10. write fa scrivere sulla pagina web. Il prefisso document indica l'"oggetto" costituito dal documento html che si sta usando (non stiamo scrivendo in una casella o in un altro oggetto, ma nell'usuale spazio della pagina web). writeln introduce un "a capo" finale (che viene visualizzato nella pagina-web grazie alla presenza del tag <pre>). Più avanti sono elencate altre funzioni presenti in Math.