Ok, adesso vedremo come andare a creare una semplicissima pagina web dove andremo ad interagire con JavaScript per creare un gioco semplicissimo.

Indovina il numero.

Andremo a creare un file HTML contenente proprio l'essenziale per per quello che ci serve per questo gioco.

Quindi una casella di testo dove andremo ad inserire i no numeri un pulsante e al click su questo pulsante, verificheremo che il numero che abbiamo inserito sia quello corretto.

Ovviamente dovremmo generare un numero casuale tra una e cento e nel momento in cui diciamo che il numero diciamo abbiamo generato il numero cinquanta sull'utente, ad esempio, inserisce settanta dobbiamo scrivere un numero troppo alto se l'utente inserisce venti numero troppo basso se inserisce cinquanta OK, è il numero corretto per cui si può ricominciare a giocare.

Divertentissimo! Vi prometto che sarà molto piu' divertente da scrivere piuttosto che giocarci.

Probabilmente è molto interessante questo gioco perché ci aiuta a veramente a capire come interagire con un utente per cui partiamo creiamo un nuovo progetto, lo apriamo col nostro editor di testo e iniziamo subito creando un nuovo file che tipicamente per convenzione si chiama index punto html.

A questo punto dovremmo creare i nostri tag html fondamentali e mettiamo gare un titolo Ok, una volta che abbiamo scritto i nostri fondamentali, possiamo iniziare a scrivere un pochino di Mark.

Quindi ricordate HTML non è un linguaggio di programmazione, ma un linguaggio di markup di Temple dating, se vogliamo, per cui inizia, per cui iniziamo creando un nuovo DVD, magari un bel titolo, e possiamo tenere sott'occhio quello che stiamo costruendo semplicemente aprendo con un doppio click il nostro file, per cui vedete che il riferimento al file è un file locale file due punti Slash Slash e in questo caso è l'indirizzo della mia del mio file locale.

Google Chrome Safari Firefox sono in grado di mostrare dei file locali e reindirizzare correttamente.

Ok, a questo punto possiamo pensare di scrivere magari una breve descrizione, ad esempio in pressing box a number between one and one hundred che io Jess a questo punto, se torniamo sul nostro browser, facciamo un refresh che compare.

Non penseremo troppo allo stile in questo momento ci interessa più la parte di programmazione piuttosto che di styling, quindi mi scuserete se esteticamente non sarà il massimo.

Ehm, a questo punto possiamo tornare sul nostro html e scrivere ad esempio your glasses e creiamo un input come typ.

Naturalmente, essendo un numero, possiamo selezionare number.

Possiamo anche definire un minimo massimo.

Quindi min facciamo una Max, abbiamo detto cento se torniamo quindi la nostra pagina e refresh amo vedete che cliccando la freccetta in su magari usava un pochino cliccando la freccetta in su possiamo aumentare, possiamo diminuire e mai andare sotto l'uno attenzione perché naturalmente se invece usiamo la tastiera, possiamo andare anche sotto.

Questa è una limitazione, purtroppo, di questo input di testo per cui scriviamo ad esempio dieci.

Adesso ci serve un pulsante che quando lo clicchiamo collega il contenuto di questo input di testo con il comportamento proprio di già scritto e che dovrà verificare se il numero inserito è uguale o maggiore o minore al numero che è stato generato.

Prendo mica mente? Ok, a questo punto possiamo procedere col creare il nostro pulsante di Buxton.

Ed eccolo qua.

Ovviamente non c' è il comportamento.

Non sta succedendo nulla.

Quello che dobbiamo fare prima di legare il Jova scritte e definire due per cui gli dei sono degli identificativi univoci dei nostri elementi all'interno della pagina, ad esempio di per quanto riguarda l'impossibilità di testo, potrebbe essere gas é l'idea per il nostro bottone.

Potrebbe essere.

Ovviamente, se torniamo sulla nostra pagina riflettiamo non cambia nulla, ma cliccando tasso destro e facendo ispeziona prendendo questo questi con Cina e posizionandosi sopra al nostro input di testa.

Ad esempio, possiamo vedere che è stato inserito l'id.

Questo è molto importante perché a questo punto siamo in grado, ad esempio di andare nella nostra pagina html, scrivere script possiamo specificare il tipo di script, quindi tip tipicamente si usa text Slash già scritto.

A questo punto possiamo iniziare a scrivere il nostro già scritto come primissima cosa generiamo il nostro numero da uno a cento, quindi cost mai number abbiamo già visto come si genera un numero casuale, per cui vi consiglio di mettere in pausa adesso provare a scriverlo voi e poi naturalmente vedremo insieme se l'avete fatto in maniera corretta.

Ok, riprendiamo.

Questa è la modalità con cui normalmente scrivo questo tipo di funzioni, ma flor dentro matt floor, ricordiamoci, serve per arrotondare per difetto, per cui prende un numero come come parametro.

Questo numero sarà un math random, quindi un numero random da zero punto uno a zero novantanove per moltiplicato per il numero massimo che vogliamo ottenere, quindi per cento più uno.

Questo perché arrotondando per difetto, rischiamo sempre di avere zero e i numeri devono essere compresi tra una e cento.

Quindi a questo punto facciamo subito una prova.

Se facciamo console log di mine number e torniamo sulla nostra pagina, clicchiamo su Ispeziona elemento e andiamo in console.

Se facciamo un refresh, vediamo il numero che è stato generato Rand unicamente in questo caso cinquantuno refresh, ventisei novanta, dieci, cinquantacinque, sessantatré e così via.

Per cui vediamo che stiamo generando correttamente un numero random.

Perfetto.

Torniamo sul nostro codice.

Una cosa che dobbiamo fare è fare in modo che quando clicchiamo su Button, ad esempio, viene scatole scatenata una determinata funzione.

Come si fa? Innanzitutto dobbiamo sapere se torniamo sulla nostra pagina web, che abbiamo una serie di che ci aiutano ad eseguire questo tipo di compito.

Se scriviamo document, vediamo che viene selezionato in blu.

Vedete, la pagina diventa tutta blu proprio perché stiamo prendendo praticamente tutto il nostro documento html vedete di fatto html vero e proprio della pagina esiste una via chiamata document punto ghat element Boyd e possiamo mettere uno dei due di quindi gas o summit in questo caso facciamo Sabbith ed eccolo qua.

Vedete che abbiamo indietro HTML.

Quello che possiamo fare è dire document punto getelementbyid ID, per cui prendiamo quel pezzo di HTML on click uguale.

E una funzione da eseguire ogni volta che clicchiamo sul nostro bottone.

In questo caso facciamo Franks Console Log Chick.

Ok, in questo caso ho fatto un errore.

Vedete, ho messo il punto esclamativo fuori dagli apici singoli.

Errore mio, Per cui se vado indietro, eccolo qua.

Adesso funziona tutto correttamente e ogni volta che clicchiamo su gas abbiamo click.

Vedete che aumenta il contatore delle volte che clicchiamo click, click, click infinite volte ogni volta che clicchiamo, possiamo riprendere questo comportamento e spostarlo all'interno della nostra pagina html che stiamo scrivendo a questo punto, quindi possiamo iniziare a legare una funzione a questo comportamento, quindi document punto ghat element BD Vedete che gli editor di testo tipicamente ci aiutano pre selezionando quello che potrebbe interessarci personalmente.

Vi consiglio avviso a studio code da utilizzare molto comodo gratuito.

Decidiamo quali di prendere facciamo Sam Smith punto on click uguale function facciamo un'ultima prova console log Mai number.

Quindi cancelliamo questo console Log.

Torniamo nella nostra pagina refresh ogni volta che clicchiamo, ci stiamo assicurando che il numero non cambi ogni volta che clicchiamo su gas.

Altrimenti se ogni volta che clicco deve essere proprio fortuna, cambia il numero.

Deve essere proprio fortunato a a inserire il numero corretto.

Quindi questo modo ci assicuriamo che per cambiare il numero che viene generato dobbiamo effettivamente refresh della pagina.

Vedete benissimo.

A questo punto quello che vogliamo fare non è più compiere questo tipo di azione, ma prendere il contenuto del nostro input.

Per cui ancora una volta document getelementbyid id prendiamo l'input di testo e verifichiamo che sia uguale, maggiore o minore al numero che è stato generato, per cui costa best number uguale document punto ghat element BD si chiama gas.

Come potete vedere qui il punto vero, verifichiamo che funzioni correttamente.

Torniamo qua.

Refresh perfetto quindici Ok, sta funzionando correttamente, ma c' è un problema.

Problemi? Di che tipo sarà questo? Perché noi stiamo generando un numero? E questo, signore e signori, è una stringa.

Lo possiamo verificare facendo tipo meglio.

Potrebbe essere una stringa per cui verifichiamo click refresh quattordici esatto, tipo fosse una stringa, quindi lo dovremo convertire in un numero per cui a questo punto consta gas is number uguale a pars int, per cui il parsing di una stringa che genera un numero intero guest number.

E a questo punto quello che possiamo fare è console log e vi faccio vedere una cosa.

Secondo me è molto carina se creiamo un oggetto nel consol log e mettiamo typ due punti.

Ad esempio tipo fu gas, è slumber e number ex Amber, guardate cosa succede nella nostra console scriviamo dieci oh, vedete che diventa abbastanza ordinato e facile da comprendere, per cui in il numero dieci il typ number perfetto.

Esattamente quello che ci aspettavamo.

A questo punto creiamo un ultimo input di testo.

Ad esempio chi gli mettiamo un i d? Mettiamo result come e lo lasciamo vuoto per ora qua dentro inseriremo delle indicazioni che dicono al nostro utente se il numero è maggiore, minore o uguale a quello che è stato generato.

Per cui quello che possiamo fare gas number è uguale uguale uguale il triplo uguale.

Ricordatevi a number, quindi caso migliore.

Questo è esattamente quello il il numero che è stato generato.

A questo punto possiamo dire che risalti, lo lasciamo vuoto e possiamo dire che risalto è uguale a io Gast Els Chief Gas number è minore di May Number Risalto uguale Ior Gas number Stu Lo a questo punto un ultimo ex risalto uguale your glasses number is too high e per ultimo dobbiamo inserire il testo che a questo punto abbiamo assegnato al risalto dentro li risalto.

Come andiamo a fare? È molto semplice document punto Galt Elementbau ancora una volta result punto in HTML oppure in Texas.

In questo caso uguale risalto.

La differenza tra il Texas e in HTML Potete semplicemente capirlo dal nome in HTML inserisce del codice HTML valido in Texas solamente del testo che è esattamente quello che vogliamo fare Ora.

Verifichiamo che tutto funzioni.

Abbiamo quindi ora generato un numero.

Questo non ci serve più.

Facciamo partiamo da cinquanta gas, ma è troppo alto.

Ok, proviamo con dieci.

Troppo basso, Quindi tra dieci e cinquanta diciamo venticinque.

Troppo basso.

Ancora trenta.

Troppo basso.

Facciamo quaranta.

Ok, quindi tra i trenta e quaranta diciamo trentacinque tra trentacinque quaranta.

Trentasei.

Ok, il numero era trentasei, per cui vogliamo giocarci ancora.

Facciamo un refresh.

Okay, è un gioco molto stupido, se vogliamo molto semplice da eseguire è però ci dà la possibilità di andare ad esplorare come interagire con il dem, quindi con il nostro documento HTML é come prelevare ad esempio l'input dell'utente eventualmente vali darlo in modo che magari se non inserisce un numero ma una stringa, gli diamo un errore.

Insomma, abbiamo delle possibilità per cui, per quanto mi riguarda, questo poteva essere un buon modo per introdurre già basket in un contesto più realistico che possiamo applicare nella vita di tutti i giorni.

Vita lavorativa, naturalmente.