JavaScript è uno dei linguaggi di programmazione più popolari tra gli sviluppatori web. Durante l'apprendimento di JavaScript, tutti iniziano con le basi e creano applicazioni semplici utilizzando la manipolazione DOM.
In questo articolo imparerai come creare un dizionario usando JavaScript e la manipolazione del DOM. Questo articolo si aspetta che tu conosca le basi di JavaScript prima di leggerlo.
API è l' acronimo di Application Programming Interface . Le API semplificano lo sviluppo e l'innovazione del software consentendo alle applicazioni di scambiare dati e funzionalità in modo semplice e sicuro.
Questo progetto utilizza l' API Dictionaryapi.dev . Questa è un'API gratuita che fornisce più definizioni, fonetica e altri termini grammaticali relativi alle parole che cerchi.
Il collegamento all'API è il seguente:
https://api.dictionaryapi.dev/api/v2/entries/en/word
Il layout frontend di questo progetto è costruito utilizzando HTML e TailwindCSS . Puoi importare TailwindCSS nel tuo file HTML utilizzando il CDN indicato di seguito.
La pagina HTML ha un input e un pulsante dove l'utente può inserire la parola da cercare. Ci sono altri tre div per visualizzare la parte del discorso, le definizioni multiple e l'audio che ti aiutano a pronunciare correttamente la parola. Per impostazione predefinita, questi tre div hanno una proprietà di visualizzazione nessuno. Quando i dati vengono recuperati dall'API, la proprietà di visualizzazione di questi div verrà impostata su block.
Dictionary
<>
type="text"
placeholder="Enter the word"
id="word"
class="
py-2
w-1/4
focus:outline-none
border-2 border-green-600
rounded
px-3
"
/>
<>
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search
Questo frontend sarà simile a questo
Prima di recuperare i dati tramite l'API e visualizzarli, è necessario ottenere l'accesso agli elementi HTML utilizzando i loro ID. Puoi accedere agli ID usando il metodo JavaScript getElementById() .
const word = document.getElementById("word"); const search = document.getElementById("search"); const display = document.getElementById("display"); const partOfSpeechDiv = document.getElementById("partOfSpeechDiv"); const partOfSpeechHeader = document.getElementById("partOfSpeechHeader"); const partOfSpeechPara = document.getElementById("partOfSpeechPara"); const meaningDiv = document.getElementById("meaningDiv"); const audioDiv = document.getElementById("audio"); const meaningHeader = document.getElementById("meaningHeader");
L'elemento di input nella pagina HTML ha un ID chiamato word . Dopo aver ottenuto l'accesso all'elemento di input, puoi recuperare il valore del testo nell'elemento di input utilizzando l' attributo .value .
Il pulsante di ricerca ha l'id chiamato search . Devi aggiungere un listener di eventi clic per attivare l'evento ed effettuare una chiamata di funzione per recuperare i dati tramite l'API.
Dal 2017, JavaScript ha introdotto il concetto di asincrono e attendono di eseguire richieste asincrone. Utilizzi async-await invece di .then e .catch per risolvere e rifiutare le promesse.
Correlati: programmazione sincrona e asincrona: in che modo sono diverse?
search.addEventListener("click", async () => { try { let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`; const res = await fetch(url); const data = await res.json(); displayData(data); } catch (error) { console.log(error); } });
Per lavorare con le promesse usando async-await , devi aggiungere la parola chiave async prima della definizione della funzione. E ogni volta che fai una richiesta o chiami una funzione, devi aggiungere la parola chiave wait prima di essa.
Il await parola sospende l'ulteriore esecuzione della funzione finché la richiesta precedente non viene completata.
È necessario eseguire l'intera azione di attesa asincrona della promessa nel blocco try-catch . Se la promessa non è in grado di recuperare i dati, visualizzerà l'errore nel blocco catch . Prima di passare la parola all'API, dovrebbe essere in formato minuscolo per risultati accurati. Puoi usare il metodo stringa .lowercase() per convertire la parola.
Il metodo fetch deve recuperare i dati dall'API. Devi aggiungere la parola chiave wait in modo che la funzione si metta in pausa in quel momento mentre il metodo fetch sta recuperando i dati.
Dopo aver recuperato i dati, è necessario convertirli in formato JSON utilizzando il metodo .json() sulla risposta.
Dopo aver recuperato i dati e averli convertiti in formato JSON , è necessario visualizzarli nella pagina web. Devi chiamare il metodo displayData() e passargli i dati.
La struttura della risposta API è la seguente:
L'API restituisce la parte del discorso, le definizioni multiple e la fonetica delle parole nella risposta.
Puoi ottenere tutte le definizioni della parola data usando:
const meanings = data[0].meanings[0].definitions;
Il significato della variabile è un array che contiene tutte le definizioni della parola data.
Per ottenere la parte del discorso della parola data:
const partOfSpeech = data[0].meanings[0].partOfSpeech;
Puoi aggiungere la parte del discorso della parola usando l' attributo .innerHTML . Nel codice HTML, la parte del discorso div aveva la proprietà display none per impostazione predefinita ma, nel codice JavaScript, dopo aver recuperato i dati, è necessario impostare la proprietà display su block .
Devi creare una variabile denominata meanList . Dopo aver aggiunto tutte le definizioni a questa variabile, è necessario assegnarle l' attributo .innerHTML per visualizzarla nella pagina web.
Correlati: il cheat sheet di HTML Essentials: tag, attributi e altro
Scorri l'array dei significati e tieni traccia di una singola definizione e dell'indice in cui è presente. Aggiungi la definizione e l'indice singoli alla variabile significatoList all'interno dell'elemento paragrafo dell'HTML.
Una volta che sei fuori dal ciclo, devi passarlo all'attributo .innerHTML di significatoDiv .
La risposta ricevuta dall'API contiene una fonetica che aiuta gli utenti a comprendere la pronuncia della parola. Per aggiungere questo suono alla pagina web, devi creare un elemento audio e passare la fonetica nell'attributo src di quell'elemento. Infine, devi inserire l'elemento audio in audioDiv utilizzando l' attributo .innerHTML .
const displayData = (data) => { console.log(data); const partOfSpeech = data[0].meanings[0].partOfSpeech; const meanings = data[0].meanings[0].definitions; partOfSpeechDiv.className = "bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block"; partOfSpeechHeader.innerHTML = "Part of Speech"; partOfSpeechPara.innerHTML = partOfSpeech; let meaningList = ``; meanings.forEach((meaning, ind) => { meaningList += `
${ind + 1}) ${
meaning.definition
}
`;
});
significatoDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 round block";
significatoHeader.innerText = "Significato";
significatoDiv.innerHTML = significatoLista;
let aud = `
`;
audioDiv.className = "blocco";
audioDiv.innerHTML = aud;
};
Ora che hai imparato a creare un'app dizionario utilizzando JavaScript, è tempo per te di creare alcuni progetti entusiasmanti da solo. I progetti di costruzione non solo rispolverano le tue basi, ma aggiungono anche progetti al tuo curriculum.
Cerchi più pratica sui concetti di manipolazione di JavaScript e DOM? Ecco un altro progetto che puoi costruire per rafforzare le tue abilità.
Sebbene sia possibile utilizzare una calcolatrice grafica sul computer, l'interprete del linguaggio di programmazione Python può fungere anche da calcolatrice da tavolo. È uno scherzo così popolare nella comunità Python che è menzionato nel tutorial ufficiale. Ecco come puoi usare Python come calcolatrice.
Come programmatore, dovresti accettare le sfide per sopravvivere e costruire alcune meraviglie nel campo dello sviluppo o della programmazione. Quindi, se stai cercando di imparare un linguaggio di programmazione avanzato per migliorare le tue capacità professionali, Java è una delle migliori prospettive in circolazione.
Imparare un nuovo linguaggio di programmazione come Python diventa facile se hai una tabella di marcia completa che dettaglia quali concetti imparare come principiante e come progredire ulteriormente per raggiungere il prossimo traguardo. Anche i programmatori intermedi dovrebbero spesso rispolverare le proprie nozioni di base per costruire una solida base per se stessi.
Al giorno d'oggi, è pratica comune creare un sito Web o un'app che regoli la sua interfaccia utente a seconda del browser o del dispositivo. Ci sono due approcci per raggiungere questo obiettivo. Il primo prevede la creazione di versioni diverse del tuo sito Web o della tua app per dispositivi diversi. Ma è inefficiente e può portare a errori imprevedibili.
Lavorare con i numeri è parte integrante della programmazione. Ogni linguaggio di programmazione fornisce supporto per manipolare i numeri in molti modi diversi. In questo articolo imparerai come trovare il numero totale di cifre in un numero intero utilizzando approcci iterativi, basati su log e basati su stringhe.
I container sono estremamente utili per lo sviluppo, la distribuzione e la gestione del software in un ambiente virtuale. Docker è utile nel processo di containerizzazione, ma non è l'unica piattaforma disponibile. Se stai cercando delle alternative a Docker, non cercare oltre. Questo elenco mostra alcune alternative Docker ricche di funzionalità ed efficienti da utilizzare nel tuo prossimo progetto.
SQL vs NoSQL: qual è il miglior database per il tuo prossimo progetto?
Incorporare servizi di terze parti nei tuoi post di WordPress è un modo entusiasmante per catturare l'interesse di un visitatore. Il contenuto incorporato fornisce anche indicazioni visive che semplificano la scansione. WordPress ha reso facile l'aggiunta di questo tipo di contenuto.
Node.js è un ambiente di runtime JavaScript che consente di eseguire JavaScript al di fuori dei browser Web, rendendolo una scelta popolare per lo sviluppo di tutti i tipi di applicazioni. Parte della sua popolarità è dovuta alla pletora di pacchetti NPM disponibili per facilitare l'esperienza degli sviluppatori.
Solidity è il linguaggio di programmazione utilizzato dagli smart contract sulla blockchain di Ethereum. È un linguaggio di programmazione orientato agli oggetti e tipizzato in modo statico.
I badge GitHub possono aumentare la leggibilità di un repository fornendo agli utenti un modo rapido per acquisire le metriche del repository. I badge possono essere incorporati nel tuo README.md per chiarire l'importanza e la necessità del tuo progetto ad altri sviluppatori. Di conseguenza, i lettori si fanno un'idea molto veloce del repository controllando i badge allegati.
Le giornate celebrative internazionali sono un bel modo per dare riconoscimento a questioni sociali, giornate storiche e rispettive carriere. La Giornata internazionale dei programmatori celebra il ruolo che i programmatori svolgono per migliorare la vita di tutti i giorni. Il mondo civilizzato in cui viviamo è un prodotto del duro lavoro svolto dai programmatori.
Che si tratti di una query di database o di risultati di operazioni matematiche, il metodo del formato stringa Python offre un modo più dinamico e accattivante per presentare i risultati a un utente.
All'inizio di quest'anno, Microsoft ha rilasciato la versione di anteprima di Visual Studio 2022 nel mondo della programmazione selvaggia. Questa è una buona notizia! È un IDE estremamente popolare, ma dovrebbe essere messo a punto o forse anche una revisione, dato il ritmo del cambiamento nell'ecosistema DevOps in cui prospera.
Le metriche del software sono misure utilizzate per quantificare vari aspetti del software. Questi aspetti possono variare dal costo, alla qualità e all'efficienza del team di sviluppo.
Come utente Windows, probabilmente ti sei imbattuto almeno una volta nelle parole .NET Framework. È un framework software sviluppato da Microsoft che ti consente di creare ed eseguire programmi C#, C++, F# e Visual Basic. L'ultima versione di .NET è la 4.8, ma il tuo computer potrebbe aver bisogno di una versione precedente di .NET (come .NET 3.5) per eseguire alcune app.
Se sei uno sviluppatore Python, puoi trarre grandi vantaggi dalla gamma di framework disponibili. Mentre alcuni framework sono più adatti per grandi ecosistemi, altri sono specializzati nel servire specifici obiettivi di sviluppo. Continua a leggere per apprendere le funzionalità di base, gli usi e le differenze tra due framework Python: Flask e CherryPy.
Molti programmatori amano risolvere complicati problemi matematici usando il codice. Aiuta ad affinare la mente e migliorare le capacità di risoluzione dei problemi. In questo articolo imparerai come trovare i quadrati e i cubi perfetti a n cifre più piccoli e più grandi utilizzando Python, C++ e JavaScript. Ciascun esempio contiene anche un output di esempio per diversi valori.
L'esecuzione di Python dal terminale è spesso inevitabile. Tuttavia, se hai appena installato Python su Windows 10 per la prima volta, eseguirlo tramite il Terminale di Windows è possibile solo se viene aggiunto alla variabile di ambiente PATH di Windows.
L'istruzione if è la forza trainante della programmazione logica. Di conseguenza, una migliore comprensione di Python è un'aggiunta significativa alle tue capacità di programmazione in Python.
Sebbene sia possibile utilizzare una calcolatrice grafica sul computer, l'interprete del linguaggio di programmazione Python può fungere anche da calcolatrice da tavolo. È uno scherzo così popolare nella comunità Python che è menzionato nel tutorial ufficiale. Ecco come puoi usare Python come calcolatrice.
Come programmatore, dovresti accettare le sfide per sopravvivere e costruire alcune meraviglie nel campo dello sviluppo o della programmazione. Quindi, se stai cercando di imparare un linguaggio di programmazione avanzato per migliorare le tue capacità professionali, Java è una delle migliori prospettive in circolazione.
Imparare un nuovo linguaggio di programmazione come Python diventa facile se hai una tabella di marcia completa che dettaglia quali concetti imparare come principiante e come progredire ulteriormente per raggiungere il prossimo traguardo. Anche i programmatori intermedi dovrebbero spesso rispolverare le proprie nozioni di base per costruire una solida base per se stessi.
Al giorno d'oggi, è pratica comune creare un sito Web o un'app che regoli la sua interfaccia utente a seconda del browser o del dispositivo. Ci sono due approcci per raggiungere questo obiettivo. Il primo prevede la creazione di versioni diverse del tuo sito Web o della tua app per dispositivi diversi. Ma è inefficiente e può portare a errori imprevedibili.
Lavorare con i numeri è parte integrante della programmazione. Ogni linguaggio di programmazione fornisce supporto per manipolare i numeri in molti modi diversi. In questo articolo imparerai come trovare il numero totale di cifre in un numero intero utilizzando approcci iterativi, basati su log e basati su stringhe.
I container sono estremamente utili per lo sviluppo, la distribuzione e la gestione del software in un ambiente virtuale. Docker è utile nel processo di containerizzazione, ma non è l'unica piattaforma disponibile. Se stai cercando delle alternative a Docker, non cercare oltre. Questo elenco mostra alcune alternative Docker ricche di funzionalità ed efficienti da utilizzare nel tuo prossimo progetto.
SQL vs NoSQL: qual è il miglior database per il tuo prossimo progetto?
Incorporare servizi di terze parti nei tuoi post di WordPress è un modo entusiasmante per catturare l'interesse di un visitatore. Il contenuto incorporato fornisce anche indicazioni visive che semplificano la scansione. WordPress ha reso facile l'aggiunta di questo tipo di contenuto.
Node.js è un ambiente di runtime JavaScript che consente di eseguire JavaScript al di fuori dei browser Web, rendendolo una scelta popolare per lo sviluppo di tutti i tipi di applicazioni. Parte della sua popolarità è dovuta alla pletora di pacchetti NPM disponibili per facilitare l'esperienza degli sviluppatori.
Solidity è il linguaggio di programmazione utilizzato dagli smart contract sulla blockchain di Ethereum. È un linguaggio di programmazione orientato agli oggetti e tipizzato in modo statico.
