JavaScript: Array JavaScript: Array

Sommario Introduzione Array Dichiarazione e Allocazione di Arrays Generazione Random di Immagini con Array Riferimenti e Parametri di riferimenti Passaggio di Array a Funzioni Ordinamento Ricerca lineare e binaria Array Multidimensionali JavaScript: Array

Obiettivi Introdurre la struttura dati array Capire l’uso degli array per memorizzare, odinare e cercare elenchi e tabelle di valori Capire come dichiarare e inizializzare un array e come riferire un elemento negli array Capire come passare array a funzioni Gestire array multidimensionali JavaScript: Array

Introduzione Array È una struttura dati per la gestione di elementi omogenei La struttura for è particolarmente utile per la loro scansione JavaScript: Array

Array (1) Array in JavaScript Ogni elemento è indicizzato da un numero L’elemento iniziale è lo “zeresimo” Per accedere a uno specifico elemento nome dell’array numero dell’elemento racchiuso tra parentesi quadre Gli array conoscono la propria lunghezza Proprietà length JavaScript: Array

Array (2) Name of array Position number (index or subscript) of the -45 Name of array c[ 1 ] 6 c[ 2 ] c[ 3 ] 72 c[ 4 ] 1543 c[ 5 ] -89 c[ 6 ] c[ 7 ] 62 c[ 8 ] -3 c[ 9 ] 1 Position number (index or subscript) of the c[ 10 ] 6453 element within array c c[ 11 ] 78 JavaScript: Array

Array (3) JavaScript: Array

Dichiarazione e Allocazione di Array Array in memoria Objects Operatore new Alloca memoria per gli oggetti È un operatore di allocazione dinamica della memoria var c; c = new Array( 12 ); JavaScript: Array

Esempio Gli array crescono dinamicamente Viene allocata maggiore memoria quando sono aggiunti nuovi elementi È necessario inizializzare gli elementi Il valore di default è undefined Riferirsi a elementi non inizializzati oppure a elementi esterni ai limiti dell’array produce un errore JavaScript: Array

InitArray.html (1 of 3) Array n1 ha 5 elementi. Array n2 è vuoto. Il for inizializza gli elementi di n1 con un valore uguale al rispettivo indice (da 0 a 4). JavaScript: Array

Il for aggiunge 5 elementi a Array n2 e inizializza ogni elemento al valore del rispettivo indice (da 0 a 4). Ogni function mostra il contenuto dell’array passato come argomento in una tabella XHTML. InitArray.html (1 of 3) JavaScript: Array

JavaScript: Array

Esecuzione JavaScript: Array

Dichiarazione e Inizializzazione È possibile dichiarare e inizializzare in un solo step Si specifica l’elenco di valori var n = [ 10, 20, 30, 40, 50 ]; var n = new Array( 10, 20, 30, 40, 50 ); È anche possibile inizializzare solo alcuni valori Si lasciano vuoti gli elementi non inizializzati var n = [ 10, 20, , 40, 50 ]; JavaScript: Array

InitArray2.html (1 of 2) JavaScript: Array

InitArray2.html (2 of 2) JavaScript: Array

Esecuzione JavaScript: Array

Operatore for … in Svolge una azione per ogni elemento elemento dell’array Svolge una iterazione su tutti gli eIementi Assegna ogni elemento a una variabile per volta Ignora elementi che non esistono JavaScript: Array

SumArray.html (1 of 2) JavaScript: Array

JavaScript: Array

Esecuzione JavaScript: Array

Array come Sostituti dello switch Ogni elemento rappresenta un caso dello switch JavaScript: Array

RollDie.html (1 of 2) JavaScript: Array

RollDie.html (2 of 2) JavaScript: Array

Esecuzione JavaScript: Array

Generazione casuale di immagini usando array Approccio diverso (più chiaro) rispetto a quanto visto precedentemente Specifica il nome dei file anziché interi Il risultato della chiamata a Math.random è l’indice nell’array JavaScript: Array

JavaScript: Array

JavaScript: Array

Esecuzione JavaScript: Array

Riferimenti e Parametri per Riferimento Due modalità per il passaggio di parametri Per valore (by-value) Si passa una copia del valore originale È la modalità di default per i valori numerici e booleani Il valore originale della variabile non cambia Per riferimento (by-reference) Si passa l’indirizzo di memoria del valore Permette l’accesso diretto al valore originale Migliora le prestazioni JavaScript: Array

Passaggio di Array a Function Il nome dell’array è l’argomento Non è necessario passare la dimensione dell’array Gli array conoscono la prorpia dimensione È passato by reference Elementi singoli sono passati by value se sono valori numerici o booleani Array.join Crea una stringa con tutti gli elementi dell’array JavaScript: Array

PassArray.html (1 of 3) La prima chiamata a outputArray mostra il contenuto dell’array a prima della modifica. La function modifyArray raddoppia ogni elemento. JavaScript: Array

PassArray.html (2 of 3) JavaScript: Array

PassArray.html (3 of 3) JavaScript: Array

Esecuzione JavaScript: Array

Ordinamento di Array Array.sort Strumento per il confronto tra stringhe Funzione che restituisce un valore Negativo se il primo argomento è minore del secondo Zero se gli argomenti sono uguali Positivo se il primo argomento è maggiore del secondo JavaScript: Array

Sort.html (1 of 2) Method sort takes as its optional argument the name of a function that compares two arguments and returns a value of –1, 0 or 1. JavaScript: Array

Sort.html (2 of 2) Function compareIntegers calculates the difference between the integer values of its arguments. JavaScript: Array

Esecuzione JavaScript: Array

Ricerca Elementi in un Array Ricerca Lineare Si confrontano tutti gli elementi con quello da cercare, fino a quando non si trova corrispondenza Nel caso peggiore si deve scandire l’intero array Ricerca Binaria Gli elementi devono essere ordinati Ad ogni iterazione l’intervallo di ricerca è dimezzato JavaScript: Array

LinearSearch.html (1 of 3) JavaScript: Array

LinearSearch.html (2 of 3) JavaScript: Array

LinearSearch.html (3 of 3) JavaScript: Array

Esecuzione JavaScript: Array

BinarySearch.html (1 of 5) JavaScript: Array

BinarySearch.html (2 of 5) JavaScript: Array

BinarySearch.html (3 of 5) JavaScript: Array

BinarySearch.html (4 of 5) JavaScript: Array

JavaScript: Array

Esecuzione JavaScript: Array

Array Multidimensionali (1) Array bidimensionali sono analoghi alle matrici Righe e colonne Si specifica prima la riga e poi la colonna Due indici JavaScript: Array

Array Multidimensionali (2) Column 0 Column 1 Column 2 Column 3 Row 0 a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ] Row 1 a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ] Row 2 a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ] Column subscript (or index) Row subscript (or index) Array name JavaScript: Array

Array Multidimensionali (3) Dichiarazione e inizializzazione di array multidimensionali Elementi raggruppati per righe in parentesi quadre Devono essere gestiti come array di array Per creare l’array b con una riga di due elementi e una seconda riga di tre elementi: var b = [ [ 1, 2 ], [ 3, 4, 5 ] ]; JavaScript: Array

Array Multidimensionali (4) È anche possibile usare l’operatore new Crea l’array b con due righe, la prima con 5 colonne e la seconda con tre: var b; b = new Array( 2 ); b[ 0 ] = new Array( 5 ); b[ 1 ] = new Array( 3 ); JavaScript: Array

InitArray3.html (1 of 2) JavaScript: Array

InitArray3.html (2 of 2) JavaScript: Array

Esecuzione JavaScript: Array

Esempio: Quiz Online Radio button Il form XHTML Rappresentati da un array Il nome dei radio button è il nome dell’array Un elemento per ogni button La proprietà checked è true quando quel button è selezionato Il form XHTML Contiene controllo, tra cui i radio button La proprietà action specifica cosa succede quando il form viene inviato Può chiamare codice in JavaScript JavaScript: Array

Quiz.html (1 of 2) JavaScript: Array

Quiz.html (2 of 2) JavaScript: Array

Esecuzione JavaScript: Array