programming javascript

Api trong javascript là gì?

Một phần quan trọng khi làm việc với JavaScript là biết cách kết nối với API. Là một nhà phát triển non trẻ, đôi khi bạn có thể được yêu cầu chỉ "nghịch ngợm với một số API. " để tìm hiểu chúng là gì và làm thế nào để làm việc với chúng. Nếu bạn đã từng xem tài liệu về API và không biết bắt đầu từ đâu hoặc phải làm gì và cảm thấy thất vọng, thì đây là bài viết dành cho bạn

Chúng tôi sẽ tạo một ứng dụng web rất đơn giản với JavaScript đơn giản sẽ truy xuất thông tin từ API và hiển thị nó trên trang. Sẽ không có máy chủ, phụ thuộc, công cụ xây dựng hoặc bất kỳ thứ gì khác để làm vấy bẩn thêm vùng nước về một chủ đề vốn đã khó và khó hiểu cho người mới bắt đầu

Xem ứng dụng Demo
Mã nguồn trên GitHub

điều kiện tiên quyết

Kiến thức cơ bản về HTML và CSS
Kiến thức cơ bản về cú pháp và kiểu dữ liệu JavaScript
Kiến thức cơ bản về làm việc với các đối tượng JSON và JavaScript. Bài viết ngắn gọn này sẽ làm sáng tỏ hoàn toàn

Mọi thứ khác chúng tôi sẽ đề cập trên đường đi

Bàn thắng

Chúng ta sẽ viết từ đầu ứng dụng web đơn giản này kết nối với API Studio Ghibli, truy xuất dữ liệu bằng JavaScript và hiển thị dữ liệu ở mặt trước của trang web. Đây không phải là một tài nguyên phong phú về API hoặc REST - chỉ là ví dụ đơn giản nhất có thể để thiết lập và chạy mà bạn có thể xây dựng trong tương lai. chúng ta sẽ học

Web API là gì

Tìm hiểu cách sử dụng yêu cầu HTTP

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

8 với JavaScript

Cách tạo và hiển thị các phần tử HTML bằng JavaScript

Nó sẽ trông giống thế này

Bắt đầu nào

Tổng quan nhanh

API là viết tắt của Giao diện chương trình ứng dụng, có thể được định nghĩa là một tập hợp các phương thức giao tiếp giữa các thành phần phần mềm khác nhau. Nói cách khác, API cho phép phần mềm giao tiếp với phần mềm khác

Chúng tôi sẽ tập trung cụ thể vào API Web, cho phép máy chủ web tương tác với phần mềm của bên thứ ba. Trong trường hợp này, máy chủ web đang sử dụng các yêu cầu HTTP để giao tiếp với điểm cuối URL có sẵn công khai chứa dữ liệu JSON. Nếu điều này bây giờ là khó hiểu, nó sẽ có ý nghĩa ở cuối bài viết

Bạn có thể quen thuộc với khái niệm ứng dụng CRUD, viết tắt của Create, Read, Update, Delete. Bất kỳ ngôn ngữ lập trình nào cũng có thể được sử dụng để tạo ứng dụng CRUD bằng nhiều phương pháp khác nhau. API web sử dụng các yêu cầu HTTP tương ứng với các động từ CRUD

Hành độngPhương pháp HTTPMô tảTạo

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

9Tạo một tài nguyên mớiĐọc

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

8Truy xuất một tài nguyênCập nhật

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

2Cập nhật một tài nguyên hiện cóXóa

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

3Xóa một tài nguyên

Nếu bạn đã nghe nói về REST và RESTful API, thì đó chỉ đơn giản là đề cập đến một bộ tiêu chuẩn phù hợp với một kiểu kiến trúc cụ thể. Hầu hết các ứng dụng web đều làm hoặc nhằm mục đích tuân thủ các tiêu chuẩn REST. Nhìn chung, có rất nhiều thuật ngữ, từ viết tắt và khái niệm cần hiểu - HTTP, API, REST - vì vậy, việc cảm thấy bối rối và thất vọng là điều bình thường, đặc biệt là khi tài liệu API cho rằng bạn đã biết phải làm gì

Đang cài đặt

Mục tiêu của chúng ta là gì? . Đối với một số kiến thức cơ bản, Studio Ghibli là một xưởng phim hoạt hình Nhật Bản đã sản xuất một số bộ phim, chẳng hạn như Spirited Away, mà người bạn Craig của tôi đã truyền cảm hứng cho tôi để sử dụng làm ví dụ

Chúng ta sẽ bắt đầu bằng cách tạo một chỉ mục. tệp html trong một thư mục mới. Dự án sẽ chỉ bao gồm các chỉ mục. html, phong cách. css và tập lệnh. js ở cuối. Khung HTML này chỉ liên kết đến tệp CSS và JavaScript, tải bằng phông chữ và chứa div có id

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

4. Tệp này đã hoàn tất và sẽ không thay đổi. Chúng tôi sẽ sử dụng JavaScript để thêm mọi thứ từ đây

mục lục. html

DOCTYPE html>

  
    
    

    Ghibli App

Vì bài viết này tập trung vào các khái niệm về API và JavaScript nên tôi sẽ không giải thích cách thức hoạt động của CSS. Chúng tôi sẽ tạo ra một phong cách. css sẽ được sử dụng để tạo lưới. Để cho ngắn gọn, tôi chỉ bao gồm CSS cấu trúc thích hợp nhất bên dưới, nhưng bạn có thể sao chép mã CSS đầy đủ tại đây

Phong cách. css

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Bây giờ chúng tôi đã thiết lập HTML và CSS, vì vậy bạn có thể tạo tập lệnh. js và chúng tôi sẽ tiếp tục từ đó

Kết nối với API

Hãy xem qua tài liệu API của Studio Ghibli. API này được tạo để giúp các nhà phát triển tìm hiểu cách tương tác với các tài nguyên bằng cách sử dụng các yêu cầu HTTP, điều này hoàn hảo cho chúng tôi tại đây. Vì API có thể được truy cập bằng nhiều phương pháp khác nhau - JavaScript, PHP, Ruby, Python, v.v. - tài liệu cho hầu hết các API không có xu hướng đưa ra hướng dẫn cụ thể về cách kết nối

Chúng tôi có thể thấy từ tài liệu này rằng nó cho chúng tôi biết rằng chúng tôi có thể thực hiện các yêu cầu với

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

5 hoặc các lệnh gọi REST thông thường, nhưng chúng tôi có thể chưa biết cách thực hiện điều đó

Lấy điểm cuối API

Để bắt đầu, hãy cuộn đến phần phim. Ở bên phải, bạn sẽ thấy

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

6. Nó sẽ hiển thị cho chúng tôi URL của điểm cuối API của chúng tôi, https. //ghibliapi. herokuapp. com/phim. Nhấp vào liên kết đó sẽ hiển thị một mảng các đối tượng trong JSON

Nếu bạn không có tiện ích mở rộng trên trình duyệt của mình để xem các tệp JSON, hãy thêm một tiện ích ngay bây giờ, chẳng hạn như Chế độ xem JSON. Điều này sẽ làm cho việc đọc JSON trở nên dễ dàng hơn rất nhiều. Hãy nhớ rằng, nếu bạn chưa từng làm việc với JSON, hãy đọc bài viết về điều kiện tiên quyết này

Truy xuất dữ liệu bằng yêu cầu HTTP

Trước khi chúng tôi cố gắng đặt bất kỳ thứ gì lên mặt trước của trang web, hãy mở một kết nối API. Chúng tôi sẽ làm như vậy bằng cách sử dụng các đối tượng

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

7, đây là cách để mở tệp và thực hiện yêu cầu HTTP

Chúng ta sẽ tạo một biến

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

8 và gán một đối tượng

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

7 mới cho nó. Sau đó, chúng tôi sẽ mở một kết nối mới bằng phương pháp

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

40 - trong các đối số, chúng tôi sẽ chỉ định loại yêu cầu là

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

8 cũng như URL của điểm cuối API. Yêu cầu hoàn thành và chúng ta có thể truy cập dữ liệu bên trong hàm

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

42. Khi chúng tôi hoàn thành, chúng tôi sẽ gửi yêu cầu

kịch bản. js

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

Ngoài ra, bạn có thể sử dụng API

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

43 và

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

44/

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Làm việc với phản hồi JSON

Bây giờ chúng tôi đã nhận được phản hồi từ yêu cầu HTTP của mình và chúng tôi có thể làm việc với nó. Tuy nhiên, phản hồi ở dạng JSON và chúng tôi cần chuyển đổi JSON đó thành các đối tượng JavaScript để làm việc với nó

Chúng tôi sẽ sử dụng

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

46 để phân tích phản hồi và tạo một biến

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

47 chứa tất cả JSON dưới dạng một mảng các đối tượng JavaScript. Sử dụng

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

48, chúng tôi sẽ điều khiển đăng xuất tiêu đề của từng phim để đảm bảo phim hoạt động bình thường

kịch bản. js

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Sử dụng Kiểm tra trên chỉ mục. html và xem bảng điều khiển, bạn sẽ thấy tiêu đề của 20 bộ phim Ghibli. Thành công

Điều duy nhất chúng tôi đang thiếu ở đây là một số cách để xử lý lỗi. Điều gì xảy ra nếu URL sai được sử dụng hoặc URL bị hỏng và không có gì được hiển thị? .

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

49 là phản hồi nổi tiếng nhất, nghĩa là Không tìm thấy và

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

50 OK là yêu cầu thành công

Hãy bọc mã của chúng ta trong một câu lệnh

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

51, thành công với bất kỳ phản hồi nào trong phạm vi 200-300 và đăng xuất lỗi nếu yêu cầu không thành công. Bạn có thể xáo trộn URL để test lỗi

kịch bản. js

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Đây là toàn bộ mã cho đến nay

kịch bản. js

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

Chúng tôi đã sử dụng thành công yêu cầu HTTP

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

8 để truy xuất [hoặc sử dụng] điểm cuối API, bao gồm dữ liệu ở định dạng JSON. Tuy nhiên, chúng tôi vẫn bị mắc kẹt trong bảng điều khiển - chúng tôi muốn hiển thị dữ liệu này ở mặt trước của trang web, điều mà chúng tôi sẽ thực hiện bằng cách sửa đổi DOM

Hiển thị dữ liệu

Để hiển thị thông tin trên giao diện người dùng của một trang web, chúng ta sẽ làm việc với DOM, đây thực sự là một API cho phép JavaScript giao tiếp với HTML. Nếu bạn hoàn toàn không có kinh nghiệm với DOM, thì tôi đã viết bài Hiểu và sửa đổi DOM trong JavaScript cho DigitalOcean để làm rõ DOM là gì và DOM khác với mã nguồn HTML như thế nào

Cuối cùng, trang của chúng tôi sẽ bao gồm một hình ảnh biểu tượng, theo sau là một vùng chứa có nhiều thành phần thẻ - một thẻ cho mỗi bộ phim. Mỗi thẻ sẽ có một tiêu đề và một đoạn văn chứa tiêu đề và mô tả của mỗi bộ phim. Đây là giao diện của nó, chỉ với CSS cần thiết được tải vào

Nếu bạn còn nhớ, chỉ mục của chúng tôi. html chỉ có một div gốc -

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

53 ngay bây giờ. Chúng tôi sẽ truy cập nó với

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

54. Chúng tôi có thể xóa nhanh tất cả mã trước đó mà chúng tôi đã viết bây giờ, mã này chúng tôi sẽ thêm lại sau giây lát

kịch bản. js

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

Nếu bạn không chắc chắn 100% về những gì

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

54 làm, hãy lấy đoạn mã trên và

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

56. Điều đó sẽ giúp làm rõ những gì đang thực sự xảy ra ở đó

Điều đầu tiên trong trang web của chúng tôi là logo, là một yếu tố

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

57. Chúng tôi sẽ tạo thành phần hình ảnh với

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

Một

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

57 trống không tốt, vì vậy chúng tôi sẽ đặt thuộc tính

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

90 thành

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

91. [Tìm thấy ở đây]

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

Chúng ta sẽ tạo một phần tử khác, lần này là

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

92 và đặt thuộc tính

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

93 thành

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Bây giờ chúng ta có logo và vùng chứa, và chúng ta chỉ cần đặt chúng vào trang web. Chúng tôi sẽ sử dụng phương pháp

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

95 để nối hình ảnh logo và vùng chứa div vào thư mục gốc của ứng dụng

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Đây là mã đầy đủ cho điều đó

kịch bản. js

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Sau khi lưu, ở giao diện người dùng của trang web, bạn sẽ thấy như sau

yếu tố

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Điều này sẽ chỉ hiển thị trong tab Kiểm tra phần tử, không phải trong mã nguồn HTML, như đã giải thích trong bài viết DOM mà tôi đã liên kết

Bây giờ chúng tôi sẽ dán tất cả mã của chúng tôi từ trước đó trở lại. Bước cuối cùng sẽ là lấy những gì chúng tôi đã giải quyết trước đó và biến chúng thành các phần tử thẻ

Dán mọi thứ trở lại, nhưng chúng ta sẽ chỉ xem có gì bên trong

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Thay vì

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

97, chúng tôi sẽ sử dụng

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

98 để đặt văn bản của phần tử HTML thành dữ liệu từ API. Tôi đang sử dụng

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

99 trên phần tử

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

00 để giới hạn phần mô tả và giữ cho mỗi thẻ có độ dài bằng nhau

kịch bản. js

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Tôi cũng sẽ thay thế lỗi của bảng điều khiển bằng lỗi ở giao diện người dùng, sử dụng phần tử HTML tốt nhất,

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

01. [Tôi chỉ làm điều này như một trò đùa cho mục đích vui vẻ và minh họa, không thực sự sử dụng

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest[]

// Open a new connection, using the GET request on the URL endpoint
request.open['GET', '//ghibliapi.herokuapp.com/films', true]

request.onload = function [] {
  // Begin accessing JSON data here
}

// Send request
request.send[]

01 trong bất kỳ loại ứng dụng thực tế nào, hoặc nghiêm túc với tôi ở đây. ]

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Và chúng tôi đã hoàn thành. Đây là kịch bản cuối cùng. mã js

kịch bản. js

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and [min-width: 600px] {
  .card {
    flex: 1 1 calc[50% - 2rem];
  }
}

@media screen and [min-width: 900px] {
  .card {
    flex: 1 1 calc[33% - 2rem];
  }
}

Và với các kiểu CSS đầy đủ, đây là sản phẩm cuối cùng trông như thế nào

Một lần nữa, đây là liên kết đến ứng dụng trực tiếp và mã nguồn

Xem ứng dụng Demo
Mã nguồn trên GitHub

Sự kết luận

Xin chúc mừng, bạn đã sử dụng JavaScript đơn giản để kết nối với API bằng các yêu cầu HTTP. Hy vọng rằng bạn đã hiểu rõ hơn về điểm cuối API là gì, cách trình duyệt giao tiếp với dữ liệu API của bên thứ ba bằng các yêu cầu và phản hồi, cách phân tích cú pháp JSON thành các mảng và đối tượng mà JavaScript hiểu được cũng như cách xây dựng giao diện người dùng hoàn toàn bằng JavaScript

Chúng tôi đã làm tất cả điều này mà không phải lo lắng về bất cứ điều gì như Node. js, npm, Webpack, React, Angular, công cụ xây dựng, jQuery, Axios và các thuật ngữ, phần phụ thuộc và khung phát triển phổ biến khác có thể khiến bạn nhầm lẫn về những gì đang diễn ra dưới vỏ bọc ở dạng đơn giản nhất

API và ví dụ là gì?

API là cơ chế cho phép hai thành phần phần mềm giao tiếp với nhau bằng cách sử dụng một tập hợp các định nghĩa và giao thức . Ví dụ: hệ thống phần mềm của cục thời tiết chứa dữ liệu thời tiết hàng ngày. Ứng dụng thời tiết trên điện thoại của bạn “giao tiếp” với hệ thống này thông qua API và hiển thị cho bạn thông tin cập nhật về thời tiết hàng ngày trên điện thoại của bạn.

API được sử dụng để làm gì?

API là từ viết tắt của Giao diện lập trình ứng dụng mà phần mềm sử dụng để truy cập dữ liệu, phần mềm máy chủ hoặc các ứng dụng khác và đã xuất hiện từ khá lâu. API rất linh hoạt và có thể được sử dụng trên các hệ thống dựa trên web, hệ điều hành, hệ thống cơ sở dữ liệu và phần cứng máy tính

Loại API JavaScript là gì?

API là viết tắt của Giao diện lập trình ứng dụng và là một khái niệm không giới hạn hoặc dành riêng cho JavaScript, nhưng được sử dụng trong hầu hết các ứng dụng web . Là một nhà phát triển web, bạn phải biết về API, vì vậy hãy cố gắng hiểu khái niệm này trước.

API là gì và nó hoạt động như thế nào?

API là viết tắt của “Giao diện lập trình ứng dụng. ” API là phần mềm trung gian cho phép hai ứng dụng giao tiếp với nhau . Nói cách khác, API là trình nhắn tin gửi yêu cầu của bạn đến nhà cung cấp mà bạn đang yêu cầu và sau đó gửi phản hồi lại cho bạn.

điều kiện tiên quyết

Bàn thắng

Tổng quan nhanh

Đang cài đặt

Kết nối với API

Lấy điểm cuối API

Truy xuất dữ liệu bằng yêu cầu HTTP

Làm việc với phản hồi JSON

Hiển thị dữ liệu

Sự kết luận

API và ví dụ là gì?

API được sử dụng để làm gì?

Loại API JavaScript là gì?

API là gì và nó hoạt động như thế nào?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề