4 – funzioni e DOM

Pubblicato il di

Il js, a differenza di altri altri linguaggi, non differenzia le funzioni (sottoprogrammi che restituiscono risultato al chiamante) dalle procedure (sottoprogrammi che non restituiscono nulla). Esiste solo function , la funzione

function randomInt() 
{
    return Math.round(Math.random()*10000)
}

Se con return viene restituito qualcosa bene, altrimenti per js è una procedura, non cambia nulla.

La funzione può essere inserita in qualsiasi puto della pagina html (anche nell’head) e sarà visibile da quel punto in avanti.

function randomInt()

Viene inizializzata con function seguito da nome e parentesi tonde, si può specificare dei parametri o argomenti.

function randomInt()
{
    return Math.round(Math.random()*10000)
}
for (i=1; i<=10; ++i)
    document.write(randomInt() + '<br>');

ricordo che il metodo random genera un numero casuale tra 0 e 1 mentre round lo arrotonda all’intero più vicino.

Richiamo poi la funzione semplicemente col suo nome e le tonde

randomInt()

passaggio dati per valore

function raddoppia(a)
{
    a*=2;
}
var x=100;
raddoppia(x);
alert(x);

In questo caso il valore di x continua a valere 100, anche se il valore viene passato ad a e la funzione lo moltiplica per 2, al di fuori della funzione, quindi globalmente, la x continua a valere 100

passaggio dati per indirizzo

function raddoppia(a)
{
    a.value*=2;
}
var x = new Object();
x.value=100;
raddoppia(x);
alert(x.value);

Il passaggio di dati per riferimento consente di modificare permanentemente dei valori di variabili sotto forma di parametri è possibile solo tramite il passaggio di oggetti. La x ora non è una variabile bensì un oggetto

var x= new Object;

Assegnamo il valore 100 alla proprietà value dell’oggetto x. Passando l’oggetto alla funzione raddoppia (passaggio per riferimento o indirizzo) essa va a modificare la sua proprietà value, la quale risulterà sempre alterata. Gli array che in js sono sempre oggetti, vengono passati di default per indirizzo.

function raddoppia(a)
{
    a.value+=' a tutti!';
}
var x= new Object();
x.value='ciao';
raddoppia(x);
alert(x.value);

Ecco un esempio uguale ma con delle stringhe, da notare l’operatore più uguale che funziona anche con le stringhe

Stringhe

In. js le stringhe sono dei veri e propri oggetti, conseguentemente posso accedere a diversi metodi disponibili:

var s="casa";
alert(s.length);

In questo caso alert stamperà la lunghezza della stringa contenuta nell’oggetto/variabile s, tramite il metodo lenght .

alert(s.toUpperCase());

In questo esempio tramite il metodo toUpperCase() sto trasformando la stringa in maiuscolo.

document.write(s.fontsize(20));

Stampo la stringa con una grandezza del font di 20px , metodo fontsize .

Si possono sfruttare diversi metodi che mettono a disposizione tantissime proprietà di uso html.

Un particolare occhio per i seguenti oggetti ricchi di proprietà e metodi che possono tornare utili in moltissime situazioni:

  • Math
  • Date
  • String
  • Array

DOM (Document Object Model)

Il DOM è una rappresentazione gerarchica degli oggetti contenuti all’interno della (window) finestra di un browser. Window fa riferimento a tutta la finestra del browser, tramite questo oggetto è possibile controllarne le proprietà.

document.write('In questo momento la finestra e\' alta ' + window.innerHeight + 'pixel<br>');

La proprietà innerHeight restituisce l’altezza della finestra, analogamente innerWidth restituisce la larghezza.

document.write( 'larga ... ' + window.innerWidth + 'pixel');

Da notare come per usare il metodo write uso il punto come selezionatore del metodo. In realtà anche per richiamare l’oggetto document avrei dovuto usare la forma corretta window.document.write , in quanto document è figlio di window, ma in alcuni casi l’interprete js mi permette di omettere alcune sintassi scontate.

Le proprietà non sono solo in lettura, ma si possono anche impostare:

window.innerWidth = 100;

Vediamo il metodo resizeBy:

resizeBy( asseX, asseY)

Il metodo vuole 2 valori, se positivo allunga di tot pixel , se negativo l’accorcia. Se un numero è zero, vuol dire nessuna modifica.

window.resizeBy(segno * Math.round(Math.random()*200),0);

l’asse x viene generata casualmente con un numero compreso tra 0 e 199, y invece sempre 0. Segno è una variabile che genera o 1 o -1 tramite una espressione condizionale (if) nella sua forma contratta (if -> ?) (else ->  : )

segno = Math.round(Math.random()*2) % 2 ? 1 : -1;

se il numero generato da Math.round(Math.random()*2) diviso 2 da zero (false) alloora segno vale negativo (-1) altrimenti positivo.

function allungaAccorcia()
{
    segno = Math.round(Math.random()*2) % 2 ? 1 : -1;
    window.resizeBy(segno * Math.round(Math.random()*200),0);

}
window.setInterval("allungaAccorcia();",500);

La funzione allungaAccorcia da noi creata viene richiamata dal metodo setInterval che prevede che ogni tot di millisecondi venga eseguito il primo parametro. Nel ns ogni 500ms richiama la funzione allungaAccorcia. Una cosa notevole è che lo script può funzionare contemporaneamente ad altri (multithreading) .

id=window.setInterval("allungaAccorcia();",500);
window.clearInterval(id);

Ho stoppato l’escuzione dello script tramite il metodo clearInterval.

Il metodo open serve per aprire una nuova finestra, specificandone le proprietà

nuovoURL=prompt("A che indirizzi devo andare?");
window.open(nuovoURL, "maledettoPopup","height=100, width=100");

Gli argomenti di open possono essere diversi, tra cui le caratteristiche fisiche della finestra, consultare la documentazione.

Il metodo prompt fa apparire una finestra (tipo alert), ma con una casella di inserimento dati.

window.alert("errore!!");
user=prompt("inserire user name");
alert("Benvenuto " + user);

Come si nota tra la prima e la terza riga l’oggetto window si può omettere.

Il valore inserito dall’utente nel campo input generato dal metodo prompt, viene assegnato alla variabile user.

I metodi degli oggetti window e document sono svariati è consigliabile approfondirne le conoscenze tramite vari spunti cartacei o online.