JAVASCRIPT #5 Realizzazione del gioco della Roulette HTML, CSS e JAVASCRIPT
Obiettivo: Realizzare un programma che implementi il gioco della Roulotte utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.
Codice:
Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco della Roulotte. Nello specifico, la pagina è caratterizzata da:
Un titolo principale (“Roulette”).
Immagine della roulette (che si trova in img/Roulette.png).
Visualizzazione del saldo (fisso a 100$).
Input per inserire un numero proposto dal giocatore.
Bottone SPIN per avviare l’estrazione. Premendo il tasto SPIN viene eseguita la funzione Spin() che genera un numero randomico e lo scrive nel relativo spazio.
Visualizzazione del numero estratto, inizialmente impostato su “0”.
Modifiche: Al fine di terminare il gioco è necessario introdurre una serie di modifiche:
Completare il codice gestendo i casi di vittoria e sconfitta (il giocatore perde dei soldi nel caso di sconfitta oppure vince dei soldi nel caso di vittoria)
Aggiungere una animazione legata alla vincita o alle possibili vincite.
Dare la possibilità all’utente di scegliere la puntata.
Dare la possibilità all’utente di scegliere se puntare sul colore oppure sul numero
JAVASCRIPT #4 Realizzazione del gioco del TRIS HTML, CSS e JAVASCRIPT
Obiettivo: Realizzare un programma che implementi il gioco del TRIS utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.
Codice:
Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco del TRIS. Nello specifico, la pagina è caratterizzata da:
Nove immagini rappresentanti la matrice 3×3 del TRIS (inizialmente impostate su img/0.png immagine vuota). Premendo su ogni immagine viene lanciata una funziona denominata Premuto alla quale viene passato un parametro che riporta l’informazione del pulsante che è stato premuto attraverso un identificativo da 0 a 8. Premendo i pulsanti cambiano le immagini riportate sul matrice 3×3 diventano rispettivamente croci oppure cerchi.
Due paragrafi (i.e., giocatore1 e giocatore2 che dovrebbero riportare lo status delle vittorie di ogni giocatore).
Modifiche: Al fine di terminare il gioco è necessario introdurre una serie di modifiche:
Completare il codice associando la funzione Premuto a tutte le immagini della matrice 3×3.
Introdurre un meccanismo utile per determinare il giocatore vincitore.
Impedire all’utente di premere una casella già scelta.
Aggiungere una animazione legata alla vincita o alle possibili vincite.
Aggiungere un contatore delle vittorie.
Introdurre una intelligenza artificiale per giocare contro il computer.
JAVASCRIPT #3 Realizzazione di una Slot Machine utilizzando HTML, CSS e JAVASCRIPT
Obiettivo: Realizzare un programma che implementi una Slot Machine utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.
Codice:
Viene in seguito illustrato il codice utilizzato per implementare una semplice versione di una Slot Machine. Nello specifico, la pagina è caratterizzata da:
Tre immagini riportanti i simboli di una slot machine (inizialmente impostati su img/0.png)
Un campo input (disabilitato) sul quale viene visualizzato il saldo.
Un pulsante “Spin” il quale avvia la funzione javascript Spin(). Quando il pulsante viene premuto, il saldo diminuisce di 1$ e vengono generati tre numeri casuali per determinare il risultato della slot. Se il numero è inferiore a 50, viene imposta l’immagine su “img/0.png”, altrimenti su “img/1.png”. Inoltre viene riprotodotto un suono di spinning (spin.wav).
È presente anche un’area per inserire soldi, ma la funzione non è ancora implementata.
Modifiche: Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:
Completare il codice aggiungendo le immagini mancanti e gestire in modo corretto le probabilità di vincita e le relative vincite.
Introdurre una legenda riportante le possibili vincite.
Introdurre una pagina di accesso alla slot machine nella quale deve essere riportata la data dell’utilizzatore. L’utente può accedere alla solto solo nel caso in cui risulti maggiorenne.
Aggiungere una animazione legata alla vincita o alle possibili vincite.
Modificare l’aspetto della slot introducendo un numero maggiore di immagini (ad esempio matrice 3×3)
JavaScript è un linguaggio di programmazione versatile e potente, utilizzato principalmente per creare contenuti interattivi e dinamici su pagine web. Introdotto nel 1995, è diventato uno dei pilastri dello sviluppo web, insieme a HTML e CSS. Grazie alla sua natura interpretata e alla compatibilità con tutti i browser moderni, JavaScript permette di manipolare il DOM (Document Object Model) per aggiornare contenuti, gestire eventi e migliorare l’esperienza utente senza dover ricaricare la pagina. Con l’avvento di tecnologie come Node.js, JavaScript è andato oltre il frontend, consentendo lo sviluppo di applicazioni server-side e multipiattaforma. Inoltre, le numerose librerie e framework, come React, Angular e Vue.js, hanno ampliato le possibilità di sviluppo, rendendolo un linguaggio essenziale per i programmatori moderni.
Codice HTML: Il codice HTML presentato definisce una semplice pagina web che consente agli utenti di effettuare una somma tra due numeri utilizzando JavaScript. Ecco i dettagli del suo funzionamento:
Titolo della pagina: È presente un’intestazione <h1> che descrive lo scopo della pagina: “Effettuare una semplice somma in Javascript”.
Input: Due elementi consentono agli utenti di inserire i numeri da sommare. Nello specifico questi due elementi caratterizzati dal tag input sono identificati da due differenti identificativi inputA e inputB. Il primo campo viene inizializzato con un valore predefinito di 0. Il secondo campo, con un valore predefinito di 1.
Output: L’output, viene gestito attraverso un paragrafo caratterizzato dall’identificativo output. Tale valore viene modificato dallo script javascript e definito come la somma dei due input.
Pulsante: Un pulsante viene utilizzato per lanciare lo script javascript il quale presi i valori dei due input calcola il valore dell’output e va a modificare il relativo codice HTML.
Codice JAVASCRIPT: La funzione document.getElementById() è uno dei metodi più utilizzati da Javascript. Tale funzione consente di selezionare un elemento HTML specifico della pagina utilizzando il suo attributo id. Questo metodo è ampiamente utilizzato per interagire e manipolare dinamicamente gli elementi del documento.
Ad esempio per ottenere il valore di uno specifico elemento è possibile utilizzare il seguente codice:
var a = parseInt(document.getElementById(“inputA”).value);
Mentre per modificare un elemento della pagina HTML si utilizza il seguente codice:
L’effetto parallax è una tecnica di design sempre più utilizzata nella realizzazione di siti web per creare esperienze visivamente accattivanti e dinamiche. Si basa su un’illusione ottica in cui gli elementi di sfondo si muovono più lentamente rispetto agli elementi in primo piano quando si scorre la pagina, dando una sensazione di profondità e tridimensionalità. Questo effetto migliora l’estetica del sito e può guidare l’attenzione dell’utente verso sezioni specifiche, contribuendo a raccontare una storia o enfatizzare determinati contenuti. Tuttavia, è importante utilizzarlo con moderazione, poiché un uso eccessivo può rallentare le prestazioni del sito o distrarre l’utente dall’obiettivo principale.
Codice:
Viene in seguito riportato il codice HTML utile per realizzare l’effetto parallax in una singola immagine. Nello specifico, nel tag <style> si definisce lo stile per l’elemento con classe .parallax. Sono in seguito riportate le principali proprietà di questa classe:Proprietà dello stile: background-image: . min-height: L. background-attachment: fixed: . background-position: center: L’immagine è centrata. background-repeat: no-repeat: L’immagine non viene ripetuta. background-size: cover: L’immagine occupa l’intera area disponibile, mantenendo le proporzioni.</p>
Background-image: URL dell’immagine utilizzata come sfondo.
Min-height: L’altezza minima della sezione è impostata a 750px.
Background-attachment: fixed Impostando questo valore a fixed, l’immagine di sfondo rimane fissata mentre il contenuto si muove durante lo scrolling, creando l’effetto parallax.
Background-position: center: L’immagine è centrata
Background-repeat: no-repeat: L’immagine non viene ripetuta
Background-size: cover: L’immagine occupa l’intera area disponibile, mantenendo le proporzioni.
HTML #6 Realizzare applicazioni responsive utilizzando il Sistema a Griglia
Obiettivo: Applicare i principi delle media queries per creare un sistema a griglia per applicazioni complesse.
Il sistema a griglia realizzato con le media queries è un approccio efficace per rendere i layout web responsivi e adattabili a diversi dispositivi. Grazie a questa tecnica, è possibile modificare la struttura della pagina in base alle dimensioni dello schermo: ad esempio, su schermi di grandi dimensioni, una griglia potrebbe avere più colonne per sfruttare al meglio lo spazio disponibile, mentre su dispositivi mobili le stesse colonne potrebbero ridursi a una sola, impilando i contenuti in modo verticale per una migliore leggibilità. Nel caso specifico, non viene utilizzato nessun framework o approcci bassati su flexbox o CSS Grid piuttosto viene costruito un proprio sistema utile a comprendere dal punto didattico come funzionano questi approcci.
Schermi LarghSchermi MediSchermi Piccoli
Codice:
Viene in seguito riportato il codice CSS utile per realizzare il sistema a griglia. Questo codice crea una griglia responsive utilizzando classi per colonne e media queries per adattare il layout a diversi schermi: Nello specifico interessanti elementi presenti nel codice sono:
Box Sizing: L’elemento universale * { box-sizing: border-box; } assicura che padding e bordi siano inclusi nelle dimensioni totali degli elementi, facilitando la gestione dei layout.
Paragrafi: Gli elementi hanno uno sfondo giallo chiaro, un’altezza di 150px, nessun margine e un bordo nero.
Righe: La classe .row è impostata per occupare l’intera larghezza disponibile (width: 100%).
Colonne: – Per i larghi schermi (min-width: 1200px), le colonne .col-lg-* vengono impostate con dimensioni proporzionali per realizzare una griglia di 12 colonne, con classi da .col-lg-1 (8.33%) a .col-lg-12 (100%). Ogni colonna ha il float: left per allineare le colonne affiancate. – Per i medi schermi (min-width: 950px e max-width: 1199px), le classi .col-md-* seguono la stessa logica, adattandosi a dispositivi di medie dimensioni. – Per i piccoli schermi (max-width: 949px), le classi .col-sm-* applicano proporzioni simili, garantendo un layout responsive anche su dispositivi mobili. In questo modo, il layout risponde in modo fluido e si adatta alle dimensioni dello schermo, migliorando l’usabilità su diversi dispositivi.
Viene in seguito riportato il codice HTML utile per realizzazione il sistema a griglia Questo codice definisce una pagina web con un layout responsive, che si adatta a diverse dimensioni di schermo grazie a classi CSS collegate. Ecco una breve descrizione degli elementi principali:
Foglio di stile: Il link a "Lezione6.css" permette di caricare uno stile CSS esterno, che contiene le regole di stile per la pagina, tra cui le classi .row, .col-lg-*, .col-md-*, e .col-sm-* che gestiscono il layout responsivo.
L’intestazione <h1> con testo “Responsive Layout” introduce il tema della pagina.
La div con classe row contiene otto elementi div, ciascuno con una classe di colonna (col-lg-3, col-md-6, col-sm-12), ognuno dei quali visualizza un elemento p con testo (“Item 1”, “Item 2”, ecc.). Ogni colonna si adatta in base alle dimensioni dello schermo: – Larghi schermi: Ogni div occupa un quarto della larghezza (col-lg-3). – Medi schermi: Ogni div occupa metà larghezza (col-md-6). – Piccoli schermi: Ogni div occupa l’intera larghezza (col-sm-12), creando una visualizzazione a blocchi.
HTML #5 Realizzare applicazioni responsive utilizzando le Media Queries
Obiettivo: Applicare i principi delle media queries per creare fogli di stile adattativi in un file HTML.
Le media queries sono una tecnica di CSS che consente di applicare stili differenti a seconda delle caratteristiche del dispositivo, come la larghezza o l’altezza dello schermo, l’orientamento (verticale o orizzontale), la risoluzione, e altro. Questo strumento è fondamentale per il design responsivo, poiché permette di adattare automaticamente l’aspetto di una pagina web su vari dispositivi come smartphone, tablet e desktop. Ad esempio, si può usare una media query per applicare uno stile specifico ai contenuti quando la larghezza dello schermo è inferiore a 768 pixel oppure quando la larghezza dello schermo è inferiore a 1024 pixel. Questo consente di ottimizzare l’usabilità e l’esperienza dell’utente su schermi di dimensioni diverse, mantenendo una presentazione chiara e leggibile.
Esempio di definizione di una media queries
Viene in seguito riportato un esempio di media queries utile per customizzare lo stile per dispositivi con una larghezza inferiore a 768 px. Nel caso specifico il font del titolo h1 viene impostato uguale a 20px; <style> @media (min-width: 768px) { h1{ font-size:20px; } } </style>
Differentemente, viene riportato un esempio di media queries utile per customizzare lo stile per dispositivi con una larghezza compresa tra 768px e 1024px. Nel caso specifico il font del titolo h1 viene impostato uguale a 15px; <style> @media (min-width: 768px) and (max-width: 1024px) { h1{ font-size:20px; } } </style>
Codice:
HTML #4 Tre modi per includere un CSS in un file HTML
Obiettivo: Conoscere i tre principali modi per includere un foglio di stile CSS in un file HTML.
Esistono tre principali modi per includere un foglio di stile CSS in un file HTML:
1. Stile inline sugli elementi HTML:
È possibile aggiungere CSS direttamente a specifici elementi HTML utilizzando l’attributo style. Questo approccio è poco utilizzato per mantenere una buona separazione tra contenuto e presentazione, ma può essere utile per applicare stili veloci o unici:
<p style=”color: #FF0000;”>Questo è un paragrafo rosso</p>
Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore.
2. Stile interno (internal):
Il CSS può essere inserito direttamente all’interno del file HTML utilizzando il tag <style> all’interno della sezione <head>. Questo metodo consente di scrivere regole CSS che verranno applicate esclusivamente alla pagina corrente. È utile per applicare stili specifici a una singola pagina senza influenzare l’intero sito o quando si desidera testare rapidamente modifiche stilistiche.
All’interno del blocco <style>, è possibile definire stili basati su classi e identificativi (id), che permettono di selezionare e stilizzare gruppi specifici di elementi HTML:
Classi (Class): Sono utilizzate per applicare stili a più elementi HTML. Si definiscono con un punto (.) nel CSS, e gli elementi HTML che devono ricevere lo stile devono avere l’attributo class.
Identificativo (Id): Si usano per stilizzare un elemento unico della pagina. Si definiscono con un cancelletto (#) nel CSS, e l’elemento HTML deve avere un attributo id. Poiché l’id dovrebbe essere unico, questo metodo si utilizza quando si vuole applicare uno stile specifico a un solo elemento:
L’uso di classi e identificativi all’interno di stili interni permette una maggiore flessibilità e organizzazione, garantendo che lo stesso stile possa essere riutilizzato o applicato in modo selettivo a elementi specifici della pagina.
3. Incorporazione esterna tramite link:
<link rel=”stylesheet” href=”style.css”>
Viene in seguito riportato un esempio di pagina HTML e relativo file css in cui viene effettuata l’incorporazione esterna tramite link.
HTML #3 CSS
Obiettivo: Utilizzare il linguaggio CSS per personalizzare la struttura di un sito WEB.
CSS
Il CSS (Cascading Style Sheets) è uno strumento fondamentale per la personalizzazione dei siti web, poiché consente di separare la struttura HTML dal design, permettendo agli sviluppatori di controllare l’aspetto e il layout delle pagine in modo flessibile ed efficiente. Grazie al CSS, è possibile modificare facilmente colori, font, margini, spaziature e posizionamento degli elementi, migliorando l’esperienza utente e l’accessibilità. Inoltre, il CSS facilita l’adattamento dei siti a diversi dispositivi e risoluzioni, supportando il responsive design, che è essenziale per garantire una visualizzazione ottimale su smartphone, tablet e desktop. In sostanza, il CSS permette di creare interfacce visivamente accattivanti e funzionali, senza modificare il contenuto di base del sito. Esistono differenti modi per inserire il codice CSS in una pagina HTML. Il più semplice è quello di utilizzare l’attributo style. Ad esempio il seguente codice imposta il codice colore FF5733 (arancione acceso tendente al rosso) al seguente titolo:
<h1 style=”color: #FF5733;”>Questo è un titolo arancione</h1>
La codifica esadecimale per rappresentare i colori è un sistema che utilizza sei caratteri, divisi in tre coppie, per indicare l’intensità dei tre colori primari della luce: rosso, verde e blu (RGB). Ogni coppia di caratteri esadecimali rappresenta un valore numerico che va da 00 a FF, dove 00 indica l’assenza di colore e FF indica il massimo livello di intensità (255 in base decimale). Ad esempio, nel codice esadecimale #FF5733, la prima coppia (FF) rappresenta la quantità di rosso (255), la seconda coppia (57) indica il verde (87 in decimale) e la terza coppia (33) rappresenta il blu (51 in decimale). La combinazione di questi valori produce un colore specifico. Questo sistema permette di creare una vasta gamma di colori, con più di 16 milioni di possibili combinazioni, dando grande flessibilità nella definizione delle tonalità per il web e altri ambienti grafici.
Vengono in seguito analizzati alcuni esempi di css utili per customizzare le pagine in modo appropriato. Tali esempi riportano alcune delle principali proprietà più comune utilizzate.
1. Cambiare il colore del testo
La proprietà che indica il colore del testo è color. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare il suo colore. Ad esempio:
<p style=”color: #FF0000;”>Questo è un paragrafo rosso</p>
Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore.
2. Cambiare il colore del background:
La proprietà che indica il colore del testo è background-color. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare il suo colore di sfondo. Ad esempio:
<p style=”background-color: #FF0000;”>Questo è un paragrafo con sfondo rosso</p>
Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore di sfondo.
3. Cambiare il font-size:
La proprietà che indica la dimensione del testo è font-size. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare la dimensione del testo. Ad esempio:
<p style=”font-size: 18px;”>Questo è un paragrafo rosso</p>
Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del font-size.
4. Introdurre un margine in un testo (rientro a destra):
La proprietà margin viene utilizzata per gestire lo spazio esterno intorno a un elemento, separandolo dagli altri elementi nella pagina. Può essere applicata in modo uniforme a tutti i lati con la sintassi margin: valore;, oppure specificata individualmente per ogni lato con margin-top, margin-right, margin-bottom, e margin-left. I margini possono essere espressi in diverse unità, come pixel (px) o percentuali (%). L’uso corretto dei margini è essenziale per garantire una buona spaziatura e una disposizione pulita del layout.
<p style=”margin-left: 20px;”>Questo è un paragrafo con rientro a destra</p>
Viene in seguito riportato un esempio di pagina HTML in cui viene introdotto un margine sinistro.
5. Immagine al centro:
Per centrare una immagine si utilizzano una serie di proprietà: block e margine. Nello specifico:
display: block; per fare in modo che l’immagine si comporti come un elemento a blocco, consentendo di applicare margini orizzontali.
margin-left: auto; margin-right: auto; per centrare l’immagine orizzontalmente all’interno del contenitore.
