JavaScript: Array JavaScript: Array.

Presentazione sul tema: "JavaScript: Array JavaScript: Array."— Transcript della presentazione:

1 JavaScript: Array JavaScript: Array

2 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

3 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

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

5 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

6 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

7 Array (3) JavaScript: Array

8 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

9 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

10 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

11 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

12 JavaScript: Array

13 Esecuzione JavaScript: Array

14 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

15 InitArray2.html (1 of 2) JavaScript: Array

16 InitArray2.html (2 of 2) JavaScript: Array

17 Esecuzione JavaScript: Array

18 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

19 SumArray.html (1 of 2) JavaScript: Array

20 JavaScript: Array

21 Esecuzione JavaScript: Array

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

23 RollDie.html (1 of 2) JavaScript: Array

24 RollDie.html (2 of 2) JavaScript: Array

25 Esecuzione JavaScript: Array

26 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

27 JavaScript: Array

28 JavaScript: Array

29 Esecuzione JavaScript: Array

30 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

31 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

32 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

33 PassArray.html (2 of 3) JavaScript: Array

34 PassArray.html (3 of 3) JavaScript: Array

35 Esecuzione JavaScript: Array

36 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

37 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

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

39 Esecuzione JavaScript: Array

40 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

41 LinearSearch.html (1 of 3)
JavaScript: Array

42 LinearSearch.html (2 of 3)
JavaScript: Array

43 LinearSearch.html (3 of 3)
JavaScript: Array

44 Esecuzione JavaScript: Array

45 BinarySearch.html (1 of 5)
JavaScript: Array

46 BinarySearch.html (2 of 5)
JavaScript: Array

47 BinarySearch.html (3 of 5)
JavaScript: Array

48 BinarySearch.html (4 of 5)
JavaScript: Array

49 JavaScript: Array

50 Esecuzione JavaScript: Array

51 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

52 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

53 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

54 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

55 InitArray3.html (1 of 2) JavaScript: Array

56 InitArray3.html (2 of 2) JavaScript: Array

57 Esecuzione JavaScript: Array

58 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

59 Quiz.html (1 of 2) JavaScript: Array

60 Quiz.html (2 of 2) JavaScript: Array

61 Esecuzione JavaScript: Array