JavaScript, vốn được biết đến như ngôn ngữ “linh hồn” của các trang web tương tác, ngày nay đã vượt xa vai trò ban đầu. Với khả năng biến đổi hoàn toàn tài liệu HTML, thêm tính năng động vào các trang tĩnh và thậm chí xây dựng những ứng dụng web đầy đủ tính năng, JavaScript đã trở thành một phần không thể thiếu trong hệ sinh thái phát triển web hiện đại. Mặc dù về cốt lõi, JavaScript có thể làm được mọi thứ mà bất kỳ ngôn ngữ lập trình nào khác có thể, nhưng chính các Web API (Application Programming Interface) được tích hợp trong trình duyệt mới là yếu tố mang lại sức mạnh vượt trội và sự hỗ trợ mạnh mẽ cho vô số tính năng độc đáo.
Tại trithuccongnghe.net, chúng tôi luôn cập nhật những kiến thức công nghệ tiên tiến nhất để giúp bạn nắm vững các công cụ mạnh mẽ này. Bài viết này sẽ đi sâu vào 10 Web API quan trọng và hữu ích nhất, những công cụ giúp lập trình viên JavaScript mở rộng giới hạn sáng tạo, xây dựng các ứng dụng web phức tạp và mang lại trải nghiệm người dùng vượt trội. Từ việc thao tác với cấu trúc trang cho đến quản lý dữ liệu cục bộ hay thậm chí là tương tác với phần cứng thiết bị, các Web API này chính là chìa khóa để bạn biến những ý tưởng táo bạo thành hiện thực trên nền tảng web. Hãy cùng khám phá!
1. Truy Cập và Chỉnh Sửa HTML Với DOM (Document Object Model)
Mọi Web API đều cung cấp các đoạn mã được chuẩn hóa để bạn không phải tự mình xây dựng từ đầu. Chúng xử lý các chi tiết cấp thấp phức tạp, cho phép các nhà phát triển tập trung vào việc xây dựng ứng dụng hoặc thêm các cải tiến động nhỏ vào trang web của họ.
Trong số các API này, DOM (Document Object Model) là API nền tảng cho mọi hoạt động lập trình web liên quan đến tài liệu, như một trang web được viết bằng HTML. DOM là một biểu diễn chuẩn hóa của một trang web mà JavaScript có thể sử dụng để kiểm tra nội dung hoặc sửa đổi các phần cụ thể. Nó phản ánh bản chất phân cấp của HTML và xử lý các khái niệm cốt lõi như node, element, event và text.
Nếu bạn muốn thay đổi một đoạn văn bản trên trang web, xóa tất cả các đoạn văn hay tô sáng lỗi chính tả, DOM sẽ là trung tâm của mọi thao tác đó.
Với DOM, các đối tượng HTML được tổ chức theo cấu trúc cây, cho phép JavaScript dễ dàng truy cập, thay đổi nội dung, thuộc tính và kiểu dáng của chúng. Điều này biến các trang web tĩnh thành các giao diện động, phản hồi theo tương tác của người dùng.
Biểu đồ phân cấp đối tượng trong DOM: HTMLParagraphElement kế thừa từ HTMLElement, Element và Node
Ví dụ, đây là một đoạn mã ngắn sẽ thay đổi màu của mỗi đoạn văn trên một trang:
document.querySelectorAll("p").forEach(function(element) {
element.style.color = "orange";
});DOM cung cấp phương thức Document.querySelectorAll() để truy xuất các phần tử phù hợp và thuộc tính HTMLElement.style để truy cập CSS nội tuyến. Bạn có thể chạy đoạn mã này trên bất kỳ trang web nào bằng cách sử dụng công cụ dành cho nhà phát triển của trình duyệt. Đây là một cách tốt để kiểm tra cấu trúc của một trang web: nếu những gì bạn mong đợi là đoạn văn không chuyển sang màu cam, có thể có lỗi trong HTML.
2. Tạo và Thao Tác URL Dễ Dàng Hơn với URL API
Trong khi một số Web API có phạm vi rất rộng, một số khác lại chuyên biệt hơn. URL API là một trong số đó, cung cấp các phương thức tiện lợi để làm việc với các URL. Trước đây, việc hỗ trợ URL trong lập trình web JavaScript khá phức tạp, nhưng URL API đã giúp mọi việc trở nên dễ dàng hơn rất nhiều.
let addr = new URL("https://example.com/this/is/just?an=example");
console.log(addr.pathname);
console.log(addr.searchParams.get("an"));Việc phân tích một URL, thông qua hàm tạo Window.URL(), trả về một đối tượng với các thuộc tính đại diện cho các phần khác nhau của URL đó. Chúng bao gồm các thành phần như hash cho định danh đoạn (fragment identifier), host cho tên miền và cổng của URL, và searchParams cung cấp quyền truy cập vào các tham số truy vấn. Nhờ có URL API, việc trích xuất thông tin, sửa đổi đường dẫn hay thêm bớt tham số trở nên trực quan và ít lỗi hơn.
3. Lấy Nội Dung Web Bằng Fetch API
Dù bạn đang xử lý các giá trị href của các liên kết trên một trang, hay quản lý URL cho các dịch vụ từ xa, Fetch API là một tài nguyên dễ sử dụng và hữu ích. Fetch API cho phép bạn viết mã hoạt động giống như một trình duyệt “không đầu” (headless browser), tức là nó có thể gửi yêu cầu và nhận phản hồi từ các tài nguyên mạng mà không cần giao diện người dùng.
Bạn có thể tìm nạp nội dung từ xa và đưa nó vào một trang, hoặc tìm nạp dữ liệu và xử lý chúng. Nếu một trang web cung cấp dự báo thời tiết hoặc dữ liệu thị trường chứng khoán, bạn có thể sử dụng Fetch để lấy dữ liệu đó và tích hợp vào ứng dụng của riêng mình.
Một phương thức duy nhất – Window.fetch() – cung cấp tất cả chức năng của Fetch API. Dưới đây là một ví dụ đơn giản về cách sử dụng nó:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))Nếu bạn chạy đoạn mã này trong console của trình duyệt, nó sẽ in ra chi tiết của đối tượng mà bạn thấy nếu truy cập trực tiếp vào https://jsonplaceholder.typicode.com/todos/1. Đằng sau hậu trường, Fetch API gửi một yêu cầu đến trang web mục tiêu và trả về phản hồi cho mã gọi, sẵn sàng để xử lý thêm. Với sự hỗ trợ của Promises, Fetch API giúp việc xử lý các thao tác bất đồng bộ trở nên dễ quản lý và mạnh mẽ hơn so với các phương pháp cũ như XMLHttpRequest.
4. Kiểm Tra và Điều Hướng Lịch Sử Trình Duyệt Với History API
Phần lớn công việc khi tạo ứng dụng web liên quan đến việc giải quyết các hạn chế do HTTP đặt ra. Giao thức này được thiết kế để phục vụ các tài liệu riêng biệt, được tải và hiển thị thông qua các yêu cầu riêng lẻ. Lập trình JavaScript làm phức tạp hóa mọi thứ; đặc biệt, các ứng dụng web có thể “làm bẩn” lịch sử của trình duyệt và có thể làm hỏng nút quay lại nếu bạn không cẩn thận.
Để xử lý những vấn đề này, History API cho phép bạn điều hướng và sửa đổi lịch sử người dùng. Ứng dụng thực tế nhất của tính năng này là thêm các mục hữu ích vào lịch sử mà nếu không sẽ bị bỏ qua. Ví dụ, bạn có thể có một nút cập nhật tài liệu của mình bằng JavaScript:
<button id="b" data-page="page2.html">Page 2</button>Sau đó, bạn có thể thêm một mục vào lịch sử trình duyệt khi nút này được nhấn làm cho nội dung trang cập nhật:
button.addEventListener("click", function(ev) {
let page = ev.target.getAttribute("data-page"),
data = fetch_page(page);
history.pushState(data, "", page);
});Phương thức pushState() thêm một mục vào lịch sử của trình duyệt, hoàn chỉnh với một bản ghi dữ liệu mà bạn có thể truy xuất nếu người dùng điều hướng trở lại trang này. Nhờ đó, ứng dụng web của bạn có thể phản hồi nhanh hơn nhiều, tránh các chuyến đi không cần thiết đến máy chủ, nhưng vẫn hiển thị lịch sử điều hướng hữu ích. Điều này đặc biệt quan trọng đối với các ứng dụng trang đơn (SPA) nơi nội dung thay đổi mà không cần tải lại toàn bộ trang.
5. Lưu Trữ Dữ Liệu Với Web Storage API (Thay Thế Cookies)
Cách cũ để lưu trữ trạng thái giữa các yêu cầu HTTP là sử dụng cookies. Các gói dữ liệu nhỏ này được lưu trên máy khách và truyền đến máy chủ trong các tiêu đề HTTP, nhưng điều này có nghĩa là JavaScript không thể truy cập chúng trực tiếp.
Để hỗ trợ một cơ chế tương tự cho JavaScript, Web Storage API cho phép bạn lưu dữ liệu, có thể là cho phiên hiện tại (sessionStorage) hoặc vĩnh viễn (localStorage). Đây là một hệ thống cặp khóa/giá trị đơn giản:
localStorage.setItem("Theme", "Dark");
// ...
let theme = localStorage.getItem("Theme");API này hoàn hảo cho các ứng dụng web không cần chức năng máy chủ. Bạn có thể dễ dàng nâng cấp một trang web tĩnh bằng cách lưu trữ các tùy chọn người dùng hoặc dữ liệu về các trang đã xem. Các giá trị bạn lưu bằng Web Storage API phải là chuỗi. Để lưu trữ các loại dữ liệu khác, bạn có thể chuyển đổi chúng thành JSON bằng JSON.stringify() trước khi lưu, sau đó gọi JSON.parse() khi tải. Web Storage cung cấp dung lượng lưu trữ lớn hơn nhiều so với cookies (thường là 5-10MB) và không tự động gửi dữ liệu lên server với mỗi yêu cầu, giúp cải thiện hiệu suất.
6. Định Vị Người Dùng Bằng Geolocation API
Trước đây, nếu bạn cần làm việc với vị trí vật lý của khách truy cập, bạn sẽ cần một ứng dụng gốc (native app). Geolocation API cung cấp chức năng này cho các trình duyệt web, với điều kiện người dùng cấp quyền.
Thông tin vị trí có thể được sử dụng vì nhiều lý do: để hiển thị các cửa hàng gần đó, để cung cấp nội dung cụ thể theo vị trí, hoặc để xác định múi giờ của người dùng, chẳng hạn. Làm việc với vị trí của người dùng đơn giản như gọi phương thức getCurrentPosition() của đối tượng navigator.geolocation:
navigator.geolocation.getCurrentPosition(success, error);Bạn sẽ cần định nghĩa các hàm error và success; hàm success sẽ nhận một đối tượng GeolocationPosition với thuộc tính coords. Không có chuông và còi ở đây, vì vậy bạn sẽ cần tìm nạp thông tin như quốc gia hoặc múi giờ riêng biệt. Nhưng tọa độ bạn nhận được có thể rất chính xác và API này rất dễ sử dụng. Điều quan trọng là luôn tuân thủ quyền riêng tư của người dùng và chỉ yêu cầu vị trí khi thực sự cần thiết.
7. Đọc và Ghi Tệp Trên Ổ Đĩa Cục Bộ Với File System API
Theo truyền thống, các ứng dụng web không thể truy cập các tệp cục bộ vì lý do bảo mật. Đây là một hạn chế vì nó ngăn cản một loạt các ứng dụng thú vị, như chương trình vẽ, trình soạn thảo văn bản, v.v. May mắn thay, File System API đã ra đời, mang lại những khả năng này.
async function getFile() {
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
console.log(file.name + " is a " + file.type);
return file;
}Bạn có thể sử dụng đối tượng File kết quả để đọc dữ liệu từ tệp, trực tiếp từ ổ đĩa. Việc ghi tệp là một quá trình tương tự, liên quan đến phương thức showSaveFilePicker() và phương thức createWritable() của FileHandle.
Sử dụng các lớp của File System API, việc đọc và ghi dữ liệu giờ đây phần lớn là trong suốt, cho phép tích hợp chặt chẽ hơn với bộ nhớ ổ đĩa cục bộ. API này là một trong những API quan trọng nhất để đưa các ứng dụng web ngang hàng với các ứng dụng gốc, mở ra cánh cửa cho các ứng dụng chỉnh sửa hình ảnh, video, văn bản chạy hoàn toàn trên trình duyệt.
8. Gửi Thông Báo Kịp Thời và Hữu Ích Với Notifications API
Các ứng dụng di động đã đi tiên phong trong các tính năng thông báo cho người dùng về các sự kiện quan trọng một cách tự động. Thật hữu ích khi một ứng dụng thông báo cho bạn về điều gì đó để bạn không phải tự mình tìm kiếm.
Các ứng dụng web cũng đang bắt kịp xu hướng này. Bạn có thể đã thấy các ứng dụng web cung cấp thông báo riêng của họ, và những thông báo này được kích hoạt bởi Notifications API.
Có một số giai đoạn trong quy trình thông báo, bắt đầu bằng việc yêu cầu quyền:
Notification.requestPermission().then((result) => {
console.log(result);
});Đây là một bước quan trọng mà API này bắt buộc, vì không ai muốn các trang web tạo thông báo trái với ý muốn của họ. Tuy nhiên, với quyền được cấp, việc gửi một thông báo khá dễ dàng:
new Notification("Do something important!");Nếu cài đặt trình duyệt của bạn cho phép, điều này sẽ hiển thị ngay lập tức một thông báo. Đối với một ứng dụng web chạy dài hạn, như một trang mạng xã hội, bạn có thể định kỳ kiểm tra nội dung mới, sau đó tạo một thông báo nếu một bài đăng phù hợp xuất hiện trong nguồn cấp dữ liệu.
9. Vẽ Đồ Họa Trực Tiếp Lên Màn Hình Bằng Canvas API
Canvas API cung cấp các hàm cấp thấp để vẽ đồ họa trong một phần tử canvas. Bạn có thể sử dụng điều này để tạo hình ảnh động, xây dựng một trò chơi hoặc phát triển một ứng dụng đồ họa đầy đủ tính năng.
Bắt đầu với một phần tử canvas trong trang web của bạn:
<canvas id="c"></canvas>Với phần tử này, việc vẽ một hình chữ nhật rất dễ dàng:
document.getElementById("c").getContext("2d").fillRect(10, 10, 100, 60);API đầy đủ hỗ trợ nhiều hình dạng, màu sắc và kiểu dáng khác nhau. Nó cho phép bạn vẽ văn bản, biến đổi hình ảnh và thậm chí tạo các hoạt ảnh phức tạp. Canvas API là nền tảng cho các ứng dụng web yêu cầu đồ họa 2D phức tạp, như công cụ chỉnh sửa ảnh trực tuyến, biểu đồ tương tác, và các trò chơi chạy trên trình duyệt mà không cần plugin bên ngoài.
10. Hỗ Trợ Tay Cầm Chơi Game Với Gamepad API
Một API khác mà bạn có thể ngạc nhiên khi thấy: vâng, các ứng dụng web có thể hỗ trợ tay cầm chơi game và các bộ điều khiển trò chơi khác!
Để phát hiện các nút bấm, bạn sẽ cần sử dụng polling (kiểm tra định kỳ) thay vì xử lý sự kiện, và điều này có thể ít tiện lợi hơn. Cách tiếp cận tiêu chuẩn là như sau:
requestAnimationFrame(updateStatus);
function updateStatus() {
let gamepad = navigator.getGamepads()[0];
const GAMEPAD_BUTTON_LEFT = 14;
if (gamepad) {
gamepad.buttons.entries().forEach(function (btn) {
if (btn[0] === GAMEPAD_BUTTON_LEFT && btn[1].pressed) {
console.log("LEFT is pressed");
}
});
}
requestAnimationFrame(updateStatus);
}Bạn sẽ cần xử lý ánh xạ nút bấm, và mã này có thể khá phức tạp, nhưng rất đáng giá để thêm hỗ trợ tay cầm chơi game vào các trò chơi dựa trên web của bạn. Gamepad API mở ra một kỷ nguyên mới cho các trò chơi web, mang lại trải nghiệm nhập liệu phong phú và quen thuộc hơn cho game thủ, từ đó nâng cao mức độ tương tác và tính giải trí của các ứng dụng giải trí trên trình duyệt.
Kết luận
Các Web API này – và rất nhiều API khác – đều được tài liệu hóa chi tiết tại MDN Web Docs. Cách tốt nhất để học về chúng là thử nghiệm các đoạn mã ví dụ như trên. Hãy thử nghiệm trong console JavaScript của trình duyệt và khám phá các loại ứng dụng mới mà bạn có thể xây dựng chỉ bằng HTML, CSS và JavaScript.
Việc nắm vững các Web API này không chỉ giúp bạn mở rộng khả năng của JavaScript mà còn khẳng định vị thế của bạn như một nhà phát triển ứng dụng web hiện đại. Chúng tôi tin rằng, với những kiến thức này, bạn sẽ có thể tạo ra những sản phẩm công nghệ ấn tượng, mang lại giá trị thực sự cho người dùng và đóng góp vào sự phát triển của hệ sinh thái web. Đừng ngần ngại khám phá và áp dụng chúng vào các dự án của riêng mình để chứng kiến sức mạnh biến đổi mà chúng mang lại!