diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md new file mode 100644 index 00000000..16721b0d --- /dev/null +++ b/GETTING-STARTED.md @@ -0,0 +1,152 @@ +# Getting started with PyScript + +This page will guide you through getting started with PyScript. + +## Development setup + +PyScript does not require any development environment other +than a web browser. We recommend using Chrome. + +## Installation + +First, go to https://pyscript.net and download the PyScript assets. +Unzip the archive to a directory where you wish to write PyScript-enabled +HTML files. You should then have three files in your directory. + +``` +├── ./ +│ ├── pyscript.css +│ ├── pyscript.js +│ └── pyscript.js.map +``` + +## Your first PyScript HTML file + +Here's a "Hello, world!" example using PyScript using the assets you +downloaded from https://pyscript.net. + +Using your favorite editor create a new file called `hello.html` in +the same directory as your PyScript JavaScript and CSS files with the +following content and open the file in your web browser. You can typically +open an HTML by double clicking it in your file explorer. + +```html + + + + + + print('Hello, World!') + +``` + +Notice the use of the `` tag in the HTML body. This +is where you'll write your Python code. In the following sections we'll +introduce the 8 tags provided by PyScript. + +## The py-script tag + +The `` tag let's you execute multi-line Python scripts and +print back onto the page. For +example we can compute π. + +```html + + + + + + + +print("Let's compute π:") +def wallis(n): + pi = 2 + for i in range(1,n): + pi *= 4 * i ** 2 / (4 * i ** 2 - 1) + return pi + +pi = wallis(100000) +s = f"π is approximately {pi:.3f}" +print(s) + + +``` + +### Writing into labeled elements + +In the example above we had a single `` tag and it printed +one or more lines onto the page in order. Within the `` you +have access to the `pyscript` module, which provides a `.write()` method +to send strings into labeled elements on the page. + +For example we'll add some style elements and provide place holders for +the `` tag write to. + +```html + + + + + + + + +

Today is

+
+
+ +import datetime as dt +pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y')) + +def wallis(n): + pi = 2 + for i in range(1,n): + pi *= 4 * i ** 2 / (4 * i ** 2 - 1) + return pi + +pi = wallis(100000) +pyscript.write('pi', f'π is approximately {pi:.3f}') + + + +``` + +## Packages and modules + +In addition to the [Python Standard Library](https://docs.python.org/3/library/) and +the `pyscript` module, many 3rd-party OSS packages will work out-of-the-box with PyScript. +In order to use them you will need to delcare the dependencies using the `` in the +HTML head. + +For example, NumPy and Matplotlib are available. Notice here we're using `` +as a shortcut, which takes the expression on the last line of the script and runs `pyscript.write('plot', fig)`. + + +```html + + + + + + - numpy + - matplotlib + + + + +

Let's plot random numbers

+
+ +import matplotlib.pyplot as plt +import numpy as np + +x = np.random.randn(1000) +y = np.random.randn(1000) + +fig, ax = plt.subplots() +ax.scatter(x, y) +fig + + + +``` \ No newline at end of file