JavaScript is een van de meest populaire programmeertalen onder webontwikkelaars. Tijdens het leren van JavaScript begint iedereen met de basis en het bouwen van eenvoudige applicaties met behulp van DOM-manipulatie.
In dit artikel leert u hoe u een woordenboek kunt bouwen met JavaScript en DOM-manipulatie. Dit artikel verwacht dat je de basis van JavaScript kent voordat je het leest.
API staat voor Application Programming Interface . API's vereenvoudigen de ontwikkeling en innovatie van software door applicaties in staat te stellen eenvoudig en veilig gegevens en functionaliteit uit te wisselen.
Dit project maakt gebruik van de API Dictionaryapi.dev . Dit is een gratis API die meerdere definities, fonetiek en andere grammaticale termen biedt met betrekking tot woorden die u zoekt.
De link naar de API is als volgt:
https://api.dictionaryapi.dev/api/v2/entries/en/word
De frontend layout van dit project is gebouwd met HTML en TailwindCSS . U kunt TailwindCSS in uw HTML-bestand importeren met behulp van het onderstaande CDN.
De HTML-pagina heeft een invoer en een knop waar de gebruiker het te zoeken woord kan invoeren. Er zijn nog drie divs om de woordsoort, meerdere definities en audio weer te geven waarmee u het woord correct kunt uitspreken. Standaard hebben deze drie div's een display-eigenschap van geen. Wanneer de gegevens van de API worden opgehaald, wordt de weergave-eigenschap van deze divs ingesteld op 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
Deze frontend ziet er zo uit
Voordat u de gegevens via API ophaalt en weergeeft, moet u toegang krijgen tot HTML-elementen met behulp van hun id's. U kunt toegang krijgen tot de id's met behulp van de JavaScript-methode 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");
Het invoerelement in de HTML-pagina heeft een id met de naam woord . Nadat u toegang hebt gekregen tot het invoerelement, kunt u de waarde van de tekst in het invoerelement ophalen met behulp van het .value attribuut.
De zoekknop heeft de id genaamd search . Je moet een toe click event listener de gebeurtenis te activeren en maak een functie aan te roepen om de gegevens op te halen door middel van API.
Sinds 2017 heeft JavaScript het concept van async geïntroduceerd en wachten op het uitvoeren van asynchrone verzoeken. U gebruikt async-wachten in plaats van .then en .catch op te lossen en beloften te verwerpen.
Gerelateerd: Synchroon versus asynchrone programmering: hoe verschillen ze?
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); } });
Als u met beloften wilt werken die async-wait gebruiken , moet u het sleutelwoord async vóór de functiedefinitie toevoegen. En wanneer u een verzoek doet of een functie aanroept, moet u het wait- sleutelwoord ervoor toevoegen.
Het wait- sleutelwoord pauzeert de verdere uitvoering van de functie totdat het vorige verzoek niet is voltooid.
U moet de volledige async-wait- belofte-actie uitvoeren in het try-catch- blok. Als de belofte de gegevens niet kan ophalen, wordt de fout in het catch- blok weergegeven. Voordat het woord aan de API wordt doorgegeven, moet het in kleine letters staan voor nauwkeurige resultaten. U kunt de tekenreeksmethode .lowercase() gebruiken om het woord te converteren.
De ophaalmethode haalt de gegevens op uit de API. U moet het wait- sleutelwoord toevoegen, zodat de functie op dat moment pauzeert terwijl de fetch-methode de gegevens ophaalt.
Nadat u de gegevens hebt opgehaald, moet u deze in JSON- indeling converteren met behulp van de .json()- methode in het antwoord.
Nadat u de gegevens hebt opgehaald en naar JSON- indeling hebt omgezet , moet u deze op de webpagina weergeven. U moet de methode displayData() aanroepen en de gegevens eraan doorgeven.
De structuur van het API-antwoord is als volgt:
De API retourneert de woordsoort, meerdere definities en fonetiek van de woorden in het antwoord.
U kunt alle definities van het gegeven woord krijgen met:
const meanings = data[0].meanings[0].definitions;
De variabele betekenissen is een array die alle definities van het gegeven woord bevat.
Om de woordsoort van het gegeven woord te krijgen:
const partOfSpeech = data[0].meanings[0].partOfSpeech;
U kunt de woordsoort van het woord toevoegen met het kenmerk .innerHTML . In de HTML-code had de woordsoort div standaard de eigenschap display none, maar in de JavaScript-code moet u na het ophalen van de gegevens de eigenschap display op block instellen .
U moet een variabele maken met de naam betekenisLijst . Nadat u alle definities aan deze variabele hebt toegevoegd, moet u er het .innerHTML- kenmerk aan toewijzen om het op de webpagina weer te geven.
Gerelateerd: De HTML Essentials Cheat Sheet: Tags, attributen en meer
Loop door de betekenisreeks en houd een enkele definitie bij en de index waarin deze aanwezig is. Voeg de enkele definitie en index toe aan de variabele betekenisList in het alinea-element van HTML.
Als je eenmaal uit de lus bent, moet je het doorgeven aan het .innerHTML- attribuut van betekenisDiv .
Het antwoord dat door de API wordt ontvangen, bevat fonetiek die gebruikers helpt de uitspraak van het woord te begrijpen. Om dit geluid aan de webpagina toe te voegen, moet je een audio-element maken en fonetiek doorgeven in het src- attribuut van dat element. Ten slotte moet u het audio-element in de audioDiv plaatsen met behulp van het .innerHTML- attribuut.
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
}
`;
});
betekenisDiv.className =
"text-center w-1/4 bg-grey-100 my-6 border-2 border-green-500 afgerond blok";
betekenisHeader.innerText = "Betekenissen";
betekenisDiv.innerHTML = betekenisLijst;
laat aud = `
`;
audioDiv.className = "blokkeren";
audioDiv.innerHTML = aud;
};
Nu je hebt geleerd een woordenboek-app te bouwen met JavaScript, is het tijd om zelf een aantal spannende projecten te bouwen. Het bouwen van projecten zal niet alleen je basiskennis opfrissen, maar ook projecten toevoegen aan je cv.
Op zoek naar meer oefening in JavaScript- en DOM-manipulatieconcepten? Hier is nog een project dat je kunt bouwen om je vaardigheden te versterken.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
GitHub-badges kunnen de leesbaarheid van een repository vergroten door gebruikers een snelle manier te bieden om de repository-statistieken vast te leggen. Badges kunnen worden ingesloten in uw README.md om het belang en de noodzaak van uw project aan andere ontwikkelaars duidelijk te maken. Als gevolg hiervan krijgen lezers een heel snel idee van de repository door de bijgevoegde badges te controleren.
Internationale feestdagen zijn een leuke manier om erkenning te geven aan sociale zaken, historische dagen en respectieve carrières. International Programmers' Day viert de rol die programmeurs spelen om het dagelijks leven te verbeteren. De beschaafde wereld waarin we leven is een product van het harde werk van programmeurs.
Of het nu gaat om een databasequery of resultaten van wiskundige bewerkingen, de Python-tekenreeksindelingsmethode biedt een meer dynamische en aantrekkelijke manier om resultaten aan een gebruiker te presenteren.
Eerder dit jaar bracht Microsoft de preview-versie van Visual Studio 2022 uit in de wilde programmeerwereld. Dit is goed nieuws! Het is een extreem populaire IDE, maar aan een opknapbeurt of misschien zelfs een revisie toe, gezien het tempo van de veranderingen in het DevOps-ecosysteem waarin het gedijt.
Softwarestatistieken zijn metingen die worden gebruikt om verschillende aspecten van uw software te kwantificeren. Deze aspecten kunnen variëren van de kosten, kwaliteit en efficiëntie van het ontwikkelteam.
Als je een Python-ontwikkelaar bent, kun je enorm profiteren van de reeks beschikbare frameworks. Terwijl sommige kaders het meest geschikt zijn voor grote ecosystemen, zijn andere gespecialiseerd in het dienen van specifieke ontwikkelingsdoelen. Lees verder om de basisfuncties, het gebruik en de verschillen tussen twee Python-frameworks te leren: Flask en CherryPy.
Veel programmeurs houden ervan om lastige wiskundige problemen op te lossen met behulp van code. Het helpt de geest te scherpen en het probleemoplossend vermogen te verbeteren. In dit artikel leer je hoe je de kleinste en grootste n-cijferige perfecte vierkanten en kubussen kunt vinden met Python, C++ en JavaScript. Elk voorbeeld bevat ook voorbeelduitvoer voor verschillende waarden.
Het if-statement is de drijvende kracht achter logisch programmeren. Als gevolg hiervan is een beter begrip van Pythons een belangrijke toevoeging aan je Python-programmeervaardigheden.
Technologie is zonder twijfel de industrie van de toekomst. Als je een van de miljoenen jonge volwassenen bent die op het punt staan om in de eerste fase van je carrière te duiken, vraag je je misschien af wat je moet doen als je niet van coderen houdt.
U kunt een real-life project in Python niet met succes voltooien zonder een virtuele omgeving. Tools zoals virtualenvwrapper en virtualenv zijn gebruikelijk voor het maken en beheren van virtuele omgevingen voor webontwikkeling, terwijl anaconda veel wordt gebruikt door datawetenschappers.
Als u van plan bent een geweldige webpagina-indeling te maken, moet u weten over marges, randen, opvulling en inhoud. Elk element in webdesign, of het nu een afbeelding of tekst is, gebruikt een kader met deze eigenschappen. Je kunt eenvoudig complexe lay-outs bouwen door te spelen met het doosmodel. In dit artikel zullen we het CSS Box-model ontleden en laten zien hoe u deze eigenschappen kunt gebruiken met praktische voorbeelden.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
Containers zijn zeer nuttig voor softwareontwikkeling, implementatie en beheer in een virtuele omgeving. Docker is handig in het containerisatieproces, maar het is niet het enige platform dat er is. Als u op zoek bent naar alternatieven voor Docker, hoeft u niet verder te zoeken. Deze lijst toont enkele veelzijdige en efficiënte Docker-alternatieven die u in uw volgende project kunt gebruiken.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
