Programmare in javaScript - natalo.eu · verifica il programma si limita a saltare quest'ultima, con l'istruzione else viene riepito questo buco proponendo un codice condizionale

Programmare in javaScriptJavaScript è linguaggio di scripting orientato ad oggetti è un tipo di codice che viene interpretato dai browser. Questo linguaggio viene definito appunto un linguaggio lato client, perchè viene scaricato ed avviato direttamente sul browser che interpreta il linguaggio, questo è un vantaggio perchè evita al server di fare del lavoro in più. Per inserire javascript in una pagina html si devono usare i tag <script>, li si possono posizionare in qualsiasi punto della pagina sia dentro <head> che dentro <body>, comunque è sempre meglio inserire javascript nella <head> in un file esterno.

Esempio di dichiarazione:

<script type="text/javascript"> <![CDATA[//><!]]></script>

<script type="text/javascript"> istruzione1; istruzione2; //questo è un commento quando finisce questa riga finisce anche il commento /* anche questo è un commento ma non finisce a fine riga, ma solo alla chiusare dei simboli alla mia destra */</script>

<script type="text/javascript" scr="js/mind.js"></script>

Per indicare la fine di ogni istruzione si usa il punto virgola ";". Come abbiamo appena visto si possono richiamare file javascript esterni, questo ci permette di prendere del codice scritto da altri ed usarlo come preferiamo. Così alcuni si sono occupati di creare delle librerie o anche dette framework javascript che contengono degli script già pronti all'uso, man mano in questa guida offriremo alcuni esempi utili:

1. jQuery 2. Prototype 3. script.aculo.us 4. Dojo 5. MooTools 6. YUI Library

Variabili

Una variabile si definisce con la parola riservata var. Una volta definita la si può richiamare semplicemente utilizzando il nome della variabile.

http://www.jquery.com/

http://www.yuilibrary.com/

http://www.mootools.net/

http://dojotoolkit.org/

http://www.script.aculo.us/

http://www.prototypejs.org/

Clicca Qui per eseguire il codice.

var nome = 'matteo';alert(nome);

Nell'esempio precedente abbiamo usato una funzione nativa di javaScript, che usava la variabile nome come argomento. L'argomento serve per passare dati ad una funzione, in questo caso il popupche apre, contiene i dati della variabile passati nell'argomento.Le variabili in javascript possono contenere differenti tipi di dati:

1. Numeri 2. Stringhe 3. Valori booleani 4. Array 5. Oggetti

Numeri

JavaScript può memorizzare numeri interi, decimali che siano sia positivi che negativi, è scontato dire inoltre che javaScript può usare gli operatori matematichi (+,-,*,/)

1. Numeri

var intero = 3;var decimale = 3.1454521;var intNegativo = -3;var floatNegativo = -3.1454521;var operazioniMatematiche = (4 + 2) * 6 / 10;

Una comoda funzionalità di javaScript è la possibilità di usare il valore corrente di una variabile perdescrivere il nuovo valore da asseganre alla variabile.


var anni = 20;anni = anni + 3;

Incrementare una variabile è un azione comune in javaScript, infatti il codice precedente può essere abbreviato in questa maniera:


var anni = 20;anni += 3;

Mnetre se si deve incrementare di un'unità ci viene in aiuto un'altra forma:


var anni = 20;anni++;

L'operatore speciale ++, chiede al programma di incrementare di un'unità il valore della variabile e poi di assegnare il risultato al calcolo sempre alla stessa variabile. Nell'esempio seguente vedremo che in questo caso sarebbe meglio usare un'altra abbreviazione, ovvero var anniCopia = ++anni; se avviamo il codice vedremo come il risultato che esce è 26 e non 27, questo succede perchè la lettura viene fatta prima dell'incremento, per sviare questo problema bisogna appunto incrementareprima con ++anni, è buona norma però dividere questi due processi, scrivendo prima un'istruzione di incremento anni++; e poi assegnare il valore alla variabile var anniCopia = anni;.


http://www.matteowebdesigner.com/test/javascript/capitolo1.html#




http://www.matteowebdesigner.com/test/javascript/capitolo1.html#oggetti

http://www.matteowebdesigner.com/test/javascript/capitolo1.html#array

http://www.matteowebdesigner.com/test/javascript/capitolo1.html#booleani

http://www.matteowebdesigner.com/test/javascript/capitolo1.html#stringhe

http://www.matteowebdesigner.com/test/javascript/index.html#numeri


var anni = 26;var anniCopia = anni++;

javaScript mette a disposizione alcune funzioni native come alert, ce ne sono alcune che lavorano sui dati numerici vediamole in ordine: parseInt(string, radix) analizza una stringa restituendo un numero intero senza stringhe e lo visualizza ignorando le parti decimali e l'eventuale virgola, è possibile aggiungere anche un secondo argomento facoltativo che può fare da base numerica. parseFloat(string) fa lo stesso lavoro di parseInt solo che conserva la virgola e i numeri decimali. La funzione is Not a Number, isNaN(string) restituisce un valore boleano a seconda della stringa che viene passata come argomento. Se il dato passato può essere elaborato restituisce false se è un dato che non può essere rielaborato come numero esce true.


var pi = parseInt("111.5545word");var pf = parseFloat("111.5545word");var isN = isNaN("111.5545word");

Le stringhe

Le stringhe sono dati costituiti da caratteri di qualsiasi lunghezza e possono essere lettere, numeri, simboli, segni di punteggiatura o spazi, per devinirne una basta inserire i caratteri all'interno delle virgolette e possono essere sia doppie "" che semplici ''.

2. Stringhe

var semplici = 'Solo apici semplici';var doppi = "Solo apici doppi";var numeriFolli = "18 num3r1 f0ll1";var stranaPunteggiatura = '$7r@n@ pun7&99!@tur#@'

Le virgolette fungono da delimitatori, infatti non verranno utilizzate come dato, se vogliamo invece includerle si può ricorrere alla tecnica chiamata escape che consiste nel far precedere alle virgolette un segno di backslash / vediamo un esempio:


var anni = 'le virgolette ai lati non si vedono ma quelle con \"l\'escape\" sì';

Valori booleani

I valori booleani comprendono solo due parole riservate che sono: true e false. Questo tipo di dato viene utilizzato principalmente per prendere decisioni.

3. Valori booleani

var bugiardo = true;var sincero = false;

Array

I numeri, le stringhe e i valori booleani sono utili per memorizzare singoli frammenti di dati, gli array si occupano di gestire questi dati, dandone un ordine preciso in modod che siano facilmente recuperabili. Un array è come una specie di casellario e per definirlo usaimo le parentesi quadre.



http://www.matteowebdesigner.com/test/javascript/capitolo1.html#booleani

4. Array

var casellario = [];casellario[0] = "Primo";casellario[1] = "Secondo";

Nell'esempio precedente abbiamo definito un array. Nela prima riga viene definito un array vuoto, in quelle successive vengono inserite degli elementi all'array "casellario", ogni posizione dell'array come si può vedere gli viene attribuito un indice, utile per poter recuperare i dati. Infatti è possibile aprire una finestra di dialogo in questo modo:


var casellario = [];casellario[0] = "Primo";casellario[1] = "Secondo";

alert(casellario[1]);

Un'array lo si può definire anche inserendo subito gli elementi nella dichiarazione, inoltre possono contenere qualsiasi tipo di dato, stringhe, numeri, misti e pure altri array:

Array tipi di dati contenuti

var arrayDiStringhe = ["Primo", "Secondo", "Terzo", "Quarto"];var arrayNumerico = [1, 2, 3, 4, 5];var arrayMisto = ["via", "garibaldi", 12]

var subArray1 = ["Parigi","Lione","Nizza"];var subArray2 = ["Amstardam","Rotterdam","Utrecht"];var subArray3 = ["Madrid","Barcellona","Siviglia"];

var superArray = [subArray1, subArray2, subArray3];

Per prendere un elemento in array multi-dimensionale bisogna scrivere due indici il primo indice prende l'array che ci interessa, il secondo, l'elemento con l'indice contenuto nell'array scelto.


var subArray1 = ["Parigi","Lione","Nizza"];var subArray2 = ["Amstardam","Rotterdam","Utrecht"];var subArray3 = ["Madrid","Barcellona","Siviglia"];var superArray = [subArray1, subArray2, subArray3];

var luogo = superArray[0][2];

Una proprietà che vi tornerà utile per questi tipi di elementi è la proprietà .length che definisce la lunghezza, per esempio se vogliamo sapere quanti elementi contiene un array con questa proprietà èpossibile scoprirlo:


var subArray1 = ["Parigi","Lione","Nizza", "Quarto"];var subArray2 = ["Amstardam","Rotterdam","Utrecht"];var subArray3 = ["Madrid","Barcellona","Siviglia"];var superArray = [subArray1, subArray2, subArray3];

var numeroElementi = superArray[0].length;

Uno degl'ultimi tipi di Array è l'array associativo, quello che cambia dagl'altri è l'indice, che viene sostituito da una stringa che può essere utile per esempio per memorizzare i codici postali:





var codAvvPost = [];codAvvPost["Armadale"] = 3143;codAvvPost["North Melbourne"] = 3051;codAvvPost["Camperdown"] = 2050;codAvvPost["Annandale"] = 2038;

alert("codice postale Armadale: " + codAvvPost["Armadale"]);

Prima di affrontare gli "oggetti" dobbiamo imparare ancora strutture di javaScript se no non riusciremmo a comprendere il significato di quest'ultimo.

Condizioni cicliche: controllare il flusso del programma

Per prendere decisioni occorre utilizzare particolari strutture chiamate condizioni e cicli che aiutanoa controllare le parti di un programma. La prima istruzione condizionale che andremo a trattare si chiama if per definirla serve inserire una condizione ed un codice che verrrà utilizzato nel caso la condizione è vera, la sintassi che si utilizza è la seguente:

Istruzione if

Istruzione if

if (condizione) { codice condizionale;}

Nel caso la condizione è falsa il programma va avanti ignorando il codice condizionale. Ora analizziamo le condizioni che si possono utilizzare, quelle che vengono più spesso utilizzate sono quelle di confronto, che utilizzano i seguenti operatori:

Operatore Esempio Risultato> A > B true se A è maggiore di B>= A >= B true se A è maggiore o uguale di B< A < B true se A è minore di B< A <= B true se A è minore o uguale di B< A == B true se A è uguale di B< A != B true se A non è uguale di B< !A true se il valore booleani di A è falseDopo aver visto gli operatori di confronto passiamo agli operatori logici AND (&&) e OR (||), questi operatori possono essere utilizzati per combinare insieme più test condizionali, AND richiedeche tutte le condizioni siano vere mentre OR si accontenta che sia vera almeno una codinzione.


var anni = 27;if (anni > 17 && < 29) { alert("la condizione è verificata");}

Istruzione else ed else if

Le condizioni if dispongono solo di un codice nel caso la condizione sia verificata, se invece non si verifica il programma si limita a saltare quest'ultima, con l'istruzione else viene riepito questo buco



proponendo un codice condizionale nel caso la condizione non sia vera

if e else

if (condizione) { codice condizionale;}else { codice condizionale alternativo;}

In questo modo abbiamo un codice sia per quando è vera sia per quando è falsa. Ma se vogliamo aggiungere un'altra condizione ad applicargli un'altro codice da eseguire useremo un'altro sistema ovvero else if. Come si può vedere questa istruzione può avere delle parentesi tonde dove si devinisce una nuova condizione e si possono creare tante else if quante se ne vogliono sempre lasciandole tra l'istruzione "if" e l'istruzione "else"

else if

if (condizione) { codice condizionale;}else if (condizione) { codice condizionale alternativo;}else { codice condizionale alternativo;}

Cicli while

I cicli sono istruzioni che ripetono il codice fintanto che la loro condizione è vera, while si compartain questo modo

ciclo while

while (condizione) { codice condizionale;}

I cicli sono utili quando si vogliono eseminare tutti gli elementi di un array e si vogliono applicare delle modifiche, usando una variabile che farà da contatore, ad ogni ciclo dell'istruzione si incrementerà quella variabile fino a quando la condizione resistuirà false, proprio perchè la condizione impostata definisce che la condizione è vera finchè il numero contatore è minore al numero degli elementi nell'array.

ciclo while

var numeri = [1, 2, 3, 4, 5];var contatore = 0;while (contatore < numeri.length) { numeri[contatore] *= 2; contatore++;}

Cicli do-while

Un ciclo do-while si comporta in modo simile al ciclo while, l'unica differenza sta nell'eseguire prima il codice condizionale e dopo controllare la condizione, questo permette di eseguire almeno una volta il codice anche se la condizione risulta falsa

ciclo do-while

do { codice condizionale;}while (condizionale)

Cicli for

I cicli for permettono di realizzare costrutti molto compatti. Prendiamo ad esempio un ciclio while, il ciclo for rende più sintetico due aspetti, la dichiarazione della variabile contatore (var i = 0;) e l'incremento della variabile contatore (i++). Nel ciclo for vengono devinite contemporaneamente treistruzionioltre alle due già citate c'è anche la condizione che ci permette di uscire dal ciclo quando la condizione viene restituita come falsa.

confronto ciclo do-while con ciclo for

//Arrayvar numeri = [1, 2, 3, 4, 5];

//ciclo do-whilevar i = 0;while (i < numeri.length) { numeri[i] *= 2; i++;}

//ciclo forfor(var i = 0; i < numeri.length; i++) { numeri[i] *= 2;}

Switch

L'istruzione switch è come una combinazione di tante if. Si inserisce nella parentesi condizionale una variabile, che può avere diversi valori, mentre nelle graffe si distinguono i vari casi con l'istruzione case ed infine si definisce default che è paragonabile all'istruzione else.

Scrivi e per eseguire il codice.

var value = form1.text.value;switch (value){ case "a": alert("hai inserito a"); break

case "b": alert("hai inserito b"); break

case "c": alert("hai inserito c"); break

default: alert("non hai inserito ne a, ne b, ne c"); break}

Espressioni regolari

Le espressioni regolari sono un potente strumento di analisi delle stringhe, si compongono di semplici caratteri come questo /abc/ o in combinazione a semplici e speciali caratteri come questi /ab*c/ o /Chapter(\d+)\.\d*/. Questo linguaggio è possibile utilizzarlo in combinazione con altre funzioni come split(), replace(), search() e match() rispettivamente si occupano di dividere, sostituire, trovare la posizione e memorizzare. Un metodo molto comune è anche la funzione test() utilizzata spesso nelle istruzioni condizionali. Ci sono due modi per creare un espressione regolare il primo utilizzando l'oggetto RegExp l'altro è utilizzare il simbolo slash "/" per racchiudere l'espressione.

Espressione regolare

var pattern1 = new RegExp ("Espressione regolare", "parametri");

var pattern2 = /Espressione regolare/parametri;

La parte dove c'è scritto parametri è un parte opzionale dove è possibile inserire alcune lettere:

Pattern Modifiers

Carattere Descrizione

gindica un abbinamento globale (ovvero verranno abbinate tutte le istanze che corrispondono all'espressione regolare e non solo la prima).

ila ricerca diventa case-insensitive, cioè maiuscole e minuscole vengono considerate uguali.

mle ricerca verrà considerate "per riga", cioè le ancore tipo "^" e "$" verranno applicate per ogni riga di testo.

sil testo viene considerato un'unica riga e "." ora identifica anche i caratteri di fine riga, che normalmente non troverebbe.

u vengono abilitati i caratteri Unicode estes, come \x{10FFFFF}.

U

attiva l'opzione ungreedy (Quasi tutti inciampano prima o poi in questo problema: se utilizzo una espressione del tipo /".*"/ troverò tutte le parole racchiuse tra doppi apici?Purtroppo no! Questo perché i quantificatori normali sono "golosi" (in inglese greedy),cioè cercano l'occorrenza il più grande possibile.) a tutti i quantificatori.

Ora però passiamo alla sintassi, come dicevamo l'espressione regolare è uno strumento usato per le stringhe si potrebbe creare una espressione regolare senza alcun carattere speciale come /javascript/ però il suo uso sarebbe parecchio limitato perchè abbinerà solo le stringhe "javascript".Per rendere più intelligente la ricerca utilizziamo dei caratteri che rendono la ricerca più intelligente. I primi caratteri che presenteremo sono quelli di ripetizione, si occupano di quante volte si ripete il termine che li precede:

Quantifiers

Carattere Descrizione Esempio* 0 o più /s*/ sssstringa osso o osso sssstringa+ 1 o più /s+/ sssstringa osso o osso sssstringa? 0 o 1 /s?/ sssstringa osso o osso sssstringa{3} esattamente 3 /s{3}/ sssstringa osso o osso sssstringa{3,} 3 o più /s{3,}/ sssstringa osso o osso sssstringa{1,3} 1, 2 o 3 /s{1,3}/ sssstringa osso o osso sssstringa*? 0 o più, ungreedy /s*?/ sssstringa osso o osso sssstringa

Carattere Descrizione Esempio+? 1 o più, ungreedy /s+?/ sssstringa osso o osso sssstringa?? 0 o 1, ungreedy /s??/ sssstringa osso o osso sssstringa{3,5}? 3, 4 o 5, ungreedy /s{3,5}?/ sssstringa osso o osso sssstringa

I prossimi che presenteremo si chiamano caratteri di posizione o anche chiamate Anchors, che nonspecificano un particolare tipo di caratteri, bensì una particolare posizione nella stringa:

Anchors

Carattere Descrizione Esempio^ Inizio linea /^str/ stringa$ Fine linea /nga$/ stringa\A Inizio della stringa /\Astr/ stringa\Z Fine della stringa /nga\Z/ stringa\b confine di parola /\bs/ volpe stringa osso\B non confine di parola /\B/s/ volpe stringa osso\< inizio parola /\</ N.D.\> fine parola /\>/ N.D.Ora vedremo le classi di caratteri, che definiscono gruppi di tipi come le lettere, le cifre gli spazi.

Character Classes

Carattere Descrizione Esempio\c control character /\cstr/ stringa\s spazio /nga\s/ stringa\S nessuno spazi /\Sstr/ stringa\d cifre /nga\d/ stringa\D nessuna cifra /\Ds/ volpe stringa osso\w lettere /\B/s/ volpe stringa osso\W Nessuna lettera (non abbina a, 1, _ ) /\W/ volpe stringa osso?\xhh carattere esadecimale hh /\xhh/ N.D.\Oxxx carattere ottale xxx /\Oxxx/ N.D.I caratteri speciali sono tutti quei segni come il tab, il ritorno a capo ecc.

Special Characters

Carattere Descrizione Esempio\ Escape Character /\\/ strin\ga\n nuova linea /\n/ N.D.\r ritorno a capo /\A/ N.D.\t tab /\r/ N.D.\v tab verticale /\v/ N.D.\f form feed /\f/ N.D.\a alarm /\a/ N.D.[\b] backspace /[\b]/ N.D.\e escape /\e/ N.D.

Carattere Descrizione Esempio\N{name} nome carattere /\N{name}/ N.D.

Classe dei caratteri Posix definiscono altri tipi di caratteri alcuni sono complementari alle classi di caratteri visti precedentemente.

Posix Character Classes

Carattere Descrizione Esempio[:upper:] lettere maiuscole /[:upper:]/ N.D.[:lower:] lettere minuscole /[:lower:]/ N.D.[:alpha:] tutte le lettere /[:alpha:]/ N.D.[:alnum:] caratteri alfanumerici /[:alnum:]/ N.D.[:digit:] caratteri numerici /[:digit:]/ N.D.[:xdigit:] cifre esadecimali /[:xdigit:]/ N.D.[:punct:] punteggiatura /[:punct:]/ N.D.[:blank:] spazi e tab /[:blank:]/ N.D.[:cntrl:] control character /[:cntrl:]/ N.D.[:graph:] printed characters /[:graph:]/ N.D.[:word:] cifre, lettere ed underscore /[:word:]/ N.D.

I caratteri Range sono utilizzati per raggruppano o escludere gruppi di caratteri.

Range

Carattere Descrizione Esempio. qualsiasi carattere eccetto le rughe nuove (\n) /./ N.D.(a|b) a oppure b /(a|b)/ N.D.(...) le parentesi tonde identificano dei gruppi di caratteri /(...)/ N.D.[abc] raggruppa i termini che si possono accettare /[abc]/ N.D.[^abc] raggruppa i termini che non si possono accettare /[^abc]/ N.D.[a-q] raggruppa i termini che si possono accettare dalla a alla q /[a-q]/ N.D.

[A-Q]raggruppa i termini maiuscoli che si possono accettare dalla A alla Q

/[A-Q]/ N.D.

[0-7] spazi e tab /[0-7]/ N.D.\n nth group/subpattern /\n/ N.D.

Stringhe di sostituzione

String Replacement (Backreferences)

Carattere Descrizione Esempio$n nth non-passive group /$n/ N.D.$2 "xyz" in /^(abc(xyz))$/ /$2/ N.D.

$1"xyz" in /^(?:abc)(xyz)$/

/$1/ N.D.

$ Before matched string /$/ N.D.

Carattere Descrizione Esempio$' After matched string /$'/ N.D.$+ Last matched string /$+/ N.D.$& Entire matched string /$&/ N.D.$_ Entire input string /$/ N.D.$$ Literal "$" /$$/ N.D.

Un'asserzione è un predicato presente in un programma che indica che il predicato sia sempre vero.

Assertions

Carattere Descrizione Esempio?= lookahead assertion /?=/ N.D.?! Negative lookahead /?!/ N.D.?<= Lookbehind assertion /?<=/ N.D.?!= o ?<! Negative Lookbehind /?!=/ N.D.?> Once-only Subexpression /?>/ N.D.?() Condizione [se poi] /?()/ N.D.?()| Condizione [se poi altrimenti] /?()|/ N.D.?# commenti /?#/ N.D.\n control character /\n/ N.D.

Pattern Test

/

Le funzioni

Tutto il codice finora scritto, viene eseguito dall'inizio alla fine e poi termina, senza più essere utilizzato, certe volte però serve avere delle istruzioni che dobbiamo utilizzare più volte e che vogliamo richiamare in un secondo momento, le funzioni si occupano di questo, raccolgono delle istruzioni che possono essere richiamate anche più tardi. Vediamo come definire e richiamare una funzione:


//definire una funzionefunction attenzione(testo) { testo += ' e poi viene aggiunto altro testo.'; alert(testo);}

//richiamare una funzioneattenzione("viene passato l'argomento");

Come abbiamo già avuto modo di vedere all'interno delle tonde possiamo inserire degli argomenti che vengono utilizzati come variabili all'interno della funzione, prima per esempio abbiamo richiamato la funzione in questo modo attenzione("viene passato l'argomento"); in questo caso l'argomento utilizzato è una stringa "viene passato l'argomento" questo dato viene utilizzato e


sostituito alla parola "testo", la parola in questo caso "testo" è fondamentale perchè se non si definisce la possibilità di passare un argomento, non li si può utilizzare. Prima di passare al prossimo argomento bisogna mostrare una versiona alternativa della definizione delle funzioni, in questo caso la dichiarazione assomiglia molto all'assegnamento di valore di una variabile; importante ricordarsi di mettere il punto e virgola quando finisce la funzione, cosa che non è richiesta nel primo caso. Questi due stili di codici presentano anche un importante differenza, la prima forma sintattica può essere utilizzata in tutto il codice presente nel file, anche in quello che si trova prima della dichiarazione della funzione. Una funzione dichiarata con la seconda sintassi può essere utilizzata solo dal codice che viene eseguito dopo l'istruzione di assegnamento che dichiara la funzione. Se il codice è ben strutturato questa differenza non si dovrebbe notare:


//definire una funzionevar attenzione = function(testo) { testo += ' e poi viene aggiunto altro testo.'; alert(testo);};

//richiamare una funzioneattenzione("viene passato l'argomento");

Array Arguments

è possibile trattare gli argomenti di una funzione come fossero degli elementi di un array, nel prossimo esempio vediamo come con la parola riservata arguments e l'indice [0] possiamo accedere agli argomenti che vengono passati alla funzione.


function dibattito() { var primoArgomento = arguments[0]; var secondoArgomento = arguments[1]; alert("arguments: (\"" + primoArgomento + ", " + secondoArgomento + "\")");}

dibattito("affermativo", "negativo");

L'istruzione Return

Fino adesso abbiamo usato le funzioni per far comparire subito il nostro risultato, una finestra con dentro l'elaborazioni delle nostre istruzioni. Ma di solito un programma utilizza più funzioni, le quali svolgono ognuna un compito preciso, quindi per esempio potremmo avere la funzione che calcola le mele, una le pere ed un'altra che gestisce al suo interno queste due funzioni ottenendo il totale dei prodotti in magazzino. Le funzioni purtroppo gestiscono i loro dati solo all'interno della funzione quindi per far passare dei dati ad altre funzioni si utilizza l'istruzione return vediamo in che modo:


function mele () { var meleGialle = 5; var meleRosse = 5; return meleGialle + meleRosse;}

function pere () {




var pereScure = 10; var pereChiare = 10; return pereScure + pereChiare;}

function totale() { var totaleMagazzino = mele() + pere(); alert("totale delle merci: " + totaleMagazzino);}

totale();

Come avete potuto notare vengono definite tre fuzioni ed infine viene avviata la funzione totale che si occupa di gestire i totali di mele e pere, quando sono state inserite le funzioni sono diventate accessibili i risultati delle funzioni mele e pere, questo grazie all'istruzione return, inoltre bisogna sapere che tutto quello che si trova dopo return non viene considerato dalla funzione.

La visibilità

Fino adesso abbiamo definito le variabili sul piano più esterno, esse ottengono una visibilità globale, questo significa che possono essere utilizzate da tutto il codice javaScript. Questo può essere fastidioso quando abbiamo una variabile esterna uguale ad una variabile definta all'interno di una funzione, per evitare che la variabile presente nella funzione vada a modificare la variabile globale basta aggiungere la parola riservata var in modo da farla esistere localmente solo dentro allafunzione. Nel prossimo esempio dimostriamo che senza la parola var alla variabile dichiarata nella funzione si va a modificare il valore della variabile presente all'esterno della funzione.


var a = 100;var b = 100;function fnA() { var a = 200; b = 200; //modifica la variabile globale alert("function a: " + a + "\nfunction b: " + b);}fnA();

alert("global a: " + a + "\n gloabal b: " + b);

Gli oggetti

Dopo aver parlato meglio di variabili e di funzioni, possiamo passare agli oggetti che non sono nient'altro che elementi "amorfi". Gli oggetti offrono un meccanismo di raggruppamento che contiene proprietà e metodi. Le proprietà sono variabili accessibili solo attraverso l'oggetto, mentre i metodi sono funzioni accessibili solo attraverso l'oggetto. Il prossimo esempio mostra come definirli, si inizia con la prima riga "var Robot = new Object();" dove creiamo un nuovo oggetto vuoto, in alternativa a questa dichiarazione si può usare anche la versione più compatta var Robot = {}; che ha la stesso valenza del primo. Con questo metodo non siamo rinchiusi all'interno delle parentesi graffe e così possiamo assegnare un metodo o una proprietà dell'oggetto in qualsiasi posizione a patto che si trovi dopo la dichiarazione dell'oggetto. Nella seconda riga vediamo l'operazione di assegnazione di una proprietà, per farlo basta scrivere il nome dell'oggetto seguito daun punto e dal nome della proprietà Robot.metallo = "Titanio";. Anche l'assegnamento di un metodo presenta una forma analoga alle proprietà Robot.sterminaUmani = function(argomento) {alert(argomento);};. Probabilmente l'avrete già notato, ma abbiamo usato una dichiarazione della funzione/metodo diversa dalla forma classica che abbiamo utilizzato fino adesso function


sterminaUmani(argomento) {alert(argomento);}; purtroppo tutto questo è necessario, perchè altrimenti non sarebbe possibile assegnarla come metodo dell'oggetto "Robot" infatti assegnare un metodo in questa maniera non è sintatticamente corretto function Robot.sterminaUmani(argomento) {alert(argomento);};


var Robot = new Object(); //oppure si può definire l'oggetto così var Robot = {};Robot.metallo = "Titanio";Robot.sterminaUmani = function(argomento) { alert(argomento);};

Robot.sterminaUmani(Robot.metallo);

Una variante della definizione dell'oggetto consiste nel definire subito tutti i metodi e le proprietà all'interno della dichiarazione (nelle graffe). I vantaggi di questa sintassi sono nella compattezza delcodice, infatti definendole all'interno non è più necessario scrivere prima di ogni proprietà o metodoil nome dell'oggetto al quale li associamo, questo succede perchè è scontato che li si assegnino all'oggetto al quale sono "ospiti". Non è l'unico cambiamento però, oltre alla definizione delle funzioni cambiano anche i segni usati per l'assegnamento ora si devono utilizzare i due punti al posto dell'uguale, mentre per far finire un assegnamento bisogna utilizzare la virgola al posto del punto e virgola:


var Robot = { metallo: "Titanio", sterminaUmani: function(argomento) { alert(argomento); }};

Robot.sterminaUmani(Robot.metallo);

Come potete vedere il risultato non cambia.

Funzioni native

Ne abbiamo viste già alcune in questo capitolo come alert, parseInt ecc, in questa guida ne vedremomolte altre e normalmente saranno accompagnate dall'argomento. Tutte quelle senza argomento saranno presentate qua. La funziones eval(string) utilizza la stringa racchiusa tra parentesi come delle isruzioni JavaScript. L'operatore typeof invece restituisce il tipo di dato della variabile che analizza. I valori restituiti possono essere: string, boolean, number, function.


//evalvar part1 = "nome = \"matteo\";";var part2 = "cognome = \"gilardoni\";";var part0 = "var resultEval = nome + \" \" + cognome;";eval(part1 + part2 + part0);

//typeofvar booleano = true;var prova = new Function();var numero = 1;var carattere = "Salve";




var resulType = "Booleano: " + typeof booleano +"\n" + "prova: " + typeof prova + "\n" + "numero: " + typeof numero + "\n" + "carattere: " + typeof carattere + "\n";alert("EVAL \n" + resultEval +"\n\n"+ "TYPEOF: \n" + resulType);

Avviare javaScript al momento giusto

Il primo problema che troverete con javaScript sarà quello di aspettare che la pagina abbia caricato tutti gli oggetti del Dom (Document Object Model). Perchè senza di quelli javascript non può manipolarli, questo problema deriva dal fatto che la dichiarazione viene fatta nel tag head e quindi il parser quando analizza riga per riga la pagina analizza javascript e lo avvia, ma non avendo analizzato tutta la pagina javascript non ha gli elementi che la maggiorparte delle volte devemanipolare. Per aspettare che il dom sia completo ci sono alcune soluzioni, la prima è utilizzare l'oggetto wondow e l'evento onload:

windows.onload

window.onload = function() { //qui inseriamo tutte le nostre funzioni document.getElementById('google').onclick = function(){alert('Google');}; document.getElementById('yahoo').onclick = function(){alert('Yahoo!');};}

Questo sistema attende che l'oggetto window che rappresenta la finestra del browser carichi tutta la pagina che contiene. Questo può creare un'altro handicap perchè non attende soltanto che il dom venga caricato ma anche tutti i file multimediali ad esso associati creando un ritardato maggiore all'esecuzione dei nostri script. Per risolvere quest'ultimo problema ci viene in aiuto una delle librerie che abbiamo introdotto ad inizio capitolo, la libreria jQuery, con la sua funzione .ready()

$(document).ready(function(){//function});

$(document).ready(function(){ //qui inseriamo tutte le nostre funzioni document.getElementById('google').onclick = function(){alert('Google');}; document.getElementById('yahoo').onclick = function(){alert('Yahoo!');};});

Anche Prototype offre un metodo simile a quello di jQuery, che risolse i problemi presentati precedentemente.

document.observe("dom:loaded", function() {//function});

document.observe("dom:loaded", function() { //qui inseriamo tutte le nostre funzioni document.getElementById('google').onclick = function(){alert('Google');}; document.getElementById('yahoo').onclick = function(){alert('Yahoo!');};});

Accesso al Browser Object ModelPer poter andare a modificare la nostra pagina web bisogna conoscerne la struttura, per poter sapere quali elementi poter andare a manipolare. Il BOM è una struttura gerarchica che contiene tutti gli elementi del browser, nell'immagine seguente vediamo i più importanti. Il nodo più alto è window che rappresenta la finestra del browser, poi sotto abbiamo:

1. navigator (il browser) 2. screen (lo schermo) 3. location (l'indirizzo) 4. history (la cronologia) 5. document (il documento html)

Sempre su questo livello troviamo anche l'oggetto status e i frames, usati sempre meno.

Funzioni dell'oggetto windowOra vediamo quali funzioni native sono disponibili per gli elementi appena citati. alert(), confirm()e prompt() tutti questi sono metodi dell'elemento window e si richiamano in questa maniera window.alert() se avrete fatto attenzione però alert() come le altre tre funzioni non necessitano per forza della dichiarazione dell'oggetto window. Tutti e tre i metodi aprono un finistra, alert() apre unafinestra implicita ed il testo che usa è quello definto nell'argomento, confirm() apre una finestra modale significa che permette di scegliere tra due possibilità che restituiranno al programma true o false, nell'esempio abbiamo usato questa caratteristica per sfruttare il comportamento delle condizioni, cliccando sul pulsante ok che equivale a true si attiverà il codice condizionale, infine troviamo prompt() che è una finestra di dialogo, questo tipo di metodo apre un finestra dove poteteinserire del testo. Nell'esempio si è sfruttata la caratteristica di prompt di restituire il testo che viene inserito per aprire un finistra implicita con il vostro nome (almeno se non avete fatto i furbi ;)).


window.alert("finestra implicita");

if (window.confirm("finestra modale")){ alert("hai scelto ok");};

var nome = window.prompt("Come ti chiami?","Scrivi qui il tuo nome");alert("Ciao " + nome);

I metodi blur() e focus() si occupano focalizzare un elemento in una pagina, quando clicchiamo peresempio su un campo di testo, oppure usiamo il tasto tab, si dice che il focus, si è spostato. Questi metodi si occupano così di toglierlo tramite blur() e di metterlo con focus(), ecco un esempio su come spostare il focus su un elemento document.getElementById('main').focus();. I prossimi metodi


http://www.matteowebdesigner.com/test/javascript/capitolo2.html#document

http://www.matteowebdesigner.com/test/javascript/capitolo2.html#history

http://www.matteowebdesigner.com/test/javascript/capitolo2.html#location

http://www.matteowebdesigner.com/test/javascript/capitolo2.html#screen

http://www.matteowebdesigner.com/test/javascript/capitolo2.html#navigator

che spiegheremo presentano tutti due varianti, una che accetta dei valori assoluti e l'altra dei valori relativi. Iniziamo con il primo resizeTo() e resizeBy() queste due funzioni si occupano di ridimensionare la finestra del browser, moveTo() e moveBy() spostano la finestra a seconda dei valori inseriti, scrollTo() e scrollBy() si occupa di spostare la scroll bar della pagina. Se avete uno dei browser usciti recentemente vi accorgerete che il prossimo esempio non funziona. Questo non è dovuto a qualche errore nel codice ma è una nuova modifica che hanno adottato alcuni dei più recenti browser come Chrome, Opera e Firefox. I metodi apparte (scrollTo e scrollBy) funzionano solo se si utilizzati insieme al metodo open(). Infatti si sconsiglia l'uso di questi metodi se non nel caso di dover aprire una nuova finestra.


alert("ridimensiona in modo assoluto e relativo"); window.resizeTo(900,800);window.resizeBy(-100,-100);

alert("muovi la pagina in modo assoluto e relativo");window.moveTo(100,200);window.moveBy(100,200);

alert("scrolla in modo assoluto e relativo");window.scrollTo(0,400);window.scrollBy(0,-100);

Siccome ne abbiamo parlato, ora vediamo la funzione open("url", "titolo", "parametro1=valore1, parametro2=valore2"), questo metodo si occupa di aprire una nuova pagina, e gli si possono inviare parecchi argomenti, il primo argomento si occupa di decidere l'url ovvero la pagina che vogliamo aprire, il secondo si occupa di dargli un titolo, mentre gli altri sono tutti parametri che si possono passare usando la forma parametro=valore ogni parametro deve essere diviso da una virgola. Di seguito vediamo i parametri che è possibile inserire:

Nome parametroPossibili

valoriDescrizione

copyhistory yes, noCopia o meno la cronologia della finestra padre nella finestra figlia

width, height, top, left

numero interoIndicano rispettivamente le dimensioni e la posizione sullo schermo della finestra

location yes, no Indica se mostrare la barra dell'indirizzomenubar yes, no Indica se mostrare la barra dei menuresizable yes, no Abilita il ridimensionamento della finestrascrollbars yes, no Mostra/nasconde le barre di scorrimento lateralistatus yes, no Mostra la barra di statotoolbar yes, no Mostra la barra degli strumenti

Insieme alla funzione open() esiste anche la funzione close() che si occupa di chiudere una finestra del browser. Quando ci si occupa di creare una nuova finestra è importante creare un riferimento alla finestra che si vuole aprire. Questo permette di avere il controllo sulla finestra appena creata e l'accesso alle sue proprietà ed ai suoi metodi. Nel prossimo esempio l'oggetto di riferimento è la variabile windowObjectReference.


var windowObjectReference; //creiamo l'oggetto che conterrà la nostra referenzafunction openRequestedPopup(){ windowObjectReference =



window.open("capitolo1.html","DescriptiveWindowName","resizable=yes,scrollbars=yes,status=yes");}function closeRequestedPopup(){ windowObjectReference.close();} openRequestedPopup();closeRequestedPopup();

alert("ho aperto e subito chiuso la finestra");

Navigator

Restituisce un riferimento all'oggetto navigator che può essere richiesto per informazioni sulle applicazioni in esecuzione.


alert("You're using " + navigator.appName);

ProprietàStandard

Descrizione Esempio

navigator.appCodeName No

Restituisce il nome intero del nome del "codice" del browser corrente. Non fare affidamento su questa proprietà per avere un valore corretto.

Esegui

alert("You're using " +

navigator.appCodeName);

navigator.appName Si

Restituisce il nome uffiaciale del browser. Non fare affidamento su questa proprietà per avere un valore corretto.

Esegui


navigator.appName);


Restituisce la versione del browser in una stringa. Non fare affidamento su questa proprietà per avere un valore corretto.

Eseguialert(navigator.appVersion);

navigator.buildID No

Restituisce il build identifier del browser (esempio "2006090803").

Eseguiundefined

navigator.connection SiFornisce informazioni sulla connessione alla rete del dispositivo.

Eseguiundefined

navigator.cookieEnabled Si

Restituisce un valore booleano che indica se i cookie sono abilitati nel browser oppure no.

Eseguiundefined

navigator.doNotTrack No Riporta il valore della preferenza do-not-track

Esegui undefined









ProprietàStandard

Descrizione Esempio

dell'utente. Quando questo valore è "Si , il tuo sito o applicazione non deve monitorare l'utente.

navigator.id No

Returns the id object which you can use to add support for BrowserID to your web site.

Eseguiundefined

navigator.language Si

Restituisce una stringa che rappresenta la versione della lingua delbrowser.

Eseguialert(navigator.language);

navigator.mimeTypes SiRestituisce una lista di tipi MIME supportati dalbrowser.

Eseguialert(navigator.mimeTypes);

navigator.mozApps NoRestituisce un ogggetto Apps che puoi installare,manipolare e controllare.


navigator.mozBattery No

Returns a battery object you can use to get information about the battery charging status.

Eseguiundefined

navigator.mozNotification e navigator.webkitNotification

No

Returns a notification object you can use to deliver notifications to the user from your web application.

Eseguiundefined

navigator.mozSms No

Returns a SmsManager object you can use to manage SMS messagingin your web application.

Eseguiundefined

navigator.mozTelephony No

Returns a Telephony object you can use to create and manage telephone calls.

Eseguiundefined

navigator.onLine SiRestituisce un valore booleano se il browser sta lavorando online.

Eseguialert(navigator.onLine);

navigator.oscpu SiRestituisce una stringa che rappresenta il sistema operativo.

Eseguiundefined

navigator.platform SiRestituisce una stringa che rappresenta la piattaforma del browser.

Eseguialert(navigator.platform);

navigator.plugins Si Restituisce una array dei Esegui alert(navigator.plugins);













ProprietàStandard

Descrizione Esempio

plug-in installti nel browser.

navigator.product NoRestituisce il nome del prodotto del browser.

Eseguialert(navigator.product);

navigator.productSub NoRestituisce il numero di produzione del browser.

Eseguialert(navigator.productSub);

navigator.securitypolicy No

Restituisce una stringa vuota. In Netscape 4.7x, restituisce "US & CA domestic policy" o "Export policy".

Eseguiundefined

navigator.userAgent SiReturns the user agent string for the current browser.

Eseguialert(navigator.userAgent);

navigator.vendor NoRestituisce il nome del fornitore del browser.

Eseguialert(navigator.vendor);

navigator.vendorSub NoRestituisce il numero della versione del fornitore del browser.

Eseguialert(navigator.vendorSub);

navigator.webkitPointer NoRestituisce un oggetto PointerLock per il mouse API Lock.

Eseguiundefined

Ora vedremo i metodi che ci vengono concessi:

MetodoStandard

Descrizione Esempio

navigator.javaEnabled Si

Indica se il browser host ha Java abilitato o no.

Eseguialert(navigator.javaEnabled);

navigator.mozIsLocallyAvailable No

Consente al codice di vedere se il documento determinato dall'URI è disponibile senza l'uso della rete.

Eseguiundefined

navigator.registerContentHandler Si

Permette ai siti di registrarsi come possibile gestore con un tipo di MIME.

Eseguiundefined

navigator.registerProtocolHandler Si

Permette ai siti web di registrarsi come un possibile

Eseguiundefined












MetodoStandard

Descrizione Esempio

gestore con un determinato protocollo.

navigator.vibrate() Si

Provoca la vibrazione sui dispositivi che lasupportano.

Eseguiundefined

Screen

L'oggetto screen restituisce i riferimenti dello schermo è un oggetto speciale perchè ispeziona le proprietà dello schermo corrente e viene eseguito il rendering. Ora vediamo le seguenti proprietà supportate:

Proprietà Descrizione Esempio

availTopSpecifica la coordinata y del primo pixel chenon è assegnato alle permanenti o semipermanenti interfaccie utente.

Eseguialert(screen.availTop);

availLeftSpecifica il primo pixel disponibile a sinistra.

Eseguialert(screen.availLeft);

availHeight Specifica l'altezza dello schermo. Eseguialert(screen.availHeight);

availWidth Specifica la larghezza dello schermo. Eseguialert(screen.availWidth);

colorDepthSpecifica la profondità del colore dello schermo.

Eseguialert(screen.colorDepth);

height Restituisce l'altezza dello schermo in pixel. Eseguialert(screen.height);

leftRestituisce la distanza dei pixel dal lato sinistro dello schermo principale al lato sinistro dello schermo corrente.

Eseguiundefined

pixelDepth Prende i bit di profondità dello schermo. Eseguialert(screen.pixelDepth);

topRestituisce la distanza dei pixel Returns the distance in pixels from the top side of the current screen.

Eseguiundefined

width Restituisce la larghezza dello schermo. Eseguialert(screen.width);

Location

L'oggetto Location contiene informazioni sull'url del documento e fornisce anche dei metodi per cambiarlo. Nel prossimo esempio mostriamo come cambiare l'url del browser in modo da cambiare pagine:

Clicca Qui

window.location = "capitolo1.html";

Come possiamo vedere l'oggetto location contiene tutta la stringa dell'url, associandogli un valore diverso, come nell'esempio precedente il browser seguirà quel l'url.













Clicca Qui

alert(window.location);

Ora invece nella tabella seguente vedremo le proprietà che si posso associare all'oggetto location, ogni proprietà permette di selezionare una parte dell'url: http://[www.example.com]:80/search?q=devmo#test


hashLa parte dell'url che segue dopo il simbolo #, includendo il simbolo stesso.

#test

host Il nome dell'host e il numero della porta. [www.example.com]:80hostname Il nome dell'host senza il numero della porta. www.example.com

href L'intero URL.http://[www.example.com]:80/search?q=devmo#test

pathname il percorso (relativo all'host). /searchport Il numero della porta. 80protocol Il protocollo dell'url. http:

searchLa parte dell'url che segue dopo il simbolo ?, includendo il simbolo stesso.

?q=devmo

Clicca Qui

alert(window.location.protocol);

Con queste proprietà possiamo assegnare valori specifici per ogni parte dell'url. Ora vedremo i metodi che ci vengono concessi:

Metodo Descrizioneassign(url) Carica il documento attraverso l'url fornito dall'argomento.

reload(forceget)

Ricarica il documento corrente. Forceget è un valore booleano che quando è vero, ricarica sempre la pagina dal server. Se è false o non specificato il browser ricaricherà la pagina attraverso le cache.

replace(url)Sostituisce il documento corrente con l'url fornito. La differenza con il metodo assign()è che dopo aver usato replace() la pagina corrente non sarà salvata nella cronologia.

toString() Restituisce la rappresentazionr in formato stringa del l'url dell'oggetto location.

il metodo toString() converte un oggetto in in una stringa. Questo metodo serve se si vuole lavoraresull'url come fosse una stringa, per poter usare altri metodi come charAt() che permette di sapere quale carattere c'è nell'url in una determinata posizione.

Clicca Qui

alert("url completo: \n" + window.location + "\n \n" + "quindicesimo carattere: \n" + window.location.toString().charAt(15));

History

Il BOW prevede l'accesso alla cronologia del browser tramite l'oggetto history. Con questo oggetto puoi disporre dei metodi e delle proprietà che ti lasciano andare avanti e indietro nella cronologia dell'utente. Vediamo le prime tre funzioni dell'oggetto history, il metodo back() fa andare alla pagina visitata precedentemente, forward() si occupa di fare l'opposto del metodo back.

Clicca Qui per eseguire back(), clicca Qui per eseguire forward().






window.history.back();window.history.forward();

Con la funzione go() possiamo andare nel punto della cronologia che vogliamo.


window.history.go(-1); //è come usare back()window.history.go(1); //è come usare forward()

Possiamo anche recuperare quante pagine abbiamo visto.


var numberPageVisited = window.history.length;alert(numberPageVisited);

Document

L'elemento document contiene tutti gli elementi dell'html e presenta al suo interno un'altra sottoFunzioni dell'oggetto window

Ora vediamo quali funzioni native sono disponibili per gli elementi appena citati. alert(), confirm()e prompt() tutti questi sono metodi dell'elemento window e si richiamano in questa maniera window.alert() se avrete fatto attenzione però alert() come le altre tre funzioni non necessitano per forza della dichiarazione dell'oggetto window. Tutti e tre i metodi aprono un finistra, alert() apre unafinestra implicita ed il testo che usa è quello definto nell'argomento, confirm() apre una finestra modale significa che permette di scegliere tra due possibilità che restituiranno al programma true o false, nell'esempio abbiamo usato questa caratteristica per sfruttare il comportamento delle condizioni, cliccando sul pulsante ok che equivale a true si attiverà il codice condizionale, infine troviamo prompt() che è una finestra di dialogo, questo tipo di metodo apre un finestra dove poteteinserire del testo. Nell'esempio si è sfruttata la caratteristica di prompt di restituire il testo che viene inserito per aprire un finistra implicita con il vostro nome (almeno se non avete fatto i furbi ;)).


window.alert("finestra implicita");

if (window.confirm("finestra modale")){ alert("hai scelto ok");};

var nome = window.prompt("Come ti chiami?","Scrivi qui il tuo nome");alert("Ciao " + nome);

I metodi blur() e focus() si occupano focalizzare un elemento in una pagina, quando clicchiamo peresempio su un campo di testo, oppure usiamo il tasto tab, si dice che il focus, si è spostato. Questi metodi si occupano così di toglierlo tramite blur() e di metterlo con focus(), ecco un esempio su come spostare il focus su un elemento document.getElementById('main').focus();. I prossimi metodiche spiegheremo presentano tutti due varianti, una che accetta dei valori assoluti e l'altra dei valori relativi. Iniziamo con il primo resizeTo() e resizeBy() queste due funzioni si occupano di ridimensionare la finestra del browser, moveTo() e moveBy() spostano la finestra a seconda dei valori inseriti, scrollTo() e scrollBy() si occupa di spostare la scroll bar della pagina. Se avete uno dei browser usciti recentemente vi accorgerete che il prossimo esempio non funziona. Questo non è dovuto a qualche errore nel codice ma è una nuova modifica che hanno adottato alcuni dei più recenti browser come Chrome, Opera e Firefox. I metodi apparte (scrollTo e scrollBy) funzionano solo se si utilizzati insieme al metodo open(). Infatti si sconsiglia l'uso di questi metodi se non nel caso di dover aprire una nuova finestra.





alert("ridimensiona in modo assoluto e relativo"); window.resizeTo(900,800);window.resizeBy(-100,-100);

alert("muovi la pagina in modo assoluto e relativo");window.moveTo(100,200);window.moveBy(100,200);

alert("scrolla in modo assoluto e relativo");window.scrollTo(0,400);window.scrollBy(0,-100);

Siccome ne abbiamo parlato, ora vediamo la funzione open("url", "titolo", "parametro1=valore1, parametro2=valore2"), questo metodo si occupa di aprire una nuova pagina, e gli si possono inviare parecchi argomenti, il primo argomento si occupa di decidere l'url ovvero la pagina che vogliamo aprire, il secondo si occupa di dargli un titolo, mentre gli altri sono tutti parametri che si possono passare usando la forma parametro=valore ogni parametro deve essere diviso da una virgola. Di seguito vediamo i parametri che è possibile inserire:

Nome parametroPossibili

valoriDescrizione

copyhistory yes, noCopia o meno la cronologia della finestra padre nella finestra figlia

width, height, top, left

numero interoIndicano rispettivamente le dimensioni e la posizione sullo schermo della finestra

location yes, no Indica se mostrare la barra dell'indirizzomenubar yes, no Indica se mostrare la barra dei menuresizable yes, no Abilita il ridimensionamento della finestrascrollbars yes, no Mostra/nasconde le barre di scorrimento lateralistatus yes, no Mostra la barra di statotoolbar yes, no Mostra la barra degli strumentiInsieme alla funzione open() esiste anche la funzione close() che si occupa di chiudere una finestra del browser. Quando ci si occupa di creare una nuova finestra è importante creare un riferimento alla finestra che si vuole aprire. Questo permette di avere il controllo sulla finestra appena creata e l'accesso alle sue proprietà ed ai suoi metodi. Nel prossimo esempio l'oggetto di riferimento è la variabile windowObjectReference.


var windowObjectReference; //creiamo l'oggetto che conterrà la nostra referenzafunction openRequestedPopup(){ windowObjectReference = window.open("capitolo1.html","DescriptiveWindowName","resizable=yes,scrollbars=yes,status=yes");}function closeRequestedPopup(){ windowObjectReference.close();} openRequestedPopup();closeRequestedPopup();

alert("ho aperto e subito chiuso la finestra");



Navigator

Restituisce un riferimento all'oggetto navigator che può essere richiesto per informazioni sulle applicazioni in esecuzione.


alert("You're using " + navigator.appName);

ProprietàStandard

Descrizione Esempio

navigator.appCodeName No

Restituisce il nome intero del nome del "codice" del browser corrente. Non fare affidamento su questa proprietà peravere un valore corretto.

Esegui


navigator.appCodeName);


Restituisce il nome uffiaciale del browser. Non fare affidamento su questa proprietà peravere un valore corretto.

Esegui


navigator.appName);


Restituisce la versione del browser in una stringa. Non fare affidamento su questa proprietà peravere un valore corretto.

Eseguialert(navigator.appVersion);

navigator.buildID No

Restituisce il build identifier del browser (esempio "2006090803").

Eseguiundefined

navigator.connection Si

Fornisce informazioni sulla connessione alla rete del dispositivo.

Eseguiundefined

navigator.cookieEnabled Si

Restituisce un valore booleano cheindica se i cookie sono abilitati nel browser oppure no.

Eseguiundefined

navigator.doNotTrack No

Riporta il valore della preferenza do-not-track dell'utente. Quando

Eseguiundefined









ProprietàStandard

Descrizione Esempio

questo valore è "Si ,il tuo sito o applicazione non deve monitorare l'utente.

navigator.id No

Returns the id object which you can use to add support for BrowserID to your web site.

Eseguiundefined

navigator.language Si

Restituisce una stringa che rappresenta la versione della lingua del browser.

Eseguialert(navigator.language);

navigator.mimeTypes Si

Restituisce una listadi tipi MIME supportati dal browser.


navigator.mozApps No

Restituisce un ogggetto Apps che puoi installare, manipolare e controllare.


navigator.mozBattery No

Returns a battery object you can use to get information about the battery charging status.

Eseguiundefined

navigator.mozNotification e navigator.webkitNotification

No

Returns a notification object you can use to deliver notificationsto the user from your web application.

Eseguiundefined

navigator.mozSms No

Returns a SmsManager objectyou can use to manage SMS messaging in your web application.

Eseguiundefined

navigator.mozTelephony No

Returns a Telephony object you can use to create and manage telephone calls.

Eseguiundefined









ProprietàStandard

Descrizione Esempio

navigator.onLine Si

Restituisce un valore booleano se il browser sta lavorando online.

Eseguialert(navigator.onLine);

navigator.oscpu Si

Restituisce una stringa che rappresenta il sistema operativo.

Eseguiundefined

navigator.platform Si

Restituisce una stringa che rappresenta la piattaforma del browser.

Eseguialert(navigator.platform);

navigator.plugins SiRestituisce una array dei plug-in installti nel browser.

Eseguialert(navigator.plugins);

navigator.product NoRestituisce il nome del prodotto del browser.

Eseguialert(navigator.product);

navigator.productSub No

Restituisce il numero di produzione del browser.

Eseguialert(navigator.productSub);

navigator.securitypolicy No

Restituisce una stringa vuota. In Netscape 4.7x, restituisce "US & CA domestic policy" o "Export policy".

Eseguiundefined

navigator.userAgent SiReturns the user agent string for the current browser.

Eseguialert(navigator.userAgent);

navigator.vendor NoRestituisce il nome del fornitore del browser.

Eseguialert(navigator.vendor);

navigator.vendorSub No

Restituisce il numero della versione del fornitore del browser.

Eseguialert(navigator.vendorSub);

navigator.webkitPointer No

Restituisce un oggetto PointerLock per il mouse API Lock.

Eseguiundefined

Ora vedremo i metodi che ci vengono concessi:












MetodoStandard

Descrizione Esempio

navigator.javaEnabled Si

Indica se il browser host ha Java abilitato o no.

Eseguialert(navigator.javaEnabled);

navigator.mozIsLocallyAvailable No

Consente al codice di vedere se il documento determinato dall'URI è disponibile senza l'uso della rete.

Eseguiundefined

navigator.registerContentHandler Si

Permette ai siti di registrarsi come possibile gestore con un tipo di MIME.

Eseguiundefined

navigator.registerProtocolHandler Si

Permette ai siti web di registrarsi come un possibile gestore con un determinato protocollo.

Eseguiundefined

navigator.vibrate() Si

Provoca la vibrazione sui dispositivi che lasupportano.

Eseguiundefined

Screen

L'oggetto screen restituisce i riferimenti dello schermo è un oggetto speciale perchè ispeziona le proprietà dello schermo corrente e viene eseguito il rendering. Ora vediamo le seguenti proprietà supportate:


availTopSpecifica la coordinata y del primo pixel chenon è assegnato alle permanenti o semipermanenti interfaccie utente.

Eseguialert(screen.availTop);

availLeftSpecifica il primo pixel disponibile a sinistra.

Eseguialert(screen.availLeft);

availHeight Specifica l'altezza dello schermo. Eseguialert(screen.availHeight);

availWidth Specifica la larghezza dello schermo. Eseguialert(screen.availWidth);











colorDepthSpecifica la profondità del colore dello schermo.

Eseguialert(screen.colorDepth);

height Restituisce l'altezza dello schermo in pixel. Eseguialert(screen.height);

leftRestituisce la distanza dei pixel dal lato sinistro dello schermo principale al lato sinistro dello schermo corrente.

Eseguiundefined

pixelDepth Prende i bit di profondità dello schermo. Eseguialert(screen.pixelDepth);

topRestituisce la distanza dei pixel Returns the distance in pixels from the top side of the current screen.

Eseguiundefined

width Restituisce la larghezza dello schermo. Eseguialert(screen.width);

Location

L'oggetto Location contiene informazioni sull'url del documento e fornisce anche dei metodi per cambiarlo. Nel prossimo esempio mostriamo come cambiare l'url del browser in modo da cambiare pagine:

Clicca Qui

window.location = "capitolo1.html";

Come possiamo vedere l'oggetto location contiene tutta la stringa dell'url, associandogli un valore diverso, come nell'esempio precedente il browser seguirà quel l'url.

Clicca Qui

alert(window.location);

Ora invece nella tabella seguente vedremo le proprietà che si posso associare all'oggetto location, ogni proprietà permette di selezionare una parte dell'url: http://[www.example.com]:80/search?q=devmo#test


hashLa parte dell'url che segue dopo il simbolo #, includendo il simbolo stesso.

#test

host Il nome dell'host e il numero della porta. [www.example.com]:80hostname Il nome dell'host senza il numero della porta. www.example.com

href L'intero URL.http://[www.example.com]:80/search?q=devmo#test

pathname il percorso (relativo all'host). /searchport Il numero della porta. 80protocol Il protocollo dell'url. http:

searchLa parte dell'url che segue dopo il simbolo ?, includendo il simbolo stesso.

?q=devmo

Clicca Qui

alert(window.location.protocol);

Con queste proprietà possiamo assegnare valori specifici per ogni parte dell'url. Ora vedremo i










metodi che ci vengono concessi:

Metodo Descrizioneassign(url) Carica il documento attraverso l'url fornito dall'argomento.

reload(forceget)Ricarica il documento corrente. Forceget è un valore booleano che quando è vero, ricarica sempre la pagina dal server. Se è false o non specificato il browser ricaricherà la pagina attraverso le cache.

replace(url)Sostituisce il documento corrente con l'url fornito. La differenza con il metodo assign() è che dopo aver usato replace() la pagina corrente non sarà salvata nella cronologia.

toString() Restituisce la rappresentazionr in formato stringa del l'url dell'oggetto location.

il metodo toString() converte un oggetto in in una stringa. Questo metodo serve se si vuole lavoraresull'url come fosse una stringa, per poter usare altri metodi come charAt() che permette di sapere quale carattere c'è nell'url in una determinata posizione.

Clicca Qui

alert("url completo: \n" + window.location + "\n \n" + "quindicesimo carattere: \n" + window.location.toString().charAt(15));

History

Il BOW prevede l'accesso alla cronologia del browser tramite l'oggetto history. Con questo oggetto puoi disporre dei metodi e delle proprietà che ti lasciano andare avanti e indietro nella cronologia dell'utente. Vediamo le prime tre funzioni dell'oggetto history, il metodo back() fa andare alla pagina visitata precedentemente, forward() si occupa di fare l'opposto del metodo back.

Clicca Qui per eseguire back(), clicca Qui per eseguire forward().

window.history.back();window.history.forward();

Con la funzione go() possiamo andare nel punto della cronologia che vogliamo.


window.history.go(-1); //è come usare back()window.history.go(1); //è come usare forward()

Possiamo anche recuperare quante pagine abbiamo visto.


var numberPageVisited = window.history.length;alert(numberPageVisited);

Document

L'elemento document contiene tutti gli elementi dell'html e presenta al suo interno un'altra sotto-gerarchia dal nome DOM (Document Object Model). Nel document è possibile la manipolazione dei cookie e delle applet. Come potrete vedere nell'immagine seguente anche gli attributi e gli elementi di testo sono considerati come dei nodi rispettivamente vegono chiamati nodi attributi e nodi di testo.






Ora che si è vista la struttura, vediamo come poter selezionare un elemento nel dom. Si può ottenereun riferimento ad un nodo tramite l'id getElementById(id) e attravarso il tag name getElementsByTagName(tag). Mentre con getElementById seleziona solo un elemento, con getElementsByTagName selezioniamo un elenco di nodi, come se fosse un array è possibile scegliere tra gli elementi selezionati. La proprietà nodeName permette di conoscere il nome di tag selezionato.


var targetId = document.getElementById("main");var nameNode = targetId.nodeName; //nome del tag

var targetTags = document.getElementsByTagName("div");var numberTags = targetTags.length; //numero elementi selezionati

var targetTag = targetTags[0]; //seleziona il primo elemento della lista targetTags

alert(nameNode + "\n" + numberTags + "\n" + targetTags);

Ritorniamo sul metodo getElementsByTagName() è possibile restringere il campo degli elementi, utilizzando più volte questo metodo in questo modo:

Ridurre gli elementi selezionati:


var unorderLists = document.getElementsByTagName('ul');var unorderList = unorderLists[0];var listItems = unorderList.getElementsByTagName('li');var listItem = listItems[0];var anchors = listItem.getElementsByTagName('a')[0];

Anche le librerie mettono a disposizione dei metodi di selezione degli elementi, che sono molto più potenti dei metodi nativi di javaScript. Prototype è il primo a sintetizzare la forma document.getElementById(id) con la forma più compatta $(id) e inoltre permette di aggiungere più id contemporaneamente in questo modo: $(id1,id2,id3), un metodo che prototype ha copiato da jQuery è quello della selezione tramite la sintassi dei css $$(cssRule) permette dappunto di semplificare enormemente la parte di selezione degli elementi.

Alternative con Prototype

$('header'); //selziona gli id$('header','main','footer');$$('body .container p');

jQuery come si accenava prima, ha creato un metodo che sfrutta la sintassi di css1,2,3 per selezionare gli elementi, il metodo utilizza il dollaro $(cssRule).

Alternative con jQuery

$('#main'); //seleziona id$('#main div.test'); //seleziona i div con class test$('#header div.test:nth-child(2)'); //css3

Muoversi nel DOM

Se vogliamo navigare nell'albero del DOM possiamo utilizzare anche delle proprietà create apposta per questo. Elenchiamole, parentNode seleziona il genitore, previousSibling seleziona il fratello che lo precede, nextSibling seleziona il fratello che lo segue, firstChild seleziona il primo figlio, childNodes seleziona i figli, utilizzando le quadre è possibile specificare quale nodo figlio childNodes[2], inserendo 2 nelle quadre selezioneremo il terzo nodo figlio (si conta anche lo zero), lastChild seleziona l'ultimo figlio.

vedremo nel prossimo esempio come poter navigare nel dom, abbiamo utilizzato la proprietà nodeValue per permette di ottenere il valore del nodo, normalmente gli elementi danno come risultato null, apparte i nodi di testo, i commenti ed i nodi CDATA.


var anchor = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];var valueTextAnchor = anchor.firstChild.nodeValue;alert(valueTextAnchor);

Come al solito le librerie ci vengono in aiuto mettendoci a disposizione delle funzioni sulla navigazione del dom. jQuery mette a disposizioni i seguenti metodi: .parent(), oppure :parent (quest'ultimo va usato come selettore) permette di selezionare l'elemento genitore, poi troviamo parents() che permette di memorizzare tutti i genitori fino ad arrivare alla radice. Il metodo next() si occupa di selezionare l'elemento fratello successivo, nextAll() seleziona tutti i fratelli successivi. Il metodo .prev() e prevAll() fa esattamente l'opposto di next() e nextAll() prende il fratello che lo precede. Per muoversi tra gli elementi figlio si utilizza il metodo children(), a supporto ci sono anche i selettori :first-child, :last-child che dal nome è facile capire cosa si occupano, mentre un'altro selettore utile è :nth-child() che permette inserendo un numero di selezionare gli elementi figlio saltando alcuni.

Alternativa jQuery

var genitore = $('#main').parent();var genitore = $('#main:parent');var genitori = $('#main').parents();var genitori = $('.test').next();var genitori = $('.test').nextAll();var genitori = $('.test').prev();var genitori = $('.test').prevAll();var genitori = $('.test:nth-child(2)'); //prende i figli a secondo del numero


Ottenere un riferimento agli attributi

Per ottenere un riferimento ad un attributo possiamo usare o il metodo getAttribute("attributo") oppure ottenerla considerandola come una proprietà dell'elemento, tipo se vogliamo ottenere l'attributo href bisogna fare così .href il primo caso dovrebbe essere il metodo da usare per essere conformi allo standard del W3c purtroppo è un metodo afflitto da vari problemi sui vari browser quindi è meglio utilizzare il secondo metodo:


var linkNavigation = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];var linkNavigationAtt = linkNavigation.getAttribute('href'), linkNavigationAtt2 = linkNavigation.href;alert('getAttribute(\'herf\') \n' + linkNavigationAtt);alert('.href \n' + linkNavigationAtt2);

Per cambiare o aggiungere un attributo si può utilizzare il metodo .setAttribute(attributo,valore) sempre considerando l'attributo come una proprietà dell'elemento, si può per esempio assegnare allaproprietà .name un valore e questa oltre ad prendere quel valore, se l'elemento non ha quell'attributolo aggiungerà.


var linkNavigation = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];//creare un attributolinkNavigation.setAttribute('title', 'valore-attributo');linkNavigation.name = 'valore-attributo2';

//controllare se il valore è stato aggiuntovar linkNavigationAtt = linkNavigation.getAttribute('title');var linkNavigationAtt2 = linkNavigation.name;alert('.setAttribute(\'title\', \'valore-attributo\'); \n' + linkNavigationAtt);alert('.name = \'valore-attributo2\' \n' + linkNavigationAtt2);

jQuery come alternativa ai metodi nativi propone il metodo .attr(elemento, attributo) sia per crearlo, leggerlo e modficarlo. Per eliminare invece viene usato .removeAttr().

alternativa jQuery

$('#main').attr('style','color:blue;'); //modifica o crea$('#main').attr('style'); //legge$('#main').removeAttr('style'); //elimina

Prototype writeAttribute(element, attributes) readAttribute(attributes) //legge .remove()

alternativa Prototype

$('main').writeAttribute('style','color:blue;'); //modifica o crea$('main').readAttribute('style');

Gestire gli stili

Ogni elemento ha una proprietà chiamata .style che permette di aggiungere un qualsiasi stile inline, basta inserire in più lo stile che si vuole modificare.

Aggiungere un stile:

var element = document.getElementById('id-element')[0];element.style.color = '#000000';



Per accedere a una determinata regola css, non basta trascrivere la regola css così come sono utilizzate nei fogli di stile, bisogna fare alcune modifiche per esempio alle regole come text-indent che hanno il trattino, esso infatti va eliminato usando quindi textIndent, comunque è abbastanza facile trovare la versione corretta online. Ora vediamo cosa ci offrono le librerie per aggiungere/modificare gli stili inline, jQuery ci propone il metodo .css()

alternativa jQuery

//inserire uno stile$('#main').css('background-color","yellow');

//inserirne più di uno richiede una sintassi diversa$('#main').css({ 'background-color':'yellow', 'font-weight':'bolder'});

Prototpe dal canto suo offre una versione ancora più fedele alla sintassi dei Css con il suo metodo

.setStyle().


$('main').setStyle({ backgroundColor: '#900', fontSize: '12px'});

Il metodo più corretto per aggiungere un gruppo stili rimane comunque quello di aggiungere una class, questo permette di gestire la manutenzione del codice distinta, così gli stili li andremo semprea modificare nei fogli di stile, mentre javascript si occuperà solo del comportamento (aggiungere una class). Purtroppo in javascript non esistono funzione native che si occupa delle class così possiamo scegliere se crearcela da noi, oppure utilizzare le librerie come jQuery.

Lavorare sulle class con le librerie

Le funzioni che andremo a creare risolveranno dei problemi abbastanza comuni come selezionare degli elementi attraverso una class, controllare l'esistenza di una class, aggiunta di una classe, eliminazione di una class. Queste funzioni siccome dovrebbero essere riutilizzate abbastanza spesso è meglio integrarle in un oggetto, creando così una libreria. Quindi come potrete vedere nel codice di questa pagina abbiamo creato il file library.js che è la nostra libreria.

Selezionare

Aggiungiamo il metodo alla libreria per selezionare un gruppo di elementi tramite una class

clicca Qui per eseguire il codice.

//codice nella libreriaLibrary.getElementsByClass = function(theClass){ var elementArray = []; if (typeof document.all != "undefined") { elementArray = document.all; } else { elementArray = document.getElementsByTagName('*'); }

var matchedArray = []; var pattern = new RegExp("(^| )" + theClass + "( |$)");


for (var i=0; i < elementArray.length; i++) { if (pattern.test(elementArray[i].className)) { matchedArray[matchedArray.length] = elementArray[i]; } } return matchedArray;};

//codice per attivare la funzione della libreriavar numeroClass = Library.getElementsByClass('test');

Se vogliamo affidarci alle librerie già consolidate come jQuery (scelta migliore) possiamo disporre delle stesse funzioni, anzi abbiamo degli strumenti molto più potenti. jQuery come spiegato prima utilizza il suo metodo $('.class') che può usare per selezionare qualsiasi metodo usando la sintassi dei css; con Prototype abbiamo a disposizione il metodo .getElementsByClassName(class) che permette anche un secondo argomento opzionale che restringe la ricerca, perchè usa il secondo come elemento genitore.

Alternativa Prototype

var test = document.getElementsByClass('test');var test2 = document.getElementsByClass('test', $('main'));

Controllare

Questo metodo che aggiungeremo alla libreria permette di verificare se un elemento possiede una class che inseriamo nell'argomento, restituisce true o false.


//codice nella libreriaLibrary.controlClass = function(target,theClass){ var pattern = new RegExp('(^| )'+theClass+'( |$)'); if (pattern.test(target.className)) { return true; } else { return false; }};

//codice per attivare la funzione della libreriavar testElements = Library.getElementsByClass('test')[0];alert(Library.controlClass(testElements,'test'));

Per controllare l'esistenza di una class, jQuery propone il metodo .hasClass(class)

alternativa jQuery

$('#main').hasClass('test')

Per controllare l'esistenza di una class, Prototype propone il metodo .hasClassName(class)


$('main').hasClassName('test');

Aggiungere

Questo metodo si occupa di aggiungere una class.



//codice nella libreriaLibrary.addClass = function(target,theClass){ if (!Core.hasClass(target,theClass)) { if (target.className == "") { target.className = theClass; } else { target.className += '' + theClass; } }};

//codice per attivare la funzione della libreriavar testElements = Library.getElementsByClass('test')[0];Library.addClass(testElements,'primo');alert('class="'+testElements.className+'"');

Per aggiungere una class, jQuery propone il metodo .addClass(class)

alternativa jQuery

$('#main').addClass('test')

Per aggiungere una class, Prototype propone il metodo .addClassName(class)


$('main').addClassName('test');

Eliminare

Il metodo che creeremo servirà per cancellare una class, per vedere la sua efficacia prima aggiungeremo un class con il metodo .addClass e poi la elimeneremo.


//codice nella libreriaLibrary.removeClass = function(target,theClass){ var pattern = new RegExp('(^| )' + theClass + '( |$)'); target.className = target.className.replace(pattern,'$1'); target.className = target.className.replace(/ $/,'');};

//codice per attivare la funzione della libreriavar testElements = Library.getElementsByClass('test')[0];Library.addClass(testElements,'primo');alert('class="'+testElements.className+'"');Library.removeClass(testElements,'primo');alert('class="'+testElements.className+'"');

Per rimuovere una class, jQuery propone il metodo .removeClass(class)

alternativa jQuery

$('#main').removeClass('test')

Per rimuovere una class, Prototype propone il metodo .removeClassName(class)


$('main').removeClassName('test');



Conclusione (ma non del tutto...)Questa è la fine della prima parte della mia guida su javaScript. Ho iniziato a creare questa guida per la necessità di avere un documento aggiornato e personalizzato da poter consultare. Visto che attualmente dovevo passare da un sito (o da un libro) all'altro per avere tutte le informazioni che mi servivano, ho iniziato questo esperimento. Essendo una prima versione, questa guida non sarà perfetta così se trovate degli errori oppure se volete dirmi la vostra potete scrivere a questa email ascolterò le vostre opinioni e se avrete delle richieste sullo sviluppo di questa guida, questo sarà il momento giusto per farlo, perchè ho intenzione di rifare tutto il mio sito e quindi dovrò valutare come inserire/impostare la mia guida nel cms. Per la continuazione di questa guida ho intenzione di affrontare questi argomenti:

1. Costruzione del Dom 2. Eventi 3. Animazioni 4. Ajax

Sto valutando inoltre di fare altre due guide per Html5 e Css3.Grazie di aver letto queste pagine alla prossima :).

-gerarchia dal nome DOM (Document Object Model). Nel document è possibile la manipolazione dei cookie e delle applet. Come potrete vedere nell'immagine seguente anche gli attributi e gli elementi di testo sono considerati come dei nodi rispettivamente vegono chiamati nodi attributi e nodi di testo.

mailto:[email protected]

Ora che si è vista la struttura, vediamo come poter selezionare un elemento nel dom. Si può ottenereun riferimento ad un nodo tramite l'id getElementById(id) e attravarso il tag name getElementsByTagName(tag). Mentre con getElementById seleziona solo un elemento, con getElementsByTagName selezioniamo un elenco di nodi, come se fosse un array è possibile scegliere tra gli elementi selezionati. La proprietà nodeName permette di conoscere il nome di tag selezionato.


var targetId = document.getElementById("main");var nameNode = targetId.nodeName; //nome del tag

var targetTags = document.getElementsByTagName("div");var numberTags = targetTags.length; //numero elementi selezionati

var targetTag = targetTags[0]; //seleziona il primo elemento della lista targetTags

alert(nameNode + "\n" + numberTags + "\n" + targetTags);

Ritorniamo sul metodo getElementsByTagName() è possibile restringere il campo degli elementi, utilizzando più volte questo metodo in questo modo:


Ridurre gli elementi selezionati:

var unorderLists = document.getElementsByTagName('ul');var unorderList = unorderLists[0];var listItems = unorderList.getElementsByTagName('li');var listItem = listItems[0];var anchors = listItem.getElementsByTagName('a')[0];

Anche le librerie mettono a disposizione dei metodi di selezione degli elementi, che sono molto più potenti dei metodi nativi di javaScript. Prototype è il primo a sintetizzare la forma document.getElementById(id) con la forma più compatta $(id) e inoltre permette di aggiungere più id contemporaneamente in questo modo: $(id1,id2,id3), un metodo che prototype ha copiato da jQuery è quello della selezione tramite la sintassi dei css $$(cssRule) permette dappunto di semplificare enormemente la parte di selezione degli elementi.

Alternative con Prototype

$('header'); //selziona gli id$('header','main','footer');$$('body .container p');

jQuery come si accenava prima, ha creato un metodo che sfrutta la sintassi di css1,2,3 per selezionare gli elementi, il metodo utilizza il dollaro $(cssRule).

Alternative con jQuery

$('#main'); //seleziona id$('#main div.test'); //seleziona i div con class test$('#header div.test:nth-child(2)'); //css3

Muoversi nel DOM

Se vogliamo navigare nell'albero del DOM possiamo utilizzare anche delle proprietà create apposta per questo. Elenchiamole, parentNode seleziona il genitore, previousSibling seleziona il fratello che lo precede, nextSibling seleziona il fratello che lo segue, firstChild seleziona il primo figlio, childNodes seleziona i figli, utilizzando le quadre è possibile specificare quale nodo figlio childNodes[2], inserendo 2 nelle quadre selezioneremo il terzo nodo figlio (si conta anche lo zero), lastChild seleziona l'ultimo figlio.

vedremo nel prossimo esempio come poter navigare nel dom, abbiamo utilizzato la proprietà nodeValue per permette di ottenere il valore del nodo, normalmente gli elementi danno come risultato null, apparte i nodi di testo, i commenti ed i nodi CDATA.


var anchor = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];var valueTextAnchor = anchor.firstChild.nodeValue;alert(valueTextAnchor);

Come al solito le librerie ci vengono in aiuto mettendoci a disposizione delle funzioni sulla navigazione del dom. jQuery mette a disposizioni i seguenti metodi: .parent(), oppure :parent (quest'ultimo va usato come selettore) permette di selezionare l'elemento genitore, poi troviamo parents() che permette di memorizzare tutti i genitori fino ad arrivare alla radice. Il metodo next() si occupa di selezionare l'elemento fratello successivo, nextAll() seleziona tutti i fratelli successivi. Il metodo .prev() e prevAll() fa esattamente l'opposto di next() e nextAll() prende il fratello che lo precede. Per muoversi tra gli elementi figlio si utilizza il metodo children(), a supporto ci sono anche i selettori :first-child, :last-child che dal nome è facile capire cosa si occupano, mentre un'altro selettore utile è :nth-child() che permette inserendo un numero di selezionare gli elementi figlio saltando alcuni.

Alternativa jQuery

var genitore = $('#main').parent();var genitore = $('#main:parent');var genitori = $('#main').parents();var genitori = $('.test').next();var genitori = $('.test').nextAll();var genitori = $('.test').prev();var genitori = $('.test').prevAll();var genitori = $('.test:nth-child(2)'); //prende i figli a secondo del numero


Ottenere un riferimento agli attributi

Per ottenere un riferimento ad un attributo possiamo usare o il metodo getAttribute("attributo") oppure ottenerla considerandola come una proprietà dell'elemento, tipo se vogliamo ottenere l'attributo href bisogna fare così .href il primo caso dovrebbe essere il metodo da usare per essere conformi allo standard del W3c purtroppo è un metodo afflitto da vari problemi sui vari browser quindi è meglio utilizzare il secondo metodo:


var linkNavigation = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];var linkNavigationAtt = linkNavigation.getAttribute('href'), linkNavigationAtt2 = linkNavigation.href;alert('getAttribute(\'herf\') \n' + linkNavigationAtt);alert('.href \n' + linkNavigationAtt2);

Per cambiare o aggiungere un attributo si può utilizzare il metodo .setAttribute(attributo,valore) sempre considerando l'attributo come una proprietà dell'elemento, si può per esempio assegnare allaproprietà .name un valore e questa oltre ad prendere quel valore, se l'elemento non ha quell'attributolo aggiungerà.


var linkNavigation = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];//creare un attributolinkNavigation.setAttribute('title', 'valore-attributo');linkNavigation.name = 'valore-attributo2';

//controllare se il valore è stato aggiuntovar linkNavigationAtt = linkNavigation.getAttribute('title');var linkNavigationAtt2 = linkNavigation.name;alert('.setAttribute(\'title\', \'valore-attributo\'); \n' + linkNavigationAtt);alert('.name = \'valore-attributo2\' \n' + linkNavigationAtt2);

jQuery come alternativa ai metodi nativi propone il metodo .attr(elemento, attributo) sia per crearlo, leggerlo e modficarlo. Per eliminare invece viene usato .removeAttr().

alternativa jQuery

$('#main').attr('style','color:blue;'); //modifica o crea$('#main').attr('style'); //legge$('#main').removeAttr('style'); //elimina

Prototype writeAttribute(element, attributes) readAttribute(attributes) //legge .remove()


$('main').writeAttribute('style','color:blue;'); //modifica o crea$('main').readAttribute('style');

Gestire gli stili

Ogni elemento ha una proprietà chiamata .style che permette di aggiungere un qualsiasi stile inline, basta inserire in più lo stile che si vuole modificare.

Aggiungere un stile:

var element = document.getElementById('id-element')[0];element.style.color = '#000000';



Per accedere a una determinata regola css, non basta trascrivere la regola css così come sono utilizzate nei fogli di stile, bisogna fare alcune modifiche per esempio alle regole come text-indent che hanno il trattino, esso infatti va eliminato usando quindi textIndent, comunque è abbastanza facile trovare la versione corretta online. Ora vediamo cosa ci offrono le librerie per aggiungere/modificare gli stili inline, jQuery ci propone il metodo .css()

alternativa jQuery

//inserire uno stile$('#main').css('background-color","yellow');

//inserirne più di uno richiede una sintassi diversa$('#main').css({ 'background-color':'yellow', 'font-weight':'bolder'});

Prototpe dal canto suo offre una versione ancora più fedele alla sintassi dei Css con il suo metodo .setStyle().


$('main').setStyle({ backgroundColor: '#900', fontSize: '12px'});

Il metodo più corretto per aggiungere un gruppo stili rimane comunque quello di aggiungere una class, questo permette di gestire la manutenzione del codice distinta, così gli stili li andremo semprea modificare nei fogli di stile, mentre javascript si occuperà solo del comportamento (aggiungere una class). Purtroppo in javascript non esistono funzione native che si occupa delle class così possiamo scegliere se crearcela da noi, oppure utilizzare le librerie come jQuery.

Lavorare sulle class con le librerie

Le funzioni che andremo a creare risolveranno dei problemi abbastanza comuni come selezionare degli elementi attraverso una class, controllare l'esistenza di una class, aggiunta di una classe, eliminazione di una class. Queste funzioni siccome dovrebbero essere riutilizzate abbastanza spesso è meglio integrarle in un oggetto, creando così una libreria. Quindi come potrete vedere nel codice di questa pagina abbiamo creato il file library.js che è la nostra libreria.

Selezionare

Aggiungiamo il metodo alla libreria per selezionare un gruppo di elementi tramite una class


//codice nella libreriaLibrary.getElementsByClass = function(theClass){ var elementArray = []; if (typeof document.all != "undefined") { elementArray = document.all; } else { elementArray = document.getElementsByTagName('*'); }

var matchedArray = []; var pattern = new RegExp("(^| )" + theClass + "( |$)"); for (var i=0; i < elementArray.length; i++) {


if (pattern.test(elementArray[i].className)) { matchedArray[matchedArray.length] = elementArray[i]; } } return matchedArray;};

//codice per attivare la funzione della libreriavar numeroClass = Library.getElementsByClass('test');

Se vogliamo affidarci alle librerie già consolidate come jQuery (scelta migliore) possiamo disporre delle stesse funzioni, anzi abbiamo degli strumenti molto più potenti. jQuery come spiegato prima utilizza il suo metodo $('.class') che può usare per selezionare qualsiasi metodo usando la sintassi dei css; con Prototype abbiamo a disposizione il metodo .getElementsByClassName(class) che permette anche un secondo argomento opzionale che restringe la ricerca, perchè usa il secondo come elemento genitore.

Alternativa Prototype

var test = document.getElementsByClass('test');var test2 = document.getElementsByClass('test', $('main'));

Controllare

Questo metodo che aggiungeremo alla libreria permette di verificare se un elemento possiede una class che inseriamo nell'argomento, restituisce true o false.


//codice nella libreriaLibrary.controlClass = function(target,theClass){ var pattern = new RegExp('(^| )'+theClass+'( |$)'); if (pattern.test(target.className)) { return true; } else { return false; }};

//codice per attivare la funzione della libreriavar testElements = Library.getElementsByClass('test')[0];alert(Library.controlClass(testElements,'test'));

Per controllare l'esistenza di una class, jQuery propone il metodo .hasClass(class)

alternativa jQuery

$('#main').hasClass('test')

Per controllare l'esistenza di una class, Prototype propone il metodo .hasClassName(class)


$('main').hasClassName('test');

Aggiungere

Questo metodo si occupa di aggiungere una class.




//codice nella libreriaLibrary.addClass = function(target,theClass){ if (!Core.hasClass(target,theClass)) { if (target.className == "") { target.className = theClass; } else { target.className += '' + theClass; } }};

//codice per attivare la funzione della libreriavar testElements = Library.getElementsByClass('test')[0];Library.addClass(testElements,'primo');alert('class="'+testElements.className+'"');

Per aggiungere una class, jQuery propone il metodo .addClass(class)

alternativa jQuery

$('#main').addClass('test')

Per aggiungere una class, Prototype propone il metodo .addClassName(class)


$('main').addClassName('test');

Eliminare

Il metodo che creeremo servirà per cancellare una class, per vedere la sua efficacia prima aggiungeremo un class con il metodo .addClass e poi la elimeneremo.


//codice nella libreriaLibrary.removeClass = function(target,theClass){ var pattern = new RegExp('(^| )' + theClass + '( |$)'); target.className = target.className.replace(pattern,'$1'); target.className = target.className.replace(/ $/,'');};

//codice per attivare la funzione della libreriavar testElements = Library.getElementsByClass('test')[0];Library.addClass(testElements,'primo');alert('class="'+testElements.className+'"');Library.removeClass(testElements,'primo');alert('class="'+testElements.className+'"');

Per rimuovere una class, jQuery propone il metodo .removeClass(class)

alternativa jQuery

$('#main').removeClass('test')

Per rimuovere una class, Prototype propone il metodo .removeClassName(class)


$('main').removeClassName('test');Conclusione (ma non del tutto...)

Questa è la fine della prima parte della mia guida su javaScript.

Documents

Programmare in javaScript - natalo.eu · verifica il programma si limita a saltare quest'ultima, con l'istruzione else viene riepito questo buco proponendo un codice condizionale