programmare con javascript
Post on 18-Dec-2014
549 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduzione alla programmazione usando Javascript
Marco Ronchetti
Introduzione
• Cos’è la programmazione?• Linguaggi
• Compilazione o interpretazione?
• Programmazione per la gestione di sistemi
Il nostro ambiente: pagine HTML
<!DOCTYPE html><html> <head>
<title>Pagina di prova</title> </head> <body>
Oggi è giovedì <BR> <B>Buon giorno! </B>
</body></html>
Come eseguire
• Usa un editor per scrivere il testo• Salvalo come a.html• Apri un browser• File… Apri… scegli a.html
Lo scheletro per i nostri programmi
<!DOCTYPE html><html> <head> </head> <body> <script> <!– qui metteremo il nostro codice --> </script> </body></html>
Stampiamo qualcosa…
<!DOCTYPE html><html> <head> </head> <body> <script> document.write("hello");
</script> </body></html>
Stringhe tra virgolette
Un altro modo di stampare
<!DOCTYPE html><html> <head> </head> <body> <script> document.write("hello");
</script> </body></html>
Un diverso modo di stampare
<!DOCTYPE html><html> <head> </head> <body> <script> alert("hello");
</script> </body></html>
Variabili
<!DOCTYPE html><html> <head> </head> <body> <script> a=1; document.write(a);
</script> </body></html>
Cosa cambia?<!DOCTYPE html><html> <head> </head> <body> <script> a=1; document.write(“a”); document.write(a);
</script> </body></html>
I comandi
• Le righe di comando devono terminare con un ;
Es.: a=1;
• Il sistema però accetta che si ometta il ; e si vada a capo
• Es.: a=1
Operatore =
• Non significa “è uguale” ma “assegna a”, oppure “scrivi in” o “metti in”
a=1; significa “metti 1 nel cassetto chiamato a”
C
B
A
Leggere i valori da un cassetto
a=1;document.write(a);b=a;document.write(b);
Andare a capo
a=1;document.write(a);document.write("<BR>");b=a;document.write(b);
Commenti
a=1;//document.write(a);document.write("<BR>");b=a;document.write(b);
Commenti
a=1;/* document.write(a);document.write("<BR>");b=a; */document.write(b);
Operazioni
a=1;b=2;document.write(a+b);document.write("<BR>");document.write(a-b);document.write("<BR>");document.write(a*b);document.write("<BR>");document.write(a/b);document.write("<BR>");
Operazioni con le stringhe
a="pippo";b=2;document.write(a+b);document.write("<BR>");document.write(a-b);document.write("<BR>");document.write(a*b);document.write("<BR>");document.write(a/b);document.write("<BR>");
Stufi di scrivere document.write?<!DOCTYPE html><html> <head> <script>
function stampa(s) {document.write(s);} </script> </head> <body> <script> stampa("hello");
</script> </body></html>
Stampa e vai a capo<!DOCTYPE html><html> <head> <script>
function stampaVC(s) {document.write(s);document.write(“<BR”);}
</script> </head> <body> <script> stampaVC("hello");
</script> </body></html>
Bottoni <!DOCTYPE html><html><head><script>function myFunction(){ document.write(”Hai cliccato il bottone!");}</script></head><body>
<button onclick="myFunction()">Cliccami</button>
</body></html>
Bottoni (alternativa)<!DOCTYPE html><html><head><script>function myFunction(){ document.write(”Hai cliccato il bottone!");}</script></head><body>
<input type="button" onclick="myFunction()" value="Cliccami" />
</body></html>
Usare le date
var d=new Date();document.write(d);
var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();Document.write(h+":"+m+":”+s);
Condizioni<head><script>function myFunction() { var x="Good night"; var time=new Date().getHours(); if (time<20) { x="Good day"; } document.write(x);}</script></head><body>Clicca sul bottone: dirà "Good day" se l’ora è meno delle 20:00.</p><button onclick="myFunction()">Try it</button></body>
Condizioni if -else<head><script>function myFunction() { var x=""; var time=new Date().getHours(); if (time<20) { x="Good day"; } else { x="Good night"; } document.write(x);}</script></head><body>Clicca sul bottone: dirà "Good day" se l’ora è meno delle 20:00.</p><button onclick="myFunction()">Try it</button></body>
Operatori di comparazione
http://www.w3schools.com/js/js_comparisons.asp
Condizioni – if – else<head><script>function myFunction() { var x="Good day"; var time=new Date().getHours(); if (time>21) { x="Good night"; } else if (time<21) { x="Good evening"; document.write(x);}</script></head><body>Clicca sul bottone: dirà "Good day" se l’ora è meno delle 20:00.<button onclick="myFunction()">Try it</button></body>
Condizioni – if – else if <head><script>function myFunction() { var x="Good night"; var time=new Date().getHours(); if (time<18) { x="Good day"; } else if (time<21) { x="Good evening"; document.write(x);}</script></head><body>Clicca sul bottone: dirà "Good day" se l’ora è meno delle 20:00.</p><button onclick="myFunction()">Try it</button></body>
Box di conferma<head><script>function myFunction() { var x; var r=confirm(”Premi un bottone!"); if (r==true) { x=”Hai premuto OK!"; } else {
x=”Hai premutoCancel!"; } document.write(x);}</script></head><body>Schiaccia il bottone per mostrare un box di conferma.<button onclick="myFunction()">Try it</button></body></html>
Chiedere un input all’utente
var myName = prompt("Come ti chiami?", "Scrivi qui il tuo nome");
document.write(myName);
Esercizio
- Chiedere un numero all’utente- Se il numero è maggiore di 4 dire “risposta
non valida”- Altrimenti dire se il numero è pari o dispari.
Argomenti avanzati
Definire una funzione<!DOCTYPE html><html> <head> <script>
function somma(a,b) {return a+b;
} </script> </head> <body> <script>
k=2; c=somma(3,2);
document.write(c); </script>
</body></html>
Altre operazioni con le stringhe
http://www.w3schools.com/js/js_obj_string.asp
Arrays
var cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";
Oppurevar cars=new Array("Saab","Volvo","BMW");
oppurevar cars=["Saab","Volvo","BMW"];
cars[0]
cars[1]
cars[2]
Loops
http://www.w3schools.com/js/js_loop_for.asp
Due esempi complessi con le date
http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date_weekday
Scrivere in una posizione della pagina
<h1>La mia pagina web</h1>
<p id="demo">Paragrafo 1</p>
<div id="myDIV”>Div 1</div>
Scrivere in una posizione della pagina
<h1>La mia pagina web</h1>
<p id="demo">Paragrafo 1</p>
<div id="myDIV”>Div 1</div>
<script>document.getElementById("demo").innerHTML="Hello Dolly";document.getElementById("myDIV").innerHTML="How are you?";</script>
Un esempio complesso
• http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_stop
Quiz !
http://www.w3schools.com/quiztest/quiztest.asp?qtest=JavaScript
top related