Benvenuti alla decima lezione, in questa lezione vediamo come si gestisce la validazione dei dati inseriti in un Form Html.
La validazione lato Client viene eseguita dal Browser utilizzando il linguaggio JavaScript, questo tipo di controllo serve per evitare di delegare unicamente al Server la gestione degli errori.
Comunque per essere più sicuri  e rendere più performante la vostra applicazione vi consiglio di eseguire il controllo degli errori sia lato Client, sia lato Server.

Creazione del Form "Scheda"

Il Form "scheda" serve per l'inserimento dei dati da validare.

Per creare la scheda usate il codice Html seguente:

<div style="background-color: #7AA45E; position:relative; padding:10px; left:50px; top:50px; width:300px; height:150px; border: 2px solid #000000; border-radius: 6px;">
<form name="scheda" method="post" action="successo.html">  
<table>
<tr><td>Nome:</td><td><input type="text" name="nome" placeholder="inserisci il nome"></td></tr>
<tr><td>Cognome:</td><td><input type="text" name="cognome" placeholder="inserisci il cognome"></td></tr>
<tr><td>Età:</td><td><input type="text" name="eta" placeholder="inserisci l'Età"></td></tr>  
<tr><td>e-mail:</td><td><input type="text" name="email" placeholder="inserisci l'e-mail"></td></tr>
<tr><td><input type="submit" onclick="return validateForm(event)" value="SALVA" /></td><td><input type="reset" value="RESET"></td></tr>
</table>
</form>
</div>

Il Tag  div permette d'impostare lo sfondo della scheda, l'attributo border-radius crea gli angoli smussati.

<div style="background-color: #7AA45E; position:relative; padding:10px; left:50px; top:50px; width:300px; height:150px; border: 2px solid #000000; border-radius: 6px;">

L'attributo method="post" del Tag  form imposta l'invio dei dati al Server senza renderli visibili nell'url, come invece avverrebbe impostando method="get".

L'attributo action si usa per indicare la risorsa/pagina a cui vengono inviati i dati sotto forma di richiesta, se la validazione va a buon fine, altrimenti vengono visualizzati dei messaggi d'errore.
Nel nostro caso, non disponendo ancora di un Server, utlizzeremo la pagina successo.html che ci segnalerà quando i dati inseriti nel Form "scheda" sono corretti.
 

<form name="scheda" method="post" action="successo.html">  

L'evento onclick del Tag <input type="submit" onclick="return validateForm(event)" value="SALVA" /> viene usato per avviare la funzione JavaScript validateForm quando premete sul bottone "SALVA".

Assegnazione dei dati inseriti nel Form "scheda" a variabili JavaScript

Per controllare  i dati inseriti nel Form "scheda", li dobbiamo assegnare a variabili  JavaScript, utilizzando il metodo getElementsByName, come mostra il codice seguente:

var nome=document.getElementsByName("nome")[0].value;  
var cognome=document.getElementsByName('cognome')[0].value;
var eta=document.getElementsByName('eta')[0].value;
var email=document.getElementsByName('email')[0].value;

Il metodo getElementsByName restituisce un vettore con i riferimenti dei Tag Html che hanno lo stesso nome dell'argomento passato al metodo.

Ad esempio, il comando JavaScript seguente:

var eta=document.getElementsByName("eta")[0].value;

permette di assegnare alla variabile eta il valore contenuto nella casella di testo con name="eta".

L'indice [0] serve ad utilizzare il primo riferimento presente nel vettore, che in questo esempio corrisponde alla casella di testo eta.
Se nel vettore ci fossero altri riferimenti con lo stesso nome, per leggerli bastarebbe incrementare l'indice: [1], [2], ... 

In alternativa, per evitare di usare un vettore, avreste potuto utilizzare il metodo getElementsById, ma in questo caso avreste dovuto aggiungere ai Tag l'attributo id="nome" oltre a quello name="nome".

Validazione dei dati

Prima di procedere con la validazione dei dati inseriti nel Form "scheda", dobbiamo fare prima tre cose importanti:

1) Impostiamo i pattern corrispondenti alle Espressioni  Regolari che servono per fare il controllo di validazione dell'età e dell'email:

var regExpEta=/^[0-9]{1,3}$/;
var regExpEmail=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;

2) Inizializziamo un vettore dove aggiungere gli eventuali messaggi d'errore:

var errori=[];

3) Impostiamo un'area al di sotto del Form "scheda" dove visualizzare i messaggi d'errore:

<div name="elencoErrori" style="position:relative; top:80px; left:50px; width:300px;color:red;">
</div>

Con il codice seguente puliamo  l'area appena creata, dove verranno visualizzati i messaggi d'errore:

var elencoErrori=document.getElementsByName('elencoErrori')[0];
elencoErrori.innerHTML="";

Il metodo innerHTML permette di inserire nel Tag di riferimento il codice Html indicato tra le virgolette.

A questo punto, con il codice seguente,  possiamo controlliare se i dati inseriti nel Form "scheda" sono corretti:

if (nome==null || nome==""){  
   errori.push("Il nome è obbligatorio;<br>");
}  
if (cognome==null || cognome==""){  
   errori.push("Il cognome è obbligatorio;<br>");
}  
if (eta==null || eta==""){  
   errori.push("L'età è obbligatoria;<br>");
} else if(!regExpEta.test(eta) || (parseInt(eta)<=0) || (parseInt(eta)>120)){
   errori.push("L'età non è valida;<br>");
}    
if (email==null || email==""){  
   errori.push("L'e-mail è obbligatoria;");
} else if(!regExpEmail.test(email)){
   errori.push("L'e-mail non è corretta;");
}
//Se ci sono errori, i messaggi d'errore vengono visualizzati nell'area elencoErrori
if (errori.length>0) {
for(var x=0;x<errori.length;x++){
    elencoErrori.innerHTML+=errori[x];
}
//Restitusce false, in questo modo l'operazione di submit s'interrompe e non viene inviata la richiesta al server
return false;
} else {

//Esegue il submit inviando la richiesta al server con i dati inseriti nel Form, perché i dati sono corretti
document.forms[0].submit();
}

L'esempio 1 mostra come si comporta l'applicazione se i dati non sono corretti.

Esempio 1

L'esempio 2 mostra come si comporta l'applicazione se i dati sono corretti.

Esempio 2

Se i dati sono corretti viene visualizzata la pagina successo.html, indicata nell'attributo action del form.
Questa pagina è provvisoria, in seguito, quando utilizzeremo un Server, verrà richiamata una risorsa allocata Lato Server che avrà il compito di gestire i dati inviati.

Codice completo pagina ValidaFormLatoClient.html

<html>
<meta charset="ISO 8859-1"/>
<head>
<script>
function validateForm(){
var nome=document.getElementsByName("nome")[0].value;  
var cognome=document.getElementsByName('cognome')[0].value;
var eta=document.getElementsByName('eta')[0].value;
var email=document.getElementsByName('email')[0].value;
var elencoErrori=document.getElementsByName('elencoErrori')[0];
elencoErrori.innerHTML="";
var errori=[];
var regExpEta=/^[0-9]{1,3}$/;
var regExpEmail=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
if (nome==null || nome==""){  
   errori.push("Il nome è obbligatorio;<br>");
   }  
if (cognome==null || cognome==""){  
   errori.push("Il cognome è obbligatorio;<br>");
}  
if (eta==null || eta==""){  
   errori.push("L'età è obbligatoria;<br>");
} else if(!regExpEta.test(eta) || (parseInt(eta)<=0) || (parseInt(eta)>120)){
   errori.push("L'età non è valida;<br>");
}    
if (email==null || email==""){  
   errori.push("L'e-mail è obbligatoria;");
} else if(!regExpEmail.test(email)){
   errori.push("L'e-mail non è corretta;");
}
if (errori.length>0) {
for(var x=0;x<errori.length;x++){
    elencoErrori.innerHTML+=errori[x];
}
return false;
} else {
document.forms[0].submit();
}
}  
</script>  
</head>
<body >  
<div style="background-color: #7AA45E; position:relative; padding:10px; left:50px; top:50px; width:300px; height:150px; border: 2px solid #000000; border-radius: 6px;">
<form name="scheda" method="post" action="successo.html">  
<table>
<tr>
<td>Nome:</td><td><input type="text" name="nome" placeholder="inserisci il nome"></td>
</tr>
<tr>
<td>Cognome:</td><td><input type="text" name="cognome" placeholder="inserisci il cognome"></td>
</tr>
<tr>
<td>Età:</td><td><input type="text" name="eta" placeholder="inserisci l'Età"></td>
</tr>  
<tr>
<td>e-mail:</td><td><input type="text" name="email" placeholder="inserisci l'e-mail"></td>
</tr>
<tr>
<td><input type="button" onclick="return validateForm()" value="SALVA" /></td>  
<td><input type="reset" value="RESET"></td>  
</tr>
</table>
</form>
</div>
<div name="elencoErrori" style="position:relative; top:80px; left:50px; width:300px;color:red;">
</div>
</body>
</html>

Codice completo pagina successo.html

<html>
<head>
</head>
<body>
<div style="background-color: #7DFA00; position:relative; padding:10px; left:50px; top:50px; width:240px; height:50px; border: 2px solid #000000; border-radius: 6px;">
Salvataggio eseguito con successo!!!<br>
<a href="validazione_form01.html">Torna alla scheda</a>
</div>
</body>
</html>

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

Benvenuti alla nona lezione, in questa lezione impariamo ad usare Le espressioni regolari RegExp. Le espressioni regolari si usano per eseguire operazioni di  ricerca, validazione oppure di ricerca e sostituzione  sul testo.

In JavaScript esistono due modi per dichiarare il pattern (sequenza di caratteri di controllo) di un'espressione regolare, il primo è attraverso una semplice stringa contenuta in una coppia di caratteri slash (/):

var espressione = /.../;

il secondo attraverso l'oggetto RegExp:

var espressione = new RegExp("...");

Per applicare il pattern di un'espressione regolare ad una stringa si usa il metodo test():

espressione.test(stringa);

Se l'espressione è verificata si ottiene True altrimenti False.

Per creare un'espressione regolare su usano:

• Modificatori
• Ancore
• Qualificatori
• Classi
• Caratteri speciali

Modificatori
i - la ricerca diventa case-insensitive, cioè maiuscole e minuscole vengono considerate uguali;
m - la ricerca verrà considerate “per riga”, cioè le ancore tipo “^” e “$” verranno applicate per ogni riga di testo;
g - cerca tutte le ricorrenze e non solo la prima.

Esempio 1
In questo esempio il pattern /skill factory/ non verrà trovato perchè nel messaggio "Scuola Skill Factory" le iniziali delle parole sono maiuscole.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory";
// Ricerca di tipo case-sensitive
var pattern=/skill factory/;
if (pattern.test(messaggio)) {
  document.write("Pattern trovato!");
} else {
  document.write("Pattern non trovato!");
}
</script>
</body>
</html>

Esempio 2
In questo esempio il pattern /skill factory/i  verrà trovato perchè il modificatore  i rende la ricerca case-insensitive.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory";
// Ricerca di tipo case-insensitive
var pattern=/skill factory/i;
if (pattern.test(messaggio)) {
  document.write("Pattern trovato!");
} else {
  document.write("Pattern non trovato!");
}
</script>
</body>
</html>

Esempio 3
In questo esempio il metodo replace permette di ricercare il pattern /scuola/ in modalità case-insensitive e sostituisce la prima ricorrenza trovata.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory Scuola";
var pattern=/scuola/i;
//Contenuto messaggio prima della sostituzione
document.write(messaggio+"<br/>");
//Contenuto messaggio dopo la sostituzione
messaggio=messaggio.replace(pattern,"Azienda");
document.write(messaggio);
</script>
</body>
</html>

Esempio 4
In questo esempio il metodo replace permette di ricercare il pattern /scuola/ in modalità case-insensitive e sostituisce tutte le ricorrenza trovate.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory Scuola";
var pattern=/scuola/ig;
//Contenuto messaggio prima della sostituzione
document.write(messaggio+"<br/>");
//Contenuto messaggio dopo la sostituzione
messaggio=messaggio.replace(pattern,"Azienda");
document.write(messaggio);
</script>
</body>
</html>

Ancore
^ - identifica l'inizio della stringa;
$ - identifica la fine della stringa.

Esempio 5
In questo esempio il metodo replace permette di ricercare il pattern /scuola/ in modalità case-insensitive e sostituisce l'ultima ricorrenza trovata.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory Scuola";
var pattern=/scuola$/i;
//Contenuto messaggio prima della sostituzione
document.write(messaggio+"<br/>");
//Contenuto messaggio dopo la sostituzione
messaggio=messaggio.replace(pattern,"Azienda");
document.write(messaggio);
</script>
</body>
</html>

Qualificatori
* - indica 0 o più ricorrenze;
+ - indica 1 o più ricorrenze;
? - indica 1 o 0 ricorrenze;
{n} - ricerca esattamente n occorrenze;
{n,} - ricerca minimo n occorrenze;
{n,m} - ricerca esattamente minimo n occorrenze, massimo m.

Classi
Le classi determinano un elenco di caratteri, vengono racchiuse tra parentesi quadre e possono essere seguite dai quantificatori.

[0-9] una cifra da 0 a 9;
[0-9]+ almeno una cifra da 0 a 9;
[^0-9] qualunque carattere a parte i numeri;
[a-z] una lettera alfabetica minuscola;
[A-Z] una lettera alfabetica maiuscola;
[a-zA-Z] una lettera alfabetica minuscola o maiuscola;
[^a-zA-Z] qualunque carattere a parte le lettera alfabetica minuscole e maiuscole;
[0-9a-zA-Z] una lettera oppure un numero;
[0-9,]+ contiene almeno una cifra o una virgola.

Esempio 6
Un codice RGB è un numero esadecimale composto da sei cifre. Le cifre del sistema esadecimale sono 16: 0123456789ABCDEF.
L'esempio seguente permette di verificare se il codice esadecimale che corrisponde ad un colore RGB è corretto.

<html>
<head>
</head>
<body>
<script type="text/javascript">
//Codice RGB corretto
var numero_esadecimale="FFAA01";
var pattern_esadecimale=/[0-9A-F]{6}/i;
if (pattern_esadecimale.test(numero_esadecimale)) {
  document.write(numero_esadecimale+": ");
  document.write("Formato numero esadecimale corretto!<br/>");
} else {
  document.write(numero_esadecimale+": ");
  document.write("Formato numero esadecimale non corretto!<br/>");
}
//Codice RGB non corretto
numero_esadecimale="ROMA01";
var pattern_esadecimale=/[0-9A-F]{6}/i;
if (pattern_esadecimale.test(numero_esadecimale)) {
  document.write(numero_esadecimale+": ");
  document.write("Formato numero esadecimale corretto!<br/>");
} else {
  document.write(numero_esadecimale+": ");
  document.write("Formato numero esadecimale non corretto!<br/>");
}
</script>
</body>
</html>

Caratteri speciali
. - corrisponde ad un carattere qualsiasi (ex. [.]{5} parola di cinque caratteri);
\. - indica il carattere punto;
\( - indica il carattere parentesi;
| - indica oppure (ex. [r|t] parola che contiene un solo carattere che può essere r oppure t);
\d - ricerca cifre numeriche, corrisponde a [0-9]+;
\D - non contiene cifre numeriche, corrisponde a [^0-9]+;
\t - ricerca tabulazione (TAB);
\n - ricerca fine riga (LF);
\r - ricerca ritorno a capo (CR);
\s - ricerca lo spazio;
\S - non contiene lo spazio;
\uxxx - ricerca il carattere indicato con il codice unicode xxx;
\w - ricerca qualsiasi carattere alfanumerico inclusi "_" e lo spazio, corrisponde a [0-9a-zA-Z_ ];
\W - ricerca qualsiasi carattere non alfanumerico, corrisponde a [^0-9a-zA-Z_ ].
 

Esempi di Espressioni Regolari:

* equivale a {0,}
+ equivale a {1,}
? equivale a {1,0}

[uno]{3} equivale ad una delle seguenti parole:
uno, uon, nuo, nou, onu, oun.

Euro
\d*\.\d{2}

Codice Fiscale
[A-Z]{6}\d{2}[A-Z]\d{2}[A-Z]\d{3}[A-Z]

Partita IVA
\d{11}

Indirizzo email
[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}

Linea vuota
^$

Data in formato gg/mm/aaaa
(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[-/.](19|20)\d\d

Nome utente formato da soli caratteri alfanumerici più  _ e – di lungezza min 3 e max 15
^[a-z0-9_-]{3,15}$

Password che deve contenere un numero, un carattere minuscolo, uno maiuscolo e un carattere speciale tra @#$% e deve avere lunghezza min 8 e max 20
((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,20})

Tag HTML
<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)

Estensione di un file immagine
([^\s]+(\.(?i)(jpg|png|gif|bmp))$)

Indirizzo IP
^([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])$

Arrivederci alla prossima lezione!!!

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

In questa lezione imparerete a gestire il componente per creare Pagine da aggiungere al vostro sito web e ad installare nuovi Plugin.

Benchè negli ultimi tempi vengono utilizzati template con un'unica pagina scrollabile, WordPress prevede la possibilità di aggiungere anche più pagine Web.

Per creare una pagina Web dal pannello di amministrazione di WordPress, cliccate sulla voce Pagine e dal sottomenù a comparsa, scegliete la voce "Tutte le Pagine", se volete vedere tutte le pagine del vostro sito oppure scegliete la voce "Aggiungi Nuova" se ne volte creare una nuova, come mostra l'immagine seguente:

La creazione di una Pagina web è simile alla creazione di un Articolo, la differenza tra loro la notiate sulla destra, dove non è possibile creare o collegare Categorie e Tags, ma è possibile solo collegare pagine fra loro.

Potete decidere di Creare una Pagina Base, totalmente indipendente dalle altre oppure una Pagina Figlia, che dipende da una pagina e livello superiore e che solitamente corrisponde ad una sottovoce di un Menu a Tendina. Inoltre è possibile selezionare un Modello che equivale ad un tipo di visualizzazione della pagina all'interno del  Sito. Le differenze tra le visualizzazioni sono una funzionalità del Tema e quindi non tutti posseggono questa possibilità.

PLUGIN
I Plugin sono funzionalità aggiuntive, che corrispondono a veri e propri blocchi di codice PHP, che so possono aggiungere a WordPress. I Plugin sono perfettamenti integrati alla piattaforma e possono avere molte funzionalità, come ad esempio:

• la condivisione dei social;
• aumento dell indice SEO;
• creazione di  Gallery animate;
• creazione di un Modulo di Contatto per inviare mail.

I Plugin possono essere sia gratuiti che a pagamento, per aggiungerne uno all'interno del vostro Sito web, aprite il pannello di amministrazione di WordPress, cliccate sulla voce Plugin.

Selezionando il sottomenu "Plugin Installati" potete visualizzare quelli già installati all'interno del tuo Sito Web, selezionando il sottomenu "Aggiungi Nuovo", potete aggiungere nuovi Plugin, se invece selezionate il sottomenu "Editor", è possibile modificare il codice PHP per personalizzare i Plugin installati, ma consigliamo questa operazione solo a persone molto esperte di PHP.

Quindi se volete  aggiungere un nuovo Plugin,  dovete selezionare il sottomenu "Aggiungi Nuovo" e scegliere il Plugin dalla pagina Store dei Plugin (molto simile a quella dei Temi). Il Plugin lo potete ricercare sia per nome, sia per funzionalità.

Ad esempio per aggiungere il Plugin Contact Form 7, specializzato nella creazione di Moduli di Contatto (Form), dal pannello di amministrazione di WordPress, cliccate sulla voce Plugin, selezionate il sottomenu "Aggiungi Nuovo" e cercate: Contact Form 7, come mostra l'immagine seguente:

Dopo che avete trovato il Plugin, cliccando su "Installa Adesso" parte il download.

Quando che il download è stato completato, appare il messaggio di "avvenuto download", a questo punto cliccando sulla voce "Attiva Plugin", integrate il Plugin appena scaricato nel vostro Sito Web.

Il Plugin installato apparirà come una nuova voce di Menu nel pannello di amministrazione di WordPress, per aggiungere un nuovo Modulo di Contatto al vosto Sito Web, basterà selelzionare la voce di Menu "Contatti" e cliccare sul comando "Aggiungi Nuovo", per accedere alla scheda Modulo.

Il Plugin crea automaticamente il codice che serve per creare la Form di Contatto, utilizzando il Menu evidenziato in verde nell'immagine seguente, sarà possibile aggiungere altri elementi alla Form, come ad esempio:

• Menu a Tendina
• Numeri di telefono
• Indirizzi web
• pulsanti di reCAPTCHA per evitare registrazioni da parte di BOT.

Selezionando la scheda Mail potete impostare la mail su cui arriveranno le informazioni dei moduli inviati dagli utenti, mentre nella scheda Messaggi sarà possibile creare Messaggi personalizzati per la visualizzazione di Errori da parte dell'utente durante la compilazione. Per Salvare il Modulo creato cliccate sul pulsante Salva.

Subito dopo il salvataggio del Modulo Contatti, apparirà messaggio  seguente:

Il messaggio è uno shortcode, un codice speciale che WordPress interpreta automaticamente e visualizza il Modulo Contatti. Copiate lo shortcode ed inseritelo nella pagina, nell'articolo oppure nel widget testo di default dove intendete visualizzare il Modulo Contatti.

L'immagine seguente mostra un esempio di Modulo Contatti:

<< Lezione precedente

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• APP Mania

Un'altro Aspetto importante per la creazione di un sito web con WordPress è la personalizzazione del Tema installato (Vedere lezione 4).

Per personalizzare un Tema, dal pannello di amministrazione di WordPress cliccate sulla voce Aspetto per accedere alla pagina dedicata ai temi e scegliete la sottovoce Personalizza,

apparirà una schermata simile a quella seguente: 

Sulla parte destra della finestra vedrete il vostro sito web, mentre sulla sinistra ci saranno tante voci (le voci in questione sono differenti in base al tema installato)  relative al layout scelto.

Attraverso questo menù di personalizzazione potrete cambiare il tipo di font del sito, i colori principali e secondari, potrete ridisegnare il tema a due o più colonne, cambiare il nome del sito, aggiungere un motto, l'icona scheda del browser ed inserire  i Widget.

I Widget per WordPress non sono altro che dei componenti aggiuntivi che potenziano le caratteristiche del sito web, perchè permettono di aggiungere nuove funzionalità, di base WordPress ne possiede già alcuni ma è possibile aggiungerne altri.

Per gestire i Widget dal pannello di amministrazione di WordPress cliccate sulla voce Aspetto per accedere alla pagina dedicata ai temi e scegliete la sottovoce Wideget, apparirà la schermata seguente: 

Sulla Sinistra della finestra trovate tutti i Widget disponibili, sia quelli base wordpress che quelli installati grazie al tema, come aggiungere nuovi Widget lo affronteremo nella prossima lezione.

Cliccando su un Widget è possibile aggiungerlo al sito web scegliendo la posizione all'interno del layout (Le aree Widget cambiano a seconda del Template), una volta scelto dove inserirlo cliccare sul pulsante  Aggiungi un Widget.

Se viene selezionato il Widget sulla parte destra, ovvero nella zona delle posizioni del layout, sarà possibile personalizzare il Widget con un Titolo e delle opzioni che dipendono del Widget scelto.

Ecco il Widget in questione visualizzato all'interno della nostra Home page evidenziato in rosso:

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• APP Mania

Benvenuti all'ottava lezione, in questa lezione introduciamo il modello DOM (Document Object Model) e vedremo come controllare con JavaScript i principali oggetti di una pagina HTML.
Il DOM (Document Object Model) fornisce una rappresentazione del documento HTML come un albero in cui esiste una gerarchia di oggetti, che possono essere facilmente gestiti con JavaScript.
La radice dell'albero è l’oggetto Window a cui sono collegati i diversi nodi corrispondenti agli altri oggetti del modello, come mostra l'immagine seguente:

L'oggetto Window rappresenta una finestra aperta in un Browser, che può contenre un oggetto document, che corrisponde ad una pagina HTML.

Attraverso l'oggetto document è possibile controllare i principali tag che compongono una pagina Web, basta aggiungere al tag l'attributo id ed assegnargli un nome, come mostra l'esempio seguente:

<p id="paragrafo">Questo è un paragrafo dove scriveremo un testo a piacere</p>

Qualunque tag con l'attributo id può diventare un oggetto JavaScript ed essere controllato da programma, utilizzando il metodo getElementById("nome id") dell'oggetto document, come mostra l'esempio seguente:

var p=document.getElementById("paragrafo");

Ora se supponiamo che l'oggetto p punta al tag <p id="paragrafo">Questo è un paragrafo dove scriveremo un testo a piacere</p>, possiamo sostituire il testo del paragrafo utilizzando l'attributo:

p.innerHTML="Questo testo sostituisce il precedente";

Prima di vedere un esercizio completo, dobbiamo introdurre il concetto di funzione JavaScript ed il concetto di evento.

Funzioni JavaScript
Nella stessa pagina HTML ci possono essere più programmi JavaScript, per distinguerli tra loro devono essere scritti all'interno di una struttura chiamata funzione, ogni funzione deve avere un nome diverso.

La struttura di una funzione JavaScript è la seguente:

function nome_funzione (argomenti) {

// Programma JavaScript

}

Gli argomenti di una funzione sono variabili a cui si può assegnare un valore quando la funzione viene richiamata per essere eseguita, ad esempio la funzione divisione può essere scritta nel modo seguente:

function dividi (var dividendo, var divisore) {
     var soluzione=dividendo/divisore;
     return soluzione;
}

Il comando return restituisce il risultato della divisione, questo comando è facoltativo, si usa solo quando, chi chiama la funzione, si aspetta un valore di ritorno.

Principali eventi JavaScript

Un evento è un'azione fatta da un utente che interagisce con una pagina HTML, gli eventi sono importanti perché possono essere associati a funzioni JavaScript, quando si scatena l'evento la funzione associata viene richiamata ed esguita.

Gli eventi più comuni sono quelli generati dal mouse e dalla tastiera, vediamo quali sono quelli più usati:

Eventi generati dalla tastiera

• onkeypress
• onkeydown
• onkeyup
   

Eventi generati dal mouse

• onclick
• onmousedown
• onmouseover

Eventi generati dalla finestra

• onload
• onresize
   

Eventi generati da elementi HTML

• onfocus
• onchange
• onselect

Per applicare praticamente quello che avete appreso in questa lezione, eseguite l'esercizio seguente:

<!-- sostituisci_testo.html -->
<html>
<head>
</head>
<script type="text/javascript">
function scriviTesto(){
   var p=document.getElementById("paragrafo"); //L'oggetto p punta al tag paragrafo
   var t=document.getElementById("testo");  //L'oggetto t punta al tag testo
   p.innerHTML=t.value; //Inserisce il testo scritto nella casella ti testo nel paragrafo, sostituendolo con il testo precedente
   t.value=""; //Pulisce la casella di testo
}
</script>
<body>
Il testo nel paragrafo seguente verrà sostituito da un testo a piacere.
<p id="paragrafo">Questo è un paragrafo dove scriveremo un testo a piacere</p>
Inserisci nella casella seguente il testo che vuoi scrivere:<br/>
<input type="text" id="testo" size="70" />
<input type="button" onclick="scriviTesto();" value="Scrivi"/>
</body>
</html>

Arrivederci alla prossima lezione!!!

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress