JavaScript có khả năng thay đổi hoàn toàn các tài liệu HTML, bổ sung chức năng cho các trang web tĩnh và thậm chí tạo ra những ứng dụng web hoàn chỉnh. Về bản chất, JavaScript có thể làm mọi thứ mà bất kỳ ngôn ngữ lập trình nào khác cũng có thể. Tuy nhiên, vượt xa điều này, các trình duyệt web còn triển khai nhiều Web API (Giao diện Lập trình Ứng dụng) cung cấp sự hỗ trợ mạnh mẽ cho vô vàn tính năng. Với việc tận dụng hiệu quả các Web API trong JavaScript, các nhà phát triển có thể tạo ra những trải nghiệm người dùng phong phú và tương tác, biến một trang web đơn giản thành một nền tảng động, linh hoạt, đáp ứng mọi nhu cầu của người dùng hiện đại.
1. Truy cập và Tương tác với HTML qua DOM (Document Object Model)
Tất cả các Web API đều cung cấp mã nguồn để bạn không cần phải tự viết lại 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 của mình hoặc thêm các cải tiến động nhỏ cho trang web.
Nhiều API trong số này 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. Tuy nhiên, API đầu tiên này lại là nền tảng cho mọi hoạt động lập trình web liên quan đến 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 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.
Sơ đồ cấu trúc kế thừa các phần tử HTML trong Document Object Model (DOM)
Nếu bạn muốn thay đổi một số văn bản trên một trang web, xóa tất cả các đoạn văn hoặc làm nổi bật lỗi chính tả, DOM sẽ là trung tâm của mọi hoạt động. 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 phù hợ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 thứ 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. Dễ dàng Tạo và Quản lý URL với URL API
Một số Web API có phạm vi rất rộng, nhưng những API khác lại hạn chế hơn nhiều. URL API là một trong những API sau này, bao gồm 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á rời rạc, nhưng URL API đã giúp mọi việc 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"));Phân tích cú pháp 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.
3. Tải Nội dung Web từ Xa bằng 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 một chút giống như một trình duyệt không giao diện đồ họa (headless browser).
Bạn có thể lấy nội dung từ xa và đưa nó vào một trang, hoặc lấy dữ liệu và xử lý. 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ới ứ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 bảng điều khiển 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 soát Lịch sử Điều hướng Trình duyệt với History API
Phần lớn công việc liên quan đến việc 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 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ử của 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 thao tác nhấn nút này khiến nội dung trang được 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. 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 cung cấp lịch sử điều hướng hữu ích.
5. Thay thế Cookies bằng Web Storage API (Local Storage & Session Storage)
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 client và truyền đến máy chủ trong 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 hoặc vĩnh viễn. Đó 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ữ 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.
6. Định vị Người dùng với Geolocation API
Trong quá khứ, 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ó chuông và còi ở đây, 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.
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. Điều này thật đáng tiếc vì nó ngăn chặ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 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. Quá trình ghi cũng 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 gốc.
8. Hiển thị Thông báo Hữu ích và Kịp thời qua Notifications API
Các ứng dụng di động đã tiên phong trong các tính năng tự động thông báo 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. 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 làm việc 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 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ị thông báo ngay lập tức. Đố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 một cách đị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ẽ Đồ họa 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 API 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 đủ.
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.
10. Hỗ trợ Bộ Điều khiển Trò chơi (Gamepad)
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 lần nhấn nút, bạn sẽ cần sử dụng phương pháp thăm dò định kỳ (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ý các ánh xạ nút, và đoạn mã này có thể khá phức tạp, nhưng rất đáng để bổ sung hỗ trợ gamepad vào các trò chơi dựa trên web của bạn.
Lời kết
Các Web API này—và nhiều API khác—được tài liệu hóa đầy đủ trên MDN Web Docs. 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 bảng điều khiển 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 API này không chỉ mở rộng khả năng sáng tạo mà còn giúp bạn xây dựng những ứng dụng web mạnh mẽ, đáp ứng mọi nhu cầu tương tác của người dùng trong kỷ nguyên số.
Tài liệu tham khảo:
