Blogブログ

Một số JavaScript Web APIs hữu ích có thể bạn chưa biết

Chào các bạn, lại là mình, T, đến từ team Web đây.

Khi xây dựng các trang web và ứng dụng web, JavaScript là một ngôn ngữ lập trình rất quan trọng, giúp giải quyết nhiều vấn đề và tạo ra những trải nghiệm tuyệt vời cho người dùng.

JavaScript sở hữu nhiều tính năng tuyệt vời và hữu ích mà chúng ta có thể sử dụng để làm trang web tăng thêm tính tương tác.

Trong số những tính năng mạnh mẽ của JavaScript, web APIs giúp cho quá trình lập trình trở nên dễ dàng hơn.

Bạn có thể coi web APIs như những cánh cửa thần kỳ cho phép JavaScript nói chuyện với trình duyệt web của bạn và truy cập các chức năng hay ho.

Ví dụ, web APIs cung cấp cho bạn khả năng phát audio và video, tìm vị trí của người dùng, lưu dữ liệu cục bộ, và thậm chí gửi thông báo đến thiết bị của họ.

Đây chỉ là một vài ví dụ, còn rất nhiều điều khác mà bạn có thể đạt được bằng cách sử dụng web APIs trong JavaScript.

Vì vậy, trong bài viết này, chúng ta sẽ cùng nhau khám phá một số web APIs JavaScript cực kỳ mạnh mẽ và hữu ích mà bạn có thể sử dụng khi lập trình.

Dù bạn là người mới bắt đầu hay là một lập trình viên có kinh nghiệm, tôi đảm bảo bài viết này sẽ giúp bạn nâng cao kỹ năng và tạo ra những trải nghiệm web ấn tượng. Nào, hãy cùng nhau bắt đầu!

1. Selection API

Chúng ta có thể truy cập API này trong JavaScript bằng cách sử dụng đối tượng window. Bạn có thể xem đoạn code dưới đây:

// Lấy văn bản được chọn
const selectedText = window.getSelection().toString();

//Xử lý văn bản được chọn
console.log(selectedText);

Như vậy, selection API là một cách tốt để thao tác và lấy thông tin về văn bản được chọn của người dùng trên một trang web.

Bằng cách sử dụng API hữu ích này trong JavaScript, bạn có thể thực hiện nhiều thao tác trên văn bản được người dùng chọn, chẳng hạn như sửa nội dung, áp dụng định dạng, hoặc trích xuất thông tin để xử lý tiếp trong ứng dụng web của bạn.

2. Full-screen web API

Vì vậy, API này cho phép chúng ta chuyển đổi trang web hoặc một phần tử sang chế độ toàn màn hình, cung cấp trải nghiệm tốt hơn cho người dùng.

Để bắt đầu sử dụng fullscreen API, chúng ta sử dụng phương thức requestFullScreen() trên phần tử hoặc trang web mà chúng ta muốn áp dụng chế độ toàn màn hình.

Dưới đây là đoạn code ví dụ về cách sử dụng API này:

// Chọn phần tử hoặc trang bạn muốn áp dụng chế độ toàn màn hình
const element = document.getElementById("myElement");

// Kiểm tra fullscreen API
if (element.requestFullscreen) {
  // Sử dụng phương thức requestFullScreen() để vào chế độ toàn màn hình
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

3. Clipboard API

JavaScript API này cho phép chúng ta tương tác với bộ nhớ tạm (clipboard) của người dùng, cho phép chức năng sao chép và dán trong một trang web hoặc ứng dụng web.

Dưới đây là đoạn code ví dụ về cách sử dụng clipboard API trong JavaScript:

// Sao chép văn bản vào clipboard
navigator.clipboard.writeText("Hello!!")
  .then(() => {
    console.log("Text copied to clipboard");
  })
  .catch((error) => {
    console.error("error: ", error);
});

Bạn cũng có thể đọc văn bản từ clipboard đơn giản bằng cách sử dụng phương thức dưới đây:

const getText = await navigator.clipboard.readText();

4. Geolocation API

Hãy xem đoạn code ví dụ dưới đây để hiểu cách sử dụng geolocation API trong JavaScript:

// Lấy vị trí hiện tại của người dùng
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
  }, (error) => {
    console.error("Error: ", error);
  });
}

Phương thức getCurrentPosition() nhận hai hàm gọi lại (callback) làm tham số: hàm thứ nhất được gọi khi vị trí được lấy thành công, và hàm thứ hai được gọi nếu có lỗi xảy ra.

Sau đó, chúng ta truy cập vào kinh độ và vĩ độ trong hàm gọi lại thành công thông qua thuộc tính coords của đối tượng position và ghi chúng vào console.

Sau đó, trong hàm gọi lại có lỗi xảy ra, chúng ta xử lý các lỗi xảy ra trong quá trình định vị vị trí địa lý và ghi thông báo lỗi vào console.

Như vậy, geolocation API rất hữu ích cho nhiều trường hợp sử dụng, như cung cấp nội dung theo vị trí cụ thể, hoặc hiển thị vị trí của người dùng trên bản đồ.

5. Vibration API

Với web API này, bạn có thể dễ dàng làm rung một thiết bị. Nó thường được sử dụng để làm rung các thiết bị di động.

Dưới đây là đoạn code ví dụ:

// Làm rung thiết bị
function vibrateDevice() {
  if (navigator.vibrate) {
    navigator.vibrate(1000); // Làm rung trong 1000 mili giây (1 giây)
  } else {
    console.error('Vibration is not supported by this browser.');
  }
}

// Usage example
vibrateDevice();

6. Phát hiện băng thông internet

Trong JavaScript, đối tượng navigator cung cấp một phương thức đơn giản để phát hiện và đánh giá băng thông mạng.

Dưới đây là đoạn code ví dụ:

navigator.connection.downlink;

Bạn có thể thử dán đoạn code này vào console của trình duyệt, và bạn sẽ nhận được kết quá tương tự như hình dưới đây:

Bằng cách sử dụng đối tượng navigator, chúng ta đã truy cập vào thuộc tính downlink để xác định tốc độ kết nối internet tính bằng megabit trên giây.

Khi thử nghiệm, tôi nhận được giá trị là 10. Tuy nhiên, kết quả của bạn có thể khác dựa trên tốc độ internet và trình duyệt bạn đang sử dụng. Hãy thử tự trải nghiệm bằng cách truy cập console của trình duyệt.

Tham khảo