Guida Javascript HTML #1 MinitutorialJavascript - citOfTheDay

MRPants

Helper
4 Gennaio 2015
128
19
105
126
Ultima modifica da un moderatore:
Inizio con la prima delle mini guide che spero di riuscire a portare nei prossimi mesi , quello che ho intenzione fare è di portare una serie di piccoli e veloci
progetti javascript con un livello di "difficoltà" a salire , in modo da poter nel corso delle varie puntate alzare la complessità dello script.

L'obbiettivo è apprendere le basi e capire i meccanismi di funzionamento di js , lavorando "handsOn" sul codice , naturalmente quelle fornite negli screen
sono delle bozze ridotto all'osso per rendere il più sintetica possibile la spiegazione , nulla vieta di aggiungere dettagli di stile e/o altri contenuti all'interno del
nostro script, e sarebbe interessante poter discutere sotto delle possibili evoluzioni del progetto.

Non mi perderò in inutili introduzioni su cosè javascript perchè è tutto materiale a portata di googlata , mi limiterò a riportare qui sotto dei link utili
per i temi trattati nel progetto:

https://www.w3schools.com/js/ <-- particolarmente consigliato x chi alle prime armi con i linguaggi web

CIT DEL GIORNO

Andiamo a realizzare una pagina web interattiva ,dove tramite il click di un bottone andiamo a generare una citazione
scelta in modo casuale da una lista ( array ) di nostra creazione.
Come prima cosa creiamo una cartella con il nome del nostro progetto , e all'interno di questa cartella andiamo a creare 3 file che saranno
rispettivamente la struttura front.end del progetto (.html) , il foglio di stile (.css) , e lo script che andrà a compiere l'azione di generazione
della citazione (.js).

come prima cosa , nel nostro file .html andiamo a stendere la struttura della nostra pagina , riportando i richiami ai 2 file esterni di stile e script ,
e mettendo un bottone che vada ad attivare la funzione necessaria all'interno dello script che andremo poi a fare.
compile il foglio html come riportato nell'immagine qui sotto:
Screenshot from 2022-02-06 14-25-13.png


non dimentichiamoci gli output per riportare gli elementi del nostro array in corretto ordine*

una volta finito di creare il nostro html , gli diamo un pò di colore con un css , oltre che i normali passaggi per centrare e disporre i vari elementi , (https://www.w3schools.com/css/default.asp) andiamo ad aggiungere al nostro "bottone" la funzionalità "hoover" , ovvero il cambio di colore
della nostro bottone al passaggio del mouse

Screenshot from 2022-02-06 14-28-06.png



benissimo , ora abbiamo il nostro progetto con un pò di colore , dovreste avere una cosa di questo genere:

Screenshot from 2022-02-06 14-28-41.png



Ora arriva il bello , ovvero andiamo a compilare il nostro script per l'azione che serve a questa pagina , per prima cosa nel nostro file js andiamo a creare una variabile array
"arrayofQuotes" che andrà a contenere tutte le nostre citazioni preferite , qui data sfogo alla vostra fantasia , ricordatevi di copiare la citazione su "quotes" e il nome
del nostro idolo su "author" , come riportato qui sotto

Screenshot from 2022-02-06 14-44-16.png


mi raccomando , la virgola dopo la parentesi graffa! la virgola non và messa all'ultima parentesi graffa dell'ultimo elemento del nostro array ( in questo caso è presente dopo la cit di Wilde perchè non era l'ultima ) , all'interno della graffa la virgola và messa solo dopo l'autore ; lo sottolineo perchè le virgole sono l'errore comune all'inizio.

una volta messe tutte le nostre citazioni , andiamo a creare le 2 funzioni che sceglieranno in modo casuale una citazione dalla nostra lista , e la riporteranno
suddivisa in autore e aforisma dopo il click del bottone.
Math.floor è uno dei metodi matematici di js per la randomizzazione di una selezione casuale da una lista definita ( https://www.html.it/pag/47126/math-funzioni-matematiche-in-javascript/ )
Raccomando di utilizzare VisualStudio code per gli inizi , è un editor molto utile che ci dà un enorme vantaggio con la scrittura guidata del nostro codice

Screenshot from 2022-02-06 14-52-37.png



finiamo di completare la seconda funzione che và ad inserire il nome e l'autore della citazione nella nostra pagina, come anche riportato nei 2 paragrafi all'interno del nostro html

Screenshot from 2022-02-06 15-05-01.png


Salviamo tutto , e apriamo il nostro file html con Google Chrome:
Ora dovremmo avere una cosa del genere:

Screenshot from 2022-02-06 15-06-43.png
Screenshot from 2022-02-06 15-06-32.png



Abbiamo realizzato un piccolo script , che già ci ha introdotto in quello che è il funzionamento di un array e di una funzione Math. molto utilizzate in javascript
per compiere operazioni matematiche.
I modi poi di rendere più complesso il tutto sono infiniti , penso che questo per inziare possa andare più che bene

Ottimo , fatemi sapere se ne volete altri più avanti e se questo format di tutorial con gli screen può andare bene , grazie dell'attenzione e buon coding a tutti.
 
  • Mi piace
Reazioni: 0xbro