Aller au contenu

Introduction à PyScript#

Kesako#

PyScript est une boite à outils (un framework) qui permet aux développeurs d'ajouter une logique Python "pour donner vie" à l'interface HTML (le DOM) de leurs pages WEB et ainsi créer des applications interactives fonctionnant dans un navigateur.

kesako PyScript

PyScript est un méta-projet qui combine plusieurs technologies ouvertes comme Pyodide , MicroPython et WASM entre autres technologies Web modernes.

Exemple#

C'est PyScript qui me permet d'intégrer des cellules interactives de code Python directement dans cette page afin de vous proposer l'activité suivante :

def inverse_chaine(chaine): """ Compléter la docstring... """ chaine_inverse = '' # Commenter cette instruction... # Commenter le bloc d'instructions... for caractere in chaine: chaine_inverse = caractere + chaine_inverse # Commenter cette instruction... return chaine_inverse # Commenter cette instruction... def est_palindrome(chaine): """ Compléter la docstring... """ chaine_inverse = inverse_chaine(chaine) # Commenter cette instruction... # Commenter le bloc d'instructions... if chaine.lower() == "kayak" : print("'kayak' est un faux ami, à l'envers il fait 'glouglou' !") # Commenter cette instruction... else : return chaine == chaine_inverse # Commenter cette instruction... print("Maintenant que ces fonctions sont définie, on peut les tester...") # test 1 : doit renvoyer 'NSI' inverse_chaine('ISN') # test 2 : doit renyoyer False est_palindrome('NSI') # tests 3 : doit renyoyer True est_palindrome('ISN-NSI') # tests 4 : ??? est_palindrome('kayak') # Réaliser vos propres tests : ...
A faire vous même n°1 : ...
  • Exécuter successivement les instructions des cellules REPL ci-dessus avec la combinaison de touches ⇑ Maj.＋Entrée ↵ ;
  • Compléter la docstring et les commentaires des fonctions inverse_chaine(chaine) et est_palindrome(chaine) en précisant le typage des entrée/sortie ;
  • Copier/Coller les codes ainsi complétés dans le notebook de retour d'activité sur Capytale ;

Principe de PyScript#

Dans l'entête#

Il faut inclure dans le <head> deux balises : 

<head>
  <!-- Pour appliquer le CSS de PyScript -->  
  <link rel="stylesheet" href="https://pyscript.net/releases/2023.12.1/core.css">
  <!-- Pour amorcer PyScript -->
  <script type="module" src="https://pyscript.net/releases/2023.12.1/core.js"></script>  
</head>

Dans le corps#

Il faut inclure dans le <body> des balises <script> : 

<h1>Une page avec PyScript</h1>
<p>
    <strong>
        <script type="py">
            from pyscript import display
            for _ in range(10) :
                display("Bonjour le web") # s'affiche dans le DOM
        </script>
    </strong>
</p>
<img src="https://pyscript.github.io/docs/2023.12.1/assets/images/pyscript.svg" width=60%>
<script type="py" terminal>
    print("Bonjour le terminal") # s'affiche dans le terminal
</script>
Avec :

  • Le type="py" pour l'interpréteur Pyodide ou type="mpy" pour MicroPython ;
  • Le mot clé terminal ajoute un terminal pour afficher les print() ;
  • Le mot clé worker permet les input() dans le terminal ;
A faire vous même n°2 : ...

Autre exemple#

A faire vous même n°3 : ...

Ajouter une nouvelle page.html pour votre chiffrement de César en vous inspirant de la documentation beginning-pyscript ;

Ressources#