JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất của các nhà phát triển web. Trong khi học JavaScript, mọi người đều bắt đầu với những điều cơ bản và xây dựng các ứng dụng đơn giản bằng cách sử dụng thao tác DOM.
Trong bài viết này, bạn sẽ tìm hiểu cách bạn có thể xây dựng một từ điển bằng cách sử dụng JavaScript và thao tác DOM. Bài viết này mong bạn biết những kiến thức cơ bản về JavaScript trước khi đọc.
API là viết tắt của Giao diện lập trình ứng dụng . API đơn giản hóa việc phát triển và đổi mới phần mềm bằng cách cho phép các ứng dụng trao đổi dữ liệu và chức năng một cách dễ dàng và an toàn.
Dự án này sử dụng API Dictionaryapi.dev . Đây là một API miễn phí cung cấp nhiều định nghĩa, ngữ âm và các thuật ngữ ngữ pháp khác liên quan đến các từ mà bạn tìm kiếm.
Liên kết đến API như sau:
https://api.dictionaryapi.dev/api/v2/entries/en/word
Bố cục giao diện người dùng của dự án này được xây dựng bằng HTML và TailwindCSS . Bạn có thể nhập TailwindCSS trong tệp HTML của mình bằng CDN được cung cấp bên dưới.
Trang HTML có một đầu vào và một nút để người dùng có thể nhập từ cần tìm. Có thêm ba dấu chia để hiển thị phần lời nói, nhiều định nghĩa và âm thanh giúp bạn phát âm từ đó một cách chính xác. Theo mặc định, ba div này có thuộc tính hiển thị là không. Khi dữ liệu được tìm nạp từ API, thuộc tính hiển thị của các div này sẽ được đặt thành khối.
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
Giao diện người dùng sẽ trông như thế này
Trước khi tìm nạp dữ liệu thông qua API và hiển thị nó, bạn cần có quyền truy cập vào các phần tử HTML bằng id của chúng. Bạn có thể truy cập vào id bằng phương thức 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");
Phần tử đầu vào trong trang HTML có một id tên là từ . Sau khi có quyền truy cập vào phần tử đầu vào, bạn có thể truy xuất giá trị của văn bản trong phần tử đầu vào bằng cách sử dụng thuộc tính .value .
Nút tìm kiếm có id được đặt tên là tìm kiếm . Bạn phải thêm trình xử lý sự kiện nhấp chuột để kích hoạt sự kiện và thực hiện một lệnh gọi hàm để tìm nạp dữ liệu thông qua API.
Kể từ năm 2017, hoạt Javascript đã giới thiệu các khái niệm về async và chờ đợi để thực hiện yêu cầu không đồng bộ. Bạn sử dụng async-chờ đợi thay vì .Sau đó và .catch để quyết tâm và từ chối những lời hứa.
Liên quan: Lập trình đồng bộ và không đồng bộ: Chúng khác nhau như thế nào?
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); } });
Để làm việc với các hứa hẹn bằng cách sử dụng async-await , bạn cần thêm từ khóa async trước định nghĩa hàm. Và bất cứ khi nào bạn thực hiện một yêu cầu hoặc gọi một hàm, bạn phải thêm từ khóa await vào trước nó.
Các chờ đợi từ khóa tạm dừng việc thực hiện thêm các chức năng cho đến khi yêu cầu trước đó không được hoàn thành.
Bạn cần thực hiện toàn bộ hành động hứa hẹn không chờ đợi trong khối try-catch . Nếu lời hứa không thể tìm nạp dữ liệu thì nó sẽ hiển thị lỗi trong khối bắt . Trước khi chuyển từ tới API, nó phải ở định dạng chữ thường để có kết quả chính xác. Bạn có thể sử dụng phương thức chuỗi .lowercase () để chuyển đổi từ.
Phương thức tìm nạp sẽ truy xuất dữ liệu từ API. Bạn phải thêm từ khóa await để hàm tạm dừng tại thời điểm đó trong khi phương thức tìm nạp đang truy xuất dữ liệu.
Sau khi truy xuất dữ liệu, bạn cần chuyển đổi dữ liệu đó ở định dạng JSON bằng phương thức .json () trên phản hồi.
Sau khi truy xuất dữ liệu và chuyển đổi nó sang định dạng JSON , bạn phải hiển thị nó trên trang web. Bạn cần gọi phương thức displayData () và truyền dữ liệu cho nó.
Cấu trúc của phản hồi API như sau:
API trả về một phần của giọng nói, nhiều định nghĩa và ngữ âm của các từ trong phản hồi.
Bạn có thể lấy tất cả các định nghĩa của từ đã cho bằng cách sử dụng:
const meanings = data[0].meanings[0].definitions;
Các nghĩa của biến là một mảng chứa tất cả các định nghĩa của từ đã cho.
Để có được Phần bài phát biểu của từ đã cho:
const partOfSpeech = data[0].meanings[0].partOfSpeech;
Bạn có thể thêm Phần Lời nói của từ bằng thuộc tính .innerHTML . Trong mã HTML, phần của speech div có thuộc tính không hiển thị theo mặc định, nhưng trong mã JavaScript, sau khi tìm nạp dữ liệu, bạn cần đặt thuộc tính hiển thị để chặn .
Bạn phải tạo một biến có tên là NghiaList . Sau khi thêm tất cả các định nghĩa cho biến này, bạn cần gán cho nó thuộc tính .innerHTML để hiển thị nó trên trang web.
Liên quan: Bảng Cheat HTML Essentials: Thẻ, Thuộc tính, và hơn thế nữa
Lặp lại mảng ý nghĩa và theo dõi một định nghĩa duy nhất và chỉ mục mà nó hiện diện. Nối định nghĩa và chỉ mục duy nhất vào biến NghiaList bên trong phần tử đoạn văn của HTML.
Khi bạn ra khỏi vòng lặp, bạn phải vượt qua nó để .innerHTML thuộc tính của meaningDiv .
Phản hồi mà API nhận được chứa ngữ âm giúp người dùng hiểu cách phát âm của từ. Để thêm âm thanh này trên trang web, bạn cần tạo một phần tử âm thanh và chuyển ngữ âm vào thuộc tính src của phần tử đó. Cuối cùng, bạn cần đặt phần tử âm thanh vào audioDiv bằng thuộc tính .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
}
`;
});
NghiaDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 khối tròn";
NghiaHeader.innerText = "Ý nghĩa";
NghiaDiv.innerHTML = NghiaList;
let aud = `
`;
audioDiv.className = "block";
audioDiv.innerHTML = aud;
};
Bây giờ bạn đã học cách xây dựng ứng dụng từ điển bằng JavaScript, đã đến lúc bạn tự mình xây dựng một số dự án thú vị. Các dự án xây dựng sẽ không chỉ nâng cao những điều cơ bản của bạn mà còn thêm các dự án vào sơ yếu lý lịch của bạn.
Tìm kiếm thêm thực hành về các khái niệm thao tác JavaScript và DOM? Đây là một dự án khác mà bạn có thể xây dựng để củng cố kỹ năng của mình.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
Huy hiệu GitHub có thể tăng cường khả năng đọc của kho lưu trữ bằng cách cung cấp cho người dùng một cách nhanh chóng để nắm bắt các chỉ số về kho lưu trữ. Các huy hiệu có thể được nhúng vào README.md của bạn để làm rõ tầm quan trọng và sự cần thiết của dự án của bạn đối với các nhà phát triển khác. Kết quả là, độc giả có được ý tưởng thực sự nhanh chóng về kho lưu trữ bằng cách kiểm tra các huy hiệu đính kèm.
Ngày lễ kỷ niệm quốc tế là một cách tốt đẹp để công nhận các vấn đề xã hội, ngày lịch sử và sự nghiệp tương ứng. Ngày Quốc tế Lập trình viên tôn vinh vai trò của các lập trình viên trong việc cải thiện cuộc sống hàng ngày. Thế giới văn minh mà chúng ta đang sống là sản phẩm của quá trình làm việc chăm chỉ của các lập trình viên.
Cho dù là truy vấn cơ sở dữ liệu hay kết quả của các phép toán, phương pháp định dạng chuỗi Python cung cấp một cách năng động và hấp dẫn hơn để trình bày kết quả cho người dùng.
Đầu năm nay, Microsoft đã phát hành phiên bản xem trước của Visual Studio 2022 vào thế giới lập trình hoang dã. Đây là một tin tốt! Đó là một IDE cực kỳ phổ biến, nhưng do phải điều chỉnh hoặc thậm chí có thể là một cuộc đại tu, với tốc độ thay đổi trong hệ sinh thái DevOps mà nó đang phát triển mạnh.
Số liệu phần mềm là các thước đo được sử dụng để định lượng các khía cạnh khác nhau của phần mềm của bạn. Những khía cạnh này có thể bao gồm từ chi phí, chất lượng và hiệu quả của nhóm phát triển.
Là người dùng Windows, có lẽ bạn đã ít nhất một lần bắt gặp từ .NET Framework. Khung phần mềm do Microsoft phát triển cho phép bạn xây dựng và chạy các chương trình C #, C ++, F # và Visual Basic. Phiên bản .NET mới nhất là 4.8, nhưng máy tính của bạn có thể cần phiên bản .NET cũ hơn (như .NET 3.5) để chạy một số ứng dụng.
Nếu bạn là một nhà phát triển Python, bạn có thể hưởng lợi rất nhiều từ mảng các khung công tác có sẵn. Trong khi một số khuôn khổ phù hợp nhất với các hệ sinh thái lớn, những khuôn khổ khác chuyên phục vụ các mục tiêu phát triển cụ thể. Đọc tiếp để tìm hiểu các tính năng cơ bản, cách sử dụng và sự khác biệt giữa hai khung Python: Flask và CherryPy.
Nhiều lập trình viên thích giải quyết các vấn đề toán học phức tạp bằng cách sử dụng mã. Nó giúp rèn luyện trí óc và cải thiện kỹ năng giải quyết vấn đề. Trong bài viết này, bạn sẽ học cách tìm các hình vuông và hình khối hoàn hảo có n chữ số nhỏ nhất và lớn nhất bằng Python, C ++ và JavaScript. Mỗi ví dụ cũng chứa đầu ra mẫu cho một số giá trị khác nhau.
Việc chạy Python từ thiết bị đầu cuối thường không thể tránh khỏi. Tuy nhiên, nếu bạn mới cài đặt Python trên Windows 10 lần đầu tiên, thì việc chạy Python qua Windows Terminal chỉ có thể thực hiện được nếu nó được thêm vào biến môi trường Windows PATH.
Câu lệnh if là động lực của lập trình logic. Do đó, việc nắm bắt tốt hơn về Pythons nếu là một bổ sung đáng kể cho kỹ năng lập trình Python của bạn.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
