Lo script che presentiamo è un particolare gestore di news. Ovviamente, parlando di javascript che è un linguaggio lato client, non potremo inserire o levare news dinamicamente ma potremo comunque mostrare delle notizie predefinite in base al giorno, con in più la possibilità di associare un link per ogni messaggio.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Tutto il codice va inserito direttamente nel corpo della pagina, nel punto in cui vogliamo far apparire il box delle news
<table class="tabella" border="0" cellspacing="3" cellpadding="0" align="center" bgcolor="#c6c6c6" class="tabella">
<tr>
<td>
<form name="dailyinfo">
<table class="tabella" border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
<td><strong>News del giorno</strong><br />
<textarea rows="5" name="dailycontent" cols="40" wrap="virtual" class="box"></textarea></td>
</tr>
<tr>
<td>
<table class="tabella" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><a href="javascript:moreinfo()"><cite>Maggiori informazioni</cite></a></td>
<td><div align="left"><p><input type="text" name="cdate" size="9" class="box" onFocus="this.blur();"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
<!--
var dailyinfo=new Array()
var dailyinfolink=new Array()
dailyinfo[1]='Messaggio per il giorno 1 del mese correntè
dailyinfo[2]='Messaggio per il giorno 2 del mese correntè
dailyinfo[3]='Messaggio per il giorno 3 del mese correntè
dailyinfo[4]='Messaggio per il giorno 4 del mese correntè
dailyinfo[5]='Messaggio per il giorno 5 del mese correntè
dailyinfo[6]='Messaggio per il giorno 6 del mese correntè
dailyinfo[7]='Messaggio per il giorno 7 del mese correntè
dailyinfo[8]='Messaggio per il giorno 8 del mese correntè
dailyinfo[9]='Messaggio per il giorno 9 del mese correntè
dailyinfo[10]='Messaggio per il giorno 10 del mese correntè
dailyinfo[11]='Messaggio per il giorno 11 del mese correntè
dailyinfo[12]='Messaggio per il giorno 12 del mese correntè
dailyinfo[13]='Messaggio per il giorno 13 del mese correntè
dailyinfo[14]='Messaggio per il giorno 14 del mese correntè
dailyinfo[15]='Messaggio per il giorno 15 del mese correntè
dailyinfo[16]='Messaggio per il giorno 16 del mese correntè
dailyinfo[17]='Messaggio per il giorno 17 del mese correntè
dailyinfo[18]='Messaggio per il giorno 18 del mese correntè
dailyinfo[19]='Messaggio per il giorno 19 del mese correntè
dailyinfo[20]='Messaggio per il giorno 20 del mese correntè
dailyinfo[21]='Messaggio per il giorno 21 del mese correntè
dailyinfo[22]='Messaggio per il giorno 22 del mese correntè
dailyinfo[23]='Messaggio per il giorno 23 del mese correntè
dailyinfo[24]='Messaggio per il giorno 24 del mese correntè
dailyinfo[25]='Messaggio per il giorno 25 del mese correntè
dailyinfo[26]='Messaggio per il giorno 26 del mese corrente.nClicca per visitare il sito.'
dailyinfo[27]='Messaggio per il giorno 27 del mese corrente.nClicca per visitare il sito.'
dailyinfo[28]='Messaggio per il giorno 28 del mese corrente.nClicca per visitare il sito.'
dailyinfo[29]='Messaggio per il giorno 29 del mese corrente.nClicca per visitare il sito.'
dailyinfo[30]='Messaggio per il giorno 30 del mese correntè
dailyinfo[31]='Messaggio per il giorno 31 del mese correntè
dailyinfolink[26]="https://www.html.it/"
dailyinfolink[27]="http://freephp.html.it/"
dailyinfolink[28]="http://freeasp.html.it/"
dailyinfolink[29]="http://forum.html.it/"
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getday()
var month=mydate.getMonth()+1
if (month<10)
month="0"+month
var daym=mydate.getdate()
document.dailyinfo.cdate.value=daym+"/"+month+"/"+year
document.dailyinfo.dailycontent.value=dailyinfo[daym]
function moreinfo(){
if (dailyinfolink[daym])
window.location=dailyinfolink[daym]
else
alert("Non ci sono notizie aggiuntive")
}
//-->
</script>
Il codice è composto fondamentalmente da due parti: una che contiene del normale codice html per mostrare il box ed una scritta in javascript.
Analizziamo la prima sezione.
Dopo aver creato, secondo i nostri gusti, la tabella con il form per il box delle news dovremo stare attenti a rispettare certi parametri; vediamo quali:
<form name="dailyinfo">
<table class="tabella" border="0" cellspacing="3" cellpadding="0"
align="center">
<tr>
<td><strong>News del giorno</strong><br />
<textarea rows="5" name="dailycontent" cols="40" wrap="virtual"
class="box"></textarea></td>
</tr>
<tr>
<td>
<table class="tabella" border="0" width="100%" cellspacing="0"
cellpadding="0" align="left">
<tr>
<td><a href="javascript:moreinfo()"><cite>Maggiori
informazioni</cite></a></td>
<td><div align="left"><p><input type="text"
name="cdate" size="9" class="box" onFocus="this.blur();"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<form name="dailyinfo">
il form deve chiamarsi "dailyinfo"
<textarea rows="5" name="dailycontent" cols="40" wrap="virtual"></textarea>
la textarea dovrà avere come attributo il nome "dailycontent"
<a href="javascript:moreinfo()">Maggiori informazioni</a>
il link per richiamare un eventuale sito associato alla news dovrà essere strutturato così (si richiama la funzione "moreinfo()")
<input type="text" name="cdate" size="9">
il campo che contiene la data si chiamerà "cdate"
Per quando riguarda lo script vero e proprio (che deve essere messo dopo il form delle news) vediamo cosa modificare
dailyinfo[1]='Messaggio per il giorno 1 del mese correntè
dailyinfo[2]='Messaggio per il giorno 2 del mese correntè
dailyinfo[3]='Messaggio per il giorno 3 del mese correntè
dailyinfo[n]='Messaggio per il giorno n del mese correntè
...
Ad ogni giorno del mese è associato un Array. Il giorno corrispondente è indicato dal numero tra le parentesi quadrate e basterà personalizzare tutti gli array inserendo il messaggio, o la news che vogliamo, tra i singli apici.
Se vogliamo inserire un collegamento (esterno o interno) basterà creare dei nuovi Array, con nome diverso rispetto ai precedenti ma con numero corrispondente a quello della news che vogliamo linkare.
Facciamo un esempio: supponiamo di voler collegare la notizia del 26 e 27 del mese ad un sito esterno.
Subito dopo tutti gli Array "dailyinfo" inseriamo quanto segue:
dailyinfolink[26]="https://www.html.it/"
dailyinfolink[27]="http://freephp.html.it/"
Se vogliamo associare un link anche alla news del 29 aggiungeremo semplicemente una nuova riga (cambieremo il numero tra parentesi ovviamente)
dailyinfolink[29]="http://www.freeasp.it/"
Prima di concludere due suggerimenti:
1) se, nella news all'interno della textarea, abbiamo la necessità di andare a capo con il testo, ricordo che non potremo inserire un tag
dato che non verrebbe interpretato. Per risolvere il problema basterà usare il carattere n che corrisponde, appunto, ad un nuovo paragrafo.
2) se dobbiamo usare degli apici singoli all'interno degli Array delle notizie, dovremo farli precedere da un backslash () come in questo esempio:
dailyinfo[1]='L'altro giorno c'era l'amico... '
Altre modifiche non sono necessarie.
