da Cristina | Mag 21, 2021 | Come creare un sito web, Web
In questa guida su come imparare a programmare, darò alcuni consigli su come addentrarsi nel mondo della programmazione.
Esistono infatti diversi linguaggi di programmazione, da quelli a basso livello a quelli di alto livello.
Ogni linguaggio di programmazione ha una propria sintassi, con delle regole ben precise. Ma sappiate che il difficile non è imparare la sintassi di ciascun programma, ma imparare a ragionare!
Eh si! Imparare a ragionare! In effetti sappiamo farlo tutti, ma occorre allenare la mente al pensiero logico ed acquisire il metodo giusto per riuscire a trovare la soluzione ai vari problemi più o meno complessi che ci vengono sottoposti. Una volta acquisito il metodo, si scopre che poi così difficile non è!
Dunque quali sono i consigli utili da seguire in questi casi?
1. Come imparare a programmare – Non avere fretta
La prima importante cosa da dire è proprio questa: non avere fretta. Occorre procedere sempre a piccoli passi e quando si ha ben compreso l’argomento, passare a quello successivo.
2. Come imparare a programmare – tanti esempi ed esercizi
Per ciascun argomento affrontare tanti esercizi con varianti diverse. Non andare oltre se almeno non si sono svolti 5 – 8 esercizi per ogni argomento.
3. Come imparare a programmare – sperimentare soluzioni diverse
Per ogni esercizio trovare soluzioni diverse, in questo modo si riesce a riflettere su quale soluzione può essere la migliore, su quale costrutto utilizzare, su quale ragionamento è più efficiente.
4. Come imparare a programmare – divertirsi
Di sicuro non può e non deve mancare il divertimento nello scrivere codice. Quindi la scelta migliore sicuramente è quella di imparare attraverso lo sviluppo di piccoli semplici giochi, qualsiasi sia il linguaggio scelto.
Detto ciò il mio consiglio è quello innanzitutto di esercitare il pensiero logico. Questo si può fare attraverso lo sviluppo di algoritmi utilizzando i diagrammi a blocchi, anche aiutandosi con qualche programma, come ad esempio Algobuild. Poi si può passare allo studio dei vari linguaggi di programmazione. La scelta dipende sicuramente da ciò che dovete andare a sviluppare in quanto ogni linguaggio ha un ambito di utilizzo.
Di seguito ecco alcuni link ai tutorial che possono essere utili per iniziare il fantastico mondo della programmazione.
Questi tutorial non vogliono sostituirsi a nessun buon libro di testo, ma semplicemente essere fonte di ispirazione per chi vuole iniziare a programmare!
Buon divertimento!
Come imparare a programmare – Tutorial
1 – Tutorial Algobuild
2 – Tutorial Scratch
3 – Tutorial Linguaggio C
4 Tutorial Linguaggio C++
5 – Tutorial Python
6 – Tutorial JavaScript
7 – Tutorial jQuery
8 – Tutorial HTML5
9 – Tutorial CSS3
10 – Tutorial Bootstrap
da Cristina | Mag 6, 2021 | CSS
Flex o flexbox CSS, come spiegato nella precedente lezione consente di creare layout molto più semplici da gestire grazie alle proprietà che si possono assegnare.
Analizziamo in dettaglio queste proprietà.
Display flex
Questa proprietà dei CSS serve ad impostare il contenitore padre in maniera flessibile.
Quindi tutti gli elementi che sono figli di un contenitore che possiedono la seguente proprietà potranno assumere determinati comportamenti dettati dall’elemento padre.
Se impostiamo questa proprietà possiamo applicare anche le seguenti proprietà sotto elencate.
Flex direction
Questa proprietà, che chiaramente funziona se l’elemento è flessibile, serve a specificare la direzione dell’asse principale (main-axis) dove si dispongono i box flessibili nel contenitore.
I valori possibili che si possono assegnare sono: row, row-reverse, column, column-reverse.
Quindi in definitiva gli elementi interni possono essere disposti orizzontalmente per righe (row) dove dunque il main-axis è l’asse orizzontale (l’asse x) oppure verticalmente per colonne (column) dove dunque il main-axis è l’asse verticale (l’asse y).
L’ordine può essere quello predefinito da sinistra verso destra oppure inverso (row-reverse e column-reverse).
Di seguito un semplicissimo esempio di utilizzo:
.flex-container {
display: flex;
flex-direction:column;
}
Al seguente link troverete una guida dettagliata di questa proprietà: https://www.codingcreativo.it/flex-direction/.
Flex wrap
Tramite questa proprietà, si specifica se i box all’interno del contenitore padre devono essere disposti su un’unica riga oppure su più righe, nel caso in cui il main-axis sia l’asse orizzontale.
Mentre nel caso in il main-axis sia l’asse verticale, si specifica se i box all’interno del contenitore possono essere disposti su più colonne.
I valori possibili sono: nowrap, wrap, wrap-reverse.
Sia per gli elementi disposti orizzontalmente, sia per gli elementi disposti verticalmente, il valore di default è nowrap. Ovvero gli elementi prendono tutto lo spazio necessario senza andare in una nuova riga o colonna.
Se specifichiamo invece il valore wrap, se il main-axis è l’asse orizzontale quando si raggiunge la fine della riga, automaticamente gli elementi successivi si posizionano sulla riga successiva. Allo stesso modo, se invece il main-axis è quello verticale quando si raggiunge la fine della colonna, automaticamente gli elementi successivi si posizionano sulla colonna successiva.
Se si utilizza wrap-reverse la disposizione degli elementi avviene in ordine inverso.
Ecco un semplice esempio d’utilizzo:
.flex-container {
display: flex;
flex-direction:column;
flex-wrap: wrap;
}
Al seguente link troverete una guida dettagliata di questa proprietà: https://www.codingcreativo.it/flex-wrap/.
Flex flow
Questa proprietà una proprietà di sintassi abbreviata per esprimere assieme le due proprietà flex-direction e flex-wrap.
Justify content
Justify-content è la proprietà che serve a stabilire come allineare i box flessibili sull’asse principale del contenitore. I valori ammissibili sono: flex-start, flex-end, center, space-between, space-around e space-evenly. Con queste proprietà lo spazio libero di fine riga può essere ridistribuito.
.flex-container {
display: flex;
flex-direction:row; /* valore di default, si può omettere */
justify-content: center;
}
Align items
align-items: questa proprietà, degli elementi flexbox, serve a stabilire come allineare i box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center e baseline.
Se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
.flex-container {
display: flex;
flex-direction:row; /* valore di default, si può omettere */
justify-content: center;
align-items:stretch;
}
Align Content
Align-content è una proprietà che serve solo per i contenitori multi-riga. Infatti serve a stabilire come allineare una riga di box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center, baseline, space-between e space-around.
Anche qui se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
Conclusioni
Nelle prossime lezioni continueremo ancora a parlare di flex parlando in dettaglio di tutte le proprietà elencate ed inoltre introdurremo le proprietà che si applicano ai box flessibili.
Alcuni link utili
Indice tutorial CSS3
Indice tutorial HTML
Fogli di stile interni, esterni ed in linea
Fogli di stile esterni
Selettori
Come impostare le pseudo-classi
Reset CSS
CSS responsive
da Cristina | Apr 11, 2021 | Javascript, Web
In questa lezione realizzeremo il gioco memory game in JavaScript, ovvero il famoso gioco di abbinamento per testare la memoria di un giocatore.
Per lo sviluppo di questo gioco utilizzeremo alcuni metodi e proprietà di JavaScript che abbiamo studiato nelle lezioni precedenti, tra cui anche metodi e proprietà utili per manipolare il DOM in JavaScript. Vedremo anche l’utilizzo delle funzioni.
Ecco dunque una demo del gioco che andremo a realizzare:
Ecco il link diretto al gioco:
Primo passaggio del gioco memory game in JavaScript
Innanzitutto occorre decidere la dimensione della matrice, nel nostro esempio realizzeremo una matrice 4 x 4. Quindi decidiamo come popolare ciascun elemento della matrice. Lo potremmo fare con dei numeri oppure con delle icone.
Scegliamo di utilizzare queste icone: https://html-css-js.com/html/character-codes/ e inseriamo alcune icone di animali. Dato che stiamo realizzando una matrice 4 x 4 mi serviranno 8 simboli, ripetuti 2 volte ciascuno.
var arrayAnimali = ['🐱', '🦉', '🐾',
'🦄', '🦋', '🐛',
'🐝', '🐬', '🐱',
'🦉', '🐾', '🦄',
'🦋', '🐛', '🐝','🐬'];
Adesso dobbiamo generare un array random e quindi ci servirà creare una funzione che generi in maniera random gli elementi e li inserisca in un array. Per fare ciò utilizzeremo l'algoritmo Fisher-Yates Shuffle, chi vuole può approfondire al seguente link: https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
function shuffle(a) {
var currentIndex = a.length;
var temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = a[currentIndex];
a[currentIndex] = a[randomIndex];
a[randomIndex] = temporaryValue;
}
return a;
}
Secondo passaggio del gioco memory game in JavaScript
Il gioco avrà un timer per i secondi trascorsi, dunque creiamo una funzione apposita, dove appena la variabile dei secondi (s) arriva a 60 incrementiamo i minuti. Quando i minuti (m) arrivano a 60 allora incrementeremo le ore (h). Notiamo che è necessario creare una variabile globale (interval) per poi ripulirla ogni volta che avviamo il gioco.
var interval;
/*creiamo la variabile globale interval
per poterla poi ripulire ogni volta che si inizia il gioco.*/
function startTimer(){
var s = 0, m = 0, h = 0;
interval = setInterval(function(){
timer.innerHTML = 'Tempo: ' + m + " min " + s + " sec";
s++;
if(s == 60){
m++;
s = 0;
}
if(m == 60){
h++;
m = 0;
}
},1000);
}
Terzo passaggio del gioco memory game in JavaScript
Adesso realizziamo la funzione startGame che si occupa di far partire il tutto.
Utilizzeremo un array di appoggio (arrayComparison) per confrontare ogni volta le due carte scoperte.
Quindi quando parte il gioco creiamo innanzitutto l'array random di animali. Poi ripuliamo la variabile interval che tiene traccia del tempo trascorso e azzeriamo l'arrayComparison.
Ripuliamo il contenuto del contenitore griglia e con un ciclo for creiamo un elemento div che all'interno contiene un altro elemento div con classe icon.
Facciamo partire il timer e per ogni card cliccata facciamo partire la funzione displayIcon:
function startGame(){
var arrayShuffle = shuffle(arrayAnimali);
clearInterval(interval);
arrayComparison = [];
var lista = document.getElementById('griglia');
while (lista.hasChildNodes()) {
lista.removeChild(lista.firstChild);
}
for(var i = 0; i < 16; i++){
var box = document.createElement('div');
var element = document.createElement('div');
element.className = 'icon';
document.getElementById('griglia')
.appendChild(box).appendChild(element);
element.innerHTML = arrayShuffle[i];
}
startTimer();
var icon = document.getElementsByClassName("icon");
var icons = [...icon];
for (var i = 0; i < icons.length; i++){
icons[i].addEventListener("click", displayIcon);
icons[i].addEventListener("click", openModal);
}
}
Facciamo partire questa funzione al click del pulsante start o quando si carica la pagina html.
document.body.onload = startGame();
Quarto passaggio del gioco memory game in JavaScript
La funzione displayicon legge tutte le icone caricate e attiva per ciascuna carta scoperta la classe show. Inoltre inserisce la carta scoperta nell'arrayComparison. Quindi determina la lunghezza dell'arrayComparison e se è due confronta le carte, se uguali aggiunge le classi find per attivare l'effetto a rotazione e disabled per disabilitare il click.
Se non sono uguali dopo 700 millisecondi rimuove la classe show:
function displayIcon(){
var iconsFind = document.getElementsByClassName("find");
var icon = document.getElementsByClassName("icon");
var icons = [...icon];
this.classList.toggle("show");
arrayComparison.push(this);
var len = arrayComparison.length;
if(len === 2){
if(arrayComparison[0].innerHTML === arrayComparison[1].innerHTML){
arrayComparison.forEach(function(elemento){
elemento.classList.add("find","disabled");
});
arrayComparison = [];
} else {
icons.forEach(function(item){
item.classList.add('disabled');
});
setTimeout(function(){
arrayComparison.forEach(function(elemento){
elemento.classList.remove("show");
});
icons.forEach(function(item){
item.classList.remove('disabled');
for(var i = 0; i < iconsFind.length; i++){
iconsFind[i].classList.add("disabled");
}
});
arrayComparison = [];
},700);
}
}
}
Finestra modale
Pensiamo adesso alla finestra modale che appare quando abbiamo indovinato tutte le combinazioni:
var modal = document.getElementById("modal");
var timer = document.querySelector(".timer");
function openModal(){
if (iconsFind.length == 16){
clearInterval(interval);
modal.classList.add("active");
document.getElementById("totalTime").innerHTML = timer.innerHTML;
closeModal();
}
}
function closeModal(){
closeicon.addEventListener("click", function(e){
modal.classList.remove("active");
startGame();
});
}
Infine la funzione playAgain che ci consente di riavviare il gioco e chiudere la finestra modale:
function playAgain(){
modal.classList.remove("active");
startGame();
}
Pagina html del gioco memory game
Nella pagina html predispongo semplicemente la sezione griglia dove si inseriranno tutte le carte, la sezione che contiene il pulsante per ricominciare il gioco ed il tempo.
<div class="container icon-grid" id="griglia"></div>
<div class="container text-center">
<input type="button" id="button" class="button" onclick=startGame() value="Ricomincia">
<div class="timer">Tempo: 0 min 0 sec</div>
</div>
<div id="modal">
<div class="content">
<h2>Congratulazioni hai risolto il gioco in </h2>
<p><span id=totalTime> </span> </p>
<p><input type="button" class="button" onclick=playAgain() value="Gioca Ancora!"></p>
</div>
</div>
<script src="script.js"></script>
Pagina CSS del gioco memory game in JavaScript
Potete personalizzare poi il CSS a vostro piacimento, vi allego quello creato nell'esempio:
.container{
width: 600px;
margin:auto;
background-color: lightgrey;
}
.text-center {
text-align: center;
}
.icon-grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.show {
visibility: visible;
opacity: 100;
}
#griglia > div{
margin: 20px 10px;
width: 120px;
height: 120px;
background-color: #ffc83d;
border: 1px solid #3889c4;
border-radius: 10px;
}
.timer {
padding: 10px 0;
}
.icon {
font-size: 80px;
text-align: center;
visibility: visible;
opacity:0;
width: 100%;
height: 100%;
cursor: pointer;
}
.disabled {
pointer-events: none;
cursor:wait;
}
.show {
animation-name: rotation-icon;
animation-duration: .5s;
background-color:white;
border: 1px solid #3889c4;
border-radius: 10px;
}
.find {
animation-name: guessed;
animation-duration: .5s;
background-color:#3889c4;
border: 1px solid #3889c4;
border-radius: 10px;
}
.button{
color: white;
font-size: 22px;
text-align: center;
margin-top: 10px;
padding: 10px;
background-color: #ffc83d;
border: 1px solid #3889c4;
border-radius: 5px;
}
.button:hover{
background-color: #16486c;
border:none;
}
#modal {
display: none;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
top: 0;
left: 0;
}
#modal.active {
display: flex;
}
#modal h2 {
margin-top: 20px;
}
@keyframes guessed{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotation-icon {
from {
transform: perspective(300px) rotate3d(0, 1, 0, 80deg);
animation-timing-function: ease-in;
}
50% {
transform: perspective(300px) rotate3d(0, 1, 0, -10deg);
animation-timing-function: ease-in;
}
to {
transform: perspective(300px);
animation-timing-function: ease-in;
}
}
Divertitevi a creare altre varianti del Memory game in JavaScript.
Alcuni link utili
Indice tutorial JavaScript
Il linguaggio JavaScript
Come utilizzare JavaScript alert
Utilizzare JavaScript prompt
Variabili in JavaScript
Gioco indovina numero in JavaScript
Gioco della morra cinese in JavaScript
Semplice quiz utilizzando gli array
Come realizzare il gioco dei dadi online
da Cristina | Gen 7, 2021 | Javascript, Web
Il metodo charAt in JavaScript utilizzato sulle stringhe restituisce un carattere di una stringa. La posizione del carattere è indicata nell’indice tra parantesi tonde.
Quindi ad esempio charAt(0) restituisce il primo carattere, mentre charAt(1) restituisce il secondo e così via.
La sintassi è dunque la seguente: stringa.charAt(indice)
Dunque il metodo accetta un parametro obbligatorio, indice, che rappresenta la posizione del carattere da ricercare in una stringa.
Esempi di utilizzo del metodo charAt in JavaScript
In questo primo esempio cercheremo il primo carattere di una stringa in una semplice frase.
Ecco quindi una possibile implementazione:
var frase = 'fare coding creativo';
var carattere = frase.charAt(0);
console.log(carattere);
In questo caso si ha come risultato la lettera f (la prima lettera della frase).
Se invece cerchiamo nella frase una posizione che non esiste, non otterremo alcun valore, come nell’esempio sotto:
var frase = 'fare coding creativo';
var carattere = frase.charAt(200);
console.log(carattere);
Ultimo carattere di una stringa con l’utilizzo del metodo charAt in JavaScript
Se vogliamo determinare l’ultimo carattere di una stringa, allora possiamo utilizzare la proprietà length sulla stringa. Infatti ricordiamo che str.length restituisce la quantità di caratteri di una stringa, quindi per ottenere l’ultimo carattere, dato che l’indice parte da 0, dobbiamo sottrarre 1.
Ecco quindi l’esempio completo:
var frase = 'fare coding creativo';
var carattere = frase.charAt(frase.length-1);
console.log(carattere);
Trasformare il primo carattere in maiuscolo con il metodo charAt ed uppercase in JavaScript
In questo esercizio estraiamo il primo carattere, lo convertiamo in maiuscolo con il metodo toUpperCase e dopo concateniamo tutto il resto utilizzando il metodo substr.
Ecco dunque l’esempio completo:
var frase = 'fare coding creativo';
var fraseUpper= frase.charAt(0).toUpperCase() + frase.substr(1);
console.log(fraseUpper);
In questa breve lezione abbiamo implementato dei semplicissimi esercizi utilizzando il metodo charAt di JavaScript, proseguendo nel tutorial troverete tanti altri esempi di applicazione.
Alcuni link utili
Indice tutorial JavaScript
Utilizzare JavaScript prompt
Gioco indovina numero in JavaScript
Gioco della morra cinese in JavaScript
Semplice quiz utilizzando gli array
Come realizzare il gioco dei dadi online
Cicli for annidati
Tavola pitagorica
da Cristina | Gen 7, 2021 | Javascript, Web
La proprietà length di JavaScript utilizzata sulle stringhe calcola la quantità di caratteri di quella determinata stringa.
La sintassi è dunque la seguente: stringa.length, dove stringa rappresenta la stringa di cui calcolare la lunghezza.
Esempio di utilizzo della proprietà length di JavaScript sulle stringhe
In questo primo esempio otterremo il numero di caratteri di una stringa qualunque presa in input.
Ecco dunque un possibile esempio in JavaScript per calcolare la lunghezza di una stringa:
var frase = 'fare coding creativo';
var lunghezzaStringa = frase.length;
console.log(lunghezzaStringa);
In questo caso nella console del browser visualizzeremo il valore numerico 20, che corrisponde al numero di caratteri della frase.
Proprietà length di JavaScript sulle stringhe – secondo esempio
Determinare la lunghezza di una stringa, se è vuota riempirla con il valore coding creativo, altrimenti stampare a video il risultato.
Supponiamo di partire da una stringa vuota:
var frase = '';
Dopo, utilizzando la proprietà length di JavaScript sulle stringhe, calcoliamo la lunghezza della stringa e memorizziamo questo dato in una variabile:
var lunghezzaStringa = frase.length;
Dato che la stringa è vuota nella variabile lunghezzaStringa sarà memorizzato il valore 0.
Quindi, utilizzando le istruzioni condizionali, verifichiamo se la stringa non è vuota e dunque se la lunghezza è diversa da 0 oppure no. Se è vero visualizziamo la lunghezza della stringa, altrimenti poniamo la stringa di partenza uguale alla frase di esempio: ‘coding creativo’.
Ecco dunque di seguito una possibile implementazione in JavaScript per calcolare la lunghezza di una stringa:
if (lunghezzaStringa != 0) {
console.log(lunghezzaStringa);
} else {
frase = 'coding creativo';
}
Conclusione
In questa lezione abbiamo studiato la proprietà length di JavaScript utilizzata sulle stringhe, allo stesso modo la seguente proprietà si può utilizzare anche sugli array. Si può trovare il semplice tutorial di esempio al seguente link: proprietà length sugli array.
Alcuni link utili
Indice tutorial JavaScript
Introduzione al tutorial JavaScript
Il linguaggio JavaScript
Come utilizzare JavaScript alert
Utilizzare JavaScript prompt
Variabili in JavaScript
Gioco indovina numero in JavaScript
Gioco della morra cinese in JavaScript
Semplice quiz utilizzando gli array
Come realizzare il gioco dei dadi online
da Cristina | Gen 6, 2021 | Web
Il metodo charCodeAt di JavaScript, da utilizzare sulle stringhe, prende come parametro opzionale un indice. Questo metodo restituisce il carattere Unicode del carattere corrispondente specificato dall’indice.
Dunque la sintassi è al seguente: stringa.charCodeAt(indice).
Se l’indice non è specificato avrà come valore di default il valore 0.
Ricordiamo che Unicode è una codifica che assegna ad ogni carattere alfanumerico un numero univoco. Questa codifica è indipendente dalla lingua utilizzata.
Per maggiori informazioni si rimanda al seguente link: codifica unicode.
Esempi di utilizzo del metodo charCodeAt in JavaScript
In questo primo esempio otterremo l’Unicode del primo carattere di una stringa.
Ecco quindi una possibile implementazione del metodo charCodeAt in JavaScript:
var frase = 'fare coding creativo';
var carattere = frase.charCodeAt(0);
console.log(carattere);
Dunque, nella console del browser, otteniamo come risultato il valore 102, che è il corrispondente carattere Unicode della lettera f.
Utilizzo del metodo charCodeAt in JavaScript nell’ultimo carattere di una stringa
In questo esempio otteniamo la codifica Unicode dell’ultimo carattere di una stringa presa in input.
Per fare ciò occorre utilizzare la proprietà length sulla stringa che, ricordiamo, restituisce il numero di caratteri di una determinata stringa.
Ecco quindi l’esempio completo:
var frase = 'fare coding creativo';
var carattere = frase.charCodeAt(frase.length-1);
console.log(carattere);
In questo caso si ottiene il valore 101, che corrisponde alla codifica Unicode della lettera o.
Se proviamo ad ottenere la codifica Unicode di un indice che non esiste allora si avrà il valore NaN (Not a Number).
Conclusioni
In questa lezione abbiamo visto alcuni esempi pratici sull’utilizzo del metodo charCodeAt in JavaScript, nelle prossime lezioni vedremo tanti altri esempi con altri metodi sulle stringhe e sugli array.
Alcuni link utili
Indice tutorial JavaScript
Utilizzare JavaScript prompt
Gioco indovina numero in JavaScript
Gioco della morra cinese in JavaScript
Semplice quiz utilizzando gli array
Come realizzare il gioco dei dadi online
Cicli for annidati
Tavola pitagorica