Funzioni e Variabili

Introduzione

In ogni linguaggio di programmazione si lavora con informazioni. Per questo parliamo anche di informatica. Perché ogni programma ha bisogno di informazioni per funzionare. E queste informazioni, devono essere salvate da qualche parte, anche se servono per solo tre secondi. Il posto dove vengono salvate le informazioni temporanee, si chiama RAM (Random Access Memory). È un componente nel nostro computer, che permette un accesso veloce ed una scrittura/lettura rapida di informazioni. Il problema è che se la RAM perde corrente per un'istante, ogni informazione al suo interno viene persa (blackout, o spegnimento del computer, ecc...). Se dovessimo/volessimo conservare le informazioni, le dobbiamo salvare sul disco Rigido (Hard Disk / HD / HDD).
Le RAM possono salvare (come ogni componente digitale) solo 0 e 1 (comunemente chiamati: bit).
Per farvi una panoramica:
bit: 0-1
byte: 0-255 (composto da 8 bit)
kilobyte: 0-262143 (composto da 1024 byte)

Questo è solo un po' di teoria di cosa succede dietro alle quinte e di come vengono salvate le variabili e le funzioni, ma a noi poco importa, essendo javascript ad un livello molto alto. Ciò significa che di tutte queste cose neanche ce ne accorgeremo.

Tipi di variabili

NORMALMENTE:
byte (Int8): 8bit (numerico, interi)
Int16: 16bit (numerico, interi)
Integer32: 32bit (numerico, interi)
Float: 32bit (numerico, decimali)
Double: 64bit (numerico, decimale)
Char: 8bit (carattere/lettera)
String: N.D (sequenza di caratteri)
Puntatori: 32bit/64bit (dipende dal Sistema operativo)
Puntatori a funzioni: 32bit/64bit (Funzioni non possono essere salvate in variabili essendo dei flussi di lavoro, con l'eccezione del linguaggi javascript)
Boolean: 1bit (vero o falso)

JAVASCRIPT
String: Sequenza di caratteri (tipo una frase)
Funzioni: (Un flusso di codice che svolge un certo compito)
Numeri: (0 - Non ricordo quanto, ma il limite è enorme, decimale)
Boolean: Vero(true) o Falso(false)

Differenza tra funzioni e variabili

Variabili sono valori (numerici, logici, o simbolici) che possono cambiare in un qualsiasi momento, per poter cambiare qualcosa. (Per esempio in javascript, cambiando la variabile: document.title, il titolo del TAB cambia). Quindi servono principalmente per salvare informazioni.

Funzioni, invece, svolgono una certa funzione. Funzioni definiscono un codice eseguibile per ottenere un risultato. Un esempio per una funziona sarebbe: alert. La funzione che abbiamo già visto nella guida precedente. Queste hanno sempre due parentesi dopo il loro nome. Esse vengono usate per parametri (variabili, che cambiano il comportamento della funzione), e distinguono le variabili dalle funzioni.

Differenza tra varaibili Globali e variabili locali

In altri linguaggi le differenze tra questi due tipi di variabili è importante. In Javascript invece tra locali e globali cambia soltanto il "luogo" nel quale di può usare una variabile.
Le variabili globali, vengono definite semplicemente scrivendo il loro nome, seguito dal valore.

CODICE

NomeVariabileGlobale=1+1

Le variabili locali, sono precedute dal keyword "var", a questo punto, la variabile (locale) sarà utilizzabile solo all'interno della funzione che si sta eseguendo, e dalle funzioni all'interno delle funzioni (si, si possono creare funzioni dentro le funzioni, ma è una cosa complicata, la spiegherò in futuro).

CODICE

var NomeVariabileLocale=2

In parole povere:
Globali: valgono per tutta la pagina e sono accessibili da ogni script.
Locali: Sono accessibili solo dalla funzione nella quale vengono definite (e migliora quindi anche la gestione della memoria).

Set e Get

In informatica "set" e "get" sono due termini che non significano altro che "impostare" e "ricevere", o forse in una maniera anche più comprensibile: "definisci" e "leggi".

Per definire una variabile (set) si usa l'operatore "attribuisci", ovvero "=".
Con questo javascript capisce che stiamo dando un valore alla nostra variabile.
Esempi:

CODICE

var casa="Villa Barbosa";

CODICE

var nome="Alex";

CODICE

var eta=18;

CODICE

var figo=true;

Alla fine di ogni "azione" in javascript, si dovrebbe mettere un semicolon ( ; ), anche se da sempre javascript può farne a meno, visto che grazie agli "a capi" è capace di capire quando è finito il commando. (però Enrico Martelli mi sgrida sempre quando non li metto, facendo parte delle convenzioni da programmatori, ma ve ne parlo dopo).
Vi sarete sicuramente accorti che le sequenze di caratteri (alex, villa barbosa) si trovano tra apici (queste: "). Le apici definiscono l'inizio e la fine di una sequenza di caratteri.
Queste sono necessarie, affinché javascript non provi a interpretare il vostro testo, come funzioni o variabili.

Per leggere una variabile, basta scrivere il suo nome. Per esempio per leggere la variabile "nome", ci basta scrive il suo nome (LOOL).

Esempio:

CODICE

var nome_autore="flexlex"; //Attribuisce il valore "flexlex" alla variabile "nome_autore"
alert(nome_autore); //Apre un alert, con il nome dell'autore.

//ancora più figo:
alert("Il nome dell' autore e': "+nome_autore)

Con l'operatore addizionale ( + ), si possono anche combinare stringhe statiche o variabili (numeriche, logiche o stringhe).

In javascript si possono sommare, moltiplicare, dividere e sottrarre qualsiasi numero.
Quindi codici validi sarebbero:

CODICE

var risultato; //non ha ancora nessun'valore.
var a=3;//da il valore 3 alla variabile "a"
var b=6 //valore 6 a "b"
risultato=a * b; //* = moltiplicazione, poi c'è / per divisione, + per addizione e - per sottrazione.

ATTENZIONE: Stringa + numero = stringa.
Quindi "ciao" + 1 + 1 restituisce: "ciao11".
Se vogliamo sommare i numeri dobbiamo metterli tra parentesi.
"ciao"+(1+1) restituisce: "ciao2"

Perché usare Variabili

Variabili sono utili per accedere velocemente a elementi, o per non dover ripetere più volte la stessa "parola".
Per esempio: accesso a elementi
Codice senza variabili:

CODICE

document.getElementById("textarea").cols=30;
document.getElementById("textarea").rows=5;
document.getElementById("textarea").style.color="red";
document.getElementById("textarea").setAttribute("readonly","readonly");
document.getElementById("textarea").style.backgroundColor="#000000";
document.getElementById("textarea").name="textarea";
document.getElementById("textarea").scrollIntoView();

Codice con variabile:

CODICE

var txt=document.getElementById("textarea");
txt.cols=30;
txt.rows=5;
txt.style.color="red";
txt.setAttribute("readonly","readonly");
txt.style.backgroundColor="#000000";
txt.name="textarea";
txt.scrollIntoView();

Oltre ad essere più visibile, se ora invece di document.getElementById("textarea") volessimo mettere document.getElementById("inputbox"), dobbiamo sostituire solo la variabile. Invece nel primo esempio dovremmo modificare ogni riga di codice.

Come usare Funzioni

Funzioni svolgono una funzione, per prima cosa impariamo a definirne una.
Sintassi:

CODICE

function NOME_FUNZIONE(PARAMETRI)
{
CODICE
}

Esempio: Come definire una funzione che cambia alcuni stili ad una textarea.

CODICE

function CambiaStileTextarea(txt)
{
txt.style.color="#0011ff";
txt.style.backgroundColor="#22ccee";
txt.style.border="1px cyan dashed";
}

Adesso impariamo come usarla

CODICE

var textarea=document.getElementById("textarea"); //variabile con la textarea da stilizare
CambiaStileTextarea(textarea);

Ora per ogni elemento del nostro documento HTML (sito web), possiamo usare questa funzione, anche su div.
Funzioni sono utili per la massa, per esempio: se abbiamo due textarea da stilizzare, senza funzioni dovremmo fare così:

CODICE

var txt1=document.getElementByid("textarea1");
txt1.style.color="#0011ff";
txt1.style.backgroundColor="#22ccee";
txt1.style.border="1px cyan dashed";

var txt2=document.getElementByid("textarea2");
txt2.style.color="#0011ff";
txt2.style.backgroundColor="#22ccee";
txt2.style.border="1px cyan dashed";

Invece con la funzione si risparmia tempo e, anche se dobbiamo fare modifiche agli stili, saremo più veloci.

CODICE

function CambiaStileTextarea(txt)
{
txt.style.color="#0011ff";
txt.style.backgroundColor="#22ccee";
txt.style.border="1px cyan dashed";
}

CambiaStileTextarea( document.getElementById("textarea1") )
CambiaStileTextarea( document.getElementById("textarea2") )

Attenzione: la funzione dicument.getElementByid(ID) è una funzione dell' oggetto "document". E seleziona su tutto il documento l'elemento che porta l'id con il valore definito in ID.
Quindi per far funzionare:

CODICE

document.getElementById("textarea")

ci serve anche un elemento con id "textarea"

CODICE

Adesso qualcosa di importante. Vedete che la funzione getElementById viene usata come se fosse una variabile? Proprio perché funzioni sono pensate per essere variabili "dinamiche". A scuola per esempio, avete tutti imparato questa funzione (la parabola): y = a*x*x + d;

se volessimo creare questa funzione in Javascript, possiamo farlo così:

CODICE

function paraobola(a,x,d)
{
return a*x*x + d;
}

y=parabola(VALORE_A,VALORA_X,VALORE_D);

Il return definisce il valore che deve avere la funzione, se viene "letta" e usata come variabile.

Altri due esempi per funzioni con return.

1) Numero casuale

CODICE

function numeroRandom()
{
return Math.floor(Math.random()*10);
}
alert("Il tuo numero fortunato e': "+numeroRandom());

Attenzione: Math.floor() arrotonda per difetto un numero decimale (0.8 -> 0). Math.random() genera un numero casuale tra 0-1 (per questo lo si moltiplica).

2) document.getElementById(), ma più veloce.
Spesso succede che dovete usare spesso la funzione "getElementById", ma non avete voglia di scrivere molto, e magari avete anche fretta. Quindi creiamo una nostra funzione, più corta.

CODICE

function ge(id)
{
return document.getElementById(id);
}

var txt1=ge("textarea1");
var txt2=ge("textarea2");
var txt3=ge("textarea3");
var txt4=ge("textarea4");

È molto più veloce, non trovate?

Esercizio

Scrivete una funzione che risolve ogni problema matematico "basilare" che inserite nel prompt, e restituite il risultato in un alert.
Per far definire all'utente il valore di una variabile, si può usare la funzione: prompt(TESTO_DESCRIZIONE,VALORE_PREDEFINITO); (Prompt restituisce una Stringa come valore).
Per trasformare una Stringa (sequenza di caratteri) in un codice Javascript e farlo eseguire, si può usare la funzione "eval".

Soluzione

Per questo esercizio metto una soluzione (sotto spoiler), magari vi può essere utile

SPOILER (clicca per visualizzare)

http://jsbin.com/kepoka/1/edit

CODICE

var calcolo=prompt("Inserisci il calcolo","5 * 6 / 8 + 2 - 3");
var res=eval(calcolo);
alert(res);