JavaScript

ARRAY

Dichiarazione: var Stringhe = [ “Ale”, “Bianchi”, 1996 ] oppure

var Stringhe = new Array() Stringhe[0]=”Ale”;

 Stringhe[1]=”Bia”;

Stringhe[2]= 1996;

Metodi:

//aggiunta elementi

push( ) 

- aggiunge un elemento in CODA

shift( ) 

- aggiunge un elemento in CIMA

//rimozione elementi

pop( ) 

- rimuove elemento in CODA

unshift( ) 

- rimuove elemento in CIMA

//altro pos. su cui agire, opz. N°elementi da eliminare, dati da aggiungere

splice( ) 

- Rimuovere/aggiungere elementi

partenzaTaglio(incluso), fineTaglio(non incluso)

slice( ) 

- isola un pezzo di array

array da attaccare

concat( ) 

- Concatenare due Array x.concat( y )

opz.carattere da usare al posto della virgola

join( ) 

- Restituisce una STRINGA composta da tutti gli elementi divisi da VIRGOLA

//ordinamento

sort( ) 

- Riposiziona RANDOM gli elementi

reverse( ) 

- INVERTE le posizioni

//posizionamento

dato da cercare

indexOf( ) 

- Posizione nell’Array rispetto al PRIMO elemento

dato da cercare

lastindexOf ( ) 

- Posizione nell’Array rispetto all’ ULTIMO elemento

Tipologie speciali:

TYPED ARRAY arrayBuffer arrayBufferView

- Manipolazione di dati binari / [..]

SET

- insieme di dati SENZA DUPLICATI

var Stringhe = new Set( );

Metodi:

add ( parametro ): Aggiungere

size (): N° di elementi nell’Array

has ( parametro ): se il parametro è presente

boolean –

delete ( parametro ): l’elemento

Eliminare

clear (): Elimina tutto

MAP

- ad ogni VALORE viene associata una CHIAVE

var Stringhe = new Map( );

Stringhe.set ( “ valore ” , “ chiave ”); Stringhe.set ( 3.14 , “ Pigreco ” );

var obj = { id:123, data: “ test ” }; Stringhe.set ( obj , “ Oggetto ” );

Metodi: get ( chiave ): Raggiungere un elemento attraverso la chiave

size (): N° di elementi nell’Array

has ( parametro ): se il parametro è presente

boolean –

delete ( parametro ): l’elemento

Eliminare

SCOPE la visibilità di una variabile può essere:

GLOBALE: utilizzabile in ogni parte del codice,

LOCALE: utilizzabile e visibile solo all’interno della funzione in cui è

stata . . dichiarata ( in tal caso, in caso di omonimia, oscura

la variabile . . . . . . GLOBALE)

Per dichiarare una variabile con SCOPE ristretto, si usa LET al posto di VAR

FUNZIONI nomeFunzione (argomenti) //istruzioni

Struttura: function { }

nomeFunzione

Invocazione: ( )

argomenti

//il metodo length() ne restituisce il N° di argomenti

//CALLBACK è una funzione inserita all’interno di un oggetto

Componenti:

-return: ;

restituisce un valore alla funzione cui appartiene

function somma(a,b) { var c = a+b; return c ;}

-arguments [] : in caso non si sappia il numero di argomenti da passare, è

possibile farlo . . . . . . attraverso questo Array.

function somma( ) { var c = arguments[ 0 ] + arguments[ 1 ]; return c ;}

è possibile usarlo anche nei cicli:

function somma( ) { var c = 0 ; var i = 0 ; for ( i IN arguments )

{ c += arguments[ i ] ; return c ;}}

-valori di Default: è possibile impostare i valori che i parametri assumeranno in caso di .

. mancato INPUT

function somma( x = 0 , y = 0 )

-Rest Parameters: se si dovesse passare un ARRAY di lunghezza indefinita, si usa

l’ ARRAY Y

function somma( x, … y ) { var c = 0;

for ( var i IN y ) { c += y[ i ]; } ;

break ; }

var arrayRest = { 8, 12, 24, 16 };

somma (… arrayRest) ;

ARROW FUNCTION:

var somma = (a, b) => a+b;

MODULI

//EXPORT File esclusivo. Si possono esportare una o più

Ogni modulo va memorizzato in un

delle funzioni in essi contenute con EXPORT messo prima della “function”

Export function SOMMA (x,y) { return x+y; }

COSTANTI CLASSI

Allo stesso modo possono essere esportate sia che

export const piGreco = 3.141592;

export class Circonferenza { constructor (r) { this.raggio=raggio; } }

Per non dover specificare singolarmente:

export { SOMMA, piGreco, Circonferenza };

EXPORT DI DEFAULT un solo metodo per file la funzione è anonima così da poter essere

  liberamente rinominata in ogni file.

export default function(x,y) { return x+y; }

//IMPORT ipotizziamo che gli elementi di prima fossero dichiarati nel file MIOMODULO.js

IMPORT{ } from “…”

E’ possibile importarli in altri file attraverso *elenco*

import { SOMMA, piGreco, Circonferenza } from “MIOMODULO”;

//è possibile rinominare con Alias gli importati

import { SOMMA as S, piGreco as PG }

//se dichiarassi piGreco=3.14 non andrebbe in conflitto

importarli in blocco

E’ altresì possibile rinominando il file di partenza:

import * as Matematica from “MIOMODULO”;

IMPORT DEFAULT import somma from “MIOMODULO” // import addizione from “MIOMODULO”



CALL e APPLY / BIND

Function saluta (nomeP) { console.log(“Buongiorno ”+nomeP()) }

var Persona = { nome: “MARIO”; cognome: “ROSSI”; nomeCognome: function() {return this.nome + “ “

+this.cognome;} } //il risultato sarà undefined undefined perché il this non trova

saluta(Persona.nomeCognome);

argomenti

CALL Invoca la funzione impostandone il RIFERIMENTO THIS, gli argomenti saranno quelli da passare alla

fun.call(this.Arg [,arg1 [,arg2 [,arg3]]]);

funzione . . . .

function saluta(NomeP) {console.log(“Buongiorno ”+ NomeP.call(Persona));}

APPLY come il CALL, ma permette di lavorare con un array

fun.apply(this.Arg, [nomeArray]);

function saluta(NomeP) {console.log(“Buongiorno ”+ NomeP.call(Persona));}

FUNZIONI PREDEFINITE

//conversione str da trasformare, opz. (sistema num. da usare)

parseInt( ) 

- trasforma la stringa in numerica intera

str da trasformare

parseFloat( ) 

- trasforma la stringa in numerica intera (in assenza di punto), decimale in caso contrario

//confronto str da valutare

isInteger( ) boolean



- TRUE se è un valore intero, FALSE in caso contrario

str da valutare

isNaN( ) boolean



- TRUE se valore numerico non valido, FALSE al contrario

str da valutare

isFinite( ) boolean



- TRUE se valore è diverso da INFINITO o NaN, FALSE al contrario

//op.numeriche

array da utilizzare

max/mix( ) 

- Trova il valore maggiore/minore tra quelli analizzati

array da utilizzare

ceil( ) 

- Trova il primo intero maggiore o uguale

array da utilizzare

floor( ) 

- Trova il primo intero minore o uguale

array da utilizzare

round( ) 

- Arrotonda all’intero più vicino

random( ) 

- Numero casuale tra 0 e 1 ( decimale )

//op. sulle stringhe

array/stringa da utilizzare

length( ) 

- Trova la lunghezza (se esiste, va da 1 in poi)

valore da trovare

charAt( ) 

- Trova la sua esatta posizione ( se c’è, da 0 in poi )

val.da sostituire, val.sostituto

replace( ) 

- Sostituire valori

sottostringa da utilizzare

indexOf( ) 

- Trova la prima posizione occupata dalla sottostringa

sottostringa da utilizzare

lastindexOf( ) 

- Trova ‘ultima posizione occupata dalla sottostringa

pos.di inizio, numero di caratteri

sbstr ( ) 

- Estrae una parte di una stringa

pos.di inizio(inclusa), pos.di fine (non inclusa)

subString ( ) 

- Estrae una parte di una stringa

el2

el1.concat ( ) concatena il 2°el al 1°



- partenzaTaglio(incluso), fineTaglio(non incluso)

slice( ) 

- isola un pezzo di stringa

car.di inizio(non inclusa)

split ( )  //Vuota_div.carattere x carattere //Spazio_parola x parola

- Estrae una parte di una stringa stringa

toLowerCase/ toUpperCase ( ) 

- Trasforma la stringa in MINUSCOLO/MAIUSCOLO

stringa

trim ( ) 

- Elimina SPAZI iniziali e finali valore

startsWith/endsWith ( ) boolean



- Cominciano/Finiscono con quel parametro

//codifica URI str da trasformare

encodeURI( ) 

- Lascia inalterate CIFRE LETTERE E CAR.SPECIALI convertendo il resto in ESADECIMALE

str da trasformare

decodeURI ( ) 

- Contrario di ENCODEURI, converte DA ESADECIMALE in ASCII

str da trasformare

encodeURIcomponent( ) 

- Usato per codifiche URI di funzioni contenenti parametri

str da trasformare

decodeURIcomponent( ) 

- Contrario di ENCODEURICOMPONENT:

decodifica

DATE

var X = new Date() ; //si ottiene la data completa in inglese

Inserimento: var X = new Date( “ 01/01/2019 15:30 “ ) ;

Metodi:

getFullYear ( ) anno, 4 cifre



- getMonth ( ) N° del mese, da 0 a 11



- getDay ( ) N° giorno della settimana, da 0 a 6



- getDate ( ) N° giorno del mese, da 1 a 31



- //ore

getHours ( ) ora



- getMinutes ( ) minuti



- getSeconds ( ) secondi



- getMilliseconds ( ) millesecondi



-

Modifica:

data.setFullYear ( ) ;

data.getFullYear( ) + 1

Confrontare date:

if ( oggi > Scadenza ) { alert( “ Articolo scaduto! ” ) };

TIMER

a- INTERVALLO

setInterval( )

function(){ }, millisecondi esegue periodicamente un’operazione



clearInterval ( nomeVarTimer );

b- TIMEOUT

setTimeout( )

function(){ }, millisecondi esegue un’operazione dopo un dato periodo



clearTimeout ( nomeVarTimer );

SYMBOL….

EVENTI

1- < input type = “button” onClick = “ alert ” value= “ Aiuto ” >

( ‘ Posso aiutarti? ‘ )

2- document.getElementById ( “ btn1 “ ).onclick = function() { alert ( ‘ Posso aiutarti? ‘ ); }

3- var oggetto = document.getElementById ( “ btn1 “ )

oggetto.addEventListener ( ‘ click ’ , function() , [priorità

{ alert ( ‘Posso aiutarti?’ ) ;}

exe] )

[priorità exe] in caso avessimo molti handlers, il primo da eseguire è quello con useCapture = true



//possibilità di associare più di un evento all’oggetto, sia scrivendola dentro che richiamandone una

codificata a parte, come nel seguente esempio

Oggetto.addEventListener ( ‘mouseover’ , over ) --- proveniente da ----

function over () { oggetto.innerHTML = “ Sei sopra col mouse! “ }

Eliminare un listener oggetto.removeEventListener (‘click’, function() { alert (‘Posso aiutarti?’); })



.QUALORA VOLESSI SAPERE QUALE TASTO E’ ST