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
www.w3schools.com
/https://www.html.it/app/uploads/2018/08/javascript%402x-1.png)
www.html.it
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:
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
benissimo , ora abbiamo il nostro progetto con un pò di colore , dovreste avere una cosa di questo genere:
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
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
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
Salviamo tutto , e apriamo il nostro file html con Google Chrome:
Ora dovremmo avere una cosa del genere:
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.
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
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Guida JavaScript
Guida a JavaScript, il linguaggio di programmazione per lo sviluppo di siti Web dinamici; ecco i tutorial e gli esempi con linee di codice.
www.html.it
CIT DEL GIORNO
Andiamo a realizzare una pagina web interattiva ,dove tramite il click di un bottone andiamo a generare una citazionescelta 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:
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
benissimo , ora abbiamo il nostro progetto con un pò di colore , dovreste avere una cosa di questo genere:
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
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
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
Salviamo tutto , e apriamo il nostro file html con Google Chrome:
Ora dovremmo avere una cosa del genere:
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.
