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 rering della pagina su video

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 rering di documenti HTML approfondirete questi aspetti, il modello ad eventi ed il DOM di Javascript nel corso di IUM

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

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

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!)

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

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 rere il programma più leggibile possibile) Le stringhe di caratteri sono sono rappresentate con la notazione

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 faco precedere la linea di commento con il simbolo // Commenti su più linee possono essere introdotti racchiudoli tra I simboli /* e */

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 uno le parole e scrivo in maiuscolo la prima lettera, ad esempio lunghezza_sequenza lunghezzasequenza

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

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

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

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;

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++;

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

16 Blocchi condizionali Istruzione if then else azioni comuni if (condizione logica) azioni caso else azioni caso 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

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

18 Blocchi condizionali Istruzione if then if (condizione logica) azioni caso 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

19 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

20 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

21 Input ed output: tipi di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML> un numero ho moltiplicato per 1 (javascript converte Le funzioni per la gestione dell input restituiscono sempre stringhe di caratteri Per questo, per ottenere 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

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

23 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>

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

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

26 Strutture di controllo: iterazione azioni da ripetere azioni condizione logica azioni while (condizione logica) azioni da ripetere while azioni seguenti azioni seguenti

27 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

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

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

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

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

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

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

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

35 Esercizio: dispari-pari Dato un numero, verificare se è pari o dispari e stampare il relativo messaggio N := N - 2 write "pari" read N N > 1 N = 0 write "dispari" read N while (N > 1) N := N 2 while if (N = 0) then else write pari write dispari if

36 Esercizio: dispari-pari <HTML> <HEAD> <TITLE>ESEMPIO: pari o dispari</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML>

37 Esercizio: dispari-pari (controllo input) Dato un numero stampare se è pari o dispari N := N - 2 read N N > 1 write "pari" N < 0 N := -N N = 0 write "dispari" read N if (N < 0) then N := -N if while (N > 1) N := N 2 while if (N = 0) then write pari else write dispari if

38 Esercizio: dispari-pari (controllo input) <HTML> <HEAD> <TITLE>ESEMPIO: pari o dispari</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML>

39 Esercizio: minimo di una sequenza di K numeri min := numero read numero K min := numero inseriti := 1 inseriti < K read numero numero < min inseriti := inseriti + 1 write min read K read numero min := numero inseriti := 1 while (inseriti < K) read numero if (numero < min) then min := numero if inseriti := inseriti + 1 while write min

40 Esercizio: minimo di una sequenza di K numeri var K; var numero; var min; var inseriti; K = window.prompt("inserisci la lunghezza della sequenza"); K = K * 1; numero = window.prompt("inserisci un numero"); numero = numero * 1; min = numero; inseriti = 1; while (inseriti < K) numero = window.prompt("inserisci un numero"); numero = numero * 1; if (numero < min) min = numero; inseriti = inseriti + 1; window.alert("minimo = " + min);

41 Esercizio: minimo di una sequenza di K numeri (controllo input) min := numero read numero K K <= 0 min := numero inseriti := 1 inseriti < K read numero numero < min inseriti := inseriti + 1 write "K deve essere positivo!" write min read K if ( K <= 0) then write K deve essere positivo! else read numero min := numero inseriti := 1 while (inseriti < K) read numero if (numero < min) then min := numero if inseriti := inseriti + 1 while write min if

42 Esercizio: minimo di una sequenza di K numeri (controllo input) var K; var numero; var min; var inseriti; K = window.prompt("inserisci la lunghezza della sequenza"); K = K * 1; if (K <= 0) window.alert("k deve essere positivo!"); else numero = window.prompt("inserisci un numero"); numero = numero * 1; min = numero; inseriti = 1; while (inseriti < K) numero = window.prompt("inserisci un numero"); numero = numero * 1; if (numero < min) min = numero; inseriti = inseriti + 1; window.alert("minimo = " + min);

43 Esercizio: elevamento a potenza Data la base e l esponente calcolare l elevamento a potenza potenza:= 1 read B,E E > 0 write potenza potenza:= potenza * B E := E -1 potenza := 1 read B,E while (E > 0) potenza := potenza * B E := E - 1 while write potenza

44 Esercizio: elevamento a potenza <HTML> <HEAD> <TITLE>ESEMPIO: elevamento a potenza</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML>

45 Esercizio: elevamento a potenza (controllo input) Data la base e l esponente calcolare l elevamento a potenza read B,E E >= 0 potenza := 1 E > 0 potenza:= potenza * B E := E -1 write"esponente negativo!" write potenza read B,E if (E >= 0) then potenza := 1 while (E > 0) potenza := potenza * B E := E - 1 while write potenza else write esponente negativo! if

46 Esercizio: elevamento a potenza (controllo input) var potenza; var B; var E; potenza = 1; B = window.prompt("inserisci la base"); B = B * 1; E = window.prompt("inserisci l'esponente"); E = E * 1; if (E >= 0) while (E > 0) potenza = potenza * B; E = E - 1; window.alert("risultato = " + potenza); else window.alert("esponente negativo!");

47 Esercizio: fattoriale Dato un numero calcolare il suo fattoriale fattoriale:= 1 read N N > 0 write fattoriale fattoriale:= fattoriale * N N:= N -1 fattoriale := 1 read N while (N > 0) fattoriale := fattoriale * N N := N - 1 while write fattoriale

48 Esercizio: fattoriale <HTML> <HEAD> <TITLE>ESEMPIO: fattoriale</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML>

49 Esercizio: fattoriale (controllo input) Dato un numero calcolare il suo fattoriale read N N >= 0 fattoriale:= 1 N > 0 fattoriale:= fattoriale * N N := N -1 write"numero negativo!" write fattoriale read N if (N >= 0) then fattoriale := 1 while (N > 0) fattoriale := fattoriale * N N := N - 1 while write fattoriale else write numero negativo! if

50 Esercizio: fattoriale (controllo input) <HTML> <HEAD> <TITLE>ESEMPIO: fattoriale</title> </HEAD> <BODY> <SCRIPT>  </SCRIPT> </BODY> </HTML>