Programmare con javascript

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");


Un diverso modo di stampare

<!DOCTYPE html><html> <head> </head> <body> <script> alert("hello");


Variabili

<!DOCTYPE html><html> <head> </head> <body> <script> a=1; document.write(a);


Cosa cambia?<!DOCTYPE html><html> <head> </head> <body> <script> a=1; document.write(“a”); document.write(a);


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");


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");


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

Education

Programmare con javascript