Lesson 1.3: Choosing where to print with `pyscript.write` #

In the previous two lessons we just used the print function and that printed to screen, in place, whereever the <pyscript> tag was placed. To give a concrete example of how this works, consider the following code, which has a print statement “inline”:

<html>
    <head>
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <h1>Inline printing
      <py-script>
          print(" by inlining elements")
      </py-script>
    </h1>
  </body>
</html>

Notice a few things about the code and its output:

The <h1> tag opens before the pyscript tag, but closing </h1> tag is after the pyscript tag
The resulting page has the words “by inlining elements” in a level 1 heading
There still looks like a newline character after the word printing.

In the case of #3 above, this is caused by the page styling and this behaviour can be modified. In short, you set the pyscript output cell to be an inline block, and hide a div that pyscript creates. The how of that is for another lesson.

Another way to direct the output of your PyScript code is to use the output attribute of the pyscript tag:

<py-script output="author_name">
    author = "LearningPyScript.com"
    author
</py-script>

In this case, the object that is the result from the script, i.e. the last line, is effectively printed into an element with the id author_name. Such an element could look like this:

<span id="author_name"></span>

In HTML, a span is a lightweight container. You can change its contents, styling, or perform actions on it, but the span rarely does much by itself. Contrast this with <h1> which you can also control in the same way, but has a default styling to make the text very large.

This “print-based” approach is simple for basic output, but doesn’t scale well - imagine if we had 10 different places to print! Ideally, all our python code would be in one spot (making it easy to understand) but with effects across the whole page.

For a more scalable option, we can use pyscript.write. This function requires two arguments; the element to write to, and the thing to write to it. At the time of writing, documentation for pyscript is very light, but will improve over time as the project matures. To see the help for a function, you can use this template:

<html>
    <head>
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <h1>Getting Help for a Function</h1>
    <py-script>
        print(help(pyscript.write))
    </py-script>
  </body>
</html>

In the above code, the help for pyscript.write will be shown.

Notice carefully - there are no parenthesis/brackets attached to the pyscript.write function, i.e. the line is not print(help(pyscript.write())) (Side question - what does that do?). We are printing the help for that function and not for the result of calling that function.

The output for the above code will look something like this:

__main__: write(element_id, value, append=False, exec_id=0)

Writes value to the element with id "element_id

(I added a newline to make it more readable, which wasn’t there when I ran the above code.)

A value can be just text (although play around with this!), and the id is the “name” of a HTML element.

For example, if we create an element with the following code:

Created by <span id="author_name"></span>.

We can write directly into the <span> using this pyscript code:

pyscript.write('author_name', "LearningPyScript.com")

Here is the whole code:

<html>
    <head>
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <h1>Writing to a span</h1>
    Created by <span id="author_name"></span>.
    <py-script>
        pyscript.write('author_name', "LearningPyScript.com")
    </py-script>
  </body>
</html>

Any python object can be put in the second argument. PyScript will convert that second argument to a string, and then display the string.

Exercises #

Take your learning further with some exercises.

Using PyScript, change the heading to “Written in Python”
What happens if you try write to an element that doesn’t exist (it fails, but it pays to see it now when you are expecting it, so if you see it later, you know what the issue is!)
Create and write an object that is not a string. For example, a list or a dictionary. What does the result look like?

Lesson 1.3: Choosing where to print with pyscript.write #

Exercises #

Sign up to get notified of updates to content!

Lesson 1.3: Choosing where to print with `pyscript.write` #