Javascript - Le Funzioni

Quando alcune sequenze d’istruzioni devono essere utilizzate più volte, per non riscriverle è possibile raggrupparle sotto un’unica etichetta e richiamarle quando servono.

Una funzione è un blocco d’istruzioni al quale è associato un identificativo (etichetta).

Solo quando chiamata, la funzione è eseguita.

Definirle

Si usa la parola: function .

Si compone di :
un nome;
uno o più parametri opzionali;
un corpo;

Si dichiarano nel head e si richiamano nel body.

function nome(parametri){
blocco istruzioni;}

Parametri

Costituiscono le variabili su cui opera una funzione, se sono più di uno, si separano con una virgola.

function nome(par1,par,2)

All’interno della funzione è possibile dichiarare altre variabili locali.

I nomi che si assegnano ai parametri sono come “segnaposto”(parametri formali) che saranno poi sostituiti dai nomi effettivi delle variabili(parametri attuali).

Funtion saluta(nome){
alert(“ciao”+nome);}

Var nomeDaSalutare = “Pippo”;
saluta(nomeDaSalutare);

Chiamata di una funzione

Chiamata o invocazione di una funzione un punto qualsiasi dello script nel quale compare l’indicatore della funzione.

Function scrivi(stringa){ Dichiarazione
document.write(stringa);

var mia_stringa = “Pippo”;
scrivi(mia_stringa); Chiamata

Restituzione dei valori

Le funzioni possono:
svolgere delle azioni;
restituire dei valori (window.prompt);

Per fare sì che una funzione restituisca un valore, si utilizza l’sirtuzione: return.

Function nome(parametri){
var risultato;
blocco istruzioni;
return risultato;}

Quando si richiama una funzione, per catturare il valore restituito, è necessario assegnarlo a una variabile.

Var nome_variabile=nome_funzione(..);

function quadrato(numero){
return numero*numero;}

var num=10;

var num_quadrato=quadrato(num);

Chiamata di una funzione da un’altra funzione

Una funzione A può chiamare la funzione B perché effettui una certa operazione e restituisca un valore.

Function funzione_A(parametri){
var risultato:
blocco istruzioni;
return risultato;}

Funtion funzione_B(parametri){
var valore = funzione_A(…);}

Variabili locali e globali

Se la variabile è stata dichiarata all’interno di una funzione, è locale.

Se la variabile è stata dichiarata fuori da qualsiasi funzione, è globale.(accessibile da ogni funzione).

Se la variabile locale e globale ha lo stesso nome, quella locale prevale e nasconde la variabile globale.

Passaggio dei parametri

L’associazione tra parametri formali e attuali può essere fatta in due modi:

·      Per valore: quando si chiama la funzione e il valore del parametro attuale è passato a quello formale; la funzione modifica solo i dati utilizzati all’interno della funzione e sono modificati solo i parametri formali.

·      Per riferimento: quando si chiama la funzione il parametro attuale e il parametro formale diventa la stessa variabile, con lo stesso indirizzo in memoria, quindi si riferiscono entrambe allo stesso valore. Questo perché in realtà le variabili non contengono il valore, ma il riferimento, ossia l’indirizzo del valore.

La regola fondamentale:

I tipi primitivi (numeri e booleani, stringhe) sono manipolati per valore. Anche

I tipi di riferimento (come oggetti e array) sono passati per riferimento.

Esempio con tipi primitivi:

function prova_valore(par1){
par 1 = par1*5;
document.write(“all’interno della funzione il parametro formale vale:” + par1);}

var n=10;
prova_valore(n) à il suo valore sarà 50
document.write(“il parametro restituito contiene nuovamente”+n); à il suo valore sarà di nuovo 10

Esempio con tipi di riferimento:

var array=new Array(3);
funtion prova_valore(array){
array[1]=array[1]*5;
document.write(array[1]);}

var mia_lista=new Array(5,10,15);
prova_valore(mia_lista);àil suo valore sarà 50
document.write(mia_lista[1]);} à il valore sarà ancora 50

Javascript - Array

Oggetti

L’utente si definisce i propri oggetti oppure usa gli oggetti predefiniti che il linguaggio mette a disposizione (built-in objects).

String, Date, Boolean, Array, Math, RegExp, Html Dom.

Array

Una array o vettore è un oggetto “complesso” che permette di memorizzare all’interno di una singola variabile un insieme ordinato di valori.

Per crearlo:
var nuovo_array = new Array(numero)

Un array lungo 4 avrà indici da 0 a 3 (0  a n-1).

Attraverso l’indice è possibile accedere al singolo elemento: [0] [1]

I form , le immagini possono essere considerati come array.

Una volta creato lo si inizializza:
mio_array[n]=”valore”;

Accedere agli elementi:
nome_array[indice];

Dichiarazione compatta:
var mio_array = (“Marco”,”Gianni”);

Per stampare l’elenco completo dell’array come una stringa:
document.write(mio_array);

Proprietà e Metodi

Proprieta:

mio_array.length per impostare o leggere la lunghezza dell’array.

Metodi:

mio_array.sort() per ordinare gli elementi di un array.

mio_array.concat(altroArray) per concatenare due array. E possibile concatenare direttamente degli elementi.

Ciclo for applicato agli array

Per scorrere velocemente una lista ed eseguire operazioni su di essa.

Di solito, la condizione espressa chiede che il ciclo venga concluso fino a che l’array non è finito.

For(var i=0;i<mio_array.length;i++)

Ciclo For..in

Permette di fare un ciclo per un array, determinando automaticamente il numero di ripetizioni in base agli elementi degli array.

var i=0;
for(i in nomeArray);

Javascript - Costrutti (strutture di controllo)

Condizionali

Selezione: consente di scegliere se eseguire o meno alcune istruzioni in base al valore booleano.

If(condizione){
istruzione1;
istruzione2;
}

Selezione binaria: consente di scgliere quali istruzioni eseguire in base al valore booleano.

If(condizione){
istruzione1;
istruzione2;
}
else{
istruzione1;
istruzione2;
}

Contemplano anche gli operatori logici && (and)e || (or).
if(eta>18 && eta<40){ }
if(eta<26 || professione !="studente"){ }

Selezione binaria nidificata: consente di scegliere tra piu di due istruzioni in base al valore booleano.

If(condizione){
blocco istruzioni;
}
else if(condizione){
blocco istruzioni;
}
else{
}

Selezione multipla(SWITCH): alternativa alla selezione nidificata e si usa quando è necessario eseguire operazioni legate a valori precisi. Si possono porre una serie di condizioni da valutare il modo sequanziale.

Switch(n){ quale valore ha in questo momento la variabile. (nome della variabile.)

case value1: se la variabile ha valore 1.
istruzioni;
break;

default: se la variabile non ha nessuno dei valori sopra.
istruzioni;
break;
}

Case può essere:
letterale case "Francia":
una variabile(che contiene un valore) case nazione1:

Costrutti iterativi

Detta anche CICLO è un blocco d’istruzioni che sono ripetutamente eseguite fino a che una certa condizione cambia di stato.

Tre Tipi:

Precondizionata: con clausola sulla condizione iniziale.

Quando un blocco d’istruzioni deve essere eseguito più volte, ma non è possibile sapere a priori quante.

While(condizione){
blocco istruzioni;
}

Le istruzioni sono eseguite se la condizione è true.
Se è falsa, è possibile che le istruzioni non siano mai eseguite.
E possibile creare un ciclo infinito.

REGOLE:

- Inizializzare le variabili il cui valore la condizione di uscita dal ciclo (variabili di controllo) prima del ciclo.
- Il blocco delle istruzioni deve comprendere la modifica delle variabili di controllo dello stesso.
- Inserire sempre la condizione di uscita.

Postcondizionata: con clausola sulla condizione in coda.

Quando un blocco d’istruzioni deve essere eseguito più volte, ma non è possibile sapere a priori quante.

Esegue sempre almeno una volta il ciclo, anche se la condizione è falsa nella prima iterazione.

do{
blocco istruzioni;}
while(condizione)

Enumerativa: con scorrimento di una sequenza iterativa.

Il comando iterativo esegue un blocco di istruzioni per un numero determinato di volte, finché la condizione non diventa falsa.

La condizione viene valutata ogni iterazione, prima di eseguire le istruzioni: se è vera, il blocco di istruzioni viene eseguito e l’indice aggiornato. Quando è falsa il ciclo termina.

for(inizializzazione;condizione;incremento ){
blocco di istruzioni;}

var parziale=0:
for(i=1;i<=10;i++)


Break e continue: sono due istruzioni che offrono maggior controllo sui cicli.

Break interrompe l’esecuzione di un ciclo facendo continuare il programma dalla prima istruzione al di fuori del blocco in cui è inserito.

Continue interrompe il ciclo ma non esce dal blocco in cui è inserito passando al valore seguente.

Javascript - Operatori e Metodi

Operatori= Operatore di assegnamento;

+ concatenazione;

Tag complesso: con caratteri di escape
var img = "nutella.jpg";
document.write("<img src=\"" +img+ "\">");

Operatori aritmetici(unari)
+, -, /, *, %
Operatori d’incremento e decremento:
operatore prefisso: restituisce il valore dopo l’operazione,
++n o --n
es. i = 1;
J= ++i; i e J valgono 2
operatore suffisso: restituisce il valore prima delll’operazione
n++ o n--
es. i = 1;
J= i++; i vale 2, j vale 1

Operatori di confronto

Sono operatori binari.

Confrontano du valori e restituiscono un valore di verità.

Es. 2>1 true 2>3 false
var a=2;
var b=3;
var confronto=false; (inizializza)
confronto = a<b; confronto conterrà true.

Operatori: == , >, <, >=, <=, !=(non uguale).

Operatori logici

Operatori logici

Restituiscono valori di verità.

&& (and): vero solo se entrambi veri.

|| (or): vero se uno dei due è vero.

! (not, negazione): a partire da una preposizione A, si forma una nuova preposizione chiamata negazione di A, la quale è vera quando A è falsa ed è falsa quando A è vera.

Ordine di precedenza degli operatori predefinito:

negazione e incremento,
moltiplicazione, divisione e modulo,
addizzione e sottrazione,
confronto,
uguaglianza,
and,
or,
assegnamento.

Per modificare l’ordine si utilizzano le parentesi.


Metodi di window

Più utilizzati: alert, confirm, prompt

Generano finestre modali, bloccano l’esecuzione dello script finché l’utente non esegue un’azione.

Alert

Avvertono l’utente di un particolare fatto. L’utente può solamente cliccare su ok.

Window.alert("stringa");

Possono essere concatenate:
alert("Buongiorno \n" + visitatore);


Confirm

Finestra che pone una domanda all’utente e chiede una conferma.

Due opzioni: Ok e Annulla.

Window.confirm("stringa");

Prompt Fa apparire una finestra con un campo di testo.
Ha due pulsanti: conferma e annulla.

E un metodo di input.

Window.prompt("testo nella finestra", "testo nel campo");

Esempio:
var visitatore = window.prompt("scrivi il tuo nome, "il tuo nome");
window.alert = (visitatore);

Introduzione a Javascript

Script interni

<script language=”Javascript” type=”text/javascript” ></script>

Script esterni

<script language=”Javascript” src=”modulo.js o URL” type=”text/javascript”></script>

Si omette il tag <script>

Estensione .js

Commenti

/* commento su più righe */

// su una riga

Variabili

Var prova = “ciao”;

Numeri

Interi e numeri con virgola sono  lo stesso tipo di dato

Operazioni: +, -, *, /, %

Stringhe

Concatenare due stringhe:
x = “stringa_1” + “Stringa_2”;

Concatenare stringhe e variabili
x = “stringa_1” +variabile +  “Stringa_2”;

Sequenze di escape:
\’ apice à html
\”virgolette à html
\n nuova riga
\\ à \ backlash à html

HTML

Inserito tra una coppia di virgolette
x + “<br/>” + y;

Booleani

Valori: true e false

Altri tipi primitivi

Undefined :
variabili non definite o non inizializzate;
proprietà che non esistono;

null : nessun valore, è vuoto.

Oggetto window

Finestra corrente, contesto di escuzione di javascript.

E l’oggetto globale, racchiude anche il DOM.

Proprietà degli oggetti

Per accedere alla proprietà di un oggetto:
oggetto.proprietà

In scrittura:
window.defaultStatus=”Questo è il mio messaggio di stato”.

In lettura:
x = window.navigator;
document.write(x);

Chiamata dei metodi

Associato a un oggetto si utilizza:
oggetto.metodo()

Es. document.write(“ciao”);

typeof

Funzione che permette di conoscere il tipo di un dato:

typeof(x) può dare come risultato:  string, boolean, number, undefined

Es.
x = “ciao”;
var tipo = typeof(x); à conterrà il valore String.

Document.write

Document.write(“ciao a tutti”);

Document.write(“<h1>ciao</h1>”);

x = “ciao”;
document.write(x);

x = 7;
document.write(x);
document.write(“<h2>”+ x + </h2>”);

 

Layout

Introduzione

Come le varie parti sono disposte all’interno di una pagina.

Generalmente i layout si distinguono in base al numero di colonne utilizzate per disporre i contenuti. I più comuni so a una(monolitico), due, tre colonne.

Nozioni di base

Il layout è gestito (quasi) interamente tramite CSS.

Per definire il layout, è necessario conoscere:
il box model
elementi di blocco linea
il posizionamento

Elementi blocco e in linea

Gli elementi di blocco strutturano contenuti più estesi di una singola riga(es. paragrafo). Possono contenere altri elementi di blocco, in linea o semplice.

Gli elementi in linea si estendono all’interno di una singola riga di contenuto. Non possono contenere elementi di blocco.

Esempio elemento di linea, Link:
<a href=”http://…”>Repubblica</a>

Esempio elemento di blocco, Paragrafo:
<p>
Prima lezione di HTML
</br>
Introduzione
</p>

Posizionamento

Ci sono quattro tipi di posizionamento che si possono utilizzare, attraverso la proprietà position per controllare la disposizione dei diversi elementi di una pagina:
Statico (static);
Reletivo (relative);
Assoluto (absolute);
Fisso (fixed);

Si può ricorrere inoltre alla tecnica del floating, proprietà float.

Posizionamento statico

E’ l’impostazione predefinita: i box che contengono gli elementi seguono l’ordine in cui compaiono nel codice della pagina.

Un box statico è inserito in una sequenza in cui precede o segue immediatamente altri box statici.

Posizionamento relativo

Un box posizionato relativamente viene spostato rispetto alla sua posizione predefinita, nella quale rimane uno spazio vuoto.

L’entità dello spostamento si può controllare attraverso le proprietà “top”, “right”, “bottom” e “left”.

Esempio: Il paragrafo è spostato di 20px da sinistra e dall’alto.
p{
position: relative;
left: 20px;
top: 20px;
}

La posizione dei box che seguono un box posizionato relativamente viene calcolata rispetto alla sua posizione predefinita (allo spazio vuoto…) e non alla sua posizione effettiva.

Posizionamento assoluto

Un box posizionato in modo assoluto viene spostato rispetto alla posizione effettivamente occupata dal primo box contenitore posizionato in modo assoluto o relativo (in mancanza di un tale elemento, rispetto alla pagina stessa).

L’entità dello spostamento si può controllare attraverso le proprietà “top”, “right”, “bottom” e “left”.

I box assoluti non lasciano spazi vuoti: sono “estratti dal flusso naturale della pagina” e la posizione dei box che li seguono nel codice viene calcolata come se i box assoluti non esistessero affatto.

Posizionamento fisso

Un box posizionato in modo fisso si comporta come un box posizionato in modo assoluto (viene spostato rispetto alla posizione effettiva del primo elemento contenitore posizionato in modo assoluto o relativo ed è estratto dal flusso della pagina), ma risulta fissato rispetto alla finestra del browser, ovvero non si sposta con il resto del contenuto quando si fa scrolling.

Floating

Un box fluttuante viene estratto dal flusso della pagina e spostato verso sinistra o verso destra.

E’ necessario specificare le dimensioni del box!

Esempio:
p {width:200px;float: left;}
img {width:150px;float: right;}

Se l’elemento fluttuante non ha una larghezza intrinseca – come ad esempio le immagini è necessario specificarla esplicitamente, tramite la proprietà width.

Il contenuto circostante fluisce intorno al box fluttuante.

Se si vuole che un elemento prenda avvio da sotto il box fluttuante, invece di scorrergli intorno, bisogna applicargli la proprietà “clear”.

Valori della proprietà clear:
• left (vale rispetto ai box fluttuanti a sinistra);
• right (vale rispetto ai box fluttuanti a destra);
• both (vale rispetto ad entrambi i tipi di box fluttuanti).

Esercizio floating

Layout ad una colonna

Creiamo la colonna con un elemento generico <div> che contiene tutti gli elementi  figli di <body>

Associamo al <div> un attributo id in modo da poterlo identificare univocamente.

Esempio:
<body>
<div id=”colonna”>
 <p> prova </p>
</div>
</body>

Passo 1: creare la colonna

In CSS, definiamo la larghezza e la posizione della colonna.

Possiamo definire la larghezza con unità di misura assolute o relative.

Per centrare la colonna, dobbiamo sia centrare il contenuto dell’elemento <body>, (attraverso la proprieta’ textalign) sia definire i margini destro e sinistro della colonna con il valore “auto”, che li imposta automaticamente alla stessa dimensione.

body {
text-align: center;
}
#colonna {
width: 800px;
margin: 0 auto;
text-align: left;
background-color: pink;
}

Passo 2: strutturare la colonna

Di solito, nei layout a una colonna si distinguono tre sezioni principali: la testata (header), l’area che raccoglie i contenuti principali (main) e il pié di pagina (footer).

In XHTML, definiamo queste sezioni con altrettanti <div>, assegnando ad ognuno un opportuno “id”.

Queste sezioni sono solo indicative: nulla ci vieta di fare a meno di alcune di esse o, al contrario, di crearne di più.

In CSS definiamo le proprietà relative al box model per ciascuna delle sezioni create. Esempio larghezza inferiore alla colonna principale e impostiamo i margini per centrare i <div>

E utile impostare il padding , cosi da lasciare un gradevole spazio intorno ai contenuti.

Layout a due colonne

<div id=“contenitore”>
<div id=“header”>testata</div>
<div id=“colonna1”>colonna1</div>
<div id=“colonna2”>colonna2</div>
<div id=“footer”>piede</div>
</div>

In css definiamo allinamento del contenitore(text-align: center;) e le dimensioni di tutti i div.

Per affiancare le colonne: floating.
colonna 1(float: left;)
colonna 2(float: right;)
footer(clear: both;)

Ricordati che le dimensioni totali di un oggetto comprendono anche margin, border e padding.

Per un menu alternativo in orizzontale:
http://www.htmldog.com/articles/tabs/

Esempi menu orizzonatali:
http://htmldog.com/examples/tabs1[2/3/4/5/6].html

Form

Sintassi

Tag: <form>

Attributi:

Action: indica l’URL del programma o della pagina di risposta che processerà i dati(es. link a pagina di conferma o mailto)

Method: post | get (metodo con cui i dati del modulo saranno inseriti al server (necessita programmazione).

Id: nome univoco per identificare il form

<form action=”registrazione.php” method=”post” id =”iscrizione”>
…Contenuto del form…
</form>

Invio Dati

Post: incorpora i dati del modulo nella richiesta http(non sono visibili all’utente)

Get : accoda il valore dell’url di richiesta della pagina.

Se non si specifica di default è GET.

Generalmente non si utlizza il metodo GET per moduli lunghi.

La lunghezza massima degli URL è di 8129 caratteri.

Per questioni di sicurezza è meglio usare POST

Elementi

E necessario creare degli spazi di input per l’utente. Ogni spazio deve avere un nome.

Si possono inserire:
aree di testo.
check box (selezione multipla).
radio box (selezione singola).
menu a selezione singola o multipla.

Campo di testo

E possibile definire un campo per l’inserimento del testo della dimensione di una singola riga.

Tag da utilizzare è input e il valore  da assegnare all’attributo type può essere di due tipi:

text: se è di tipo testuale

Password:  se è di tipo pw

Altri attributi sono:
Name: nome logico del campo di testo
Value: valore iniziale di default
Size lunghezza del campo in nr di caratteri
Maxlenght: numero massimo di caratteri consenti

<input type="text" name="nome” size="40" maxlength="40" />

Aree di testo

Per creare un area di testo su più righe  si usa il tag textarea.

Attributi possibili:
name : nome logico
cols : numero colonne
rows numero di righe

<textarea name=“areatesto” cols=“50” rows=“6”>
Testo iniziale di default
</textarea>

Radio button

Il radio button permette di inserire opzioni mutualmente esclusive.

Il tag per creare un radio button è input con il vaolre di type  settato a radio.

Altri attributi sono:
name: nome logico. Un gruppo di pulsanti devono condividere lo stesso nome.
value : valore di risposta del bottone. Imposta il valore da inviare al server quando viene selezionato il  pulsante di scelta.
checked: bottone selezionato di default

Esempio:
<input type="radio" name=“naz" value="ita" checked="checked"/>
Italiana <br/>
<input type="radio" name=“naz" value="fra" />
Francese <br/>
<input type="radio" name=“naz" value="eng" />
Inglese <br/>
<input type="radio" name=“naz" value="usa" />
Americana <br/>

Check box

Il check box permette di inserire opzioni di selezione, anche multiple.

Il tag per creare un check box e’ input con il valore di type settato a checkbox.

Altri attributi sono:
Name: nome logico. In questo caso il nome non deve essere uguale a quelli degli altri elementi del gruppo.
Value: valore di risposta del bottone. Imposta il valore da inviare al server quando viene selezionato il pulsante di scelta.
checked: e’ il bottone selezionato di default

Esempio
<input type="checkbox" name="discorso" value="il_discorso_del_re" /> Il discorso del re <br/>
<input type="checkbox" name="immaturi" value="immaturi" /> Immaturi <br/>
<input type="checkbox" name="black" value="black_swan" /> The black swan <br/>

Menu di selezione

L’ultima possibilità è quella di creare dei menu popup a selezione singola o multipla.
Per definire il menu si usa il tag select
Per ogni riga del menu (opzione) si usa il tag option

Gli attributi di select possono essere:
 Name: nome logico
Size: numero di opzioni del menu che devono essere visualizzate prima che venga aperto
Multiple: permette la selezione multipla, altrimenti si ha la singola

Gli attributi di option sono:
 Value: valore inviato al server quando viene selezionata la riga

Esempio:
<select name="professione">
<option value="studente">Studente</option>
<option value="operaio">Operaio</option>
<option value="casalinga">Casalinga</option>
</select>

Menu di selezione multipla Esempio(per scegliere piu opzioni si deve cliccare CTRL)
<select name="interessi" multiple="multiple">
<option value="lettura">Lettura</option>
<option value="musica">Musica</option>
<option value="sport">Sport</option>
<option value="viaggi">Viaggi</option>
<option value="danza">Danza</option>
</select>

Pulsanti invia e cancella

Per realizzare il pulsante di invio (invia i dati inseriti nella form con il metodo indicato –get o post) o cancella (resetta tutti I campi della form) e’ necessario usare il tag input.

L’attributo type puo’ essere settato come:
Submit: invia i dati
Reset: resetta i dati

Gli altri attributi possibili sono:
Name: nome logico
Value: etichetta che compare sopra il pulsante

Esempio:
<input type="submit" value="Iscrivimi" />
<input type="reset" value="Cancella i campi" />

Label

Per rendere le form piu’ facilmente navigabili, si possono aggiungere alcuni elementi.

Ogni campo dovrebbe avere la sua label (etichetta). Si usa il tag label e si associa ad un oggetto della form in modo univoco attraverso l’attributo for. Il campo for deve contenere l’id dell’oggetto interessato.

Esempio:
<label for=“nome”> Inserisci il tuo nome </label>
<input type=“text” name=“nome” id=“nome” value=“ ”/>

Nota: se si utilizzano le label, name e id sono entrambi obbligatori.

Esempio:
<label for="nome"> Inserisci il tuo nome: </label>
<input type="text" name="nome" id="nome" size="40" maxlength="40"/>

Fieldset e legend

Si possono raggruppare campi della form correlati, per esempio i vari elementi del nome (nome, cognome, titolo, etc.) o dell’indirizzo (via, città, CAP, provincia, Paese, etc.) usando il tag fieldset.

Il tag fieldset può avere come figlio il tag legend, che serve per indicare un’etichetta per il raggruppamento.

Esempio:
<fieldset>
<legend> Nome e cognome </legend>
<p>Nome<input type="text" name="nome"/> </p>
<p>Cognome <input type="text" name="cognome"/> </p>
</fieldset>

Option groups

Il tag optgroup serve per raggruppare le opzioni in un menù di selezione.

Richiede un attributo label, il cui valore è visualizzato dal browser come un’intestazione (non selezionabile) prima delle opzioni corrispondenti.

Esempio
<select name="country">
<optgroup label="Africa">
<option value="gam">Gambia</option>
<option value="mad">Madagascar</option>
<option value=“nam">Namibia</option>
</optgroup>