JavaScript, trái ngược với quan niệm phổ biến, không chỉ giới hạn ở việc thêm các hiệu ứng động nhỏ lẻ vào trang web. Ngôn ngữ lập trình mạnh mẽ này có khả năng biến đổi hoàn toàn các tài liệu HTML tĩnh, bổ sung tính năng vượt trội và thậm chí tạo ra các ứng dụng web đầy đủ chức năng. Vượt ra ngoài cốt lõi là một ngôn ngữ lập trình đa năng, JavaScript còn được trang bị bởi một loạt các Web API (Application Programming Interface) mà các trình duyệt web hiện đại triển khai. Những API này cung cấp khả năng hỗ trợ mạnh mẽ cho vô vàn tính năng, giúp các nhà phát triển tạo ra trải nghiệm người dùng phong phú và phức tạp hơn bao giờ hết.
Các Web API đóng vai trò là cầu nối giữa JavaScript và các tính năng gốc của trình duyệt, cho phép bạn truy cập và điều khiển mọi thứ từ việc thao tác nội dung trang, quản lý lịch sử duyệt web, đến việc tích hợp các tính năng nâng cao như định vị người dùng hay thậm chí là hỗ trợ tay cầm chơi game. Trong bài viết này, chúng ta sẽ cùng khám phá 10 Web API thiết yếu đang định hình tương lai của phát triển ứng dụng web, giúp bạn mở khóa tiềm năng to lớn của JavaScript để xây dựng những trải nghiệm web đỉnh cao cho độc giả.
1. Truy Cập và Chỉnh Sửa HTML với DOM (Document Object Model)
Tất cả các Web API đều cung cấp một bộ mã đã được xây dựng sẵn để bạn không cần phải tự mình xử lý các chi tiết cấp thấp phức tạp. Điều này 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 bổ sung các cải tiến động nhỏ cho trang web của họ.
Mặc dù nhiều API khác hướng đến các công nghệ chuyên biệt như cảm ứng hay thông báo, DOM là API nền tảng cho mọi chương trình web liên quan đến một tài liệu, như một trang web được viết bằng HTML.
DOM (Document Object Model) là một cách biểu diễn tiêu chuẩn 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 cấu trúc 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.
Biểu đồ lớp minh họa cấu trúc kế thừa các đối tượng HTML trong DOM API, từ Node đến HTMLElement và HTMLParagraphElement.
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 bản, hoặc làm nổi bật các lỗi chính tả, DOM sẽ là trung tâm của mọi thao tác. Ví dụ, đây là một đoạn mã ngắn sẽ thay đổi màu sắc của mọi đoạn văn bả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 bả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
Một số Web API có phạm vi rất lớn, nhưng một số khác lại giới hạn hơn nhiều. URL API thuộc nhóm thứ hai này, bao gồm các phương thức tiện lợi để làm việc với URL.
Trước đây, việc hỗ trợ URL trong lập trình web JavaScript còn khá rời rạc, nhưng URL API đã giúp việc này 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"));Khi phân tích một URL thông qua constructor Window.URL(), bạn sẽ nhận được 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 hash cho định danh đoạn, 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. API này cực kỳ hữu ích khi bạn cần trích xuất thông tin cụ thể từ URL hoặc xây dựng các URL phức tạp một cách có hệ thống.
3. Lấy Nội Dung Web từ Xa với Fetch API
Cho 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 là một tài nguyên dễ 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 có giao diện (headless browser).
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ý nó. 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. Đây là nền tảng cho các ứng dụng web động, nơi dữ liệu được tải bất đồng bộ mà không cần tải lại toàn bộ trang.
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 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ý tiếp.
4. Kiểm Tra và Chỉnh Sửa Lịch Sử Điều Hướng 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 áp đặt. 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 cá nhân. Lập trình JavaScript làm phức tạp mọi thứ; đặc biệt, các ứng dụng web có thể làm ô nhiễm lịch sử trình duyệt và có thể làm hỏng nút “quay lại” nếu không cẩn thận.
Để giải quyết 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à chèn 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 gây ra 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ử trình duyệt, hoàn chỉnh với bản ghi dữ liệu mà bạn có thể truy xuất nếu người dùng quay lại trang này. Kết quả là, ứ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 trình bày lịch sử điều hướng hữu ích. Điều này tạo ra trải nghiệm người dùng liền mạch hơn, giống như một ứng dụng native.
5. Thay Thế Cookies Bằng Bộ Nhớ Truy Cập được qua JavaScript (Web Storage API)
Cách cũ để lưu trữ trạng thái giữa các yêu cầu HTTP là sử dụng cookies. Những gói dữ liệu nhỏ này được lưu trên client và truyền đến server trong các header HTTP, nhưng điều này có nghĩa là JavaScript không thể truy cập chúng.
Để hỗ trợ một cơ chế tương tự cho JavaScript, Web Storage API cho phép bạn lưu dữ liệu, hoặc 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 phía server để lưu trữ trạng thái người dùng đơn giản. 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, mang lại trải nghiệm cá nhân hóa hơn.
Các giá trị bạn lưu bằng Web Storage API phải là chuỗi (string). Để 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.
6. Khám Phá Vị Trí Người Dùng với Geolocation API
Trong lịch sử, 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 native. 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 được truyền một đối tượng GeolocationPosition với thuộc tính coords. API này không có nhiều tính năng “chuông và còi” bổ sung, vì vậy bạn sẽ cần tìm nạp thông tin như quốc gia hoặc múi giờ một cách riêng biệt. Nhưng các 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 để xác định vị trí địa lý cơ bản.
7. Đọc và Ghi Tệp trên Ổ Đĩa Cục Bộ với File System Access 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 điểm đáng tiếc 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 Access API đã mở ra 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 cũng là một quy 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à minh bạch, 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 native về khả năng quản lý tệp.
8. Cung Cấp Thông Báo Hữu Ích & Kịp Thời với Notifications API
Các ứng dụng di động đã tiên phong trong các tính năng thông báo tự động cho người dùng về các sự kiện quan trọ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 của riêng họ, và những điều 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 thực thi 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 sự cho phép, việc gửi 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ẽ ngay lập tức hiển thị 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 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ẽ lên Màn Hình Sử Dụ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 tính năng này để tạo hình ảnh động, xây dựng trò chơi hoặc phát triển một ứng dụng đồ họa đầy đủ chức năng trực tiếp trên trình duyệt.
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 ra các hoạt ảnh phức tạp. Đây là công cụ mạnh mẽ cho đồ họa 2D tương tác và hiệu suất cao trên web.
10. Hỗ Trợ Tay Cầm Chơi Game Kết Nối 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 lần nhấn nút, bạn sẽ cần sử dụng phương pháp thăm dò (polling) 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ư thế này:
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ý các ánh xạ nút, 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, mang lại trải nghiệm gaming gần như ứng dụng native.
Kết Luận
Những Web API này—và nhiều API khác nữa—được tài liệu hóa chi tiết trên MDN. Việc nắm vững và vận dụng chúng là chìa khóa để biến các ý tưởng phức tạp thành hiện thực trên nền tảng web. Các Web API mở rộng đáng kể khả năng của JavaScript, cho phép các nhà phát triển tạo ra các ứng dụng web phong phú, tương tác và mạnh mẽ, sánh ngang với trải nghiệm người dùng trên các ứng dụng native.
Cách tốt nhất để tìm hiểu về chúng là thử nghiệm các đoạn mã mẫu 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. Sức mạnh trong tay bạn để định hình tương lai của web là không giới hạn!
Hãy chia sẻ ý kiến của bạn về các Web API mà bạn thấy hữu ích nhất hoặc muốn tìm hiểu sâu hơn trong phần bình luận bên dưới, và đừng quên khám phá thêm các bài viết chuyên sâu về phát triển web trên trangtincongnghe.net!
