JavaScript: Array Sommario Obiettivi Introduzione

Transcript

So
Sommario
a o
•
•
•
•
•
•
•
•
•
JavaScript: Array
JavaScript: Array
1
Introduzione
Array
Dichiarazione e Allocazione di Arrays
G
Generazione
i
R
Random
d
di IImmagini
i i con A
Array
Riferimenti e Parametri di riferimenti
Passaggio di Array a Funzioni
Ordinamento
Ricerca lineare e binaria
A
Array
M
Multidimensionali
ltidi
i
li
JavaScript: Array
Obiettivi
Introduzione
• Introdurre la struttura dati array
• Capire l’uso degli array per memorizzare,
odinare
di
e cercare elenchi
l
hi e ttabelle
b ll di
valori
• Capire come dichiarare e inizializzare un
array e come riferire un elemento negli
array
• Capire
C i come passare array a ffunzioni
i i
• Gestire array multidimensionali
JavaScript: Array
2
• Array
– È una struttura dati p
per la g
gestione di elementi
omogenei
– La struttura for è particolarmente utile per la
loro scansione
3
JavaScript: Array
4
Array (1)
Array (2)
• Array in JavaScript
Name of array
– Ogni
g elemento è indicizzato da un numero
• L’elemento iniziale è lo “zeresimo”
– Per accedere a uno specifico elemento
• nome dell’array
• numero dell’elemento
dell elemento racchiuso tra parentesi
quadre
– Gli array conoscono la propria lunghezza
P iti number
Position
b (i
(index
d
or subscript) of the
c
element within
y
array
• Proprietà length
JavaScript: Array
5
c[ 0 ]
-45
c[ 1 ]
6
c[ 2 ]
0
c[ 3 ]
72
c[ 4 ]
1543
c[ 5 ]
-89
c[ 6 ]
0
c[ 7 ]
62
c[ 8 ]
-3
c[ 9 ]
1
c[ 10 ]
6453
c[ 11 ]
78
JavaScript: Array
6
Dichiarazione e Allocazione di
Array
Array (3)
Operators
Associativity
Type
() [] .
left to right
highest
++ -- !
right to left
unary
* / %
left to right
multiplicative
+ left to right
additive
< <= > >=
left to right
relational
== !=
left to right
equality
&&
left to right
logical AND
||
left to right
logical OR
?:
right to left
conditional
= += -= *= /= %=
right to left
assignment
Fig. 11.2 Precedence and associativity of the operators discussed so far.
• Array in memoria
– Objects
j
– Operatore new
• Alloca memoria per gli oggetti
• È un operatore di allocazione dinamica della
memoria
var c;;
c = new Array( 12 );
JavaScript: Array
7
JavaScript: Array
8
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
Esempio
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5

6

7
8
• Gli array crescono dinamicamente
9
10
– Viene allocata maggiore
gg
memoria q
quando
sono aggiunti nuovi elementi
12

>
52
</script>
53
54
InitArray.html
InitArray
html
((1 of 3))
34
document.writeln( "<tr><td>" + i + "</td><td>" +
48
30
32
for ( var i = 0; i < theArray.length; i++ )
47
29
39
l
i
InitArray.html
InitArray
htmlhah 5 elementi.
((1 of 3))
<script type = "text/javascript">
20
24
33
<title>Initializing an Array</title>
13
– Il valore di default è undefined
– Riferirsi a elementi non inizializzati oppure a
elementi esterni ai limiti dell’array produce un
errore
31
<head>
11
• È necessario inizializzare gli elementi
JavaScript: Array
<html xmlns = "http://www.w3.org/1999/xhtml">
</head><body onload = "initializeArrays()"></body>
55 </html>
/h l
"\"100%\">" );
40
41
document.writeln( "<thead><th width = \"100\"" +
42
"align = \"left\">Subscript</th>" +
43
"<th align = \"left\">Value</th></thead><tbody>" );
JavaScript: Array
11
JavaScript: Array
12
Esecuzione
Dichiarazione e Inizializzazione
• È possibile dichiarare e inizializzare in un
p
solo step
– Si specifica l’elenco di valori
var n = [ 10
10, 20
20, 30
30, 40
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
13
JavaScript: Array
1
27
2
28
3
4
14
// output "header" followed by a two-column table
29
// containing subscripts and elements of "theArray"
30
function outputArray(
p
y( header,
, theArray
y )
{
5

31
6

32
document.writeln( "<h2>" + header + "</h2>" );
33
document.writeln( "<table border = \"1\"" +
7
8
9
10
h l xmlns
l
= "http://www.w3.org/1999/xhtml">
"h
//
3
/1999/ h l"
<html
<head>
document.writeln( "<thead><th width = \"100\" " +
35
<title>Initializing an Array with a Declaration</title>
11
12
" id h = \"100%\">"
"width
\"100%\" " );
)
34
InitArray2.html
InitArray2
html
((1 of 2))
13

20
var integers1 = [ 2, 4, 6, 8 ];
46
</script>
21
var integers2 = [ 2, , , 8 ];
47
22
48
23
outputArray( "Array colors contains", colors );
24
outputArray( "Array integers1 contains", integers1 );
outputArray( "Array integers2 contains", integers2 );
25
26
</head><body onload = "start()"></body>
start() ></body>
49 </html>
}
JavaScript: Array
15
JavaScript: Array
16
Esecuzione
Operatore for … in
• Svolge una azione per ogni elemento
y
elemento dell’array
– Svolge una iterazione su tutti gli eIementi
– Assegna ogni elemento a una variabile per
volta
– Ignora
I
elementi
l
ti che
h non esistono
i t
JavaScript: Array
17
JavaScript: Array
1
24
2
25
3

28
6

29
7
10
document.writeln(
( "<br /
/>Total using
g for...in: " +
total2 );
}
30
// -->
31
</script>
/
i
32
<head>
33
<title>Sum the Elements of an Array</title>
11
12
total2 += theArray[ element ];
27
5
9
for ( var element in theArray )
26
4
8
18
SumArray.html
SumArray
html
((1 of 2))
34 </html>
13

26
6

27
9
10
for ( face = 1; face < frequency.length; ++face )
28
d
document.writeln(
i l ( "<tr><td>"
"
d " + face
f
+ "</td><td>"
" / d
d " +
29
frequency[ face ] + "</td></tr>" );
30
<head>
31
<title>Roll a Six-Sided Die 6000 Times</title>
11
12
document.writeln( "<thead><th width = \"100\"" +
g = \
\"left\">Face<th
\
align
g = \
\"left\">"
\
+
" align

34
</script>
35
36
</head>
// summarize results
37
<body>
17
for ( var roll = 1; roll <= 6000; ++roll ) {
38
18
19
20
RollDie.html
RollDie
html
((2 of 2))
32
16
15
+
"width = \"100%\">" );
25
5
8
document.writeln( "<table border = \"1\""
24
4
22
<p>Click Refresh (or Reload) to run the script again</p>
</body>
face = Math.floor( 1 + Math.random() * 6 );
39
++frequency[ face ];
40 </html>
}
21
JavaScript: Array
23
JavaScript: Array
24
Generazione casuale di
immagini usando array
Esecuzione
• Approccio diverso (più chiaro) rispetto a
quanto visto p
q
precedentemente
– Specifica il nome dei file anziché interi
– Il risultato della chiamata a Math
Math.random
random è
l’indice nell’array
JavaScript: Array
25
JavaScript: Array
1
16
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
17
3
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
document.write ( "<img src = \"" +
18
pictures[ Math.floor( Math.random() * 7 ) ] +
19
".gif\"
g \ width = \
\"105\"
\ height
g
= \
\"100\"
\ /
/>" );
5

20
// -->
6

21
</script>
22
7
8
9
10
23
h l xmlns
l
"h
//
/
/ h l"
<html
25
<title>Random Image Generator</title>
26
27
13

6

7
8
9
– Non è necessario passare la dimensione
dell array
dell’array
<head>
10
<title>Passing Arrays and Individual Array
11
Elements to Functions</title>
12
• Gli array conoscono la prorpia dimensione
13
– È passato
t by
b reference
f
• Elementi singoli sono passati by value se sono
valori
alori numerici
n merici o booleani
PassArray.html
PassArray
html
La p
prima
chiamata
((1
ofa 3)
) mostra il
contenuto dell’a
prima della modifica.
14

60
</script>
61
62
63 </html>
header + theArray.join( " " ) + "<br />" );
43
53
58
document.writeln(
42
44
theArray[ j ] *= 2;
}
52
32
37
for ( var j in theArray )
49
document.writeln(
( "<h2>Effects of p
passing
g array
y " +
29
// function that modifies the elements of an array
46
"The values of the modified array are: ", a );
27
}
45
JavaScript: Array
33
JavaScript: Array
Esecuzione
34
Ordinamento di Array
• Array.sort
– Strumento p
per il confronto tra stringhe
g
– 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
35
JavaScript: Array
36
1
23
2
24
// outputs "header" followed by the contents of "theArray"
25
26
{
3
4
5

27
6

9
10
<head>
<title>Sorting an Array with Array Method sort</title>
Sort.html
Sort
html
Method
takes as its optional argument the
name of a function that compares two arguments
returns2)
a)
value of –1,, 0 or 1.
((1andof
13

37
</script>
39
17
Sort.html
Sort
html
Function
calculates the
g values of its
between
the integer
((2difference
of
2)
)
arguments.
return parseInt( value1 ) - parseInt( value2 );
34
38
var a = [ 10, 1, 9, 2, 8, 3, 7, 4, 6, 5 ];
16
22
theArray.join( " " ) + "</p>" );
}
29
7
8
document.writeln( "<p>" + header +
compareIntegers
40 </html>
// sort the array
}
JavaScript: Array
37
JavaScript: Array
38
Ricerca
ce ca Elementi
e e in u
un Array
ay
Esecuzione
• Ricerca Lineare
– Si confrontano
f
tuttii glili elementi
l
i con quello
ll d
da
cercare, fino a quando non si trova
corrispondenza
i
d
– Nel caso peggiore si deve scandire l’intero
array
• Ricerca Binaria
– Gli elementi devono essere ordinati
– Ad ognii it
iterazione
i
l’i
l’intervallo
t
ll di ricerca
i
è
dimezzato
JavaScript: Array
39
JavaScript: Array
40
1
20
// function called when "Search" button is pressed
2
21
function buttonPressed()
22
{
3
5

24
6

7
8
9
10
<html
h l xmlns
l
"h
//
3
/1999/ h l"
<head>
<title>Linear Search of an Array</title>

47
</script>
LinearSearch.html
LinearSearch
html
((3 of 3))
48
49
</head>
50
51
52
<body>
<form name = "searchForm" action
= "">
<p>Enter integer search key<br />
53
54
<input name = "inputVal" type = "text" />
55
<input name = "search" type = "button" value = "Search"
56
onclick = "buttonPressed()" /><br /></p>
57
58
<p>Result<br />
59
<input name = "result" type = "text" size = "30" /></p>
60
61
</form>
</body>
62 </html>
JavaScript: Array
43
JavaScript: Array
44
1
19
// function called when "Search" button is pressed
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
20
function buttonPressed()
21
{
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5

23
6

7
8
9
10
<html xmlns = "http://www
http://www.w3.org/1999/xhtml
w3 org/1999/xhtml">
>
"Portions of array searched\n";
26
<head>
<title>Binary Search</title>
BinarySearch.html
BinarySearch
html
((1 of 5))
13

87
</script>
88
</head>
89
JavaScript: Array
47
JavaScript: Array
48
90
<body>
91
<form name = "searchForm" action = "">
92
<p>Enter integer search key<br />
93
<input
p
name = "inputVal"
p
type
yp = "text" /
/>
94
<input name = "search" type = "button" value =
96
<p>Result<br />
97
<textarea name = "result"
"
l " rows = "7" cols
l = "60">
"60"
</textarea></p>
98
99
100
Esecuzione
"Search" onclick = "buttonPressed()" /><br /></p>
95
</form>
</body>
101 </html>
JavaScript: Array
49
Array Multidimensionali (1)
JavaScript: Array
50
• Array bidimensionali sono analoghi alle
matrici
Column 0
– Righe e colonne
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 ]
• Si specifica prima la riga e poi la colonna
Column subscript (or index)
– Due indici
Row subscript (or index)
Array name
JavaScript: Array
51
JavaScript: Array
52
• Dichiarazione e inizializzazione di array
multidimensionali
• È anche possibile usare l’operatore new
– Crea l’arrayy b con due righe,
g , la prima
p
con 5
colonne e la seconda con tre:
– Elementi raggruppati per righe in parentesi
quadre
– Devono essere gestiti come array di array
– Per
P creare l’array
l’
b con una riga
i di d
due
elementi e una seconda riga di tre elementi:
var b;
b = new A
Array(( 2 ));
b[ 0 ] = new Array( 5 );
b[ 1 ] = new Array( 3 );
• var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];
JavaScript: Array
53
JavaScript: Array
54
1
25
2
26
27
{
3
5

29
6

30
9
10
for ( var j in theArray[ i ] )
32
document.write( theArray[ i ][ j ] + " " );
33
<head>
34
<title>Initializing Multidimensional Arrays</title>
11
12
for ( var i in theArray ) {
31
7
8
document.writeln( "<h2>" + header + "</h2><tt>" );
28
4
InitArray3.html
InitArray3
html
((1 of 2))
13

41
</script>
42
// first row
20
document.writeln( "</tt>" );
38
// first row
19
}
36
// second row
InitArray3.html
InitArray3
html
((2 of 2))
document.writeln( "<br />" );
35
43
start() ></body>
44 </html>
21
outputArray( "Values
Values in array1 by row
row", array1 );
22
outputArray( "Values in array2 by row", array2 );
23
24
}
JavaScript: Array
55
JavaScript: Array
56
Esecuzione
Esempio: Quiz Online
• Radio button
– Rappresentati da un array
• Il nome dei radio button è il nome dell’array
dell array
• Un elemento per ogni button
– La proprietà checked è true quando quel
button è selezionato
• Il form
f
XHTML
– Contiene controllo,, tra cui i radio button
– La proprietà action specifica cosa succede
quando il form viene inviato
JavaScript: Array
• Può chiamare codice in JavaScript
57
JavaScript: Array
1
<?xml version = "1.0" encoding = "utf-8"?>
26
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
27 <body>
3
28
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
29
4
<form id = "myQuiz" action = "JavaScript:checkAnswers()">
<p>Select
p
the name of the tip
p that goes
g
with the image
g shown:<br /
/>
5

30
<img src="EPT.gif" width="108" height="100" alt="mystery tip"/>
6

32
7
8
33
<input
i
type = "radio"
" di " name = "radiobutton"
" di b
" value
l
= "CPE"
"
" />
/
9
<head>
34
<label>Common Programming Error</label>
10 <title>Online Quiz</title>
11
12 <script type = "text/JavaScript">
13
14
function checkAnswers()
15
{
35
Quiz.html
Quiz
html
((1 of 2))
Quiz.html
Quiz
html
((2 of 2))
36
<input type = "radio" name = "radiobutton" value = "EPT" />
37
<label>Error-Prevention Tip</label>
38
39
<input type = "radio" name = "radiobutton" value = "PERF" />
40
<label>Performance Tip</label>
16
// determine whether the answer is correct
41
17
if ( myQuiz.radiobutton[ 1 ].checked )
42
<input type = "radio" name = "radiobutton" value = "PORT" />
43
<label>Portability Tip</label><br />
document.write( "Congratulations, your answer is correct" );
18
else // if the answer is incorrect
19
44
document.write( "Your answer is incorrect. Please try again" );
20
21
58
<input type = "submit" name = "submit" value = "Submit" />
45
}
<input type = "reset" name = "reset" value = "Reset" />
46
22
47
</p>
23 </script>
48
</form>
24
49 </body>
25 </head>
50 </html>
JavaScript: Array
59
JavaScript: Array
60
Esecuzione
JavaScript: Array
61

JavaScript: Array Sommario Obiettivi Introduzione

Transcript

Documenti analoghi

Commen3

il radiotelescopio di nuova generazione e tecniche di multibeam

Heap

Uso ambiente XAMPP sottocartella root dove inserire pagine attive

Manuale Fortran 90

Easy Language per ProSuite 2000i

Allen Telescope Array, visione d`insieme generale - IARA

Creare e gestire DB con XAMPP All`apertura del file tra i Tools

Dichiarazione di accessibilità Introduzione Validazione