Tôi có thể chạy Python trong Chrome không?

Triển khai phát triển web đẳng cấu

JavaScript đẳng cấu hoặc JavaScript phổ quát, nhấn mạnh rằng các ứng dụng JavaScript nên chạy trên cả máy khách và máy chủ. Điều này giả định rằng phần cuối dựa trên JavaScript, cụ thể là máy chủ Node. Các nhà phát triển Python sử dụng Flask hoặc Django cũng có thể áp dụng các nguyên tắc đẳng cấu cho Python, miễn là họ có thể chạy Python trong trình duyệt

Brython cho phép bạn xây dựng giao diện người dùng bằng Python và chia sẻ các mô-đun giữa máy khách và máy chủ. Ví dụ: bạn có thể chia sẻ các chức năng xác thực, chẳng hạn như mã sau chuẩn hóa và xác thực số điện thoại của Hoa Kỳ

 1import re
 2
 3def normalize_us_phone[phone: str] -> str:
 4    """Extract numbers and digits from a given phone number"""
 5    return re.sub[r"[^\da-zA-z]", "", phone]
 6
 7def is_valid_us_phone[phone: str] -> bool:
 8    """Validate 10-digit phone number"""
 9    normalized_number = normalize_us_phone[phone]
10    return re.match[r"^\d{10}$", normalized_number] is not None

import antigravity

import antigravity

import antigravity

Accessing Web APIs

Internet browsers expose standardized web APIs to JavaScript. These standards are part of the HTML Living Standard. Some web API examples include

• Web Storage
• Web Crypto
• Web Workers
• Lịch sử
• URL

Brython allows you to both use the web APIs and interact with JavaScript. You’ll work with some of the web APIs in

Prototyping and JavaScript Libraries

Python is often used to prototype snippets of code, language constructs, or bigger ideas. With Brython, this common coding practice becomes available in your browser. For example, you can use the Brython console or the interactive editor to experiment with a snippet of code

Open the online editor and type the following code

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Here’s how this code works

• Line 1 imports the

  import antigravity
  

  5 module
• Line 3 defines

  import antigravity
  

  6, the callback function that’s invoked after getting the response from

  import antigravity
  

  7
• Line 6 calls

  import antigravity
  

  7 to retrieve the translation of “hello” in French using the HelloSalut API. Note that

  import antigravity
  

  9 can be

  import antigravity
  

  4 or

   1
   2
   3    
   4        
   6        
   7    
   8    
   9        
  10            import browser
  11            browser.alert["Hello Real Python!"]
  12        
  13    
  14
  

  1 when you execute this code in the Brython editor. It needs to be

  import antigravity
  

  4 if you execute the same code in the Brython console

Click Run above the output pane to see the following result

{"code":"fr","hello":"Salut"}

Try modifying the language from

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

Note. HelloSalut is one of the public APIs available on the Internet and listed in the Public APIs GitHub project

You can modify the code snippet in the online editor to consume a different public API. For example, try to fetch a from the Public APIs project

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Copy the code above into the online Brython editor and click Run to display the result. Here’s an example in JSON format

{
  "count": 1,
  "entries": [
    {
      "API": "Open Government, USA",
      "Description": "United States Government Open Data",
      "Auth": "",
      "HTTPS": true,
      "Cors": "unknown",
      "Link": "//www.data.gov/",
      "Category": "Government"
    }
  ]
}

Because the endpoint fetches a random project, you’ll probably get a different result. For more information about the JSON format, check out Working With JSON Data in Python

You can use prototyping to try out regular Python code as you would in the Python interpreter. Because you’re in the context of a browser, Brython also provides ways to

• Learn how to use the web APIs
• Interact with the Document Object Model [DOM]
• Use existing JavaScript libraries like jQuery, D3, and Bokeh as well as JavaScript UI frameworks like Vue. js

As a shortcut, you can take advantage of most of the features described above by opening the console or editor available on the Brython website. This doesn’t require you to install or run anything on your local computer. Instead, it gives you an online playground to interact with both Python and web technologies

Teaching Python to Students

Brython is both a Python compiler and an interpreter written in JavaScript. As a result, you can compile and run Python code in the browser. A good example of this feature is demonstrated by the online editor available on the Brython website

With the online editor, Python is running in the browser. There’s no need to install Python on a machine, and there’s no need to send code to the server to be executed. The feedback is immediate for the user, and this approach doesn’t expose the back end to malicious scripts. Students can experiment with Python on any device with a working browser, such as phones or Chromebooks, even with a spotty internet connection

Taking Performance Into Account

The Brython site notes that the implementation’s execution speed is comparable to CPython. But Brython is executed in the browser, and the reference in this environment is JavaScript baked into the browser engine. As a result, expect Brython to be slower than hand-written, well-tuned JavaScript

Brython compiles Python code into JavaScript and then executes the generated code. These steps have an impact on overall performance, and Brython may not always meet your performance requirements. In some cases, you may need to delegate some code execution to JavaScript or even WebAssembly. You’ll see how to build WebAssembly and how to use the resulting code in Python in the section on

However, don’t let perceived performance detract you from using Brython. For example, importing Python modules may result in downloading the corresponding module from the server. To illustrate this situation, open the Brython console and execute the following code

>>>

>>> import uuid

The delay until the prompt is displayed [390 ms on a test machine] is noticeable. This is due to Brython having to download

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

>>>

>>> uuid.uuid4[]
UUID['291930f9-0c79-4c24-85fd-f76f2ada0b2a']

Calling

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

Having Fun

If you’re reading this tutorial, then you’re probably interested in writing Python code in the browser. Seeing Python code executed in the browser is exciting for most Pythonistas and awakes a sense of fun and endless possibility

The author of Brython, Pierre Quentel, and the contributors to the project also kept the fun of Python in mind while undertaking the huge task of making this language compatible with the web browser

To prove it, point your browser to the Brython interactive console, and at the Python prompt, type the following

import this

Similar to the experience of Python on your local machine, Brython compiles and executes the instructions on the fly and prints The Zen of Python. It takes place in the browser and the Python code execution does not require any interaction with a back-end server

You can also try another classic Python Easter egg in the same browser environment with the following code

import antigravity

Brython embraces the same bits of humor that you’ll find in the Python reference implementation

Now that you’re familiar with the basics of working with Brython, you’ll explore more advanced features in the following sections

CDN Installation

Mạng phân phối nội dung [CDN] là mạng máy chủ cho phép cải thiện hiệu suất và tốc độ tải xuống cho nội dung trực tuyến. You can install Brython libraries from a few different CDNs

• CDNJS
• jsDelivr
• CDNPKG

You may choose this installation if you want to deploy a static website and add some dynamic behaviors to your pages with minimum overhead. You can think of this option as a substitute for jQuery, except using Python rather than JavaScript

To illustrate the use of Brython with a CDN, you’ll use CDNJS. Tạo một tệp có mã HTML sau

 1
 2
 3    
 4        
 6        
 7    
 8    
 9        
10            import browser
11            browser.alert["Hello Real Python!"]
12        
13    
14

Dưới đây là các yếu tố chính của trang HTML này

• Dòng 5 tải

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  01 từ CDNJS

• Dòng 8 thực thi

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  02 khi tài liệu tải xong.

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  02 reads the Python code in the current scope and compiles it to JavaScript. See the section for more details

• Line 9 sets the type of the script to

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  04. This indicates to Brython which code needs to be compiled and executed

• Line 10 imports

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  05, a Brython module that exposes objects and functions allowing interaction with the browser

• Line 11 calls

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  06, which displays a message box with the text

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  07

Save the file as

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

To reduce the size of the downloaded file, especially in production, consider using the minimized version of

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

The minimized version will reduce the download time and perceived latency from the user’s standpoint. In , you’ll learn how Brython is loaded by the browser and how the above Python code is executed

GitHub Installation

The GitHub installation is very similar to the CDN installation, but it allows you to implement Brython applications with the latest development version. You can copy the previous example and modify the URL in the

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

After saving this file in a local directory, double-click

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Cài đặt PyPI

So far, you haven’t needed to install anything in your local environment. Instead, you’ve indicated in the HTML file where the browser can find the Brython package. When the browser opens the page, it downloads the Brython JavaScript file from the appropriate environment, from either a CDN or GitHub

Brython is also available for local installation on PyPI. The PyPI installation is for you if

• You need more control and customization of the Brython environment beyond what’s available when pointing to a CDN file
• Your background is in Python and you’re familiar with

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  14
• You want a local installation to minimize network latency during development
• You want to manage your project and deliverables in a more granular fashion

Installing Brython from PyPI installs

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

For more details, you can consult the local installation documentation to see the capabilities of

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Before installing Brython, you want to create a Python virtual environment for this project

On Linux or macOS, execute the following commands

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

On Windows, you can proceed as follows

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

You’ve just created a dedicated Python environment for your project and updated

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

In the next steps, you’ll install Brython and create a default project. The commands are the same on Linux, macOS, and Windows

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

You’ve installed Brython from PyPI, created an empty folder named

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

In the

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

FileDescription

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

To test this newly created web project, you can start a local Python web server with the following commands

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

When you execute

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

For a more complete example, you can change the URL in the browser’s address bar to

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

With this approach, the Brython JavaScript files are loaded directly from your local environment. Notice the

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

The HTML above is indented to enhance readability in this tutorial. The command

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

The HTML file introduces a few new Brython features

• Line 6 loads

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  27, the Python standard library compiled to JavaScript

• Line 8 invokes

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  02 with the argument

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  43 to print error messages to the browser console

• Line 10 imports the

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  44 module from

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  05. Functions to access the DOM are available in

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  44

• Line 11 shows a new symbol [

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  47] added to Python as syntactic sugar. In this example,

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  48 is a substitute for

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  49. For details about these DOM functions, check out

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  50

The operator

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

npm Installation

If you’re well versed in the JavaScript ecosystem, then the npm installation might appeal to you. Node. js and npm are required before performing this install

Installing with npm will make the JavaScript Brython modules available in your project like any other JavaScript modules. You’ll then be able to take advantage of your favorite JavaScript tooling to test, package, and deploy the Brython interpreter and libraries. This installation is ideal if you already have existing JavaScript libraries installed with npm

Note. If you don’t have Node. js and npm installed on your system, then consider reading the rest of this section for information only, as you can safely skip the installation itself. The remainder of the tutorial doesn’t depend on the npm installation method for any of the examples

Assuming that you have npm installed on your system, create a default

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

To integrate Brython into your project, execute the following command

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

You can ignore the warnings and note that Brython was added to your project. To confirm, open

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

As for the previous examples, you can create the following

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

{"code":"fr","hello":"Salut"}

The browser renders

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Recap of Brython Installation Options

Brython có một chân trong thế giới Python và một chân khác trong JavaScript. The different installation options illustrate this cross-technology situation. Pick the installation that feels the most compelling to you based on your background

The following table provides you with some guidance

Type of InstallationContextCDNYou want to deploy a static website and add some dynamic behaviors to your pages with minimum overhead. You can think about this option as a substitute for jQuery, except using Python rather than JavaScript. GitHub Điều này tương tự như cài đặt CDN, nhưng bạn muốn thử nghiệm với phiên bản mới nhất của Brython. PyPIYour background is in Python. You’re familiar with

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Bảng này tóm tắt các tùy chọn cài đặt khác nhau có sẵn cho bạn. Trong phần tiếp theo, bạn sẽ tìm hiểu thêm về cách hoạt động của Brython

Thành phần cốt lõi của Brython

Cốt lõi của Brython được chứa trong

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

•  1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  02 là hàm JavaScript chính được hiển thị trong không gian tên toàn cục JavaScript. Bạn không thể thực thi bất kỳ mã Python nào mà không gọi hàm này. Đây là chức năng JavaScript duy nhất mà bạn phải gọi rõ ràng

•  1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  72 là một đối tượng toàn cầu JavaScript chứa tất cả các đối tượng bên trong cần thiết để chạy các tập lệnh Python. Đối tượng này không được sử dụng trực tiếp khi bạn viết ứng dụng Brython. Nếu bạn xem mã Brython, cả JavaScript và Python, thì bạn sẽ thấy sự xuất hiện thường xuyên của

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  72. Bạn không cần sử dụng đối tượng này, nhưng bạn nên biết về nó khi gặp lỗi hoặc khi bạn muốn gỡ lỗi mã của mình trong bảng điều khiển trình duyệt

• Các loại tích hợp là các triển khai của các loại tích hợp Python trong JavaScript. Ví dụ: py_int. js, py_string. js và py_dicts. js là các triển khai tương ứng của và

•  1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  05 là mô-đun trình duyệt hiển thị các đối tượng JavaScript thường được sử dụng trong ứng dụng web mặt trước, như giao diện DOM sử dụng

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  44 và cửa sổ trình duyệt sử dụng đối tượng

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  79

Bạn sẽ thấy từng thành phần này hoạt động khi bạn làm việc qua các ví dụ trong hướng dẫn này

Thư viện tiêu chuẩn Brython

Bây giờ bạn đã có ý tưởng tổng thể về tệp Brython cốt lõi,

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Brython được dự định càng gần càng tốt với CPython, triển khai tham chiếu Python. Để biết thêm thông tin về CPython, hãy xem Hướng dẫn của bạn về Mã nguồn CPython và Nội bộ CPython

Vì Brython đang chạy trong ngữ cảnh của trình duyệt web nên nó có một số hạn chế. Ví dụ: trình duyệt không cho phép truy cập trực tiếp vào hệ thống tệp, do đó, không thể mở tệp bằng

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

>>>

{"code":"fr","hello":"Salut"}

đưa ra một ngoại lệ vì việc xóa một tệp cục bộ khỏi môi trường trình duyệt là không an toàn và API Mục nhập Tệp và Thư mục chỉ là một đề xuất dự thảo

Brython chỉ hỗ trợ các mô-đun Python gốc. Nó không hỗ trợ các mô-đun Python được xây dựng bằng C trừ khi chúng được triển khai lại bằng JavaScript. Ví dụ:

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Bạn cần bao gồm

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Brython trong hành động

Tại thời điểm này, bạn có thể tự hỏi Brython hoạt động như thế nào trong một trình duyệt chỉ biết đến công cụ JavaScript của nó. Sử dụng lại các ví dụ trước và các công cụ có sẵn trong trình duyệt, bạn sẽ tìm hiểu về quy trình liên quan đến việc thực thi mã Python trong trình duyệt

Trong phần trên, bạn đã xem ví dụ sau

{"code":"fr","hello":"Salut"}

Khi tải và phân tích cú pháp trang HTML,

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

1. Đọc mã Python có trong phần tử

    1from browser import ajax
    2
    3def on_complete[req]:
    4    print[req.text]
    5
    6language = "fr"
    7
    8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
    9         blocking=True,
   10         oncomplete=on_complete]
   

   90
2. Biên dịch mã Python thành JavaScript tương đương
3. Đánh giá mã JavaScript kết quả với

    1from browser import ajax
    2
    3def on_complete[req]:
    4    print[req.text]
    5
    6language = "fr"
    7
    8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
    9         blocking=True,
   10         oncomplete=on_complete]
   

   91

Trong ví dụ trên, mã Python được nhúng trong tệp HTML

{"code":"fr","hello":"Salut"}

Một tùy chọn khác là tải xuống mã Python từ một tệp riêng

{"code":"fr","hello":"Salut"}

Trong trường hợp này, tệp Python sẽ trông như thế này

{"code":"fr","hello":"Salut"}

Tách mã Python khỏi mã HTML là một cách tiếp cận rõ ràng hơn và cho phép bạn tận dụng các lợi ích và chức năng của trình chỉnh sửa mã. Hầu hết các trình soạn thảo đều hỗ trợ JavaScript nhúng trong HTML, nhưng chúng không hỗ trợ Python nội tuyến trong HTML

Nội bộ của Brython

Phần này cung cấp thông tin chi tiết hơn về quá trình chuyển đổi mã Python thành JavaScript. Nếu bạn không quan tâm đến những chi tiết này, xin vui lòng bỏ qua phần này, vì nó không cần thiết để hiểu phần còn lại của hướng dẫn. Để minh họa quy trình này và xem qua nội bộ của Brython, hãy thực hiện các bước sau

1. Mở trang chủ Brython
2. Mở bảng điều khiển web bằng Cmd + Alt + . I on Mac or Ctrl+Shift+I on Windows and Linux.

Trong trình duyệt JavaScript REPL, nhập và thực thi đoạn mã sau

{"code":"fr","hello":"Salut"}

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Áp dụng

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Khi xây dựng một ứng dụng Brython, bạn không cần phải gọi rõ ràng một hàm trong mô-đun JavaScript

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Đối tượng JavaScript

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

API DOM ở Brython

Để thử nghiệm các thao tác DOM có sẵn trong Brython, bạn sẽ tạo một biểu mẫu để mã hóa một chuỗi thành Base64. Mẫu hoàn thành sẽ trông như thế này

Tạo tệp HTML sau và đặt tên là

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

{"code":"fr","hello":"Salut"}

HTML ở trên tải các tài nguyên tĩnh, xác định bố cục giao diện người dùng và bắt đầu quá trình biên dịch Python

• Dòng 7 tải biểu định kiểu PureCSS để cải thiện kiểu HTML mặc định. Điều này không cần thiết để Brython làm việc

• Dòng 9 tải phiên bản thu nhỏ của công cụ Brython

• Dòng 12 tải phiên bản thu nhỏ của thư viện chuẩn Brython

• Dòng 14 tải

  {"code":"fr","hello":"Salut"}
  
  

  00, xử lý logic động của trang HTML tĩnh này. Lưu ý việc sử dụng

  {"code":"fr","hello":"Salut"}
  
  

  01. Nó giúp đồng bộ hóa việc tải và đánh giá tài nguyên và đôi khi cần thiết để đảm bảo rằng Brython và bất kỳ tập lệnh Python nào được tải đầy đủ trước khi thực thi

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  02

• Dòng 21 mô tả trường

  {"code":"fr","hello":"Salut"}
  
  

  03. Trường này lấy chuỗi để mã hóa làm đối số

• Dòng 22 đến 25 xác định giá trị mặc định

  {"code":"fr","hello":"Salut"}
  
  

  04 kích hoạt logic chính của trang. Bạn có thể thấy logic này được triển khai trong

  {"code":"fr","hello":"Salut"}
  
  

  00 bên dưới

• Dòng 26 định nghĩa một

  {"code":"fr","hello":"Salut"}
  
  

  04 để xóa dữ liệu và thành phần trên trang. Điều này được thực hiện trong

  {"code":"fr","hello":"Salut"}
  
  

  00 bên dưới

• Dòng 29 tuyên bố một

  {"code":"fr","hello":"Salut"}
  
  

  08 dự định là một trình giữ chỗ cho một bảng

Mã Python được liên kết,

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

Mã Python hiển thị định nghĩa hàm gọi lại và cơ chế thao tác DOM

• Dòng 1 nhập các mô-đun mà bạn sử dụng để tương tác với DOM và mã API trình duyệt trong

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  70

• Nhập dòng 2

  {"code":"fr","hello":"Salut"}
  
  

  11, có sẵn trong thư viện tiêu chuẩn Brython,

   1from browser import ajax
   2
   3def on_complete[req]:
   4    print[req.text]
   5
   6language = "fr"
   7
   8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
   9         blocking=True,
  10         oncomplete=on_complete]
  

  88

• Dòng 4 khai báo một từ điển mà bạn sẽ sử dụng để lưu trữ dữ liệu trong suốt thời gian tồn tại của trang HTML

• Dòng 6 xác định trình xử lý sự kiện

  {"code":"fr","hello":"Salut"}
  
  

  13, mã hóa giá trị Base64 của văn bản được nhập vào trường đầu vào có ID

  {"code":"fr","hello":"Salut"}
  
  

  14. Đây là một hàm gọi lại lấy một sự kiện làm đối số. Đối số này không được sử dụng trong hàm nhưng được yêu cầu trong Brython và là tùy chọn trong JavaScript. Theo quy ước, bạn có thể sử dụng

  {"code":"fr","hello":"Salut"}
  
  

  15 làm trình giữ chỗ giả. Một ví dụ về cách sử dụng này được mô tả trong

• Dòng 7 truy xuất giá trị của phần tử DOM được xác định bằng

  {"code":"fr","hello":"Salut"}
  
  

  14

• Dòng 18 xác định trình xử lý sự kiện

  {"code":"fr","hello":"Salut"}
  
  

  17, xóa dữ liệu và trình bày dữ liệu trên trang này

• Dòng 22 định nghĩa

  {"code":"fr","hello":"Salut"}
  
  

  18, lấy dữ liệu có trong

  {"code":"fr","hello":"Salut"}
  
  

  19 và hiển thị nó dưới biểu mẫu trên trang

• Dòng 26 truy xuất phần tử DOM có ID

  {"code":"fr","hello":"Salut"}
  
  

  14

• Dòng 29 xóa giá trị của phần tử DOM có ID

  {"code":"fr","hello":"Salut"}
  
  

  14

• Dòng 31 ràng buộc sự kiện

  {"code":"fr","hello":"Salut"}
  
  

  22 của nút

  {"code":"fr","hello":"Salut"}
  
  

  23 với

  {"code":"fr","hello":"Salut"}
  
  

  13

• Dòng 32 liên kết sự kiện

  {"code":"fr","hello":"Salut"}
  
  

  22 của nút

  {"code":"fr","hello":"Salut"}
  
  

  26 với

  {"code":"fr","hello":"Salut"}
  
  

  17

Để thao tác với DOM, Brython sử dụng hai toán tử

1.  1from browser import ajax
    2
    3def on_complete[req]:
    4    print[req.text]
    5
    6language = "fr"
    7
    8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
    9         blocking=True,
   10         oncomplete=on_complete]
   

   47 là toán tử mới, dành riêng cho Brython, bổ sung phần tử con vào nút. Bạn có thể xem một vài ví dụ về cách sử dụng này trong

   {"code":"fr","hello":"Salut"}
   
   

   18, được định nghĩa ở dòng 22

2. {"code":"fr","hello":"Salut"}
   
   

   30 thay thế cho

   {"code":"fr","hello":"Salut"}
   
   

   31 và thêm các nút anh chị em

Bạn có thể thấy cả hai toán tử trong câu lệnh sau được lấy từ

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

Bạn có thể đọc đoạn mã trên là “thêm vào phần tử bảng một phần tử đầu bảng chứa một phần tử hàng của bảng bao gồm hai phần tử ô dữ liệu bảng liền kề. Nó được hiển thị trong trình duyệt dưới dạng mã HTML sau

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Mã HTML hiển thị cấu trúc lồng nhau cho hàng tiêu đề của phần tử bảng. Đây là một định dạng dễ đọc hơn của cùng một mã

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Để quan sát kết quả trong bảng điều khiển Brython, bạn có thể nhập khối mã sau

>>>

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Để thực thi mã đầy đủ, bạn cần khởi động máy chủ web. Như trước đây, bạn khởi động máy chủ web Python tích hợp trong cùng thư mục với hai tệp

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

{"code":"fr","hello":"Salut"}

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Sau khi khởi động máy chủ web, hãy trỏ trình duyệt của bạn tới

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Bạn sẽ mở rộng ví dụ này trong phần này bằng cách cho phép dữ liệu được lưu trữ giữa các lần tải lại trang

nhập khẩu ở brython

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

{"code":"fr","hello":"Salut"}

Các mô-đun Python là các tệp có phần mở rộng

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

Để khám phá cách nhập mô-đun Python vào mã Brython của bạn, hãy làm theo hướng dẫn được mô tả trong phần trên, tạo và kích hoạt môi trường ảo Python, cài đặt Brython và sửa đổi

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Tệp HTML ở trên hiển thị các mô-đun được nhập từ công cụ lõi [

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Mô-đun này thực hiện

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

If you try to open

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Nhập mô-đun Python yêu cầu khởi động máy chủ web cục bộ. Bắt đầu một máy chủ web cục bộ và trỏ trình duyệt của bạn tới

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

Với một máy chủ web đang chạy, trình duyệt có thể tìm nạp mô-đun

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

{"code":"fr","hello":"Salut"}

Giảm kích thước nhập khẩu

Trong thư mục dự án của ví dụ trước, để giảm kích thước của các mô-đun JavaScript đã nhập và để biên dịch trước các mô-đun Python thành JavaScript, bạn có thể sử dụng

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

{"code":"fr","hello":"Salut"}

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Điều này sẽ tạo ra

{"code":"fr","hello":"Salut"}

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6ajax.get["//api.publicapis.org/random",
 7         blocking=True,
 8         oncomplete=on_complete]

Dòng 4 thay đổi nguồn kịch bản ban đầu từ

 1from browser import ajax
 2
 3def on_complete[req]:
 4    print[req.text]
 5
 6language = "fr"
 7
 8ajax.get[f"//fourtonfish.com/hellosalut/?lang={language}",
 9         blocking=True,
10         oncomplete=on_complete]