JavaScript là ngôn ngữ cốt lõi cho phép bạn biến đổi mạnh mẽ các tài liệu HTML, bổ sung chức năng cho các trang web tĩnh và thậm chí xây dựng các ứng dụng web phức tạp. Về bản chất, JavaScript có thể thực hiện mọi thứ mà bất kỳ ngôn ngữ lập trình nào khác làm được. Tuy nhiên, vượt ra ngoài khả năng cốt lõi này, các trình duyệt web còn triển khai nhiều Web API (Application Programming Interface) cung cấp sự hỗ trợ mạnh mẽ cho các tính năng đa dạng. Bài viết này của tincongngheso.com sẽ đi sâu vào những Web API quan trọng, giúp bạn khai thác tối đa tiềm năng của JavaScript trong phát triển ứng dụng web.
Truy Cập và Thao Tác HTML với DOM (Document Object Model)
Tất cả các Web API đều cung cấp sẵn các đoạn mã để bạn không cần phải tự viết từ đầu. Chúng xử lý các chi tiết phức tạp ở cấp độ thấ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 của họ hoặc bổ sung các cải tiến nhỏ, động cho trang web. Mặc dù nhiều API khác nhắm mục tiêu vào các công nghệ cụ thể như nhập liệu cảm ứng hoặc thông báo, nhưng DOM lại là API nền tảng cho mọi hoạt động lập trình web liên quan đến một tài liệu, chẳng hạn như một trang web được viết bằng HTML.
DOM (Document Object Model) là một đại 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 của nó hoặc sửa đổi các phần nhất định. 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 số văn bản trên trang web, xóa tất cả các đoạn văn, hoặc làm nổi bật các lỗi chính tả, DOM sẽ là trọng tâm của mọi thao tác đó.
Sơ đồ cây cấu trúc DOM mô tả mối quan hệ thừa kế giữa HTMLParagraphElement, HTMLElement, Element và Node trong JavaScript.
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() và thuộc tính HTMLElement.style. Lần lượt, chúng truy xuất các Element khớp và 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 tính năng công cụ 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.
Tạo và Xử Lý URL Dễ Dàng Hơn với URL API
Một số Web API có phạm vi rộng lớn, trong khi những API khác lại hạn chế hơn nhiều. URL API thuộc loại thứ hai. URL API bao gồm các phương thức tiện lợi để làm việc với các URL. Hỗ trợ URL trước đây khá rời rạc trong lập trình web JavaScript, nhưng URL API đã làm cho việc này trở nên dễ dàng hơn 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 phân mảnh, 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.
Tải Nội Dung Web với 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 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 headless. Bạn có thể tải nội dung từ xa và đưa nó vào một trang, hoặc tải 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.
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. Đâ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 bạn 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ý tiếp.
Kiểm Soát 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 xử lý 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 riêng lẻ. 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 bạn không cẩn thận.
Để xử lý các 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. Cách sử 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>Bạn có thể thêm một mục vào lịch sử trình duyệt khi việc nhấn nút này gây ra việc cập nhật nội dung trang:
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 điều hướng trở 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.
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. Những 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. Để 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 là cho phiên hiện tại hoặc vĩnh viễn. Đây là một hệ thống key/value đơ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.
Xác Định 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 gốc. 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. Chi tiết 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í 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 sau đượ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 nâng cao, vì vậy bạn sẽ cần lấy 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 rất dễ sử dụng.
Đọc và Ghi Tệp 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 điều đáng tiếc vì nó ngăn cản toàn bộ 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 cho phép các trường hợp sử dụ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 thu được để đọc dữ liệu từ tệp, trực tiếp từ ổ đĩa. Ghi cũng 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 File System, 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.
Hiển Thị 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 cho người dùng về các sự kiện quan trọng một cách tự động. Rấ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 cần phải tự tìm kiếm. Các ứng dụng web cũng đang bắt kịp. 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 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 bắt buộc vì không ai muốn các trang web tạo thông báo chống lạ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ể thăm dò nội dung mới một cách không liên tục, 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.
Vẽ Lên Màn Hình với 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 đủ chức 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, thật dễ dàng để vẽ một hình chữ nhật:
document.getElementById("c").getContext("2d").fillRect(10, 10, 100, 60);API đầy đủ có hỗ trợ cho 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 hình động phức tạp.
Hỗ Trợ Bộ Điều Khiển Gamepad 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ợ gamepad và các bộ điều khiển trò chơi khác! Để phát hiện các nút nhấn, bạn sẽ cần sử dụng polling thay vì xử lý sự kiện, và điều này có thể ít thuận tiện 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ý ánh xạ nút, và mã này có thể khá phức tạp, nhưng rất đáng để bổ sung hỗ trợ cho gamepad vào các trò chơi dựa trên web của bạn.
Kết Luận
Các Web API mà chúng ta đã khám phá – và nhiều API khác nữa – đều được tài liệu hóa chi tiết trên MDN (Mozilla Developer Network). Cách tốt nhất để tìm hiểu về chúng là thử nghiệm các đoạn mã mẫu, giống như các ví dụ trên. Hãy thử nghiệm trong console JavaScript của trình duyệt và khám phá những 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 những API này sẽ giúp bạn tạo ra những trải nghiệm web phong phú, tương tác và mạnh mẽ hơn, khẳng định vị thế của bạn trong lĩnh vực phát triển web hiện đại.
Bạn đã từng sử dụng những Web API nào và API nào bạn thấy hữu ích nhất? Hãy chia sẻ ý kiến của bạn trong phần bình luận bên dưới, hoặc khám phá thêm các bài viết chuyên sâu về lập trình web tại tincongngheso.com!
