Javascript: il browser

Transcript

1 Javascript: il browser Un browser è un programma Un browser interpreta il linguaggio HTML e visualizza le pagine sullo schermo Per la visualizzazione delle pagine un browser si appoggia al software di base Il software di base si appoggia alla macchina fisica per realizzare effettivamente il rendering della pagina su video 1

2 Javascript: il browser noi vedremo solo il core-language di Javascript per imparare i principi della programmazione in JavaScript è possibile programmare in maniera più semplici quelle che sono le funzionalità offerte da un browser e quindi il controllo del rendering di documenti HTML approfondirete questi aspetti, il modello ad eventi ed il DOM di Javascript nel corso di IUM 2

3 Interpretazione di Javascript JavaScript è interpretato ed il suo interprete è il browser (es. Netscape, Internet Explorer, Opera) Non tutti i browser sanno interpretare JavaScript e non tutti lo sanno fare nella stessa maniera sebbene il linguaggio JavaScript sia uno (standard) Ogni comando è immediatamente tradotto in un insieme di comandi che il browser può eseguire grazie l ausilio del software di base della macchina 3

4 Programmi Javascript I programmi JavaScript (gli script) possono essere inclusi ( embedded ) in una pagina HTML Gli script in JavaScript vengono scaricati insieme ad una pagina HTML e quindi interpretati dal browser del client Rete Internet Pagina HTML + programma JavaScript visualizzazione ed esecuzione (interpretazione) del programma JavaScript 4

5 Struttura di una pagina HTML + Javascript <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> Il codice JavaScript è incluso in una pagina HTML mediante il tag SCRIPT È buona norma includere il codice JavaScript all interno di un tag di commento HTML per visualizzare la pagina HTML correttamente anche dai browser che non supportano JavaScript (ovviamente non potranno fare uso delle funzionalità dello script!) 5

6 Specifica di inizio e di fine Ogni algoritmo deve avere un inizio ed una fine start end start end 6

7 Identificatori <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> JavaScript è case-sensitive, cioè MCD e mcd sono due identificatori diversi Ogni istruzione termina con un punto e virgola ; Gli spazi, le tabulazioni e gli a capo sono ignorati dall interprete (quindi usarli senza timore per rendere il programma più leggibile possibile) Le stringhe di caratteri sono sono rappresentate con la notazione 7

8 Commenti <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> È possibile inserire dei commenti su di una singola linea facendo precedere la linea di commento con il simbolo // Commenti su più linee possono essere introdotti racchiudendoli tra I simboli /* e */ 8

9 Convenzioni nomi variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> L identificatore assegnato ad una variabile non deve mai coincidere con quello di una parola chiave (o riservata) Se un identificatore è ottenuto per composizione da più parole non si devono lasciare spazi tra queste, si può rimpiazzarli con il simbolo _ o unendo le parole e scrivendo in maiuscolo la prima lettera, ad esempio lunghezza_sequenza lunghezzasequenza 9

10 Dichiarazione di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 10

11 Tipi di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> Numeri Stringhe Booleani Array Oggetti Le variabili in JavaScript non hanno però alcun tipo associato dichiarazione: var x = 10; x = pippo ; alla 11

12 Specifica delle azioni Ogni algoritmo specifica azioni che l esecutore deve compiere del tipo descritto in precedenza Z := X + 1 Z := X

13 Assegnamento a variabili ed operatori = indica l assegnamento Operatori aritmetici: + (somma), - (sottrazione), * (prodotto), / (divisione non intera), % (resto della divisione). per comodità, la somma di un valore ad una variabile e l assegnamento del totale alla variabile stessa si può indicare con += analogamente si possono utilizzare -=, *=, /=, %= ed altri ancora a = a + 4; a += 4; 13

14 Assegnamento a variabili ed operatori Operatori di incremento (in posizione di prefisso o di suffisso di una variabile numerica): ++ e -- (es. i++; a=--i;) Operatori relazionali e booleani: ==,!=, <, >, <=, >=, &&,,! Operatori sui bit: &,, ^, ~, >>, << Parentesi: ( ) a = a + 1; a++; 14

15 Specifica delle condizioni logiche vero azioni caso vero azioni condizione logica azioni seguenti comuni falso azioni caso falso azioni if (condizione logica) then azioni caso vero else azioni caso falso end if azioni seguenti comuni 15

16 Blocchi condizionali Istruzione if then else azioni comuni if (condizione logica) { azioni caso vero } else { azioni caso falso } azioni comuni seguenti al posto di un blocco di istruzione è possibile anche avere una sola istruzione queste vanno sempre terminate da un punto e virgola, anche tra l if e l else 16

17 Specifica delle condizioni logiche vero azioni caso vero azioni condizione logica falso azioni if (condizione logica) then azioni caso vero end if azioni seguenti comuni azioni seguenti comuni 17

18 Blocchi condizionali Istruzione if then if (condizione logica) { azioni caso vero } azioni seguenti comuni al posto di un blocco di istruzione è possibile anche avere una sola istruzione queste vanno sempre terminate da un punto e virgola 18

19 Strutture di controllo: iterazione azioni da ripetere vero azioni condizione logica falso azioni while (condizione logica) azioni da ripetere end while azioni seguenti azioni seguenti 19

20 Iterazioni while Istruzione while while (condizione logica) { azioni da ripetere } Se il blocco di istruzioni contengono una sola istruzione le parentesi graffe non sono necessarie (ma voi usatele comunque!) Come al solito le istruzioni vanno sempre terminate con un punto e virgola 20

21 Input ed output di dati Ogni algoritmo parte da dati in ingresso per produrre dati in uscita (problema computazionale) readx read X write Z write Z 21

22 Controllo dell input e dell output v = window.prompt( Inserisci il valore ); restituisce nella variabile v la stringa inserita nel campo window.alert( Stai per uscire! ); non restituisce nulla c = window.confirm( Confermi di voler uscire? ); restituisce in c true o false 22

23 Input ed output: tipi di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> Le funzioni per la gestione dell input restituiscono sempre stringhe di caratteri Per questo, per ottenere un numero ho moltiplicato per 1 (javascript converte automaticamente) Le variabili numeriche sono sempre rappresentate come numeri reali Se Z valesse 7 ed io effettuassi Z/2 otterrei 3.5 L operatore + sulle stringhe indica la concatenazione 23

24 Esempio: somma di due numeri Scrivere l algoritmo che esegue la somma di due numeri start read X read Y Z := X + Y start end read X read Y Z := X + Y write Z write Z end 24

25 Esempio: somma di due numeri Scrivere l algoritmo che esegue la somma di due numeri <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 25

26 Esempio: massimo tra due numeri Dati due numeri, dire qual è il massimo tra i due. vero max := X start read X read Y falso X > Y max := Y write max end start read X read Y if (X > Y) then max := X else max := Y end if write max end 26

27 Esempio: massimo tra due numeri <HTML> <HEAD> <TITLE>ESEMPIO: massimo tra due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 27

28 Esercizio: massimo di una sequenza start max := -1 start max := -1 read numero read numero vero numero >0 vero numero > max falso max := numero falso write max end while (numero > 0) if (numero > max) then max := numero end if read numero end while write max read numero end 28

29 Esercizio: massimo di una sequenza <HTML> <HEAD> <TITLE>ESEMPIO: massimo tra due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 29

30 Esercizio: massimo di una sequenza falso start max := -1 read numero vero numero > max numero <> 0 numero < 0 vero falso max := numero read numero falso vero write max end write "solo positivi!!" start end max := -1 read numero while (numero <> 0) if (numero < 0) then write solo positivi!! else if (numero > max) then max := numero end if end if read numero end while write max 30

31 Esercizio: massimo di una sequenza <HTML> <HEAD> <TITLE>ESEMPIO: massimo di una sequenza</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 31

32 Esercizio: moltiplicazione start P := 0 start P := 0 read A,B read A,B vero A <> 0 falso write P while (A <> 0) if (A è dispari) then vero P := P + B A è dispari falso end P := P + B end if A := A / 2 B := B * 2 A := A / 2 end while B := B * 2 end write P 32

33 Esercizio: moltiplicazione <HTML> <HEAD> <TITLE>ESEMPIO: moltiplicazione</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 33

34 Esercizio: moltiplicazione <HTML> <HEAD> <TITLE>ESEMPIO: moltiplicazione</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> 34