Client Side: Brython 3
Stephen Lukacs (2) iquanta.org/instruct/python
Similar to example: Client Side: Javascript and jQuery.
The Date and Time is:
Enter your name here:
The Brython website and documentation is located at: https://brython.info. Currently using Brython version: .
from py4web import URL
from yatl.helpers import A
"""
reference: https://iquanta.org/instruct/python ::: Example 7, Client Side: Brython 3 ::: Stephen Lukacs, Ph.D. ©2021-11-09
this is the second example of client-side processing and is very similar to "Client Side: Javascript and jQuery". in
this example, the server simply parses out the "page_scripts" and "body" sections and serves that raw code and html
page to the client's web browser. the client then displays the html section and processes the "page_scripts" section
as javascript language. javascript is the programming language of web browsers.
you'll notice again under the <page_scripts>...</page_scripts> section the <style>...</style> which is a CSS section and
<script>...</script> in which there are 2 different types. the first type is the javascript which essentially throws a
bunch of messages to the console.log of the web browser, and, a second type designated as "<script type="text/python">"
which is where the brython code lies. remember brython is "browser python" or client-side python. it actually uses
javascript to translate your brython code, python looking code, into javascript so that the browser can process the brython
code. aren't the developers of brython clever? to bring us a python compiler under a web browser.
you'll notice that the date and time update every second on this page because the brython reads client's computer or
device clock every second and displays it accordingly. that is why it can update the client's page every second.
there would be a lag if the web browser asked the server to do this every second. so it's up the client to do this
appropriately.
at this point you're learning 7 programming languages, i.e., python, HTML, py4web, CSS, javascript, jQuery, and
brython, which is mostly python. world-wide web (www) programming requires a lot of programming languages.
"""
<page_scripts>
<style>
p { text-align: left; }
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
console.log("jQuery.document.ready from Example_7.js begin... ", "jQuery.version: ", jQuery.fn.jquery);
console.log("notice we can mix javascript, jQuery, and Brython all in one document with just different script sections.");
console.log("initialization stuff here...");
console.log("reference: https://iquanta.org/instruct/python ::: Example 7: Client Side: Client Side: Brython 3 ::: Stephen Lukacs, Ph.D. ©2021-11-09");
console.log("jQuery.document.ready from Example_7.js end");
});
</script>
<script type="text/python">
# -*- coding: utf-8 -*-
"""
the following is brython code and thus client-side python.
mostly python style and syntax except when interfacing with the html document,
and when you need a package, i.e., numpy, scipy, etc., outside the standard packages, i.e., math, datetime, etc.
"""
import browser.timer
from browser import document
from browser.html import B, BR
from datetime import datetime
def show_result(event):
btn = event.target
itime = datetime.now()
ihour = itime.hour
message = "Good Morning" if (ihour < 12) else "Good Afternoon" if (ihour < 18) else "Good Evening"
name = document['name'].value
document['greeting'].clear()
document['greeting'].text = f'{message} {name.strip().title()}. I hope your day is going great.'
return
def update_time():
now = datetime.now().strftime("%A, %B %d, %Y @ <b>%H:%M:%S</b>")
document['clock'].innerHTML = now
return now
brython_version = '.'.join([ str(i) for i in __BRYTHON__.implementation[:3] ])
print(f'Example_7 sjlukacs implementation')
browser.timer.set_interval(update_time, 200)
document['brython_version'].text = brython_version
document['greeting'] <= "this is an initialization test 1, 2, "
document['greeting'] <= '3, 4 .. .'
document['greeting'] <= BR() + B('ok, a bold new line.')
document['submit'].bind('click', show_result)
</script>
</page_scripts>
<header>
Similar to example: {{=A('Client Side: Javascript and jQuery', _href=URL('python/exec/12'))}}.
</header>
<body>
<p>The Date and Time is:</p>
<p id="clock" style="font-size:18pt;"></p>
<p>Enter your name here: <input type="text" id="name"> <input type="submit" id="submit"></p>
<p id="greeting"></p>
<p>The Brython website and documentation is located at: <a href="https://brython.info" target="brython">https://brython.info</a>. Currently using Brython version: <span id="brython_version" style="font-weight:bold;"></span>.</p>
</body>