search

Hướng dẫn can you use python in a web browser? - bạn có thể sử dụng python trong trình duyệt web không?

Ngày đăng: 03/11/2022
Trả lời: 0
Lượt xem: 178

Pyscript là một khuôn khổ hoàn toàn mới gây ra nhiều sự phấn khích khi Peter Wang, CEO và đồng sáng lập của Anaconda, Inc. Giai đoạn phát triển, mọi người trên phương tiện truyền thông xã hội dường như đã yêu nó. Hướng dẫn này sẽ giúp bạn tăng tốc với Pyscript, trong khi tài liệu chính thức vẫn đang được thực hiện.

Show

Trong hướng dẫn này, bạn sẽ học cách:

  • Xây dựng các ứng dụng phía trước tương tác bằng Python và JavaScriptinteractive front-end apps using Python and JavaScript
  • Chạy mã Python hiện có trong trình duyệt webweb browser
  • Tái sử dụng cùng một mã ở phía sau và phần cuốiback-end and the front-end
  • Gọi các chức năng Python từ JavaScript và cách khácJavaScript and the other way around
  • Phân phối các chương trình Python với các phụ thuộc bằng khôngzero dependencies

Để tận dụng tối đa hướng dẫn này, lý tưởng nhất là bạn nên có một số kinh nghiệm với chương trình JavaScript và Front-end nói chung. Đồng thời, bạn sẽ có thể theo dõi tốt ngay cả khi bạn chưa bao giờ thực hiện bất kỳ phát triển web nào trước đây. Rốt cuộc, đó là toàn bộ ý tưởng đằng sau Pyscript!

Tuyên bố miễn trừ trách nhiệm: Pyscript là một dự án thử nghiệm!

Hướng dẫn này sẽ đến với bạn chỉ một vài tuần sau khi thông báo chính thức về Pyscript. Tại thời điểm viết bài, bạn có thể tìm thấy cảnh báo sau đây được hiển thị nổi bật trên trang chủ của khung:

Xin lưu ý rằng Pyscript là rất alpha và đang phát triển nặng nề. Có nhiều vấn đề đã biết, từ khả năng sử dụng đến thời gian tải, và bạn nên mong đợi mọi thứ sẽ thay đổi thường xuyên. Chúng tôi khuyến khích mọi người chơi và khám phá với Pyscript, nhưng tại thời điểm này, chúng tôi không khuyên bạn nên sử dụng nó để sản xuất. (Nguồn)

Điều này có thể được nhấn mạnh đủ. Trước khi bạn bắt đầu, hãy chuẩn bị cho những thứ không hoạt động như được trình bày trong hướng dẫn này. Một số điều có thể không hoạt động vào thời điểm bạn đọc này, trong khi một số vấn đề có thể đã được giải quyết bằng cách này hay cách khác.

Điều đó không có gì đáng ngạc nhiên, với lịch sử tương đối ngắn của Pyscript. Bởi vì nó phần mềm nguồn mở, bạn có thể xem qua lịch sử Git cam kết của nó trên GitHub. Khi bạn làm, bạn sẽ thấy rằng Fabio Pliger từ Anaconda, người mà người tạo ra và lãnh đạo kỹ thuật của Pyscript, đã thực hiện cam kết ban đầu vào ngày 21 tháng 2 năm 2022. Rằng chỉ hơn hai tháng trước khi nó được công bố công khai với thế giới vào ngày 30 tháng 4!

Đó là nơi mà mọi thứ đứng với pyscript. Nếu bạn đã sẵn sàng chấp nhận rủi ro và muốn thử khung này, thì hãy tiếp tục đọc.

Bắt đầu với pyscript

Đến cuối phần này, bạn sẽ có một cái nhìn mắt chim về khung và các khối xây dựng của nó, bao gồm cả cách chúng làm việc cùng nhau để đưa Python vào trình duyệt của bạn. Bạn sẽ biết cách chọn anh đào các tệp cần thiết và lưu trữ pyscript cục bộ mà không phụ thuộc vào kết nối internet.

Bọc đầu của bạn xung quanh Pyscript

Bạn có thể tự hỏi chính xác pyscript là gì. Tên có lẽ là một nỗ lực thông minh trong việc tiếp thị nó như một sự thay thế cho JavaScript trong trình duyệt, nhưng một cách giải thích như vậy sẽ không cung cấp cho bạn bức tranh hoàn chỉnh. Tại đây, cách thức Pyscript hiện đang được quảng cáo trên hồ sơ Twitter của mình:replacement for JavaScript in the browser, but such an interpretation wouldn’t give you the complete picture. Here’s how PyScript is currently being advertised on its Twitter profile:

Pyscript - Lập trình cho 99% (nguồn)

Một trong những mục tiêu của Pyscript là biến web thành một nơi thân thiện cho bất cứ ai muốn học viết mã, bao gồm cả trẻ em. Khung đạt được mục tiêu đó bằng cách không yêu cầu bất kỳ quá trình cài đặt hoặc cấu hình nào ngoài trình soạn thảo văn bản hiện tại của bạn và trình duyệt. Một tác dụng phụ là Pyscript đơn giản hóa việc chia sẻ công việc của bạn với người khác.

Khi bạn nhìn vào tệp Pyscript từ Readme, bạn sẽ tìm thấy bản tóm tắt sau và mô tả dài hơn:

Pyscript là một giải pháp thay thế pythonic cho Scratch, JSFiddle và các khung lập trình dễ sử dụng khác, với mục tiêu biến web trở thành một nơi thân thiện, có thể bị hack, nơi mọi người có thể tác giả các ứng dụng thú vị và tương tác.

(…)

Pyscript là một dự án meta nhằm kết hợp nhiều công nghệ mở vào một khung cho phép người dùng tạo các ứng dụng trình duyệt tinh vi với Python. Nó tích hợp liền mạch với cách DOM hoạt động trong trình duyệt và cho phép người dùng thêm logic Python theo cách cảm thấy tự nhiên cả cho các nhà phát triển web và Python (nguồn)

Scratch là một ngôn ngữ lập trình trực quan tương đối đơn giản mà trẻ em học ở trường để xây dựng các trò chơi đơn giản và hoạt hình hài hước. JSFiddle là trình soạn thảo trực tuyến JavaScript, thường được sử dụng để chứng minh một giải pháp vấn đề nhất định trên các diễn đàn như StackoverFlow.

Hơn nữa, trang chủ Pyscript, chứa khẩu hiệu này:

Pyscript là một khung cho phép người dùng tạo các ứng dụng python phong phú trong trình duyệt bằng giao diện HTML, và sức mạnh của các công nghệ web pyodide, WASM và hiện đại. Khung Pyscript cung cấp cho người dùng ở mọi cấp độ trải nghiệm với quyền truy cập vào ngôn ngữ lập trình biểu cảm, dễ học với vô số ứng dụng. (Nguồn)

Nói cách khác, Pyscript cho phép bạn sử dụng Python, có hoặc không có JavaScript, để xây dựng các trang web tương tác mà không nhất thiết phải giao tiếp với máy chủ. Lợi ích chính ở đây là bạn có thể tận dụng kiến ​​thức hiện tại của mình về Python để bước vào thế giới phát triển phía trước, hạ thấp rào cản nhập cảnh và làm cho nó dễ tiếp cận hơn. Nhưng có nhiều lợi ích khác của việc sử dụng Pyscript mà bạn sẽ tìm hiểu về sau.

Ở cấp độ kỹ thuật hơn một chút, Pyscript là một ứng dụng một trang (SPA) được viết bằng TypeScript bằng cách sử dụng Khung Svelte, được tạo kiểu với CSS đuôi và đi kèm với Rollup.js. Theo một trong những bình luận trong một cam kết Git sớm, dự án được dựa trên một mẫu được đề cập trong một bài đăng trên blog của Sascha Aeppli, kết hợp các công cụ đó.

Pyscript sẽ không thể có được mà không cần xây dựng trên một phiên bản gần đây của Pyodide, một trình thông dịch Cpython được biên dịch với EMScripten với WebAssugging, cho phép Python chạy trong trình duyệt. Pyscript cung cấp một lớp trừu tượng mỏng trên pyodide bằng cách gói gọn mã nồi hơi cần thiết, mà bạn có thể phải tự gõ JavaScript.

Nếu bạn không quen thuộc với Pyodide và Webassugging, thì hãy nhấp để mở rộng phần có thể thu gọn bên dưới:

Đã có nhiều nỗ lực chạy mã Python trong trình duyệt, với các mức độ thành công khác nhau. Thách thức chính là, cho đến gần đây, JavaScript là ngôn ngữ lập trình duy nhất mà trình duyệt web có thể hiểu.

Có một vài vòng bổ sung để nhảy qua để chạy mã Python trong trình duyệt. Ví dụ, Transcrypt chuyển một đoạn mã Python sang đoạn mã tương tự của mã JavaScript, trong khi Brython là một trình thông dịch Python được sắp xếp hợp lý được thực hiện trong JavaScript. Những công cụ này và các công cụ tương tự ít hơn lý tưởng bởi vì chúng dựa vào một thứ gì đó mà giả vờ là một thời gian chạy trăn chính hãng.

Pyodide là khác nhau vì nó tận dụng Webassugging, một tiêu chuẩn khá mới được hỗ trợ bởi các trình duyệt web hiện đại và có nghĩa là cho phép tốc độ thực hiện mã gần như bản địa. Bạn có thể nghĩ về WebAssugging như ngôn ngữ lập trình thứ hai của người Viking mà trình duyệt hiện đang hiểu.

WebAssugging là một máy ảo đầy đủ có khả năng chạy mã byte di động mà bạn có thể nhắm mục tiêu bằng cách biên dịch mã nguồn của hầu hết mọi ngôn ngữ lập trình. Tuy nhiên, khi bạn nhìn vào danh sách các ngôn ngữ tương thích với WebAssugging, thì bạn đã giành chiến thắng tìm thấy Python ở đó. Bạn có thể đoán tại sao?

Python là một ngôn ngữ được giải thích, không có trình biên dịch tiêu chuẩn có thể nhắm mục tiêu vào webassugging. Thay vào đó, những gì pyodide đã làm là biên dịch toàn bộ trình thông dịch Cpython thành WebAssugging, để nó ngồi trong trình duyệt và giải thích mã Python giống như đó là trình thông dịch Python thông thường của bạn.

Khi bạn quên đi những hạn chế nhất định của hộp cát của trình duyệt và các chính sách bảo mật của nó, sẽ không có sự khác biệt về chức năng giữa việc chạy mã thông qua CPython hoặc Pyodide và chỉ có sự khác biệt khiêm tốn về hiệu suất. Pyodide và WebAssugging làm cho trình duyệt web trở thành một nơi tuyệt vời để phân phối các chương trình Python của bạn.

Để làm cho sự tích hợp giữa Python và trình duyệt web trở nên đơn giản hơn, Pyscript xác định một số thành phần web và các yếu tố tùy chỉnh, chẳng hạn như 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 và 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
0, mà bạn có thể nhúng trực tiếp vào HTML của mình. Nếu bạn bị làm phiền bởi dấu gạch nối trong các tên thẻ tùy chỉnh này, thì hãy đổ lỗi cho Pyscript. Thông số kỹ thuật HTML thực thi nó để tránh xung đột tên giữa các thành phần web và các yếu tố HTML trong tương lai.

Không có gì khó chịu, đó là thời gian để viết 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
1 đầu tiên của bạn trong Pyscript!

Viết lời chào đầu tiên của bạn, thế giới! trong pyscript

Cách nhanh nhất để bắt đầu với Pyscript là bằng cách tạo một tài liệu HTML5 tối thiểu, lưu nó trong một tệp cục bộ như 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
2 và tận dụng hai tệp được yêu cầu được lưu trữ trên trang chủ Pyscript.


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  <script defer src="https://pyscript.net/alpha/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>

Tệp đầu tiên, 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
3, cung cấp kiểu dáng mặc định cho các thành phần trực quan Pyscript, mà bạn sẽ khám phá sau, cũng như màn hình Splash Trình tải. Tệp thứ hai, 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
4, chứa JavaScript khởi động thời gian chạy Python và thêm các yếu tố tùy chỉnh như 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9, có thể giữ các hướng dẫn Python như gọi đến hàm 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
6.

Với thiết lập này, bạn không cần phải khởi động một máy chủ web để truy cập nội dung HTML của mình. Xem cho chính mình! Hãy tiếp tục, lưu tài liệu HTML đó vào tệp cục bộ và mở trực tiếp vào trình duyệt web yêu thích của bạn:web server to access your HTML content. See for yourself! Go ahead, save that HTML document to a local file, and open it directly in your favorite web browser:

Hướng dẫn can you use python in a web browser? - bạn có thể sử dụng python trong trình duyệt web không?
Pyscript's Hello, World!

Xin chúc mừng! Bạn chỉ cần thực hiện ứng dụng Pyscript đầu tiên của mình, sẽ hoạt động trên bất kỳ trình duyệt web hiện đại nào, ngay cả trên Chromebook sớm, mà không cần cài đặt trình thông dịch Python. Bạn thực sự có thể sao chép tệp HTML của mình vào ổ USB ngón tay cái và giao nó cho bạn bè và họ sẽ có thể chạy mã của bạn ngay cả khi họ không cài đặt Python trên máy của họ.

Tiếp theo, bạn sẽ tìm hiểu những gì vừa xảy ra khi bạn mở tệp đó trong trình duyệt web.

Lấy thời gian chạy Python từ Internet

Khi bạn mở tệp HTML của mình trong trình duyệt web, nó sẽ mất vài giây để tải trước khi hiển thị Hello, World! trong cửa sổ. Pyscript phải lấy một tá tài nguyên bổ sung từ JSDELIVR CDN, mạng phân phối nội dung miễn phí của Javascript, cho các dự án nguồn mở. Những tài nguyên đó bao gồm thời gian chạy pyodide, nặng hơn hai mươi megabyte khi không nén.

May mắn thay, trình duyệt của bạn sẽ lưu trữ hầu hết các tài nguyên đó trong bộ nhớ hoặc trên đĩa để trong tương lai, thời gian tải sẽ nhanh hơn đáng kể. Bạn cũng có thể làm việc ngoại tuyến mà không phụ thuộc vào kết nối Internet của bạn miễn là bạn đã mở tệp HTML của mình ít nhất một lần.work offline without depending on your Internet connection as long as you’ve opened your HTML file at least once.

Dựa vào CDN để cung cấp các phụ thuộc của bạn chắc chắn là thuận tiện, nhưng đôi khi nó có thể dễ vỡ. Đã có những trường hợp được biết đến của CDN đi xuống trong quá khứ, gây ra sự cố mất điện của các doanh nghiệp trực tuyến lớn. Bởi vì Pyscript nằm trên cạnh chảy máu, CDN luôn phục vụ bản dựng Alpha mới nhất, đôi khi có thể mang lại sự thay đổi phá vỡ. Ngược lại, CDN đôi khi có thể cần thời gian để theo kịp GitHub, vì vậy nó có thể phục vụ mã lỗi thời.

Sẽ tốt hơn nếu luôn luôn yêu cầu một phiên bản cụ thể của pyscript?

Tải xuống Pyscript để phát triển ngoại tuyến

Nếu bạn không muốn dựa vào dịch vụ lưu trữ Pyscript, thì bạn sẽ cần tải xuống tất cả các tệp cần thiết để chạy Python trong trình duyệt và tự lưu trữ chúng. Đối với mục đích phát triển, bạn có thể khởi động một máy chủ HTTP cục bộ được xây dựng ngay thành Python bằng cách phát hành lệnh sau trong thư mục với các tệp của bạn để lưu trữ:

  • các cửa sổ
  • Linux + MacOS

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...


$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Theo mặc định, nó sẽ bắt đầu một máy chủ nghe các yêu cầu HTTP trên tất cả các giao diện mạng, bao gồm Localhost và số cổng 8000. Bạn có thể điều chỉnh cả địa chỉ và số cổng với các đối số tùy chọn nếu cần. Điều này sẽ cho phép bạn truy cập ứng dụng Pyscript của mình tại 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
7, ví dụ.

Tuy nhiên, trước khi bạn có thể làm điều đó, bạn sẽ cần tải xuống 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
3, 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
4 và 
$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
0 vào một thư mục nơi đặt tài liệu HTML của bạn. Để làm như vậy, bạn có thể sử dụng công cụ dòng lệnh WGET, có tương đương trong PowerShell trên Windows hoặc tải xuống các tệp theo cách thủ công:

  • các cửa sổ
  • Linux + MacOS

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }


$ wget https://pyscript.net/alpha/pyscript.{css,js,py}

Theo mặc định, nó sẽ bắt đầu một máy chủ nghe các yêu cầu HTTP trên tất cả các giao diện mạng, bao gồm Localhost và số cổng 8000. Bạn có thể điều chỉnh cả địa chỉ và số cổng với các đối số tùy chọn nếu cần. Điều này sẽ cho phép bạn truy cập ứng dụng Pyscript của mình tại 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
7, ví dụ.

Tuy nhiên, trước khi bạn có thể làm điều đó, bạn sẽ cần tải xuống 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
3, 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
4 và 
$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
0 vào một thư mục nơi đặt tài liệu HTML của bạn. Để làm như vậy, bạn có thể sử dụng công cụ dòng lệnh WGET, có tương đương trong PowerShell trên Windows hoặc tải xuống các tệp theo cách thủ công:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>

Điều này sẽ tải xuống tất cả ba tập tin trong một lần. Mô -đun Python trợ giúp chứa mã keo cần thiết cho pyscript và pyodide. Bạn cần tải xuống 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
0 vì tập lệnh Bootstrap sẽ cố gắng tìm nạp nó từ địa chỉ tên miền của chính nó, đây sẽ là địa chỉ LocalHost của bạn.

Don Tiết quên cập nhật các đường dẫn CSS và JavaScript trong HTML của bạn để chúng trỏ đến các tệp cục bộ thay vì các đường dẫn được lưu trữ trực tuyến:

Ở đây, bạn giả sử vị trí của các tệp tài nguyên đó bên cạnh tệp HTML của bạn, nhưng bạn cũng có thể tạo một hoặc nhiều thư mục con cho các tài sản đó để giữ mọi thứ được tổ chức.

Bạn đã gần tới. Nhưng, nếu bạn điều hướng trình duyệt của mình đến máy chủ cục bộ của mình ngay bây giờ, thì nó vẫn sẽ cố gắng tìm nạp một số tài nguyên từ CDN chứ không phải máy chủ HTTP cục bộ của bạn. Bạn sẽ sửa nó trong phần tiếp theo.


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>

Tải xuống một bản phát hành pyodide cụ thể

Bây giờ bạn đã làm Pyscript hoạt động ngoại tuyến, đã đến lúc phải làm theo các bước tương tự cho pyodide. Trong những ngày đầu tiên của pyscript, URL có pyodide đã được mã hóa cứng, nhưng các nhà phát triển gần đây đã giới thiệu một yếu tố tùy chỉnh khác gọi là 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
2, cho phép bạn chỉ định một URL với phiên bản pyodide mong muốn:

Nội dung bên trong thẻ tùy chọn này là một phần của cấu hình YAML. Bạn có thể sử dụng thuộc tính 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
3 để cung cấp URL với phiên bản pyodide cụ thể được lưu trữ trực tuyến hoặc tệp cục bộ mà bạn sẽ tải xuống một chút. Trong khối mã ở trên, 
$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
4 chỉ ra một đường dẫn so với địa chỉ gốc máy chủ HTTP cục bộ của bạn, ví dụ sẽ mở rộng thành 
$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
5.

  • các cửa sổ
  • Linux + MacOS

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide


$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide

Don Tiết lo lắng nếu các lệnh trên don don làm việc trên hệ điều hành của bạn. Bạn có thể tải xuống kho lưu trữ và trích xuất nội dung của thư mục con 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
7 của nó theo cách thủ công.

Miễn là mọi thứ đều ổn, bạn nên có ít nhất mười bốn tệp này trong thư mục ứng dụng của bạn:

hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py

Như bạn có thể thấy, Pyscript là một sự pha trộn của Python, JavaScript, Webassugging, CSS và HTML. Trong thực tế, bạn sẽ thực hiện phần lớn chương trình Pyscript của mình bằng Python.

Cách tiếp cận mà bạn đã thực hiện trong phần này cung cấp cho bạn sự kiểm soát chi tiết hơn nhiều đối với các phiên bản pyodide và trình thông dịch python cơ bản. Để kiểm tra phiên bản Python nào có sẵn thông qua pyodide, bạn có thể thấy Changelog. Ví dụ, pyodide 0,20.0, được sử dụng trong hướng dẫn này, được xây dựng trên đỉnh Cpython 3.10.2.

Khi nghi ngờ, bạn luôn có thể xác minh phiên bản Python đang chạy trong trình duyệt của mình, như bạn sẽ học tiếp theo.

Xác minh các phiên bản pyodide và python của bạn

Để kiểm tra phiên bản pyodide của bạn, tất cả những gì bạn cần là một dòng mã duy nhất. Quay trở lại Trình chỉnh sửa mã của bạn và thay thế mã 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
1 bằng đoạn trích sau:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
0

Nó dựa vào mô -đun 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
9, được tự động tiêm vào pyscript. Bạn có thể sử dụng nó để truy cập API JavaScript Pyodide trực tiếp từ Python trong trường hợp Pyscript không cung cấp lớp trừu tượng riêng cho một tính năng nhất định.

Kiểm tra phiên bản Python của bạn trong Pyscript trông giống như trong trình thông dịch CPython tiêu chuẩn:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
1

Bạn nhập mô-đun 

hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
0 từ thư viện tiêu chuẩn để kiểm tra hằng số 
hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
1 và sau đó in nó bằng chuỗi F. Khi bạn làm mới trang trong trình duyệt web và để nó tải lại, thì nó sẽ tạo ra một chuỗi bắt đầu với một cái gì đó như thế này:

Python 3.10.2 (Chính, ngày 9 tháng 4 năm 2022, 20:52:01) [Mạnh]

Đó là những gì bạn thường thấy khi bạn chạy một trình thông dịch Python tương tác trong dòng lệnh. Trong trường hợp này, Pyodide không ở đằng sau bản phát hành Cpython mới nhất, là 3.10.4 tại thời điểm viết hướng dẫn này.

Nhân tiện, bạn có nhận thấy dấu chấm phẩy (

hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
2) trong các ví dụ trên không? Trong Python, một dấu chấm phẩy phân tách nhiều câu lệnh xuất hiện trên một dòng, có thể hữu ích khi bạn viết tập lệnh một lớp hoặc khi bạn bị ràng buộc, ví dụ, bằng chuỗi thiết lập mô-đun 
hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
3.

Việc sử dụng dấu chấm phẩy trong mã Python là rất hiếm và thường được cau mày bởi Pythonistas dày dạn. Tuy nhiên, biểu tượng không phổ biến này giúp vượt qua một vấn đề với khoảng trắng đáng kể Python, đôi khi có thể trở nên lộn xộn trong Pyscript. Trong phần tiếp theo, bạn sẽ học cách đối phó với định dạng mã khối và định dạng mã Python được nhúng trong HTML.significant whitespace, which can sometimes get messy in PyScript. In the next section, you’ll learn how to deal with block indentation and Python code formatting embedded in HTML.

Xử lý định dạng mã Python

Khi bạn nhúng một phần CSS, JavaScript hoặc thậm chí là hình ảnh SVG trong tài liệu HTML, thì không có rủi ro về trình duyệt web hiểu sai mã liên quan của họ, bởi vì chúng là tất cả các ví dụ về các ngôn ngữ dạng tự do, bỏ qua thêm khoảng trống. Ví dụ, bạn có thể định dạng mã của mình, tuy nhiên bạn thích trong các ngôn ngữ đó, bằng cách xóa các dòng phá vỡ mà không mất bất kỳ thông tin nào. Đó là những gì làm cho việc thu nhỏ của JavaScript.

Thật không may, điều này không đúng với Python, tuân theo quy tắc bên ngoài cho cú pháp của nó, nơi mọi ký tự không gian đều có giá trị. Bởi vì Pyscript là một công nghệ mới lạ, hầu hết các định dạng mã tự động ngày nay có thể sẽ đưa ra các giả định sai và phá hủy mã python của bạn có trong thẻ 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 bằng cách thu gọn khoảng trắng đáng kể. Nếu điều đó xảy ra, bạn có thể gặp phải một lỗi tương tự như điều này:automatic code formatters will likely make the wrong assumptions and destroy your Python code contained within the 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 tag by collapsing the significant whitespace. If that happens, you might end up with an error similar to this one:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
2

Trong trường hợp này, pyodide không phân tích đoạn mã python của bạn, được nhúng trong HTML, do vết thương bị hỏng. Bạn có thể thấy ngoại lệ này và Traceback liên quan trong cơ thể tài liệu cũng như trong bảng điều khiển của nhà phát triển web.

Nhưng đó không phải là tất cả. Nếu bạn khai báo một chuỗi theo nghĩa đen trong mã Python của bạn trông giống như một thẻ HTML, thì trình duyệt sẽ nhận ra nó là một 

hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
5 và loại bỏ nó, chỉ để lại văn bản bên trong. Xem xét phân tích cú pháp XML như một ví dụ:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
3

Mã trên sử dụng API ElementTree từ thư viện tiêu chuẩn Python, để phân tích một chuỗi chứa bản ghi dữ liệu được định dạng XML về một người. Tuy nhiên, tham số thực tế được truyền vào hàm sẽ chỉ là 

hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
6 mà không cần các thẻ xung quanh.

Lưu ý rằng từ quan điểm của trình duyệt web, 

hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
7 trông giống như một thẻ HTML khác được lồng trong phần tử cha 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9. Để tránh sự mơ hồ như vậy, bạn có thể thay thế các khung góc (
hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
9 và 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
00) bằng các đối tác được mã hóa của chúng được gọi là các thực thể HTML:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
4

Thực thể 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
01 là viết tắt của nhân vật ít hơn so với nhân vật (
hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
9), trong khi 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
03 thay thế ký tự lớn hơn so với ký tự (
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
00). Các thực thể nhân vật cho phép các trình duyệt hiển thị văn bản theo nghĩa đen, khi nó sẽ được hiểu là các yếu tố HTML. Điều này hoạt động trong Pyscript, nhưng nó không giải quyết được vấn đề thụt.

Trừ khi bạn chỉ chơi xung quanh với Pyscript, thì bạn thường không trích xuất mã Python của mình vào một tệp riêng thay vì trộn nó với HTML. Bạn có thể làm như vậy bằng cách chỉ định thuộc tính 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
3 tùy chọn trên phần tử 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9, trông tương tự như thẻ 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
07 tiêu chuẩn dành cho JavaScript:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
5

Điều này sẽ tải và ngay lập tức chạy tập lệnh Python của bạn ngay khi trang đã sẵn sàng. Nếu bạn chỉ muốn tải một mô -đun tùy chỉnh vào thời gian chạy Pyscript để cung cấp nó để nhập, thì hãy kiểm tra Quản lý phụ thuộc với 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 trong phần tiếp theo.

Bạn có thể có nhiều thẻ 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 trên trang của mình miễn là chúng xuất hiện trong trang 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
10 hoặc 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
11. Pyscript sẽ đưa chúng lên hàng đợi và chạy chúng theo trình tự.

Bây giờ bạn đã biết cách chạy mã python của bạn trong trình duyệt với pyscript. Tuy nhiên, hầu hết các ứng dụng thực tế yêu cầu một hoặc nhiều phụ thuộc. Trong phần tiếp theo, bạn sẽ tìm ra cách tận dụng Python, Pin Pin hiện có, các thư viện của bên thứ ba được xuất bản trên PYPI hoặc ở nơi khác và các mô-đun Python của riêng bạn.

Quản lý các phụ thuộc Python trong Pyscript

Cho đến nay, bạn đã thấy các thẻ tùy chỉnh 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 và 
$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
2 do khung được cung cấp. Một yếu tố khác mà bạn thường muốn sử dụng là 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08, giúp quản lý các phụ thuộc dự án của bạn, tương tự như công cụ Python tựa ____115.

Các mô -đun bị thiếu trong thư viện tiêu chuẩn Python

Python đi kèm với pin bao gồm, điều đó có nghĩa là nhiều mô -đun thư viện tiêu chuẩn của nó đã giải quyết các vấn đề phổ biến mà bạn có thể gặp phải trong quá trình phát triển phần mềm. Bạn có thể thấy rằng hầu hết các mô -đun này đều có sẵn trong pyodide và pyscript ra khỏi hộp, cho phép bạn nhập và sử dụng chúng ngay lập tức. Chẳng hạn, bạn đã thấy một đoạn mã tận dụng gói 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
16 để phân tích tài liệu XML.

Tuy nhiên, có một vài ngoại lệ đáng chú ý do các ràng buộc của trình duyệt web và nỗ lực giảm kích thước tải xuống. Bất cứ điều gì không liên quan đến môi trường trình duyệt đã được loại bỏ khỏi bản phát hành pyodide hiện tại. Cụ thể, chúng bao gồm nhưng không giới hạn ở các mô -đun và gói sau:

  • PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    17 (Môi trường học tập và phát triển tích hợp)
  • PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    18 (Lập trình GUI)
  • PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    19 (Đồ họa rùa)
  • VENV (môi trường ảo)

Bạn có thể kiểm tra danh sách đầy đủ các gói đã bị loại bỏ trên trang tài liệu Pyodide.

Ngoài ra, một vài gói được giữ làm người giữ chỗ, cuối cùng có thể nhận được sự hỗ trợ thích hợp sau khi WebAssugging phát triển trong tương lai. Ngày nay, bạn có thể nhập chúng, cũng như các mô -đun như 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
20 phụ thuộc vào chúng, nhưng chúng đã giành được công việc của Google:

  • PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    21
  • PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    22
  • PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    23

Nói chung, bạn có thể bắt đầu các quy trình, luồng hoặc kết nối mạng cấp thấp mới. Điều đó đang được nói, bạn sẽ tìm hiểu về một số giảm nhẹ sau này trong hướng dẫn này.

Điều gì về việc sử dụng các thư viện bên ngoài trong pyscript mà bạn thường cài đặt với PIP vào môi trường ảo của bạn?

Thư viện bên thứ ba đi kèm với pyodide

Pyodide là một dự án spin-off của dự án phụ huynh iodide hiện đang ngừng khởi động bởi Mozilla. Mục tiêu của nó là cung cấp các công cụ để thực hiện điện toán khoa học trong trình duyệt web theo cách tương tự như máy tính xách tay Jupyter nhưng không cần giao tiếp với máy chủ để chạy mã Python. Do đó, các nhà nghiên cứu sẽ có thể chia sẻ và sử dụng lại công việc của họ dễ dàng hơn với giá sức mạnh tính toán hạn chế.

Bởi vì Pyscript là một trình bao bọc xung quanh pyodide, bạn có thể truy cập vào một số thư viện bên thứ ba phổ biến được biên dịch cho webassugging với pyodide, ngay cả những người có các bộ phận được viết bằng C và Fortran. Chẳng hạn, bạn sẽ tìm thấy các gói sau đây:

  • Súp đẹp
  • Bokeh
  • Matplotlib
  • NLTK
  • Numpy
  • gấu trúc
  • Cái gối
  • Scipy
  • Sqlalchemy
  • scikit-learn

Danh sách thực tế dài hơn nhiều và không giới hạn cho các thư viện được thiết kế nghiêm ngặt cho khoa học dữ liệu. Có gần một trăm thư viện bó với pyodide tại thời điểm viết hướng dẫn này. Bạn có thể kiểm tra tài liệu chính thức của Pyodide, để biết danh sách đầy đủ hoặc truy cập vào các gói/ thư mục trong kho GitHub tương ứng để xem trạng thái mới nhất.

Mặc dù các thư viện bên ngoài này là một phần của bản phát hành pyodide, nhưng chúng không tự động được tải vào thời gian chạy Python của bạn. Hãy nhớ rằng mỗi mô -đun Python riêng lẻ phải được tìm nạp trên mạng vào trình duyệt web của bạn, cần có thời gian và tài nguyên có giá trị. Khi Pyscript bắt đầu, môi trường của bạn chỉ có mức tối thiểu cần thiết để giải thích mã Python.

Để nhập các mô -đun mà aren có trong thư viện tiêu chuẩn Python, bạn phải yêu cầu rõ ràng bằng cách khai báo tên của họ trong một yếu tố 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08:declaring their names in a 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 element:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
6

Phần tử 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 chứa một danh sách YAML với tên của các thư viện để tìm nạp theo yêu cầu. Khi bạn nhìn vào tab mạng trong các công cụ phát triển web của mình, bạn sẽ nhận thấy rằng trình duyệt tải xuống Numpy và matplotlib từ máy chủ CDN hoặc máy chủ HTTP cục bộ của bạn lưu trữ pyodide. Nó cũng kéo một số phụ thuộc chuyển tiếp theo yêu cầu của matplotlib, lên tới hơn mười hai megabyte có kích thước!

Ngoài ra, bạn có thể cài đặt các phụ thuộc theo chương trình trong Python, vì Pyscript phơi bày công cụ Micropip Pyodide, đây là phiên bản được sắp xếp hợp lý của 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
15:programmatically in Python, as PyScript exposes Pyodide’s micropip tool, which is a streamlined version of 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
15:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
7

Mô -đun 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
27 và biến 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
28 ngầm, đại diện cho vòng lặp không đồng bộ mặc định, có sẵn trong không gian tên toàn cầu trong Pyscript mà không cần nhập chúng.

Lưu ý rằng bạn phải gọi phương thức mô -đun 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
29 không đồng bộ thông qua gói Asyncio của Python, để kết nối với trình duyệt web API Fetch Fetch do Micropip tận dụng. Ngoài ra, trong khi Hướng dẫn kiểu nhập khẩu khuyên bạn nên đặt các câu lệnh 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
30 của bạn ở đầu tệp, chúng phải đến sau câu lệnh 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
31 ở đây để đảm bảo rằng các thư viện cần thiết đã được Micropip tìm nạp và cài đặt trước.

Nếu pyodide không tìm thấy thư viện cần thiết trong các gói đi kèm của nó, thì nó sẽ cố gắng tải xuống từ Chỉ số gói Python (PYPI). Tuy nhiên, không phải tất cả các thư viện sẽ hoạt động theo cách đó do các ràng buộc thời gian chạy nhất định.

Bánh xe Pure-Python được tải xuống từ Pypi

Giả sử bạn muốn tạo một ứng dụng pyscript phân tích XML bằng thư viện ampe, không được gói với pyodide cũng như phân phối với thư viện tiêu chuẩn. Bạn thêm khai báo sau vào phần tử 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 và tải lại trang của bạn trong trình duyệt:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
8

Pyodide tiếp xúc với Pypi để lấy siêu dữ liệu JSON liên quan và kết luận rằng thư viện đã được xây dựng và tải lên với định dạng bánh xe Python dự kiến. Nó chỉ có sẵn dưới dạng phân phối nguồn (SDist), có thể yêu cầu một bước biên dịch bổ sung. Nó không quan trọng nếu thư viện chỉ chứa mã Python thuần túy. Trong trường hợp này, Pyodide mong đợi một kho lưu trữ bánh xe, nó có thể trích xuất và bắt đầu sử dụng ngay lập tức.

Một chút thất vọng, bạn thử vận ​​may với một thư viện phân tích XML khác có tên là XMLTodict, chuyển đổi tài liệu thành từ điển Python thay vì các đối tượng:

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
9

Lần này, siêu dữ liệu của thư viện chỉ ra rằng một kho lưu trữ bánh xe python thuần túy có sẵn, vì vậy pyodide tiếp tục và đưa nó vào nó. Nếu thư viện có sự phụ thuộc riêng, thì pyodide cũng sẽ cố gắng lấy chúng. Tuy nhiên, cơ chế độ phân giải phụ thuộc được thực hiện trong Micropip là vô cùng thô sơ. Từ giờ trở đi, thư viện 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
33 trở nên có thể nhập trong ứng dụng Pyscript của bạn.

Tuy nhiên, nếu bạn đã thử tìm nạp thư viện không pure-python, chẳng hạn như trình điều khiển nhị phân cho cơ sở dữ liệu PostgreSQL, thì pyodide sẽ từ chối tải nó vào thời gian chạy của bạn. Ngay cả khi nó được chế tạo làm bánh xe Python cho các nền tảng khác nhau, không ai trong số chúng sẽ phù hợp với webassugging. Bạn có thể xem các bánh xe được tải lên PYPI cho bất kỳ thư viện nào bằng cách nhấp vào tải xuống các tệp trên trang tương ứng.

Tóm lại, một thư viện của bên thứ ba được liệt kê trong 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 phải là một thư viện thuần túy và được phân phối bằng định dạng bánh xe để được chọn, trừ khi nó đã được xây dựng để xử lý WebAssugging và đi kèm với pyodide. Nhận một thư viện phi python tùy chỉnh vào pyscript là khó khăn.

C Mô -đun mở rộng được biên dịch cho WebAssugging

Nhiều thư viện Python chứa các bit mã được viết bằng C hoặc các ngôn ngữ khác để đạt được hiệu suất và để tận dụng các cuộc gọi hệ thống cụ thể không có sẵn trong Python thuần túy. Có một vài cách để giao tiếp với mã đó, nhưng nó là một thông lệ phổ biến để bọc nó trong mô -đun mở rộng Python C có thể được biên dịch với mã gốc của nền tảng của bạn và được tải động trong thời gian chạy.

Sử dụng trình biên dịch EMScripten cho phép bạn nhắm mục tiêu WebAssugging thay vì kiến ​​trúc máy tính và hệ điều hành cụ thể. Tuy nhiên, làm như vậy không phải là một kỳ công dễ dàng. Ngay cả khi bạn biết cách xây dựng một bánh xe Python cho thời gian chạy pyodide và bạn không bị đe dọa bởi quá trình này, thẻ Pyscript tựa ____108 luôn mong đợi một bánh xe python tinh khiết hoặc một gói được gói với pyodide.

Để cài đặt một bánh xe chứa mã WebAssugging, bạn có thể gọi chức năng Pyodide từ ____136 bằng giao diện Python của nó, 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
9, đã đề cập trước đó. Bạn cũng có thể sử dụng API Pyodide trực tiếp trong JavaScript, nhưng nó sẽ bắt đầu một thời gian chạy độc lập thay vì kết nối với một loại đã được tạo bởi Pyscript. Do đó, mô -đun tùy chỉnh của bạn với mã WebAssugging sẽ được hiển thị trong Pyscript.

Tải các mô -đun mở rộng C tùy chỉnh cuối cùng có thể trở nên đơn giản hơn. Cho đến lúc đó, đặt cược tốt nhất của bạn dường như kiên nhẫn chờ đợi pyodide gửi với thư viện mong muốn. Ngoài ra, bạn có thể xây dựng thời gian chạy pyodide của riêng mình từ mã nguồn với các thư viện được biên dịch chéo thêm. Có một công cụ dòng lệnh gọi là 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
38, tự động hóa một số bước liên quan.

Hiện tại, bạn có thể muốn gắn bó với các mô -đun Python tùy chỉnh được viết bằng tay.

Các mô -đun và tệp dữ liệu Python tùy chỉnh

Bạn có thể sử dụng 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 hoặc Micropip để làm cho các mô -đun tùy chỉnh của bạn có thể nhập trong các ứng dụng Pyscript. Giả sử bạn đã thực hiện một mô -đun trợ giúp gọi là 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
40, đang ngồi trong một thư mục con 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
41:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
0

Tên của mô -đun của bạn sử dụng một dạng số nhiều để tránh xung đột với mô -đun 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
42 trong thư viện tiêu chuẩn, được sử dụng để đọc và viết định dạng tệp âm thanh dạng sóng (WAV). Mô -đun của bạn xác định một chức năng duy nhất được gọi là 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
43, trả về đóng cửa. Hàm bên trong 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
44, dựa trên việc đóng cửa, sử dụng Numpy để tạo ra một sóng hình sin tinh khiết với tần số, biên độ và pha đã cho.

Trước khi bạn có thể nhập mô -đun của mình vào thẻ 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9, từ tập lệnh nội tuyến hoặc có nguồn gốc, bạn sẽ cần phải tìm nạp nó vào trình duyệt web của mình bằng 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 bằng cách chỉ định thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
47 đặc biệt trong YAML:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
1

Đường dẫn tệp tương đối với trang HTML của bạn. Như trước đây, bạn phải lưu trữ các tệp của mình thông qua một máy chủ web do chính sách CORS, điều này không cho phép nhận thêm các tệp thông qua giao thức 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
48.

Mặt khác, điều đáng chú ý là trong khi bạn có thể tải một thư mục vào Pyscript, bạn có thể lạm dụng thuộc tính 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
47 để tải hầu như bất kỳ tệp nào vào đó. Bao gồm các tệp dữ liệu như tệp CSV văn bản hoặc cơ sở dữ liệu SQLite nhị phân:data files like textual CSV files or a binary SQLite database:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
2

Lưu ý rằng khi bạn tìm nạp các tệp của mình bằng 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08, thì bạn sẽ mất thông tin về cấu trúc thư mục gốc của chúng, vì tất cả các tệp kết thúc trong một thư mục đích duy nhất. Khi bạn mở một tệp, bạn chỉ chỉ định tên của nó mà không có đường dẫn, điều đó có nghĩa là các tệp của bạn phải được đặt tên duy nhất. Bạn sẽ học cách giảm thiểu vấn đề đó sau này bằng cách ghi vào một hệ thống tệp ảo trong pyodide.

Được rồi. Bây giờ bạn đã biết cách lấy mã python của bạn hoặc người khác thành Pyscript, bạn nên học cách làm việc với khung hiệu quả hơn.

Mô phỏng Python Repred và Jupyter Notebook

Một cách nhanh chóng và thú vị để học Python hoặc bất kỳ thư viện cơ bản nào của nó là bằng cách thử chúng trong một phiên phiên dịch trực tiếp, còn được gọi là Read-Eval Print-Loop (repl). Bằng cách tương tác với mã, bạn có thể khám phá những chức năng và lớp học có sẵn và cách bạn sử dụng chúng. Nó không khác với pyscript.live interpreter session, also known as the Read-Eval-Print-Loop (REPL). By interacting with the code, you can explore what functions and classes are available and how you’re supposed to use them. It’s no different with PyScript.

Bởi vì môi trường Pyscript, mất một thời gian để tải, hãy làm mới trang mỗi khi bạn chỉnh sửa mã của bạn sẽ không cắt nó. May mắn thay, khung đi kèm với một yếu tố tùy chỉnh khác được gọi là 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51, cho phép bạn thực thi các đoạn mã nhỏ mà không tải lại trang. Bạn có thể có nhiều trong số đó như bạn muốn trong HTML của mình, để chúng trống hoặc chuẩn bị chúng bằng một số mã Python ban đầu:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
3

Không giống như các yếu tố mà bạn đã khám phá, 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51 có một biểu diễn trực quan được xây dựng trên đầu của trình soạn thảo Codemirror, hỗ trợ làm nổi bật cú pháp có thể theo chủ đề, tự động hoàn thành, gấp mã, v.v. Miễn là bạn đã bao gồm bảng kiểu CSS mặc định do Pyscript cung cấp, phần tử mới này sẽ trông giống như thế này khi được hiển thị trong trình duyệt:visual representation that builds on top of the CodeMirror editor, which supports themeable syntax highlighting, autocompletion, code folding, and more. As long as you’ve included the default CSS stylesheet provided by PyScript, this new element should look something like this when rendered in the browser:

Hướng dẫn can you use python in a web browser? - bạn có thể sử dụng python trong trình duyệt web không?
Pyscript's REP giống như một cuốn sổ tay Jupyter

Mỗi trường hợp của 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51 giống với một ô trong một cuốn sổ Jupyter. Bạn có thể nhập nhiều dòng mã python vào một ô và nhấp vào nút phát màu xanh lá cây ở góc dưới bên phải của nó để thực hiện mã của bạn. Bạn cũng có thể sử dụng kết hợp khóa Shift+Enter để đạt được hiệu ứng tương tự. Dưới đây là một vài phím tắt bàn phím được cung cấp bởi Codemirror:Shift+Enter key combination to achieve a similar effect. Below are a few additional keyboard shortcuts provided by CodeMirror:

Hoạt độnghệ điều hành MacWindows và Linux
Tìm kiếmCmd+F+F Ctrl+F+F
Chọn Phạm viCmd+I+I Ctrl+I+I
Chọn dòngCtrl+L+L Alt+L+L
Xóa dòngCmd+Shift+K+Shift+K Ctrl+Shift+K+Shift+K
Chèn dòng bên dướiCmd+Enter+Enter Ctrl+Enter+Enter
Di chuyển lựa chọn lênAlt+Up+Up Alt+Up+Up
Di chuyển lựa chọn xuốngAlt+Down+Down Alt+Down+Down
Đi đến khung phù hợpCMD+Shift+\+Shift+\ Ctrl+Shift+\+Shift+\
Thụt lềCmd+]+] Ctrl+]+]
Cống hiếnCmd+[+[ Ctrl+[+[

Bảng trên minh họa các keymap mặc định, có thể được điều chỉnh để bắt chước các emacs, vim hoặc văn bản tuyệt vời.

Nếu dòng cuối cùng trong ô của bạn chứa biểu thức Python hợp lệ, thì Pyscript sẽ nối lại biểu diễn của nó ngay dưới ô. Ví dụ, nó có thể hiển thị một biểu đồ được vẽ bằng matplotlib. Khi bạn xem một trang web như vậy trong trình duyệt, nó bắt đầu trông giống như một máy tính xách tay Jupyter.

Tuy nhiên, không giống như trong một máy tính xách tay Jupyter, thực hiện một 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51 won đã chèn một ô mới theo mặc định. Nếu bạn muốn kích hoạt hành vi đó, thì hãy đặt thuộc tính phần tử ____ ____155 thành true:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
4

Bây giờ, khi bạn chạy mã trong một ô như vậy lần đầu tiên, nó sẽ chèn một mã khác ở cuối trang. Tuy nhiên, các lần chạy sau đó đã giành chiến thắng. Tế bào mới này sẽ có thuộc tính 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
55.

Một hành vi mặc định khác của phần tử 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51 đang nối thêm các container 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
58 mới cho đầu ra Python và tracbacks. Bạn có thể tùy chọn chuyển hướng đầu ra tiêu chuẩn và các luồng lỗi tiêu chuẩn để tách các yếu tố tùy chỉnh trên trang, cho phép bạn thiết kế một môi trường giống như IDE trong trình duyệt:standard output and standard error streams to separate, custom elements on the page, letting you design an IDE-like environment in the browser:

Hướng dẫn can you use python in a web browser? - bạn có thể sử dụng python trong trình duyệt web không?
Sân chơi pyscript tùy chỉnh trong trình duyệt web

Tại đây, mã của trang web được mô tả trong ảnh chụp màn hình ở trên:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
5

Sử dụng các thuộc tính 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
59 và 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
60 để chỉ định ID phần tử đích tương ứng. Nếu bạn muốn kết hợp cả hai luồng và đổ chúng vào một phần tử duy nhất, thì bạn có thể sử dụng thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
61 thay thế. Các thuộc tính tương tự áp dụng cho phần tử 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 mà bạn đã thấy trước đó.

Các yếu tố còn lại hiện được cung cấp bởi Pyscript là các thành phần trực quan, còn được gọi là Widget, giúp đơn giản hóa làm việc với HTML và Python. Bạn có thể khám phá chúng ngay bây giờ.widgets, which simplify working with HTML and Python. You’ll explore them now.

Khám phá các thành phần trực quan Pyscript

Các thành phần trực quan mà Pyscript cung cấp là các trình bao bọc tiện lợi cho các yếu tố HTML, có thể hữu ích cho những người mới bắt đầu không có nhiều kinh nghiệm về phát triển web, đặc biệt là về phía khách hàng. Tuy nhiên, những vật dụng đó có tính thử nghiệm cao, có chức năng hạn chế và có thể bị loại bỏ trong tương lai. Đôi khi, chúng tải quá nhanh, trước khi pyodide được khởi tạo hoàn toàn, gây ra lỗi. Sử dụng chúng có nguy cơ của riêng bạn!

Pytitle

Với phần tử pytitle, bạn có thể nhanh chóng thêm một tiêu đề văn bản vào trang web của mình, sẽ xuất hiện trong các chữ cái chữ hoa và được tập trung theo chiều ngang, với điều kiện là bạn đã liên kết bảng kiểu CSS mặc định đi kèm với pyscript. Tại đây, cách bạn có thể sử dụng tiện ích này trong mã HTML của mình:textual header to your web page, which will appear in uppercase letters and be centered horizontally, provided that you linked the default CSS stylesheet that comes with PyScript. Here’s how you can use this widget in your HTML code:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
6

Nó có một thành phần trực quan thuần túy không có thuộc tính hoặc hành vi bổ sung và nó sẽ chỉ chấp nhận nội dung văn bản rõ ràng giữa các thẻ mở và đóng của nó.

Pybox

Pybox là một phần tử container có thể sắp xếp trẻ em bằng mô hình bố cục CSS Flexbox theo hướng ngang. Nó hiện sử dụng các lớp chiều rộng CSS đuôi, chẳng hạn như 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
63, 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
64 hoặc 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
65, để xác định chiều rộng cột.layout model in the horizontal direction. It currently uses Tailwind CSS width classes, such as 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
63, 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
64, or 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
65, to define the column widths.

Bạn có thể chỉ định độ rộng riêng lẻ của các phần tử con bạn thông qua thuộc tính 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
66 tùy chọn của cha mẹ 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
67:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
7

Lưu ý rằng bạn chỉ cung cấp một phần của tên lớp CSS xuất hiện sau tiền tố 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
68 và bạn phân định độ rộng bằng cách sử dụng dấu chấm phẩy (
hello-world/
│
├── distutils.tar
├── hello.html
├── micropip-0.1-py3-none-any.whl
├── packages.json
├── packaging-21.3-py3-none-any.whl
├── pyodide.asm.data
├── pyodide.asm.js
├── pyodide.asm.wasm
├── pyodide.js
├── pyodide_py.tar
├── pyparsing-3.0.7-py3-none-any.whl
├── pyscript.css
├── pyscript.js
└── pyscript.py
2). Trong ví dụ trên, 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
58 đầu tiên sẽ chiếm hai phần ba không gian có sẵn trong hàng (⅔), trong khi hai phần tử còn lại cùng nhau sẽ chiếm một phần ba (⅙ + ⅙ = ⅓). Nếu bạn bỏ qua thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
66, thì tất cả trẻ em sẽ được kéo dài như nhau để có cùng kích thước.

Pybutton

Pybutton là tiện ích tương tác đầu tiên trong Pyscript cho phép bạn gọi chức năng Python để đáp ứng với hành động của người dùng, như nhấp vào nút chuột. Để xử lý sự kiện nhấp chuột JavaScript, hãy xác định chức năng nội tuyến có tên 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
72 bên trong phần tử 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
0 của bạn:interactive widget in PyScript that lets you call a Python function in response to a user action, like clicking a mouse button. To handle JavaScript’s click event, define an inline function named 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
72 inside of your 
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
0 element:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
8

Hàm là một cuộc gọi lại lấy một đối tượng con trỏ và không trả về không có gì. Mặc dù nó không thể gắn một cuộc gọi lại được xác định ở nơi khác, nhưng bạn luôn có thể ủy thác cho một số chức năng trợ giúp. Nếu bạn không thích cái nhìn và cảm nhận mặc định của Pybutton, thì bạn có thể ghi đè lên nó với một hoặc nhiều lớp CSS thông qua thuộc tính 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
74.

Một sự kiện khác mà Pybutton hỗ trợ là sự kiện tập trung, mà bạn có thể nghe bằng cách xác định chức năng 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
75. Nó sẽ nhận được đối tượng FocusEvent như một đối số.

Đáng buồn thay, do tốc độ phát triển nhanh chóng của pyscript và pyodide, sau này đã đưa ra một sự thay đổi phá vỡ trong phiên bản 0.19 bằng cách sửa chữa rò rỉ bộ nhớ, điều này bất ngờ khiến Pybutton ngừng hoạt động. Vấn đề tương tự áp dụng cho pyinputbox, mà bạn sẽ tìm hiểu về tiếp theo. Hy vọng, cả hai tiện ích sẽ được sửa chữa vào thời điểm bạn đọc nó.

Pyinputbox

PyinputBox là tiện ích cuối cùng hiện có trong Pyscript và nó kết thúc phần tử đầu vào HTML, và cho phép bạn nghe sự kiện Keypress trên đó:input element and lets you listen to the keypress event on it:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
9

Lưu ý rằng sự kiện Keypress đã không được ủng hộ sự kiện Keydown, mà PyInputBox không hỗ trợ. Do đó, bạn có thể thấy nó ít cồng kềnh hơn khi truy cập và điều khiển các phần tử HTML tiêu chuẩn trực tiếp từ Pyscript mà không cần thêm các lớp trừu tượng có thể bị hỏng.

Sử dụng pyscript để tìm và thao tác các phần tử HTML

Hiện tại, WebAssugging không cho phép tương tác trực tiếp với mô hình đối tượng tài liệu (DOM), thường cho phép bạn truy cập vào các yếu tố cơ bản của HTML. Thay vào đó, bạn phải sử dụng JavaScript để truy vấn và đi qua cây Dom. Việc truy cập các đối tượng JavaScript trong Python có thể nhờ các đối tượng proxy Pyodide, điều này tạo điều kiện cho việc dịch giữa cả hai ngôn ngữ. Có hai cách để sử dụng chúng để thao tác DOM trong pyscript.

Bộ điều hợp Pyscript cho proxy JavaScript

Đối với các trường hợp sử dụng tầm thường, khi bạn vội vàng và không quan tâm đến việc thiếu thêm tiếng chuông và còi, bạn có thể thử Pyscript tựa 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
76 Class A. Nó đã có trong không gian tên toàn cầu của bạn, có nghĩa là bạn không phải nhập khẩu. Lớp cho phép bạn tìm các phần tử HTML chỉ bằng ID và sửa đổi nội dung của chúng ở một mức độ giới hạn.

Xem xét tài liệu HTML mẫu sau:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
0

Nó có một danh sách mua sắm với một số mặt hàng chéo và hộp đầu vào ở phía dưới để thêm các mặt hàng mới để mua. Phần tử 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51 sẽ cho phép bạn kiểm tra và phát xung quanh với API Pyscript tương tác khi bạn mở trang này trong trình duyệt web của mình.

Giả sử bạn muốn xác định mục mua sắm mới nào mà người dùng đã nhập vào hộp đầu vào đó và sau đó bạn muốn xóa nó. Ở đây, một đoạn mã Python chỉ làm điều đó khi được đặt trong thẻ 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 hoặc 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
1

Đầu tiên, bạn lấy một tham chiếu đến phần tử 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
80 bằng cách gọi hàm xây dựng lớp 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
81 với thuộc tính HTML 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
82 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
83 làm đối số. Sau đó, bạn in thuộc tính phần tử ____ ____184 và gọi 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
85 để đặt lại giá trị của nó. Bạn cần phải nhập một cái gì đó vào hộp đầu vào trước khi thấy bất kỳ kết quả nào.

Lớp 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
76 có các thuộc tính có giá trị khác, chỉ được đọc và một vài phương pháp mà bạn có thể gọi để thay đổi kiểu phần tử hoặc trạng thái:

Thành viênSự mô tả
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
87		Một đối tượng proxy cho phần tử HTML của JavaScript
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
88		Giá trị chuỗi của thuộc tính phần tử HTML 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
82 nếu nó tồn tại
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
84		Giá trị chuỗi của thuộc tính phần tử HTML 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
84 nếu nó tồn tại
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
92		Thêm một hoặc nhiều lớp CSS
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
93		Xóa một hoặc nhiều lớp CSS
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
94		Cập nhật thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
95 hoặc thêm phần tử 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
58 hoàn toàn mới
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
85		Xóa thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
84 hoặc 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
95
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
00		Sao chép phần tử và chèn bản sao sâu của nó vào cây dom
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
01		Tìm một hậu duệ 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
76 bằng bộ chọn CSS

Bất cứ lúc nào, bạn có thể đi sâu vào proxy 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
03 thực tế được bọc bởi Pyscript thông qua thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
87. Phương pháp 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
01 là một phương pháp thú vị bởi vì nó cho phép bạn tìm thấy một phần tử hậu duệ được lồng trong phần tử container của bạn bằng cách sử dụng bất kỳ bộ chọn CSS nào và không chỉ là ID đơn giản. Ví dụ: bạn có thể tìm thấy mục danh sách vượt qua đầu tiên và xóa lớp 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
06 CSS khỏi nó trong khi thêm nó vào phần tử cuối cùng trong danh sách đó:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
2

Khi bạn chạy đoạn mã này qua pyscript của bạn, thì sữa sẽ không còn bị loại bỏ, nhưng bánh mì sẽ được. Lần tới khi bạn chạy nó, những quả trứng cũng sẽ trở nên không bị trói.

Đó là về tất cả mọi thứ bạn có thể làm với lớp Pyscript từ ____176. Đối với sự điều khiển cuối cùng đối với cây Dom và thiết bị của bạn, bạn sẽ muốn tiếp cận với chính đối tượng proxy.

Proxy JavaScript Pyodide

Bắt đầu bằng cách nhập mô -đun 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
08 được cung cấp bởi pyodide trong mã pyscript của bạn:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
3

Mô -đun này mở ra không gian tên toàn cầu của JavaScript, tiết lộ các chức năng và biến của bạn, cũng như các đối tượng được cung cấp hoàn toàn bởi trình duyệt web. Chúng bao gồm các đối tượng 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
09 và 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
10, cũng như kiểu dữ liệu 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
03, mà bạn sẽ quan tâm nhất khi thao tác với DOM.

Lưu ý rằng Pyscript đã nhập một vài thứ từ mô -đun 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
08 vào không gian tên toàn cầu trong Python để thuận tiện cho bạn. Cụ thể, các đối tượng 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
13 và 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
10 đã có ở đó:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
4

Bạn không phải tự nhập chúng hoặc tiền tố tên của họ với mô -đun 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
08 nữa, điều này khiến Python trông rất giống JavaScript khi bạn nheo mắt.

Được rồi, những gì về việc thêm các mặt hàng mới vào danh sách mua sắm từ phần trước, dựa trên giá trị của hộp đầu vào? Tại đây, cách bạn có thể làm điều này bằng cách tận dụng API DOM trong Pyscript:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
5

Điều này sẽ trông quen thuộc với bất kỳ ai đã xây dựng giao diện người dùng web bằng cách sử dụng JavaScript thuần túy trước đây. Bạn truy vấn toàn bộ tài liệu HTML cho phần tử 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
80 bằng bộ chọn CSS. Nếu người dùng đã nhập một số giá trị vào hộp đầu vào đó, thì bạn sẽ tạo một phần tử mục danh sách mới (
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
17) và điền vào nó bằng thuộc tính 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
18. Tiếp theo, bạn tìm thấy phần tử cha mẹ 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
19 và nối cho trẻ. Cuối cùng, bạn xóa hộp đầu vào.

Bạn có thể thậm chí còn điên rồ hơn khi sử dụng đối tượng 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
10 trong pyscript. Chẳng hạn, nó có thể viết mã trông giống như một sự kết hợp của Python và JavaScript bằng cách kết hợp các API của cả hai:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
6

Trong trường hợp này, bạn nhập một vài chức năng từ thư viện tiêu chuẩn Python để tạo các giá trị ngẫu nhiên và bạn cũng tận dụng cú pháp Python, ví dụ, để lặp lại một mảng JavaScript được bọc trong một đối tượng proxy. Vòng lặp đi qua các mục trong danh sách mua sắm, có điều kiện gán một mức giá ngẫu nhiên cho mỗi mục, bật lớp CSS của họ và chọn một màu nền ngẫu nhiên.

API DOM được hiển thị bởi trình duyệt web quá phong phú để phù hợp với hướng dẫn này, nhưng hãy thoải mái mở rộng phần có thể thu gọn bên dưới để tham khảo nhanh các thuộc tính và phương thức quan trọng nhất của lớp 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
03:

Mỗi phần tử HTML có các thuộc tính sau trong JavaScript:

Thuộc tínhSự mô tả
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
22		Một đối tượng giống như danh sách với các tên lớp CSS phần tử CSS
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
23		Một chuỗi có phần tử 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
24 giá trị thuộc tính
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
25		Một đối tượng giống như từ điển với các cặp giá trị khóa tùy chỉnh
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
95		Một chuỗi có nội dung HTML giữa các thẻ mở và đóng
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
18		Một chuỗi có nội dung văn bản giữa các thẻ mở và đóng
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
28		Một đối tượng chứa khai báo kiểu CSS
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
29		Tên chữ hoa của thẻ phần tử HTML

Hầu hết các thuộc tính này hỗ trợ đọc và viết. Ngoài chúng, bạn cũng sẽ tìm thấy các thuộc tính liên quan đến Dom Tree Traversal so với phần tử hiện tại:

Thuộc tínhSự mô tả
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
22		Một đối tượng giống như danh sách với các tên lớp CSS phần tử CSS
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
23		Một chuỗi có phần tử 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
24 giá trị thuộc tính
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
25		Một đối tượng giống như từ điển với các cặp giá trị khóa tùy chỉnh
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
95		Một chuỗi có nội dung HTML giữa các thẻ mở và đóng
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
18		Một chuỗi có nội dung văn bản giữa các thẻ mở và đóng
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
28		Một đối tượng chứa khai báo kiểu CSS

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
29

Tên chữ hoa của thẻ phần tử HTMLSự mô tả
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
22		Một đối tượng giống như danh sách với các tên lớp CSS phần tử CSS
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
23		Một chuỗi có phần tử 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
24 giá trị thuộc tính
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
25		Một đối tượng giống như từ điển với các cặp giá trị khóa tùy chỉnh
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
95		Một chuỗi có nội dung HTML giữa các thẻ mở và đóng

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
18

Tên chữ hoa của thẻ phần tử HTMLSự mô tả
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
22		Một đối tượng giống như danh sách với các tên lớp CSS phần tử CSS
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
23		Một chuỗi có phần tử 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
24 giá trị thuộc tính

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
25

Tên chữ hoa của thẻ phần tử HTMLSự mô tả
Hầu hết các thuộc tính này hỗ trợ đọc và viết. Ngoài chúng, bạn cũng sẽ tìm thấy các thuộc tính liên quan đến Dom Tree Traversal so với phần tử hiện tại:
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
30
Cha mẹ của yếu tố này
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
31
Một đối tượng giống như danh sách của các yếu tố trẻ em ngay lập tức
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
32
Yếu tố con đầu tiên
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
33
Yếu tố con cuối cùng
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
34

Yếu tố tiếp theo trên cùng một cấp cây

Tên chữ hoa của thẻ phần tử HTMLSự mô tả
Hầu hết các thuộc tính này hỗ trợ đọc và viết. Ngoài chúng, bạn cũng sẽ tìm thấy các thuộc tính liên quan đến Dom Tree Traversal so với phần tử hiện tại:
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
30
Cha mẹ của yếu tố này
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
31

Một đối tượng giống như danh sách của các yếu tố trẻ em ngay lập tức

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
32

Yếu tố con đầu tiên

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
33

Yếu tố con cuối cùng

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
7

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
34event listener to an element that should trigger an action. In this case, that element is the button, which you can find with an appropriate CSS selector, and the event name is 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
52:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
8

Dòng thứ hai trong khối mã ở trên thêm người nghe, dường như sẽ hoạt động mà không phát ra bất kỳ lỗi nào. Tuy nhiên, ngay khi bạn thử nhấp vào nút của mình trong trình duyệt, sẽ không có gì xảy ra.

Trình duyệt web mong đợi một cuộc gọi lại JavaScript, nhưng bạn cung cấp cho nó một chức năng Python. Để khắc phục điều này, bạn có thể tạo một đối tượng proxy ra khỏi Python có thể gọi bằng cách sử dụng chức năng có liên quan từ mô -đun 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
53:

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
9

Đó là nó! Bây giờ bạn có thể thay thế thẻ 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
51 của mình bằng một thẻ 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 có mã Python hoàn chỉnh và bạn có thể bắt đầu thưởng thức ứng dụng Pyscript tương tác đầu tiên của mình. Tại đây, cấu trúc tài liệu HTML kết quả:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
0

Mã JavaScript tương đương sẽ có cùng một không gian do gọi cùng một API. Một mặt, sử dụng các đối tượng proxy thêm nhiều ký tự, nhưng mặt khác, Python không cần dấu ngoặc xoăn như JavaScript để phân định mọi khối mã.

Ngoài việc tìm kiếm và thao tác các phần tử HTML với API DOM, bạn có thể thực hiện nhiều thứ thú vị hơn liên quan đến trình duyệt web trong Pyscript. Trong phần tiếp theo, bạn sẽ xem xét kỹ hơn một vài yếu tố còn lại của chương trình Front-end mà bạn thường phải viết mã trong JavaScript.

Giao tiếp với trình duyệt web từ Python

Trong phát triển mặt trước truyền thống, bạn dựa vào công cụ JavaScript nhiều như trên tập hợp các API được cung cấp bởi môi trường thực hiện của bạn, là hai phần riêng biệt của phương trình. Mặc dù cốt lõi của JavaScript tương đối nhỏ và hoạt động khá nhất quán trên các nhà cung cấp khác nhau, cảnh quan của API có thể rất khác nhau tùy thuộc vào nền tảng đích.JavaScript engine as much as on the set of APIs provided by your execution environment, which are two separate parts of the equation. While the core of JavaScript is relatively small and behaves rather consistently across various vendors, the landscape of APIs can be vastly different depending on the target platform.

Bạn có thể sử dụng JavaScript cho mã phía máy chủ đang chạy trong Node.js, mã phía máy khách được thực thi trong trình duyệt web hoặc thậm chí mã nguồn cung cấp năng lượng cho các ứng dụng di động. Nhân tiện, về mặt kỹ thuật, nó có thể chạy Pyscript trong Node.js ở phía sau, tận dụng một số API đặc biệt của nó. Tuy nhiên, trong phần này, bạn sẽ tập trung vào API trình duyệt.

Bánh quy

Làm việc với cookie HTTP trong Vanilla JavaScript mà không cần sự trợ giúp của bất kỳ thư viện bên ngoài nào có thể nhận được một cách khó hiểu vì nó buộc bạn phải phân tích một chuỗi dài chứa thông tin đầy đủ của tất cả các cookie cho một miền nhất định. Ngược lại, việc xác định một cookie mới trong JavaScript yêu cầu kết nối một chuỗi với các thuộc tính mong muốn theo cách thủ công. May mắn thay, Pyscript cho phép bạn sử dụng Python, đi kèm với pin.

Một trong những pin trong tầm tay của bạn là mô -đun 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
56, có thể thực hiện phân tích và mã hóa chuỗi cookie cho bạn. Để phân tích thuộc tính JavaScript từ 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
57, hãy sử dụng lớp 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
58 có sẵn trong Python:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
1

Lớp Python Helper có khả năng phân tích toàn bộ chuỗi với các thuộc tính cookie mà máy chủ thường sẽ gửi đến trình duyệt. Tuy nhiên, trong JavaScript, bạn chỉ nhận được tên và các giá trị tương ứng của cookie không httponly mà không có thuộc tính của chúng.

Sử dụng đoạn mã bên dưới để chỉ định một cookie mới sẽ hết hạn trong một năm cho miền hiện tại. Là một công dân tốt, bạn cũng nên đặt rõ ràng thuộc tính Samesite để tránh dựa vào hành vi mặc định, thay đổi giữa các trình duyệt và phiên bản của họ:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
2

Phải thừa nhận rằng, giao diện của mô -đun này trông khá cũ và không phù hợp với phong cách Pythonic, nhưng nó hoàn thành công việc. Khi bạn chạy mã này và kiểm tra cookie trình duyệt của bạn, bạn sẽ thấy một cookie 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
59 mới được đặt thành True. Bạn có thể fiddle với số giây để xem trình duyệt của bạn có tháo cookie sau một thời gian xác định không.

Bạn có thể tùy chọn tạo chuỗi tiêu đề 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
60 với các thuộc tính bổ sung, một số trong đó được cho phép trong JavaScript:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
3

Mã trên sẽ tạo ra dòng văn bản dài sau đây đại diện cho tiêu đề HTTP, được chia để phù hợp với màn hình của bạn và tránh cuộn ngang:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
4

Bạn có thể tự đặt một cookie như vậy vì nó chỉ định một số thuộc tính nhất định mà aren cho phép trong JavaScript, nhưng có thể nhận được một thuộc tính từ máy chủ web khi tìm nạp một số dữ liệu.

API tìm nạp

Khi thực hiện các yêu cầu HTTP từ trình duyệt web trong JavaScript, bạn đã bị ràng buộc với một số chính sách bảo mật, điều này không mang lại cho bạn nhiều sự tự do như bạn có thể được sử dụng với tư cách là nhà phát triển back-end. Hơn nữa, mô hình không đồng bộ JavaScript, vốn không có chức năng đồng bộ với các chức năng đồng bộ của Python, để tạo các kết nối mạng. Kết quả là, các mô -đun như 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
20 hoặc 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
23 không được sử dụng trong pyscript.security policies, which don’t give you as much freedom as you might be used to as a back-end developer. Furthermore, JavaScript’s inherently asynchronous model doesn’t play well with Python’s synchronous functions for making network connections. As a result, modules like 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
20 or 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
23 are of no use in PyScript.

Pyodide khuyên bạn nên viết các máy khách HTTP theo các API Web như API tìm nạp dựa trên lời hứa. Để gọi API đó từ Python đơn giản hơn, Pyodide cung cấp chức năng trình bao bọc 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
63, hoạt động trong bối cảnh không đồng bộ.

Ví dụ, nếu bạn đang tìm cách thực hiện yêu cầu API REST API để xác thực mình bằng tên người dùng và mật khẩu, thì bạn có thể gọi 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
63, có chữ ký tương tự như hàm JavaScript tựa 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
65:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
5

Từ 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
66, xuất hiện trong một nhận xét ở đầu đoạn mã ở trên, bảo Pyscript chạy mã này không đồng bộ để bạn có thể chờ vòng lặp sự kiện ở phía dưới. Hãy nhớ rằng bạn có thể đặt từ ma thuật này ở bất cứ đâu trong mã của bạn để kích hoạt cùng một hành động, hiện đang giống như sử dụng một câu thần chú. Có lẽ cuối cùng sẽ có một cách rõ ràng hơn để chuyển đổi hành vi này, ví dụ, thông qua một thuộc tính trên thẻ 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9.

Khi bạn gọi 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
68 Coroutine với địa chỉ email và mật khẩu, bạn sẽ thực hiện yêu cầu bài đăng HTTP cho API giả được lưu trữ trực tuyến. Lưu ý rằng bạn tuần tự hóa tải trọng cho JSON trong Python bằng mô -đun 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
69 thay vì đối tượng JavaScript tựa 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
70.

Bạn cũng có thể sử dụng 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
63 để tải xuống các tệp và sau đó lưu chúng vào hệ thống tệp ảo do EMScripten cung cấp trong pyodide. Lưu ý rằng các tệp này sẽ chỉ hiển thị trong phiên trình duyệt hiện tại của bạn thông qua giao diện I/O, nhưng bạn đã giành được chúng trong thư mục 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
72 trên đĩa của bạn:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
6

Trừ khi bạn muốn lưu tệp dưới một tên khác, bạn sử dụng mô -đun 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
73 để trích xuất tên tệp từ URL mà chức năng của bạn sẽ trả về. Đối tượng phản hồi được trả về bởi 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
63 có phương thức 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
75 có thể chờ đợi, bạn sử dụng để lưu nội dung nhị phân vào một tệp mới.

Sau đó, bạn có thể đọc tệp đã tải xuống từ hệ thống tệp ảo và hiển thị nó trên phần tử 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
76 trong HTML:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
7

Bạn cần phải chuyển đổi các byte thô thành văn bản bằng cách sử dụng mã hóa Base64, sau đó định dạng chuỗi kết quả dưới dạng URL dữ liệu trước khi gán nó cho thuộc tính 

$ VERSION='0.20.0'
$ TARBALL="pyodide-build-$VERSION.tar.bz2"
$ GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
$ wget "$GITHUB_URL/$VERSION/$TARBALL"
$ tar -xf "$TARBALL" --strip-components=1 pyodide
3 của phần tử hình ảnh.

Thay vào đó, bạn có thể sử dụng chức năng hoàn toàn đồng bộ trong Pyscript để tìm nạp dữ liệu qua mạng. Điều duy nhất là 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
78 có thể đọc dữ liệu nhị phân:synchronous function in PyScript to fetch data over the network. The only catch is that 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
78 can’t read binary data:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
8

Cuộc gọi đầu tiên này đến 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
78 tìm hiểu văn bản gốc của tài liệu PEP 8, mà bạn lưu trữ trong một biến. Cuộc gọi thứ hai giao tiếp với điểm cuối API REST trả về một đối tượng người dùng ở định dạng JSON, sau đó bạn đã giảm dần về từ điển Python. Cuộc gọi thứ ba tải xuống logo chính thức của SVG, bạn có thể hiển thị trong trình duyệt của mình vì SVG là định dạng dựa trên văn bản.

Khi bạn tìm nạp dữ liệu từ Internet, bạn thường muốn lưu trữ nó để truy cập sau. Các trình duyệt cung cấp một vài khu vực lưu trữ web để lựa chọn, tùy thuộc vào thông tin của bạn phạm vi và tuổi thọ mong muốn của bạn. Lưu trữ cục bộ là lựa chọn tốt nhất của bạn nếu bạn muốn lưu trữ dữ liệu liên tục.

Lưu trữ cục bộ

Trong đoạn mã sau, bạn chào người dùng với một thông báo chào mừng được hiển thị trong một hộp cảnh báo, giải quyết chúng bằng tên đã được lưu trước đó trong bộ lưu trữ cục bộ của trình duyệt. Nếu người dùng lần đầu tiên truy cập trang của bạn, thì bạn sẽ hiển thị hộp thoại nhanh chóng yêu cầu tên người dùng:

$ wget https://pyscript.net/alpha/pyscript.{css,js,py}
9

Để có được kho lưu trữ cục bộ, bạn nhập tham chiếu 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
80 từ JavaScript và sử dụng các phương thức 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
81 và 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
82 để các cặp giá trị khóa tồn tại. Bạn cũng tận dụng toán tử Walrus (
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
83), được giới thiệu trong Python 3.8, để làm cho mã này ngắn gọn hơn và bạn hiển thị địa chỉ URL của cửa sổ trình duyệt.

Được rồi, làm thế nào về một cái gì đó thú vị hơn?

API cảm biến

Các trình duyệt web chạy trên các thiết bị di động như máy tính bảng hoặc điện thoại thông minh để hiển thị API cảm biến, cho phép các lập trình viên JavaScript truy cập vào gia tốc kế của thiết bị, cảm biến ánh sáng xung quanh, con quay hồi chuyển hoặc từ kế nếu nó được trang bị một. Ngoài ra, một số cảm biến có thể được mô phỏng trong phần mềm bằng cách kết hợp các tín hiệu từ nhiều cảm biến vật lý, giảm nhiễu. Một cảm biến trọng lực là một ví dụ tốt.

Bạn có thể kiểm tra bản demo trực tiếp minh họa việc sử dụng cảm biến trọng lực trong Pyscript. Đảm bảo mở liên kết trên thiết bị di động. Ngay khi bạn thay đổi hướng của điện thoại hoặc máy tính bảng, bạn sẽ thấy một trong những tin nhắn này được hiển thị trên màn hình:

  • Chiều ngang ngược chiều kim đồng hồ
  • Chiều ngang theo chiều kim đồng hồ
  • Thẳng đứng thẳng đứng
  • Đảo ngược thẳng đứng
  • Màn hình lên
  • Màn hình xuống
  • Nghiêng

Trong trường hợp thiết bị của bạn không đi kèm với cảm biến trọng lực hoặc bạn có thể truy cập trang web qua kết nối không được mã hóa, bạn sẽ được thông báo về điều đó thông qua cửa sổ bật lên. Ngoài ra, bạn có thể chỉ thấy một màn hình trống.

Để nối vào một cảm biến trên thiết bị của bạn, bạn sẽ cần phải viết một chút mã keo JavaScript vì Pyscript hiện không xuất khẩu thể hiện pyodide mà nó tạo ra vào không gian tên toàn cầu của JavaScript. Nếu có, thì bạn có thể lấy một cái và truy cập các đối tượng proxy Python trong JavaScript với ít rắc rối hơn một chút. Hiện tại, bạn sẽ đi theo một cách khác bằng cách gọi hàm JavaScript từ Python.

Tạo một tệp 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
84 mới và tiếp tục thêm nội dung vào nó. Đầu tiên, xác định thẻ 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
07 trong trang web HTML của bạn và điền vào mã JavaScript sau:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
0

Hàm có một cuộc gọi lại, sẽ là proxy JavaScript cho chức năng Python của bạn. Sau đó, nó kiểm tra xem trình duyệt của bạn có hỗ trợ giao diện 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
86 không và tạo phiên bản cảm biến mới với tần số lấy mẫu là sáu mươi lần mỗi giây. Một cách đọc cảm biến duy nhất là một vectơ ba chiều đại diện cho hướng và độ lớn của trọng lực.

Tiếp theo, triển khai và đăng ký cuộc gọi lại Python trong trình duyệt bằng Pyscript:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
1

Giả sử có một phần tử 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
87 ở đâu đó trên trang của bạn, bạn tìm thấy tài liệu tham khảo của nó bằng bộ chọn CSS và sau đó viết một chuỗi được định dạng với ba thành phần của vectơ trọng lực vào nó sau khi đọc cảm biến. Lưu ý sự cần thiết phải gói cuộc gọi lại Python của bạn trong proxy JavaScript trước khi đăng ký nó dưới dạng người nghe.

Biết hướng của vectơ trọng lực sẽ cho bạn biết điều gì đó về định hướng điện thoại của bạn, điều này có thể hữu ích khi bạn muốn chụp ảnh cấp độ hoặc phát hiện khi bạn chọn thiết bị từ bàn làm việc. Độ lớn của vectơ trọng lực là gia tốc Trái đất, mà bạn có thể sử dụng làm ước tính độ cao của độ cao.

Để làm cho ví dụ này thú vị hơn, hãy tiếp tục và sử dụng Numpy để phát hiện các hướng khác nhau của thiết bị:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
2

Bạn thêm khai báo 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08 để tìm nạp Numpy vào môi trường Pyscript của bạn. Sau đó, bạn nhập thư viện ở đầu thẻ 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 hiện tại của bạn và thực hiện cuộc gọi lại ủy quyền xử lý cho hàm trợ giúp. Hàm 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
90 mới bình thường hóa và làm tròn vectơ trọng lực của bạn để so sánh nó với một vài vectơ đơn vị dọc theo các trục trong hệ tọa độ thiết bị.

Nếu thiết bị của bạn không hỗ trợ cảm biến trọng lực, thì hãy cố gắng xác định các cảm biến khác hoạt động, thì hãy nghĩ về một ý tưởng cho một ứng dụng khác và điều chỉnh mã được hiển thị trong ví dụ này cho phù hợp. Bạn có thể chia sẻ ý tưởng tuyệt vời của bạn trong phần bình luận bên dưới!

Chức năng hẹn giờ

JavaScript thường sử dụng cái gọi là các hàm hẹn giờ để lên lịch gọi lại để chạy một lần trong tương lai hoặc định kỳ mọi số mili giây được chỉ định. Cái sau có thể hữu ích cho nội dung hoạt hình trên trang hoặc bỏ phiếu cho máy chủ để chụp nhanh dữ liệu thay đổi nhanh nhất.

Ví dụ, nếu bạn có ý định trì hoãn việc thực thi chức năng một lần, để hiển thị thông báo nhắc nhở hoặc cửa sổ bật lên sau một thời gian cụ thể, sau đó hãy xem xét sử dụng 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
91 để tạo đối tượng proxy. Pyodide sẽ tự động xử lý nó khi hoàn thành:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
3

Bạn sử dụng chức năng 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
92 từ JavaScript, mong đợi một đối tượng có thể gọi được, chẳng hạn như hàm Python Lambda được bọc trong proxy và số mili giây để chờ trước khi chạy bạn. Tại đây, bạn hiển thị một hộp cảnh báo với một lời nhắc sau ba giây.

Bạn sẽ nhận thấy rằng Pyscript in một giá trị số lên tài liệu HTML sau khi chạy mã ở trên. Nó có giá trị trả về của hàm 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
92, cung cấp một định danh duy nhất của thời gian chờ, bạn có thể tùy chọn hủy với hàm 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
94 tương ứng:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
4

Trong trường hợp này, bạn hủy thời gian chờ bằng định danh duy nhất của nó ngay sau khi lên lịch gọi lại, vì vậy nó không bao giờ chạy.

Có một cặp chức năng JavaScript tương tự có tên 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
95 và 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
96 hoạt động phần lớn giống nhau. Tuy nhiên, các cuộc gọi đến cuộc gọi lại của bạn sẽ được thực hiện nhiều lần trong các khoảng thời gian, ví dụ, cứ sau ba giây trừ đi thời gian thực hiện chức năng của bạn. Nếu chức năng của bạn mất nhiều thời gian hơn để thực thi, thì nó sẽ chạy càng sớm càng tốt vào lần tới, không chậm trễ.

Để sử dụng 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
95 trong pyscript, bạn sẽ cần nhớ kết thúc chức năng gọi lại của mình bằng một cuộc gọi đến 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
98 thay vì 
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
91 để ngăn chặn pyodide xử lý nó sau lần chạy đầu tiên:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
5

Một vài điều đang diễn ra ở đây. Bạn đăng ký một cuộc gọi lại để chạy mỗi giây, đặt nền tài liệu thành màu ngẫu nhiên. Sau đó, sau mười giây, bạn dừng nó bằng cách xóa khoảng thời gian tương ứng. Cuối cùng, để ngăn Pyscript hiển thị số nhận dạng thời gian chờ, bạn gán giá trị trả về 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
92 cho biến giữ chỗ biểu thị bằng dấu gạch dưới (
PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
01), đây là một quy ước tiêu chuẩn trong Python.

Được rồi. Đây là những phần thiết yếu của giao diện trình duyệt web mà bạn có thể sử dụng trong JavaScript, hiện có sẵn cho bạn trong Python, nhờ Pyscript. Tiếp theo, bạn sẽ có cơ hội sử dụng một số khả năng của trình duyệt web để tăng cường dự án Pyscript thực hành của bạn.

Kết hợp sức mạnh của các thư viện Python và JavaScript

Một trong những điểm mạnh của Pyscript là khả năng kết hợp các thư viện hiện có được viết bằng Python và JavaScript. Python có nhiều thư viện khoa học dữ liệu tuyệt vời nhưng không quá nhiều tương đương JavaScript. Mặt khác, JavaScript luôn tự nhiên cho vay để xây dựng các giao diện người dùng hấp dẫn trong trình duyệt.

Trong phần này, bạn sẽ xây dựng một ứng dụng Pyscript kết hợp các thư viện Python và JavaScript với nhau để tạo giao diện người dùng tương tác trong trình duyệt. Cụ thể hơn, bạn sẽ mô phỏng nhiễu sóng hình sin của hai tần số hơi khác nhau, được gọi là nhịp trong âm học. Cuối cùng, bạn sẽ có ứng dụng phía máy khách sau:sine wave interference of two slightly different frequencies, known as a beat in acoustics. By the end, you’ll have the following client-side application:

Giao thoa sóng sin

Có hai thanh trượt, cho phép bạn điều chỉnh các tần số và phần tử 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
02 mô tả sơ đồ của dạng sóng, kết quả là kết quả của hai tín hiệu. Di chuyển các thanh trượt khiến cốt truyện cập nhật trong thời gian thực.

Bạn có thể thực hiện các tính toán trong thư viện Python, và bạn sẽ vẽ kết quả bằng thư viện biểu đồ nguồn mở JavaScript. Nó đáng chú ý rằng biểu đồ.js không phải là một số đối thủ được trả tiền, nhưng nó miễn phí và khá đơn giản để sử dụng, vì vậy bạn sẽ gắn bó với nó ngay bây giờ.

HTML và CSS

Bước đầu tiên, bạn sẽ cần phải giàn giáo cấu trúc tài liệu HTML của mình, tạo kiểu theo CSS và bao gồm một số mã dễ nh trong số cần thiết. Bởi vì ví dụ này liên quan nhiều hơn một chút so với những gì bạn đã thấy trước đó trong hướng dẫn này, nên việc giữ mã Python, JavaScript và CSS trong các tệp riêng biệt và liên kết chúng trong HTML. Lưu mã sau trong một tệp mới có tên 

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
84:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
6

Bạn bao gồm các tệp pyscript thông thường trong tiêu đề HTML của bạn, thư viện biểu đồ.js được phục vụ từ bảng kiểu JSDELIVR và bảng kiểu CSS tùy chỉnh mà bạn sẽ lưu trữ cục bộ. Bạn cũng liệt kê Numpy và một mô -đun trợ giúp tùy chỉnh, mà bạn đã xây dựng trước đó, như các phụ thuộc của bạn trong thẻ 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
08. Ở dưới cùng của tài liệu, bạn sẽ tìm nguồn mô -đun Python cốt lõi và mã vẽ đồ thị trong JavaScript.

Ghế kiểu CSS tùy chỉnh của bạn đảm bảo một chút đệm xung quanh cơ thể tài liệu và cung cấp cho khung vẽ một kích thước cố định:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
7

Hãy nhớ đặt các quy tắc kiểu tùy chỉnh của bạn sau khi biểu định kiểu pyscript trong HTML để có hiệu ứng. Bởi vì trình duyệt đọc tài liệu từ trên xuống dưới, bất cứ điều gì tiếp theo có thể ghi đè các quy tắc trước đó.

Với lớp trình bày ngoài đường, đã đến lúc chuyển sự chú ý của bạn sang mã âm mưu trong một giây.

Mã JavaScript

Để sử dụng biểu đồ.js, bạn cần tạo một thể hiện 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
05 và truyền dữ liệu của bạn cho nó tại một số điểm. Mặc dù bạn chỉ cần tạo biểu đồ một lần, bạn sẽ cập nhật dữ liệu của mình nhiều lần, vì vậy bạn có thể xác định chức năng gọi lại để sử dụng lại logic đó:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
8

Chức năng cấu trúc biểu đồ mong đợi thuộc tính 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
82 của phần tử 
PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
02 nơi cốt truyện của bạn sẽ xuất hiện và đối tượng cấu hình mô tả giao diện của biểu đồ. Chức năng gọi lại của bạn cũng có hai đối số, đó là các giá trị X và Y của chuỗi dữ liệu để vẽ. Những điểm dữ liệu này đến từ mã Python của bạn, mà bạn sẽ kiểm tra ngay bây giờ.

Mã Python

Có hai tệp có mã nguồn Python trong ứng dụng này. Một là mô -đun tiện ích với hàm trợ giúp có thể tạo ra các hàm sóng có tần số, biên độ và pha mong muốn. Đồng thời, tệp Python khác là lớp bộ điều khiển của ứng dụng của bạn, nhập khẩu trước.

Tại đây, mô -đun tiện ích được mô tả một lần nữa để bạn thuận tiện:

$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
0

Mặc dù bạn đã sử dụng chức năng này trước đây, mô -đun bộ điều khiển có thể cần một vài từ giải thích, vì nó chứa một lượng mã hợp lý:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
0

Ở đây, một sự cố về những gì mã này làm từng dòng:

  • Dòng 3 và 4 Nhập mã từ các thư viện của bên thứ ba cần thiết. import code from the required third-party libraries.
  • Dòng 6 và 7 Nhập các chức năng tùy chỉnh của bạn từ các mô -đun tiện ích Python và JavaScript mà bạn đã liên kết trong HTML trước đó. import your custom functions from Python and JavaScript utility modules that you linked in HTML before.
  • Các dòng 9 và 10 truy vấn tài liệu HTML với các bộ chọn CSS để tìm hai phần tử trượt và lưu chúng theo các biến để sử dụng sau. query the HTML document with CSS selectors to find the two slider elements and save them in variables for later use.
  • Các dòng 12 đến 14 tính toán các giá trị x của chuỗi thời gian của bạn, có thời lượng một giây rưỡi được lấy mẫu tám trăm lần mỗi giây. compute the x values of your time series, which has a duration of one and a half seconds sampled eight hundred times per second.
  • Các dòng 16 đến 19 Xác định hàm gọi lại đáp ứng với các thay đổi giá trị của một trong các thanh trượt của bạn, đại diện cho tần số sóng. Hàm cập nhật nhãn tương ứng trong HTML và gọi một hàm khác để tính toán lại dạng sóng và cập nhật biểu đồ. define a callback function responding to value changes of one of your sliders, which represent wave frequencies. The function updates the corresponding label in HTML and calls another function to recalculate the waveform and update the plot.
  • Các dòng 21 đến 26 Xác định hàm Trình trợ giúp, đọc các giá trị tần số hiện tại từ các thanh trượt, tạo các hàm sóng mới và thêm chúng lại với nhau trong thời gian thời gian quy định. Tiếp theo, hàm trợ giúp chuyển đổi các giá trị X và Y kết quả thành các proxy JavaScript với pyodide tựa 
    PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
    08 và chuyển chúng đến một cuộc gọi lại được xác định trong mô -đun JavaScript của bạn.     define a helper function, which reads the current frequency values from the sliders, generates new wave functions, and adds them together for the specified time duration. Next, the helper function converts the resulting x and y values to JavaScript proxies with Pyodide’s 
    PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
    08, and passes them to a callback defined in your JavaScript module.
  • Các dòng 28 đến 30 bọc trình nghe sự kiện 
    PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
    09 của bạn trong proxy JavaScript và đăng ký nó dưới dạng gọi lại trong cả hai thanh trượt để trình duyệt web sẽ gọi nó khi bạn thay đổi giá trị của thanh trượt.     wrap your 
    PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
    09 event listener in a JavaScript proxy and register it as a callback in both sliders so that the web browser will call it when you change the sliders’ values.
  • Dòng 32 gọi hàm trợ giúp 
    PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
    10 để hiển thị biểu đồ ban đầu của dạng sóng khi tải trang.     calls the 
    PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
    10 helper function to show the initial plot of the waveform when the page loads.

Ngoài ra, nếu bạn muốn sử dụng matplotlib để vẽ sơ đồ để loại bỏ JavaScript khỏi mã của mình, thì bạn có thể tạo một con số và sử dụng phương thức Pyscript tựa 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
11 như thế này:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
1

Trình xây dựng lớp 

PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
81 lấy thuộc tính 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
82 của phần tử HTML, thường là 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
58.

Ví dụ, hãy thoải mái nâng cao dự án này, bằng cách biến sóng âm được tạo thành luồng âm thanh và phát nó trong trình duyệt của bạn. Nó có một âm thanh đặc biệt! Mặt khác, nếu bạn hài lòng với dự án ở dạng hiện tại, thì bạn sẽ học cách chia sẻ miễn phí với bất kỳ ai trên thế giới, ngay cả khi họ không có trình thông dịch Python được cài đặt trên máy tính của họ.

Xuất bản ứng dụng Pyscript của bạn trên các trang GitHub

Vì Pyscript cho phép bạn chạy mã hoàn toàn trong trình duyệt web của khách hàng, bạn không cần một máy chủ back-end để thực hiện mã đó cho bạn. Do đó, phân phối các ứng dụng Pyscript sôi sục để lưu trữ một loạt các tệp tĩnh để trình duyệt để tiêu thụ. Các trang GitHub là một cách nhanh chóng và đơn giản để biến bất kỳ kho lưu trữ git nào của bạn thành một trang web miễn phí.static files for the browser to consume. GitHub Pages are a quick and straightforward way to turn any of your Git repositories into a website for free.

Bạn sẽ sử dụng lại mã của mình từ phần trước, vì vậy trước khi đi xa hơn, hãy đảm bảo rằng bạn có cấu trúc thư mục sau:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
2

Để bắt đầu sử dụng các trang GitHub, hãy đăng nhập vào tài khoản GitHub của bạn và tạo một kho lưu trữ công khai mới có tên 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
15, để lại tất cả các tùy chọn mặc định. Bạn không muốn GitHub tạo bất kỳ tệp nào cho bạn trong giai đoạn này, bởi vì chúng sẽ mâu thuẫn với mã bạn đã có trên máy tính của bạn. Hãy lưu ý URL kho lưu trữ độc đáo của bạn sau đó. Nó sẽ trông giống như thế này:public repository named 
PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
15, leaving all the default options. You don’t want GitHub to create any files for you at this stage, because they would conflict with the code you already have on your computer. Take note of your unique repository URL afterward. It should look something like this:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
3

Bây giờ, hãy mở thiết bị đầu cuối và thay đổi thư mục làm việc của bạn thành thư mục gốc dự án. Sau đó, khởi tạo một kho lưu trữ Git cục bộ mới, thực hiện cam kết đầu tiên của bạn và đẩy các tệp vào kho lưu trữ từ xa trên GitHub bằng URL duy nhất của bạn:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
4

Bây giờ bạn có thể truy cập cài đặt kho lưu trữ GitHub của mình và bật các trang GitHub bằng cách chọn nhánh và thư mục để lưu trữ. Vì bạn chỉ có nhánh 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
16, bạn muốn chọn nó từ menu thả xuống. Bạn cũng nên để lại thư mục gốc 
PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
17 đã chọn và nhấp vào nút Lưu để xác nhận. Khi bạn làm, GitHub sẽ cần một vài phút cho đến khi bạn có thể xem trang web trực tiếp của mình.

Địa chỉ URL công khai của kho lưu trữ của bạn sẽ tương tự như thế này:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
5

Xin chúc mừng! Bây giờ bạn có thể chia sẻ URL này với bất kỳ ai có trình duyệt web hiện đại và họ sẽ có thể chơi với ứng dụng Pyscript của bạn trực tuyến. Bước tiếp theo cho bạn sau khi đạt đến điểm này là bao gồm các tài nguyên được thu nhỏ trong kho lưu trữ của bạn và cập nhật các đường dẫn tương đối trong tài liệu HTML để làm cho thời gian tải nhanh hơn.

Đóng góp cho Pyscript

Tham gia vào một dự án nguồn mở có thể đáng sợ. Tuy nhiên, vì Pyscript là một khung trẻ như vậy, hãy khai thác mã nguồn của nó và loay hoay với nó thực sự khó khăn. Tất cả những gì bạn cần là một máy khách Git, một phiên bản gần đây của Node.js và Trình quản lý gói 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
18.

Khi bạn có ba công cụ đó được định cấu hình, hãy bắt đầu bằng cách nhân bản kho lưu trữ Pyscript từ GitHub và cài đặt các phụ thuộc cần thiết vào thư mục 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
19 cục bộ:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
6

Bạn sẽ chạy các lệnh này chỉ một lần vì bạn đã thắng được thêm bất kỳ sự phụ thuộc mới nào vào dự án. Tiếp theo, tìm tệp có tên 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
20 trong thư mục con 
PS> python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
41, mở nó trong trình chỉnh sửa mã yêu thích của bạn và đổi tên thẻ 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
9 HTML tùy chỉnh được liên kết với lớp 
PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
23 thành, ví dụ, 
PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
24:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
7

Hãy nhớ rằng tên thẻ tùy chỉnh phải chứa một dấu gạch nối để phân biệt chúng với các tên thông thường. Sau đó, trong thiết bị đầu cuối của bạn, thay đổi thư mục làm việc hiện tại thành thư mục con 

PS> foreach ($ext in "css", "js", "py") {
>> wget "https://pyscript.net/alpha/pyscript.$ext" -o "pyscript.$ext"
>> }
25 trong dự án nhân bản và chạy lệnh build:

Điều này sẽ tạo ra một tệp 

PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='https://github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
4 mới, trong số một số khác, bạn có thể lưu trữ cục bộ thay vì liên kết với bản dựng chính thức trên CDN. Khi bạn làm như vậy, bạn sẽ có thể nhúng mã Python vào thẻ sáng bóng mới của bạn:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, World!title>
  <link rel="stylesheet" href="/pyscript.css" />
  <script defer src="/pyscript.js">script>
  <py-config>
    - autoclose_loader: true
    - runtimes:
      -
        src: "/pyodide.js"
        name: pyodide-0.20
        lang: python
  py-config>
head>
<body>
  <py-script>print("Hello, World!")py-script>
body>
html>
8

Đáng kinh ngạc! Bây giờ, bạn có thể đưa cái này vào GitHub và mở yêu cầu kéo. Đùa thôi! Đó là một ví dụ đồ chơi, nhưng nó đã chứng minh một vài bước cơ bản để làm việc với Pyscript ở cấp độ thấp hơn một chút. Ngay cả khi bạn không có ý định thực hiện bất kỳ đóng góp nào cho Pyscript, việc duyệt qua mã nguồn của nó có thể giúp bạn hiểu rõ hơn về hoạt động bên trong của nó.

Sự kết luận

Bây giờ bạn có một ý tưởng khá tốt về Pyscript là gì, nó hoạt động như thế nào và những gì nó cung cấp. Bạn có thể giảm thiểu một số thiếu sót hiện tại của nó và thậm chí tùy chỉnh nó theo ý thích của bạn. Ngoài ra, bạn đã thấy một số ví dụ thực hành thể hiện các tính năng và ứng dụng thực tế của khung.

Trong hướng dẫn này, bạn đã học được cách:

  • Xây dựng các ứng dụng phía trước tương tác bằng Python và JavaScriptinteractive front-end apps using Python and JavaScript
  • Chạy mã Python hiện có trong trình duyệt webweb browser
  • Tái sử dụng cùng một mã ở phía sau và phần cuốiback-end and the front-end
  • Gọi các chức năng Python từ JavaScript và cách khácJavaScript and the other way around
  • Phân phối các chương trình Python với các phụ thuộc bằng khôngzero dependencies

Pyscript chắc chắn là một công nghệ mới thú vị cho phép bạn chạy mã Python trong trình duyệt web nhờ Pyodide và WebAssugging. Mặc dù đã có những nỗ lực trước đó, Pyscript là khung đầu tiên chạy một trình thông dịch Cpython chính hãng trong trình duyệt, cho phép sử dụng lại các chương trình Python hiện có mà không có sửa đổi.Pyodide and WebAssembly. While there have been earlier attempts at this, PyScript is the first framework that runs a genuine CPython interpreter in the browser, making it possible to reuse existing Python programs with few to no modifications.

Bạn nghĩ gì về Pyscript? Nó sẽ bao giờ thực sự thay thế JavaScript trong trình duyệt? Bạn sẽ thử nó trong dự án tiếp theo của bạn? Để lại một bình luận dưới đây!

Bạn có thể chạy Python trong Chrome không?

Chạy chương trình Python bằng cách sử dụng tiện ích mở rộng Chrome, phương thức rất đơn giản, hãy truy cập cửa hàng trang web Chrome để tải xuống phần mở rộng Python Shell Chrome.Nhấp vào Thêm vào Chrome để cài đặt và thêm tiện ích mở rộng vào trình duyệt.Sau khi tiện ích mở rộng được cài đặt, nhấp vào nó để khởi chạy nó.Go to the chrome web store to download the Python Shell Chrome Extension. Click on add to chrome to install and add the extension to the browser. After the extension is installed, click on it to launch it.

Bạn có thể sử dụng Python trong trang web HTML không?

Bạn có thể sử dụng Python trong mã HTML của mình.Bạn không cần biết JavaScript.Pyscript không chỉ là HTML, nó mạnh hơn, bởi vì hệ sinh thái phong phú và dễ tiếp cận của các thư viện Python.. You don't need to know javascript. PyScript is not just HTML only, it is more powerful, because of the rich and accessible ecosystem of Python libraries.

Làm thế nào để bạn chạy mã python trên một trang web?

Ngôn ngữ Python sử dụng CGI để thực thi trên trang web.Bạn phải nhập thư viện "CGITB" cho ngôn ngữ Python để thực thi và hiển thị kết quả trong trình duyệt web.Ngôn ngữ Python sử dụng các tuyên bố nhỏ làm cho nó phù hợp cho các dự án web lớn hoặc nhỏ.import the "cgitb" library for the Python language to execute and display the results in a Web browser. The Python language uses small statements that make it suitable for large or small Web projects.

programming python Brython Pyscript GitHub Py HTML Skulpt

Bài Viết Liên Quan

Phòng khám trung nguyện ở bình đại bến tre năm 2024
Phòng khám trung nguyện ở bình đại bến tre năm 2024

mẹo hay
Cường hóa lên thẳng 15 trong nháy mắt năm 2024
Cường hóa lên thẳng 15 trong nháy mắt năm 2024

mẹo hay
Cải lương chi bảo là gì năm 2024
Cải lương chi bảo là gì năm 2024

là ai Hỏi Đáp Là gì
Top hãng mặt nạ nội địa trung quốc năm 2024
Top hãng mặt nạ nội địa trung quốc năm 2024

mẹo hay Top List Top
Giải hóa 8 bài nồng độ dung dịch năm 2024
Giải hóa 8 bài nồng độ dung dịch năm 2024

mẹo hay
Goh là viết tắt của gì trong tiếng anh năm 2024
Goh là viết tắt của gì trong tiếng anh năm 2024

là ai Học Tốt Tiếng anh GOH container Container lạnh
Bao cáo đầu tư mua đất để làm văn phòng năm 2024
Bao cáo đầu tư mua đất để làm văn phòng năm 2024

mẹo hay
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024

là ai Hỏi Đáp Là gì
Tìm hiểu chung về văn bản nghị luận năm 2024
Tìm hiểu chung về văn bản nghị luận năm 2024

mẹo hay
Sử lý lỗi không lăng được chuột trong sketchup năm 2024
Sử lý lỗi không lăng được chuột trong sketchup năm 2024

mẹo hay Công Nghệ Chuột
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
Bài tập tìm hằng số cân bằng hoá 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Băn khoăn có nghĩa là gì năm 2024
Băn khoăn có nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024

mẹo hay
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Bánh
Họ tiếng nhật của bạn là gì năm 2024
Họ tiếng nhật của bạn là gì năm 2024

là ai Hỏi Đáp Là gì
Ý nghĩa của header from top là gì năm 2024
Ý nghĩa của header from top là gì năm 2024

mẹo hay Hỏi Đáp Là gì Top List Top Header la gì Footer la gì
Tự học tiếng anh như thế nào hiệu quả năm 2024
Tự học tiếng anh như thế nào hiệu quả năm 2024

mẹo hay Hỏi Đáp Thế nào Học Tốt Học Tiếng anh Học tiếng Anh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Khỏe Đẹp Cơ thể
Tuổi đinh mão xây nhà năm nào tốt năm 2024
Tuổi đinh mão xây nhà năm nào tốt năm 2024

mẹo hay Xây Đựng Xây Nhà
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
Khoán chi đến sản phẩm cuối cùng là gì năm 2024

là ai Hỏi Đáp Là gì

Quảng Cáo

Có thể bạn quan tâm

Các phương pháp hóa học về nguyên tử năm 2024
1 tháng trước . bởi ArchaeologicalParliament
Điều nặng tiếng nhẹ là phương châm gì năm 2024
2 tháng trước . bởi ManlyPublisher
Poodle standard khổng lồ giá bao nhiêu năm 2024
2 tháng trước . bởi NonprofitApparatus
Bài tập trắc nghiệm phương trình chứa căn lớp 10 năm 2024
2 tháng trước . bởi CivilDiver
Sữa rửa mặt whoo đỏ review năm 2024
2 tháng trước . bởi UncertainAuthority
Dđộng mạch và tĩnh mạch khác nhau như thế nào năm 2024
2 tháng trước . bởi FoamingSharpness
Bài tập giới hạn của hàm số mathvn năm 2024
2 tháng trước . bởi UnfocusedBallet
Giải bài tập công nghệ 7 trong vbt bài 31 năm 2024
2 tháng trước . bởi FundamentalAirtime
Bóng đèn cực tím 1m2 công suất bao nhiêu watt năm 2024
2 tháng trước . bởi TrackingTrilogy
Cơ sở của giá trị hàng hóa là gì năm 2024
2 tháng trước . bởi Fast-foodLineage

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Banner cỡ lớn treo ngoài đường tiếng anh là gì năm 2024
9 giờ trước
Top hãng mặt nạ nội địa trung quốc năm 2024
3 ngày trước
Giải hóa 8 bài nồng độ dung dịch năm 2024
5 ngày trước
Cường hóa lên thẳng 15 trong nháy mắt năm 2024
2 ngày trước
Goh là viết tắt của gì trong tiếng anh năm 2024
6 ngày trước
Phòng khám trung nguyện ở bình đại bến tre năm 2024
13 giờ trước
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
1 tuần trước
Cải lương chi bảo là gì năm 2024
3 ngày trước
Bao cáo đầu tư mua đất để làm văn phòng năm 2024
1 tuần trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.