Brython——浏览器中执行的Python，用它教Python入门超级省事

最新推荐文章于 2023-11-27 10:57:06 发布

与非学堂

最新推荐文章于 2023-11-27 10:57:06 发布

阅读量5k

点赞数 6

分类专栏： Python 少儿编程文章标签： python javascript

本文链接：https://blog.csdn.net/cg1985cg/article/details/115128694

版权

少儿编程同时被 2 个专栏收录

61 篇文章 7 订阅

订阅专栏

Python

30 篇文章 7 订阅

订阅专栏

话说我们的学生嘟嘟小萌新，不懂太多计算机操作，却要开始学习Python了。

该不该学那是一个社会性的问题，谁都可以站在自己立场表示一下态度。

怎么让他们容易学、能学好则是一个技术性问题。教育者不得不面对，不得不思考这个问题。

一个最最最基础的问题：怎么让学生更容易地编写出第一行代码，让他们得到更快速的结果反馈？

现有的解决方案有好多不如意的地方。

比如典型的成人学习，一上来就得装Python开发环境，真是不同操作系统不同的淚！

就算是用Jupyter Notebook，让学生只在网页端使用，也还得配置一下服务器。

套用成人的这种办法教小朋友学Python，不好的地方在于：

安装编程环境是一个技术活，需要你自己或者找一个懂点的人提前给学生的电脑上安装。

这是一个人力成本问题，一般能安装好的人，那得身经百战才行，这工资得出啊！

还涉及一个信任问题，家长凭什么相信你全权控制他的电脑呢？

还有，万一折腾二三十分钟，没有安装好，那岂不是太尴尬？家长心里会怎么评价这老师？

真是费时费力又不讨喜。

就算是线下机构自己为学生们提供电脑，安装保证每台电脑都能正常使用，是不是也要大费一番周折？

好了，我要是再不进入正题，怕你拿竹竿打人……

到底怎么办？

请服一粒Brython，瞬间心旷神怡！

初识Brython

请看Hello World：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js"> </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython_stdlib.js"> </script>
</head>
<body onload="brython()">
    <script type="text/python">
        from browser import document
        document <= "Hello World!"
</script>
</body>
</html>

结果当然不出意料：

在第11到14行之间，都是用Python语言写的代码。

或者你想要弹窗也没问题，只需要把这几行Python改为：

import browser
browser.alert("Hello Real Python!")

如果想要在Console中Debug，那么直接用print就好了。

print("Hello World!")

Brython正常运行需要有几点：

1. brython.js，像其他js库一样调用就可以了。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js"> </script>

2. 文档加载结束时，要调用brython()函数。

 <body onload="brython()">

3. 将script标签的语言类型设置为Python。

<script type="text/python">

brython()函数会把当前节点范围内带type="text/python"的script脚本都翻译为JavaScript执行。

简单的说，Brython就是一只披着Python皮的JavaScript。

A Python implementation in JavaScript.
A Python to JavaScript translator and a runtime executing in the browser.

Brython解析

刚才一开始的Hello World中，我们加载的第一个库是brython.js。

brython.js是Brython核心组件库（Brython Core Components）。主要有这几个核心组件：

brython()函数

这是暴露给JavaScript命名空间的一个最主要的函数，也是唯一一个需要显示调用的一个JavaScript函数。

__BRYTHON__

这是一个JavaScript全局变量。它里面含有所有运行Python代码用的内部对象。我们写Brython代码时并不需要直接使用这个全局变量，只是在debug时见到不要太惊慌就行。

py_int.js, py_string.js, py_dict.js等

这些是JavaScript版的Python内置对象实现库，感兴趣可以打开看一看源代码。

browser

这是通常意义上用JavaScript交互的document和window对象的Python实现模块。

除了brython.js，还有另外一个库是brython_stdlib.js，它实现的是Brython标准库（Brython Standard Library）。

Brython肯定不是我们在操作系统上安装的Python，但是在尽力做到跟CPython一致。

速度比起本地执行，确实是要差一点点！

在浏览器环境下运行，也有不少限制。比如不能直接访问文件系统，不能使用os库等与浏览器环境不相关的库等。

但是，这些都不是问题。

在让初学者以最简单的方式就能写出第一行代码这个问题上，我认为它是最佳的选择。

有了Brython，你就可以使用Python语言来操作浏览器API和DOM了。

并且还有机会和已有的JS代码框架进行交互，合理利用已有的JS功能。

比如自己写了一段JS代码，想用Python读取它（其他JS全局变量也是一样调用）：

<script type="text/javascript">
     function myMessageBox(name) {
       window.alert(`Hello ${name}!`);
     }
</script>
 <script type="text/python">
     from browser import window
     window.myMessageBox("Jon")
</script>

这里再看一个跟Vue.js交互的例子。


<!DOCTYPE html >
<html>
  <head>
    <meta charset="utf-8"/>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython_stdlib.min.js"></script>
    <script src="main.py" type="text/python"></script>
    <style>
      body { padding: 30px; }
      [v-cloak] { visibility: hidden; }
</style>
  </head>

<body onload="brython(1)">
  <div id="app">
    <form class="pure-form" onsubmit="return false;">
      <fieldset>
        <legend>Hash Calculator</legend>
        <input type="text" v-model.trim="input_text"
               placeholder="Text to Encode" autocomplete="off"/>
        <select v-model="algo" v-cloak>
          <option v-for="name in algos" v-bind:value="name">

          </option>
        </select>
        <button @click="compute_hash" type="submit"
                class="pure-button pure-button-primary">Ok</button>
      </fieldset>
    </form>
    <p v-cloak></p>
  </div>
</body>

下面是main.py的代码：


from browser import alert, window
from javascript import this
import hashlib

hashes = {
    "sha-1": hashlib.sha1,
    "sha-256": hashlib.sha256,
    "sha-512": hashlib.sha512,
}

Vue = window.Vue

def compute_hash(evt):
    value = this().input_text
    if not value:
        alert("You need to enter a value")
        return
    hash_object = hashes[this().algo]()
    hash_object.update(value.encode())
    hex_value = hash_object.hexdigest()
    this().hash_value = hex_value

def created():
    for name in hashes:
        this().algos.append(name)
    this().algo = next(iter(hashes))

app = Vue.createApp(
    {
        "el": "#app",
        "created": created,
        "data": lambda _: {"hash_value": "", "algos": [], "algo": "", "input_text": ""},
        "methods": {"compute_hash": compute_hash},
    }
)

app.mount("#app")

这样的话，Brython跟某些游戏框架交互也是非常方便的了，而这正是Brython用于Python教学的魅力所在。

当然不用说，Brython还能让前后端的开发都统一起来，有可能复用同样的代码片段。

比如这段验证电话号码的代码，前后端都可以通用：


import re

def normalize_us_phone(phone: str) -> str:
    """Extract numbers and digits from a given phone number"""
    return re.sub(r"[^\da-zA-z]", "", phone)

def is_valid_us_phone(phone: str) -> bool:
    """Validate 10-digit phone number"""
    normalized_number = normalize_us_phone(phone)
    return re.match(r"^\d{10}$", normalized_number) is not None

这几点，也是Brython和Jupyter Notebook不太一样的地方。

有了这个，你既可以做成网站系统平台，供学生直接账号登录，又可以让他单机编辑，直接打开HTML文件。

总结

教育人的派别也是分明的。

比如我们就坚持认为，每一步呈现最简最相关的学习内容，提供最便利的材料和媒介，勾起学习兴趣，逐步引导提升，才是最重要的。

怎么让Python入门更简单？

基于Brython的Python入门教学，是一条路子。

参考资料：

https://realpython.com/brython-python-in-browser/

与非学堂（codingclassonline）

一个专注青少年信息技术教育，探讨少儿编程的教与学，交流技巧、分享资源的公众号。

--------------------------------------

与非学堂小程序

蓝桥杯测试、Bebras测试、文化测试……

进入公众号菜单，更多精彩……

喜欢就请分享、点赞和在看吧！

与非学堂

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Brython——浏览器中执行的Python，用它教Python入门超级省事

您好，感谢您一直对少儿编程、对“与非学堂”的关注。为了更好地为大家服务，诚邀您填写一份《关于少儿编程教与学的课件资源素材需求调查》，https://www.wjx.cn/jq/82398684.aspx。问卷二维码话说我们的学生嘟嘟小萌新，不懂太多计算机操作，却要开始学习Python了。该不该学那是一个社会性的问题，谁都可以站在自己立场表示一下态度。怎么让他们容易学、能学好则是一个技术性问题。教育者不得不面对，不得不思考这个问题。一个最最最基础的问题：怎么...
复制链接

扫一扫