Cerca:
Mostriamo un messaggio di benvenuto dinamico agli utenti con javascript | Massimo Martini
Web designer e Studio grafico freelance a Codigoro (Fe), realizzazione siti web, grafica personalizzata più adatta alle tue esigenze, ottimizzazione SEO.
Pregettazione, costruzione, realizzazione, consulenza, web, grafica, seo, ottimizzazione, internet, siti, sito, azienda, aziendale, personale, hobby, passioni, privato, codigoro, comacchio, ferrara, lidi, lido, lidi ferraresi, lido delle nazioni, lido di spina, lido di pomposa, lido di volano, comunicazione digitale
11640
post-template-default,single,single-post,postid-11640,single-format-standard,edgt-core-1.0.1,ajax_fade,page_not_loaded,,hudson-ver-2.2, vertical_menu_with_scroll,smooth_scroll,fade_push_text_right,grid_1300,blog_installed,wpb-js-composer js-comp-ver-5.6,vc_responsive
 
Mostriamo un messaggio di benvenuto dinamico agli utenti con javascript
Feb 23 2018

Mostriamo un messaggio di benvenuto dinamico agli utenti con javascript

Con questo articolo, scriveremo un semplice codice, dove Mostriamo un messaggio di benvenuto dinamico agli utenti con javascript. Possiamo aggiungere lo script con semplicità alle nostre pagine web, rendendole più gradevoli agli utenti che la visiteranno.

Iniziamo subito.

 

Il codice

Sotto potete vedere l’immagine del codice completo, è suddiviso in due parti:

  • il codice HTML
  • il codice Javascript

 

Mostriamo un messaggio di benvenuto dinamico agli utenti con javascript

 

Cerchiamo Di Comprenderlo.

  1. Creiamo il codice HTML contenitore, che ospiterà il nostro messaggio, al tag html <div></div>,  gli assegnamo un attributo id in modo che venga individuato alla richiesta javascript.
  2. Fra i tag <script></script> andiamo a creare il nostro codice javascript, che eseguirà tutto il lavoro.
  3. Creiamo la variabile var oggi che ospita l’istanza di creazione dell’oggetto data(). L’oggetto data è già presente nei nostri browser, quindi non è necessario crearlo.
  4. Creiamo la variabile var ora che ospita la chiamata dell’oggetto data appena creato, che associato al metodo get.Hours(), assegna alla variabile var ora  il valore dell’ora corrente.
  5. Inizializziamo la variabile var saluto che ospiterà il nostro messaggio. Per il momento la lasceremo vuota, per l’interprete javascript sarà Undefined.
  6. Utilizziamo l’istruzione condizionale IF – IF ELSE – ELSE per confrontare la variabile var ora (che contiene il valore dell’ora corrente) con le condizioni desiderate, e assegnare, in base ai casi, un valore alla variabile var saluto precedentemente inizializzata.
    Esempio:
    Se la variabile ora è maggiore di 18, assegneremo il valore Buonasera;
    Se la variabile ora è maggiore di 12, assegneremo il valore Buon pomeriggio;
    ecc..
  7. L’istruzione condizionale ELSE, ho inserito un backup, nel caso in cui il valore non risponda a nessuna delle condizioni specificate.
  8. Creiamo la variabile var el che ospita l’oggetto document (che è la nostra pagina web), associato al metodo getElementById() che individua il nostro contenitore html creato prima, passandogli il valore ‘messaggio’ che è l’id del nostro contenitore.
  9. Alla variabile el concateniamo l’attributo textContent, che ci permette di assegnargli il valore della variabile saluto da mostrare.

 

Fatto! Con queste poche righe di codice, abbiamo creato una funzione presente in tutti i siti web.

 

Spero che questo piccolo tutorial possa esservi di aiuto.

 

Seguimi sui miei social Facebook, Twitter, Linkedin e Pinterest per rimanare aggiornato sui nuovi lavori consegnati e work in progress!

Condividi post