Cum se calculează valoarea nCr
Combinația este un concept matematic. Se referă la aranjarea mai multor obiecte în care ordinea lor este irelevantă. O formulă de bază descrie numărul de combinații valide.
Învață să construiești o aplicație simplă de dicționar folosind JavaScript
JavaScript este unul dintre cele mai populare limbaje de programare printre dezvoltatorii web. În timp ce învață JavaScript, toată lumea începe cu elementele de bază și construiește aplicații simple folosind manipularea DOM.
În acest articol, veți afla cum puteți construi un dicționar folosind JavaScript și manipularea DOM. Acest articol se așteaptă să cunoașteți elementele de bază ale JavaScript înainte de a citi.
Aruncă o privire la API
API înseamnă Application Programming Interface . API-urile simplifică dezvoltarea și inovarea software, permițând aplicațiilor să facă schimb de date și funcționalități ușor și în siguranță.
Acest proiect folosește API-ul dictionaryapi.dev . Acesta este un API gratuit care oferă definiții multiple, fonetică și alți termeni gramaticali legați de cuvintele pe care le căutați.
Link-ul către API este următorul:
https://api.dictionaryapi.dev/api/v2/entries/en/word
Aspectul frontal al proiectului
Aspectul frontal al acestui proiect este construit folosind HTML și TailwindCSS . Puteți importa TailwindCSS în fișierul HTML folosind CDN-ul de mai jos.
Pagina HTML are o intrare și un buton în care utilizatorul poate introduce cuvântul de căutat. Mai sunt trei div-uri pentru a afișa partea de vorbire, definiții multiple și audio care vă ajută să pronunțați corect cuvântul. În mod implicit, aceste trei div-uri au o proprietate de afișare a none. Când datele sunt preluate din API, proprietatea de afișare a acestor div-uri va fi setată la blocare.
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
Această interfață va arăta așa
Adăugarea de funcționalități folosind JavaScript
Înainte de a prelua datele prin API și de a le afișa, trebuie să obțineți acces la elementele HTML folosind ID-urile acestora. Puteți obține acces la ID-uri folosind metoda 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");
Adăugarea ascultătorului de evenimente
Elementul de intrare din pagina HTML are un id numit cuvânt . După ce obțineți acces la elementul de intrare, puteți prelua valoarea textului din elementul de intrare folosind atributul .value .
Butonul de căutare are id-ul numit căutare . Trebuie să adăugați un ascultător de evenimente clic pentru a declanșa evenimentul și pentru a efectua un apel de funcție pentru a prelua datele prin API.
Async și Await
Din 2017, JavaScript a introdus conceptul de asincron și așteaptă să efectueze solicitări asincrone. Utilizați async-aștepte în loc de .Apoi și .catch pentru a rezolva și de a respinge promisiunile.
Înrudit: Programare sincronă vs. asincronă: prin ce diferă?
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); } });
Pentru a lucra cu promisiuni folosind async-wait , trebuie să adăugați cuvântul cheie async înainte de definiția funcției. Și ori de câte ori faceți o solicitare sau apelați o funcție, trebuie să adăugați cuvântul cheie await înainte.
Cuvântul cheie await întrerupe execuția ulterioară a funcției până când solicitarea anterioară nu este finalizată.
Trebuie să efectuați întreaga acțiune de promisiune async-wait în blocul try-catch . Dacă promisiunea nu poate prelua datele, atunci va afișa eroarea în blocul catch . Înainte de a transmite cuvântul către API, acesta ar trebui să fie în format minuscul pentru rezultate precise. Puteți utiliza metoda șirului .lowercase() pentru a converti cuvântul.
Metoda de preluare va prelua datele din API. Trebuie să adăugați cuvântul cheie await, astfel încât funcția să se întrerupă în acel moment în timp ce metoda de preluare preia datele.
După preluarea datelor, trebuie să le convertiți în format JSON folosind metoda .json() pe răspuns.
Afișarea datelor pe pagina web
După ce ați preluat datele și le-ați convertit în format JSON , trebuie să le afișați pe pagina web. Trebuie să apelați metoda displayData() și să îi transmiteți datele.
Structura răspunsului API este următoarea:
API-ul returnează partea de vorbire, definițiile multiple și fonetica cuvintelor din răspuns.
Puteți obține toate definițiile cuvântului dat folosind:
const meanings = data[0].meanings[0].definitions;
Variabila semnificatiile este o matrice care conține toate definițiile cuvântului dat.
Pentru a obține partea de vorbire a cuvântului dat:
const partOfSpeech = data[0].meanings[0].partOfSpeech;
Puteți adăuga partea de vorbire a cuvântului folosind atributul .innerHTML . În codul HTML, partea de vorbire div avea proprietatea de a afișa niciunul în mod implicit, dar, în codul JavaScript, după preluarea datelor, trebuie să setați proprietatea de afișare să blocheze .
Afișarea definițiilor
Trebuie să creați o variabilă numită meaningList . După ce ați adăugat toate definițiile acestei variabile, trebuie să îi atribui atributul .innerHTML pentru a o afișa pe pagina web.
Înrudit: Cheat Sheet HTML Essentials: etichete, atribute și multe altele
Parcurgeți în buclă matricea de semnificații și urmăriți o singură definiție și indexul la care este prezentă. Adăugați singura definiție și indexul variabilei meaningList în interiorul elementului paragraf din HTML.
Odată ce ați ieșit din buclă, trebuie să-l transmiteți atributului .innerHTML al meaningDiv .
Afișați elementul audio pe pagina web
Răspunsul primit de API conține fonetică care ajută utilizatorii să înțeleagă pronunția cuvântului. Pentru a adăuga acest sunet pe pagina web, trebuie să creați un element audio și să treceți fonetica în atributul src al acelui element. În cele din urmă, trebuie să puneți elementul audio în audioDiv folosind atributul .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
}
`;
});
meaningDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 bloc rotunjit";
meaningHeader.innerText = „Semnificații”;
meaningDiv.innerHTML = meaningList;
lasă aud = `
`;
audioDiv.className = "blocare";
audioDiv.innerHTML = aud;
};
Adăugați un alt proiect pe lista dvs
Acum că ați învățat să construiți o aplicație de dicționar folosind JavaScript, este timpul să construiți singuri câteva proiecte interesante. Proiectele de construcție nu numai că vă vor îmbunătăți elementele de bază, ci și vor adăuga proiecte în CV-ul dvs.
Căutați mai multă practică despre conceptele de manipulare JavaScript și DOM? Iată un alt proiect pe care îl puteți construi pentru a vă consolida abilitățile.
Cum să scrieți și să compilați primul cod de soliditate
Solidity este limbajul de programare folosit de contractele inteligente pe blockchain-ul Ethereum. Este un limbaj de programare tip static, orientat pe obiecte.
SQL vs. NoSQL: Care este cea mai bună bază de date pentru următorul tău proiect?
SQL vs. NoSQL: Care este cea mai bună bază de date pentru următorul tău proiect?
Cum să găsiți cuburi și pătrate perfecte cu N cifre folosind Python, C++ și JavaScript
Mulți programatori iubesc să rezolve probleme matematice dificile folosind cod. Ajută la ascuțirea minții și la îmbunătățirea abilităților de rezolvare a problemelor. În acest articol, veți învăța cum să găsiți cele mai mici și mai mari pătrate și cuburi perfecte cu n cifre folosind Python, C++ și JavaScript. Fiecare exemplu conține, de asemenea, eșantion de ieșire pentru mai multe valori diferite.
Cum să utilizați Python ca calculator în linia de comandă
În timp ce puteți utiliza un calculator grafic pe computer, interpretul limbajului de programare Python se poate dubla ca un calculator de birou. Este o glumă atât de populară în comunitatea Python, încât este menționată în tutorialul oficial. Iată cum puteți utiliza Python ca calculator.
Cum să încorporați tweet-uri în postările dvs. WordPress
Încorporarea serviciilor terță parte în postările dvs. WordPress este o modalitate interesantă de a captiva interesul vizitatorului. Conținutul încorporat oferă, de asemenea, indicii vizuale care facilitează scanarea. WordPress a simplificat adăugarea acestui tip de conținut.
Începeți cu Jupyter Notebook: Un tutorial
Dacă sunteți un cercetător de date aspirant care lucrează cu Python sau R, trebuie să știți cum să utilizați Jupyter Notebook. Este un IDE open-source și bazat pe server pentru manipularea datelor, partajarea codului live, precum și gestionarea fluxului de lucru pentru știința datelor.
Codarea nu este pentru toată lumea: 9 joburi tehnologice pe care le puteți obține fără ea
Tehnologia este, fără îndoială, industria viitorului. Dacă ești unul dintre milioanele de tineri adulți pe cale să se arunce în prima etapă a carierei tale, s-ar putea să te întrebi ce să faci dacă nu-ți place codificarea.
7 comenzi vitale pentru a începe cu Python pentru începători
Învățarea unui nou limbaj de programare, cum ar fi Python, devine fără efort dacă aveți o foaie de parcurs cuprinzătoare care detaliază conceptele pe care să le învățați ca începător și cum să progresați mai departe pentru a atinge următoarea etapă. Chiar și programatorii intermediari ar trebui să își perfecționeze frecvent elementele de bază pentru a construi o bază solidă pentru ei înșiși.
Prima ta aplicație web ASP.NET: Cum să începeți
ASP.NET este cadrul multiplatform gratuit al Microsoft pentru crearea de aplicații și servicii web. Platforma ASP.NET este o extensie a .NET, o platformă de dezvoltator de instrumente, limbaje de programare și biblioteci utilizate pentru a construi diferite aplicații.
Cele mai bune 9 alternative Docker pentru managementul containerelor
Containerele sunt extrem de benefice pentru dezvoltarea, implementarea și gestionarea software-ului într-un mediu virtual. Docker este util în procesul de containerizare, dar nu este singura platformă din jur. Dacă sunteți în căutarea unor alternative la Docker, nu căutați mai departe. Această listă prezintă câteva alternative Docker eficiente și bogate în funcții de utilizat în următorul proiect.
Este ARCore sau ARKit mai bun pentru a crea experiențe de realitate augmentată?
Unele dintre cele mai discutate aplicații și experiențe mobile din zilele noastre utilizează tehnologia de realitate augmentată. În timp ce unele dintre aceste experiențe pot funcționa practic pe orice dispozitiv mobil, altele funcționează doar pe modele mai noi și mai scumpe. Dezvoltarea și utilizarea acestor experiențe mai robuste necesită ARCore și ARKit.
Cum se creează o nouă ramură în Git
Ramurile sunt esențiale pentru conceptul de control al versiunilor în programare și Git în special. Acest articol de pornire vă spune ce este o ramură și cum să creați una folosind o serie de instrumente diferite.
Cum să utilizați instrucțiunea Python if
Declarația if este forța motrice a programării logice. Ca rezultat, o mai bună înțelegere a Python-ului este un plus semnificativ la abilitățile dumneavoastră de programare Python.
Top 5 insigne care vă vor supraîncărca depozitul GitHub
Insignele GitHub pot spori lizibilitatea unui depozit, oferind utilizatorilor o modalitate rapidă de a captura valorile depozitului. Insignele pot fi încorporate în README.md pentru a clarifica importanța și necesitatea proiectului pentru alți dezvoltatori. Drept urmare, cititorii își fac o idee foarte rapidă despre depozit, verificând insignele atașate.
Noțiuni introductive cu Redis și PHP pentru stocarea rapidă a datelor
Popularul motor de stocare Redis este un instrument excelent și obligatoriu în orice arsenal de dezvoltatori de software. Motorul de stocare în memorie permite stocarea și recuperarea datelor extraordinar de rapide, până la 32 de milioane de interogări pe secundă, făcându-l o completare principală pentru orice motor major de baze de date.
Ce este WYSIWYG?
O parte din magia dezvoltării software are loc atunci când liniile de cod alchimizează în mai mult decât suma părților lor. Veți descoperi că aveți nevoie de o anumită vizualizare creativă atunci când încercați să construiți abstract în acest fel. Acest lucru poate fi valabil pentru procesarea de text sau design web, la fel ca și pentru programare.
Cum se instalează .NET Framework versiunea 3.5 pe Windows 10
Ca utilizator de Windows, probabil că ați întâlnit cel puțin o dată cuvintele .NET Framework. Este un cadru software dezvoltat de Microsoft care vă permite să construiți și să rulați programe C#, C++, F# și Visual Basic. Cea mai recentă versiune .NET este 4.8, dar este posibil ca computerul să aibă nevoie de o versiune mai veche de .NET (cum ar fi .NET 3.5) pentru a rula unele aplicații.
WordPress vs. Wix: diferențele cheie
Te confrunți adesea cu dilema clasică în timp ce construiești un site web pentru tine sau afacerea ta. WordPress vs. Wix — pe care să-l alegi și care ar fi cea mai bună alegere pentru tine?
Cele mai bune 10 distribuții Linux pentru dezvoltatori
În timp ce Linux ar putea să nu fie sistemul de operare preferat pentru utilizatorii ocazionali, este alegerea preferată pentru majoritatea dezvoltatorilor și programatorilor. Linux este un sistem de operare mai practic care a fost conceput în mod explicit ținând cont de programare și dezvoltatori.
Cum se calculează valoarea nCr
Combinația este un concept matematic. Se referă la aranjarea mai multor obiecte în care ordinea lor este irelevantă. O formulă de bază descrie numărul de combinații valide.
Cum să scrieți și să compilați primul cod de soliditate
Solidity este limbajul de programare folosit de contractele inteligente pe blockchain-ul Ethereum. Este un limbaj de programare tip static, orientat pe obiecte.
SQL vs. NoSQL: Care este cea mai bună bază de date pentru următorul tău proiect?
SQL vs. NoSQL: Care este cea mai bună bază de date pentru următorul tău proiect?
Cum să găsiți cuburi și pătrate perfecte cu N cifre folosind Python, C++ și JavaScript
Mulți programatori iubesc să rezolve probleme matematice dificile folosind cod. Ajută la ascuțirea minții și la îmbunătățirea abilităților de rezolvare a problemelor. În acest articol, veți învăța cum să găsiți cele mai mici și mai mari pătrate și cuburi perfecte cu n cifre folosind Python, C++ și JavaScript. Fiecare exemplu conține, de asemenea, eșantion de ieșire pentru mai multe valori diferite.
Cum să utilizați Python ca calculator în linia de comandă
În timp ce puteți utiliza un calculator grafic pe computer, interpretul limbajului de programare Python se poate dubla ca un calculator de birou. Este o glumă atât de populară în comunitatea Python, încât este menționată în tutorialul oficial. Iată cum puteți utiliza Python ca calculator.
Cum să încorporați tweet-uri în postările dvs. WordPress
Încorporarea serviciilor terță parte în postările dvs. WordPress este o modalitate interesantă de a captiva interesul vizitatorului. Conținutul încorporat oferă, de asemenea, indicii vizuale care facilitează scanarea. WordPress a simplificat adăugarea acestui tip de conținut.
Începeți cu Jupyter Notebook: Un tutorial
Dacă sunteți un cercetător de date aspirant care lucrează cu Python sau R, trebuie să știți cum să utilizați Jupyter Notebook. Este un IDE open-source și bazat pe server pentru manipularea datelor, partajarea codului live, precum și gestionarea fluxului de lucru pentru știința datelor.
Codarea nu este pentru toată lumea: 9 joburi tehnologice pe care le puteți obține fără ea
Tehnologia este, fără îndoială, industria viitorului. Dacă ești unul dintre milioanele de tineri adulți pe cale să se arunce în prima etapă a carierei tale, s-ar putea să te întrebi ce să faci dacă nu-ți place codificarea.
7 comenzi vitale pentru a începe cu Python pentru începători
Învățarea unui nou limbaj de programare, cum ar fi Python, devine fără efort dacă aveți o foaie de parcurs cuprinzătoare care detaliază conceptele pe care să le învățați ca începător și cum să progresați mai departe pentru a atinge următoarea etapă. Chiar și programatorii intermediari ar trebui să își perfecționeze frecvent elementele de bază pentru a construi o bază solidă pentru ei înșiși.
Prima ta aplicație web ASP.NET: Cum să începeți
ASP.NET este cadrul multiplatform gratuit al Microsoft pentru crearea de aplicații și servicii web. Platforma ASP.NET este o extensie a .NET, o platformă de dezvoltator de instrumente, limbaje de programare și biblioteci utilizate pentru a construi diferite aplicații.