Làm cách nào để hiển thị thông tin api trong html?

API là gì?

Giao diện lập trình ứng dụng (API) là các cấu trúc có sẵn bằng ngôn ngữ lập trình để cho phép nhà phát triển tạo chức năng phức tạp dễ dàng hơn. Chúng trừu tượng hóa mã phức tạp hơn khỏi bạn, cung cấp một số cú pháp dễ sử dụng hơn ở vị trí của nó

Lấy ví dụ thực tế, hãy nghĩ về việc cung cấp điện trong nhà, căn hộ hoặc những nơi ở khác của bạn. Nếu bạn muốn sử dụng một thiết bị trong nhà, bạn cắm nó vào ổ cắm và nó hoạt động. Bạn không cố gắng đấu dây trực tiếp vào nguồn điện — làm như vậy sẽ thực sự kém hiệu quả và nếu bạn không phải là thợ điện thì sẽ rất khó và nguy hiểm khi thử

nguồn hình ảnh. Ổ cắm bị quá tải bởi The Clear Communication People, trên Flickr

Theo cách tương tự, nếu bạn muốn lập trình một số đồ họa 3D, việc sử dụng API được viết bằng ngôn ngữ cấp cao hơn như JavaScript hoặc Python sẽ dễ dàng hơn nhiều thay vì cố gắng viết trực tiếp mã cấp thấp.

Ghi chú. Xem thêm mục thuật ngữ API để biết thêm mô tả

API trong JavaScript phía máy khách

Đặc biệt, JavaScript phía máy khách có sẵn nhiều API — bản thân những API này không phải là một phần của ngôn ngữ JavaScript, thay vào đó chúng được xây dựng dựa trên ngôn ngữ JavaScript cốt lõi, cung cấp cho bạn thêm siêu năng lực để sử dụng trong mã JavaScript của mình. Họ thường rơi vào hai loại

• API trình duyệt được tích hợp vào trình duyệt web của bạn và có thể hiển thị dữ liệu từ trình duyệt và môi trường máy tính xung quanh, đồng thời thực hiện những việc phức tạp hữu ích với nó. Ví dụ: API âm thanh trên web cung cấp các cấu trúc JavaScript để thao tác với âm thanh trong trình duyệt — lấy một bản âm thanh, thay đổi âm lượng, áp dụng các hiệu ứng cho bản âm thanh đó, v.v. Ở chế độ nền, trình duyệt đang thực sự sử dụng một số mã cấp thấp hơn phức tạp (e. g. C++ hoặc Rust) để xử lý âm thanh thực tế. Nhưng một lần nữa, sự phức tạp này được API trừu tượng hóa khỏi bạn
• API của bên thứ ba không được tích hợp vào trình duyệt theo mặc định và bạn thường phải truy xuất mã và thông tin của họ từ một nơi nào đó trên Web. Ví dụ: API Twitter cho phép bạn thực hiện những việc như hiển thị các tweet mới nhất trên trang web của mình. Nó cung cấp một bộ cấu trúc đặc biệt mà bạn có thể sử dụng để truy vấn dịch vụ Twitter và trả về thông tin cụ thể

Mối quan hệ giữa JavaScript, API và các công cụ JavaScript khác

Ở trên, chúng ta đã nói về API JavaScript phía máy khách là gì và chúng liên quan như thế nào đến ngôn ngữ JavaScript. Hãy tóm tắt lại điều này để làm cho nó rõ ràng hơn và cũng đề cập đến vị trí phù hợp của các công cụ JavaScript khác

• JavaScript — Ngôn ngữ kịch bản cấp cao được tích hợp trong trình duyệt cho phép bạn triển khai chức năng trên các trang web/ứng dụng. Lưu ý rằng JavaScript cũng có sẵn trong các môi trường lập trình khác, chẳng hạn như Node
• API trình duyệt — cấu trúc được tích hợp trong trình duyệt dựa trên ngôn ngữ JavaScript và cho phép bạn triển khai chức năng dễ dàng hơn
• API của bên thứ ba — cấu trúc được tích hợp vào nền tảng của bên thứ ba (e. g. Twitter, Facebook) cho phép bạn sử dụng một số chức năng của nền tảng đó trong các trang web của riêng bạn (ví dụ: hiển thị các Tweet mới nhất trên trang web của bạn)
• Thư viện JavaScript — Thường là một hoặc nhiều tệp JavaScript chứa các chức năng tùy chỉnh mà bạn có thể đính kèm vào trang web của mình để tăng tốc hoặc cho phép viết các chức năng phổ biến. Các ví dụ bao gồm jQuery, Mootools và React
• Các khung JavaScript — Bước tiếp theo từ các thư viện, các khung JavaScript (e. g. Angular và Ember) có xu hướng là các gói HTML, CSS, JavaScript và các công nghệ khác mà bạn cài đặt và sau đó sử dụng để viết toàn bộ ứng dụng web từ đầu. Sự khác biệt chính giữa thư viện và khung là "Đảo ngược điều khiển". Khi gọi một phương thức từ thư viện, nhà phát triển sẽ kiểm soát. Với một khung, điều khiển được đảo ngược. khung gọi mã của nhà phát triển

API có thể làm gì?

Có một số lượng lớn API có sẵn trong các trình duyệt hiện đại cho phép bạn thực hiện nhiều thứ khác nhau trong mã của mình. Bạn có thể thấy điều này bằng cách xem trang chỉ mục API MDN

API trình duyệt phổ biến

Cụ thể, các loại API trình duyệt phổ biến nhất mà bạn sẽ sử dụng (và chúng tôi sẽ đề cập chi tiết hơn trong mô-đun này) là

• API để thao tác tài liệu được tải vào trình duyệt. Ví dụ rõ ràng nhất là API DOM (Mô hình đối tượng tài liệu), cho phép bạn thao tác với HTML và CSS — tạo, xóa và thay đổi HTML, tự động áp dụng các kiểu mới cho trang của bạn, v.v. Ví dụ, mỗi khi bạn thấy một cửa sổ bật lên xuất hiện trên một trang hoặc một số nội dung mới được hiển thị, đó là DOM đang hoạt động. Tìm hiểu thêm về các loại API này trong tài liệu Thao tác
• API lấy dữ liệu từ máy chủ để tự cập nhật các phần nhỏ của trang web được sử dụng rất phổ biến. Chi tiết có vẻ nhỏ này lại có tác động rất lớn đến hiệu suất và hành vi của các trang web — nếu bạn chỉ cần cập nhật danh sách chứng khoán hoặc danh sách các câu chuyện mới có sẵn, thì việc thực hiện ngay lập tức mà không phải tải lại toàn bộ trang từ máy chủ có thể khiến . API chính được sử dụng cho việc này là API Tìm nạp, mặc dù mã cũ hơn vẫn có thể sử dụng API

  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  0. Bạn cũng có thể bắt gặp thuật ngữ Ajax, mô tả kỹ thuật này. Tìm hiểu thêm về các API như vậy trong Tìm nạp dữ liệu từ máy chủ
• API để vẽ và thao tác đồ họa được hỗ trợ rộng rãi trong các trình duyệt — những API phổ biến nhất là Canvas và WebGL, cho phép bạn cập nhật dữ liệu pixel có trong phần tử HTML

  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  1 theo chương trình để tạo cảnh 2D và 3D. Ví dụ: bạn có thể vẽ các hình dạng như hình chữ nhật hoặc hình tròn, nhập hình ảnh vào canvas và áp dụng bộ lọc cho hình ảnh đó chẳng hạn như màu nâu đỏ hoặc thang độ xám bằng API Canvas hoặc tạo cảnh 3D phức tạp với ánh sáng và họa tiết bằng WebGL. Các API như vậy thường được kết hợp với các API để tạo vòng lặp hoạt hình (chẳng hạn như

  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  2) và các API khác để tạo các cảnh cập nhật liên tục như phim hoạt hình và trò chơi
• Các API âm thanh và video như

  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  3, API âm thanh trên web và WebRTC cho phép bạn thực hiện những điều thực sự thú vị với đa phương tiện, chẳng hạn như tạo các điều khiển giao diện người dùng tùy chỉnh để phát âm thanh và video, hiển thị các bản nhạc văn bản như chú thích và phụ đề cùng với video của bạn, lấy video từ . )
• API thiết bị cho phép bạn tương tác với phần cứng thiết bị. ví dụ: truy cập GPS của thiết bị để tìm vị trí của người dùng bằng API Định vị địa lý
• API lưu trữ phía máy khách cho phép bạn lưu trữ dữ liệu ở phía máy khách, vì vậy bạn có thể tạo một ứng dụng sẽ lưu trạng thái của ứng dụng giữa các lần tải trang và thậm chí có thể hoạt động khi thiết bị ngoại tuyến. Có một số tùy chọn có sẵn, e. g. lưu trữ tên/giá trị đơn giản với API lưu trữ web và lưu trữ cơ sở dữ liệu phức tạp hơn với API IndexedDB

Các API phổ biến của bên thứ ba

API của bên thứ ba có rất nhiều loại;

• API Twitter, cho phép bạn thực hiện những việc như hiển thị các tweet mới nhất trên trang web của mình
• API bản đồ, như Mapquest và API Google Maps, cho phép bạn thực hiện mọi thứ với bản đồ trên trang web của mình
• Bộ API của Facebook, cho phép bạn sử dụng các phần khác nhau của hệ sinh thái Facebook để mang lại lợi ích cho ứng dụng của bạn, chẳng hạn như bằng cách cung cấp thông tin đăng nhập ứng dụng bằng thông tin đăng nhập Facebook, chấp nhận thanh toán trong ứng dụng, triển khai các chiến dịch quảng cáo được nhắm mục tiêu, v.v.
• API Telegram, cho phép bạn nhúng nội dung từ các kênh Telegram trên trang web của mình, ngoài việc cung cấp hỗ trợ cho bot
• API YouTube, cho phép bạn nhúng video YouTube vào trang web của mình, tìm kiếm trên YouTube, tạo danh sách phát, v.v.
• API Pinterest, cung cấp các công cụ để quản lý bảng và ghim Pinterest để đưa chúng vào trang web của bạn
• API Twilio, cung cấp khung để xây dựng chức năng cuộc gọi thoại và video vào ứng dụng của bạn, gửi SMS/MMS từ ứng dụng của bạn, v.v.
• API Mastodon, cho phép bạn thao tác các tính năng của mạng xã hội Mastodon theo chương trình

Ghi chú. Bạn có thể tìm thông tin về nhiều API của bên thứ 3 hơn trong thư mục API Web có thể lập trình

Các API hoạt động như thế nào?

Các API JavaScript khác nhau hoạt động theo những cách hơi khác nhau, nhưng nhìn chung, chúng có các tính năng chung và chủ đề tương tự như cách chúng hoạt động

Chúng dựa trên các đối tượng

Mã của bạn tương tác với API bằng cách sử dụng một hoặc nhiều đối tượng JavaScript, đóng vai trò là bộ chứa dữ liệu mà API sử dụng (có trong thuộc tính đối tượng) và chức năng mà API cung cấp (có trong phương thức đối tượng)

Ghi chú. Nếu bạn chưa quen với cách các đối tượng hoạt động, bạn nên quay lại và làm việc với mô-đun đối tượng JavaScript của chúng tôi trước khi tiếp tục

Hãy quay lại ví dụ về Web Audio API — đây là một API khá phức tạp, bao gồm một số đối tượng. Những cái rõ ràng nhất là

• const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  4, đại diện cho biểu đồ âm thanh có thể được sử dụng để điều khiển âm thanh phát bên trong trình duyệt và có sẵn một số phương thức và thuộc tính để điều khiển âm thanh đó

• const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  5, đại diện cho phần tử

  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  6 chứa âm thanh bạn muốn phát và thao tác bên trong ngữ cảnh âm thanh

• const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioCtx = new AudioContext();
  

  7, đại diện cho đích của âm thanh, tôi. e. thiết bị trên máy tính của bạn sẽ thực sự xuất nó — thường là loa hoặc tai nghe của bạn

Vậy các đối tượng này tương tác với nhau như thế nào?

________số 8

Trước hết, chúng tôi bao gồm một yếu tố

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Tiếp theo, hãy xem JavaScript cho ví dụ này

Chúng tôi bắt đầu bằng cách tạo một phiên bản

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Tiếp theo, chúng tôi tạo các hằng số lưu trữ các tham chiếu đến các phần tử

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Tiếp theo, chúng tôi bao gồm một số trình xử lý sự kiện dùng để chuyển đổi giữa phát và tạm dừng khi nhấn nút và đặt lại màn hình về đầu khi bài hát phát xong

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Ghi chú. Một số bạn có thể nhận thấy rằng các phương pháp

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Tiếp theo, chúng tôi tạo một đối tượng

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Điều cuối cùng cần làm để làm cho điều này hoạt động là kết nối các nút khác nhau trong biểu đồ âm thanh, được thực hiện bằng phương pháp

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Âm thanh bắt đầu trong nguồn, sau đó được kết nối với nút khuếch đại để có thể điều chỉnh âm lượng của âm thanh. Sau đó, nút khuếch đại được kết nối với nút đích để âm thanh có thể được phát trên máy tính của bạn (thuộc tính

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Họ có điểm vào dễ nhận biết

Khi sử dụng API, bạn nên đảm bảo rằng bạn biết điểm vào của API. Trong API âm thanh trên web, điều này khá đơn giản - đó là đối tượng

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

API Mô hình đối tượng tài liệu (DOM) cũng có một điểm đầu vào đơn giản — các tính năng của nó có xu hướng bị treo ngoài đối tượng

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

API Canvas cũng dựa vào việc sử dụng đối tượng ngữ cảnh để thao tác mọi thứ, mặc dù trong trường hợp này, đó là ngữ cảnh đồ họa chứ không phải ngữ cảnh âm thanh. Đối tượng ngữ cảnh của nó được tạo bằng cách tham chiếu đến phần tử

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Sau đó, bất cứ điều gì chúng ta muốn làm với khung vẽ đều đạt được bằng cách gọi các thuộc tính và phương thức của đối tượng bối cảnh (ví dụ: một thể hiện của

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Ghi chú. Bạn có thể thấy mã này hoạt động trong bản trình diễn quả bóng nảy của chúng tôi (cũng có thể xem mã này đang chạy trực tiếp)

Họ thường sử dụng các sự kiện để xử lý các thay đổi trong trạng thái

Chúng ta đã thảo luận về các sự kiện trước đó trong khóa học trong bài viết Giới thiệu về sự kiện, bài viết này xem xét chi tiết các sự kiện web phía máy khách là gì và cách chúng được sử dụng trong mã của bạn. Nếu bạn chưa quen với cách hoạt động của các sự kiện API web phía máy khách, bạn nên đọc bài viết này trước khi tiếp tục

Một số API web không chứa sự kiện, nhưng hầu hết đều chứa ít nhất một số. Các thuộc tính trình xử lý cho phép chúng tôi chạy các chức năng khi sự kiện kích hoạt thường được liệt kê trong tài liệu tham khảo của chúng tôi trong các phần "Trình xử lý sự kiện" riêng biệt

Chúng tôi đã thấy một số trình xử lý sự kiện được sử dụng trong ví dụ về Web Audio API của chúng tôi ở trên

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Họ có các cơ chế bảo mật bổ sung khi thích hợp

Các tính năng WebAPI phải tuân theo các cân nhắc về bảo mật giống như JavaScript và các công nghệ web khác (ví dụ: chính sách cùng nguồn gốc), nhưng đôi khi chúng có các cơ chế bảo mật bổ sung tại chỗ. Ví dụ: một số WebAPI hiện đại hơn sẽ chỉ hoạt động trên các trang được cung cấp qua HTTPS do chúng truyền dữ liệu có thể nhạy cảm (ví dụ bao gồm Service Worker và Push)

Ngoài ra, một số WebAPI yêu cầu quyền được bật từ người dùng sau khi lệnh gọi chúng được thực hiện trong mã của bạn. Ví dụ: API thông báo yêu cầu quyền sử dụng hộp thoại bật lên

API Web Audio và

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Ghi chú. Tùy thuộc vào mức độ nghiêm ngặt của trình duyệt, các cơ chế bảo mật như vậy thậm chí có thể ngăn ví dụ hoạt động cục bộ, tôi. e. nếu bạn tải tệp ví dụ cục bộ trong trình duyệt của mình thay vì chạy nó từ máy chủ web. Tại thời điểm viết bài này, ví dụ về Web Audio API của chúng tôi không hoạt động cục bộ trên Google Chrome — chúng tôi phải tải nó lên GitHub trước khi nó hoạt động

Bản tóm tắt

Tại thời điểm này, bạn nên hiểu rõ về API là gì, cách chúng hoạt động và bạn có thể làm gì với chúng trong mã JavaScript của mình. Bạn có thể rất hào hứng khi bắt đầu thực sự làm một số điều thú vị với các API cụ thể, vì vậy hãy bắt đầu. Tiếp theo, chúng ta sẽ xem xét thao tác tài liệu với Mô hình đối tượng tài liệu (DOM)

Làm cách nào để hiển thị dữ liệu API JSON trong HTML?

Làm cách nào để đưa dữ liệu JSON vào trang HTML của tôi? .

Lưu trữ đối tượng JSON vào biến

Đầu tiên đặt tất cả các phím trong một danh sách

Create an element ..

Create a

element for the header of the table..

Visit the keys list and create a

element created for the header..

Làm cách nào để đọc tệp JSON và hiển thị trong HTML?

Mã jQuery sử dụng phương thức getJSON() để tìm nạp dữ liệu từ vị trí của tệp bằng yêu cầu AJAX HTTP GET . Phải mất hai đối số. Một là vị trí của tệp JSON và một là hàm chứa dữ liệu JSON. Hàm each() được sử dụng để lặp qua tất cả các đối tượng trong mảng.

Tôi có thể sử dụng API trong HTML không?

API HTML thường bao gồm các mẫu thuộc tính và lớp nhất định có thể được sử dụng trên HTML hiện có . Với Thành phần web, ngay cả tên phần tử tùy chỉnh cũng là trò chơi và với Shadow DOM, những phần tử đó thậm chí có thể có toàn bộ cấu trúc bên trong bị ẩn khỏi phần còn lại của JavaScript hoặc CSS của trang.

Làm cách nào để chuyển đổi phản hồi API sang HTML?

Đầu tiên, hãy lấy một số dữ liệu. Chúng tôi sẽ tìm nạp từ API và lưu nó vào một biến . Như bạn có thể thấy nếu bạn mở rộng chế độ xem Đối tượng, chúng tôi sẽ lấy lại một đối tượng JSON chứa hai thuộc tính - kết quả và thông tin. Chúng tôi sẽ lấy dữ liệu người dùng của mình ra khỏi đối tượng kết quả này và hiển thị nó trên trang này dưới dạng HTML.

Đọc tiếp

for each value and insert it into the

programming html

Reply 1 0 Chia sẻ