Programmare con javascript

1,014 views

Published on

Introduzione alla programmazione usando Javascript

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,014
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Programmare con javascript

  1. 1. Introduzione alla programmazione usando Javascript Marco Ronchetti
  2. 2. Introduzione • Cos’è la programmazione? • Linguaggi • Compilazione o interpretazione? • Programmazione per la gestione di sistemi
  3. 3. 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>
  4. 4. Come eseguire • • • • Usa un editor per scrivere il testo Salvalo come a.html Apri un browser File… Apri… scegli a.html
  5. 5. Lo scheletro per i nostri programmi <!DOCTYPE html> <html> <head> </head> <body> <script> <!– qui metteremo il nostro codice --> </script> </body> </html>
  6. 6. Stampiamo qualcosa… <!DOCTYPE html> <html> Stringhe tra virgolette <head> </head> <body> <script> document.write("hello"); </script> </body> </html>
  7. 7. Un altro modo di stampare <!DOCTYPE html> <html> <head> </head> <body> <script> document.write("hello"); </script> </body> </html>
  8. 8. Un diverso modo di stampare <!DOCTYPE html> <html> <head> </head> <body> <script> alert("hello"); </script> </body> </html>
  9. 9. Variabili <!DOCTYPE html> <html> <head> </head> <body> <script> a=1; document.write(a); </script> </body> </html>
  10. 10. Cosa cambia? <!DOCTYPE html> <html> <head> </head> <body> <script> a=1; document.write(“a”); document.write(a); </script> </body> </html>
  11. 11. 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
  12. 12. Operatore = • Non significa “è uguale” ma “assegna a”, oppure “scrivi in” o “metti in” a=1; significa “metti 1 nel cassetto chiamato a” A B C
  13. 13. Leggere i valori da un cassetto a=1; document.write(a); b=a; document.write(b);
  14. 14. Andare a capo a=1; document.write(a); document.write("<BR>"); b=a; document.write(b);
  15. 15. Commenti a=1; //document.write(a); document.write("<BR>"); b=a; document.write(b);
  16. 16. Commenti a=1; /* document.write(a); document.write("<BR>"); b=a; */ document.write(b);
  17. 17. 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>");
  18. 18. 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>");
  19. 19. 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>
  20. 20. 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>
  21. 21. Bottoni <!DOCTYPE html> <html> <head> <script> function myFunction() { document.write(”Hai cliccato il bottone!"); } </script> </head> <body> <button onclick="myFunction()">Cliccami</button> </body> </html>
  22. 22. 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>
  23. 23. 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);
  24. 24. 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>
  25. 25. 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>
  26. 26. Operatori di comparazione http://www.w3schools.com/js/js_comparisons.a sp
  27. 27. 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>
  28. 28. 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>
  29. 29. 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>
  30. 30. Chiedere un input all’utente var myName = prompt("Come ti chiami?", "Scrivi qui il tuo nome"); document.write(myName);
  31. 31. Esercizio - Chiedere un numero all’utente - Se il numero è maggiore di 4 dire “risposta non valida” - Altrimenti dire se il numero è pari o dispari.
  32. 32. Argomenti avanzati
  33. 33. 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>
  34. 34. Altre operazioni con le stringhe http://www.w3schools.com/js/js_obj_string.asp
  35. 35. Arrays var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; cars[0] cars[1] cars[2] Oppure var cars=new Array("Saab","Volvo","BMW"); oppure var cars=["Saab","Volvo","BMW"];
  36. 36. Loops http://www.w3schools.com/js/js_loop_for.asp
  37. 37. Due esempi complessi con le date http://www.w3schools.com/js/tryit.asp?filenam e=tryjs_timing_clock http://www.w3schools.com/jsref/tryit.asp?filen ame=tryjsref_date_weekday
  38. 38. Scrivere in una posizione della pagina <h1>La mia pagina web</h1> <p id="demo">Paragrafo 1</p> <div id="myDIV”>Div 1</div>
  39. 39. 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>
  40. 40. Un esempio complesso • http://www.w3schools.com/js/tryit.asp?filena me=tryjs_timing_stop
  41. 41. Quiz ! http://www.w3schools.com/quiztest/quiztest.as p?qtest=JavaScript

×