SkillBook - Blog

icona ricerca

BLOG

FORMAZIONE freccia giu

LAVORO freccia giu

PROFILO freccia giu

- AULE GRUPPI
- Le Tue Aule
- I Tuoi Gruppi
- Le Tue Selezioni
- Home
- Login
- Registrati
- Crea azienda
- Assistenza

Lista Blog

Chat

Tutte le categorie

Impariamo a programmare con JavaScript - Lezione 7

Gino Visciano | Skill Factory - 29/06/2016 22:49:56 | in Tutorials

Benvenuti alla settima lezione, in questa lezione completeremo la panoramica sui metodi (funzioni) di JavaScript per gestire numeri e date, in particolare approfondiremo la conoscenza delle classi Math e Date.
In parole semplici le classi sono contenitori di attributi (informazioni) e metodi (funzioni), per usare gli elementi di una classe bisogna creare un oggetto, nelle prossime lezioni approfondiremo questo tema.

La Classe Math è impotante perché contiene attributi e metodi che servono per gestire i numeri e fare le operazioni matematiche più comuni, questa classe ha un particolarità, gli attributi ed i metodi che contiene si possono usare direttamente, senza dover creare un oggetto, perchè sono statici.

La Classe Date contiene attributi e metodi che servono per gestire le date ed il tempo, a differenza della classe Math, i suoi elementi non sono statici, quindi per poterli usare bisogna creare un oggeto di tipo Date, come mostra l'esempio seguente:

Date data=new Date(); // Istanza (creazione) di un oggetto di nome data di tipo Date

Per capire come si usano gli attributi ed i metodi delle classi, vediamo alcuni esempi.

Tecniche di arrotondamento dei numeri
I numeri si possono arrotondare per difetto oppure per ecesso, i metodi della classe Math che permettono questo tipo di operazione, sono i seguenti:

Math.ceil(numero_decimale), arrotonda per difetto lasciando solo la parte intera, ad esempio 5.9=5.0;

Math.floor(numero_decimale), arrotonda per eccesso all'intero seguente, ad esempio 5.2=6.0;

Math.round(numero_decimale), arrotonda per difetto per numeri con la parte decimale inferiore a .5, arrotonda per eccesso per numeri con la parte decimale da .5 in poi, ad esempio 5.49=5.0, mentre 5.5=6.0;

Per applicare praticamente i metodi appena visti, eseguite l'esercizio seguente:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var num1=5.3;
var num2=5.5;
var num3=5.7;
document.write("Arrotondamento per eccesso:<br/>");
document.write(num1+"="+Math.ceil(num1)+"<br/>");
document.write(num2+"="+Math.ceil(num2)+"<br/>");
document.write(num3+"="+Math.ceil(num3)+"<br/>");
document.write("Arrotondamento per difetto:<br/>");
document.write(num1+"="+Math.floor(num1)+"<br/>");
document.write(num2+"="+Math.floor(num2)+"<br/>");
document.write(num3+"="+Math.floor(num3)+"<br/>");
document.write("Arrotondamento:<br/>");
document.write(num1+"="+Math.round(num1)+"<br/>");
document.write(num2+"="+Math.round(num2)+"<br/>");
document.write(num3+"="+Math.round(num3)+"<br/>");
</script>
</body>
</html>

Come calcolare le potenze e le radici quadrate
I metodi della classe Math che permettono di calcola la potenza di un numero oppure la sua radice quadrata sono i seguenti:

Math.pow(base,esponente);

Math.sqrt(numero);

Per applicare praticamente i metodi appena visti, provate l'esercizio seguente:


<html>
<head>
</head>
<body>
<script type="text/javascript">
var num1=6;
var num2=36;
document.write("La potenza di "+num1+" elevato a 2="+Math.pow(num1,2)+"<br/>");
document.write("La radice quadrata di "+num2+"="+Math.sqrt(num2)+"<br/>");
</script>
</body>
</html>

Da questo esercizio si deduce che la radice quadrata è l'operazione inversa della potenza.

Come ottenere un numero casuale
Per ottenere un numero casuale si usa il metodo:

Math.random();

Questo metodo, ogni volta che viene chiamato fornisce un valore compreso tra 0 e 0.99.

Per ottenere un numero casuale compreso tra 1 e X, dovete usare la formula seguente:

Math.round((Math.random()*X)+1));

Per applicare praticamente il metodo Math.random(), provate l'esercizio seguente:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var max=6;
document.write("Valore del dado:"+Math.round((Math.random()*max)+1)+"<br/><br/>");
document.write("-------PER RILANCIARE IL DADO PREMI F5-------<br/>");
</script>
</body>
</html>

Come verificare se una stringa corrisponde ad un numero
La funzione isNaN(stringa), permette di verificare se il contenuto di una stringa è un numero. Questa funzione restituisce true se il valore della stringa non è un numero, altrimenti retituisce false.
La particolarità di isNan è che è un funzione JavaScript, quindi a differenza dei metodi può essere usata senza indicare come prefisso il nome di un oggetto oppure il nome di una classe.

Per applicare praticamente la funzione isNaN(stringa), provate l'esercizio seguente:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var flag=true;
var numero;
do{
   numero=prompt("Inserire un codice numerico","");
   if (isNaN(numero)){
      flag=true;
      document.write(numero+" non è un numero<br/>");
   } else {
      document.write(numero+" è un numero<br/>");
     flag=false;
   }
}while(flag);
</script>
</body>
</html>

Come creare un oggetto di tipo data
La classe Date permette di creare un oggetto di tipo data, che contiene tutti i metodi per gestire le date ed il tempo.
L'operazione che permette di creare un oggetto, partendo dalla sua classe, si chiama Istanza.
L'istanza seguente crea un oggetto di nome data, di tipo Date e lo inizializza con la data e l'ora correnti.

Date data=new Date(); // Istanza (creazione) di un oggetto di nome data di tipo Date

Per applicare praticamente la classe Date, provate l'esercizio seguente:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var data=new Date("1982/09/11"); // Istanza (creazione) dell'oggetto data di tipo Date, inizializzato con la data 11/09/1982
document.write(data+"<br/>");
</script>
</body>
</html>

Come visualizzare una data in formato small data
In un oggetto di tipo Date (classe) ci sono tre metodi molto utili:

oggetto.getDate(), restituisce il progressivo del giorno indicato nella data, può essere una valore tra 1 e 31;

Ad esempio:

var data=new Date("1982/09/11");
document.write(data.getDate());

------ O U T P U T -----

oggetto.getMonth(), restituisce il progressivo del mese indicato nella data, può essere una valore tra 0 e 11, quindi per ottenere il progressivo del mese esatto bisogna aggiungere 1;

Ad esempio:

var data=new Date("1982/09/11");
document.write(data.getMonth()+1);

------ O U T P U T -----

oggetto.getFullYear(), restituisce il progressivo dell'anno indicato nella data;

Ad esempio:

var data=new Date("1982/09/11");
document.write(data.getFullYear());

------ O U T P U T -----

1982

Per applicare praticamente i metodi appena visti, eseguite l'esercizio seguente:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var data=new Date("1982/09/11"); // Istanza (creazione) dell'oggetto data di tipo Date, inizializzato con la data 11/09/1982
document.write(data+"<br/>");
document.write(data.getDate()+"/"+(data.getMonth()+1)+"/"+data.getFullYear()+"<br/>");
</script>
</body>
</html>

Come controllare se una data i formato stringa è corretta
Per controllare se una data in formato stringa è corretta, prima di tutto bisogna controllare se ben formata, utilizzando un'espressione regolare.
L'immagine seguente descrive nel dettaglio il significato dei simboli usati nell'espressione regolare:

Se la data è ben formata, si passa al controllo della validità, procedendo nel modo seguente:

1) Estrarre dalla stringa il giorno, il mese e l'anno e creare un oggetto di tipo Date;

2) Verificare se il giorno, il mese e l'anno dell'oggetto di tipo Date, sono uguali al giorno, al mese e all'anno estratti dalla stringa;

3) Se la verifica è positiva, allora la data in formato stringa è corretta.

Il programma seguente permette di controllare se una data in formato stringa è corretta:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var data_stringa="1982/05/15"; // Data in formato stringa
var espressione = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/; // Espressione regolare /^ inizio, $/ fine, [0-9]{2} 2 cifre numeriche, [0-9]{4} 4 cifre numeriche, \/ (carattere escape) indica slash /
if (!espressione.test(data_stringa)) // Esegue il metodo test per conforntare la data con l'espressione regoare e vedere s è ben formata
   {
            document.write("La data non è corretta");
   }else{
       anno = parseInt(data_stringa.substr(6),10); //Estrae l'anno dalla data in formato stringa
       mese = parseInt(data_stringa.substr(3, 2),10); //Estrae il mese dalla data in formato stringa
       giorno = parseInt(data_stringa.substr(0, 2),10); //Estrae il giorno dalla data in formato stringa
        var data=new Date(anno, mese-1, giorno); // Istanzia un oggetto di tipo Date con i valori estratti dalla data in formato stringa
       if(data.getFullYear()==anno && data.getMonth()+1==mese && data.getDate()==giorno){
            document.write("La data è corretta");
       }else{
            document.write("La data non è corretta");
      }
}
</script>
</body>
</html>

Come visualizzare l'orario corrente

In un oggetto di tipo Date (classe) ci sono tre metodi che permettono di ottenere l'ora i minuti ed i secondi:

oggetto.getHours(), restituisce le ore della data corrente, può essere una valore tra 0 e 23;

Ad esempio se la data corrente è:

Sun Jul 03 2016 09:29:01 GMT+0200 (ora legale Europa occidentale)

var data=new Date();
document.write(data.getHours());

------ O U T P U T -----

oggetto.getMinutes(), restituisce i minuti della data corrente, può essere una valore tra 0 e 59;

Ad esempio se la data corrente è:

Sun Jul 03 2016 09:29:01 GMT+0200 (ora legale Europa occidentale)

var data=new Date();
document.write(data.getMinutes());

------ O U T P U T -----

oggetto.getSeconds(), restituisce i secondi della data corrente, può essere una valore tra 0 e 59;

Ad esempio se la data corrente è:

Sun Jul 03 2016 09:29:01 GMT+0200 (ora legale Europa occidentale)

var data=new Date("1982/09/11");
document.write(data.getSeconds());

------ O U T P U T -----

Per applicare praticamente i metodi appena visti, eseguite l'esercizio seguente:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var orario=new Date(); // Data Corretta
document.write("Orario:"+orario.getHours()+":"+orario.getMinutes()+":"+orario.getSeconds()+"<br/><br/>");
document.write("-------PER AGGIORNARE L'ORARIO PREMI F5-------<br/>");
</script>
</body>
</html>

Arrivederci alla prossima lezione!!!

<< Lezione precedente Lezione successiva >>

T U T O R I A L S S U G G E R I T I

4734 Visualizzazioni

Impariamo a programmare con JavaScript - Lezione 6

Gino Visciano | Skill Factory - 11/06/2016 18:32:35 | in Tutorials

Benvenuti alla sesta lezione, in questa lezione imparerete a gestire i caratteri e le stringhe.

Per carattere s'intende qualunque simbolo del set grafico usato per scrivere, ad esempio sono caratteri le lettere maiuscole e minuscole, lo spazio, i numeri, il punto, i due punti, la virgola, il punto e virgola, gli operatori matematici, le parentesi e molti simboli speciali.

La tabella in cui sono indicati tutti caratteri fondamentali usati per scrivere si chiama codice ASCII e comprende 256 caratteri, ogni carattere è identificato da un numero decimale da 0 a 255.

Ad esempio la A corrisponde al numero 65, lo 0 al numero 48, lo spazio al numero 32.

La cosa interessante è conoscere i valori di offeset che permettono la conversione di alcuni caratteri.

L'offset 32 è importante perché se sommato al valore numerico si una lettera maiscola oppure se sottratto al valore numerico di una lettera minuscola, permette di ottenere il corrispondente valore minscuolo o maiuscolo.

Ad esempio il codice ASCII della lettera A è 65 se a questo valore sommate 32 ottenete 97 che corrisponde al codice ASCII della lettere a.

Allo stesso modo se alla lettera b, che corrisponde al codice ASCII 98, sottraete 32, ottenete 66 che corrisponde al codice ASCII della lettere B.

Quindi tra le lettere maiscole e quelle minuscole c'è un offset di 32.

Allo stesso modo per i numeri è importante l'offset 48, perché permette di convertire un carattere numerico, nel corrispondente numero intero.

Ad esempio il carattere 0 corrisponde al codice ASCII 48 e non può essere usato per fare calcoli, perché i caratteri si usano solo per scrivere.

Per ottenere il valore numerico intero che corrisponde al carattere 0, basta sottrarre 48 al codice ASCII dello 0, come mostra l'esempio seguente:

CODICE ASCII 0 (48) - OFFSET (48) = NUMERO INTERO 0.

La stessa casa vale per gli altri caratteri numerici, vediamo alcuni esempi:

CODICE ASCII 1 (49) - OFFSET (48) = NUMERO INTERO 1;

CODICE ASCII 2 (50) - OFFSET (48) = NUMERO INTERO 2;

...

CODICE ASCII 9 (57) - OFFSET (48) = NUMERO INTERO 9.

Oggi molti linguaggi di programmazione, tra cui anche JavaScript, non usano più il codice ASCII, ma usano il codice UNICODE, composto da tutti i caratteri usati da tutte le lingue del mondo, che naturalmente sono molti di più di 256.

Anche per il codice UNICODE, valogono i ragionamenti appena fatti, perché i primi 256 caratteri di questo codice corrispondono esattamente a quelli del codice ASCII.

Una stringa è una sequenza di caratteri come ad esempio un nominativo, un indirizzo, una partita iva oppure un codice fiscale.

Quando si programma le stringhe si scrivono sempre tra doppie virgolette, come ad esempio: "questa è una stringa".

I caratteri si scrivono tra virgolette singole, come ad esempio: 'A' oppure '1'.

Come ottenere la lunghezza di una stringa
var nome="Pippo"; // Creo una variabile di tipo stringa e assegno il valore "Pippo"
var lunghezza=nome.length; // Creo una variabile intera e assegno la lunghezza della stringa che corrisponde al valore 5

Come ottenere il codice Ascii dei caratteri delle stringhe
var nome="Pippo"; // Creo una variabile di tipo stringa e assegno il valore "Pippo"
var codice1=nome.charCodeAt(0); // Creo una variabile intera e assegno il codice ASCII del primo carattere della stringa (P)ippo, che corrisponde al valore 80
var codice2=nome.charCodeAt(2); // Creo una variabile intera e assegno il codice ASCII del terzo carattere della stringa Pi(p)po, che corrisponde al valore 112

Come convertire i codici Ascii in caratteri di tipo stringa
var str1=String.fromCharCode( 80 ); // Creo una variabile di tipo stringa e assegno il valore "P" (codice ASCII 80)
var str2=String.fromCharCode( 112 ); // Creo una variabile di tipo stringa e assegno il valore "p" (codice ASCII 112)

Come convertire i caratteri di tipo stringa in caratteri
var str1=String.fromCharCode( 80 ); // Creo una variabile di tipo stringa e assegno il valore "P" (codice ASCII 80)
var str2=String.fromCharCode( 112 ); // Creo una variabile di tipo stringa e assegno il valore "p" (codice ASCII 112)
var car1=str1.charAt(0); // Creo una variabile di tipo carattere e assegno il carattere 'P'
var car2=str2.charAt(0); // Creo una variabile di tipo carattere e assegno il carattere 'p'

Come estrarre caratteri da una stringa
var nome="Pippo"; // Creo una variabile di tipo stringa e assegno il valore Pippo
var car1=nome.charAt(0); // // Creo una variabile di tipo carattere e assegno il carattere 'P'
var car2=nome.charCodeAt(2); // Creo una variabile di tipo carattere e assegno il carattere 'p'

Come estrarre da una stringa uno sottostringa
var nominativo="Pippo Rossi"; // Creo una variabile di tipo stringa e assegno il valore "Pippo Rossi"
var cognome=nominativo.substring(7,10); // Creo una variabile di tipo stringa e assegno il valore "Ros", R(7)-o(8)-s(9)=caratteri da 7 a 9 il decimo viene escluso
var nome=nominativo.substring(1,6); // Creo una variabile di tipo stringa e assegno il valore "Pippo", P(1)-i(2)-p(3)-p(4)-o(5)=caratteri da 1 a 5 il sesto viene escluso

Come si concatenano le stringhe
var nome="Pippo";
var cognome="Rossi";
var nominativo=nome+" "+cognome; // Il segno "+" (più), concatena il contenuto della variabile nome ("Pippo") con lo spazio (" ") e il contenuto della variabile cognome ("Rossi")
document.write(nominativo);

oppure

var nome="Pippo";
var cognome="Rossi";
var nominativo=nominativo.concat(nome); // concatena il contenuto della variabile nominativo ("") con il contenuto della variabile nome ("Pippo"), equvale a nominativo+nome
var nominativo=nominativo.concat(" "); // concatena il contenuto della variabile nominativo ("Pippo") con lo spazio (" "), equvale a nominativo+" "
var nominativo=nominativo.concat(cognome); // concatena il contenuto della variabile nominativo ("Pippo ") con il contenuto della variabile cognome ("Rossi"), equvale a nominativo+cognome
document.write(nominativo);

Come convertire i caratteri di una stringa in maiuscolo e minuscolo
var nominativo_minuscolo1="pippo rossi";
var nominativo_maiuscolo1=nominativo_minuscolo.toUpperCase();
var nominativo_maiuscolo2="PIPPO ROSSI";
var nominativo_minuscolo2=nominativo_maiuscolo.toLowerCase();

Come convertire un numero stringa in un numero intero oppure decimale
var strNumero="125";
var numero=parseInt(strNumero);
var strNumeroDec="125.50";
var numeroDec=parseFloat(strNumeroDec);

Come ricerca una ricorrenza di caratteri in una stringa
var strcerca="bella";
var frase="Oggi è una bella giornata";
var posizione = frase.indexOf(strcerca);
if (posizione != -1) document.write("La ricorrenza è presente a partire dal carattere:"+(posizione+1));
else document.write("La ricorrenza non è presente");

Arrivederci alla prossima lezione!!!

<< Lezione precedente Lezione successiva >>

T U T O R I A L S S U G G E R I T I

12763 Visualizzazioni

17 Aziende ICT insieme con l'obiettivo di modificare il mercato controllato dai grandi Player, nasce la rete d'imprese TGT

Gino Visciano | Skill Factory - 05/06/2016 23:39:21 | in Fare Impresa

Nasce ToGeTher la prima rete d'imprese ICT composta da 17 PMI che si sono aggregate insieme per aumentare la capacità progettuale con l'obiettivo di migliorare la qualità dell'offerta per competere con i grossi Player che attualmente occupano una posizione di predominio nel mercato ICT.

Una novità importante per il nostro Paese, dove le individuaità sembrano prevalere sulle aggregazioni, a discapito della capacità professionale che si potrebbe esprimere unendo le esperienze e le competenze sviluppate negli anni dalle PMI che operano nel settore ICT.

TGT è un nuovo soggetto che raggiunge un fatturato complessivo di 60 mln di euro, composto dalle seguenti aziende: Able One Systems, Aresoft, Bas Consulting, Clariter, Comp.Sys, Consulthink, Crismatica Consulting, Eidos, GT50, Land, Major bit, Mediavoice, Omnitech, Sincrono, SirfinPA, Solving Team, Tesys e prossimamente Digital Video e Telesio System.

La speranza è che altre PMI seguano questo esempio, per dare maggiore forza alle aziende che caratterizzano il sistema industriale del nostro Paese e creare nuovi posti di lavoro.

4603 Visualizzazioni

Impariamo a programmare con JavaScript - Lezione 5

Gino Visciano | Skill Factory - 03/06/2016 23:37:15 | in Tutorials

Benvenuti alla quinta lezione, in questa nuova lezione vedremo come si creano i vettori in JavaScript e come si gestiscono utilizzando un ciclo for.
I vettori sono variabili multidimensionali, chiamati anche array, si usano al posto delle variabili, quando si devono memorizzare molti dati dello stesso tipo.
Il vantaggio dei vettori, rispetto alle variabili, è quello che i dati memorizzati nei vettori si possono gestire utilizzando un indice numerico, che rende la gestione del vettore molto semplice e veloce.

L'immagine seguente mostra la differenza tra variabili e vettori.

In Javascript per creare un vettore si usa il comando new Array(), come mostra l'esempio seguente:

var vettore_interi=new Array();

Per riempire il vettore appena creato dovete usare un'indice progressivo che determina la posizione nel vettore del valore assegnato.
Gli indici dei vettori sono progressivi numerici, iniziano sempre da 0 (zero). L'esempio seguente mostra come inserire 5 valori interi nel vettore vettore_interi:

vettore_interi[0]=40;
vettore_interi[1]=20;
vettore_interi[2]=30;
vettore_interi[3]=10;
vettore_interi[4]=5;

Attenzione vettore_interi[0] si legge vettore_interi di 0, vettore_interi[1] si legge vettore_interi di 1, etc.

Come gestire i vettori con un ciclo for
I cicli for si usano quando già sappiamo quante volte ripetere un blocco d'istruzioni. Nel for è presente una variabile che viene utilizzata come contatore, che va sempre inizializzata con un valore iniziale.
Questa variabile dopo ogni ciclo s'incrementa del valore indicato, in genere s'incrementa di uno, il ciclo for s'interrompe quando la condizione di controllo indicata non è più vera.
Il Diagramma di flusso seguente mostra il funzionamento di un ciclo for:

Esempio 5

Di seguito il programma vettore_interi.html con il codice Html/Javascript che mostra come si usa un ciclo for per visualizzare il contenuto di un vettore.
Attenzione nel ciclo for il contatore X parte da 0 (zero) perché l'indice di un vettore inizia sempre da 0 (zero), X++ corrisponde alla forma abbreviata di X=X+1 e nella condizione X<5, il valore 5 corrisponde al numero di valori interi inseriti nel vattore vettore_interi.


<html>
<head>
<script type="text/javascript">
var vettore_interi=new Array();
vettore_interi[0]=40;
vettore_interi[1]=20;
vettore_interi[2]=30;
vettore_interi[3]=10;
vettore_interi[4]=5;
document.write("Elementi del vettore vettore_interi<br/>");
for(var x=0;x<5;x++){
document.write(vettore_interi[x]+"<br/>");
}
</script>
</head>
</html>

------ OUTPUT -------
Elementi del vettore_interi
40
20
30
10
5

Proprietà length
La proprietà length indica il numero di elementi inseriti in un vettore, ad esempio per assegnare ad una variabile il numero di elementi presenti nel vettore_interi e visualizzare un messaggio, potete procedere come segue:

var elementi_nel_vettore=vettore_interi.length;
document.write("Nel vettore sono stati inseriti "+elementi_nel_vettore+" valori interi.");

Questa proprietà si usa spesso nei cicli for per indicare il numero di elementi del vettore, come mostra l'esempio seguente:

for(var x=0;x<vettore_interi.length;x++){
document.write(vettore_interi[x]+"<br/>");
}

Come aggiungere e rimuovere elementi in coda ad un vettore
I metodi push e pop permettono rispettivamente di aggiungere e rimuovere elementi in coda ad un vettore.

Ad esempio per aggiungere cinque nominativi al vettore nominativi e visualizzarli potete procedere come segue:

Esempio 6

Di seguito il programma nominativi.html con il codice Html/Javascript che mostra come si crea un vettore con 5 nominativi e si visualizzano.


<html>
<head>
<script type="text/javascript">
nominativi=new Array();
nominativi.push("Rossi Alberto");
nominativi.push("Verdi Mario");
nominativi.push("Bianchi Giulio");
nominativi.push("Alba Milena");
nominativi.push("Salvi Carlo");

document.write("Nominativi del vettore nominativi<br/>");
for(var x=0;x<nominativi.length;x++){
document.write(nominativi[x]+"<br/>");
}
</script>
</head>
</html>

------ OUTPUT -------

Nominativi del vettore nominativi
Rossi Alberto
Verdi Mario
Bianchi Giulio
Alba Milena
Salvi Carlo

Esempio 7

Di seguito il programma nominativi_svuota.html con il codice Html/Javascript che mostra come si crea un vettore con 5 nominativi e si svuota mentre si visualizzano.

<html>
<head>
<script type="text/javascript">
nominativi=new Array();
nominativi.push("Rossi Alberto");
nominativi.push("Verdi Mario");
nominativi.push("Bianchi Giulio");
nominativi.push("Alba Milena");
nominativi.push("Salvi Carlo");
document.write("Nominativi del vettore nominativi<br/>");
document.write("Nominativi presenti prima della visualizzazione "+nominativi.length+"<br/>");
for(var x=0;x<5;x++){
document.write(nominativi.pop()+"<br/>");
}
document.write("Nominativi presenti dopo la visualizzazione "+nominativi.length+"<br/>");
</script>
</head>
</html>

------ OUTPUT -------

Nominativi del vettore nominativi
Nominativi presenti prima della visualizzazione 5
Salvi Carlo
Alba Milena
Bianchi Giulio
Verdi Mario
Rossi Alberto
Nominativi presenti dopo la visualizzazione 0

Osservando l'output, si deduce che il vettore, rispetto ai metodi push e pop si comporta come una coda di tipo LIFO (Last In First Out - L'ultimo entrato è il primo ad uscire), infatti il nominativo Salvi Carlo è l'ultimo nominativo inserito, ma è il primo ad essere visualizzato. In questo caso possiamo anche dire che il vettore si comporta come una pila di piatti.

Come ordinare in modo crescente o decrescente gli elementi di un vettore di stringhe
I metodi sort() e reverse() permettono rispettivamente di ordinare in modo crescente ed in modo decrescente gli elementi di un vettore di stringhe (valori alfanumerici).
Attenzione il metodo reverse() non ordina, ma inverte l'ordine degli elementi del vettore, quindi per ordinare gli elementi di un vettore in modo descescente, bisogna prima usare il metodo sort() per ordinarli in modo crescente e poi il metodo reverse() per invertire l'ordine, gli esempi seguenti mostrano come si usano questi sue metodi.

Esempio 8

Di seguito il programma nominativi_sort.html con il codice Html/Javascript che mostra come si crea un vettore con 5 nominativi e si visualizzano ordinati in modo crescente.

<html>
<head>
<script type="text/javascript">
nominativi=new Array();
nominativi.push("Rossi Alberto");
nominativi.push("Verdi Mario");
nominativi.push("Bianchi Giulio");
nominativi.push("Alba Milena");
nominativi.push("Salvi Carlo");
nominativi.sort(); //Ordina il vettore nominativi in modo crescente
document.write("Nominativi del vettore nominativi ordinati in modo crescente<br/>");
for(var x=0;x<nominativi.length;x++){
document.write(nominativi[x]+"<br/>");
}
</script>
</head>
</html>

------ OUTPUT -------
Nominativi del vettore nominativi ordinati in modo crescente
Alba Milena
Bianchi Giulio
Rossi Alberto
Salvi Carlo
Verdi Mario

Esempio 9

Di seguito il programma nominativi_reverse.html con il codice Html/Javascript che mostra come si crea un vettore con 5 nominativi e si visualizzano ordinati in modo decrescente.

<html>
<head>
<script type="text/javascript">
nominativi=new Array();
nominativi.push("Rossi Alberto");
nominativi.push("Verdi Mario");
nominativi.push("Bianchi Giulio");
nominativi.push("Alba Milena");
nominativi.push("Salvi Carlo");
nominativi.sort(); //Ordina il vettore nominativi in modo crescente
nominativi.reverse(); //Ordina il vettore nominativi in modo decrescente
document.write("Nominativi del vettore nominativi ordinati in modo decrescente<br/>");
for(var x=0;x<nominativi.length;x++){
document.write(nominativi[x]+"<br/>");
}
</script>
</head>
</html>

------ OUTPUT -------
Nominativi del vettore nominativi ordinati in modo decrescente
Verdi Mario
Salvi Carlo
Rossi Alberto
Bianchi Giulio
Alba Milena

Come ordinare in modo crescente o decrescente gli elementi di un vettore di numeri
Il metodo sort(), per ordinare in modo crescente un vettore numerico, ha bisogno di una funzione di comparazione, l'utilità di questa funzione è quella di confrontare coppie di numeri per stabilire qual è il numero più grande. Associando la funzione di comparazione al metodo sort(), assume il formato seguente:

sort(function(a, b){return a-b})

L'esempio seguente mostra come ordinare un vettore di numeri usando il metdo sort() con la funzione di comparazione.

Esempio 10

Di seguito il programma vettore_interi_sort.html con il codice Html/Javascript che mostra come ordina un vettore di numeri.


<html>
<head>
<script type="text/javascript">
var vettore_interi=new Array();
vettore_interi[0]=40;
vettore_interi[1]=20;
vettore_interi[2]=30;
vettore_interi[3]=10;
vettore_interi[4]=5;
vettore_interi.sort(function(a, b){return a-b});
document.write("Elementi del vettore vettore_interi ordinati<br/>");
for(var x=0;x<vettore_interi.length;x++){
document.write(vettore_interi[x]+"<br/>");
}
</script>
</head>
</html>

------ OUTPUT -------
Elementi del vettore_interi ordinato
5
10
20
30
40

Come concatenare gli elementi di due vettori
Il metodo concat permette di concatenare due o più vettori, l'esempio seguente mostra come utilizzare questo metodo.

Esempio 11
Di seguito il programma nominativi_concatenati.html con il codice Html/Javascript che mostra come concatenare i nominativi di due vettori diversi.

<html>
<head>
<script type="text/javascript">
nominativi_primo=new Array();
nominativi_secondo=new Array();
// Inseriamo 5 nominativi nel vettore nominativi_primo
nominativi_primo.push("Rossi Alberto");
nominativi_primo.push("Verdi Mario");
nominativi_primo.push("Bianchi Giulio");
nominativi_primo.push("Alba Milena");
nominativi_primo.push("Salvi Carlo");
// Inseriamo 3 nominativi nel vettore nominativi_secondo
nominativi_secondo.push("Fioravanti Anna");
nominativi_secondo.push("Vicariello Mauro");
nominativi_secondo.push("Pezzella Gerarda");
// Concateniamo i vettori nominativi_primo e nominativi_secondo nel vettore nominativi
var nominativi=nominativi_primo.concat(nominativi_secondo);
nominativi.sort();
document.write("Nominativi del vettore nominativi ordinati in modo crescente<br/>");
for(var x=0;x<nominativi.length;x++){
document.write(nominativi[x]+"<br/>");
}
</script>
</head>
</html>

------ OUTPUT -------
Nominativi del vettore nominativi ordinati in modo crescente
Alba Milena
Bianchi Giulio
Fioravanti Anna
Pezzella Gerarda
Rossi Alberto
Salvi Carlo
Verdi Mario
Vicariello Mauro

Arrivederci alla prossima lezione!!!

<< Lezione precedente Lezione successiva >>

T U T O R I A L S S U G G E R I T I

5481 Visualizzazioni

Impariamo a programmare con JavaScript - Lezione 4

Gino Visciano | Skill Factory - 02/06/2016 18:54:06 | in Tutorials

Benvenuti alla quarta lezione, in questa lezione vedremo i cicli while e do - while. I cicli sono strutture di programmazione che permettono di ripetere un blocco d'istruzioni mentre una condizione risulta vera.

La differenza tra un ciclo while ed un ciclo do - while è quella che il primo ciclo controlla subito se la condizione è vera o falsa, il secondo fa il controllo solo dopo aver eseguito il blocco d'istruzioni, quindi il while potrebbe non eseguire il blocco d'istruzioni nel caso la condizione risultasse subito falsa, il do - while esegue il blocco d'istruzioni almeno una volta.

Il Diagramma di flusso seguente descrive il comportamento di un ciclo while.

Il Diagramma di flusso seguente descrive il comportamento di un ciclo do - while.

Per le sue caratteristiche il ciclo do - while si usa per ripetere una procedura, chiedendo all'utente se vuole continuare.

Esempio 3

Vogliamo creare un'applicazione Javascript che indica se un numero inserito è pari oppure dispari, l'utente può inserire un altro numero se risponde si alla domanda Vuoi continuare?.

Il programma è lo stesso visto nella lezione precedente, con la variante di poter continuare ad inserire numeri se risponde si alla domanda Vuoi continuare?.

Di seguito il programma pari_dispari_ripeti.html con il codice Html/Javascript per visualizzare se un numero è pari oppure dispari, con la possibilità di inserire più volte il numero.

<html>
<head>
<script type="text/javascript">
var str_numero;
var soluzione;
var numero;
var risposta;
do {
       str_numero = prompt("Inserisci un numero:","Pari o Dispari"); // Prompt permette d'inserire un valore di tipo stringa, in questo caso lo usiamo per inserire il numero
       numero=parseInt(str_numero); // La funzione parseInt converte il numero di tipo stringa in tipo intero
       if (numero%2==0){
                  soluzione="Il numero è pari";
       } else {
                 soluzione="Il numero è dispari";
       }
       alert(soluzione); // Visualizza se il numero è pari oppure dispari
       risposta= prompt("Vuoi continuare?","si/no"); // Prompt permette d'inserire un valore di tipo stringa, in questo caso lo usiamo per chiedere all'utente se vuole inserire un altro numero
       risposta=risposta.toLowerCase();
} while(risposta=="si");
</script>
</head>
</html>

Il ciclo while, per le sue caratteristiche è più adatto per leggere sequenze di valori, come ad esempio la lettura di file oppure la lettura dei record di una tabella. Comunque questo tipo di ciclo non esegue il blocco d'istruzioni se la condizione risulta subito falsa.

Esempio 4

Vogliamo creare un'applicazione JavaScript che permette di contare fino ad un valore predefinito, l'utente può inserire un altro valore fino a cui contare se risponde si alla domanda Vuoi continuare?.

Di seguito il programma conta_ripeti.html con il codice Html/Javascript per contare fino ad un valore predefinito fino a quando l'utente risponde si alla domanda Vuoi continuare?

<html>
<head>
<script type="text/javascript">
var str_valore;
var valore;
var conta;
var ripetizioni=0;
var risposta;
do {
   ripetizioni=ripetizioni+1;
   str_valore=prompt("Fino a quanto devo contare?","valore");
   valore=parseInt(str_valore);
   conta=1;
   document.write(ripetizioni+") Conta fino a "+valore+"<br/>");
   document.write("-------------------------------"+"<br/>");
   while(conta<=valore){
        document.write(conta+"<br/>");
        conta=conta+1; // Incrementa conta di 1 (contatore)
   }
   document.write("<br/>");
   risposta= prompt("Vuoi continuare?","si/no"); // Prompt permette d'inserire un valore di tipo stringa, in questo caso lo usiamo per chiedere all'utente se vuole inserire un altro numero
   risposta=risposta.toLowerCase();
} while(risposta=="si");
</script>
</head>
</html>

Arrivederci alla prossima lezione!!!

<< Lezione precedente Lezione successiva >>

T U T O R I A L S S U G G E R I T I

5872 Visualizzazioni

TOP

Post più recenti

Tutti i posts