Brescianet.com. 3F - 2 MODULO 3F - 2 MODULO da e /12/2016: 3F - 2 MODULO

(1)

Pagina 1 di 1

Brescianet.com

Sito di supporto alla didattica

http://lnx.brescianet.com/ScuolaForum2016/

3F - 2 MODULO

http://lnx.brescianet.com/ScuolaForum2016/viewtopic.php?f=4&t=16

3F - 2 MODULO

da e01692

Appunti estemporanei

12/12/2016: 3F - 2 MODULO

da e01692

le coordinate delle img sono 0,0 (alto a sinistra) , M-1,N-1 in basso a destra (dove M larghezza img e N altezza)

<html>

<body>

<!area shape=default href=white.htm>

</map>

</body>

</html>

non funziona in IE

alternativa

Eser 2.1 per sabato su di dispositivo cartaceo 3O - 3/12/2016

Triangle come shape non esiste!!!!

Gli oggetti in foreground(davanti) vanno definiti per primi (il browser registra le ultime

coordinate!). Quindi lo sfondo va messo come shape=default e per IE shape=rect coords="0,0,M,N"

17/12/2016 - 3F - 2 MODULO

da e01692

Triangle come shape non esiste!!!!

Gli oggetti in foreground(davanti) vanno definiti per ultimi (il browser registra le ultime coordinate!)

3T 13/12/2016

I frame consentono la suddivisione di una pagina WEB in sottofinestre. Ogni sottofinestra

Inviato: 12/12/2016, 9:58

Inviato: 12/12/2016, 9:59

Inviato: 17/12/2016, 12:01

(2)

può contenere un documento.

svantaggi dei frame

1) non sono adatti alle risposte dei motori di ricerca poichè restituiscono i singoli contenuti (pagine HtML) privi del contesto di navigazione implementato nei frameset

I frame non sono adatti ai siti di ecommerce o promozionali perchè non danno una visione dell'insieme degli articoli offerti

vantaggi

1) elementi comuni a tutte le pagine con i frame vengono centralizzati in singole pagine HTML. Mi basta modificare una di queste pagine per ottenere l'aggiornamento su tutte le pagine del sito

2) Navigazione veloce

SSI consentono di ovviare allo svantaggio dei frame nei motori di ricerca.

22/12/2016 - 3F - 2 MODULO

da e01692

la gestione dei frame è + semplice delle server side include. Quindi se il sito viene diffuso mediante un passaparola (contatto diretto tra WEB master e utenza) i frame semplificano di molto la gestione

Le server side include aggregano i documenti richiesti con gli elementi comuni (pubblicità, menu etc) per cui quando transitano sulla rete gli spider riescono a catturare anche la semantica di navigazione che verrà riproposta tale e quale quando viene effettuata una ricerca

3T 20/12/2016

frame => se ho n sottofinestre mi servono n+1 file => n per i contenuti delle sottofinestre + una che definisce la suddivisione (è quella che contiene il tag frameset)

framset => definisce la divisione frame => definisce il contenuto valorizzazione di rows e cols:

COLS="20%,20%,20%,20%,20%"

COLS="*,*,*,*,*"

esempio => colonna centrale doppia delle altre COLS="*,*,2*,*,*"

COLS="17%,16%,34%,16%,17%"

cols="100,*" => prima colonna larga 100px e 2° parte restante

<FRAMESET COLS="100,20%,*"> => prima colonna larga 100 px (non verrà ridimensionata quando cambio l'ampiezza della finestra - 20% della finestra del browser per la 2° colonna - la parte che resta alla terza

Inviato: 22/12/2016, 8:05

(3)

</frameset>

</FRAMESET>

Esempio frameset a finestra 1° soluzione

</frameset>

</frameset>

2° soluzione

</frameset>

</frameset>

3° soluzione

</frameset>

Esempio Alfa

</frameset>

</frameset>

</frameset>

(4)

</frameset>

21/12/2017 - 3F - 2 MODULO

da e01692

compatibilità in avanti => un sistema gestisce situazioni future spiegato come mai <noframes> funziona nei vecchi browser Esempi di domande

quale tipo di browser riconosce <noframes> ?

perchè un vecchio browser si comporta correttamente pur non conoscendo il tag <noframes>

SCROLLING=NO => non mostra la scroll bar anche se il contenuto del frame è molto lungo

SCROLLING=YES => mostra sempre la scroll bar anche se il contenuto del frame è molto breve (rispetto al frame contenitore)

SCROLLING=AUTO => mostra la scroll bar se serve

MARGINWIDTH, MARGINHEIGHT => distanza del testo all'interno del frame rispetto al bordo del frame

NAME => direttiva presente in tutti i tag => identifica l'oggetto gestito dal tag.

Nei frame la direttiva NAME serve per specificare la finestra che subirà l'effetto di un link (tag A)

la valorizzazione di NAME è case sensitive.

TARGET => direttiva del tag A che indica quale frame usare.

Se un tag A non presenta la direttiva TARGET di default userà il frame che lo contiene.

23/1/2017 - 3F - 2 MODULO

da e01692

Il name del target è case sensitive.

Se non esiste un frame con name = al target cliccando sul link si apre una nuova finestra e il browser abbina ad essa il nome indicato nel target. Qualsiasi link che presenta lo stesso target userà tale finestra come

destinazione del link.

Quindi si apre una nuova finestra solo quando clicco la prima volta su un target sconosciuto. I successivi click con lo stesso target useranno tale finestra

PAGINA PRINCIPALE

---

Inviato: 21/01/2017, 11:59

Inviato: 23/01/2017, 10:00

(5)

</Frameset>

MENU.HTML

---

<a href=red.htm>Vai alla pagina rossa</a><BR>

<a href=green.htm target=ALTo>Vai alla pagina verde</a><BR>

<a href=orange.htm target=ALTO>Vai alla pagina arancio</a><BR>

<a href=silver.htm target=ALTO>Vai alla pagina argento</a><BR>

10/1/2017 - 3T

riprendere dai target magici

scrivere un link senza target e un link con target = _self => equivalente _blank => apre una nuova finestra e la popola con la pagina indicata in HREF

_top => sostituisce la pagina visualizzata nella finestra del browser con quella indicata in HREF _new => attenti non è un target magico

19/1/2017 3O riprendere da _parent e sottoframe

sottoframe => frame che richiama in src una pagina html che contiene dei tag FRAMESET

</FRAMESET>

</Frameset>

con sottoframe.htm uguale a:

</FRAMESET>

è equivalente a:

</FRAMESET>

(6)

</Frameset>

Nel 2° esempio la divisione dei frameset è gestita in un solo file

Nel 1° esempio la divisione dei frameset è gestita su + file in questo caso si parla di sottoframe => la distinzione è utile quando uso il target magico _parent

I sottoframe vengono usati per gestire il cambiamento su + frame con un solo link

_parent => indica il frameset genitore. In assenza di sottoframe il frameset genitore è sempre la finestra del browser per cui _parent e _top coincidono

se il target _parent è in un frame definito in un sottoframe allora verrà usato come target il frame che richiama quel sottoframe.

Inoltre i sottoframe consentono in abbinamento con _parent di costruire meccanismi di navigazione dei link che non risentono della posizione della nostra pagina (nella finestra principale o in un frame di una finestra gestita con frameset)

Esempio:

questa applicazione

http://www.brescianet.com/appunti/web_l ... serJs1.htm funziona anche se inserita in un frameset.

Esempio sui LINK con FRAME:

MENU

---

<a href=pink.htm target=_parent>Vai alla pagina rosa (_parent)</a><BR>

<a href=red.htm>Vai alla pagina rossa (no target)</a><BR>

<a href=green.htm target=ALTo>Vai alla pagina verde (ALTo)</a><BR>

<a href=orange.htm target=ALTO>Vai alla pagina arancio (ALTO)</a><BR>

<a href=silver.htm target=ALTO>Vai alla pagina argento (ALTO)</a><BR>

<a href=red.htm target=_self>Vai alla pagina rossa (_self)</a><BR>

<a href=silver.htm target=_Self>Vai alla pagina argento (_Self)</a><BR>

<a href=orange.htm target=_Self>Vai alla pagina arancio (_Self)</a><BR>

<a href=white.htm target=_blank>Vai alla pagina bianco (_blank)</a><BR>

<a href=pink.htm target=_top>Vai alla pagina rosa (_top)</a><BR>

FILE SUDDIVISIONE PRINCIPALE ---

</FRAMESET>

</Frameset>

FILE SOTTOFRAME

---

(7)

</FRAMESET>

mostrata soluzione eser 4

tramite i forms i browser inviano dati al server (esempio una ricerca su google richiede la scrittura in una casella di testo dell'info cercata)

28/1/2017 - 3F - 2 MODULO

da e01692

i forms sono composti da controlli: caselle di testo, radio button, checkbox, listbox , bottoni etc.

la direttiva NAME nei controlli è molto importante poichè consente di identificare il controllo tramite i linguaggi lato client (JS) e lato server (PHP e ASP)

DIRETTIVA METHOD DEL TAG FORM

METHOD=GET => mostra sull'url i parametri impostati sul forms (nome del controllo e sua valorizzazione)

http://www.brescianet.com/appunti/web_l ... Potenz.php?

Filtro=P&Classe=3T&Sesso=M

http://www.brescianet.com/appunti/web_l ... Potenz.php?

Filtro=&Classe=&Sesso=F

METHOD=POST => non mostra sull'url i parametri impostati sul forms quindi la pagina non presenta ? seguito dalla lista degli argomenti

esempio

http://www.brescianet.com/appunti/web_l ... Potenz.php

Per inviare dati ad una pagina web posso usare 2 modalità:

1) tramite un forms

2) passando degli argomenti ad una pagina web (predisposta opportunamente per gestirli) i parametri iniziano dopo il ? - Ogni parametro è separato dal carattere & e ogni valore dal simbolo =. Ecco un esempio

nomefile.php?nomeparametro1=valore1&nomeparametro2=valore2&...

esempio

ElencoStudenti-Potenz.php?Filtro=&Classe=3T&Sesso=F Con questo URL posso estrarre le femmine di 3T

esempio 2

<a href=ElencoStudentiModello.php?classe=1T>Classe 1T</A><br>

Inviato: 28/01/2017, 11:57

(8)

La modalità che prevede l'uso dei parametri sull'URL è utilizzata per i link predefiniti (esempio ricerche predefinite - evitano all'utente di inserire dati per selezionare un gruppo informazioni)

DIRETTIVA ACTION DEL TAG FORM

Definisce la pagina che verrà chiamata quando i dati del forms verranno inviati.

ESEMPIO => quando clicco sul bottone di invia la pagina verrà inviata alla pagina a.php

Cognome: <input type=text>

</FORM>

3T 17/1/2017

le pagine che accettano i forms sono generalmente dinamiche (php e asp)

DOMANDA VERIFICA => costruire un forms che carica la pagina pioppo.htm

</FORM>

3O 21/1/2017

se action contiene l'indicazione mailto: allora i dati verranno inviati al client di posta locale (esempio outlook che deve essere configurato!) per l'invio ad un destinatario - il comportamento è identico a quello visto per href

NAME => direttiva usata sia per i controlli che per il form - è case sensitive e identifica ogni singolo oggetto

spiegato il motivo per cui la stessa pagina presenta aspetti differenti sui controlli a secondo del SO che carica tale pagina

30/1/2017 - 3F - 2 MODULO

da e01692

Per rendere mutuamente esclusivi un gruppo di radiobutton devo usare lo stesso name per tutti i radio dello stesso argomento.

La direttiva VALUE definisce il valore da inviare alla pagina indicata in action i radio button sono usati per scelte mutualmente esclusive (1 tra n possibilità) i checkbox sono usati per scelte multiple (m tra n possibilità)

nei checkbox il valore inviato alla pagina indicata in action è quello contenuto in value se

Inviato: 30/01/2017, 9:59

(9)

il controllo è spuntato altrimenti è la stringa vuota ""

Con la direttiva checked indico le scelte predefinite sia nei radio che nei checkbox

SELECT

OPTION => identifica il singolo elemento Direttive OPTION

value => se definito invia al server il valore indicato in value della voce selezionata. Se non esiste la direttiva value in option allora verrà inviata l'etichetta della voce

selezionata

Selected => definisce la voce predefinita Direttive SELECT

size => definisce la dimensione in righe. se omesso size è = 1 ed appaiono dei combobox

finito select 3T 19/1/2017

<option value=12>Rossi Bianca

<option value=512 selected>Verdi Erika

<option value=162>Gialli Chiara

</select>

il server se seleziono Verdi riceve il codice 512 (esempio la matricola di quella studentessa)

Nelle textarea il valore predefinito è posto tra il tag di apertura e chiusura. Errore usare VALUE!

commenti:<textarea>Cognome nome

</textarea>

Esempio di domanda sulle TEXTAREA

Costruire un controllo identificato con il nome commenti che permetta di scrivere 400 char su 10 righe. Il valore predefinito è il vs cognome nome.

la direttiva cols è il nr di char per colonna la direttiva rows è il nr di righe

rows e cols non limitano il nr di char che posso scrivere.

<textarea name=commenti rows=10 cols=40>Cognome nome</textarea>

spiegata la direttiva WRAP (in toto) - soft e hw non sono diversi sul client => mandano a capo il testo quando arrivo al limite destro della textarea. E' sul server che la situazione

(10)

cambia. Con Wrap=HARD gli invii automatici inseriti nel controllo vengono inviati al server mentre con Wrap=soft vengono ignorati

i controlli hidden sono usati dal JS come variabili. Non sono visibili

ESEMPIO 3F

---

Cognome: <input type=text size=40><br>

Prov. residenza: <input type=text size=2 maxlength=2 name="prov di residenza"><br>

classe <input type=radio name=classe value="1"> 3F <input type=radio checked name=classe value=2> 3Q <input type=radio name=classe value=3> 3H<br>

genere: <input type=radio name=genere value=M checked>Maschio - <input type=radio name=genere value=F>Femmina<br>

lingue conosciute:

<input type=checkbox value=Ita checked name=ITA>Italico

<input type=checkbox value=Fra name=FRA>Francese -

<input type=checkbox value=UK name=UK>Inglese<br>

lingue conosciute: <select name=lingueparlate size=1>

<option value=ita>Italico

<option value=fra>Francese

<option value=uk selected>Inglese

<option value=es>spagnolo

<option value=ar>Arabo

<option value=ch>Cinese

</SELECT><br>

commenti: <textarea rows=10 cols=40>Verdi Anna</textarea>

</form>

</FORM>

--- ESEMPIO 3O

---

Nominativo:<input type=text name=nominativo size=40><br>

Prov. residenza:<input type=text name=prov size=2 value="BS" MAXLENGTH=2><br>

PASSWORD: <input type=PASSWORD name=PWD size=6 MAXLENGTH=6><br>

esito fine anno <input type=radio name=esito value="P" checked> promosso - <input type=radio name=esito value="NP"> non promosso<br>

genere: <input type=radio name=genere value=1> maschio - <input type=radio name=genere value=2 checked> femmina<br>

lingue parlate : <input type=checkbox value="I" name=ita checked> ITA <input type=checkbox value="Fr" name=fra> FRA <input type=checkbox value="Inglese" name=uk> UK<br>

Nazionalità:

<option value=1>Italica

<option value=2>Francese

<option value=3 selected>Inglese

(11)

</SELECT><br>

Commenti: <textarea cols=80 rows=4>Ciao</textarea>

</FORM>

---

2/2/2017 - 3F - 2 MODULO

da e01692

JAVASCRIPT => è case sensitive

alert => istruzione JS che mostra una finestra di avviso con all'interno la frase indicata come argomento

esempio alert("AVE") alert('AVE')

onClick => evento che viene scatenato quando cliccheggio sul controllo

le sequenze di char racchiuse tra " si dicono stringhe => sono costanti!

posso usare in alternativa il singolo apice

"AVE" => stringa

'AVE' => ancora una stringa (sequenza di char ascii!) scritture equivalenti corrette

scrittura errata

il browser usa i " o il ' per identificare la sequenza JS da eseguire sul click

se uso sistematicamente " anche per eventuali stringhe il browser interpreta l'inizio della stringa come fine dell'istruzione JS generando un errore!

ESEMPIO VISTO IN CLASSE

---

Cognome<input type=text name=cognome value="Rossi" size=30><br>

Nome<input type=text name=nome value="Mario" size=20 maxlength=30><br>

Provincia

<option value=1>MI

<option value=2>TN

<option value=3 selected>BS

<option value=4>Altro

</select>

<br>

Password<input type=password name=pwd value="" size=6><br>

Classe di appartenenza:

<input type=radio Name=classe value="IIIT">3T

<input type=radio Name=classe value="IIIO">3O

Genere: <input type=radio Name=Genere value="M">Maschio

<input type=radio Name=Genere value="F">Femmina<br>

Inviato: 02/02/2017, 8:00

(12)

Lingue conosciute:<input type=CHECKBOX NAME=ita value="I" checked>Italiano

<input type=CHECKBOX NAME=Fra value="Fr">Francese

<input type=CHECKBOX NAME=ING value="Uk">Inglese

<input type=CHECKBOX NAME=Ara value="As">Arabo<br>

Amici:<select name=studenti>

<option value=512 selected>Verdi Erika

<option value=162>Gialli Chiara

</select><br>

commenti:<textarea rows=10 cols=40>Cognome nome</textarea>

</FORM>

---

24/1/2017 3T (riprendere dalla lettura del controllo HIDDEN)

JAVASCRIPT

document => oggetto che in JS identifica il documento corrente oggetti dotati di proprietà e azioni (metodi)

metodi e proprietà di un oggetto vengono separati dal punto

document.URL => proprietà che identifica il percorso del file visualizzato

document.DATI.submit() => metodo che consente l'invio dei dati alla pagina indicata in action

document.write(document.URL); => scrive l'indirizzo della pagina web che sto guardando esempio

alert(document.URL)

</SCRIPT>

document.write("<h1>AVE</h1>") document.write(document.URL) document.write("<br>")

document.write(document.url) document.write("<br>")

document.write("document.URL")

</SCRIPT>

esempio

equivale a

document.DATI.nominativo.value => proprietà che estrae la frase scritta nel textbox nominativo del form DATI contenuto nella pagina visualizzata

(13)

+ per le stringhe è un operatore di concatenazione 1+2=3

"1"+"2"="12"

esempio:

Nominativo:<input type=text name=nominativo size=40 value="Rossi mario"><br>

Prov. residenza:<input type=text name=prov size=2 value="BS" MAXLENGTH=2><br>

</FORM>

document.write(stringa) => metodo del documento corrente che permette di scriverci dentro.

script usato per le sezioni JS

document.write("<h1>AVE STUDENTS</h1>")

</SCRIPT>

Esempio 3F

---

Cognome: <input type=text name=Cognome size=40><br>

Prov. residenza: <input type=text size=2 maxlength=2 name="prov di residenza"><br>

</form>

document.write("<h1>AVE</h1>") document.write("<br>")

document.write("<h1>AVE "+document.DATI.classe.value +"</h1>")

</SCRIPT>

---

4/2/2017 -: 3F - 2 MODULO

da e01692

ISTRUZIONI DI I/O di JS

prompt => consente di richiedere un valore tramite una finestra di dialogo alert => mostra una finestra di avviso

esempio d'uso

classe=prompt("Che classe siete ?")

classe è una variabile (un post-it informatico) che riceverà il valore letto con l'istruzione prompt

classe è diverso da

"classe"

Inviato: 04/02/2017, 11:59

(14)

"classe" è una costante di tipo stringa (sequenza di simboli ascii)

classe => è una variabile contenitore che userò per memorizzare dati acquisiti durante l'esecuzione di un prg

"ciao " + "Marco " => "ciao Marco " => concatenazione di stringe se voglio concatenare delle variabili

"Ciao "+Nominativo

si noti l'assenza di " sulle variabili

classe="terza T"

document.write("<h1>"+classe +"</h1>") document.write("<h1>"+"classe" +"</h1>")

</SCRIPT>

Esempio 1 - Saluta la classe indicata in prompt

classe=prompt("Che classe siete ?")

document.write("<h1>AVE "+classe +"</h1>")

</SCRIPT>

3O 28/1/2017 - 3O

"12"+"3" ="123" => il + concatena le stringhe

12+3 => 15 (sono numeri per cui la semantica dell'operatore + resta quella solita

SINTASSI E SEMANTICA DI PROMPT accetta 2 argomenti

var=prompt("frase che spiega quello che voglio","valore predefinito")

Il valore digitato viene assegnato alla variabile var presente a sinistra dell'=

provincia=prompt("Dove risiedi ?","BS") Esempio:

provincia=prompt("Dove risiedi ?","BS") document.write("<h1>"+provincia +"</h1>")

</SCRIPT>

COMMENTI:

I commenti sono particolari frasi descrittive che il programmatore inserisce nel codice per ricordarsi cosa fa una determinata porzione di codice

i commenti vengono ignorati dall'interprete JS (IE). Servono solo al prg o a chi intende capire a cosa serve una porzione di codice.

// commento su una sola riga => utile per spiegare cosa fa un prg in una determinata sequenza di istruzioni - i commenti su 1 sola riga sono brevi e di natura estemporanea /*

commento

(15)

su + righe

*/

I commenti su + righe vanno usati quando la descrizione che devo inserire è molto lunga. Con tale sintassi non devo replicare per ogni riga la sequenza // che identifica il commento

=> sono i commenti in HTml => SONO ignorati dal browser e i webmaster li usano solo per evidenziare particolari porzioni di codice HTML. I commenti HTML sono usati per evitare errori da parte dei browser che non supportano js.

ESEMPIO:

<!--

alert("Welcome to Software Developers");

//-->

</SCRIPT>

senza i commenti html i vecchi browser che non supportano JS mostrano in toto la sequenza di comandi JS creando perplessità nell'utente che consulta la pagina

3T 26/1/2017

Ricordarsi di mostrare il vantaggio dell'uso del JS nel controllo dell'input

Nominativo:<input type=text name=nominativo size=40 value="Rossi mario"><br>

</FORM>

con SUBMIT il controllo dell'errore è sistematicamente effettutato dal server. questo =>

1) inutile traffico

2) lentezza nella risposta

Gli errori dovuti all'assenza di dati sul server (esempio do il voto al Mario rossi di 3T ma lo studente non esiste in archivio) devono essere necessariamente gestiti dal server Gli errori sintattici possono essere gestiti dal browser.

esempio

ciao#libero => non è una email

ciao@libero.it => è una mail ma non è detto che sia registrata sul server

I controlli sintattici possono essere fatti sia dal client che dal server ma è meglio dal client poichè la risposta è immediata e non genera inutile traffico

6/2/2017 - 3F - 2 MODULO

da e01692 Inviato: 06/02/2017, 10:02

(16)

Costrutto di selezione => IF if (Condizione)

eseguo istruzione A [else

eseguo istruzione B]

esempio

risposta=prompt("Scrivi qualcosa:","") if (risposta!="")

alert(risposta)

</SCRIPT>

se la condizione è vera eseguo A altrimenti B non è obbligatorio che sia inserita la sezione else if (HosuperatoIlModulo1=="NO")

Risecchio il modulo 1

IF è la componenti di prg che replica la capacità umana di prendere delle decisioni ed effettuare delle scelte

condizione => restituisce solo vero o falso operatori di confronto

>

>=

<

<=

!= diverso

== uguale (non = !!!!!!!!!!!!!! perchè assegna il valore a destra!!)

3O 4/2/2017 if (eta>=18)

alert("sei maggiorenne!") if (voto<6)

alert("Devi ripetere la prova!") else

alert("Inizia a studiare il 2° modulo") Qui ho un errore:

if (cognome="verdi") alert("AVE " + cognome);

infatti

cognome=prompt("Chi sei:","") if (cognome="rossi")

alert("AVE " + cognome);

</SCRIPT>

saluterà sempre rossi poichè l'= implica assegnamento e non confronto

(17)

La scrittura corretta è:

cognome=prompt("Chi sei:","") if (cognome=="rossi")

alert("AVE " + cognome);

</SCRIPT>

Una variabile che contiene un valore <> da zero o <> dalla stringa vuota

"" verrà sempre interpretato in una condizione con valore vero esempio

// In questo script dirà: "Hai definito un'età"

eta=19 if (eta)

alert("Hai definito un'età") else

alert("Non hai definito un'età")

// In questo script dirà: "Non hai definito un'età"

eta=0 if (eta)

alert("Non hai definito un'età") else

alert("Non hai definito un'età")

// In questo script dirà: "Hai definito il nome"

nome="Mario"

if (nome)

alert("Hai definito il nome") else

alert("Non hai definito il nome")

// In questo script dirà: "Non hai definito il nome"

nome=""

if (nome)

alert("Hai definito il nome") else

alert("Non hai definito il nome")

3T 2/2/2017

riprendere da questo esempio

Questo esempio mostra come con JS controllo l'input prima di inviare i dati (controllo sintattico):

---

function Controllo() {

if (document.DATI.nominativo.value!="") document.DATI.submit()

else

alert("Manca il nominativo!!!!") }

(18)

</SCRIPT>

Nominativo:<input type=text name=nominativo size=40 value=""><br>

</FORM>

</SCRIPT>

---

BOTTONE RESET => reimposta i controlli ai valori predefiniti tramite le direttive checked, selected e value

TYPE=BUTTON => bottone generico che viene connesso a JS tramite l'evento onClick.

---

Cognome: <input type=text name=Cognome size=40 value=""><br>

Prov. residenza: <input type=text size=2 maxlength=2 name="prov di residenza" value="BS"><br>

classe <SELECT NAME=classi>

<Option>3F

<Option>3I

<Option>3U

<Option SELECTED>3N

</SELECT><br>

Lingue conosciute: <input type=checkbox name=ita checked>Ita

<input type=checkbox name=fra>Fra

</form>

--- Un prg è composto da 3 sezioni INPUT => richiesta dati

ALGORITMO => risoluzione del problema sui dati di input OUTPUT ==> presentazione dei risultati

Le applicazioni reali sono composte per il 70% di Input/output (interfaccia utente).

La parte di I/O è abbastanza costante in tutti i prg pertanto una volta appresa la tecnica si tratta di uno sviluppo applicativo abbastanza ripetitivo.

Aver citato come istruzioni di input prompt, confirm e il forms e di output document.writeln ed alert mi consente di ridurre al minimo il codice relativo all'acquisizione dei dati e alla presentazione dei risultati consentendomi di evidenziare l'unico elemento veramente

(19)

variabile di un prg: la sezione algoritmo.

Quando sviluppo una soluzione le 3 sezioni principali di un prg possono essere risolte una ad una anche senza seguire un ordine preciso.

Esempio

// INPUT

x=prompt("dammi un numero:","0") // ALGORITMO DEL SEGNO

Questa parte la analizzo dopo // OUTPUT

document.write("il numero che ha digitato e': "+risultato);

</SCRIPT>

Indentate il codice in modo da evidenziare la gerarchia tra le

istruzioni. Questa tecnica aumenta la leggibilità del codice e diminuisce la probabilità d'errore

if (x>0)

risultato="positivo"

else if (x<0)

risultato="negativo"

else

risultato="zero"

ESEMPIO BASE

risoluzione del segno di un valore letto:

// INPUT

if (x>0)

else if (x<0)

else // non mettere if (x==0) risultato="zero"

// OUTPUT

</SCRIPT>

manca il controllo dell'errore: se scrivo "ciao" mi indica che il valore è zero il che è errato.

isNaN(arg) => funzione JS che restituisce vero se il suo argomento non è un numero!!

SINTASSI BASE DI IF if (Condizione) eseguo istruzione A [else

eseguo istruzione B]

(20)

significa che posso inserire un IF dentro l'altro if (Condizione1)

eseguo istruzione A else

if (Condizione2) eseguo istruzione B else

eseguo istruzione C

Con N alternative il nr di if da usare sono N-1

questa modalità è valida se devo gestire + di 2 alternative. In questo caso viene utile la seguente sintassi

if (Condizione1) eseguo istruzione A else

if (Condizione2) eseguo istruzione B else

if (Condizione3) eseguo istruzione C else

eseguo istruzione D equivalente a:

if (Condizione1) eseguo istruzione A else if (Condizione2) eseguo istruzione B else if (Condizione3) eseguo istruzione C else

eseguo istruzione D

Lo script base precedente del segno di X può essere riscritto in questo modo:

---

// INPUT

if (x>0)

else if (x<0)

// OUTPUT

</SCRIPT>

---

Controllo dell'input (per ora limitato alle stringhe) ---

(21)

// INPUT

if (isNaN(x))

document.write("Non hai scritto un numero!!!!") else

{ if (x>0)

else if (x<0)

}

// OUTPUT

</SCRIPT>

09/02/2017- 3F - 2 MODULO

da e01692

se le istruzioni sottese ad un if sono + di una userò le {} per delimitarle

if (condizione) {

istruzioneA1 istruzioneA2 ...

istruzioneAn }

else {

istruzioneB1 istruzioneB2 ...

istruzioneBn }

premere ALT + 123 sul tastierino numerico => { premere ALT + 125 sul tastierino numerico => } oppure

ALT+SHIFT+[ => { ALT+SHIFT+] => }

if (condizione) {

istruzioneAn }

non è = a questa if (condizione)

Inviato: 09/02/2017, 8:01

(22)

istruzioneAn

poichè solo IstruzioneA1 è sottesa all'IF mentre le istruzioni istruzioneA2

...

istruzioneAn

verranno sempre eseguite

DOMANDA 1 => gestione del segno + controllo errore SOLUZIONE:

// INPUT

x=prompt("dammi un numero:","0") if (x!=null)

{

// ALGORITMO DEL SEGNO if (isNaN(x))

{ if (x>0)

else if (x<0)

}

// OUTPUT

} else

document.write("hai desistito!!!");

</SCRIPT>

parseInt(arg) => decodifica l'argomento passato in un numero esempio

parseInt("11") => 11 parseInt("11.6") => 11 parseInt("11.2") => 11

quindi in presenza di decimali tronca la parte dopo la , parseFloat("11.2") => 11.2

parseFloat("11") => 11.0 Esempio con errore:

// INPUT

x=prompt("dammi il 1° numero:","0") y=prompt("dammi il 2° numero:","0") //ALGORITMO

z=x+y

Z=x*y // Z è maiuscola per cui è un'altra variabile // OUTPUT

document.write("<h1>z=x+y="+z+"</h1>") document.write("<h1>z=x*y="+Z+"</h1>")

(23)

</SCRIPT>

si osservi se x="10" e y="5" il risultato mostrato è:

z=x+y=105 z=x*y=50

si osservi che nel caso della moltiplica il risultato ottenuto è corretto. Il motivo risiede nel fatto che il * ha solo una semantica

relativa a dati numerici e pertanto JS converte in automatico le stringhe lette con prompt.

si osservi che nel caso della somma il risultato ottenuto è inaspettato.

Il motivo risiede nel fatto che il + assume 2 significati: somma per i numeri e concatenzione per le stringhe. Prompt restituisce delle stringhe per cui JS applica il 2° significato: concatena! Per ottenere la somma devo rendere esplicita la conversione utilizzando parseInt e parseFloat.

Esempio intermedio

---

// INPUT

x=prompt("dammi il 1° numero (intero):","0") x=parseInt(x)

y=prompt("dammi il 2° numero (reale):","0") y=parseFloat(y)

//ALGORITMO z=x+y

</SCRIPT>

---

13/2/2017 - 3F - 2 MODULO

da e01692

riprendere dal controllo dell'errore

// INPUT

x=prompt("dammi il 1° numero (intero):","0") x=parseInt(x)

y=prompt("dammi il 2° numero (reale):","0") y=parseFloat(y)

//ALGORITMO z=x+y

</SCRIPT>

Inviato: 13/02/2017, 10:00

(24)

parseInt("Ciao") => NaN => costante che dice che non è assimilabile ad un numero

condizioni complesse => costruite con gli operatori || && e !

&& AND => ed anche

|| OR => oppure

! NOT => negazione

condizione1 && condizione2 => vera se tutte e 2 le condizioni sono vere condizione1 || condizione2 => vera se una delle 2 condizioni è vera

!Condizione => vera se Condizione è falsa

isNaN(x) || isNaN(y) => vera se uno dei 2 non è un numero

!isNaN(x) && !isNaN(y) => vera se tutti e 2 sono numeri

DOMANDA 2=> calcolo della somma e prodotto di 2 numeri con controllo errore

2° soluzione

---

// INPUT

x=prompt("dammi il 1° numero (intero):","0") if (x!=null)

{

y=prompt("dammi il 2° numero (reale):","0") if (y!=null)

{

if (isNaN(x) || isNaN(y))

document.write("Errore. mi ha scritto delle stringhe!") else

{

x=parseInt(x) y=parseFloat(y) //ALGORITMO z=x+y

document.write("<h1>z=x+y="+z+"</h1>") document.write("<h1>z=x*y="+Z+"</h1>") }

} }

</SCRIPT>

2° soluzione

---

// INPUT

{

y=prompt("dammi il 2° numero (reale):","0")

(25)

if (y!=null) {

if (!isNaN(x) && !isNaN(y)) {

else

document.write("Errore. mi ha scritto delle stringhe!") }

}

</SCRIPT>

---

3T 9/2/2017

riprendere dagli esercizi 3° soluzione

---

// INPUT

{

y=prompt("dammi il 2° numero (reale):","0") if (y!=null)

{

if (!(isNaN(x) || isNaN(y))) {

else

document.write("Errore. mi ha scritto delle stringhe!") }

}

</SCRIPT>

---

Funzioni MATH.

Math.sqrt(x) => radice quadrata di x Operatori algebrici:

*, + , - , / , %

A % B => restituisce il resto della divisione di A per B

(26)

un numero x è pari se x % 2 = 0

DOMANDA => leggere un valore e stabilire se è pari, dispari o zero + controllo errore

// INPUT

{

// ALGORITMO DEL Pari/dispari if (isNaN(x))

{

if ((x % 2 ==0) && x!=0) risultato="pari"

else if (x % 2 ==1) risultato="dispari"

else

risultato="zero"

}

// OUTPUT

} else

</SCRIPT>

Un pari/dispari/destra potrebbe essere valutato in vari modi:

if (x==0)

risultato="zero"

else

risultato="pari"

oppure if (x==0)

risultato="zero"

else if (x % 2 ==0) risultato="pari"

else

risultato="dispari"

----

COMPITO => valutare anche la casistica : "NOn hai scritto un intero"

(3O-3F) 11/2/2017 3O

La tabella ascii definisce l'ordinamento lessicografico. Questa relazione d'ordine è vera:

"Zorro" < "anta"

poichè le lettere maiuscole in ascii sono poste prima di quelle minuscole.

"1234" < "8" => confronto lettera per lettera per cui in ascii "8" > "1" da cui segue la relazione

(27)

DOMANDA 3 sull'IF: dato un char stabilire (con controllo errore!) se è minuscola, maiuscola, numero o altro

// INPUT

c=prompt("dammi una lettera:","") if (c!=null)

{

if (c=="") // c non contiene alcun char document.write("stringa vuota") else if (c.length!=1)

document.write("Non hai digitato un singolo carattere!") else if (c<="Z" && c>="A")

document.write("Maiuscola") else if (c<="z" && c>="a") document.write("Minuscola") else if (c<="9" && c>="0") document.write("Numero") else

document.write("Non hai digitato un carattere alfanumerico") }

</SCRIPT>

16/2/2017 - 3F - 2 MODULO

da e01692

DOMANDA 4 => valutare se 2 punti sono all'interno del rettangolo di coordinate (a,b) {angolo inferiore sinistro} e (c,d) {angolo in alto a destra}

a=1 b=1 c=10 d=3 // INPUT

x=prompt("dammi la X:","") if (x!=null)

{

y=prompt("dammi la Y:","") if (y!=null)

{

// qualcosa e' stato digitato if ((isNaN(x) || isNaN(y))

document.write("Non hai messo delle coordinate sensate!") else

{

if (x<c && x>a && y<d && y>b)

document.write("sei dentro il rettangolo") else if (x<a || x>c || y>d || y<b)

document.write("fuori dal il rettangolo") else

document.write("sei sul bordo il rettangolo") }

} }

</SCRIPT>

Inviato: 16/02/2017, 8:00

(28)

3T 14/2/2017

La condizione sul bordo risulta piuttosto complessa if (

(x<c && x>a) && (y==d || y==b)

||

(y<d && y>b) && (x==a || x==c) )

document.write("sei sul bordo il rettangolo") else if (x<a || x>c || y>d || y<b)

document.write("fuori dal il rettangolo") else

document.write("sei dentro il rettangolo") Un numero è intero se

x==parseInt(x)

DOMANDA => valutazione pari/dispari/zero + valutazione del segno SOLUZIONE

---

// INPUT

{

// ALGORITMO DEL Pari/dispari if (isNaN(x))

{

if (x==parseInt(x)) // è un intero {

if ((x % 2 ==0) && x!=0) risultato="pari"

else

risultato="zero"

// OUTPUT

} else

document.write("Non hai scritto un numero intero!!!!") }

} else

</SCRIPT>

---

DOMANDA 6 => leggere una mail e valutare se è corretta o meno (all'interno di un form)

Iniziamo con questo esempio:

---

e-mail:<input type=text value="" NAME=email><br>

</form>

(29)

function ControllaMail() {

alert("AVE") }

//ControllaMail() Nome="Rossinelli"

alert(Nome.indexOf("e"));

alert(Nome.charAt(3));

</SCRIPT>

---

Si osservi che JS esegue tutte le istruzioni che non sono incluse nella dicitura

function NomeFunzione() {}

Per eseguire le istruzioni all'interno di function NomeFunzione() {} devo richiamarla in modo esplicito con istruzioni del tipo:

ControllaMail() oppure

onClick="ControllaMail()"

18/2/2017 - 3F - 2 MODULO

da e01692

function => racchiude porzioni di codice che non vengono eseguite da JS durante il caricamento della pagina ma solo quando accade un evento opportuno oppure se tra script /script richiamo quella funzione in modo esplicito con il suo nome

esempio ControllaMail() 3O 16/2/2017

stringa.indexOf(c) => posizione del 1° carattere c in stringa

stringa.indexOf(s) => posizione della prima occorrenza della stringa s in stringa - restituisce -1 se non trova

stringa.lastIndexOf(s) => posizione dell'ultima occorrenza della stringa s in stringa - restituisce -1 se non trova

(3T)

compitao => costruire le condizioni necessarie a valutare questi errori

@pioppo.it marco@pioppo.

marco@.it

da usare nel seguente script:

---

Inviato: 18/02/2017, 11:57

(30)

</form>

s=document.DATI.email.value if (s.length==0)

alert("Non hai scritto nulla!")

else if (s.indexOf("@")!=-1 && s.indexOf(".")!=-1) {

// qui arrivo anche con una mail di questo tipo:

// marco@pioppo.

// @pioppo.it // marco@.it

NonEUnaMail=(condizione vera se ho marco@pioppo.)

NonEUnaMail=NonEUnaMail || (condizione vera se ho @pioppo.it) NonEUnaMail=NonEUnaMail || (condizione vera se ho marco@.it) if (NonEunaMail)

alert("mail assurda!!!") else

document.DATI.submit();

} else

alert("Non è una mail poichè non hai @ o .") }

//ControllaMail() /*

Nome="Rossinelli"

alert(Nome.indexOf("i"));

alert(Nome.lastIndexOf("i"));

alert(Nome.charAt(6));

alert(Nome.substring(1,5));

*/

</SCRIPT>

--- 3T - 16/2/2017

NonEUnaMail=(condizione vera se ho marco@pioppo.)

NonEUnaMail=NonEUnaMail || (condizione vera se ho @pioppo.it) NonEUnaMail=NonEUnaMail || (condizione vera se ho marco@.it) è equivalente a:

NonEUnaMail=(condizione vera se ho marco@pioppo.) || (condizione vera se ho @pioppo.it) || (condizione vera se ho marco@.it)

ed equivalente a:

EUnaMail=(condizione falsa se ho marco@pioppo.)

EUnaMail=EUnaMail && (condizione falsa se ho @pioppo.it) EUnaMail=EUnaMail && (condizione falsa se ho marco@.it) x=1+2+4

equilvalente x=1

(31)

x=x+2 x=x+4

Funzione reale usata per testare una mail (non richiesta) ---

function isEmail(email) {

// email=document.ACCESSO.Email.value;

//var email = document.getElementById('Email');

var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

if (!filter.test(email)) return false;

return true;

}

---

20/2/2017 - 3F - 2 MODULO

da e01692

(s.length-1)==s.lastIndexOf(".") // . ho un punto alla fine (s.indexOf("@")==0) // @ all'inizio della stringa

((s.indexOf("@.")!=-1) || (s.indexOf("..")!=-1)) // @ all'inizio della stringa

ESEMPIo 6 - Soluzione (delle 5 condizioni centrali mi bastano 3)

</form>

s=document.DATI.email.value if (s.length==0)

alert("Non hai scritto nulla!")

else if (s.indexOf("@")!=-1 && s.indexOf(".")!=-1) {

// condizione vera se ho marco@pioppo.

// ovvero non ho messo il tld (sigla finale dopo l'ultimo punto NonEUnaMail=( (s.length-1)==s.lastIndexOf(".") )

// condizione vera se ho @pioppo.it

// ovvero non ho messo il nome dell'utente

NonEUnaMail=NonEUnaMail || ( s.indexOf("@")==0 ) // condizione vera se ho marco@.it

// ovvero non ho messo il nome del dominio

NonEUnaMail=NonEUnaMail || ( s.indexOf("@.")!=-1 ) // esempi non gestiti

// non posso avere .. => s.indexOf("..")!=-1

// + di un @ ==> s.indexOf("@")!=s.lastIndexOf("@") if (NonEUnaMail)

alert("mail assurda!!!") else

document.DATI.submit();

} else

alert("Non è una mail poichè non hai @ o .")

Inviato: 20/02/2017, 10:03

(32)

}

</script>

23/2/2017: 3F - 2 MODULO

da e01692

ITERAZIONI

Consente di ripetere un'operazione finchè una condizione resta vera Costrutto FOR

for (inizializzazione ; condizione ; istruzione finale x ogni ciclo) parte iterata (ripetuta) {}

...

Suo funzionamento:

1) viene eseguita: inizializzazione

2) controllo la condizione. se è falsa smetto di usare il for e passo all'istruzione successiva ... (punto 6)

3) viene eseguita: parte iterata (ripetuta) 4) viene eseguita: istruzione finale x ogni ciclo 5) ritorno al punto 2)

6) ...

Esempio

N=10 // numero di saluti for (i=1 ;i <=10; i++)

document.write(i+"° AVE<br>")

document.write("Ho finito con i saluti")

</script>

e' equivalente alla seguente sequenza

N=10 // numero di saluti i=1 // è eseguito prima del for for ( ;; )

{

if (i>10) break; // se la condizione è vera esco dal ciclo document.write(i+"° AVE<br>")

i++ // eseguito prima del ciclo }

document.write("Ho finito con i saluti")

</script>

for (;;) => loop infinito Domande

primi N dispari

N=prompt("Dammi il numero di elementi","10") N=parseInt(N)

for (i=0 ;i<N; i++) {

document.write((2*i+1)+"<br>") }

/*

Inviato: 23/02/2017, 7:59

(33)

for (i=1 ;i<=N; i++) {

document.write((2*i-1)+"<br>") }

*/

oppure

N=prompt("Dammi il numero di elementi","10") N=parseInt(N)

for (i=1,d=1 ;i<=N; i++, d=d+2) {

document.write(d+"<br>") }

la , nella prima parte del for (inizializzazione) separa le singole istruzioni che verranno eseguite

for (Istr1,Istr2,...,IstrN ; condizione ; istrA,istrB,...,istrZ) Parteiterata

equivale Istr1 Istr2 ...

for ( IstrN; condizione ; istrZ) {

Parteiterata istrA

istrB ..., }

ESEMPIO

Leggo un elenco di numeri fino a quando non leggo 0 x=prompt("Dammi un numero","0")

for ( ;x!=0; )

x=prompt("Dammi un numero","0") ESEMPIO

Leggo un elenco di numeri fino a quando non leggo 0 e restituisco la somma

x=prompt("Dammi un numero","0") for (s=0 ;x!=0; )

{

s=s+parseInt(x)

document.write(x+"<BR>")

x=prompt("Dammi un numero","0") }

document.write("la somma dei valori letti e': " +s) 1° DOMANDA VERIFICHE

Leggo un elenco di numeri fino a quando non leggo 0 e restituisco la media. Nella lettura devo escludere valori non numerici

(34)

SOLUZIONE

x=prompt("Dammi un numero","0") for (s=0, i=0 ;x!=0;)

{

if (!isNaN(x) && x!=0) {

s=s+parseFloat(x) i=i+1

document.write(x+"<BR>") }

x=prompt("Dammi un numero","0") }

if (i>0)

document.write("la media dei valori letti e': " +s/i) else

document.write("Non hai fornito numeri!")

Compito per casa 3T - 3F

1) Dato un valore N calcolare la somma dei primi N termini S(N)=1+2+...+N 2) Dato un valore B e un esponente n calcolare B^n

3) Dato un valore N calcolare il fattoriale N!=1*2*3...*N 4) Dato N stampare i valori da N a 1

S(N)=N(N+1)/2 non applicabile

25/2/2017 - 3F - 2 MODULO

da e01692

1) Dato un valore N calcolare la somma dei primi N termini S(N)=1+2+...+N

N=prompt("Dammi N","10") s=0

for (i=1 ;i<=N; i++ )

s=s+i //s(n)=n+S(n-1) - s(0)=0 document.write("la somma e': " +s)

</script>

3) Dato un valore N calcolare il fattoriale N!=1*2*3...*N N!=1*2*3...*N

(N-1)!=1*2*3...*(N-1)

N!=1*2*3...*(N-1)*N=(N-1)!*N

N=prompt("Dammi N","10") p=1

for (i=1 ;i<=N; i++ )

p=p*i // f(n)=f(n-1)*n n!=n*(n-1)! - 0!=1 document.write("il fattoriale e': " +p)

</script>

2) Dato un valore B e un esponente n calcolare B^n

Inviato: 25/02/2017, 11:59

(35)

b=prompt("Dammi B","10") N=prompt("Dammi N","10") p=1

for (i=1 ;i<=N; i++ )

p=p*b // p(n,b)=p(n-1,b)*b - b^0=1

document.write("la potenza " +b+"^"+N+" e': " +p)

</script>

4) Dato N stampare i valori da N a 1

N=prompt("Dammi N","10") for (i=N ;i>=1; i-- )

document.write(i +"<br>")

</script>

loop infinito che non fa nulla for (;;);

x^n x^(n-1)*x

DOMANDA 2 => serie di fibonacci x(1)=richiesto

x(2)=richiesto

N => numeri della serie da stampare x(n)=x(n-1)+x(n-2)

x(1)=1 x(2)=1

x(3)=x(2)+x(1)=2 x(4)=x(3)+x(2)=3 x(5)=x(4)+x(3)=5 x(6)=x(5)+x(4)=8 ....

x(n)=x(n-1)+x(n-2) SOLUZIONE FIBONACCI:

---

X2VoltePrec=prompt("X(1)","1") XPrec=prompt("X(2)","1")

X2VoltePrec=parseInt(X2VoltePrec) XPrec=parseInt(XPrec)

N=prompt("N","5")

document.write("X(1)="+X2VoltePrec+"<br>") document.write("X(2)="+XPrec+"<br>")

for (i=3; i<=N ; i++) // i nr di elementi stampati {

XCorrente=XPrec+X2VoltePrec

document.write("X("+i+")="+XCorrente+"<br>")

X2VoltePrec=XPrec // alla prossima iterazione il termine precedente diventa il precedente del precedente (2 volte precedente)

XPrec=XCorrente // alla prossima iterazione il termine corrente diventa il precedente

(36)

}

</script>

--- --- 3T - NO 3F 3O

x=prompt("Dammi un numero","0") for ( ;x!=0; )

x=prompt("Dammi un numero","0") document.write("finito!!!!<br>")

</script>

for ( x=prompt("Dammi un numero","0");x!=0; x=prompt("Dammi un numero","0"));

document.write("finito!!!!<br>")

</script>

ricordarsi che un ; al termine del for indica l'assenza della parte iterata. Se non ho ; l'istruzione successiva al for viene interpretata come la componente iterata del for stesso.

21/02/2017 3T 1° e 2° ora 25/02/2017 3O

---

Algoritmo che descrive la creazione di una tabella da r=1 a N

scrivi r-esima riga da r=1 a N

dalla c=1 alla colonna N scrivi c-esima cella

6/3/2017 - 3F - 2 MODULO

da e01692

Algoritmo che descrive la creazione di una tabella aperturadellatabella

da r=1 a N

scrivi r-esima riga chiusuradellatabella

decodifico: aperturadellatabella, chiusuradellatabella e scrivi r-esima riga, da r=1 a N

---

document.write("<TABLE BORDER=1>") for (r=1; r<=N; r++)

scriviriga(r)

document.write("</TABLE>") ---

Inviato: 06/03/2017, 10:00

(37)

decodifico:scriviriga(r)

---

{

aprinuovariga

dalla c=1 alla colonna N

scrivi c-esima cella sulla r-esima riga chiudinuovariga

}

decodifico: aprinuovariga, chiudinuovariga e scrivi c-esima cella e dalla c=1 alla colonna N

---

{

document.write("<TR>") for (c=1; c<=N; c++) scrivicella(r,c)

document.write("</TR>") }

document.write("</TABLE>") --- decodifico scrivicella(r,c) ---

{

document.write("<TR>") for (c=1; c<=N; c++)

document.write("<td width=25>" + r*c + "</td>") document.write("</TR>")

}

DOMANDA : disegnare la tavola pitagorica NxN SOLUZIONE:

N=prompt("N:","10") N=parseInt(N)

{

document.write("<td width=25>" + r*c + "</td>") document.write("</TR>")

}

document.write("</TABLE>")

SCHEMA DI RIFERIMENTO PER LE PROSSIME DOMANDE:

N=prompt("N:","10") N=parseInt(N)

(38)

{

document.write("<TR>") for (c=1; c<=N; c++) if (condizione)

document.write("<td width=25 bgcolor=yellow> </td>") else

document.write("<td width=25> </td>") document.write("</TR>")

}

</script>

DOMANDA : disegnare una tabella con la diagonale gialla - le restanti celle bianche

{

document.write("<TR>") for (c=1; c<=N; c++) if (r==c)

}

DOMANDA : disegnare una tabella con l'antidiagonale gialla - le restanti celle bianche

vedo che gli indici delle celle gialle si comportano in questo modo:

1 N => 1+N 2 N-1 => 1+N 3 N-2 => 1+N ...

N 1

un indice cresce (quello della riga) mentre l'altro decresce (quello

della colonna). In realtà devo notare che la somma delle coordinate r e c resta costante : N+1

{

document.write("<TR>") for (c=1; c<=N; c++) if ((r+c)==(N+1))

}

(39)

DOMANDA : disegnare una tabella con la diagonale e l'antidiagonale gialla - le restanti celle bianche

{

if (((r+c)==(N+1)) || (r==c))

}

DOMANDA : disegnare una tabella con il bordo giallo mentre le restanti celle sono bianche

{

if (r==1 || r==N || c==1 || c==N)

}

DOMANDA : disegnare una tabella a scacchiera gialla e bianca

Noto che la somma delle coordinate quando è pari la cella è colorata altrimenti no.

quindi

{

document.write("<TR>") for (c=1; c<=N; c++) if ((r+c) % 2== 0)

}

COMPITO 3O-3T => fare su carta scritto a mano ESERCIZIO 9.B.1 e 9.B.2