Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Marco Comini
2021-11-18
HTML5+JavaScript: Audio e Video
Un elemento audio/video può essere controllato tramite i seguenti metodi e
proprietà:
play() per riprodurre
pause() per fermare
volume il volume audio di un audio/video, da 0 (silenzioso) a 1 (più alto).
duration la durata di un audio/video, in secondi.
currentTime la posizione di riproduzione corrente in un audio/video (in
secondi)
Eventi associati con gli elementi audio/video
(on) play L’evento si verifica quando l’audio/video è pronto per iniziare la
riproduzione
(on) playing l’audio/video è in riproduzione dopo essere stato messo in
pausa o interrotto per il buffering
(on) pause l’audio/video è in pausa
(on) ended l’audio/video è finito
(on) TimeUpdate L’evento si verifica quando la posizione di riproduzione
viene cambiata (come quando l’utente avanza rapidamente a un punto diverso
dell’audio/video)
Per esempio, nel caso di due cerchi, determinati con i parametri usati per il
canvas (x,y,radius) osserviamo che {(x, y) | (x − x0 )2 + (y − y0 )2 ≤ r02 } ∩
{(x, y) | (x − x1 )2 + (y − y1 )2 ≤ r12 } =
̸ ∅ ⇐⇒ (x0 − x1 )2 + (y0 − y1 )2 ≤
2
(r0 + r1 ) e quindi possiamo determinare l’avvenuta collisione con la funzione
1 function clash ( x0 , y0 , radius0 , x1 , y1 , radius1 ) {
2 return ( ( x0 - x1 )**2 +( y0 - y1 )**2 <
3 ( radius0 + radius1 )**2 );
4 }
Ad esempio
1 class Vehicle {
2 constructor ( name , year ) {
3 this . name = name ;
4 this . year = year ;
5 this . service = undefined ;
6 }
7 age ( year ) {
8 return year - this . year ;
9 }
10 }
11
1 ...
2 updatePosition () {
3 this . ticks ++;
4 if ( this . ticks % this . ticksPerFrame == 0) {
5 this . x += this . deltaX ;
6 this . y += this . deltaY ;
7 }
8 }
9 }
Usiamo deltaX e deltaY per consentire di spostare tutti gli oggetti (in
linea retta).
Ovviamente se i loro valori sono 0 gli oggetti sono fermi, altrimenti in
movimento.
Eseguiamo uno spostamento solo ogni ticksPerFrame chiamate, per i
movimenti lenti.
Creiamo una classe per i cerchi come estensione della classe base
il costruttore ha i parametri specifici dell’oggetto che stiamo implementando
chiamiamo super per impostare i parametri comuni
impostiamo i parametri specifici
1 class Circle extends G e n e r i c G r a p h i c E l e m e n t {
2 constructor (x , y , radius , color ) {
3 super (x , y );
4 this . radius = radius ;
5 this . color = color ;
6 }
7 ...
7 drawMyself ( ctx ) {
8 ctx . drawImage ( this . image , this .x , this . y );
9 this . updatePosition ();
10 }
11 }
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 →a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1], b == []
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 →a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150]
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 →a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150, undefined, 157]
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 →a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150, undefined, 157, 150]
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 →a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150, undefined, 157, 150, undefined, undefined, 157]
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 →a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a.indexOf(157) == 7, a.lastIndexOf(150) == 8, a[0] = 7+8 =15
a == [15, 1, 1, 1, 1, 150, undefined, 157, 150, undefined, undefined, 157]
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 →b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a.slice(1,3) == [1, 1]
b==[1, 1, 15, 1, 1, 1, 1, 150, undefined, 157, 150, undefined, undefined, 157]
Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 →console . log ( b [1]+ b [2]+ b [9]);
b[1]==1, b[2]==15, b[9]==157
in console 173
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 →x += useless (2* x , z );
dovremo assegnare ad x il valore 6 + useless(12,z)
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 →function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
xuseless == 12, w == z == ref [3,8]
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 → x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
xuseless = 12+9 == 21
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 → w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
z[0] = 3 + 21 == 24
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 → x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
xuseless == y == ref [1,2,3]
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 → x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
y[0] = 1 + 12 == 13
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 → y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
y[1] = 2 + 4 == 6
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 → z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
z[2] = z[0] + z[1] == 24 + 8 == 32, z == [24,8,32]
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 → return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
return = y[0]+y[1] == 13 + 6 == 19
Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 →x += useless (2* x , z );
appena useless termina x==6, poi assegnamo ad x il valore 6 + 19 == 25