Ultima modifica da un moderatore:
JavaScript
Introduzione
Innanzitutto Javascript è un linguaggio di scripting orientato agli oggetti e agli eventi,il quale non ha nulla a che vedere con il linguaggio di programmazione Java;i due linguaggi non hanno nulla in comune, la similarità del loro nome è dovuta solo a scopi di marketing.
La necessità di creare un linguaggio del genere deriva dal fatto di far girare applicazioni non solo sul lato server, ma anche sul lato client(ciò non esclude che JS non possa essere utilizzato server-side), facendo risultare le nostre pagine web più dinamiche, facilitando di molto il traffico tra server e client( ne sono un esempio i form che vedremo più avanti).
Javascript è interpretato(l'interprete è incluso nel browser che si sta utilizzando), con il quale è possibile fare veramente svariate cose: controllo input in una textbox/textarea; impostazioni cookie; da un evento generato dall'utente agire su un tag html cambiandone attributi e tanto altro ancora...
Inoltre introducendo anche la libreria jQuery che, oltre a semplificare il lavoro del programmatore per quanto riguarda la gestione degli elementi di una pagina web(detti anche DOM), ci permette di implementare funzionalità AJAX che per ora vi e mi risparmio.
Sintassi
Passiamo alla parte più divertente: alla stesura del codice!
Nel nostro documento .html dobbiamo includere il tag script, nel quale inseriremo tutto il codice javascript( se è interno)
Se invece abbiamo un file esterno che contiene codice javascript con estensione .js dobbiamo mettere l'attributo "src" nel tag script
HTML:
<html>
<head>
<! O poniamo il nostro tag qui, nel head...>
<script type="text/javascript">
//inserisco il codice
</script>
</head>
<body>
<!o lo pongo dentro al body( io preferisco qua dato che è più comodo)>
<script type="text/javascript">//codice</script>
<script src="/miocodice.js" type="text/javascript"></script>//js esterno
</body>
</html>Come ogni linguaggio di scripting il programmatore ha una certa flessibilità sulla dichiarazione delle variabili e funzioni ma comunque deve rispettare delle regole:
- Le istruzioni devono terminare con il ';'
- Apici singoli e doppi servono per indicare una stringa;
- Inserimento commenti con "/* commento */" o "// commento";
- Caratteri escape
\f - new page
\n - new line
\r - carriage return
\t - TAB
\\ - backslash
\' - apostrofo o apice singolo
\" - doppi apici
Bisogna anteporre la keyword "var" per dichiarare una variabile;ricordo che non esistono i tipi di dato e quindi potete con una variabile che memorizza un intero buttarci dentro una stringa.
PHP:
var miavariabile = 0;
var pigreco = 3.14;
var c = pigreco*(3/2)*miavariabile;Le funzioni sono blocchi di codice, che possono essere richiamati in un determinato contesto e specialmente in questo caso all'avvenimento di un determinato "Evento".Ad esempio posso richiamare una funzione se l'utente preme un determinato bottone, se il puntatore si trova in una determinata zona della pagina e molto altro ancora, cose che vedremo più avanti.
Per dichiarare una funzione bisogna anteporre la keyword "function"
Le variabili hanno visibilità locale solo sulla funzione nella quale le dichiarate, se invece ne dichiarate una fuori da tutte le funzioni allora hanno una visibilità globale.
Ricordate che il codice di una funzione viene eseguito fino alla keyword "return" (compreso) e tutto ciò che c'è dopo verrà ignorato.
PHP:
function miafunzione(parametro1,parametro2){
//codice
}
PHP:
function quadrato(n){
return n*n;
}
var j = 5;
alert(quadrato(j)); // mi stamperà 25
// se invece il valore mi serve basta fare cosi
var c= quadrato(j);// chiamata e il valore ritornato lo pongo nella variabile c
PHP:
function quadrato(n)
{
return n*n;
}
var j = quadrato;
// equivalente a
var j = quadrato.toString() // toString è metodo che converte in una stringa
alert(j)//mi stamperà tutto il codice della funzione quadratoGli operatori sono gli stessi del c/c++:
- Operatori aritmetici: +,-,*,/,++,--;
- Assegnazione: +=, -=, *=, /=, = ;
- Comparazione: ==,!=, <,>, >=,<=);
- Operatori logici: &&(and),||(or), !(not);
- Operatore typeof: restituisce il tipo di dato di un operando(es. typeof "inforge" restituisce "string")
- Operatore condizionale (op=(nhoya == "pro") "falso":"vero");
Le iterazioni for/while/do-while le do per scontato che le sappiate usare dato che sono UGUALI sintatticamente e semanticamente al c/c++, java.
Ve ne introduco uno particolare : il for..in, assieme agli Array.
Array
Un array in javascript viene dichiarato in questo modo
Per via delle nuove API a disposizione è consigliato utilizzare, invece, la notazione[cit.Scatenatore]
I vettori in javascript sono strutture dati eterogenee, quindi un array può contenere stringhe e numeri, e possono essere gestiti normalmente come in tutti i linguaggi di programmazione, però ci sono alcuni metodi e una proprietà che possono ritornarci utili:
Un array in javascript viene dichiarato in questo modo
PHP:
var arr = new Array("ciao","bello");//dichiarazione e inizializzazione di un vettore non associativo
//oppure
var arr = new Array();
arr[0] = "ciao";
arr[1] = "bello";
PHP:
var arr = [];- length = proprietà che ritorna lunghezza dell'array, non funziona su array Associativi;
PHP:
var arr = new Array("ciao","bello");
alert(arr.length);//mi stampa 2- push(elemento): aggiunge un elemento in coda all'array e restituisce la nuova lunghezza
PHP:
var arr = new Array("ciao","bello");
aggiungi = arr.push("tizio");
alert(arr) // mi stampa tutto l'array con l'elemento aggiunto- concat(): aggiunge più di un elemento all'array e restituisce la nuova lunghezza;
PHP:
var arr = new Array("ciao","bello");
aggiungi = arr.concat("tizio","tipo");
alert(arr) // mi stamperà tutto l'array con gli elementi aggiunti;
alert(aggiungi) // mi stamperà la dimensione dell'array;- pop():elimina l'elemento alla fine dell'array e restituisce il valore dell'elemento eliminato
PHP:
var arr = new Array("ciao","bello");
tolto = arr.pop();
alert("Elemento tolto: "+tolto);- shift(): stesso discorso del pop, solo che elimina dall'inizio dell'array
- reverse(): inverte l'ordine degli elementi dell'array;
PHP:
var arr = new Array("ciao","bello");
arr.reverse();
alert(arr);//stamperà "bello,ciao" anzichè "ciao,bello"![:\](/forum/data/assets/smilies/mhhae.gif "Mhhae :\")
Array Associativi
Gli array associativi non sono altro che dei normali array, solo che il loro indice non è numerico (0,1,2...) ma può essere anche una stringa ( 'ciao','blala');
Esempio:
PHP:
<script type="text/javascript">
function staffInforg()
{
var staff = new Array();
staff['boss'] ="murdercode";
staff['nob'] = "nhoya";
staff['Sezione S4league'] = "Hypnotize_";
}
staffInforg();//richiamo
</script>Il loro svantaggio sta nella loro gestione.Array non associativo != Array associativo e perciò anche la loro gestione deve essere diversa.Infatti gli elementi vengono trattati come proprietà di un oggetto usando le rispettive chiavi.Quindi un array del genere va visto come un oggetto e perciò i metodi tipo length di un normale array non funzionerebbero.È qui che ci torna utile il ciclo For..in
For...In
Il for...in è un tipo di ciclo seriale utilizzato sopratutto per gestire gli oggetti( le loro proprietà).
È più facile da capire che da spiegare quindi vi mostro subito semplice esempio:
PHP:
<script type="text/javascript">
function test()
{
var ciao= new Array("nhoya","mi","annhoya");
var i;
for( i in ciao) alert("indice "+ i+"="+ciao[i]);
}
ciao();//richiamo
</script>Ora come ora sembra che sia inutile invece già con gli Array Associativi il discorso cambia.
Se provate a fare:
PHP:
<script type="text/javascript">
function staffInforg()
{
var staff = new Array();
staff['boss'] ="murdercode";
staff['nob'] = "nhoya";
staff['Sezione S4league'] = "Hypnotize_";
alert(staff);// occhio qua
}
staffInforg();//richiamo
</script>Ecco come sarebbe correttamente
PHP:
<script type="text/javascript">
function staffInforg()
{
var staff = new Array();
staff['boss'] ="murdercode";
staff['nob'] = "nhoya";
staff['Sezione S4league'] = "Hypnotize_";
var i;
for( i in staff)
alert("indice "+ i+"="+staff[i]);
}
staffInforg();//richiamo
</script>Credo di aver introdotto il linguaggio, più o meno.
Premetto che la guida è stata scritta interamente da me e presto ci sarà il tutorial sulla gestione dei form, gestione DOM E forse BOM tramite javascript e più in là, se avrò tempo, introdurrò la libreria jQuery, ma non credo.
Potete copiare, basta che citate Inforge.net come forum da dove l'avete preso
Singh™
Inforge.net
)