Mục lục

Cho xem nhiều hơn

PyScript, được tạo bởi Anaconda, là một công nghệ mới thử nghiệm nhưng đầy hứa hẹn giúp thời gian chạy Python có sẵn dưới dạng ngôn ngữ kịch bản trong các trình duyệt hỗ trợ WebAssembly

Mọi trình duyệt hiện đại, thông dụng hiện nay đều hỗ trợ WebAssugging, tiêu chuẩn thời gian chạy tốc độ cao mà nhiều ngôn ngữ [như C, C++ và Rust] có thể biên dịch thành. Việc triển khai tham chiếu của Python được viết bằng C và một dự án trước đó, Pyodide, đã cung cấp một cổng WebAssugging của thời gian chạy Python

[ Cũng trên InfoWorld. Sự trỗi dậy của WebAssembly ]

Tuy nhiên, PyScript nhằm mục đích cung cấp toàn bộ môi trường trong trình duyệt để chạy Python dưới dạng ngôn ngữ kịch bản web. Nó được xây dựng dựa trên Pyodide nhưng bổ sung hoặc nâng cao các tính năng như khả năng nhập mô-đun từ thư viện chuẩn, sử dụng tính năng nhập của bên thứ ba, định cấu hình tương tác hai chiều với Mô hình đối tượng tài liệu [DOM] và thực hiện nhiều thứ hữu ích khác trong cả hai

Ngay bây giờ, PyScript vẫn là một dự án thử nghiệm và nguyên mẫu. Anaconda không khuyên bạn nên sử dụng nó trong sản xuất. Nhưng những người dùng tò mò có thể thử các ví dụ trên trang PyScript và sử dụng các thành phần có sẵn để xây dựng các ứng dụng Python-plus-JavaScript thử nghiệm trong trình duyệt

Trong bài viết này, chúng ta sẽ tìm hiểu những kiến ​​thức cơ bản về PyScript và xem cách nó cho phép Python và JavaScript tương tác

Lập trình với PyScript

Về cốt lõi, PyScript bao gồm một mã JavaScript duy nhất mà bạn có thể thêm vào một trang web. Điều này bao gồm tải thời gian chạy PyScript cơ sở và tự động thêm hỗ trợ cho các thẻ tùy chỉnh được sử dụng trong PyScript

Đây là một ví dụ đơn giản về dự án "xin chào, thế giới" trong PyScript

    
        
        
    
    


print["Hello world"]




    

Thẻ script trong tài liệu head tải chức năng cốt lõi của PyScript. Biểu định kiểu pyscript.css là tùy chọn, nhưng hữu ích. Trong số những thứ khác, nó chèn thông báo cho người dùng tại thời điểm tải trang về những gì trang đang làm—tải thời gian chạy Python, khởi tạo, v.v.

Mã Python được đặt trong thẻ py-script tùy chỉnh. Lưu ý rằng mã phải được định dạng theo quy ước của Python để thụt đầu dòng, nếu không mã sẽ không chạy đúng cách. Hãy lưu ý điều này nếu bạn sử dụng trình chỉnh sửa tự động định dạng lại HTML;

Bất kỳ mã Python nào cũng được đánh giá sau khi các thành phần PyScript tải xong. Nếu tập lệnh trong các thẻ ghi vào câu lệnh

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

Nếu bạn lưu tệp này vào một tệp và mở nó trong trình duyệt web, trước tiên bạn sẽ thấy chỉ báo "đang tải" và tạm dừng, vì trình duyệt lấy thời gian chạy PyScript và thiết lập nó. Thời gian chạy sẽ vẫn được lưu vào bộ nhớ cache trong các lần tải trong tương lai nhưng vẫn sẽ mất một chút thời gian để kích hoạt. Sau đó,

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

Nhập thư viện tiêu chuẩn

Các tập lệnh chỉ sử dụng nội trang của Python chỉ hữu ích một chút. Thư viện chuẩn của Python có sẵn trong PyScript giống như cách bạn sử dụng nó trong Python thông thường. chỉ cần

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

Nếu bạn muốn sửa đổi khối tập lệnh ở trên để hiển thị thời gian hiện tại, bạn không cần thực hiện điều đó khác với cách bạn làm trong Python thông thường

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

Sử dụng thư viện từ PyPI

Nếu chúng ta muốn cài đặt một gói từ PyPI và sử dụng gói đó thì sao? . Hãy thay thế khối py-script trong tập lệnh gốc bằng hai khối này

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

Khối

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

Lưu ý rằng không phải tất cả các gói từ PyPI sẽ cài đặt và chạy như mong đợi. Chẳng hạn,

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

- humanize



from datetime import datetime
import humanize
now_int = int[datetime.timestamp[datetime.now[]]]
now_fmt = humanize.intcomma[now_int]
print["It has been", now_fmt, "seconds since the epoch."]

Nhập khẩu tại địa phương

Đối với một tình huống phổ biến khác, giả sử bạn muốn nhập từ các tập lệnh Python khác trong cùng cây thư mục với trang web của mình. Sử dụng tính năng nhập giúp dễ dàng di chuyển nhiều logic Python của bạn ra khỏi trang web, nơi nó được trộn lẫn với bản trình bày của bạn và có thể trở nên khó làm việc với

Thông thường, Python sử dụng sự hiện diện của các tệp

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

Giả sử bạn có một trang web có tên

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

Chỉ định các tệp Python mà bạn muốn có thể nhập được trong khối

import datetime
print ["Current date and time:",
    datetime.datetime.now[].strftime["%Y/%m/%d %H:%M:%S"]]

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

Điều này sẽ cho phép

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

Một điều quan trọng cần ghi nhớ. Bạn không thể thực hiện nhập như thế này trên trang web mà bạn đã khởi chạy cục bộ trong trình duyệt. Điều này là do các hạn chế đối với quyền truy cập hệ thống tệp được áp đặt bởi thời gian chạy WebAssugging và chính trình duyệt. Thay vào đó, bạn cần lưu trữ các trang trên máy chủ web để phục vụ trang web và tệp

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

[ Cũng trên InfoWorld. 4 chìa khóa để viết Python hiện đại vào năm 2022 ]

Thẻ REPL

Người dùng Python phải quen thuộc với Jupyter Notebook, môi trường mã hóa trực tiếp trong trình duyệt dành cho Python thường được sử dụng cho toán học và thống kê. PyScript cung cấp một khối xây dựng nguyên thủy cho một môi trường như vậy, thẻ

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

  
    
    
  

  
    
pyscript REPL
    Tip: press Shift-ENTER to evaluate a cell
    

    

       
    
  

Chạy mã này và bạn sẽ thấy một trường nhập liệu, hoạt động giống như REPL của Python

Hiện tại, thẻ REPL có rất ít cách thức tùy chỉnh tài liệu. Chẳng hạn, nếu bạn muốn truy cập nội dung của một ô hoặc kết quả của ô đó theo chương trình, thì không có tài liệu rõ ràng nào về cách thực hiện điều đó

Thành phần REPL giống như Jupyter của PyScript cho phép bạn chạy Python một cách tương tác trong một trang, mặc dù nó chưa linh hoạt hoặc có thể định cấu hình

Tương tác với trình xử lý sự kiện JavaScript

Bởi vì PyScript dựa trên

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

Thư viện

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

from js import document, console
from pyodide import create_proxy

def _eventlog[e]:
    console.log[f"Input value: {e.target.value}"]

eventlog = create_proxy[_eventlog]

document.getElementById["txt"].addEventListener["input", eventlog]

Có liên quan

• con trăn
• Phát triển web
• Phát triển phần mềm

Serdar Yegulalp là một nhà văn cao cấp tại InfoWorld, tập trung vào học máy, container hóa, devops, hệ sinh thái Python và đánh giá định kỳ

Có thể chạy Python trong trình duyệt không?

Chúng tôi có thể sử dụng Python trong tiện ích mở rộng của Chrome không?