Hướng dẫn how do i open a python file in html? - làm cách nào để mở một tệp python trong html?

Question

Tôi đã thực hiện chính xác điều này trên Windows. Tôi có một trang .html cục bộ mà tôi sử dụng làm "bảng điều khiển" cho tất cả các công việc hiện tại của tôi. Ngoài các liên kết thông thường, tôi đã có thể thêm các liên kết có thể nhấp mở các tài liệu từ MS, bảng tính Excel, mở IDE của tôi, SSH vào máy chủ, v.v.

Nội dung chính Show

Xử lý tập tin
Điều kiện tiên quyết
Pyscript là gì?
Pyscript hoạt động như thế nào?
Thiết lập thư mục dự án của bạn cho Pyscript
Bắt đầu
Pyscript nội bộ
Pyscript bên ngoài
Tạo tệp <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 1
Tạo tệp <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 2
Liên kết tệp <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 2 trong tệp HTML
Nhiều bài viết tuyệt vời hơn từ Logrocket:
Mở tệp <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 1 trong trình duyệt
Sử dụng pyscript replin
Sử dụng các mô -đun python trong pyscript
Tạo các mô -đun tùy chỉnh
Nhập các mô -đun từ Thư viện tiêu chuẩn Python
Sử dụng các gói của bên thứ ba
Truy cập và thao tác các phần tử HTML bằng Pyscript
Sử dụng lớp <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 5
Gắn các sự kiện vào các yếu tố
Sử dụng JavaScript để truy cập và thao tác với DOM
Tìm nạp và hiển thị dữ liệu từ API
Dữ liệu tồn tại bằng cách sử dụng <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 6
Tương tác với hệ thống tệp
Sự kết luận
Bạn đang thêm các thư viện JS mới để cải thiện hiệu suất hoặc xây dựng các tính năng mới? Điều gì sẽ xảy ra nếu họ làm điều ngược lại?
Làm cách nào để chạy tệp python trong HTML?
Bạn có thể sử dụng tệp Python trong HTML không?
Làm cách nào để mở một tệp python trong trình duyệt của tôi?

Đầu tiên, cập nhật sổ đăng ký Windows. Trình duyệt của bạn xử lý các giao thức thông thường như HTTP, HTTPS, FTP. Bạn có thể xác định giao thức của riêng bạn và một trình xử lý sẽ được gọi khi nhấp vào liên kết của loại giao thức đó. Đây là cấu hình (chạy với

mkdir .vscode &amp;&amp; cd .vscode

3)

[HKEY_CLASSES_ROOT\mydb]
@="URL:MyDB Document"
"URL Protocol"=""

[HKEY_CLASSES_ROOT\mydb\shell]
@="open"

[HKEY_CLASSES_ROOT\mydb\shell\open]

[HKEY_CLASSES_ROOT\mydb\shell\open\command]
@="wscript C:\_opt\Dashboard\Dashboard.vbs \"%1\""

Với điều này, khi tôi có một liên kết như

mkdir .vscode &amp;&amp; cd .vscode

4, nhấp vào nó sẽ gọi

mkdir .vscode &amp;&amp; cd .vscode

5 chuyển cho nó tham số dòng lệnh

mkdir .vscode &amp;&amp; cd .vscode

6. Mã VBS của tôi xem xét tham số này và thực hiện điều cần thiết (trong trường hợp này, bởi vì nó kết thúc bằng .docx, nó gọi MS-word với

mkdir .vscode &amp;&amp; cd .vscode

7 làm tham số cho nó.

Bây giờ, tôi đã viết trình xử lý của mình bằng VBS chỉ vì nó là mã rất cũ (như hơn 15 năm). Tôi đã không thử nó, nhưng thay vào đó, bạn có thể viết một trình xử lý Python,

mkdir .vscode &amp;&amp; cd .vscode

8. Tôi sẽ để nó cho bạn viết người xử lý của riêng bạn. Đối với các tập lệnh của bạn, liên kết của bạn có thể là

mkdir .vscode &amp;&amp; cd .vscode

9 (tiền tố

{
  "editor.formatOnSave": false
}

0 cho biết tay cầm của bạn chạy với Python).

Xử lý tập tin là một phần quan trọng của bất kỳ ứng dụng web nào.

Python có một số chức năng để tạo, đọc, cập nhật và xóa các tệp.

Xử lý tập tin

Chức năng chính để làm việc với các tệp trong Python là hàm

{
  "editor.formatOnSave": false
}

1.

Hàm

{
  "editor.formatOnSave": false
}

1 có hai tham số; Tên tệp và chế độ.

Có bốn phương thức khác nhau (chế độ) để mở tệp:

{
  "editor.formatOnSave": false
}

3 - Đọc - Giá trị mặc định. Mở một tệp để đọc, lỗi nếu tệp không tồn tại

{
  "editor.formatOnSave": false
}

4 - Phụ lục - Mở một tệp để thêm vào, tạo tệp nếu nó không tồn tại

{
  "editor.formatOnSave": false
}

5 - Viết - Mở tệp để viết, tạo tệp nếu nó không tồn tại

{
  "editor.formatOnSave": false
}

6 - Tạo - Tạo tệp được chỉ định, trả về lỗi nếu tệp tồn tại

Ngoài ra, bạn có thể chỉ định nếu tệp nên được xử lý làm chế độ nhị phân hoặc văn bản

{
  "editor.formatOnSave": false
}

7 - Text - Giá trị mặc định. Chế độ văn bản

{
  "editor.formatOnSave": false
}

8 - Binary - Chế độ nhị phân (ví dụ: hình ảnh)

Cú pháp

Để mở một tệp để đọc nó là đủ để chỉ định tên của tệp:

Mã trên giống như:

f = open ("demofile.txt", "rt")

Bởi vì

{
  "editor.formatOnSave": false
}

3 cho đọc và

{
  "editor.formatOnSave": false
}

7 cho văn bản là các giá trị mặc định, bạn không cần chỉ định chúng.

Lưu ý: Đảm bảo rằng tệp tồn tại, nếu không bạn sẽ gặp lỗi. Make sure the file exists, or else you will get an error.

Trong một thời gian dài, JavaScript đã là ngôn ngữ thống trị trong sự phát triển frontend do khả năng chạy tự nhiên trong trình duyệt và tương tác với HTML và CSS thông qua API DOM. Với sự ra đời của webassugging, mọi thứ đã bắt đầu thay đổi chậm. Các ngôn ngữ như Go, Rust, C, C ++ và nhiều ngôn ngữ khác giờ đây có thể chạy trong trình duyệt với tốc độ gần như bản địa, và Python đã bị bỏ lại phía sau.

Với sự ra đời của Pyscript, các nhà phát triển Frontend hiện có thể xây dựng các mặt tiền phong phú với Python. Hơn nữa, họ cũng có thể khai thác vào hệ sinh thái Python, có các mô -đun khoa học hữu ích như Numpy, Matplotlib, và nhiều hơn nữa.

Trong hướng dẫn này, chúng tôi sẽ trình bày như sau:

Pyscript là gì?
Pyscript hoạt động như thế nào?
Thiết lập thư mục dự án của bạn cho Pyscript
Vô hiệu hóa các công cụ tự động định dạng như đẹp hơn
Bắt đầu
Pyscript nội bộ

Pyscript bên ngoài

Tạo tệp

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

1

Tạo tệp

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

2

Liên kết tệp

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

2 trong tệp HTML

Mở tệp

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

1 trong trình duyệt

Sử dụng pyscript replin
Sử dụng các mô -đun python trong pyscript
- Tạo các mô -đun tùy chỉnh
- Nhập các mô -đun từ Thư viện tiêu chuẩn Python
- Sử dụng các gói của bên thứ ba

Truy cập và thao tác các phần tử HTML bằng Pyscript

Sử dụng lớp

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

5

Gắn các sự kiện vào các yếu tố

Sử dụng JavaScript để truy cập và thao tác với DOM
Tìm nạp và hiển thị dữ liệu từ API

Dữ liệu tồn tại bằng cách sử dụng

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

6

Tương tác với hệ thống tệp

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

Để tận dụng tối đa hướng dẫn này, bạn sẽ cần:

Một sự hiểu biết cơ bản về HTML, CSS và JavaScript
Làm quen với cú pháp Python
Một máy chủ web. Chúng tôi sẽ tạo một máy chủ đơn giản bằng Python, vì vậy hãy chắc chắn rằng bạn đã cài đặt Python trên hệ thống của mình
Một trình duyệt web; Tài liệu Pyscript hiện khuyến nghị Chrome

Pyscript là gì?

Pyscript là một khung web nguồn mở cho phép bạn tạo các ứng dụng web frontend bằng Python. Với Pyscript, bạn có thể nhúng mã Python vào HTML hoặc liên kết đến tệp Python và mã sẽ thực thi trong trình duyệt - mà không cần chạy Python trong phần phụ trợ.

Pyscript được tạo ra bởi Anaconda và được công bố công khai vào ngày 30 tháng 4 tại Pycon US 2022. Tại thời điểm viết, Pyscript đang ở trạng thái alpha và đang tích cực được phát triển, vì vậy hãy phá vỡ các thay đổi và các tính năng mới hơn được mong đợi vì nó không Đã được phát hành ổn định.

Pyscript hoạt động như thế nào?

Pyscript xây dựng dựa trên pyodide, mà chuyển CPython đến Webassugging. WebAssugging là một định dạng nhị phân cấp thấp cho phép bạn viết các chương trình bằng các ngôn ngữ khác, sau đó được thực thi trong trình duyệt. Với CPyThon trong WebAssugging, chúng tôi có thể cài đặt và chạy các gói Python trong trình duyệt, trong khi Pyscript tóm tắt hầu hết các hoạt động pyodide, cho phép bạn tập trung vào việc xây dựng các ứng dụng Frontend với Python trong trình duyệt.

Thiết lập thư mục dự án của bạn cho Pyscript

Trước khi chúng tôi bắt đầu sử dụng Pyscript, hãy để Lừa tạo thư mục nơi mã của chúng tôi sẽ nằm.

Để làm điều đó, hãy mở thiết bị đầu cuối của bạn và tạo thư mục dự án bằng lệnh

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

7 ở vị trí bạn chọn:

mkdir pyscript_demo

Tiếp theo, di chuyển vào thư mục bạn vừa tạo bằng lệnh

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

8:

cd pyscript_demo

Thông thường, các nhà phát triển Frontend sử dụng các công cụ tự động định dạng như đẹp hơn trong các trình soạn thảo văn bản của họ để định dạng mã trên Save. Mặc dù điều này hoạt động tốt cho HTML, CSS và JavaScript, nhưng điều này có thể gây ra các vấn đề trong mã Python vì Python nghiêm ngặt về thụt lề.

Hiện tại, các công cụ tự động định dạng như don don đẹp hơn nhận ra cú pháp pyscript, chỉ khoảng hai tháng tuổi như bài viết này. Các công cụ này tự động định dạng mã python như JavaScript, phá vỡ sự thụt mã. Để khắc phục điều này, chúng tôi sẽ vô hiệu hóa tự động định dạng cho thư mục này.

Giả sử bạn sử dụng VSCode, chúng tôi có thể vô hiệu hóa định dạng tự động như sau.

Trong thư mục dự án của bạn, hãy tạo một thư mục

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

9 và điều hướng vào thư mục với lệnh sau.

mkdir .vscode &amp;&amp; cd .vscode

Tiếp theo, tạo tệp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

0 và thêm các nội dung sau:

{
  "editor.formatOnSave": false
}

Cùng với đó, tính năng Auto Format On Save cho thư mục này đã bị vô hiệu hóa trong VSCODE và chúng tôi hiện đã sẵn sàng để bắt đầu sử dụng Pyscript.

Bắt đầu

Bây giờ thư mục của chúng tôi được thiết lập cho Pyscript, trước tiên chúng tôi sẽ thêm các liên kết vào các tài sản Pyscript bao gồm tệp CSS và tệp JavaScript trong phần

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

1 của trang HTML.

Khi tài sản đã được thêm vào, bạn có thể sử dụng Pyscript trong tệp HTML theo hai cách:

Pyscript nội bộ: Bạn có thể viết và đặt mã Python của mình trong thẻ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
2 trong tệp HTML. Thẻ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
2 có thể được thêm vào thẻ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
1 hoặc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
5 tùy thuộc vào nhiệm vụ của bạn trong tay: You can write and place your Python code within the

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 tag in an HTML file. The

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 tag can be added in the

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

1 or

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5 tag depending on your task at hand

Pyscript bên ngoài: Đây là nơi bạn viết mã Python của mình vào một tệp kết thúc bằng tiện ích mở rộng
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
6, sau đó bạn có thể tham khảo trong thẻ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
2 bằng cách sử dụng thuộc tính
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Greetings!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> </body> </html>
8: This is where you write your Python code in a file ending with

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

6 extension, which you can then reference in the

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 tag using the

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

8 attribute

Pyscript nội bộ

Cách dễ nhất và nhanh nhất để bắt đầu sử dụng Pyscript là nhúng mã Python vào tệp HTML. Hãy để làm điều đó!

Mở trình soạn thảo văn bản ưa thích của bạn, tạo tệp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

9 và thêm các nội dung sau:

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

Trong phần

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

1, chúng tôi liên kết với tệp

def greetings(name):
    print(f'Hi, {name}')

greetings('John Doe')

1, chứa các kiểu cho các thành phần trực quan pyscript, repl, trình tải pyscript, v.v. Tạo các thẻ như

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 nơi bạn có thể viết mã Python của mình.

Trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5, bạn đã nhúng mã Python vào thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2. Bây giờ chúng tôi đang giữ mọi thứ đơn giản, vì vậy chúng tôi chỉ in

def greetings(name):
    print(f'Hi, {name}')

greetings('John Doe')

6 cho người dùng.

Đảm bảo lưu tệp của bạn trong root của thư mục dự án của bạn và mở tệp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

9 trong Chrome. Sẽ mất một vài giây để tải và một khi trang đã được tải, nó sẽ trông tương tự như thế này:

Pyscript bên ngoài

Trong khi đặt mã python vào thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 hoạt động, một cách tiếp cận tốt hơn và có thể mở rộng hơn nhiều là thêm mã vào một tệp bên ngoài và tham chiếu nó trong tệp HTML khi bạn tạo thêm các trang HTML hoặc tập lệnh của bạn lớn hơn.

Sau đây là một số lý do tại sao bạn nên xem xét sử dụng mã Pyscript trong một tệp bên ngoài:

Tệp có thể được lưu trữ bởi trình duyệt, dẫn đến hiệu suất nhanh hơn
Bạn có thể tham khảo tệp trong nhiều trang, giảm trùng lặp
Mã Python của bạn có thể được định dạng với các công cụ như Linters Black hoặc Python. Những công cụ này hiện đang hoạt động trên mã python được nhúng trong tệp HTML

Để sử dụng Pyscript bên ngoài, chúng tôi sẽ tạo một tệp

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

1, tệp Python kết thúc bằng tiện ích mở rộng

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

6 chứa mã Python của chúng tôi và cuối cùng tham chiếu tệp Python trong tệp

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

1.

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

Tạo tệp

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

1 và liên kết đến tài sản Pyscript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

Các tập tin không phải là làm nhiều; Chúng tôi chỉ đang liên kết với các tài nguyên pyscript. Để làm cho nó hữu ích hơn, chúng tôi sẽ tạo một tệp

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

2 nơi mã Python của chúng tôi sẽ nằm.

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

Hãy để tạo ra một chức năng Python in một thông điệp chào hỏi.

Trong trình soạn thảo văn bản của bạn, hãy tạo tệp

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

2 và thêm mã bên dưới:

def greetings(name):
    print(f'Hi, {name}')

greetings('John Doe')

Hàm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

7 có tham số

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

8 và in thông báo chào với tên được lưu trong tham số

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

8. Khi chúng tôi gọi hàm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

7 với

python -m http.server

1 là một đối số, nó sẽ in

python -m http.server

2.

Liên kết tệp <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 2 trong tệp HTML

Bây giờ bạn đã tạo mã Python, bạn sẽ tham khảo tệp

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

2 trong tệp

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

1.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
Chuyển đổi giữa nhiều phiên bản của nút
Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
So sánh NestJS so với Express.js

Mở

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

1 và thêm dòng bên trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

Thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 có thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

8, chấp nhận đường dẫn tệp của tệp Python.

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

Bây giờ mọi thứ đã được đưa ra, chúng tôi sẽ mở

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

1 trong trình duyệt.

Tuy nhiên, các trình duyệt sẽ từ chối tải và thực thi tệp Python bên ngoài do lỗi chính sách chia sẻ tài nguyên có nguồn gốc chéo (CORS). Để giải quyết vấn đề này, chúng ta sẽ cần sử dụng một máy chủ. Điều tốt là Python vận chuyển với một máy chủ web mà chúng ta có thể sử dụng! Máy chủ không cần phải được tạo bởi Python, bạn có thể sử dụng máy chủ trực tiếp hoặc bất kỳ máy chủ nào bạn chọn.

Để tạo một máy chủ, hãy mở thiết bị đầu cuối trong thư mục gốc của dự án của bạn và chạy lệnh sau:

python -m http.server

Tiếp theo, mở chrome và ghé thăm

mkdir pyscript_demo

02. Máy chủ sẽ tự động tải tệp

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

1 và bạn sẽ thấy như sau:

Đối với phần còn lại của hướng dẫn này, chúng tôi sẽ tham khảo một tệp Python bên ngoài, điều này sẽ yêu cầu chúng tôi sử dụng máy chủ để tránh lỗi CORS và đôi khi chúng tôi sẽ nhúng mã Python trong HTML vì lợi ích ngắn gọn.

Sử dụng pyscript replin

Pyscript đi kèm với một vòng lặp in read-eval (repl), mà bạn có thể sử dụng để thử nghiệm và thử mã Python.

Để sử dụng replet, hãy thêm thẻ

mkdir pyscript_demo

04 trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5 trong tệp

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

1 của bạn:

mkdir pyscript_demo

0

Với máy chủ vẫn đang chạy, hãy truy cập

mkdir pyscript_demo

02. Bạn sẽ thấy một phần mới nơi bạn có thể nhập mã Python.

Bạn có thể nhập các mô -đun, đánh giá các biểu thức, tạo các chức năng và làm nhiều việc hơn. Để xem những gì một biểu thức đánh giá, bạn cần nhấp vào biểu tượng chơi màu xanh lá cây.Play icon.

Hình ảnh sau đây cho thấy một số hoạt động bạn có thể làm:

Bây giờ chúng ta đã biết cách sử dụng repl, tiếp theo chúng ta sẽ tìm hiểu cách tạo và sử dụng các mô -đun trong Pyscript.

Sử dụng các mô -đun python trong pyscript

Trong phần này, chúng tôi sẽ tạo một mô -đun Python tùy chỉnh và sử dụng nó trong mã của chúng tôi. Chúng tôi cũng sẽ sử dụng các mô-đun từ Thư viện tiêu chuẩn Python, cũng như các mô-đun của bên thứ ba.

Để sử dụng các mô -đun, chúng tôi sẽ giới thiệu một thẻ mới,

mkdir pyscript_demo

08, cho phép chúng tôi tham chiếu các mô -đun hoặc đường dẫn tệp mô -đun.

Tạo các mô -đun tùy chỉnh

Hãy để tạo ra một mô -đun cục bộ chứa hai chức năng.

Tạo tệp

mkdir pyscript_demo

09 trong thư mục dự án của bạn và thêm mã bên dưới:

mkdir pyscript_demo

1

Ở đây chúng tôi đã tạo ra hai chức năng thực hiện các hoạt động bổ sung và trừ.

Tiếp theo, tạo tệp

mkdir pyscript_demo

10 và thêm các nội dung sau:

mkdir pyscript_demo

2

Trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5, chúng tôi sử dụng thẻ

mkdir pyscript_demo

08, chấp nhận danh sách YAML có

mkdir pyscript_demo

13 làm khóa của nó.

mkdir pyscript_demo

09 là đường dẫn tệp của mô -đun tùy chỉnh so với tệp

mkdir pyscript_demo

10. Khi đường dẫn đến mô -đun tùy chỉnh được chỉ định, Pyscript sẽ nhập mô -đun trong tệp.

Với mô -đun được tải, trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2, chúng tôi nhập hàm

mkdir pyscript_demo

17 từ

mkdir pyscript_demo

09 và gọi hàm với các đối số

mkdir pyscript_demo

19 và

mkdir pyscript_demo

20.

Với máy chủ đang chạy, hãy truy cập

mkdir pyscript_demo

21 và bạn sẽ thấy một trang tương tự như thế này:

Nhập các mô -đun từ Thư viện tiêu chuẩn Python

Pyscript, với sự trợ giúp của pyodide, cung cấp quyền truy cập vào rất nhiều mô -đun có sẵn trong thư viện tiêu chuẩn Python đã sẵn sàng để bạn sử dụng, ngoại trừ những điều sau đây:

tkinter
Venv
DBM

Truy cập tài liệu Pyodide để xem một danh sách toàn diện. Ngoài ra, hãy lưu ý các mô -đun được bao gồm nhưng không chức năng, chẳng hạn như các mô -đun đa xử lý, luồng và ổ cắm.

Các mô -đun trong thư viện tiêu chuẩn có sẵn trong không gian tên Pyscript theo mặc định; Bạn chỉ cần nhập chúng để sử dụng chúng trong tệp.

Vẫn trong tệp

mkdir pyscript_demo

10, sửa đổi mã Python trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2 để tạo số ngẫu nhiên bằng mô -đun

mkdir pyscript_demo

24:

mkdir pyscript_demo

3

Bây giờ hãy truy cập trang

mkdir pyscript_demo

21 và bạn sẽ thấy một số ngẫu nhiên được tạo mỗi khi bạn làm mới trang:

Sử dụng các gói của bên thứ ba

Ngoài việc sử dụng các mô-đun Python sẵn có, bạn cũng có thể sử dụng các thư viện của bên thứ ba được vận chuyển trong pyodide, chẳng hạn như:

Numpy
Gấu trúc
pytest
Jinja2
beautifulsoup4
matplotlib
PIL
scikit-learn

Để biết danh sách đầy đủ các gói của bên thứ ba được hỗ trợ, hãy truy cập tài liệu pyodide hoặc theo dõi chặt chẽ trên repo github pyodide.

Để thêm gói của bên thứ ba, hãy tạo tệp HTML mới,

mkdir pyscript_demo

26 và thêm mã sau:

mkdir pyscript_demo

4

Trong thẻ

mkdir pyscript_demo

08, chúng tôi thêm một danh sách các gói của bên thứ ba mà chúng tôi muốn sử dụng trong dự án của mình, đó là các gói numpy và matplotlib. Tiếp theo, trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

2, chúng tôi nhập Numpy dưới dạng

mkdir pyscript_demo

29 và matplotlib là

mkdir pyscript_demo

30. Theo đó, chúng tôi gọi phương thức Numpy từ

mkdir pyscript_demo

31, tạo ra một mảng sau đó được lưu trữ trong biến

mkdir pyscript_demo

32. Sau đó, chúng tôi gọi phương thức Matplotlib từ

mkdir pyscript_demo

33 với mảng

mkdir pyscript_demo

32 là một đối số để vẽ đồ thị.

Hãy chắc chắn rằng tệp của bạn được lưu và truy cập trang

mkdir pyscript_demo

35. Bạn sẽ thấy một biểu đồ tương tự như sau:

Bây giờ bạn đã hiểu cách sử dụng các mô-đun tùy chỉnh, sẵn có và các gói của bên thứ ba, chúng tôi sẽ học cách truy cập và thao tác các phần tử HTML trong phần tiếp theo.

Truy cập và thao tác các phần tử HTML bằng Pyscript

Trong phần này, chúng tôi sẽ tìm hiểu cách chọn phần tử HTML bằng ID hoặc lớp CSS, sửa đổi phần tử, đính kèm các sự kiện vào một phần tử và tạo các phần tử mới bằng Pyscript.

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

Pyscript vận chuyển với lớp

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

5, cho phép bạn chọn phần tử HTML bằng ID của nó.

Để xem nó hoạt động như thế nào, hãy tạo một tệp

mkdir pyscript_demo

38 và chèn các nội dung sau:

mkdir pyscript_demo

5

Trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5, chúng tôi có phần tử

mkdir pyscript_demo

40 với ID là

mkdir pyscript_demo

41. Chúng tôi sẽ sử dụng ID để chọn phần tử này bằng lớp

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

5. Trường hợp đã chọn sẽ cung cấp cho chúng ta các phương thức mà chúng ta có thể sử dụng để chọn con cháu và thao túng chúng.

Một thẻ khác chúng tôi sẽ sử dụng là

mkdir pyscript_demo

43 với ID là

mkdir pyscript_demo

44. Chúng tôi sẽ sửa đổi

mkdir pyscript_demo

45 của nó để viết một giá trị mới. Cuối cùng, sau thẻ

mkdir pyscript_demo

43, chúng tôi liên kết với tệp

mkdir pyscript_demo

47 sẽ chứa mã Python của chúng tôi. Nó không tồn tại, vì vậy, hãy để đi trước và tạo ra nó.

Khi bạn tạo tệp

mkdir pyscript_demo

47, hãy thêm mã sau vào nó:

mkdir pyscript_demo

6

Trong mã trước, chúng tôi sử dụng lớp

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

5 để truy cập phần tử

mkdir pyscript_demo

40 bằng ID

mkdir pyscript_demo

41.

Khi một phần tử được chọn bằng lớp

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

5, bạn có thể tận dụng một số phương pháp sau:

mkdir pyscript_demo

53: Đặt giá trị

mkdir pyscript_demo

45

```
mkdir pyscript_demo
```
55: Sử dụng bộ chọn CSS để tìm các yếu tố hậu duệ
```
mkdir pyscript_demo
```
56: Thêm một hoặc nhiều lớp vào một phần tử
```
mkdir pyscript_demo
```
57: Xóa một hoặc nhiều lớp khỏi một phần tử

Trong dòng thứ hai, chúng tôi sử dụng phương thức

mkdir pyscript_demo

55 để chọn phần tử con thứ nhất của phần tử

mkdir pyscript_demo

40 bằng tên lớp của nó,

mkdir pyscript_demo

60. Sau khi chọn trẻ, chúng tôi gọi phương thức

mkdir pyscript_demo

56 để thêm lớp mới

mkdir pyscript_demo

62 vào phần tử

mkdir pyscript_demo

63.

Trong dòng thứ ba, chúng tôi truy cập phần tử con thứ hai bằng tên lớp của nó,

mkdir pyscript_demo

64, sau đó xóa lớp

mkdir pyscript_demo

64 của nó bằng phương pháp

mkdir pyscript_demo

57.

Tiếp theo, chúng tôi gọi lớp

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

5 với ID

mkdir pyscript_demo

44, cung cấp một tham chiếu đến phần tử

mkdir pyscript_demo

43 nằm sau phần tử

mkdir pyscript_demo

70 trong tệp

mkdir pyscript_demo

38. Cuối cùng, chúng tôi gọi phương thức

mkdir pyscript_demo

53 với chuỗi

mkdir pyscript_demo

73. Phương thức sẽ đặt phần tử

mkdir pyscript_demo

43 giá trị

mkdir pyscript_demo

45 thành đối số chuỗi.

Với máy chủ vẫn còn, hãy truy cập

mkdir pyscript_demo

76 và kiểm tra phần tử

mkdir pyscript_demo

40. Bạn sẽ thấy phần tử

mkdir pyscript_demo

63 đầu tiên hiện có một lớp phụ (

mkdir pyscript_demo

62), phần tử thứ hai không có lớp và phần tử

mkdir pyscript_demo

80 hiện có văn bản chúng tôi đặt trong Python.

Gắn các sự kiện vào các yếu tố

Bây giờ chúng ta có thể chọn các phần tử HTML và thực hiện một số thao tác cơ bản. Trong phần này, chúng tôi sẽ đính kèm một sự kiện nhấp chuột vào một phần tử và thực thi mã Python khi phần tử đã được nhấp.

Tạo tệp

mkdir pyscript_demo

81 và ghi mã bên dưới:

mkdir pyscript_demo

7

Trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5, chúng tôi có

mkdir pyscript_demo

83 với thuộc tính

mkdir pyscript_demo

84 chứa một số lớp là một phần của tệp

def greetings(name):
    print(f'Hi, {name}')

greetings('John Doe')

1. Thẻ

mkdir pyscript_demo

83 cũng có thuộc tính

mkdir pyscript_demo

87, gắn một sự kiện

mkdir pyscript_demo

88 vào nút. Thuộc tính

mkdir pyscript_demo

87 chấp nhận tên hàm

mkdir pyscript_demo

90, đây sẽ là hàm chạy khi nhấp vào nút.

Tiếp theo, chúng ta có phần tử

mkdir pyscript_demo

80 với ID là

mkdir pyscript_demo

44. Chúng tôi sẽ sửa đổi phần tử trong

mkdir pyscript_demo

45 với hàm

mkdir pyscript_demo

90 mà chúng tôi xác định.

Cuối cùng, chúng tôi liên kết đến tệp

mkdir pyscript_demo

95, trong đó sẽ chứa chức năng xử lý sự kiện.

Hãy để xác định

mkdir pyscript_demo

95 và thêm các mục sau:

mkdir pyscript_demo

8

Hàm

mkdir pyscript_demo

90 có tham số,

mkdir pyscript_demo

98, đây là đối tượng sự kiện được truyền tự động đến chức năng khi bạn nhấp vào nút. Bên trong hàm, chúng tôi gọi phương thức Pyscript từ ____ ____153, có hai đối số: ID phần tử

mkdir pyscript_demo

44 và giá trị chúng tôi muốn viết, trong trường hợp của chúng tôi,

cd pyscript_demo

01.

Đảm bảo rằng máy chủ của bạn đang chạy:

python -m http.server

Sau đó truy cập URL

cd pyscript_demo

02 trong Chrome. Khi trang tải, nhấp vào nút và một thông báo đọc Bạn đã nhấp vào nút, sẽ xuất hiện:

Sử dụng JavaScript để truy cập và thao tác với DOM

Pyscript vận chuyển với mô -đun

cd pyscript_demo

03 cho phép bạn truy cập vào các phương thức JavaScript, như

cd pyscript_demo

04,

cd pyscript_demo

05,

cd pyscript_demo

06, v.v., để truy cập và thao tác các phần tử HTML. Với những điều này, bạn sẽ có thể kết hợp JavaScript và Python để thực hiện một số thao tác DOM tuyệt vời. Đây là một ví dụ:

cd pyscript_demo

0

Như bạn có thể thấy, chúng tôi đang trộn các phương thức mã Python như

cd pyscript_demo

07 cùng với các thuộc tính JavaScript

cd pyscript_demo

08 hoặc

cd pyscript_demo

09.

Trong phần này, chúng tôi chủ yếu sẽ tập trung vào các phương thức

cd pyscript_demo

09 và thuận tiện, Pyscript thực hiện nó trong phạm vi Python tự động. Chúng tôi đã giành chiến thắng thậm chí cần nhập mô -đun

cd pyscript_demo

03 để sử dụng các phương thức

cd pyscript_demo

09.

Tạo tệp

cd pyscript_demo

13 và thêm mã sau:

cd pyscript_demo

1

Trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5, chúng tôi chỉ có phần tử

mkdir pyscript_demo

40 trống với ID là

mkdir pyscript_demo

41. Tiếp theo, chúng tôi tham khảo

cd pyscript_demo

17 sẽ chứa mã Python của chúng tôi.

Tạo tệp

cd pyscript_demo

17 và thêm các nội dung sau:

cd pyscript_demo

2

Trong dòng đầu tiên, chúng tôi gọi phương thức

cd pyscript_demo

04 của mô -đun

cd pyscript_demo

09 với

cd pyscript_demo

21 là đối số của nó. Phương thức sẽ tìm và trả về một phần tử với ID là

mkdir pyscript_demo

41, đó là phần tử

mkdir pyscript_demo

40 trong tệp

cd pyscript_demo

13.

Trong dòng thứ hai, chúng tôi tạo một danh sách các văn bản điều hướng và lưu trữ nó trong biến

cd pyscript_demo

25. Sau đó, chúng tôi lặp lại danh sách

cd pyscript_demo

25. Trên mỗi lần lặp, chúng tôi gọi phương thức

cd pyscript_demo

05 với chuỗi

cd pyscript_demo

28 để tạo phần tử

mkdir pyscript_demo

63.

Sau đó, chúng tôi thêm văn bản vào phần tử

mkdir pyscript_demo

63 bằng thuộc tính

cd pyscript_demo

31 và thêm tên lớp

cd pyscript_demo

32 vào phần tử

mkdir pyscript_demo

63 bằng thuộc tính

cd pyscript_demo

34. Cuối cùng, chúng tôi nối phần tử

mkdir pyscript_demo

63 vào phần tử

mkdir pyscript_demo

40 bằng cách gọi

cd pyscript_demo

06 với phần tử

cd pyscript_demo

38 làm đối số.

Đảm bảo rằng tệp của bạn được lưu và máy chủ vẫn đang chạy. Truy cập

cd pyscript_demo

39 và bạn sẽ thấy một trang giống như sau:

Nếu bạn đào sâu hơn và kiểm tra các yếu tố, bạn sẽ thấy rằng các yếu tố

mkdir pyscript_demo

63 đã được tạo với tên lớp

cd pyscript_demo

32, mà chúng tôi đặt trong Python:

Bây giờ chúng ta có thể truy cập và thao tác DOM bằng lớp

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

5, đính kèm các sự kiện vào các phần tử và sử dụng JavaScript để truy vấn và sửa đổi DOM. Tiếp theo, chúng tôi sẽ tìm nạp dữ liệu từ API bằng Pyscript.

Tìm nạp và hiển thị dữ liệu từ API

Trong phần này, chúng tôi sẽ sử dụng Pyscript để gửi yêu cầu

cd pyscript_demo

43 đến API để truy xuất dữ liệu. API chúng tôi sẽ sử dụng là API dữ liệu ngẫu nhiên. Chúng tôi sẽ tạo một nút bằng một sự kiện nhấp chuột để chạy một hàm gọi API mỗi khi nhấp vào nút.

Tạo tệp

cd pyscript_demo

44 trong thư mục của bạn và thêm các nội dung sau:

cd pyscript_demo

3

Mã nên quen thuộc vào thời điểm này. Phần quan trọng nhất là thẻ

mkdir pyscript_demo

83, có thuộc tính

cd pyscript_demo

46 chấp nhận hàm

cd pyscript_demo

47. Hàm sẽ nằm trong tệp

cd pyscript_demo

48 được liên kết ở phía dưới. Hãy để đi trước và tạo tập tin.

Trong trình soạn thảo văn bản của bạn, hãy tạo một tệp mới có tên

cd pyscript_demo

48 với các nội dung sau:

cd pyscript_demo

4

Trong dòng đầu tiên, chúng tôi nhập phương thức

cd pyscript_demo

50 từ mô -đun

cd pyscript_demo

51, cho phép chúng tôi thực hiện các yêu cầu mạng không đồng bộ. Trong dòng thứ hai, chúng tôi nhập mô -đun

cd pyscript_demo

52, là một phần của thư viện tiêu chuẩn Python và cung cấp các từ khóa

cd pyscript_demo

53 và

cd pyscript_demo

54 hữu ích để tạo các hàm không đồng bộ.

Tiếp theo, chúng tôi xác định hàm không đồng bộ

cd pyscript_demo

47 bằng cách tiền tố nó với từ khóa

cd pyscript_demo

53 từ mô -đun

cd pyscript_demo

52. Trong hàm, chúng tôi gọi phương thức

cd pyscript_demo

50 chấp nhận hai đối số:

```
cd pyscript_demo
```
59: Điểm cuối API
```
cd pyscript_demo
```
60: Loài phương pháp HTTP bạn muốn sử dụng, đó là phương pháp
```
cd pyscript_demo
```
43 ở đây.

Khi

cd pyscript_demo

50 chạy, nó trả về một đối tượng, sau đó được lưu trữ trong biến

cd pyscript_demo

63. Trong dòng sau, chúng tôi gọi

cd pyscript_demo

64 trên đối tượng

cd pyscript_demo

63 để phân tích JSON và trả về từ điển Python, sau đó được lưu trữ trong biến

cd pyscript_demo

66.

Trong một vài dòng tiếp theo, bạn trích xuất tên, tên đệm và họ từ

cd pyscript_demo

66 Dict và lưu trữ chúng trong các biến tương ứng của chúng. Cuối cùng, chúng tôi kết hợp các tên bằng cách sử dụng các chuỗi F Python và gọi phương thức

cd pyscript_demo

68 để ghi dữ liệu trong phần tử

mkdir pyscript_demo

43 với ID là

mkdir pyscript_demo

44.

Hãy chắc chắn rằng máy chủ của bạn đang chạy và truy cập trang

cd pyscript_demo

71. Khi trang tải, nhấp vào nút

cd pyscript_demo

72. Bạn sẽ thấy rằng một tên mới được tạo mỗi khi nhấp vào nút:

Dữ liệu tồn tại bằng cách sử dụng <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World!</title>  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body>  <py-script>print("Hello World!")</py-script> </body> </html> 6

Trong phần này, chúng tôi sẽ sử dụng lưu trữ cục bộ để lưu và truy xuất dữ liệu. Lưu trữ cục bộ là một đối tượng trong trình duyệt web có thể lưu trữ dữ liệu mà không cần hết hạn. Python có thể sử dụng lưu trữ cục bộ bằng cách nhập nó từ mô -đun

cd pyscript_demo

03.

Để sử dụng lưu trữ cục bộ, chúng tôi sẽ tạo một khu vực văn bản cho phép người dùng nhập nhận xét. Nếu họ muốn lưu bình luận, họ sẽ nhấp vào nút

cd pyscript_demo

75 sẽ chạy chức năng lưu dữ liệu trong bộ nhớ cục bộ. Mỗi khi trang được truy cập, dữ liệu sẽ được truy xuất từ lưu trữ cục bộ và khu vực văn bản sẽ được đặt thành dữ liệu.

Tạo tệp

cd pyscript_demo

76 và thêm các nội dung sau:

cd pyscript_demo

5

Trong thẻ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

5, chúng tôi tạo thẻ

cd pyscript_demo

78 với ID

cd pyscript_demo

79. Chúng tôi sẽ sử dụng ID này để có được một tham chiếu về phần tử khu vực văn bản trong Python. Tiếp theo, chúng tôi có một nút có

cd pyscript_demo

75 là ID của nó và một sự kiện nhấp chuột sẽ gọi hàm

cd pyscript_demo

81, mà chúng tôi đã định nghĩa. Cuối cùng, chúng tôi tham khảo

cd pyscript_demo

82, trong đó sẽ chứa mã Python của chúng tôi. Hãy để tạo ra các tập tin ngay bây giờ.

Tạo

cd pyscript_demo

82 và thêm các mục sau:

cd pyscript_demo

6

Đầu tiên, chúng tôi nhập đối tượng

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

6 từ mô -đun

cd pyscript_demo

03. Tiếp theo, chúng tôi xác định hàm

cd pyscript_demo

86, lấy

mkdir pyscript_demo

98 làm tham số. Bên trong hàm, chúng tôi gọi lớp

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

5 với ID

cd pyscript_demo

79 để có được tham chiếu của khu vực văn bản. Khi phương thức tìm thấy khu vực văn bản, chúng tôi sử dụng thuộc tính

cd pyscript_demo

90 để lấy nội dung vùng văn bản và lưu trữ giá trị trong biến

cd pyscript_demo

91. Trong dòng tiếp theo, chúng tôi gọi phương thức

cd pyscript_demo

92 của đối tượng

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

6 để lưu văn bản nhận xét trong đối tượng

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

6 dưới khóa

cd pyscript_demo

79.

Bây giờ, hàm

cd pyscript_demo

86 sẽ chỉ chạy khi nhấp vào nút

cd pyscript_demo

75. Tuy nhiên, tiến hành bên ngoài chức năng

cd pyscript_demo

86, các dòng theo sau hàm sẽ chỉ thực thi trong quá trình tải trang.

Khi trang được tải lần đầu tiên, chúng tôi sử dụng câu lệnh

cd pyscript_demo

99 để kiểm tra xem đối tượng

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

6 có dữ liệu dưới khóa

cd pyscript_demo

79 không. Nếu đúng, chúng tôi tham chiếu khu vực văn bản bằng lớp

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

5 và lưu trữ thể hiện của nó trong biến

mkdir .vscode &amp;&amp; cd .vscode

03. Tiếp theo, chúng tôi gọi phương thức

mkdir pyscript_demo

53 của ví dụ

mkdir .vscode &amp;&amp; cd .vscode

03 để cập nhật nội dung khu vực văn bản với dữ liệu từ lưu trữ cục bộ.

Hãy chắc chắn rằng máy chủ của bạn đang chạy và truy cập

mkdir .vscode &amp;&amp; cd .vscode

06. Nhập bất kỳ văn bản bạn thích và nhấp vào nút Lưu.Save button.

Tiếp theo, làm mới URL và bạn sẽ thấy khu vực văn bản chứa văn bản bạn đã lưu trong lần truy cập ban đầu.

Với điều đó, bây giờ bạn biết cách tận dụng

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

6 bằng Pyscript. Tiếp theo, chúng tôi sẽ đọc một tệp trong hệ thống tệp bằng Pyscript.

Tương tác với hệ thống tệp

Trong phần này, chúng tôi sẽ sử dụng Pyscript để đọc dữ liệu từ tệp Plaintext trong hệ thống tệp cục bộ và nối nội dung của nó vào DOM.

Đầu tiên, hãy để tạo một tệp chứa dữ liệu chúng tôi muốn đọc. Trong thư mục dự án chính của bạn, hãy chạy lệnh sau để tạo và chuyển sang một thư mục mới:

cd pyscript_demo

7

Tiếp theo, tạo tệp

mkdir .vscode &amp;&amp; cd .vscode

08 và thêm các nội dung sau, là tên của các khung web Python:

cd pyscript_demo

8

Lưu tệp và quay lại gốc của thư mục dự án của bạn:

cd pyscript_demo

9

Với tệp được tạo, hãy tạo tệp

mkdir .vscode &amp;&amp; cd .vscode

09 trong trình soạn thảo văn bản của bạn với các mục sau:

mkdir .vscode &amp;&amp; cd .vscode

0

Trong thẻ

mkdir pyscript_demo

08, chúng tôi chỉ định đường dẫn đến

mkdir .vscode &amp;&amp; cd .vscode

08, liên quan đến đường dẫn

mkdir .vscode &amp;&amp; cd .vscode

09. Tiếp theo, chúng tôi tạo một thẻ

mkdir pyscript_demo

40 trống với ID

mkdir .vscode &amp;&amp; cd .vscode

14. Cuối cùng, chúng tôi tham khảo

mkdir .vscode &amp;&amp; cd .vscode

15, mà chúng tôi sẽ xác định sớm.

Tạo

mkdir .vscode &amp;&amp; cd .vscode

15 với các nội dung sau:

mkdir .vscode &amp;&amp; cd .vscode

1

Trong dòng đầu tiên, chúng tôi gọi phương thức

cd pyscript_demo

04 với bộ chọn ID

mkdir .vscode &amp;&amp; cd .vscode

18, có tham chiếu của phần tử

mkdir pyscript_demo

40. Trong dòng thứ hai, chúng tôi gọi phương thức

{
  "editor.formatOnSave": false
}

1 với tên tệp

mkdir .vscode &amp;&amp; cd .vscode

08 và lưu trữ đối tượng tệp là

mkdir .vscode &amp;&amp; cd .vscode

22.

Trong câu lệnh

mkdir .vscode &amp;&amp; cd .vscode

23, chúng tôi lặp lại trên mỗi dòng được lưu trữ trong đối tượng tệp

mkdir .vscode &amp;&amp; cd .vscode

22. Trong mỗi lần lặp, chúng tôi tạo một phần tử

mkdir pyscript_demo

63 bằng phương pháp

cd pyscript_demo

09 đối tượng ____ ____205. Tiếp theo, chúng tôi đặt nội dung văn bản

mkdir pyscript_demo

63 thành giá trị trong biến

mkdir .vscode &amp;&amp; cd .vscode

29 bằng thuộc tính

mkdir .vscode &amp;&amp; cd .vscode

30 của thể hiện

mkdir .vscode &amp;&amp; cd .vscode

31. Cuối cùng, chúng tôi nối phần tử

mkdir pyscript_demo

63 vào phần tử

mkdir pyscript_demo

40 bằng cách gọi

cd pyscript_demo

06 với

mkdir .vscode &amp;&amp; cd .vscode

31 làm đối số.

Khởi động lại máy chủ (nếu bạn dừng nó trước đó):

python -m http.server

Truy cập URL

mkdir .vscode &amp;&amp; cd .vscode

36 và bạn sẽ thấy nội dung từ tệp PlainText được hiển thị trên trang:

Nếu bạn kiểm tra các yếu tố, bạn sẽ thấy rằng có bốn phần tử

mkdir pyscript_demo

63 được nối với phần tử

mkdir pyscript_demo

40.

Với điều đó, bây giờ bạn có thể đọc các tệp trong hệ thống tệp. Bạn có thể sử dụng cùng một cách tiếp cận để đọc các tệp CSV và nhiều định dạng tệp khác.

Sự kết luận

Trong hướng dẫn này, chúng tôi đã học cách sử dụng pyscript repl, tạo các mô-đun tùy chỉnh, sử dụng các mô-đun từ thư viện tiêu chuẩn Python và nhập các mô-đun bên thứ ba. Chúng tôi cũng đã học cách truy cập và thao tác các phần tử bằng Pyscript, thực hiện các yêu cầu API, sử dụng

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

6 và đọc tệp Plaintext từ hệ thống tệp.

Để khám phá Pyscript hơn nữa, hãy truy cập trang chủ Pyscript. Ngoài ra, hãy xem trang Tài liệu Pyodide để tìm hiểu thêm về các khả năng mà nó cho phép trong trình duyệt.

Bạn đang thêm các thư viện JS mới để cải thiện hiệu suất hoặc xây dựng các tính năng mới? Điều gì sẽ xảy ra nếu họ làm điều ngược lại?

Không có nghi ngờ gì về việc Frontends đang trở nên phức tạp hơn. Khi bạn thêm các thư viện JavaScript mới và các phụ thuộc khác vào ứng dụng của bạn, bạn sẽ cần nhiều khả năng hiển thị hơn để đảm bảo người dùng của bạn không gặp phải các vấn đề không xác định.

Logrocket là một giải pháp giám sát ứng dụng Frontend cho phép bạn phát lại các lỗi JavaScript như thể chúng đã xảy ra trong trình duyệt của riêng bạn để bạn có thể phản ứng với lỗi hiệu quả hơn.

https://logrocket.com/signup/

Logrocket hoạt động hoàn hảo với bất kỳ ứng dụng nào, bất kể khung và có các plugin để đăng nhập bối cảnh bổ sung từ Redux, Vuex và @ngrx/Store. Thay vì đoán tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái của ứng dụng của bạn khi xảy ra vấn đề. Logrocket cũng theo dõi hiệu suất ứng dụng của bạn, báo cáo các số liệu như tải CPU của máy khách, sử dụng bộ nhớ máy khách và hơn thế nữa.

Xây dựng một cách tự tin - bắt đầu giám sát miễn phí.

Làm cách nào để chạy tệp python trong HTML?

Sử dụng thẻ và sau đó đề cập đến mã Python bên trong thẻ.Sau đó, bạn có thể truyền trực tiếp tệp Python.Nó sẽ tạo ra một tiện ích.. After that you can pass the Python file directly. It will create a widget.

Bạn có thể sử dụng tệp Python trong HTML không?

Pyscript là một khung web nguồn mở cho phép bạn tạo các ứng dụng web frontend bằng Python.Với Pyscript, bạn có thể nhúng mã Python vào HTML hoặc liên kết đến tệp Python và mã sẽ thực thi trong trình duyệt - mà không cần chạy Python trong phần phụ trợ.With PyScript, you can either embed Python code in HTML, or link to a Python file and the code will execute in the browser — without running Python in the backend.

Làm cách nào để mở một tệp python trong trình duyệt của tôi?

Pyscript cho phép bạn chạy các tập lệnh Python ngay trong trình duyệt, cạnh nhau với JavaScript, với tương tác hai chiều giữa mã của bạn và trang web ...

Lập trình với pyscript ..

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

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

Nhập khẩu địa phương ..

Thẻ repress ..

Tương tác với người nghe sự kiện JavaScript ..

programming python open() python Python with open Read file Python Python file io Open file Python