Nell’articolo di oggi esploreremo un argomento intrigante, come intercettare la pressione dei tasti della tastiera con Javascript array un trucchetto che usavano le spie e gli Hacker di oggi.
Imparerai come creare un’applicazione interattiva che fa “parlare” un omino sullo schermo ogni volta che digiti una lettera sulla tastiera.
Questo esercizio ti permetterà di approfondire concetti fondamentali come gli array, gli addeventlistener, i loop, e il movimento delle immagini Sprite.
A differenza di altre volte, questa volta scriveremo i CSS a mano, senza l’uso di framework come Tailwind.
Inoltre, discuteremo anche di una possibile minaccia per gli utenti: la creazione di un keylogger, uno strumento utilizzato per registrare le pressioni dei tasti, spesso usato in contesti di hacking e spionaggio.
“JavaScript è stato creato da Brendan Eich nel 1995 e inizialmente si chiamava Mocha. È diventato uno dei linguaggi di scripting più utilizzati sul web.
Fonte: Wikipedia
Statistiche sull’uso di JavaScript – 2023
Font: Stack Overflow Developer 2023
Introduzione al tutorial sugli Array Javascript
Impostazione del progetto prima di creare un Array in Javascript
Nella prima lezione, imposteremo il progetto creando la struttura base del nostro HTML e CSS.
Cominceremo con la creazione di un file HTML che conterrà il nostro omino e un file CSS per stilizzare l’immagine e l’interfaccia.
Questo step è essenziale per preparare il terreno per le lezioni successive, dove aggiungeremo funzionalità interattive.
Inserire l’Immagine dell’Omino e Stilizzare con CSS
Nella seconda lezione, inseriremo l’immagine dell’omino presa da Shutterstock.
Utilizzeremo il CSS per assegnare diverse immagini di bocche sulla faccia dell’omino, simulando un’animazione labiale.
Questa fase è cruciale per dare vita al nostro progetto, permettendo all’omino di “parlare” in risposta alle pressioni dei tasti.
Muovere la Bocca dell’Omino con la Tastiera usando JavaScript
Nella terza lezione, faremo in modo che la bocca dell’omino si muova quando digitiamo sulla tastiera.
Utilizzeremo JavaScript puro, senza l’uso di librerie come jQuery, per gestire l’evento keydown.
Javascript Array: Salvare le lettere dentro un Array
Muovere la posizione della bocca con un Array Javascript
Ora possiamo creare un Array in Javascript che terrà traccia delle diverse posizioni di background per l’immagine della bocca e useremo un loop per muovere l’immagine correttamente.
Quando si utilizza un JavaScript Array, è possibile applicare diversi metodi per manipolare e accedere ai dati contenuti
// Array di lettere
let letters = ['A', 'B', 'C'];
console.log(letters.length); // Output: 3
let letters = ['A', 'B', 'C'];
console.log(letters.indexOf('B')); // Output: 1
let letters = ['A', 'B', 'C'];
console.log(letters.at(1)); // Output: 'B'
console.log(letters.at(-1)); // Output: 'C'
let letters = ['A', 'B', 'C', 'D'];
console.log(letters.slice(1, 3)); // Output: ['B', 'C']
let letters = ['A', 'B', 'C'];
let found = letters.find(letter => letter === 'B');
console.log(found); // Output: 'B'
let letters = ['A', 'B', 'C'];
letters.forEach((letter, index) => {
console.log(`${index}: ${letter}`);
});
// Output:
// 0: A
// 1: B
// 2: C
Se ti piace questo tutorial sugli Array in Javascript, potrebbero interessarti i miei corsi online
Ecco cosa pensano le persone che hanno partecipato ai miei corsi. Le loro recensioni riflettono esperienze personali e autentiche, provenienti da veri partecipanti ai corsi. Queste non sono recensioni aziendali ma rappresentano una chiara testimonianza della qualità dei miei servizi.
Ultimo aggiornamento
Caricamento...
Studenti totali
Caricamento...
Recensioni
Caricamento...
-
Davide Rossano
Corso semplicemente fantastico. Ottime spiegazioni, ottima qualità audio e video, lezioni interessanti e argomenti trattati veramente bene. Uno dei migliori corsi che abbia mai seguito. Grazie Alessandro! (Se ci saranno ulteriori lezioni, al 100% le seguirò).
-
Antonio Zingale
Ottimo Corso, la progressione delle lezioni permette di acquisire i concetti al giusto ritmo e Alessandro riesce, in modo coinvolgente, a rendere ogni lezione semplice da assimilare, nonostante la complessità degli argomenti trattati. Uno dei migliori corsi di sviluppofrontend web in italiano!
-
Piera C
Premetto che sono solo all'inizio del corso ma, se il buongiorno si vede dal mattino, allora posso affermare che il corso è fatto davvero bene. Il docente è molto preparato, sa quello che dice (purtroppo non sempre è così) e trasmette le sue conoscenze nel migliore dei modi. Il corso lo consiglio senza alcun dubbio. Al termine del percorso sono sicura che confermerò questa mia prima impressione. Grazie Alessandro per aver condensato i tuoi anni di lavoro/studio in un corso così affascinante.
-
Denise Marzolla
Premetto che non ho ancora terminato il corso ma devo fare i miei complimenti ad Alessandro. Ho già studiato le basi di html e javascript a scuola e in un breve stage ma devo dire che non ho mai capito molto il meccanismo dei linguaggi, pensavo quindi di non essere portata per il front end e la programmazione in genere lasciando perdere tutto. Quando ho acquistato questo corso ero molto scettica pensando che se non avevo capito molto con il docente in aula, non avrei combinato nulla di buono con un corso online, ma al contrario sono rimasta sorpresa dal fatto che con le lezioni di questo corso riesco a capire quasi 'al volo' i concetti. Alessandro è molto chiaro nelle spiegazioni e ti fa vedere con esempi reali come e perchè quella cosa funziona (o non funziona) in quel modo, cosa che manca nelle spiegazioni teoriche e scolastiche. Le singole lezioni non sono lunghe e noiose, anzi sono contenute e dirette, il metodo e l'intonazione con cui vengono spiegate riesce a catturare l'attenzione (nonostante la mia stanchezza dovuta alla sveglia all'alba). Quindi non mi resta che consigliare vivamente questo corso non vedo l'ora di terminarlo, spero mi aiuti a costruirmi una nuova carriera!
-
Maurizio Giannini
E' la prima recensione che lascio ma questa davvero mi nasce dal cuore. Tra i vari corsi proposti per il front-end, ho scelto questo per una serie di aspettative che sono stati tutte soddisfatte. Il corso ha un punteggio di stelle, nelle recensioni, che è più alto degli altri e devo dire che è tutto meritato. 1) Innanzitutto il docente è molto chiaro. Poi il taglio delle sue lezioni è fortemente orientato a insegnare ciò che serve. Se consideriamo che le lezioni sono tenute da un professionista, quello che serve, serve davvero! 2) Offre un percorso molto ricco e che spazia su tutto il front-end, mettendo in grado di saper leggere il codice e di saperlo riutilizzare a piacimento. 3) E' un corso serio quindi dovrete studiare. Io sto procedendo lentamente ma almeno imparo quello che conta. Comunque il docente ha un tono di voce che stimola l'attenzione quindi lo studio ci deve essere ma è piacevole. 4) Apprezzo molto che venga aggiornato e che le risposte giungano con dovizia di particolari. Per ora mi fermo qui ma a corso ultimato conto di aggiungere altri contenuti alla mia recensione.
-
Francesco Consalvo
Partendo da un minima conoscenza autodidatta del mondo Adobe, ho trovato questo corso fortemente formativo, in grado di far acquisire tutte le funzioni basilari del mondo di Illustrator. Il vero potenziale delle oltre 16 ore di videolezioni del bravo Alessandro è di applicare immediatamente quanto appreso nella quotidianità della professione grafica, potendo sin da subito lavorare a infografiche, loghi, siti web, isometrie nella loro totalità. Di sicuro lo consiglierò ad amici e colleghi. Francesco.
-
Mario Venuto
Ottimo corso, ottimo metodo di insegnamento. Alessandro mira al "succo", a far comprendere i meccanismi di base degli strumenti di lavoro. Ottimo, grazie del contributo.
-
Valeria Corvo
Corso organizzato benissimo. Conoscevo già Illustrator, ma mi ha aiutato moltissimo ad arricchire le mie conoscenze, scoprire nuovi comandi e velocizzare. Bellissimo il fatto che si toccano vari argomenti: dal logo all'organizzazione di opuscoli ecc e dall'illustrazione ai grafici. Complimenti anche per le risorse utilissime. Consigliato.
Vuoi leggere altre testimonianze?
Non verranno visualizzate tutte le testimonianze. Quelle che leggerai non sono meno importanti di quelle sopra, semplicemente non voglio riempire la pagina.
Questi corsi hanno già qualche anno, ma ciò non toglie che non siano validi, anzi, insegnano un metodo, non meccanismi da ripetere come in una catena di montaggio.
Se ti interessa sapere di più su questi corsi puoi acquistarli tramite Udemy. I prezzi vengono decisi dalla piattaforma. Se mi contatti personalmente ti inverò uno sconto del 50% con un coupon.
Purtroppo non posso generare coupon infiniti, la piattaforma mi limita, quindi se sei tra i fortunati del mese otterai il corso alla metà del prezzo.
Continuiamo questo tutorial in Javascript…
Intercettare le Lettere Premute e Muovere l’Immagine
Nell’ultima lezione, ci concentreremo sull’intercettazione delle lettere premute sulla tastiera e sul posizionamento corretto dell’immagine della bocca.
Utilizzeremo setInterval per creare un’animazione continua, ClearInterval per interromperla al momento giusto, e appendChild per aggiungere nuovi elementi al DOM.
Questo ci permetterà di creare un’animazione fluida e reattiva, rendendo l’esperienza dell’utente più coinvolgente.
