JavaScript là ngôn ngữ lập trình không thể thiếu trong việc phát triển web hiện đại. Từ việc thêm các chức năng động nhỏ đến xây dựng các ứng dụng web phức tạp, JavaScript đã cách mạng hóa cách chúng ta tương tác với các tài liệu HTML. Vượt xa những khả năng cơ bản của một ngôn ngữ lập trình, các trình duyệt web ngày nay còn triển khai hàng loạt Web API (Application Programming Interface) mạnh mẽ, cung cấp sự hỗ trợ vượt trội cho nhiều tính năng nâng cao.
Những Web API này đóng vai trò cầu nối, cho phép JavaScript giao tiếp trực tiếp với các tính năng của trình duyệt và hệ thống. Chúng xử lý các chi tiết kỹ thuật phức tạp ở cấp độ thấp, giúp các nhà phát triển tập trung vào việc tạo ra những trải nghiệm người dùng phong phú và đa dạng. Bài viết này sẽ giới thiệu 10 Web API nổi bật mà mọi lập trình viên JavaScript nên biết để biến một trang web tĩnh trở thành một ứng dụng web đầy đủ chức năng và mạnh mẽ.
1. Truy cập và Thao tác HTML với DOM (Document Object Model)
DOM (Document Object Model) là một trong những Web API cơ bản và quan trọng nhất đối với mọi lập trình viên web. Đây là một đại diện tiêu chuẩn, có cấu trúc phân cấp của một trang web (HTML, XML) mà JavaScript có thể sử dụng để kiểm tra nội dung hoặc sửa đổi các phần nhất định của nó. DOM 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, loại bỏ 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à cốt lõi của quá trình đó.
Cấu trúc kế thừa của các phần tử HTML trong DOM
Ví dụ, đoạn mã sau sẽ thay đổi màu sắc của mọi đoạn văn (thẻ <p>) trên một trang thành màu cam:
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 hay để kiểm tra cấu trúc của 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ộng lớn, URL API lại tập trung vào một nhiệm vụ cụ thể nhưng cực kỳ hữu ích: 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á rời rạc, nhưng URL API đã giúp quá trình này trở nên dễ dàng hơn rất nhiều với các phương thức tiện lợi.
let addr = new URL("https://example.com/this/is/just?an=example");
console.log(addr.pathname);
console.log(addr.searchParams.get("an"));Phân tích một URL thông qua hàm tạo Window.URL() sẽ 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 (query parameters).
3. Lấy Nội dung Web với Fetch API
Fetch API cho phép bạn viết mã hoạt động giống như một trình duyệt không giao diện (headless browser), giúp bạn dễ dàng lấy nội dung từ xa. Cho dù bạn đang xử lý các giá trị href của các liên kết trên trang hay quản lý URL cho các dịch vụ từ xa, Fetch đều là một tài nguyên hữu ích và tiện lợi.
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 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:
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ý thêm.
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 các ứng dụng web liên quan đến việc xử lý 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 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.
Để 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>Bạn sau đó 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 và 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 quay 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.
5. Thay thế Cookie Bằng Bộ Nhớ Dễ Truy Cập với Web Storage API
Phương pháp cũ để lưu trữ trạng thái giữa các yêu cầu HTTP là sử dụng cookie. 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 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 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.
Lưu ý rằng 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 sang JSON bằng JSON.stringify() trước khi lưu, sau đó gọi JSON.parse() khi tải.
6. 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 (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 được truyền một đối tượng GeolocationPosition với thuộc tính coords. Không có các tính năng phức tạp ở đâ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.
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 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 kết quả để đọc dữ liệu từ tệp, trực tiếp từ ổ đĩa. Việc 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à 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 gốc.
8. 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 đã đi 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. 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 phải tự tìm kiếm.
Tuy nhiên, các ứng dụng web đ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 bậ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 trái với ý muốn của họ. Tuy nhiên, với quyền, 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ẽ 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, như một trang mạng xã hội, bạn có thể thăm dò nội dung mới định kỳ, 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 chức năng 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 đủ 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 ra các hoạt hình phức tạp.
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 nút bấm, 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ể kém 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ý 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.
Kết luận
Các Web API mà chúng ta vừa khám phá – và nhiều API khác nữa – đã thực sự mở rộng giới hạn của những gì có thể làm được trên trình duyệt web chỉ với HTML, CSS và JavaScript. Từ việc thao tác từng chi tiết nhỏ của trang web với DOM, đến việc kết nối với các thiết bị ngoại vi như tay cầm chơi game hay truy cập hệ thống tệp cục bộ, các API này biến những trang web tĩnh đơn thuần thành những ứng dụng web động, giàu tính năng và mang lại trải nghiệm người dùng tương tự như các ứng dụng gốc.
Cách tốt nhất để nắm vững các API này là thực hành với các đoạn mã mẫu. 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. Khả năng của JavaScript kết hợp với sức mạnh của Web API là vô hạn, mở ra cánh cửa cho sự sáng tạo không ngừng trong lĩnh vực phát triển web. Đừng ngần ngại chia sẻ những phát hiện và ứng dụng của bạn trong phần bình luận bên dưới, và hãy tiếp tục khám phá các bài viết công nghệ hữu ích khác trên tienichthuthuat.com để nâng cao kiến thức và kỹ năng của mình!
