programming python

Trình duyệt Python

PyScript là một framework hoàn toàn mới đã gây ra rất nhiều hứng thú khi Peter Wang, CEO và đồng sáng lập của Anaconda, Inc. , đã tiết lộ nó trong bài phát biểu quan trọng của mình tại PyCon US 2022. Mặc dù dự án này chỉ là một thử nghiệm trong giai đoạn phát triển ban đầu, nhưng mọi người trên mạng xã hội dường như đã yêu thích 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 tạo

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

Xây dựng các ứng dụng giao diện người dùng tương tác bằng Python và JavaScript
Chạy mã Python hiện có trong trình duyệt web
Sử dụng lại cùng một mã trên back-end và front-end
Gọi các hàm Python từ JavaScript và ngược lại
Phân phối các chương trình Python không phụ thuộc

Để 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ề JavaScript và lập trình front-end nói chung. Đồng thời, bạn sẽ có thể làm theo tốt ngay cả khi bạn chưa từng thực hiện bất kỳ công việc phát triển web nào trước đây. Rốt cuộc, đó là toàn bộ ý tưởng đằng sau PyScript

Tải xuống miễn phí. Nhận một chương mẫu từ CPython Internals. Hướng dẫn về Trình thông dịch Python 3 chỉ cho bạn cách mở khóa hoạt động bên trong của ngôn ngữ Python, biên dịch trình thông dịch Python từ mã nguồn và tham gia phát triển CPython

từ chối 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ỉ vài tuần sau khi có thông báo chính thức về PyScript. Tại thời điểm viết bài, bạn có thể thấy cảnh báo sau được hiển thị nổi bật trên trang chủ của khung

Xin lưu ý rằng PyScript rất alpha và đang được phát triển mạnh mẽ. 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ứ thay đổi thường xuyên. Chúng tôi khuyến khích mọi người chơi và khám phá bằng 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 không 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ố thứ có thể không hoạt động vào thời điểm bạn đọc nó, 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, do lịch sử tương đối ngắn của PyScript. Vì là phần mềm mã nguồn mở nên bạn có thể xem qua lịch sử cam kết Git của nó trên GitHub. Khi thực hiện, bạn sẽ thấy rằng Fabio Pliger từ Anaconda, người sáng tạo 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. Đó là chỉ hơn hai tháng trước khi nó được công bố rộng rãi với thế giới vào ngày 30 tháng Tư

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

Loại bỏ các quảng cáo

Bắt đầu với PyScript

Đến cuối phần này, bạn sẽ có cái nhìn toàn cảnh về framework và các khối xây dựng của nó, bao gồm cả cách chúng hoạt động cùng nhau để đưa Python vào trình duyệt của bạn. Bạn sẽ biết cách chọn 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

Quấn đầu quanh PyScript

Bạn có thể tự hỏi chính xác PyScript là gì. Cái tên này có lẽ là một nỗ lực thông minh nhằm tiếp thị nó như một sự thay thế cho JavaScript trong trình duyệt, nhưng 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. Đây là cách PyScript hiện đang được quảng cáo trên hồ sơ Twitter của nó

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 kỳ ai muốn học viết mã, kể cả trẻ em. Khung đạt được mục tiêu đó bằng cách không yêu cầu bất kỳ quy 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 và trình duyệt hiện có của bạn. 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 xem tệp README của PyScript, bạn sẽ thấy phần tóm tắt sau đây và phần 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 làm cho web trở thành một nơi thân thiện, dễ hack, nơi bất kỳ ai cũng có thể tạo ra các ứng dụng tương tác và thú vị
[…]
PyScript là một siêu dự án nhằm mục đích kết hợp nhiều công nghệ mở thành một khung cho phép người dùng tạo các ứng dụng trình duyệt tinh vi bằng Python. Nó tích hợp hoàn hảo 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 cho 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 vui nhộn. JSFiddle là trình soạn thảo trực tuyến của JavaScript thường được sử dụng để chứng minh giải pháp cho một vấn đề nhất định trên các diễn đàn như StackOverflow

Hơn nữa, trang chủ của 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 của HTML và sức mạnh của Pyodide, WASM và các công nghệ web hiện đại. Khung PyScript cung cấp cho người dùng ở mọi cấp độ kinh nghiệm quyền truy cập vào ngôn ngữ lập trình dễ hiểu, 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 Python hiện có của mình để bước vào thế giới phát triển front-end, hạ thấp rào cản gia nhập và làm cho nó dễ tiếp cận hơn. Nhưng có nhiều lợi ích khác khi sử dụng PyScript mà bạn sẽ tìm hiểu 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 sử dụng khung Svelte, được tạo kiểu bằng Tailwind CSS và đi kèm với tổng số. js. Theo một trong những nhận xét trong cam kết Git ban đầu, dự án 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ể thực hiện được nếu không xây dựng dựa trên phiên bản gần đây của Pyodide—một trình thông dịch CPython được biên dịch bằng emscripten cho WebAssembly, 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 đóng gói mã soạn sẵn cần thiết, nếu không thì bạn phải tự nhập bằng JavaScript

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

Pyodide và WebAssembly là gì?Hiển thị/Ẩn

Đã 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à các trình duyệt web có thể hiểu được

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 thành một đoạn mã JavaScript tương tự, trong khi Brython là trình thông dịch Python được sắp xếp hợp lý được triển khai trong JavaScript. Những công cụ này và các công cụ tương tự kém lý tưởng hơn vì chúng dựa trên thứ gì đó giả vờ là thời gian chạy Python chính hãng

Pyodide thì khác 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 thi mã gần như gốc. Bạn có thể coi WebAssembly là "ngôn ngữ lập trình" thứ hai mà các trình duyệt hiểu được

WebAssugging là một máy ảo chính thức 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 WebAssembly, thì bạn sẽ không tìm thấy Python ở đó. Bạn có đoán được tại sao không?

Python là một ngôn ngữ được giải thích, không đi kèm với trình biên dịch tiêu chuẩn có thể nhắm mục tiêu 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ó nằm trong trình duyệt và diễn giải mã Python giống như nó 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ó một sự khác biệt nhỏ về hiệu suất. Pyodide và WebAssembly 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 việc tích hợp giữa Python và trình duyệt web trở nên đơn giản hơn, PyScript định nghĩa một số Thành phần Web và các thành phần tùy chỉnh, chẳng hạn như

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

1 và

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

2, mà bạn có thể nhúng trực tiếp vào HTML của mình. Nếu bạn cảm thấy phiền vì dấu gạch nối trong các tên thẻ tùy chỉnh này, thì đừng đổ lỗi cho PyScript. Đặc tả HTML thực thi nó để tránh xung đột tên giữa các Thành phần Web và các phần tử HTML trong tương lai

Còn chần chừ gì nữa, đã đến lúc viết

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

3 đầu tiên của bạn bằng PyScript

Viết “Xin chào, thế giới” đầu tiên của bạn. ” trong PyScript

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

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

4 và tận dụng hai tệp bắt buộc được lưu trữ trên trang chủ của PyScript




  
  
  Hello, World!
  
  


  print["Hello, World!"]

Tệp đầu tiên,

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

5, cung cấp kiểu dáng mặc định cho các thành phần trực quan của PyScript mà bạn sẽ khám phá sau, cũng như màn hình giật gân của trình tải. Tệp thứ hai,

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

6, chứa JavaScript khởi động thời gian chạy Python và thêm các phần tử tùy chỉnh như

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

1, có thể chứa các hướng dẫn Python, chẳng hạn như lệnh gọi hàm

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

Với thiết lập này, bạn không cần khởi động 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 trong trình duyệt web yêu thích của bạn

PyScript Xin chào, Thế giới

Xin chúc mừng. Bạn vừa tạo ứng dụng PyScript đầu tiên của mình, ứng dụng này sẽ hoạt động trên mọi trình duyệt web hiện đại, ngay cả trên Chromebook đời đầu mà không cần cài đặt trình thông dịch Python. Theo đúng nghĩa đen, bạn có thể sao chép tệp HTML của mình vào ổ USB và chuyển 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ọ

Ghi chú. PyScript chỉ được thử nghiệm trên Google Chrome. Thật không may, điều này có nghĩa là có thể có những khác biệt nhỏ trong hành vi mã của bạn trên các trình duyệt web khác nhau, điều chưa từng có trong quá trình phát triển Python truyền thống

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

Loại bỏ các quảng cáo

Tìm nạp 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, sẽ mất vài giây để tải trước khi hiển thị Hello, World. trong cửa sổ. PyScript phải tìm nạp hàng chục tài nguyên bổ sung từ jsDelivr CDN, Mạng phân phối nội dung miễn phí của JavaScript dành 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 tổng cộng hơn 20 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 mình miễn là bạn đã mở tệp HTML của mình ít nhất một lần

Việc dựa vào CDN để phân phối 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ỡ. Trước đây đã có trường hợp CDN ngừng hoạt động, gây ra sự ngừng hoạt động của các doanh nghiệp trực tuyến lớn. Vì PyScript đang trên đà phát triển, CDN luôn phục vụ bản dựng alpha mới nhất, điều này đôi khi có thể mang lại thay đổi lớn. Ngược lại, CDN đôi khi có thể cần thời gian để theo kịp GitHub, do đó, nó có thể đang phục vụ mã lỗi thời

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

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ữ của 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áy chủ HTTP cục bộ được tích hợp ngay trong Python bằng cách đưa ra lệnh sau trong thư mục chứa 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 [//[::]:8000/] ...

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

Theo mặc định, nó sẽ khởi động một máy chủ lắng nghe các yêu cầu HTTP trên tất cả các giao diện mạng, bao gồm cả máy chủ cục bộ và số cổng 8000. Bạn có thể điều chỉnh cả địa chỉ và số cổng bằng 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='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide

9 chẳng hạn

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

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

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

6 và

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

42 vào một thư mục chứa 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, tương đương với nó 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> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide

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

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

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

42 vì tập lệnh bootstrap sẽ cố tìm nạp nó từ địa chỉ miền của chính nó, đây sẽ là địa chỉ máy chủ cục bộ của bạn

Ghi chú. Ngoài ra, bạn có thể lấy phiên bản rút gọn của tập lệnh bootstrap bằng bản đồ nguồn tùy chọn để giảm kích thước tải xuống hơn nữa. Bản đồ nguồn có thể cho phép bạn khôi phục mã nguồn từ dạng rút gọn của nó, điều này rất hữu ích trong quá trình gỡ lỗi

Đừng 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 tệp được lưu trữ trực tuyến

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

Tại đây, bạn giả định vị trí của các tệp tài nguyên đó bên cạnh tệp HTML của mình, nhưng bạn cũng có thể tạo một hoặc nhiều thư mục con cho các nội dung đó để sắp xếp mọi thứ

Bạn đã gần tới. Tuy nhiên, nếu bạn điều hướng trình duyệt của mình đến máy chủ cục bộ ngay bây giờ, thì trình duyệt 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ẽ khắc phục điều đó trong phần tiếp theo

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

Bây giờ bạn đã làm cho PyScript hoạt động ngoại tuyến, đã đến lúc thực hiện 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 có tên là

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

44, cho phép bạn chỉ định một URL có phiên bản Pyodide mong muốn

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

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

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

45 để cung cấp URL có 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 sau giây lát. Trong khối mã ở trên,

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

46 chỉ ra một đường dẫn liên quan đến địa chỉ gốc của máy chủ HTTP cục bộ của bạn, ví dụ: địa chỉ này sẽ mở rộng thành

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

Để có danh sách cập nhật các tệp còn lại mà trình duyệt của bạn sẽ tải xuống từ CDN hoặc tải từ bộ đệm của nó, bạn có thể truy cập các công cụ phát triển web và chuyển sang tab Mạng trước khi làm mới trang. Tuy nhiên, rất có thể là cuối cùng bạn sẽ cần thêm một số tệp hoặc tên của chúng có thể thay đổi trong tương lai, vì vậy việc kiểm tra lưu lượng mạng sẽ nhanh chóng trở nên phiền toái.

Vì mục đích phát triển, có thể thuận tiện hơn khi tải xuống tất cả các tệp của bản phát hành Pyodide và sau đó quyết định xem ứng dụng của bạn thực sự cần những tệp nào trong số đó. Vì vậy, nếu bạn không ngại tải xuống vài trăm megabyte, thì hãy lấy bản phát hành tarball từ GitHub và giải nén nó vào thư mục của ứng dụng

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

3 của bạn

các cửa sổ
Linux + macOS

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

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

Đừng lo lắng nếu các lệnh trên không hoạt động 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

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

49 theo cách thủ công

Ghi chú. Bản phát hành tarball của Pyodide quá lớn vì nó bao gồm nhiều thư viện phổ biến của bên thứ ba, đặc biệt hữu ích trong khoa học dữ liệu, được biên dịch trước cho WebAssugging

Miễn là mọi thứ suôn sẻ, 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 mình

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

Như bạn có thể thấy, PyScript là sự kết hợp của Python, JavaScript, WebAssembly, CSS và HTML. Trên thực tế, bạn sẽ thực hiện phần lớn lập 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 cho phép bạn kiểm soát chi tiết hơn nhiều đối với các phiên bản của 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ể xem nhật ký thay đổi. Ví dụ, Pyodide 0. 20. 0, được sử dụng trong hướng dẫn này, được xây dựng trên CPython 3. 10. 2

Khi nghi ngờ, bạn luôn có thể tự xác minh phiên bản Python đang chạy trong trình duyệt của mình, khi bạn tìm hiểu tiếp theo

Loại bỏ các quảng cáo

Xác minh phiên bản Python 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ã. Quay 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='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide

3 bằng đoạn mã sau

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

Nó dựa trên mô-đun

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

81, được tự động đưa vào PyScript. Bạn có thể sử dụng nó để truy cập API JavaScript của Pyodide trực tiếp từ Python trong trường hợp PyScript không cung cấp lớp trừu tượng của riêng nó 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 [//[::]:8000/] ...

Bạn nhập mô-đun

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

82 từ thư viện chuẩn để kiểm tra hằng số

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

83 rồi in ra 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 bằng thứ gì đó như thế này

Trăn 3. 10. 2 [chính, ngày 9 tháng 4 năm 2022, 20. 52. 01] […]

Đó là những gì bạn thường thấy khi chạy 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 thua xa 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ó để ý dấu chấm phẩy [

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

84] trong các ví dụ trên không?

Việc sử dụng dấu chấm phẩy trong mã Python là rất hiếm và thường bị các Pythonistas dày dạn kinh nghiệm phản đối. Tuy nhiên, biểu tượng không phổ biến này giúp khắc phục sự cố với khoảng trắng quan trọng của Python, điều này đôi khi có thể trở nên lộn xộn trong PyScript. Trong phần tiếp theo, bạn sẽ tìm hiểu cách xử lý thụt lề khối và định dạng mã Python được nhúng trong HTML

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

Khi bạn nhúng một đoạn CSS, JavaScript hoặc thậm chí là hình ảnh SVG vào tài liệu HTML, sẽ không có nguy cơ trình duyệt web hiểu sai mã được liên kết của chúng, bởi vì chúng đều là ví dụ về ngôn ngữ dạng tự do, bỏ qua khoảng trắng thừa. Bạn có thể định dạng mã của mình theo bất kỳ cách nào bạn muốn bằng các ngôn ngữ đó—ví dụ: bằng cách xóa dấu ngắt dòng—mà không làm mất bất kỳ thông tin nào. Đó là điều làm cho việc rút gọn JavaScript trở nên khả thi

Thật không may, điều này không đúng với Python, nó tuân theo quy tắc bên lề cho cú pháp của nó, trong đó mọi ký tự khoảng trắng đều được tính. Vì PyScript là một công nghệ mới lạ nên hầu hết các trình đị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ẻ

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

1 bằng cách thu gọn khoảng trắng quan trọng. Nếu điều đó xảy ra, bạn có thể gặp lỗi tương tự như lỗi này

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

Trong trường hợp này, Pyodide không thể phân tích cú pháp đoạn mã Python của bạn, được nhúng trong HTML, do một vết thụt đầu dòng bị hỏng. Bạn sẽ thấy ngoại lệ này và truy nguyên được liên kết trong phần nội dung của tài liệu cũng như trong bảng điều khiển dành cho 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 ký tự trong mã Python trông giống như một thẻ HTML, thì trình duyệt sẽ nhận ra nó là một

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

87 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 làm ví dụ

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

Đoạn mã trên sử dụng API ElementTree từ thư viện chuẩn của Python để phân tích cú pháp 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 sự được truyền vào hàm sẽ chỉ là

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

88 mà không có các thẻ xung quanh

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

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

89 trông giống như một thẻ HTML khác được lồng dưới phần tử cha

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

1. Để tránh sự mơ hồ như vậy, bạn có thể thay thế các dấu ngoặc nhọn [

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

01 và

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

02] bằng các đối tượng đượ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 [//[::]:8000/] ...

Thực thể

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

03 là viết tắt của ký tự “nhỏ hơn” [

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

01], trong khi đó,

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

05 thay thế cho ký tự “lớn hơn” [

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

02]. Các thực thể ký tự cho phép trình duyệt hiển thị văn bản theo nghĩa đen, nếu không nó sẽ được hiểu là các phần 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 lề

Ghi chú. Trong các tài liệu XML, bạn có thể bọc nội dung của mình trong một cặp dấu dữ liệu ký tự [CDATA] thay thế cho việc sử dụng các thực thể HTML. Thật không may, hầu hết các trình phân tích cú pháp HTML đều bỏ qua CDATA

Trừ khi bạn chỉ chơi đùa với PyScript, nếu không thì tốt hơn hết là bạn nên trích xuất mã Python của mình thành một tệp riêng biệt 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 tùy chọn

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

45 trên phần tử

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

1, thuộc tính này trông tương tự như thẻ

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

09 tiêu chuẩn dành cho JavaScript

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

Đ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 để sẵn sàng nhập mô-đun đó, thì hãy xem phần quản lý phụ thuộc với

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

10 trong phần tiếp theo

Ghi chú. Do chính sách chia sẻ tài nguyên nguồn gốc chéo [CORS] được thực thi bởi trình duyệt web, bạn sẽ không thể tải tập lệnh Python từ tệp bên ngoài khi bạn mở trang dưới dạng tệp cục bộ. Bạn sẽ cần lưu trữ HTML với các tài nguyên được liên kết thông qua máy chủ web, chẳng hạn như

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

11 tích hợp sẵn của Python đã đề cập trước đó

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

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

1 trên trang của mình miễn là chúng xuất hiện trong

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

13 hoặc

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

14 của trang. PyScript sẽ đặt chúng vào 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 mình trong trình duyệt bằng 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 hiểu cách tận dụng "pin" hiện có của Python, các thư viện 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

Loại bỏ các quảng cáo

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

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

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

1 và

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

44 do khung 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 [//[::]:8000/] ...

10, giúp quản lý các phụ thuộc dự án của bạn, tương tự như công cụ

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

18 của Python

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

Python đi kèm với pin, đ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 sẽ thấy rằng hầu hết các mô-đun này đều có sẵn trong Pyodide và PyScript, 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 [//[::]:8000/] ...

19 để phân tích một tài liệu XML

Tuy nhiên, có một số trường hợp ngoại lệ đáng chú ý do hạn chế của trình duyệt web và nỗ lực giảm kích thước tải xuống. Mọi thứ không liên quan đến môi trường trình duyệt đã bị xóa 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 [//[::]:8000/] ...

20 [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 [//[::]:8000/] ...

21 [lập trình GUI]

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

22 [Đồ họa con rùa]

venv [Môi trường ảo]

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

Ngoài ra, một số gói được giữ dưới dạng trình giữ chỗ, cuối cùng có thể nhận được hỗ trợ thích hợp 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 [//[::]:8000/] ...

23 phụ thuộc vào chúng, nhưng chúng sẽ không hoạt động

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

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

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

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

Còn việc sử dụng các thư viện bên ngoài trong PyScript mà bạn thường cài đặt bằng pip vào môi trường ảo của mình thì sao?

Thư viện của bên thứ ba đi kèm với Pyodide

Pyodide là một dự án phụ của dự án mẹ Iodide hiện đã ngừng hoạt động do Mozilla khởi xướng. Mục tiêu của nó là cung cấp các công cụ để thực hiện tính 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. Kết quả là, 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 mức giá của sức mạnh tính toán hạn chế

Vì PyScript là một trình bao bọc xung quanh Pyodide, nên bạn có thể truy cập một số thư viện phổ biến của bên thứ ba đã được biên dịch cho WebAssugging bằng Pyodide, ngay cả những thư viện có các 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 ở đó

súp đẹp
Bokeh
Matplotlib
NLTK
NumPy
gấu trúc
Cái gối
khoa học viễn tưởng
Thuật giả kim SQL
scikit-học

Danh sách thực tế dài hơn nhiều và không giới hạn ở 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 đi kèm 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 thư mục packages/trong kho lưu trữ 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 qua mạng vào trình duyệt web của bạn, việc này sẽ tốn thời gian và tài nguyên quý giá. 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 để diễn giải mã Python

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

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

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

Phần tử

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

10 chứa 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 bắc cầu theo yêu cầu của Matplotlib, có kích thước lên tới hơn 12 megabyte

Ghi chú. Bạn có thể đặt phần tử

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

10 trong phần đầu hoặc phần thân của tài liệu. Mặc dù một số ví dụ có trong PyScript đặt phần tử tùy chỉnh này giữa phần đầu và phần thân, nhưng nó có vẻ không chính xác và có thể không hoạt động trong tất cả các trình duyệt web

Ngoài ra, bạn có thể cài đặt các phụ thuộc theo chương trình trong Python, vì PyScript hiển thị công cụ micropip của 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 [//[::]:8000/] ...

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

Mô-đun

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

31 và biến

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

32 ẩn, đại diện cho vòng lặp sự kiện không đồng bộ mặc định, có sẵn trong không gian tên chung 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

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

33 của mô-đun một cách không đồng bộ thông qua gói asyncio của Python để móc vào API Tìm nạp của trình duyệt web được sử dụng bởi micropip. Ngoài ra, mặc dù hướng dẫn về kiểu nhập khuyên bạn nên đặt các câu lệnh

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

34 ở đầu tệp, nhưng chúng phải đặt sau câu lệnh

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

35 ở đâ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

Ghi chú. Nếu từ

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

36 xuất hiện ở bất kỳ đâu trong mã của bạn, kể cả trong nhận xét, thì PyScript sẽ chạy Python không đồng bộ bằng cách sử dụng phương thức

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

37 của Pyodide. Nếu không, nó sẽ gọi đối tác đồng bộ ________ 938, không cho phép bạn sử dụng từ khóa ________ 935

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ố tải xuống từ Chỉ mục gói Python [PyPI]. Tuy nhiên, không phải tất cả các thư viện đều hoạt động theo cách đó do một số hạn chế về thời gian chạy nhất định

Loại bỏ các quảng cáo

Bánh xe Python thuần túy đượ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 cú pháp XML bằng cách sử dụng thư viện gỡ rối, thư viện này không đi kèm với Pyodide cũng như không được phân phối cùng với thư viện chuẩn. Bạn thêm phần khai báo sau vào phần tử

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

10 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 [//[::]:8000/] ...

Pyodide liên hệ với PyPI để tìm nạp siêu dữ liệu JSON được liên kết và kết luận rằng thư viện không đượ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. Không thành vấn đề 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 mà nó có thể trích xuất và bắt đầu sử dụng ngay lập tức

Hơi thất vọng, bạn thử vận may với một thư viện phân tích cú pháp XML khác có tên là xmltodict, thư viện này chuyển đổi tài liệu thành từ điển Python chứ không phải đối tượng

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

Lần này, siêu dữ liệu của thư viện chỉ ra rằng có một kho lưu trữ bánh xe Python thuần túy, vì vậy Pyodide tiếp tục và tìm nạp nó. Nếu thư viện có các phần phụ thuộc riêng, thì Pyodide cũng sẽ cố gắng tìm nạp chúng. Tuy nhiên, cơ chế giải quyết 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 [//[::]:8000/] ...

41 có thể nhập được trong ứng dụng PyScript của bạn

Tuy nhiên, nếu bạn đã thử tìm nạp một thư viện không thuần 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 xây dựng dưới dạng bánh xe Python cho nhiều nền tảng khác nhau, thì không có cái nào trong số chúng 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 cụ thể nào bằng cách nhấp vào Tải xuống tệp trên trang tương ứng

Ghi chú. Bạn có thể tùy chọn yêu cầu các gói từ các máy chủ từ xa không phải PyPI bằng cách cung cấp URL của chúng trong phần tử

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

10 miễn là chúng là bánh xe Python thuần túy

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

Máy chủ lưu trữ các bánh xe như vậy phải được định cấu hình để trả về các tiêu đề CORS, chẳng hạn như

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

43. Nếu không, trình duyệt sẽ từ chối tìm nạp dữ liệu từ một nguồn gốc khác [giao thức, tên miền, số cổng] và chặn kết nối do chính sách bảo mật của nó

Ngoài ra, cơ chế giải quyết phụ thuộc sẽ không hoạt động đối với các URL tùy chỉnh như ở trên

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

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

10 phải là thư viện thuần Python và được phân phối bằng định dạng bánh xe để được chọn, trừ khi thư viện đó đã được tạo cho WebAssembly và đi kèm với Pyodide. Đưa một thư viện Python không thuần túy tùy chỉnh vào PyScript rất khó

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

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

Sử dụng trình biên dịch emscripten cho phép bạn nhắm mục tiêu WebAssembly thay vì kiến trúc máy tính và hệ điều hành cụ thể. Tuy nhiên, làm được điều đó không phải là điều 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 quy trình này, thẻ

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

10 của PyScript luôn mong đợi một bánh xe Python thuần túy hoặc một gói đi kèm với Pyodide

Để cài đặt một bánh xe chứa mã WebAssugging, bạn có thể gọi hàm

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

46 của Pyodide bằng giao diện Python của nó,

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

81, đã đề cập trước đó. Bạn cũng có thể sử dụng trực tiếp API của Pyodide 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 thời gian đã được tạo bởi PyScript. Do đó, mô-đun tùy chỉnh của bạn với mã WebAssugging sẽ không 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ư là kiên nhẫn chờ đợi Pyodide gử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 bổ sung. Có một công cụ dòng lệnh tên là

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

48, 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

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

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

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

10 hoặc micropip để làm cho các mô-đun tùy chỉnh của mình có thể nhập được trong các ứng dụng PyScript. Giả sử bạn đã tạo một mô-đun trợ giúp có tên là

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

50, nằm trong thư mục con

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

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

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

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

52 trong thư viện chuẩn, được sử dụng để đọc và ghi Định dạng tệp âm thanh dạng sóng [WAV]. Mô-đun của bạn định nghĩa một hàm gọi là

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

53, hàm này trả về một bao đóng. Hàm bên trong

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

54, dựa trên việc đóng cửa, sử dụng NumPy để tạo ra sóng hình sin thuần túy 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 trong thẻ

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

1, từ tập lệnh nội tuyến hoặc tập lệnh có nguồn gốc, bạn cần tìm nạp mô-đun đó vào trình duyệt web của mình bằng

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

10 bằng cách chỉ định thuộc tính

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

57 đặc biệt trong YAML

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

Đường dẫn tệp có liên quan đến 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áy chủ web do chính sách CORS không cho phép nhận các tệp bổ sung thông qua giao thức

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

Ghi chú. Bạn không thể tải các gói Python bằng

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

57, chỉ các mô-đun. Nếu bạn có gói Python thuần túy, thì hãy xây dựng bản phân phối bánh xe và lưu trữ gói đó cùng với các tệp khác của bạn hoặc tải nó lên PyPI

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

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

57 để tải hầu như bất kỳ tệp nào vào đó. Điều đó 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

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

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 [//[::]:8000/] ...

10, thì bạn sẽ mất thông tin về cấu trúc thư mục ban đầu của chúng, vì tất cả các tệp đều nằm 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 bằng cách ghi vào 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 mình hoặc của người khác vào PyScript, bạn nên học cách làm việc với khung hiệu quả hơn

Loại bỏ các quảng cáo

Giả lập Python REPL 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à dùng thử chúng trong phiên phiên dịch trực tiếp, còn được gọi là Vòng lặp Đọc-Eval-Print-Loop [REPL]. Bằng cách tương tác với mã, bạn có thể khám phá những hàm và lớp nào có sẵn cũng như cách bạn phải sử dụng chúng. Nó không khác gì với PyScript

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

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

62, cho phép bạn thực thi các đoạn mã nhỏ mà không cần tải lại trang. Bạn có thể có bao nhiêu trong số đó tùy thích trong HTML của mình, để trống hoặc điền trước chúng bằng một số mã Python ban đầu

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

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

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

62 có phần trình bày trực quan dựa trên trình chỉnh sửa CodeMirror, hỗ trợ đánh dấu cú pháp theo chủ đề, tự động hoàn thành, gấp mã, v.v. Miễn là bạn đã bao gồm biểu định 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

REPL của PyScript giống như một Notebook Jupyter

Mỗi phiên bản của

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

62 giống như một ô trong Jupyter Notebook. 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 cùng bên phải để mã của bạn được thực thi. Bạn cũng có thể sử dụng tổ hợp phím Shift + Enter để đạt được kết quả tương tự. hiệu ứng. Dưới đây là một vài phím tắt bổ sung do CodeMirror cung cấp.

ActionmacOSTìm kiếm trên Windows và Linux Cmd + FCtrl + F Chọn phạm vi Cmd + ICtrl + I Chọn dòng Ctrl + LAlt + L Xóa dòng Cmd + Shift + KCtrl + Shift + K Chèn dòng bên dưới Cmd + EnterCtrl + Enter Di chuyển lựa chọn lên Alt + LênAlt + Lên Di chuyển lựa chọn xuống Alt + XuốngAlt + Xuống Chuyển đến đối sánh ngoặc Cmd + Shift + \ Ctrl + Shift +\IndentCmd+]Ctrl+]DedentCmd+[Ctrl+[

Bảng trên minh họa sơ đồ bàn phím mặc định, có thể được điều chỉnh để bắt chước Emacs, Vim hoặc Sublime Text

Nếu dòng cuối cùng trong ô của bạn chứa một biểu thức Python hợp lệ, thì PyScript sẽ nối biểu diễn của nó ngay bên dưới ô. Ví dụ: nó có thể hiển thị 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 Jupyter Notebook

Tuy nhiên, không giống như trong Jupyter Notebook, việc thực thi

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

62 sẽ không chèn ô mới theo mặc định. Nếu bạn muốn kích hoạt hành vi như vậy, hãy đặt thuộc tính

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

66 của phần tử thành true

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

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 vào cuối trang. Tuy nhiên, các lần chạy tiếp theo sẽ không. Ô mới này sẽ có thuộc tính

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

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 [//[::]:8000/] ...

62 là nối thêm các bộ chứa

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

69 mới cho đầu ra Python và truy nguyên. Bạn có thể tùy ý chuyển hướng đầu ra tiêu chuẩn và các luồng lỗi tiêu chuẩn thành các phần tử tùy chỉnh, riêng biệt 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

Sân chơi PyScript tùy chỉnh trong Trình duyệt web

Đây là mã của trang web được mô tả trong ảnh chụp màn hình ở trên

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

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

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

70 và

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

71 để 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à kết xuất chúng thành 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 [//[::]:8000/] ...

72 để thay thế. Các thuộc tính tương tự áp dụng cho phần tử

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

1 mà bạn đã thấy trước đó

Các yếu tố còn lại hiện do PyScript cung cấp là các thành phần trực quan, còn được gọi là các widget, giúp đơn giản hóa việc làm việc với HTML và Python. Bạn sẽ khám phá chúng ngay bây giờ

Khám phá các thành phần trực quan của PyScript

Các thành phần trực quan mà PyScript cung cấp là các hàm bao thuận tiện cho các phần tử HTML, điều này 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 máy khách. Tuy nhiên, những tiện ích đó mang tính thử nghiệm cao, có chức năng hạn chế và có thể bị xóa trong tương lai. Đôi khi, chúng tải quá nhanh, trước khi Pyodide được khởi chạy đầy đủ, gây ra lỗi. Sử dụng chúng có nguy cơ của riêng bạn

Loại bỏ các quảng cáo

PyTiêu đề

Với phần tử PyTitle, bạn có thể nhanh chóng thêm tiêu đề văn bản vào trang web của mình, tiêu đề này sẽ xuất hiện bằng chữ in hoa và được căn giữa theo chiều ngang, miễn là bạn đã liên kết biểu định kiểu CSS mặc định đi kèm với PyScript. Đây là cách bạn có thể sử dụng tiện ích này trong mã HTML của mình

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

Đó là 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 nào và nó sẽ chỉ chấp nhận nội dung văn bản thuần túy giữa các thẻ mở và thẻ đóng của nó

PyBox

PyBox là một phần tử vùng chứa có thể sắp xếp các phần tử con của nó bằng cách sử dụng mô hình bố cục CSS Flexbox theo hướng nằm ngang. Nó hiện đang sử dụng các lớp độ rộng CSS của Tailwind, chẳng hạn như

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

74,

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

75 hoặc

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

76, để xác định độ rộng của cột

Ghi chú. Vào thời điểm bạn đọc phần này, rất có thể Tailwind đã được thay thế bằng CSS thuần túy trong PyScript, vì vậy mã bên dưới có thể không hoạt động hoặc có thể cần một số chỉnh sửa. Động lực chính cho bước này là giảm kích thước tải xuống của các tài nguyên khác nhau

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

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

77 tùy chọn của phần tử cha

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

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

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 [//[::]:8000/] ...

79 và bạn phân định độ rộng bằng dấu chấm phẩy [

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

84]. Trong ví dụ trên,

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

69 đầu tiên sẽ chiếm 2/3 không gian có sẵn trong hàng [⅔], trong khi hai phần tử còn lại cộng lại sẽ chiếm 1/3 [⅙ + ⅙ = ⅓]. Nếu bạn bỏ qua thuộc tính

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

77 thì tất cả các phần tử con 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 hàm Python để phản hồi hành động của người dùng, chẳng hạn như nhấp vào nút chuột. Để xử lý sự kiện nhấp chuột của JavaScript, hãy xác định hàm nội tuyến có tên

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

83 bên trong phần tử

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

2 của bạn

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

Hàm này là một cuộc gọi lại nhận một đối tượng PointerEvent và không trả về gì cả. Mặc dù không thể đính kèm 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 quyền cho một số chức năng của trình trợ giúp. Nếu bạn không thích giao diện mặc định của PyButton, thì bạn có thể ghi đè lên nó bằng 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 [//[::]:8000/] ...

Một sự kiện khác mà PyButton hỗ trợ là sự kiện tiêu điểm, bạn có thể nghe sự kiện này bằng cách xác định hàm

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

86. Nó sẽ nhận đối tượng FocusEvent làm đối số

Đáng buồn thay, do tốc độ phát triển nhanh chóng của PyScript và Pyodide, phần sau đã đưa ra một thay đổi đột phá trong phiên bản 0. 19 bằng cách khắc phục sự cố rò rỉ bộ nhớ khiến PyButton ngừng hoạt động một cách bất ngờ. Vấn đề tương tự cũng xảy ra với PyInputBox mà bạn sẽ tìm hiểu trong phần tiếp theo. Hy vọng rằng cả hai vật dụng sẽ được sửa chữa vào thời điểm bạn đọc bài viết này

PyInputBox

PyInputBox là tiện ích cuối cùng hiện có trong PyScript và nó bao bọc phần tử đầu vào của HTML và cho phép bạn nghe sự kiện nhấn phím trên đó

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

Lưu ý rằng sự kiện nhấn phím không được dùng để thay thế cho sự kiện nhấn phím mà PyInputBox chưa hỗ trợ. Do đó, bạn có thể thấy ít rườm rà hơn khi truy cập và thao tác các phần tử HTML tiêu chuẩn trực tiếp từ PyScript mà không có các lớp trừu tượng bổ sung có thể bị hỏng

Loại bỏ các quảng cáo

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

WebAssugging hiện 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], mô hình này thường cung cấp cho bạn quyền truy cập vào các thành phần cơ bản của HTML. Thay vào đó, bạn phải sử dụng JavaScript để truy vấn và duyệt qua cây DOM. Có thể truy cập các đối tượng JavaScript trong Python nhờ các đối tượng proxy của Pyodide, tạo điều kiện thuận lợi cho việc dịch giữa cả hai ngôn ngữ. Có hai cách để sử dụng chúng cho thao tác DOM trong PyScript

Bộ điều hợp của PyScript cho Proxy JavaScript

Đối với các trường hợp sử dụng tầm thường, khi bạn đang vội và không bận tâm đến việc thiếu chuông và còi bổ sung, bạn có thể dùng thử lớp

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

87 của PyScript. Nó đã có trong không gian tên chung của bạn, nghĩa là bạn không cần phải nhập nó. 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 độ hạn chế

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

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

Đó là một danh sách mua sắm với một số mặt hàng bị gạch bỏ và một ô nhập liệu ở dưới cùng để thêm các mặt hàng mới cần mua. Phần tử

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

62 sẽ cho phép bạn kiểm tra và thử nghiệm với API PyScript một cách 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ặt hàng mua sắm mới nào mà người dùng đã nhập vào hộp nhập liệu đó, sau đó bạn muốn xóa mặt hàng đó. Đây là một đoạn mã Python thực hiện điều đó khi được đặt trong thẻ

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

1 hoặc

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

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

Đầ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 [//[::]:8000/] ...

91 bằng cách gọi phương thức khởi tạo của lớp

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

92 với thuộc tính

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

93 của HTML là

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

94 làm đối số. Sau đó, bạn in thuộc tính phần tử ________ 995 và gọi _______ 996 để đặt lại giá trị của nó. Bạn sẽ cần nhập nội dung nào đó vào hộp nhập liệu trước khi xem bất kỳ kết quả nào

Lớp

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

87 có các thuộc tính có giá trị khác, thuộc tính chỉ đọc và một số phương thức mà bạn có thể gọi để thay đổi kiểu hoặc trạng thái của phần tử

Mô tả thành viên

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

98Một đối tượng proxy cho phần tử HTML của JavaScript

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

99Giá trị chuỗi của thuộc tính

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

93 của phần tử HTML nếu nó tồn tại

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

95Giá trị chuỗi của thuộc tính

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

95 của phần tử HTML nếu nó tồn tại

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

003Thêm một hoặc nhiều lớp CSS

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

004Xóa một hoặc nhiều lớp CSS

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

005Cập nhật thuộc tính

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

006 hoặc thêm một phần tử

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

69 hoàn toàn mới

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

96Xóa Thuộc tính

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

95 hoặc

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

006_______1011Sao chép phần tử và chèn bản sao sâu của nó vào cây DOM

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

012Tìm phần tử con ____ ____1011 bằng cách sử dụng bộ chọn CSS

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

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

014 thực tế được bao bọc bởi PyScript thông qua thuộc tính

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

98. Phương thức

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

012 là một phương thức thú vị 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ử bộ chứa của bạn bằng cách sử dụng bất kỳ bộ chọn CSS nào chứ không chỉ một ID thuần túy. Ví dụ: bạn có thể tìm mục danh sách bị gạch chéo đầu tiên và xóa lớp CSS

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

017 khỏi mục đó trong khi thêm mục đó vào thành phần cuối cùng trong danh sách đó

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

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

Ghi chú. Việc học cú pháp bộ chọn CSS đôi khi có thể gây khó chịu, nhưng không nhất thiết phải như vậy. Cách tốt nhất để thành thạo nó là luyện tập và nhận phản hồi trực quan nhanh chóng. Có rất nhiều trò chơi thú vị và tương tác sẽ đưa bạn qua quy trình theo từng bước nhỏ. Một yêu thích là CSS Diner, theo chủ đề ẩm thực

Đó là tất cả những gì bạn có thể làm với lớp

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

87 của PyScript. Để có quyền kiểm soát 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 chính đối tượng proxy

Proxy JavaScript Pyodide

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

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

019 do Pyodide cung cấp vào mã PyScript của bạn

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

Mô-đun này mở không gian tên chung của JavaScript lên, hiển thị các hàm và biến của bạn, cũng như các đối tượng được trình duyệt web cung cấp ngầm. Chúng bao gồm các đối tượng

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

020 và

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

021, cũng như kiểu dữ liệu

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

014 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

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

019 vào không gian tên chung trong Python để thuận tiện cho bạn. Đặc biệt, các đối tượng

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

024 và

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

021 đã có

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

Bạn không cần phải tự nhập chúng hoặc thêm tiền tố vào tên của chúng bằng mô-đun

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

019 nữa, điều này làm cho Python trông rất giống JavaScript khi bạn nheo mắt

Được rồi, còn 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 thì sao?

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

Đ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 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 [//[::]:8000/] ...

91 bằng bộ chọn CSS. Nếu người dùng đã nhập một số giá trị vào hộp nhập đó, thì bạn tạo một phần tử mục danh sách mới [

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

028] và điền nó bằng thuộc tính

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

029. Tiếp theo, bạn tìm phần tử cha

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

030 và nối thêm phần tử con. Cuối cùng, bạn xóa ô nhập liệu

Ghi chú. Mọi người thường gọi JavaScript thuần túy là JavaScript vanilla. Thuật ngữ này được đặt ra bởi Eric Wastl, người tạo ra Advent of Code, người đã bắt đầu trang web Vanilla JS như một trò đùa để nhấn mạnh rằng bạn không cần một framework như React để tạo các ứng dụng front-end

Bạn có thể điên hơn nữa khi sử dụng đối tượng

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

021 trong PyScript. Chẳng hạn, có thể viết mã trông giống như sự kết hợp giữa Python và JavaScript bằng cách kết hợp các API của cả hai

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

Trong trường hợp này, bạn nhập một vài hàm từ thư viện 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, chẳng hạn, để lặp qua một mảng JavaScript được bao 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, chỉ định một cách có điều kiện một mức giá ngẫu nhiên cho từng mục, chuyển đổi lớp CSS của chúng và chọn một màu nền ngẫu nhiên

API DOM được trình duyệt web hiển thị quá phong phú để phù hợp với hướng dẫn này, nhưng vui lòng 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

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

014

Tham khảo nhanh HTMLElementHiển thị/Ẩn

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

AttributeDescription

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

033Một đối tượng dạng danh sách có tên lớp CSS của phần tử

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

034Một chuỗi có giá trị thuộc tính

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

035 của phần tử

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

036Một đối tượng giống từ điển với các cặp khóa-giá trị tùy chỉnh

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

006Một chuỗi có nội dung HTML nằm giữa thẻ mở và thẻ đóng

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

029Một chuỗi có nội dung văn bản nằm giữa thẻ mở và thẻ đóng

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

039Một đối tượng chứa các khai báo kiểu CSS

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

040 Tên viết 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 quá trình duyệt cây DOM so với phần tử hiện tại

Thuộc tínhMô tả

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

041Cha mẹ của phần tử này

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

042Một đối tượng dạng danh sách của các phần tử con ngay lập tức

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

043Phần tử con đầu tiên

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

044Phần tử con cuối cùng

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

045Phần tử tiếp theo trên cùng cấp độ cây

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

046Phần tử trước đó trên cùng cấp độ cây

Để thao tác các thuộc tính chung không được liệt kê ở đây, bạn có thể gọi các phương thức sau trên một phần tử

MethodDescription

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

047Kiểm tra xem phần tử có một thuộc tính đã cho

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

048Trả về giá trị của một thuộc tính đã cho

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

049Gán hoặc ghi đè giá trị của một thuộc tính

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

050Xóa một thuộc tính khỏi phần tử

Sau khi bạn có một đối tượng tham chiếu đến một phần tử, bạn có thể muốn thu hẹp không gian tìm kiếm bằng cách tra cứu phần tử con của nó bằng bộ chọn CSS trong khi bỏ qua phần còn lại của các nhánh trong tài liệu

Phương thứcMô tả

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

051Trả về phần tử lồng nhau khớp với bộ chọn CSS đã cho

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

052Trả về đối tượng dạng danh sách gồm các phần tử lồng nhau khớp với bộ chọn CSS đã cho

Hai phương thức này hoạt động giống như các đối tác của chúng trong đối tượng

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

021. Ngoài ra, bạn sẽ có thể sửa đổi cấu trúc cây DOM của mình bằng các phương thức hữu ích sau

Phương thứcMô tả

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

054Tạo một bản sao nông hoặc sâu của phần tử

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

055Thêm phần tử mới làm phần tử con cuối cùng

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

056Chèn phần tử mới trước phần tử con đã chỉ định

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

057Xóa phần tử con đã cho

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

058Thay thế phần tử con đã cho bằng phần tử khác

Cuối cùng, bạn sẽ muốn thêm các hành vi vào phần tử của mình bằng cách làm cho phần tử phản hồi các sự kiện DOM, thường do hành động của người dùng gây ra

MethodDescription

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

059Đăng ký gọi lại cho một loại sự kiện nhất định

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

060Hủy đăng ký gọi lại cho một loại sự kiện nhất định

Để sử dụng chúng, bạn sẽ cần biết về cách tạo các hàm gọi lại trong PyScript, bạn sẽ tìm hiểu điều này trong phần tiếp theo

Để làm cho danh sách mua sắm có thể sử dụng được, nó cần phải tương tác. Nhưng làm cách nào để bạn xử lý các sự kiện DOM, chẳng hạn như nhấp chuột, trong PyScript?

Loại bỏ các quảng cáo

Proxy gọi lại sự kiện Python

Bạn đã viết mã để tạo mục danh sách mới dựa trên giá trị từ hộp nhập liệu. Tuy nhiên, nó không bị ràng buộc với bất kỳ thành phần trực quan nào trên trang, vì bạn phải chạy nó theo cách thủ công thông qua phần tử

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

62. Sẽ thật tuyệt nếu nhấp vào nút Thêm sẽ kích hoạt mã đó cho bạn

Trước tiên, bạn sẽ cần đóng gói mã hiện có của mình trong một hàm lấy sự kiện DOM làm đối số. Trong JavaScript, bạn có thể bỏ qua các đối số mà bạn không cần, nhưng vì bạn đang viết một hàm Python nên chữ ký của nó phải rõ ràng hơn

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

Đối số

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

062 sẽ không được sử dụng và bỏ qua, nhưng không sao. Giả sử bạn đã có chức năng của mình, đã đến lúc cho trình duyệt biết khi nào nên gọi nó. Bạn làm điều đó bằng cách thêm một trình lắng nghe sự kiện vào một phần tử sẽ kích hoạt một hành động. Trong trường hợp này, phần tử đó là nút mà bạn có thể tìm thấy bằng bộ chọn CSS thích hợp và tên sự kiện là

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

063

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

Dòng thứ hai trong khối mã ở trên thêm trình 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

Ghi chú. Bất cứ khi nào trình duyệt không hoạt động như mong đợi, rất có thể bạn sẽ tìm thấy lỗi với nhiều chi tiết hơn trong bảng điều khiển công cụ dành cho nhà phát triển, vì vậy, bạn nên giữ trình duyệt mở trong khi đang phát triển

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 từ Python có thể gọi được của mình bằng cách sử dụng một hàm có liên quan từ mô-đun

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

064

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

Đó là nó. Giờ đây, bạn có thể thay thế thẻ

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

62 của mình bằng thẻ

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

1 có mã Python hoàn chỉnh và bạn có thể bắt đầu tận hưởng ứng dụng PyScript tương tác đầu tiên của mình. Đây là cấu trúc tài liệu HTML kết quả

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

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

Ghi chú. Theo nguyên tắc thông thường, bạn nên tìm nguồn mã Python từ một tệp riêng biệt được lưu trữ trên máy chủ web để tránh các sự cố thụt lề. Nếu không, hãy nhớ thụt lề chính xác mã nội tuyến của bạn bên trong thẻ

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

1. Miễn là bạn giữ mã như vậy thẳng hàng với phần đầu của dòng và không chạy bất kỳ công cụ định dạng mã nào, thì PyScript sẽ không gặp khó khăn khi phân tích cú pháp mã đó

Ngoài việc tìm và thao tác các phần tử HTML bằng API DOM, bạn có thể làm 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 số yếu tố còn lại của lập trình giao diện người dùng mà bạn thường phải viết mã bằng JavaScript

Giao diện với trình duyệt web từ Python

Trong quá trình phát triển giao diện người dùng truyền thống, bạn dựa vào công cụ JavaScript nhiều như bộ API được cung cấp bởi môi trường thực thi của bạn, đây 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 giữa các nhà cung cấp khác nhau, nhưng bối cảnh của các API có thể rất khác nhau tùy thuộc vào nền tảng mục tiêu

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ã cung cấp năng lượng cho các ứng dụng dành cho thiết bị di động. Nhân tiện, về mặt kỹ thuật, có thể chạy PyScript trong Node. js trên back-end, 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 các API của trình duyệt

Bánh quy

Làm việc với các cookie HTTP trong vanilla JavaScript mà không có sự trợ giúp của bất kỳ thư viện bên ngoài nào có thể trở nên rắc rối 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 cookie mới trong JavaScript yêu cầu 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 đi kèm

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

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

068, có thể thực hiện phân tích cú pháp và mã hóa chuỗi cookie cho bạn. Để phân tích cú pháp thuộc tính

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

069 của JavaScript, hãy sử dụng lớp

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

070 có sẵn trong Python

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

Lớp trình trợ giúp Python có khả năng phân tích cú pháp toàn bộ chuỗi bằng các thuộc tính cookie mà máy chủ thường gửi tới trình duyệt. Tuy nhiên, trong JavaScript, bạn chỉ thấy tên và giá trị tương ứng của các cookie không phải 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 cookie mới sẽ hết hạn sau 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 thuộc tính SameSite một cách rõ ràng để tránh dựa vào hành vi mặc định, thay đổi tùy theo trình duyệt và phiên bản của chúng

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

Phải thừa nhận rằng giao diện của mô-đun này trông khá lỗi thời 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 mình, bạn sẽ thấy cookie

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

071 mới được đặt thành true. Bạn có thể sử dụng số giây để xem trình duyệt của mình có xóa cookie sau một thời gian nhất định hay không

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

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

072 với các thuộc tính bổ sung, một số thuộc tính không được phép trong JavaScript

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

Đoạn mã trên sẽ tạo ra dòng văn bản dài sau biểu thị tiêu đề HTTP, tiêu đề này đã được chia để vừa với màn hình của bạn và tránh cuộn ngang

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

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

Loại bỏ các quảng cáo

Tìm nạp API

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

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

23 hoặc

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

26 không được sử dụng trong PyScript

Pyodide khuyên bạn nên viết ứng dụng khách HTTP dưới dạng API web, chẳng hạn 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 hàm bao bọc

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

075, hoạt động trong ngữ cảnh không đồng bộ

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

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

075, hàm này có chữ ký tương tự như hàm

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

077 của JavaScript

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

Từ

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

36, xuất hiện trong nhận xét ở đầu đoạn mã ở trên, yêu cầu 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 kỳ đâu trong mã của mình để kích hoạt cùng một hành động, hiện tại 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ẻ

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

Khi bạn gọi quy trình đăng ký

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

080 bằng địa chỉ email và mật khẩu, bạn thực hiện một yêu cầu HTTP POST tới một API giả mạo được lưu trữ trực tuyến. Lưu ý rằng bạn tuần tự hóa tải trọng thành JSON trong Python bằng cách sử dụng mô-đun

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

081 thay vì đối tượng

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

082 của JavaScript

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

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

075 để 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 sẽ không tìm thấy chúng trong thư mục

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

084 trên ổ đĩa của mình

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

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

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

085 để trích xuất tên tệp từ một URL mà hàm của bạn sẽ trả về. Đối tượng phản hồi được trả về bởi

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

075 có một phương thức

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

087 đang chờ, mà bạn sử dụng để lưu nội dung nhị phân vào một tệp mới

Ghi chú. Máy chủ mà bạn đang cố tải các tệp xuống từ đó phải được định cấu hình để trả về các tiêu đề CORS thích hợp, nếu không, trình duyệt sẽ chặn yêu cầu tìm nạp của bạn

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

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

088 trong HTML

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

Bạn sẽ cần chuyển đổi 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

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

45 của thành phần hình ảnh

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

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

090 không thể đọc dữ liệu nhị phân

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

Cuộc gọi đầu tiên tới

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

090 này tìm nạp 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 một đ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ải tuần tự hóa thành một từ điển Python. Cuộc gọi thứ ba tải xuống logo SVG chính thức mà 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ữ dữ liệu đó để truy cập sau. Các trình duyệt cung cấp một vài vùng lưu trữ web để lựa chọn, tùy thuộc vào phạm vi và thời gian tồn tại mong muốn của thông tin của bạn. Bộ nhớ 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 bằng thông báo chào mừng được hiển thị trong hộp cảnh báo, giải quyết họ bằng tên đã được lưu trước đó trong bộ nhớ cục bộ của trình duyệt. Nếu người dùng truy cập trang của bạn lần đầu tiên, thì bạn sẽ hiển thị hộp thoại nhắc hỏi tên người dùng

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

Để nắm giữ bộ nhớ cục bộ, bạn nhập tham chiếu

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

092 từ JavaScript và sử dụng các phương thức

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

093 và

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

094 của nó để duy trì các cặp khóa-giá trị. Bạn cũng tận dụng toán tử Walrus [

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

095], được giới thiệu trong Python 3. 8, để làm cho mã 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 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ảm biến ánh sáng xung quanh, con quay hồi chuyển hoặc từ kế của thiết bị nếu thiết bị được trang bị. 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 tín hiệu từ nhiều cảm biến vật lý, giảm nhiễu. Cảm biến trọng lực là một ví dụ điển hình

Bạn có thể xem bản trình diễn 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 thông báo này hiển thị trên màn hình

Ngang ngược chiều kim đồng hồ
Chiều ngang theo chiều kim đồng hồ
thẳng đứng
lộn 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 đang truy cập trang web qua kết nối không được mã hóa, bạn sẽ nhận đượ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

Ghi chú. Đảm bảo lưu trữ tệp HTML của bạn thông qua giao thức HTTPS an toàn để sử dụng API cảm biến. Các trình duyệt web sẽ chặn API JavaScript này đối với nội dung được cung cấp qua HTTP đơn giản. Bạn có thể xem cách xuất bản ứng dụng PyScript của mình để biết thêm chi tiết về điều đó

Để kết nối với 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 phiên bản Pyodide mà nó tạo vào không gian tên chung của JavaScript. Nếu đúng như vậy, 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 cách khác bằng cách gọi một hàm JavaScript từ Python

Tạo một tệp

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

096 mới và tiếp tục thêm nội dung vào đó. Trước tiên, hãy xác định thẻ

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

09 trong trang web HTML của bạn và điền vào đó mã JavaScript sau

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

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

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

098 hay không và tạo một phiên bản cảm biến mới với tần suất lấy mẫu là 60 lần mỗi giây. Một lần đọc cảm biến duy nhất là một vectơ ba chiều biểu thị hướng và độ lớn của lực hấp dẫn

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

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

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

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

099 ở đâu đó trên trang của bạn, bạn tìm tham chiếu của nó bằng bộ chọn CSS và sau đó viết một chuỗi được định dạng có ba thành phần của vectơ trọng lực vào đó sau khi đọc cảm biến. Lưu ý rằng cần phải gói cuộc gọi lại Python của bạn trong proxy JavaScript trước khi đăng ký nó làm người nghe

Ghi chú. Kiểm tra một trang web trên thiết bị di động trở nên khó khăn vì bạn không có quyền truy cập vào các công cụ phát triển web thông thường và bảng điều khiển. Để tự giúp mình, bạn có thể bật gỡ lỗi USB trên thiết bị Android của mình và tận dụng tính năng gỡ lỗi từ xa trong Google Chrome. Tính năng này không được hỗ trợ cho các thiết bị iOS

Việc biết hướng của vectơ trọng lực sẽ cho bạn biết điều gì đó về hướng của điện thoại, điều này có thể hữu ích khi bạn muốn chụp ảnh cân bằng hoặc để phát hiện thời điểm bạn nhấc thiết bị lên khỏi bàn chẳng hạn. Độ lớn của vectơ trọng lực là gia tốc của Trái đất mà bạn có thể sử dụng làm ước tính sơ bộ về độ 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ị

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

Bạn thêm khai báo

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

10 để tìm nạp NumPy vào môi trường PyScript của mình. Sau đó, bạn nhập thư viện ở đầu thẻ

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

1 hiện có của mình và thực hiện cuộc gọi lại ủy quyền xử lý cho một hàm trợ giúp. Hàm

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

502 mới chuẩn 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, hãy thử xác định các cảm biến khác hoạt động, sau đó nghĩ ra ý 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 mình 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à 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ỳ sau mỗi số mili giây được chỉ định. Cái sau có thể hữu ích để tạo hoạt ảnh cho nội dung trên trang hoặc thăm dò ý kiến máy chủ để có ảnh chụp nhanh mới nhất về dữ liệu thay đổi nhanh chóng

Nếu bạn định trì hoãn việc thực hiện chức năng một lần—ví dụ: để hiển thị thông báo lời nhắc hoặc cửa sổ bật lên sau một thời gian cụ thể—thì hãy cân nhắc sử dụng

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

503 để tạo đối tượng proxy. Pyodide sẽ tự động loại bỏ nó khi hoàn thành

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

Bạn sử dụng hàm

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

504 từ JavaScript, hàm này mong đợi một đối tượng có thể gọi được, chẳng hạn như hàm lambda của Python được bao bọc trong một proxy và số mili giây cần chờ trước khi chạy có thể gọi được của bạn. Tại đây, bạn hiển thị một hộp cảnh báo với lời nhắc sau ba giây

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

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

504, cung cấp một mã định danh duy nhất của thời gian chờ, bạn có thể tùy ý hủy bỏ giá trị này bằng hàm

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

506 tương ứng

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

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

Có một cặp hàm JavaScript tương tự có tên là

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

507 và

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

508 hoạt động gần như 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 lặp đi lặp lại trong 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 hàm của bạn mất nhiều thời gian hơn để thực thi, thì hàm đó sẽ chạy ngay khi có thể vào lần tiếp theo, không chậm trễ

Để sử dụng

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

507 trong PyScript, bạn cần nhớ bọc chức năng gọi lại của mình bằng một lệnh gọi tới

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

510 thay vì

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

503 để ngăn Pyodide xử lý nó sau lần chạy đầu tiên

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

Một vài điều đang xảy ra ở đây. Bạn đăng ký gọi lại để chạy mỗi giây, đặt nền của 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 không cho PyScript hiển thị mã định danh của thời gian chờ, bạn chỉ định giá trị trả về là

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

504 cho biến giữ chỗ được biểu thị bằng dấu gạch dưới [

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

513], đây là quy ước 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 để nâng cao dự án PyScript thực hành của mình

Kết hợp sức mạnh của 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 có nhiều JavaScript tương đương. Mặt khác, JavaScript luôn có khả năng xây dựng giao diện người dùng hấp dẫn trong trình duyệt một cách tự nhiên.

Trong phần này, bạn sẽ xây dựng một ứng dụng PyScript liên kết 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 giao thoa sóng hình sin có 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

Giao thoa sóng hình sin

Có hai thanh trượt cho phép bạn tinh chỉnh các tần số và một phần tử

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

514 mô tả đồ thị của dạng sóng, là kết quả của việc đặt chồng hai tín hiệu. Di chuyển các thanh trượt khiến cốt truyện cập nhật theo thời gian thực

Bạn sẽ thực hiện các phép tính trong thư viện NumPy của Python và bạn sẽ rút ra kết quả bằng Biểu đồ mã nguồn mở của JavaScript. thư viện js. Điều đáng chú ý là Biểu đồ. js không nhanh bằng một số đối thủ trả phí của nó, nhưng nó miễn phí và khá dễ 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 dàn dựng cấu trúc tài liệu HTML của mình, tạo kiểu cho nó bằng CSS và bao gồm một số mã soạn sẵn cần thiết. Vì ví dụ này liên quan nhiều hơn một chút so với những ví dụ mà bạn đã xem trước đó trong hướng dẫn này, nên bạn nên 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 đoạn mã sau vào một tệp mới có tên

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

096

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

Bạn bao gồm các tệp PyScript thông thường trong tiêu đề HTML của mình, Biểu đồ. js được cung cấp từ jsDelivr CDN và biểu định 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ô-đun trình trợ giúp tùy chỉnh mà bạn đã tạo trước đây làm phần phụ thuộc của mình trong thẻ

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

10. Ở cuối tài liệu, bạn tìm nguồn mô-đun Python cốt lõi và mã vẽ đồ thị trong JavaScript

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

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

Hãy nhớ đặt các quy tắc kiểu tùy chỉnh của bạn sau biểu định kiểu PyScript trong HTML để có hiệu lực. 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ì xảy ra tiếp theo có thể ghi đè lên các quy tắc trước đó

Với lớp trình bày không còn nữa, đã đế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 phiên bản

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

517 và chuyển dữ liệu của bạn tới phiên bản đó vào một thời điểm nào đó. Mặc dù bạn chỉ cần tạo biểu đồ một lần, nhưng 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 hàm gọi lại để sử dụng lại logic đó

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

Hàm tạo của biểu đồ mong đợi thuộc tính

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

93 của phần tử

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

514 nơi biểu đồ của bạn sẽ xuất hiện và một đối tượng cấu hình mô tả giao diện của biểu đồ. Hàm gọi lại của bạn cũng nhận hai đối số—tức là giá trị x và y của chuỗi dữ liệu để vẽ biểu đồ. Những điểm dữ liệu này đến từ mã Python của bạn, 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 có chức năng 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 điều khiển của ứng dụng của bạn, lớp này sẽ nhập các biểu mẫu

Đây là mô-đun tiện ích được mô tả lại để thuận tiện cho bạn

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

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

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

Đây là bảng phân tích về chức năng của mã này theo từng dòng

Dòng 3 và 4 nhập mã từ các thư viện bên thứ ba bắt buộc
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 đó
Dòng 9 và 10 truy vấn tài liệu HTML bằng bộ chọn CSS để tìm hai phần tử thanh trượt và lưu chúng vào các biến để sử dụng sau
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
Các dòng 16 đến 19 xác định chức năng gọi lại đáp ứng các thay đổi giá trị của một trong các thanh trượt của bạn, biểu thị 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 đồ
Các dòng 21 đến 26 xác định hàm 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à cộng chúng lại với nhau trong khoảng thời gian đã chỉ đị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
```
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
```
520 của Pyodide và chuyển chúng tới một lệnh gọi lại được xác định trong mô-đun JavaScript của bạn
Các dòng 28 đến 30 bọc trình xử lý sự kiện
```
PS> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide
```
521 của bạn trong một 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 các thanh trượt

Dòng 32 gọi hàm trợ giúp

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

522 để hiển thị biểu đồ ban đầu của dạng sóng khi tải trang

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 hình và sử dụng phương thức

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

523 của PyScript như thế này

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

Hàm khởi tạo của lớp

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

92 nhận thuộc tính

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

93 của một phần tử HTML, thường là một phần tử

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

Vui lòng nâng cao dự án này—ví dụ: bằng cách biến sóng âm thanh đượ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ẻ nó miễn phí với bất kỳ ai trên thế giới, ngay cả khi họ không cài đặt trình thông dịch Python 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, nên bạn không cần máy chủ phụ trợ để mã đó được thực thi cho bạn. Do đó, việc phân phối các ứng dụng PyScript có nghĩa là lưu trữ một loạt các tệp tĩnh để trình duyệt sử dụng. Trang GitHub là một cách nhanh chóng và đơn giản để biến bất kỳ kho Git nào của bạn thành một trang web miễn phí

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

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

Để bắt đầu sử dụng 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 là

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

527, để 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 ở giai đoạn này, vì chúng sẽ xung đột với mã bạn đã có trên máy tính của mình. Ghi lại URL kho lưu trữ duy nhất của bạn sau đó. Nó sẽ trông giống như thế này

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

Bây giờ, hãy mở terminal và thay đổi thư mục làm việc của bạn thành thư mục gốc của dự án. Sau đó, khởi tạo 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

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

Giờ đây, bạn có thể đi tới cài đặt kho lưu trữ GitHub của mình và bật 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> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide

528 nên bạn muốn chọn nó từ menu thả xuống. Bạn cũng nên chọn thư mục gốc

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

529 và nhấp vào nút Lưu để xác nhận. Khi bạn làm như vậy, GitHub sẽ cần 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

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

Xin chúc mừng. Giờ đây, 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 trực tuyến với ứng dụng PyScript của bạn. Bước tiếp theo dành cho bạn sau khi đạt đến điểm này là đưa các tài nguyên đã rút gọn vào 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 một chút

Đó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 framework non trẻ nên việc khai thác mã nguồn của nó và loay hoay với nó thực sự không khó lắm. Tất cả những gì bạn cần là một ứng dụng khách Git, phiên bản mới nhất của Node. js và trình quản lý gói

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

530

Ghi chú. Bạn có thể cài đặt Nút. js thông qua Trình quản lý phiên bản nút, tương tự như pyenv trong Python

Khi bạn đã định cấu hình ba công cụ đó, hãy bắt đầu bằng cách sao chép 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> $VERSION='0.20.0'
PS> $TARBALL="pyodide-build-$VERSION.tar.bz2"
PS> $GITHUB_URL='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide

531 cục bộ

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

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

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

532 trong thư mục con

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

51, mở nó trong trình chỉnh sửa mã yêu thích của bạn và đổi tên thẻ HTML tùy chỉnh

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

1 được liên kết với lớp

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

535 thành, ví dụ:

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

536

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

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

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

537 trong dự án nhân bản và chạy lệnh build

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

Đ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='//github.com/pyodide/pyodide/releases/download'
PS> wget "$GITHUB_URL/$VERSION/$TARBALL"
PS> tar -xf "$TARBALL" --strip-components=1 pyodide

6 mới, trong số một số tệp khác, mà 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 mình

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

Đáng kinh ngạc. Bây giờ, bạn có thể rẽ nhánh này trên GitHub và mở yêu cầu kéo. Đùa thôi. Đó là một ví dụ về đồ chơi, nhưng nó đã thể hiện một cách độc đáo một số 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 đóng góp gì 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á hay về PyScript là gì, nó hoạt động như thế nào và nó cung cấp những gì. 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 tế 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ách

Xây dựng các ứng dụng giao diện người dùng tương tác bằng Python và JavaScript
Chạy mã Python hiện có trong trình duyệt web
Sử dụng lại cùng một mã trên back-end và front-end
Gọi các hàm Python từ JavaScript và ngược lại
Phân phối các chương trình Python không phụ thuộc

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à WebAssembly. Mặc dù đã có những nỗ lực trước đó về vấn đề này, nhưng PyScript là khung đầu tiên chạy 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ần sửa đổi hoặc sửa đổi ít

Bạn nghĩ gì về PyScript?

Đánh dấu là đã hoàn thành

🐍 Thủ thuật Python 💌

Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python

Gửi cho tôi thủ thuật Python »

Giới thiệu về Bartosz Zaczyński

Bartosz là người hướng dẫn bootcamp, tác giả và lập trình viên đa ngôn ngữ yêu thích Python. Anh ấy giúp sinh viên của mình tiếp cận công nghệ phần mềm bằng cách chia sẻ kinh nghiệm thương mại hơn một thập kỷ trong ngành CNTT

» Thông tin thêm về Bartosz

Mỗi hướng dẫn tại Real Python được tạo bởi một nhóm các nhà phát triển để nó đáp ứng các tiêu chuẩn chất lượng cao của chúng tôi. Các thành viên trong nhóm đã làm việc trong hướng dẫn này là

Tuổi tác

Geir Arne

kate

Bậc thầy Kỹ năng Python trong thế giới thực Với quyền truy cập không giới hạn vào Python thực

Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia

Nâng cao kỹ năng Python của bạn »

Bậc thầy Kỹ năng Python trong thế giới thực
Với quyền truy cập không giới hạn vào Python thực

Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia

Nâng cao kỹ năng Python của bạn »

Bạn nghĩ sao?

Đánh giá bài viết này

Tweet Chia sẻ Chia sẻ Email

Bài học số 1 hoặc điều yêu thích mà bạn đã học được là gì?

Mẹo bình luận. Những nhận xét hữu ích nhất là những nhận xét được viết với mục đích học hỏi hoặc giúp đỡ các sinh viên khác. Nhận các mẹo để đặt câu hỏi hay và nhận câu trả lời cho các câu hỏi phổ biến trong cổng thông tin hỗ trợ của chúng tôi

Trình duyệt Web python là gì?

Trong Python, mô-đun trình duyệt web là bộ điều khiển trình duyệt web tiện lợi . Nó cung cấp một giao diện cấp cao cho phép hiển thị các tài liệu trên nền Web cho người dùng. trình duyệt web cũng có thể được sử dụng như một công cụ CLI.

Tôi có thể xây dựng trình duyệt bằng python không?

Các bước triển khai GUI. .

Tạo một cửa sổ chính

Tạo một đối tượng QWebEngineView và thêm nó làm tiện ích trung tâm vào cửa sổ chính

Thêm thanh trạng thái vào cửa sổ chính

Tạo thanh công cụ và thêm nút điều hướng và chỉnh sửa dòng để hiện url, bên dưới đang hot thanh công cụ sẽ như thế nào

Trình duyệt nào được viết bằng python?

Grail là một trình duyệt web được viết bằng Python và có thể được viết bằng Python. Nó chậm nhưng không quá nhiều

từ chối trách nhiệm. PyScript là một dự án thử nghiệm

Bắt đầu với PyScript

Quấn đầu quanh PyScript

Viết “Xin chào, thế giới” đầu tiên của bạn. ” trong PyScript

Tìm nạp thời gian chạy Python từ Internet

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

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

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

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

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

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

Thư viện của bên thứ ba đi kèm với Pyodide

Bánh xe Python thuần túy được tải xuống từ PyPI

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

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

Giả lập Python REPL và Jupyter Notebook

Khám phá các thành phần trực quan của PyScript

PyTiêu đề

PyBox

PyButton

PyInputBox

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

Bộ điều hợp của PyScript cho Proxy JavaScript

Proxy JavaScript Pyodide

Proxy gọi lại sự kiện Python

Giao diện với trình duyệt web từ Python

Bánh quy

Tìm nạp API

Lưu trữ cục bộ

API cảm biến

Chức năng hẹn giờ

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

HTML và CSS

Mã JavaScript

Mã Python

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

Đóng góp cho PyScript

Sự kết luận

Trình duyệt Web python là gì?

Tôi có thể xây dựng trình duyệt bằng python không?

Trình duyệt nào được viết bằng python?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề