Your SlideShare is downloading. ×
0
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Programmare con javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Programmare con javascript

626

Published on

Introduzione alla programmazione usando Javascript

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
626
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduzione alla programmazione usando Javascript Marco Ronchetti
  • 2. Introduzione • Cos’è la programmazione? • Linguaggi • Compilazione o interpretazione? • Programmazione per la gestione di sistemi
  • 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. Come eseguire • • • • Usa un editor per scrivere il testo Salvalo come a.html Apri un browser File… Apri… scegli a.html
  • 5. Lo scheletro per i nostri programmi <!DOCTYPE html> <html> <head> </head> <body> <script> <!– qui metteremo il nostro codice --> </script> </body> </html>
  • 6. Stampiamo qualcosa… <!DOCTYPE html> <html> Stringhe tra virgolette <head> </head> <body> <script> document.write("hello"); </script> </body> </html>
  • 7. Un altro modo di stampare <!DOCTYPE html> <html> <head> </head> <body> <script> document.write("hello"); </script> </body> </html>
  • 8. Un diverso modo di stampare <!DOCTYPE html> <html> <head> </head> <body> <script> alert("hello"); </script> </body> </html>
  • 9. Variabili <!DOCTYPE html> <html> <head> </head> <body> <script> a=1; document.write(a); </script> </body> </html>
  • 10. Cosa cambia? <!DOCTYPE html> <html> <head> </head> <body> <script> a=1; document.write(“a”); document.write(a); </script> </body> </html>
  • 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. 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. Leggere i valori da un cassetto a=1; document.write(a); b=a; document.write(b);
  • 14. Andare a capo a=1; document.write(a); document.write("<BR>"); b=a; document.write(b);
  • 15. Commenti a=1; //document.write(a); document.write("<BR>"); b=a; document.write(b);
  • 16. Commenti a=1; /* document.write(a); document.write("<BR>"); b=a; */ document.write(b);
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Operatori di comparazione http://www.w3schools.com/js/js_comparisons.a sp
  • 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. 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. 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. Chiedere un input all’utente var myName = prompt("Come ti chiami?", "Scrivi qui il tuo nome"); document.write(myName);
  • 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. Argomenti avanzati
  • 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. Altre operazioni con le stringhe http://www.w3schools.com/js/js_obj_string.asp
  • 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. Loops http://www.w3schools.com/js/js_loop_for.asp
  • 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. 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. 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. Un esempio complesso • http://www.w3schools.com/js/tryit.asp?filena me=tryjs_timing_stop
  • 41. Quiz ! http://www.w3schools.com/quiztest/quiztest.as p?qtest=JavaScript

×