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
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
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
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
Struttura di una pagina HTML + Javascript <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; window.alert("somma = " + Z); // Fine 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!)
Specifica di inizio e di fine Ogni algoritmo deve avere un inizio ed una fine
Identificatori <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; window.alert("somma = " + Z); // Fine 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
Commenti <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; window.alert("somma = " + Z); // Fine 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 */
Convenzioni nomi variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; window.alert("somma = " + Z); // Fine 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
Dichiarazione di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; Per utilizzare una variabile è necessario dichiararla La dichiarazione di una variabile viene effettuata tramite la parola chiave var È possibile combinare una dichiarazione con una inizializzazione window.alert("somma = " + Z); // Fine script --> </SCRIPT> </BODY> </HTML>
Tipi di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; window.alert("somma = " + Z); // Fine 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
Specifica delle azioni Ogni algoritmo specifica azioni che l esecutore deve compiere del tipo descritto in precedenza Z := X + 1 Z := X + 1
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;
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++;
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
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
Specifica delle condizioni logiche azioni caso azioni condizione logica azioni if (condizione logica) then azioni caso if azioni seguenti comuni azioni seguenti comuni
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
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
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
Input ed output: tipi di variabili <HTML> <HEAD> <TITLE>ESEMPIO: somma di due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript /* Dichiarazione variabili per termini e somma */ var X; var Y; var Z = 0; // Leggo il valore del primo termine X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; /* In questa istruzione calcolo il risultato */ Z = X + Y; window.alert("somma = " + Z); // Fine 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
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
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> <!-- Inizio script JavaScript var X; var Y; var Z; X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; Z = X + Y; window.alert("somma = " + Z); // Fine script --> </SCRIPT> </BODY> </HTML>
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
Esempio: massimo tra due numeri <HTML> <HEAD> <TITLE>ESEMPIO: massimo tra due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var X; var Y; var max; X = window.prompt("inserisci il primo numero"); Y = window.prompt("inserisci il secondo numero"); X = X*1; Y=Y*1; if (X>Y) max = X; else max = Y; window.alert("massimo = " + max); // Fine script --> </SCRIPT> </BODY> </HTML>
Strutture di controllo: iterazione azioni da ripetere azioni condizione logica azioni while (condizione logica) azioni da ripetere while azioni seguenti azioni seguenti
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
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
Esercizio: massimo di una sequenza <HTML> <HEAD> <TITLE>ESEMPIO: massimo tra due numeri</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var numero; var max; max = -1; numero = window.prompt("inserisci un numero"); numero = numero * 1; while (numero > 0) if (numero > max) max = numero; numero = window.prompt("inserisci un numero"); numero = numero * 1; window.alert("massimo = " + max); // Fine script --> </SCRIPT> </BODY> </HTML>
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
Esercizio: massimo di una sequenza <HTML> <HEAD> <TITLE>ESEMPIO: massimo di una sequenza</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var numero; var max; max = -1; numero = window.prompt("inserisci un numero"); numero = numero * 1; while (numero!= 0) if (numero < 0) window.alert("solo numeri positivi!"); else if (numero > max) max = numero; numero = window.prompt("inserisci un numero"); numero = numero * 1; window.alert("massimo = " + max); // Fine script --> </SCRIPT> </BODY> </HTML>
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
Esercizio: moltiplicazione <HTML> <HEAD> <TITLE>ESEMPIO: moltiplicazione</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var P; var A; var B; A = window.prompt("inserisci il primo fattore"); A = A * 1; B = window.prompt("inserisci il secondo fattore"); B = B * 1; while (A!= 0) if (A%2 == 1) P = P + B; A = A / 2; B = B * 2; window.alert("prodotto = " + P); // Fine script --> </SCRIPT> </BODY> </HTML>
Esercizio: moltiplicazione <HTML> <HEAD> <TITLE>ESEMPIO: moltiplicazione</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var P; var A; var B; P = 0; A = window.prompt("inserisci il primo fattore"); A = A * 1; B = window.prompt("inserisci il secondo fattore"); B = B * 1; while (A!= 0) if (A%2 == 1) P = P + B; A = Math.floor(A / 2); B = B * 2; window.alert("prodotto = " + P); // Fine script --> </SCRIPT> </BODY> </HTML>
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
Esercizio: dispari-pari <HTML> <HEAD> <TITLE>ESEMPIO: pari o dispari</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var N; N = window.prompt("inserisci il numero"); N = N * 1; while (N > 1) N = N - 2; if (N==0) window.alert("il numero è pari"); else window.alert("il numero è dispari"); // Fine script --> </SCRIPT> </BODY> </HTML>
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
Esercizio: dispari-pari (controllo input) <HTML> <HEAD> <TITLE>ESEMPIO: pari o dispari</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var N; N = window.prompt("inserisci il numero"); N = N * 1; if (N < 0) N = -N; while (N > 1) N = N - 2; if (N==0) window.alert("il numero è pari"); else window.alert("il numero è dispari"); // Fine script --> </SCRIPT> </BODY> </HTML>
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
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);
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
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);
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
Esercizio: elevamento a potenza <HTML> <HEAD> <TITLE>ESEMPIO: elevamento a potenza</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript 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; while (E > 0) potenza = potenza * B; E = E - 1; window.alert("risultato = " + potenza); // Fine script --> </SCRIPT> </BODY> </HTML>
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
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!");
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
Esercizio: fattoriale <HTML> <HEAD> <TITLE>ESEMPIO: fattoriale</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var fattoriale; var N; fattoriale = 1; N = window.prompt("inserisci il numero"); N = N * 1; while (N > 0) fattoriale = fattoriale * N; N = N - 1; window.alert("risultato = " + fattoriale); // Fine script --> </SCRIPT> </BODY> </HTML>
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
Esercizio: fattoriale (controllo input) <HTML> <HEAD> <TITLE>ESEMPIO: fattoriale</title> </HEAD> <BODY> <SCRIPT> <!-- Inizio script JavaScript var fattoriale; var N; N = window.prompt("inserisci il numero"); N = N * 1; if (N >= 0) fattoriale = 1; while (N > 0) fattoriale = fattoriale * N; N = N - 1; window.alert("risultato = " + fattoriale); else window.alert("numero negativo!"); // Fine script --> </SCRIPT> </BODY> </HTML>