Python dans votre navigateur – Real Python

Implémentation du développement Web isomorphe

JavaScript isomorphe, ou JavaScript universel, souligne que les applications JavaScript doivent s'exécuter à la fois sur le client et sur le serveur. Cela suppose que le back-end est basé sur JavaScript, à savoir un serveur Node. Les développeurs Python utilisant Flask ou Django peuvent également appliquer les principes de l'isomorphisme à Python, à condition qu'ils puissent exécuter Python dans le navigateur.

Brython vous permet de créer le frontal en Python et de partager des modules entre le client et le serveur. Par exemple, vous pouvez partager des fonctions de validation, comme le code suivant qui normalise et valide les numéros de téléphone américains:

    1importer ré
    2
    3def normalize_us_phone(téléphone: str) -> str:
    4    "" "Extraire les numéros et les chiffres d'un numéro de téléphone donné" ""
    5    revenir ré.sous(r"[^da-zA-z]", "", téléphone)
    6
    7def is_valid_us_phone(téléphone: str) -> booléen:
    8    "" "Valider le numéro de téléphone à 10 chiffres" ""
    9    normalized_number = normalize_us_phone(téléphone)
dix    revenir ré.correspondre(r"^  ddix$ ", normalized_number) est ne pas Aucun

normalize_us_phone () élimine tous les caractères non alphanumériques, alors que is_valid_us_phone () Retour Vrai si la chaîne d'entrée contient exactement dix chiffres et aucun caractère alphabétique. Le même code peut être partagé entre les processus exécutés sur un serveur Python et un client construit avec Brython.

Accéder aux API Web

Les navigateurs Internet exposent des API Web standardisées à JavaScript. Ces normes font partie du HTML Living Standard. Certains exemples d'API Web incluent:

Brython vous permet à la fois d'utiliser les API Web et d'interagir avec JavaScript. Vous travaillerez avec certaines des API Web dans une section ultérieure.

Prototypage et bibliothèques JavaScript

Python est souvent utilisé pour prototyper des extraits de code, des constructions de langage ou des idées plus importantes. Avec Brython, cette pratique de codage courante devient disponible dans votre navigateur. Par exemple, vous pouvez utiliser la console Brython ou l'éditeur interactif pour expérimenter un extrait de code.

Ouvrez l'éditeur en ligne et tapez le code suivant:

    1de le navigateur importer Ajax
    2
    3def on_complete(demande):
    4    impression(demande.texte)
    5
    6Langue = "fr"
    7
    8Ajax.obtenir(F"https://fourtonfish.com/hellosalut/?lang=Langue",
    9         blocage=Vrai,
dix         incomplet=on_complete)

Voici comment ce code fonctionne:

• Ligne 1 importe le Ajax module.
• Ligne 3 définit on_complete (), la fonction de rappel qui est appelée après avoir obtenu la réponse de ajax.get ().
• Ligne 6 appels ajax.get () pour récupérer la traduction de «hello» en français à l'aide de l'API HelloSalut. Notez que blocage peut être Vrai ou Faux lorsque vous exécutez ce code dans l'éditeur Brython. Il doit être Vrai si vous exécutez le même code dans la console Brython.

Cliquez sur Courir au-dessus du volet de sortie pour voir le résultat suivant:

"code":"fr","Bonjour":"Salut"
<completeré jen   5,00 ms>

Essayez de modifier la langue de fr à es et observez le résultat. Les codes de langue pris en charge par cette API sont répertoriés dans la documentation HelloSalut.

Vous pouvez modifier l'extrait de code dans l'éditeur en ligne pour utiliser une autre API publique. Par exemple, essayez d'extraire une API publique aléatoire du projet API publiques:

    1de le navigateur importer Ajax
    2
    3def on_complete(demande):
    4    impression(demande.texte)
    5
    6Ajax.obtenir("https://api.publicapis.org/random",
    7         blocage=Vrai,
    8         incomplet=on_complete)

Copiez le code ci-dessus dans l'éditeur Brython en ligne et cliquez sur Courir pour afficher le résultat. Voici un exemple au format JSON:

  "compter": 1,
  "entrées": [[[[
    
      "API": «Gouvernement ouvert, États-Unis»,
      "Description": "Données ouvertes du gouvernement des États-Unis",
      "Auth": "",
      "HTTPS": vrai,
      "Cors": "inconnu",
      "Lien": "https://www.data.gov/",
      "Catégorie": "Gouvernement"
    
  ]

Étant donné que le point de terminaison récupère un projet aléatoire, vous obtiendrez probablement un résultat différent. Pour plus d'informations sur le format JSON, consultez Utilisation des données JSON en Python.

Vous pouvez utiliser le prototypage pour essayer du code Python normal comme vous le feriez dans l'interpréteur Python. Parce que vous êtes dans le contexte d'un navigateur, Brython fournit également des moyens de:

En tant que raccourci, vous pouvez profiter de la plupart des fonctionnalités décrites ci-dessus en ouvrant la console ou l'éditeur disponible sur le site Web de Brython. Cela ne vous oblige pas à installer ou exécuter quoi que ce soit sur votre ordinateur local. Au lieu de cela, il vous donne un terrain de jeu en ligne pour interagir avec les technologies Python et Web.

Enseigner Python aux étudiants

Brython est à la fois un compilateur Python et un interpréteur écrit en JavaScript. En conséquence, vous pouvez compiler et exécuter du code Python dans le navigateur. Un bon exemple de cette fonctionnalité est illustré par l'éditeur en ligne disponible sur le site Web de Brython.

Avec l'éditeur en ligne, Python s'exécute dans le navigateur. Il n'est pas nécessaire d'installer Python sur une machine et il n'est pas nécessaire d'envoyer du code au serveur pour qu'il soit exécuté. Les commentaires sont immédiats pour l'utilisateur et cette approche n'expose pas le back-end à des scripts malveillants. Les étudiants peuvent expérimenter Python sur n'importe quel appareil doté d'un navigateur fonctionnel, comme les téléphones ou les Chromebooks, même avec une connexion Internet irrégulière.

Prendre en compte la performance

Le site Brython note que la vitesse d’exécution de l’implémentation est comparable à celle de CPython. Mais Brython est exécuté dans le navigateur et la référence dans cet environnement est JavaScript intégré au moteur de navigateur. En conséquence, attendez-vous à ce que Brython soit plus lent que le JavaScript écrit à la main et bien réglé.

Brython compile le code Python en JavaScript, puis exécute le code généré. Ces étapes ont un impact sur les performances globales et Brython peut ne pas toujours répondre à vos exigences de performances. Dans certains cas, vous devrez peut-être déléguer l'exécution de code à JavaScript ou même à WebAssembly. Vous verrez comment créer WebAssembly et comment utiliser le code résultant en Python dans la section sur WebAssembly.

Cependant, ne laissez pas les performances perçues vous empêcher d'utiliser Brython. Par exemple, l'importation de modules Python peut entraîner le téléchargement du module correspondant à partir du serveur. Pour illustrer cette situation, ouvrez la console Brython et exécutez le code suivant:

Le délai avant l'affichage de l'invite (390 ms sur une machine de test) est perceptible. Cela est dû au fait que Brython doit télécharger uuid et ses dépendances, puis compilez les ressources téléchargées. Cependant, à partir de ce moment, il n’ya plus de retard lors de l’exécution des fonctions disponibles dans uuid. Par exemple, vous pouvez générer un identifiant unique universel aléatoire, UUID version 4, avec le code suivant:

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

Appel uuid.uuid4 () génère un UUID objet, dont la représentation sous forme de chaîne est imprimée dans la console. Appel uuid.uuid4 () revient immédiatement et est beaucoup plus rapide que l'importation initiale du uuid module.

S'amuser

Si vous lisez ce didacticiel, vous êtes probablement intéressé par l'écriture de code Python dans le navigateur. Voir le code Python exécuté dans le navigateur est passionnant pour la plupart des pythonistes et éveille un sentiment de plaisir et de possibilités infinies.

L'auteur de Brython, Pierre Quentel, et les contributeurs du projet ont également gardé à l'esprit le plaisir de Python tout en entreprenant l'énorme tâche de rendre ce langage compatible avec le navigateur Web.

Pour le prouver, pointez votre navigateur vers la console interactive Brython et à l'invite Python, tapez ce qui suit:

Semblable à l'expérience de Python sur votre machine locale, Brython compile et exécute les instructions à la volée et imprime The Zen of Python. Il se déroule dans le navigateur et l'exécution du code Python ne nécessite aucune interaction avec un serveur back-end:

Vous pouvez également essayer un autre œuf de Pâques Python classique dans le même environnement de navigateur avec le code suivant:

Brython embrasse les mêmes morceaux d'humour que vous trouverez dans l'implémentation de référence Python.

Maintenant que vous êtes familiarisé avec les bases de l'utilisation de Brython, vous allez explorer des fonctionnalités plus avancées dans les sections suivantes.

Installation CDN

Un réseau de diffusion de contenu (CDN) est un réseau de serveurs qui permet d'améliorer les performances et les vitesses de téléchargement du contenu en ligne. Vous pouvez installer des bibliothèques Brython à partir de quelques CDN différents:

Vous pouvez choisir cette installation si vous souhaitez déployer un site Web statique et ajouter des comportements dynamiques à vos pages avec une surcharge minimale. Vous pouvez considérer cette option comme un substitut à jQuery, sauf en utilisant Python plutôt que JavaScript.

Pour illustrer l'utilisation de Brython avec un CDN, vous utiliserez CDNJS. Créez un fichier avec le code HTML suivant:

    1
    2<html>
    3    <diriger>
    4        <scénario
    5          src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
    6        </scénario>
    7    </diriger>
    8    <corps en charge="brython ()">
    9        <scénario taper="texte / python">
dix            importer le navigateur
11            le navigateur.alerte("Bonjour le vrai Python!")
12        </scénario>
13    </corps>
14</html>

Voici les éléments clés de cette page HTML:

• Ligne 5 charges brython.js de CDNJS.

• Ligne 8 exécute brython () une fois le chargement du document terminé. brython () lit le code Python dans la portée actuelle et le compile en JavaScript. Consultez la section Comprendre le fonctionnement de Brython pour plus de détails.

• Ligne 9 définit le type de script sur texte / python. Cela indique à Brython quel code doit être compilé et exécuté.

• Ligne 10 importations le navigateur, un module Brython qui expose des objets et des fonctions permettant une interaction avec le navigateur.

• Ligne 11 appels alerte(), qui affiche une boîte de message avec le texte "Bonjour le vrai Python!"

Enregistrez le fichier sous index.html, puis double-cliquez sur le fichier pour l'ouvrir avec votre navigateur Internet par défaut. Le navigateur affiche une boîte de message avec "Bonjour le vrai Python!" Cliquez sur d'accord pour fermer la boîte de message:

Pour réduire la taille du fichier téléchargé, en particulier en production, pensez à utiliser la version réduite de brython.js:

    1<scénario
    2  src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
    3</scénario>

La version réduite réduira le temps de téléchargement et la latence perçue du point de vue de l'utilisateur. Dans Comprendre le fonctionnement de Brython, vous apprendrez comment Brython est chargé par le navigateur et comment le code Python ci-dessus est exécuté.

Installation de GitHub

L'installation de GitHub est très similaire à l'installation CDN, mais elle vous permet d'implémenter des applications Brython avec la dernière version de développement. Vous pouvez copier l'exemple précédent et modifier l'URL dans le diriger élément pour obtenir ce qui suit index.html:

<html>
  <diriger>
    <scénario
      src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js">
    </scénario>
  </diriger>
  <corps en charge="brython ()">
    <scénario taper="texte / python">
      importer le navigateur
      le navigateur.alerte("Bonjour le vrai Python!")
    </scénario>
  </corps>
</html>

Après avoir enregistré ce fichier dans un répertoire local, double-cliquez sur index.html pour rendre dans le navigateur la même page que vous avez obtenue avec l'installation CDN.

Installation de PyPI

Jusqu'à présent, vous n'avez rien installé dans votre environnement local. Au lieu de cela, vous avez indiqué dans le fichier HTML où le navigateur peut trouver le package Brython. Lorsque le navigateur ouvre la page, il télécharge le fichier JavaScript Brython à partir de l'environnement approprié, à partir d'un CDN ou de GitHub.

Brython est également disponible pour une installation locale sur PyPI. L'installation PyPI est faite pour vous si:

• Vous avez besoin de plus de contrôle et de personnalisation de l'environnement Brython au-delà de ce qui est disponible lorsque vous pointez vers un fichier CDN.
• Votre expérience est en Python et vous connaissez pépin.
• Vous souhaitez qu'une installation locale minimise la latence du réseau pendant le développement.
• Vous souhaitez gérer votre projet et vos livrables de manière plus granulaire.

Installation de Brython à partir d'installations PyPI brython_cli, un outil de ligne de commande que vous pouvez utiliser pour automatiser des fonctions telles que la génération d'un modèle de projet ou l'empaquetage et le regroupement de modules pour simplifier le déploiement d'un projet Brython.

Pour plus de détails, vous pouvez consulter la documentation d'installation locale pour voir les capacités de brython-cli qui sont disponibles dans votre environnement après l'installation. brython-cli est disponible uniquement avec ce type d'installation. Il n'est pas disponible si vous installez à partir d'un CDN ou avec npm. Tu verras brython-cli en action plus tard dans le didacticiel.

Avant d'installer Brython, vous souhaitez créer un environnement virtuel Python pour ce projet.

Sous Linux ou macOS, exécutez les commandes suivantes:

$ python3 -m venv .venv --prompt brython
$ la source .venv / bin / activer
(brython) $ python -m pip install --upgrade pip
Collecte de pip
        Téléchargement de pip-20.2.4-py2.py3-none-any.whl (1,5 Mo)
                    | ████████████████████████████████ | 1,5 Mo 1,3 Mo / s
Installation des packages collectés: pip
        Tentative de désinstallation: pip
                Installation existante trouvée: pip 20.2.3
                Désinstallation de pip-20.2.3:
                        Pip-20.2.3 correctement désinstallé

Sous Windows, vous pouvez procéder comme suit:

> python3 -m venv .venv --prompt brython
> .venv  Scripts  activate
(brython) > python -m pip install --upgrade pip
Collecte de pip
        Téléchargement de pip-20.2.4-py2.py3-none-any.whl (1,5 Mo)
                    | ████████████████████████████████ | 1,5 Mo 1,3 Mo / s
Installation des packages collectés: pip
        Tentative de désinstallation: pip
                Installation existante trouvée: pip 20.2.3
                Désinstallation de pip-20.2.3:
                        Pip-20.2.3 correctement désinstallé

Vous venez de créer un environnement Python dédié pour votre projet et de le mettre à jour pépin avec la dernière version.

Dans les étapes suivantes, vous allez installer Brython et créer un projet par défaut. Les commandes sont les mêmes sous Linux, macOS et Windows:

(brython) $ python -m pip installer brython
Collecter du brython
        Téléchargement de brython-3.9.0.tar.gz (1,2 Mo)
                    | ████████████████████████████████ | 1,2 Mo 1,4 Mo / s
Utilisation de l'ancien 'setup.py install' pour brython, depuis le paquet 'wheel'
N'est pas installé.
Installation des paquets collectés: brython
                Exécution de l'installation de setup.py pour brython ... terminé
(brython) $ mkdir web
(brython) $ CD la toile
(brython) $ brython-cli --install
Installation de Brython 3.9.0
Fini

Vous avez installé Brython à partir de PyPI, créé un dossier vide nommé la toileet a généré le squelette du projet par défaut en exécutant le brython-cli copié dans votre environnement virtuel lors de l'installation.

Dans le la toile dossier, brython-cli --install a créé un modèle de projet et généré les fichiers suivants:

Pour tester ce projet Web nouvellement créé, vous pouvez démarrer un serveur Web Python local avec les commandes suivantes:

(brython) $ python -m http.server
Servant HTTP sur :: port 8000 (http: //[::]: 8000 /) ...

Lorsque vous exécutez python -m http.server, Python démarre un serveur Web sur le port 8000. La page par défaut attendue est index.html. Pointez votre navigateur Internet sur http: // localhost: 8000 pour afficher une page avec le texte Bonjour:

Pour un exemple plus complet, vous pouvez modifier l'URL de la barre d'adresse du navigateur en http: // localhost: 8000 / demo.html. Vous devriez voir une page similaire à la page de démonstration Brython:

Avec cette approche, les fichiers JavaScript Brython sont chargés directement à partir de votre environnement local. Remarquez le src attribut dans le diriger élément de index.html:

    1
    2<html>
    3  <diriger>
    4   <méta jeu de caractères="utf-8">
    5   <scénario taper="texte / javascript" src="brython.js"> </scénario>
    6   <scénario taper="texte / javascript" src="brython_stdlib.js"> </scénario>
    7  </diriger>
    8  <corps en charge="brython (1)">
    9    <scénario taper="texte / python">
dix      de le navigateur importer document
11      document <= "Bonjour"
12    </scénario>
13  </corps>
14</html>

Le code HTML ci-dessus est mis en retrait pour améliorer la lisibilité de ce didacticiel. La commande brython_cli --install ne met pas en retrait le modèle HTML initial qu'il génère.

Le fichier HTML présente quelques nouvelles fonctionnalités Brython:

• Ligne 6 charges brython_stdlib.js, la bibliothèque standard Python compilée en JavaScript.

• Ligne 8 invoque brython () avec l'argument 1 pour imprimer des messages d'erreur sur la console du navigateur.

• Ligne 10 importe le document module de le navigateur. Les fonctions d'accès au DOM sont disponibles dans document.

• Ligne 11 affiche un nouveau symbole (<=) ajouté à Python en tant que sucre syntaxique. Dans cet exemple, document <= "Bonjour" est un substitut à document.body.appendChild (document.createTextNode ("Bonjour")). Pour plus de détails sur ces fonctions DOM, consultez Document.createTextNode.

L'opérateur <= est utilisé pour ajouter un nœud enfant à un élément du DOM. Vous verrez plus de détails sur l'utilisation d'opérateurs spécifiques à Brython dans l'API DOM en Brython.

Installation de npm

Si vous connaissez bien l'écosystème JavaScript, l'installation de npm pourrait vous plaire. Node.js et npm sont requis avant d'effectuer cette installation.

L'installation avec npm rendra les modules JavaScript Brython disponibles dans votre projet comme tous les autres modules JavaScript. Vous pourrez ensuite tirer parti de vos outils JavaScript préférés pour tester, empaqueter et déployer l'interpréteur et les bibliothèques Brython. Cette installation est idéale si vous avez déjà des bibliothèques JavaScript existantes installées avec npm.

En supposant que npm est installé sur votre système, créez un package.json fichier en appelant npm init - oui dans un répertoire vide:

$ npm init - oui
Écrit dans /Users/john/projects/brython/npm_install/package.json:


        "nom": "npm_install",
        "version": "1.0.0",
        "la description": "",
        "main": "index.js",
        "scripts": 
                "test": "echo " Erreur: aucun test spécifié  "&& exit 1"
        ,
        "mots clés": [],
        "auteur": "",
        "licence": "ISC"

Pour intégrer Brython dans votre projet, exécutez la commande suivante:

$ npm installer brython
npm a créé un fichier de verrouillage sous le nom package-lock.json. Vous devez valider ce fichier.
npm WARN npm_install@1.0.0 Aucune description
npm WARN npm_install@1.0.0 Aucun champ de référentiel.

+ brython@3.9.0
ajouté 1 package de 1 contributeur et audité 1 package en 1.778s
trouvé 0 vulnérabilités

Vous pouvez ignorer les avertissements et noter que Brython a été ajouté à votre projet. Pour confirmer, ouvrez package.json et assurez-vous d'avoir un dépendances propriété pointant vers un objet contenant un brython entrée:

    1
    2  "Nom": "npm_install",
    3  "version": "1.0.0",
    4  "la description": "",
    5  "principale": "index.js",
    6  "scripts": 
    7    "test": "echo " Erreur: aucun test spécifié  "&& exit 1"
    8  ,
    9  "auteur": "",
dix  "Licence": "ISC",
11  "dépendances": 
12    "brython": «^ 3,9,0»
13  
14

Comme pour les exemples précédents, vous pouvez créer les éléments suivants index.html et ouvrez-le avec votre navigateur. Un serveur Web n'est pas nécessaire pour cet exemple, car le navigateur peut charger le fichier JavaScript node_modules / brython / brython.js localement:

    1
    2<html>
    3<diriger>
    4  <méta jeu de caractères="utf-8">
    5  <scénario
    6    taper="texte / javascript"
    7    src="node_modules / brython / brython.js" reporter>
    8  </scénario>
    9</diriger>
dix<corps en charge="brython ()">
11<scénario taper="texte / python">
12de le navigateur importer document
13document <= "Bonjour"
14</scénario>
15</corps>
16</html>

Le navigateur rend index.html et charges brython.js du scénario URL dans index.html. Dans cet exemple, vous avez vu une autre façon d'installer Brython qui tire parti de l'écosystème JavaScript. Pour le reste du didacticiel, vous allez écrire du code qui repose sur l'installation CDN ou sur l'installation PyPI.

Récapitulatif des options d'installation de Brython

Brython a un pied dans le monde Python et un autre en JavaScript. Les différentes options d'installation illustrent cette situation inter-technologique. Choisissez l'installation qui vous semble la plus intéressante en fonction de votre expérience.

Le tableau suivant vous fournit quelques conseils:

Ce tableau résume les différentes options d'installation qui s'offrent à vous. Dans la section suivante, vous en apprendrez plus sur le fonctionnement de Brython.

Composants principaux de Brython

Le noyau de Brython est contenu dans brython.js ou dans brython.min.js, la version réduite du moteur Brython. Les deux comprennent les éléments clés suivants:

• brython () est la principale fonction JavaScript exposée dans l'espace de noms global JavaScript. Vous ne pouvez exécuter aucun code Python sans appeler cette fonction. C'est la seule fonction JavaScript que vous devriez avoir à appeler explicitement.

• __BRYTHON__ est un objet global JavaScript qui contient tous les objets internes nécessaires pour exécuter des scripts Python. Cet objet n’est pas utilisé directement lorsque vous écrivez des applications Brython. Si vous examinez le code Brython, à la fois JavaScript et Python, vous verrez des occurrences régulières de __BRYTHON__. Vous n'avez pas besoin d'utiliser cet objet, mais vous devez en être conscient lorsque vous voyez une erreur ou lorsque vous souhaitez déboguer votre code dans la console du navigateur.

• Types intégrés sont des implémentations des types intégrés Python dans JavaScript. Par exemple, py_int.js, py_string.js et py_dicts.js sont des implémentations respectives de int, str et dict.

• le navigateur est le module de navigateur qui expose les objets JavaScript couramment utilisés dans une application Web frontale, comme les interfaces DOM utilisant document et la fenêtre du navigateur utilisant le la fenêtre objet.

Vous verrez chacun de ces composants en action au fil des exemples de ce didacticiel.

Bibliothèque standard Brython

Maintenant que vous avez une idée générale du fichier Brython principal, brython.js, vous allez découvrir son fichier compagnon, brython_stdlib.js.

brython_stdlib.js expose la bibliothèque standard Python. Au fur et à mesure que ce fichier est généré, Brython compile la bibliothèque standard Python en JavaScript et concatène le résultat dans le bundle brython_stdlib.js.

Brython est destiné à être aussi proche que possible de CPython, l'implémentation de référence Python. Pour plus d'informations sur CPython, consultez votre guide sur le code source CPython et les composants internes CPython.

Comme Brython s'exécute dans le contexte d'un navigateur Web, il présente certaines limitations. Par exemple, le navigateur n'autorise pas l'accès direct au système de fichiers, donc l'ouverture d'un fichier avec os.open () ce n’est pas possible. Les fonctions qui ne sont pas pertinentes pour un navigateur Web peuvent ne pas être mises en œuvre. Par exemple, le code ci-dessous s'exécute dans un environnement Brython:

>>> import os
>>> os.unlink()
Traceback (most recent call last):
        Déposer , line 1, in 
NotImplementedError: posix.unlink is not implemented

os.unlink() raises an exception since it’s not secure to delete a local file from the browser environment and the File and Directory Entries API is only a draft proposal.

Brython only supports native Python modules. It doesn’t support Python modules built in C unless they’ve been reimplemented in JavaScript. For example, hashlib is written in C in CPython and implemented in JavaScript in Brython. You can consult the list of modules in the Brython distribution to compare with the CPython implementation.

You need to include brython_stdlib.js ou brython_stdlib.min.js to import modules from the Python standard library.

Brython in Action

At this point, you may be wondering how Brython behaves within a browser that’s only aware of its JavaScript engine. Reusing the previous examples and the tools available in the browser, you’ll learn about the process involved in executing Python code in the browser.

In the section on the CDN server installation, you saw the following example:

    1
    2<html>
    3    <head>
    4        <script
    5            src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js">
    6        </script>
    7    </head>
    8    <body onload="brython()">
    9        <script taper="text/python">
dix            import le navigateur
11            le navigateur.alert("Hello Real Python!")
12        </script>
13    </body>
14</html>

Upon loading and parsing the HTML page, brython() takes the following steps:

1. Reads the Python code contained in the element