Pubblicato il 19/01/16e aggiornato il

Javascript per mostrare motti, aforismi o frasi celebri in modo casuale in un sito.

Come mostrare in un blog di Blogger o di Wordpress frasi celebri, motti o aforismi casuali con un javascript
Nel precedente articolo abbiamo visto come mostrare delle immagini con collegamenti in modo casuale in una pagina o in un widget del blog. In questo post invece delle immagini casuali creeremo un javascript per dei testi casuali.

Si tratta di una personalizzazione molto divertente per mostrare per esempio delle frasi celebri a rotazione tutte le volte che si apre una pagina del sito. Una idea interessante per blog letterari ma anche per siti politici con aforismi di personalità pubbliche. Il concetto è sostanzialmente identico a quello già visto per la rotazione random delle immagini. Verrà creato un codice in cui digitare le frasi celebri. Potranno anche essere scelti la dimensione dei caratteri e il colore.

Nel javscript non si potrebbero inserire un testo con virgolette o apostrofo ma come vedremo si può riuscire a farlo lo stesso con un semplice escamotage. Il codice che propongo è il seguente:

<p style="color:#036; font-size:110%; font-weight: 600;">
<script language="JavaScript">
Aforisma = new Array()
Aforisma[0] = "Digita Aforisma 0",
Aforisma[1] = "Digita Aforisma 1",
Aforisma[2] = "Digita Aforisma 2",
Aforisma[3] = "Digita Aforisma 3",
Aforisma[4] = "Digita Aforisma 4",
Aforisma[5] = "Digita Aforisma 5"
casuale = Math.random() * (Aforisma.length)
casuale = Math.floor(casuale)
document.write(Aforisma[casuale])
</script>
</p>

dove il testo delle frasi che saranno visualizzate è colorato di rosso.

javascript-testo-casuale
Come si vede dallo screenshot precedente creato con Real Time Editor le parole accentate sono supportate mentre per gli apostrofi e le virgolette dobbiamo procedere diversamente. Nel javascript si usa il carattere cosiddetto back-slash o barra rovesciata ( \ ) per disattivare il carattere successivo. In altri termini  il celebre testo seguente di Edmond Rostand tradotto in italiano

Che cos'è un bacio? Un apostrofo rosa tra le parole "t'amo"

non potrebbe essere inserito nel javascript così com'è. Dovrebbe essere modificato in questo modo

Che cos\'è un bacio? Un apostrofo rosa tra le parole \"t\'amo\"

con tutti i caratteri non ammessi preceduti dalla slash rovesciata \.   Nel javascript ho inserito 6 testi ma se ne possono aggiungere altri mantenendo la stessa sintassi. Il settimo sarebbe

Aforisma[6] = "Digita Aforisma 6"

Nel codice si possono personalizzare il codice del colore, la dimensione dei caratteri (110%) e il peso del carattere modificando il numero 600 oppure sostituendolo con bold per il grassetto. Ricaricando la pagina con F5 si può testare il funzionamento dello script

Il codice, per quello che riguarda gli utenti di Blogger, può anche essere incollato su Layout > Aggiungi un gadget > Base > HTML/Javascript per poi posizionarlo in una sidebar o nel footer. Con Wordpress si incolla invece su Aspetto > Widget > Testo e si posiziona a piacere.




3 commenti :

  1. Fantastico, signor Ernesto!
    Domanda: è possibile inserire anche dei link collegati agli aforismi, combinando questo codice con quello dell'articolo precedente "immagini con collegamenti"?
    Grazie!

    RispondiElimina
    Risposte
    1. No, bisognerebbe crearlo ex novo. Però ti do una idea. Potresti creare delle immagini che mostrino un testo con gli aforismi prescelti con un programma di grafica come Photoshop, Gimp, Paint.NET, ecc e linkare quelle immagini con il javascript precedente :)
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.