Sân chơi JavaScript ios

Được làm bằng ♥ ở Redmond, Boston, SF & Dublin

© 2012-2022 Microsoft
Quyền riêng tư

Sử dụng TypeScript

• Bắt đầu
• Tải xuống
• Cộng đồng
• Sân chơi
• Tham chiếu TSConfig
• Tại sao TypeScript
• Thiết kế
• mẫu mã

  JavaScript TypeScript

  Xem cách TypeScript cải thiện hàng ngày khi làm việc với JavaScript với cú pháp bổ sung tối thiểu

  Cơ bản về JavaScript

  1. Chào thế giới
  2. Đối tượng và Mảng
  3. Chức năng
  4. Luồng mã

  Các chức năng với JavaScript

  1. Chức năng chung
  2. Chức năng gõ
  3. Chuỗi chức năng

  Làm việc với các lớp học

  1. lớp 101
  2. Đây
  3. Lớp học chung
  4. hỗn hợp

  JavaScript hiện đại

  1. Đang chờ không đồng bộ
  2. tính bất biến
  3. Nhập khẩu xuất khẩu
  4. Hỗ trợ JSDoc

  API bên ngoài

  1. TypeScript với Web
  2. TypeScript với React
  3. TypeScript với Deno
  4. TypeScript với nút
  5. TypeScript với WebGL

  Trợ giúp với JavaScript

  1. Sửa chữa nhanh chóng
  2. lỗi

  Khám phá cách TypeScript mở rộng JavaScript để thêm công cụ và an toàn hơn

  nguyên thủy

  1. Không tí nào
  2. chữ
  3. Các loại liên minh và giao lộ
  4. Không biết và Không bao giờ

  Loại nguyên thủy

  1. bộ dữ liệu
  2. Các loại tiện ích tích hợp
  3. Loại Nullable

  Loại meta

  1. Loại điều kiện
  2. phân biệt các loại
  3. Các loại được lập chỉ mục
  4. Các loại ánh xạ

  Ngôn ngữ

  1. âm thanh
  2. gõ cấu trúc
  3. Loại bảo vệ
  4. Loại mở rộng và thu hẹp

  Phần mở rộng ngôn ngữ

  1. liệt kê
  2. Đánh máy danh nghĩa
  3. Các loại vs Giao diện

Cộng đồng

• Được trợ giúp
• Blog
• Kho lưu trữ GitHub
• Trò chuyện cộng đồng
• @TypeScript
• tràn ngăn xếp
• Kho lưu trữ web

Đôi khi bạn chỉ cần chơi với đồ vật để hiểu nó. ở đây chúng tôi có JavaScript và Swift chơi cùng nhau

Ở đây chúng tôi có một thử nghiệm đơn giản liên quan đến việc sử dụng JS để quản lý một mô hình để có thể chia sẻ mô hình đó với Android

Có một Trình quản lý JS đơn lẻ tạo ngữ cảnh JS và cung cấp giao diện ngữ nghĩa để quản lý mô hình dữ liệu đơn giản

Mô hình dữ liệu được hiển thị dưới dạng các lớp Swift, do đó, nó dễ dàng được sử dụng trong ViewController, v.v., tuy nhiên, bộ lưu trữ trong bộ nhớ và trên đĩa đều nằm trong Javascript

Đây chỉ là Bằng chứng về Khái niệm để giúp bạn cảm nhận được liệu có đáng để nỗ lực xây dựng lớp mô hình trong JS hay không

Hầu hết việc sử dụng hiện tại là trong Bài kiểm tra đơn vị - sẽ sớm tiết lộ nhiều hơn trong ứng dụng thử nghiệm, trừ khi chúng tôi quyết định từ bỏ phương pháp này ;-)

https. //github. com/mattinasi/JsPlayground/blob/master/JsPlaygroundTests/JsPlaygroundTests. nhanh

Xem dự án liên quan thực hiện điều tương tự trong Android, sử dụng cùng một tập lệnh mô hình JS. https. //github. com/mattinasi/JSPlaygroundAndroid

Dự án này cung cấp một cách nhanh chóng, trực quan để thử nghiệm mã JavaScript. Nó được thiết kế để tải dưới dạng

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84 để dễ dàng đưa vào bất kỳ trang web nào

Có nhiều tùy chọn cấu hình, bao gồm cài đặt sẵn React và cài đặt sẵn React Native

Tôi sử dụng hộp cát này trong hướng dẫn giáo dục miễn phí của mình

• JavaScript nhanh
• TypeScript Express
• phản ứng nhanh
• Phản ứng bản địa Express

Cách sử dụng

Hộp cát có thể được đưa vào trang web của bạn theo một trong hai cách

• như một thành phần React
• trực tiếp như một

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  84

Đối với các tài liệu dành riêng cho React Native cũ, hãy xem nhánh v1

Là một thành phần phản ứng

Nếu bạn đang sử dụng Phản ứng

npm install --save javascript-playgrounds

# or

yarn add javascript-playgrounds

sau đó

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

Thành phần này là một trình bao bọc xung quanh

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84 xử lý các tham số mã hóa cho bạn. Trong khi nó chuyển hầu hết các đạo cụ cho

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84, nó có thêm một vài đạo cụ

TitleDescriptionDefault

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

2Kiểu của

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

3 bao bọc

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84 (iframe có chiều rộng và chiều cao

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

5).

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

6

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

7Tên lớp của

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

3 bao bọc

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

6

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

1Tùy chọn, chỉ định một url tùy chỉnh để tải trình phát từ đó. Url này không được bao gồm hàm băm.

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

2 (xem giải nén)

Là một import Playground from 'javascript-playgrounds' export default function App() { return }84

Nếu bạn không sử dụng React, hãy đưa sandbox vào một

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

Các tham số cấu hình phải được chuyển thành một phần của chuỗi băm, sau

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

5. Chúng phải được mã hóa JSON và sau đó được mã hóa URI

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

3

Khi được sử dụng làm

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84, cách dễ nhất để đặt tham số

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

7 là chỉnh sửa mã trong hộp cát và sao chép và dán url khi bạn hoàn tất (url tự động cập nhật khi bạn nhập)

Để thuận tiện, bạn có thể tùy ý chuyển trực tiếp tham số

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

8 trong chuỗi url, e. g.

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

9

Thông số

Hộp cát chấp nhận các đạo cụ/tham số sau

TitleDescriptionDefault

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

8Điều này đặt giá trị mặc định hợp lý cho các thông số khác. Các tùy chọn là

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

31,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

32 và

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

33. Các tùy chọn thử nghiệm là

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

34 và

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

35 (đảm bảo khóa phiên bản thư viện javascript-playgrounds của bạn khi sử dụng các giá trị đặt trước thử nghiệm).

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

36

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

37Một tiêu đề tùy chọn cho khung soạn thảo.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

38

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

7Mã để hiển thị/chạy trong trình phát. Ứng dụng mẫu

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

0Bản đồ của

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

1. Điều này sẽ được ưu tiên hơn

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

7 nếu được cung cấp.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

6

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

4Tên tệp của tệp chạy đầu tiên. Điều này chỉ phù hợp khi hiển thị nhiều tệp có tham số

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

0. Mặc định là

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

6 hoặc

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

7 nếu bật TypeScript.

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

8 hoặc

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

9____370Tên tệp của tab sẽ hiển thị theo mặc định. Điều này chỉ phù hợp khi hiển thị nhiều tệp có tham số

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

0. Mặc định là giá trị của

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

4.

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

4

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

74Một loạt các mô-đun bên ngoài để cung cấp cho sandbox. Mỗi đối tượng trong mảng phải là một đối tượng chứa

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

75 và

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

76. Để viết tắt, hãy chuyển tên chuỗi để tải mô-đun từ unpkg (

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

77). Thêm chi tiết dưới đây.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

78

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

79Một chuỗi CSS tùy chọn để áp dụng trong không gian làm việc

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

38

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

82Bản đồ các đối tượng kiểu nội tuyến, được áp dụng cho các phần tử khác nhau để tùy chỉnh kiểu giao diện người dùng. Thí dụ.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

83

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

85Bản đồ các chuỗi xuất hiện trong giao diện người dùng. Thí dụ.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

86

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

88Điều này ảnh hưởng đến cách các iframe chia sẻ dữ liệu với nhau, chủ yếu cho tính năng "sân chơi". Khi

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

89, iframe sẽ chuyển qua lại các đối tượng JavaScript, trong khi khi

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60, chúng sẽ chuyển JSON được tuần tự hóa.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

62Người chơi có nên quét các tệp mã cho

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

63 và thử tìm nạp chúng từ

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

64 không? .

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

89

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

66Hiển thị nút để cho phép chỉnh sửa toàn màn hình (trong hầu hết các cấu hình của bảng). Lưu ý rằng iframe phải có thuộc tính

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

67 để tính năng này hoạt động.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

69Cài đặt cho Babel

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

841Ném lỗi nếu một vòng lặp lặp đi lặp lại nhiều hơn một số lần nhất định. Đặt thành 0 để tắt.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

842

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

843Cài đặt cho sân chơi (tiện ích con nội tuyến hiển thị giá trị thời gian chạy)

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

845Bật sân chơi?

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

847Kết xuất các phần tử React? . g.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

849, thay vì kết xuất nó.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

89

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

841Tần suất cập nhật widget. Một chút độ trễ giúp giữ cho giao diện người dùng mượt mà hơn.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

842 (mili giây)

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

843Cài đặt TypeScript

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

845Bật thông tin chú giải công cụ di chuột TypeScript? . g.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

849 và

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

00. Theo mặc định, chúng tôi không bao gồm một số cái mới hơn/bí truyền để giảm kích thước tải xuống. Xem mã nguồn

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

01Một loạt các loại tệp bổ sung để tải xuống. Mỗi cái phải là một đối tượng

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

02.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

78

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

04Thêm một chuỗi tập hợp tệp giống như hướng dẫn, làm nổi bật các thay đổi giữa mỗi tập hợp. Mỗi đối tượng trong mảng này có thể chứa.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

05. Các thuộc tính trong đối tượng

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

06 sẽ ghi đè lên các thuộc tính được cung cấp dưới dạng tham số cấp cao nhất.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

78

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

08Một mảng giao diện người dùng để hiển thị. Để hiển thị một ngăn không có tùy chọn, hãy sử dụng một chuỗi. Nếu không, hãy sử dụng một đối tượng có thuộc tính

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

09. Các tấm có sẵn là.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

10,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

11,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

12,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

13,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

14,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

15. Lưu ý rằng phải có ngăn

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

16 để bất kỳ mã nào chạy. Đối với các tùy chọn khung, xem bên dưới.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

17

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

18Một mảng gồm

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

19 đối tượng để hiển thị tại các điểm dừng đáp ứng khác nhau. Khung nội tuyến sẽ sử dụng bộ đầu tiên trong đó

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

20 lớn hơn chiều rộng cửa sổ hiện tại. Tham số

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

08 cấp cao nhất có

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

22 để nó được sử dụng theo mặc định nếu không có bộ khung phù hợp.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

78

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

24Nếu được thông qua, sandbox sẽ gọi

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

25 khi thay đổi mã.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

6

Ví dụ về tải mô-đun

• Để tải mô-đun kiểu CommonJS

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  27,

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  75 là tên

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  29 và thứ hai là url nguồn. e. g. để tải thời điểm. js. đặt

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  74 thành giá trị

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  31
• Để tải một thành phần dưới dạng thuộc tính trên

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  32, cũng chuyển một

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  33, đây sẽ là tên thuộc tính cửa sổ (e. g.

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  34). e. g. để tải thời điểm. js theo cách này. đặt

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  74 thành giá trị

  import Playground from 'javascript-playgrounds'
  
  export default function App() {
    return <Playground style={{ width: 800, height: 500 }} />
  }

  36

tùy chọn ngăn

Tất cả các bảng đều hỗ trợ các tùy chọn sau

TitleDescriptionDefault

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

2Các kiểu nội tuyến cho ngăn cụ thể này, được hợp nhất với các kiểu được truyền trong đối tượng

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

82 cấp cao nhất nếu được cung cấp.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

6

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

37Một tiêu đề tùy chọn cho ngăn này. Nếu được sử dụng trên ngăn

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

11, điều này sẽ ghi đè lên một

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

37 cấp cao nhất, nếu một cái đã được cung cấp.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

38

Mỗi ngăn hỗ trợ thêm các tùy chọn dành riêng cho từng ngăn. để biết thêm chi tiết

• người chơi
• bảng điều khiển
• cây rơm
• biên tập viên
• bộ chuyển mã
• không gian làm việc

Khung

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

16

Hiển thị ứng dụng đang chạy, tùy chọn với hình ảnh của một chiếc điện thoại xung quanh nó

Tiêu đề Mô tảMặc định

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

45Một trong số

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

46,

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

47 hoặc

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

48. Khi

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

48, không có hình ảnh điện thoại nào được hiển thị.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

50

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

51Chiều rộng của thiết bị. Điều này không có hiệu lực nếu nền tảng là

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

48.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

53

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

54Thu phóng màn hình thiết bị. Điều này không có hiệu lực nếu nền tảng là

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

48.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

56____157Chỉ định url gốc cho nội dung

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

27s. e. g. để yêu cầu

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

59, bạn có thể đặt

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

57 thành

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

61 và viết

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

62 vào mã của mình.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

38

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

79Một chuỗi CSS tùy chọn để áp dụng trong

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84 của trình phát.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

38

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

67Một trong số

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

68 hoặc

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

69. Khi

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

68, thiết lập lại meyerweb CSS được áp dụng cho

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84 của trình phát.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

72

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

73Hiển thị hình chữ nhật ở đầu màn hình điện thoại, bắt chước thanh trạng thái.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

74

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

75Màu của thanh trạng thái giả.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

76

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

77Mã JavaScript chạy trước tệp mục nhập.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

38

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

74Các mô-đun dành riêng cho ngăn, ngoài những mô-đun được thông qua ở cấp cao nhất.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

78

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

81Hiển thị bảng điều khiển nhúng trong ngăn này. Xem các tùy chọn

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

81 bên dưới. Ngoài ra, phiên bản nhúng của bảng điều khiển có các thuộc tính sau.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

84Hiển thị bảng điều khiển?

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

86Hiển thị bảng điều khiển trên toàn bộ trình phát?

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

88Cho phép thu gọn bảng điều khiển thông qua một nút chuyển đổi.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

89

Khung

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

81

Hiển thị đầu ra

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

91, tương tự như trình kiểm tra Chrome. Đây có thể là một ngăn riêng biệt hoặc được nhúng trong ngăn trình phát

TitleDescriptionDefault

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

92Hiển thị tên tệp có chứa

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

91.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

95Hiển thị số dòng của

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

91.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

89

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

98Kết xuất các phần tử React, thay vì hiển thị phần tử JSON.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

60

Khung

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

00

Một ngăn xếp lồng vào nhau

TitleDescriptionDefault

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

01Một mảng các ngăn, giống như tham số

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

08 cấp cao nhất.

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

78

Khung

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

04

Không có tại thời điểm này

Khung

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

05

Không có tại thời điểm này

Khung

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

04

Không có tại thời điểm này

lưu trữ

Dự án này chứa các nội dung tĩnh chạy độc lập trong trình duyệt. Bạn không cần máy chủ, trừ khi bạn muốn tự lưu trữ nội dung

giải nén

Máy chủ được đề xuất là https. // giải nén. com, là CDN phục vụ nội dung từ sổ đăng ký npm. Các ví dụ trong README này đều trỏ đến

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
>iframe>

Lưu ý rằng

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

64 giải quyết các phiên bản semver trong url

ví dụ

Những ví dụ này đã được tạo bằng cách tải trang demo và chạy khoảng JS sau trong bảng điều khiển

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

7

• Phản ứng
• Phản ứng tự nhiên
• mã tùy chỉnh
• Tải thư viện bên ngoài qua URL

Sự phát triển

Chạy

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

8

Xây dựng

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

6

Đóng góp

Đóng góp được hoan nghênh, nhưng nếu bạn định thêm các tính năng, tôi khuyên bạn nên mở một vấn đề mô tả thay đổi trước

Tôi duy trì dự án này đặc biệt cho hướng dẫn giáo dục của mình, vì vậy nếu đó là một tính năng tôi không sử dụng, tôi có thể không muốn duy trì nó. Tôi cũng có thể mất một chút thời gian để xem xét

Tôi có thể sử dụng JavaScript để phát triển iOS không?

Tôi có thể chạy nút js trên iPhone không?

Sân chơi Swift có hoạt động trên iPad không?

Tôi có thể chạy nút js trên iPad không?