Progettazione e Programmazione Web

RICORSIONE FATTORIALE (n!)

n! è il prodotto di tutti i numeri che precedono n, n compreso

es. 5! = 5 × 4 × 3 × 2 × 1

1! = 1

0! = 1

Function FattorialeR(u)

IF ((u == 0) || (u == 1)) {

return 1;

} else {

return u × FattorialeR(u - 1);

}

Un numero negativo la F non è definita

SUCCESSIONE DI FIBONACCI

0 1 1 2 3 5 8 13 21 34

Ogni numero è la somma dei due numeri precedenti

Calcolare l'n-esimo numero di Fibonacci

fib(0) = 0

fib(1) = 1

fib(u) = fib(u - 2) + fib(u - 1)

function fib(u) {

if ((u == 0) || (u == 1)) {

return u;

} else {

return fib(u - 2) + fib(u - 1);

}

}

Data una funzione ricorsiva è possibile definire una funzione iterativa, anche se ci sono alcuni casi in cui non è possibile.

RICORSIVA -> ITERATIVA

Questo vale per il fattoriale e il fibonacci

FUNZIONE ARITMETICA DI PEANO

ADDIZIONE E MOLTIPLICAZIONE

x + 0 = x

x + y = x + y - 1 + 1 = (x + (y - 1)) + 1

x . 0 = 0

x . y = x . (y - 1 + 1) = x (y - 1) + x

funct. addizione(x,y) {

if(y == 0) {

return x;

} else {

return addizione(x, y - 1) + 1;

}

}

SOTTRAZIONE

x - 0 = x

x - y = x - y - 1 + 1 = (x - 1) - (y - 1) se x ≥ y

DIVISIONE

x < 0 = false

0 ≤ y = true se y != 0

x ≥ 0 = x < y - 1 se x > 0 e y > 0

x = 0 se x < y

x - y = x/y + y = x - y + 1 se x ≥ y

operator = 0 se y = 0

GLI ALBERI

Array - strutture lineari

radice

nodo - hanno almeno un figlio

foglia - elemento dell'albero che non ha figli

ALBERO BINARIO per ogni elemento possono esistere due successivi

Albero con un unico elemento che è sia radice che foglia

Visita - Visitare un albero, scandurlo: parto dalla radice e guardo prima il nodo sinistro e poi il nodo destro.

• R S D - anticipata
• S R D - simmetrica bisogna sempre mantenere la sinistra
• S D R - differita

Frontiera dell'albero

per sapere la sola successione delle foglie. Tutte le foglie a partire da sinistra verso destra negli ordini in cui compaiono

Un solo nodo ha altezza Zero

Sono tutte soluzioni ricorsive.

Alberi n-ari

ci può essere un numero qualsiasi di figli

caso generale

vi ho un valore e un array che contiene tutti i suoi figli

function AlberoNArio(v) {

this.valore = v;

this.figli = [];

this.aggiungi =

function(u) {

this.figli.push(u);

}

this.altezza =

function() {

var max = 0;

for (var i = 0; i < this.figli.length; i++) {

var af = this.figli[i].altezza();

if (af > max) {

max = af;

}

}

return max + 1;

}

if (this.figli.length == 0) {

return 0;

}

Se la pagina non ha un'interazione con l'utente si dice che è statica ovvero non vi è un file JS collegato

Evento click - Un solo nodo è interessato ad esso

On-click - Gestore dell'evento

alfa onclick=" " → codice JS

foo();

In un documento html non esiste nemmeno una riga di JS, ma al momento lo usiamo perché più semplice.

<script...>

usare solamente se è richiesto che l'html abbia tutto all'interno

</script>

09. Aprile 2013

DOM - Document Object Model

È un modello, una costruzione astratta che ci dice qualcosa di complessivo. Ha una coerenza interna e spiega molte cose.

È un modello a oggetti. Ci dice come è costruito l'albero.

Una pagina web è un documento, ovvero qualcosa che viene visualizzato sullo schermo col browser e comprende figure, immagini, elementi interattivi.

Interfaccia programmatica

W3C - consorzio internazionale di internet. Gestisce gli standard e li tiene aggiornati

Il DOM è assolutamente pubblico

document = oggetto predefinito (questo significa che non va definito)

La creazione del nodo avviene all'interno del documento

var u = document.createElement(); equivale al new dell'albero binario

var u = document.nodeTextElement();

Metodi per aggiungere questi nuovi nodi agli alberi esistenti:

• appendChild
• insertBefore

u1.appendChild(u); ultimo figlio equivalente a x.push(u);

u2.insertBefore(u); fratello precedente

(u2.insertAfter(u);) FORSE esiste

Per rimuovere:

• u.removeChild(u1)
• u.parentNode.removeChild(u) il nodo si cancella con sé tutti figli

Un artificio molto potente proprietà dei nodi è innerHTML.

Se ho un nodo e assegno alla proprietà una certa stringa come figlio di quel nodo viene applicata la stringa dell'albero che ho scritto

u.innerHTML = " "; stringa in formato HTML

[Diagrammi con frecce e figure]

var c;

function inizializza() {

• var nodo = document.getElementById("imposta");
• nodo.onclick = gestoreImposta;
• nodo = document.getElementById("conver");
• nodo.onclick = gestoreConverti;
• c = new Convertitore();

}

function convertire() {

• this.imposta;
• this.converti;

}

function gestoreImposta() {

• var nodo = document.getElementById("valuta");
• var valuta = nodo.value;
• nodo = document.getElementById("fattore");
• var fattore = eval(nodo.value);
• c.imposta(valuta, fattore);

}

Lavorare solo sull'albero senza creare oggetti.

dispensa

<html>

<head>

<script type="text/javascript" src="Ricettario.js">

</script>

</head>

<body>

<br>

Funct caricaXML(nomeFile) {...}

window.onload=inizializza;

function inizializza() {

var nodo=caricaXML("Ricettario.xml");

var l=nodo.getElementsByTagName("ricetta");

var lista=document.getElementById("lista");

lista.innerHTML=crea(l);

}

function crea(l) {

var s="";

for (var i=0; i<l.length; i++) {

var ln=[i].getElementByTagName("nome");

var n=ln[0].firstChild.nodeValue;

var ld=[i].getElementByTagName("difficolta");

var d=ld[0].firstChild.nodeValue;

var lp=[i].getElementByTagName("preparazione");

var p=lp[0].firstChild.nodeValue;

Punti di interazione

• pulsanti
• link
• parti speciali (es. clicco su un titolo e si apre l'articolo)

oggetto gestore eventi JS

calcolo

read-only

elemento interattivo

D I A L O G O

conversazione tra l'utente e il programmatore

L'uso degli id è importante perché dà un nome agli elementi interattivi.

Il calcolo del risultato "comprende" gli oggetti.

L'alert è invasivo.

I risultati possano essere visualizzati in zone di testo o di input. È buona norma dichiararle di sola lettura (readonly) e dare un colore di sfondo leggermente diverso.

questi id sono scritti nel documento HTML

document.getElementById(" ")

innerHTML