OROLOGIO DIGITALE JS
In questa terza puntata andremo a vedere la realizzazione di un orologio digitale
fatto con Javascript. Nella pagina web avremo quindi rappresentati le ore , i minuti
e i secondi differenziati in 2 periodi: AnteMeridian e PostMeridian.
Come facciamo a importare l'ora effettiva sul nostro script Javascript?
Per prendere l'ora reale e riportarla andremo ad utilizzare la funzione new Date().
Questa funzione ci restituisce una variabile con varie proprietà come ore, minuti e secondi.
la funzione espleterà il suo compito compiendo 2 passaggi: andrà a prendere l'ora attuale , e
successivamente la andrà a formattare e ad assegnare i valori richiamati dal nostro foglio html.
In questo mini-progetto andremo a vedere come javascript può interfacciarsi con variabili esterne
come in questo caso l'ora o la data, e riportarle nel nostro progetto a nostro uso e consumo.
Ora che qualcosa abbiamo visto iniziamo a dare i nomi alle variabili in inglese , è importante abituarsi ad usare l'inglese
Ora , andiamo a creare le 3 cartelle con il nostro html , il foglio di stile css e lo script javascript.
Andiamo ad aprire il nostro file html , andiamo a compilare i collegamenti al file .css e al nostro script come solito.
aggiungiamo un banner che andrà ad indicare cosa stiamo visualizzando , come riportato qui sotto:
Ora andiamo ad aggiungere il css , come solito nella parte di css vi invito a metterci un po del vostro , in modo da costringere la nostra testa a fare un pò di esercizio.
su #clock andiamo a definire le caratteristiche di stile del nostro orologio , idem per il banner.
sul tag span andiamo a mettere il margine , e su body scegliamo il colore di sfondo come fatto qui sotto:
Ora passiamo al nostro script js, vi ho proposto un metodo alternativo a tutte le altre guide presenti sul web in merito a questo progetto ,
rispetto a quest'ultime qui tutto il lavoro è molto semplificato , con il medesimo risultato,
se volevamo potevamo complicarci la vita parecchio , ma io sono per la filosofia minimo sforzo massimo risultato.
Come già accennato , tramite le funzionalità "new Date" e "get..." andiamo a prenderci l'ora e i minuti reali , e a formattarli all'interno del nostre variabili ( currentTime , hours , minutes,seconds).
Successivamente andiamo ad aprire un ciclo if per porre le condizioni necessarie a suddividere l'orario nei 2 periodi "AM" e "PM" .
Nella variabile clockTime , andiamo a stendere la disposizione con la quale visualizzeremo le nostre variabili all'interno del nostro orologio e infine il "getElementByid" ci servirà per riportare il tutto
nel nostro file html , per la precisione nel 'div' dove è richiamato il nostro 'clock'.
ecco qui la nostra funzione:
benissimo , ora che abbiamo tutti gli elementi predisposti , non ci resta che aprire il file html con un browser , e se abbiamo fatto tutto correttamente , dovrà risultarci una cosa più o meno di questo genere:
Sullo screen non si piò vedere , ma l'ora era quella effettiva , con questo progetto abbiamo visto come Javascript , tramite metodi predisposti , può interagire e integrare valori
esterni.
congratulazioni! hai realizzato il tuo orologio con javascript , continua a studiare duro ; Ci vediamo alla prossima puntata!
