44. API Trong HTML

API (Application Programming Interface) trong HTML thường liên quan đến các API được cung cấp bởi các trình duyệt web hoặc các dịch vụ web khác nhau để cho phép lập trình viên tương tác với các tính năng của trình duyệt hoặc các dịch vụ trực tuyến. Các API trong HTML có thể dùng để thực hiện các tác vụ như truy cập đến các phần tử trên trang, thực hiện tương tác với dữ liệu hoặc dịch vụ ngoài, xử lý sự kiện, và nhiều chức năng khác.

Dưới đây là một số ví dụ về các API quan trọng trong HTML:

DOM API (Document Object Model): DOM API cho phép bạn tương tác với cấu trúc và nội dung của trang HTML bằng JavaScript. Bạn có thể tìm kiếm, thêm, xóa, sửa đổi các phần tử HTML và xử lý sự kiện.
Canvas API: Canvas API cho phép bạn vẽ đồ họa và tạo hình ảnh động trên trình duyệt web bằng JavaScript.
Web Storage API: Cho phép bạn lưu trữ dữ liệu trên máy khách (client-side) để duy trì thông tin người dùng mà không cần gửi đến máy chủ.
Geolocation API: Cho phép bạn truy cập vị trí địa lý của người dùng thông qua trình duyệt.
Audio và Video API: Cho phép bạn tương tác với phương tiện âm thanh và video trên trang web, chẳng hạn như điều khiển phát và dừng, tùy chỉnh giao diện người dùng và thậm chí xử lý âm thanh và video bằng JavaScript.
Fetch API: Cho phép bạn thực hiện các yêu cầu HTTP bằng JavaScript để truy xuất và gửi dữ liệu đến các dịch vụ web từ máy khách.
Service Worker API: Cho phép bạn thực hiện các tác vụ nền và quản lý bộ nhớ cache, cho phép ứng dụng web hoạt động offline.
WebRTC API: Cho phép bạn tạo kết nối trực tiếp giữa các trình duyệt để thực hiện truyền dữ liệu trực tiếp, thường được sử dụng cho video call và truyền trực tuyến.

Các ví dụ trên chỉ ra một số trong số nhiều API mà HTML cung cấp để tạo ra các trải nghiệm web tương tác và đa dạng.

Dưới đây là một số ví dụ về cách sử dụng các API trong HTML:

DOM API (Document Object Model):

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1>DOM Example</h1>
    
    <p id="myParagraph">This is a paragraph.</p>
    
    <script>
        // Thay đổi nội dung của đoạn văn bản
        const paragraph = document.getElementById("myParagraph");
        paragraph.textContent = "This paragraph has been changed.";
    </script>
</body>
</html>

Canvas API:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Example</title>
</head>
<body>
    <h1>Canvas Example</h1>
    
    <canvas id="myCanvas" width="400" height="200"></canvas>
    
    <script>
        const canvas = document.getElementById("myCanvas");
        const context = canvas.getContext("2d");
        
        context.fillStyle = "blue";
        context.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

Web Storage API:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Storage Example</title>
</head>
<body>
    <h1>Web Storage Example</h1>
    
    <input type="text" id="textInput">
    <button id="saveButton">Save</button>
    <div id="output"></div>
    
    <script>
        const textInput = document.getElementById("textInput");
        const saveButton = document.getElementById("saveButton");
        const output = document.getElementById("output");
        
        saveButton.addEventListener("click", function() {
            const inputText = textInput.value;
            localStorage.setItem("userInput", inputText);
            output.textContent = "Saved: " + inputText;
        });
        
        const savedText = localStorage.getItem("userInput");
        if (savedText) {
            output.textContent = "Saved: " + savedText;
        }
    </script>
</body>
</html>

Các ví dụ trên chỉ ra cách sử dụng DOM API, Canvas API và Web Storage API để thực hiện các tác vụ như thay đổi nội dung, vẽ đồ họa và lưu trữ dữ liệu trên trang web.

Leave a Comment Cancel Reply