Tutte le categorie
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.
<!-- vettore_interi.html -->
<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.
<!-- nominativi.html -->
<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.
<!-- nominativi_svuota.html -->
<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.
<!-- nominativi_sort.html -->
<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.
<!-- nominativi_reverse.html -->
<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.
<!-- vettore_interi_sort.html -->
<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.
<!-- nominativi_concatenati.html -->
<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
- APP Mania
- Excel delle Meraviglie
- Ricominciamo ... dal Linguaggio SQL
- Come sviluppare un Sito con Wordpress
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.
<!-- pari_dispari_ripeti.html -->
<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?
<!-- conta_ripeti.html -->
<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
- APP Mania
- Excel delle Meraviglie
- Ricominciamo ... dal Linguaggio SQL
- Come sviluppare un Sito con Wordpress
Impariamo a programmare con JavaScript - Lezione 3
Gino Visciano |
Skill Factory - 23/05/2016 00:07:52 | in Tutorials
Benvenuti alla terza lezione, in questa lezione imparerete a dichiarare le variabili in JavaScript e ad utilizzare la struttura condizionale if - else.
Che cos'è una variabile?
Una variabie è una posizione di memoria in cui è possibile memorizzare un'informazione. I nomi delle variabili devono iniziare sempre con una lettera e non devono contenere spazi, ad esempio:
<script type="text/javascript">
var a, nome, b1; // sono nomi di variabili corretti
var nome e cognome, 1a; //sono nomi di variabili non corretti
</script>
Come si assegna un valore ad una variabile?
In tutti i linguaggi di programmazione l'operatore per assegnare un valore ad una variabile è il segno uguale "=". Attenzione, in Javascript, le variabili diventano dello stesso tipo del primo valore assegnato, ad esempio:
<script type="text/javascript">
var valore_intero, valore_decimale, valore_alfanumerico;
valore_intero=10; // La variabile valore_intero diventa di tipo intero, perché il primo valore assegnato è un numero di tipo intero
valore_decimale=20.5; // La variabile valore_decimale diventa di tipo decimale, perché il primo valore assegnato è un numero di tipo decimale
valore_alfanumerico="Rossi Alberto"; // La variabile valore_alfanumerico diventa di tipo alfanumerico, perché il primo valore assegnato è un numero di tipo alfanumerico, i valori alfanumerici di chiamano stringhe e vanno sempre scritti tra doppi apici
</script>
Quali sono i tipi di dati che si possono assegnare alle varibili in Javascript?
Interi, ad esempio:
1, 100, 12, 1000;
Decimali, ad esempio:
1.2, 10.0, 12.45, 1000.50, i valori decimali si indicano dopo il punto;
Caratteri, ad esempio:
'1', '0', '2', 'A', 'b', '?', '!', '.', i caratteri vanno scritti sempre tra apici;
Stringhe, ad esempio:
"Rossi", "Lazio", "Via Roma, 10", "1990", le stringhe vanno scritte sempre tra doppi apici;
Booleani, ad esempio:
True, False;
Date, ad esempio:
new Date("10/05/2016"), in Javascript le date sono oggetti e si creano con la classe Date, ad esempio var data_nascita=new Date("20/09/1990").
Adesso impariamo ad usare la prima struttura di programmazione:
Struttura di programmazione: if - else
La struttura if - else è una struttura condizionale che permette di eseguire blocchi d'istruzioni diversi, in base ad una condizione di scelta che può essere vera oppure falsa, il diagramma di flusso seguente mostra graficamente il comportamento di una struttura di scelta:
Esempio 1
Vogliamo creare un'applicazione Javascript che indica se un numero inserito è pari oppure dispari.
Per capire se un numero è pari oppure dispari, basta dividerlo per 2 e vedere se l'operazione restituisce un resto. Il numero è dispari se la divisione ha il resto altrimenti il numero è pari, questo risultato si ottine con la formula seguente:
num%2
dove % (modulo) è l'operatore matematico che restituisce il resto di una divisione.
Attenzione in Javascript si definisce blocco d'istruzioni, un insieme d'istruzioni racchiuse tra parentesi graffe {...}.
Di seguito il programma pari_dispari.html con il codice Html/Javascript per visualizzare se un numero è pari oppure dispari.
<!-- pari_dispari.html -->
<html>
<head>
<script type="text/javascript">
var 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
var numero=parseInt(str_numero); // La funzione parseInt converte il numero di tipo stringa in tipo intero
var soluzione;
if (numero%2==0){
soluzione="Il numero è pari";
} else {
soluzione="Il numero è dispari";
}
alert(soluzione); // Visualizza se il numero è pari oppure dispari
</script>
</head>
</html>
La struttura condizionale if - else, può gestire anche più condizioni di scelta contemporaneamente, in questo caso si usa la forma if - else if - else.
Esempio 2
Vogliamo creare un'applicazione per indicare ad un guidatore come deve comportarsi quando incontra un semaforo. In questo caso la struttura if - else non basta, perché le scelte sono più di due:
Il diagramma di flusso seguente mostra graficamente l'algoritmo che permette di gestire il semaforo:
Di seguito il programma semaforo.html con il codice Html/Javascript per indicare ad un guidatore come deve comportarsi quando incontra un semaforo.
<!-- semaforo.html -->
<html>
<head>
<script type="text/javascript">
var colore_semaforo = prompt("Di che colore è il semaforo?","verde, arancione, rosso"); // Prompt permette d'inserire un valore di tipo stringa, in questo caso lo usiamo per inserire il colore del semaforo
colore_semaforo=colore_semaforo.toLowerCase(); // Il metodo toLowerCase() converte il colore inserito in minuscolo, per evitare di controllare nelle condizioni il caso in cui il colore inserito sia maiuscolo
var soluzione;
if (colore_semaforo=="verde"){
soluzione="ATTRAVERSA";
} else if (colore_semaforo=="arancione") {
soluzione="ATTENZIONE";
} else if (colore_semaforo=="rosso") {
soluzione="ALT";
} else {
soluzione="Inserire uno dei colori seguenti: verde, arancione, rosso";
}
alert(soluzione); // Visualizza come deve comportarsi il guidatore
</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
- APP Mania
- Excel delle Meraviglie
- Ricominciamo ... dal Linguaggio SQL
- Come sviluppare un Sito con Wordpress
Impariamo a programmare con JavaScript - Lezione 2
Gino Visciano |
Skill Factory - 22/05/2016 16:07:07 | in Tutorials
Benvenuti alla seconda lezione, nella lezione precedente abbiamo introdotto i concetti di Programma ed Algoritmo ed avete creato il vostro primo programma con JavaScript, in questa lezione cercheremo di capire che cos'è un Linguggio di programmazione.
Un linguaggio di programmazione deve permettere al programmatore di svolgere le seguenti attività:
1) Memorizzare informazioni, sotto forma di variabili oppure array (vettori/matrici);
2) Acquisire (input) oppure visualizzare (output) informazioni;
3) Eseguire calcoli oppure concatenamenti;
4) Fare scelte in base a condizioni predefinite che possono essere vere (true) oppure false (false);
5) Ripetere blocchi d'istruzioni mentre una condizione risulta vera (true) oppure falsa (false);
6) Gestire errori di esecuzione per evitare d'interrompere i programmi in modo anomalo.
Tutti i linguaggi di programmazione permettono la gestione delle attività indicate attraverso l'uso delle istruzioni.
Il programma scritto dal programmatore utilizzando le istruzioni necessarie per implementare l'algoritmo richiesto si chiama sorgente.
Il programma sorgente per essere eseguito deve essere compilato oppure interpretato.
Si parla di compilazione quando il programma sorgente viene tradotto completamente in linguaggio macchina e per eseguirlo si lancia direttamente il programma tradotto.
Questo accade con programmi scritti con linguaggi di programmazione come Cobol, C e C++.
Si parla di interpretazione quando il programma sorgente , per essere eseguito, viene tradotto in linguaggio macchina ogni volta, quindi il programma tradotto non esiste.
Ad esempio i programmi scritti con il linguaggio JavaScript sono interpretati.
Linguaggi di programmazione come Java e C#, sono semi-interpretati, perchè il sorgente viene tradotto in uno pseudo linguaggio macchina, chiamato codice intermedio.
Il codice intermedio viene tradotto ogni volta dalla virtul machine in cui vengono fatti girare i programmi.
Il codice intermedio di Java si chiama Bytecode, quello di C# (C SHARP) si chiama Assembly.
La tabella seguente descrive in sintesi la storia dei principali linguaggi di programmazione:
LINGUAGGIO | ANNO DI RIFERIMENTO | TIPO LINGUAGGIO |
ASSEMBLER | 1940 | ASSEMBLATO |
FORTRAN | 1950 | COMPILATO |
COBOL | 1950 | COMPILATO |
ALGOL | 1960 | COMPILATO |
BASIC | 1960 | INTERPRETATO |
PASCAL | 1970 | COMPILATO |
C | 1970 | COMPILATO |
C++ | 1980 | COMPILATO |
JAVA | 1990 | SEMI-INTERPRETATO |
JAVASCRIPT | 1995 | INTERPRETATO |
C# | 2000 | SEMI-INTERPRETATO |
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
- APP Mania
- Excel delle Meraviglie
- Ricominciamo ... dal Linguaggio SQL
- Come sviluppare un Sito con Wordpress
Impariamo a programmare con JavaScript - Lezione 1
Gino Visciano |
Skill Factory - 21/05/2016 13:26:20 | in Tutorials
Benvenuti alla prima lezione, per cominciare partiamo subito dalle cose semplici e diamo la definizione di Programma: un prograrmma è un insieme d'istruzioni organizzate logicamente, con l'obiettivo di risolvere un problema. I computer usano i programmi per svolgere qualunque tipo di attività.
Un Programma può anche essere definito un Algoritmo, perché attraverso le sue istruzione permette la soluzione di un determinato problema.
La figura seguente mostra, attraverso un Diagramma di flusso, l'Algoritmo per calcolare la potenza di un numero intero.
Nelle prossime lezioni, trasformerete questo Algoritmo in un vero Programma.
Per scrivere un programma serve un Linguaggio di Programmazione, noi usermo JavaScript, perché è semplice, molto diffuso, potente ed in futuro permette di apprendre più facilmente altri linguaggi di programmazione, tipo PHP, Java e C#.
Per scrivere ed eseguire un programma con JavaScript è sufficiente il Blocco note ed un Browser qualunque, ad esempio Chrome, Mozilla oppure Internet Explorer, perché i programmi JavaScript girano all'inteno di pagine html.
Se non conoscete il linguaggio HTML, vi suggerisco di leggere le prime lezioni del Tutorial "Come sviluppare un Sito in Wordpress".
L'esempio seguente, esercizio_01.html, mostra la struttura di un programma JavaScript:
<html>
<head>
<script type="text/javascript">
document.write("Questa è un'istruzione JavaScript");
</script>
</head>
</html>
I TAG <html> e </html> indicano l'inizio e la fine della pagina html, i TAG <script> e </script> indicano l'inizio e la fine del programma JavaScript.
Questo programma visualizza nella pagina del Browser scelto il messaggio: Questa è un'istruzione JavaScript
Per eseguire il programma, posizionatevi nella cartella dov'è stato salvato il programma, selezionate il file esercizio_01.html, premere il pulsante destro del mouse, scegliere la voce Apri con e scegliete uno tra i browser proposti, ad esempio Chrome, come mostra l'immagine seguente.
Se volete commentare il vosto programma, potete usare le tecniche seguenti:
// Commento scritto su una sola riga
oppure
/*
Commento scritto
su più righe
*/
Ad esempio:
<html>
<head>
<script type="text/javascript">
/*
Questo è un esempio di programma
scritto in con JavaScript
*/
document.write("Questa è un'istruzione JavaScript");
// Fine programma
</script>
</head>
</html>
------ OUTPUT -------
Questa è un'istruzione JavaScript
Arrivederci alla prossima lezione!!!
T U T O R I A L S S U G G E R I T I
- APP Mania
- Excel delle Meraviglie
- Ricominciamo ... dal Linguaggio SQL
- Come sviluppare un Sito con Wordpress