|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <!-- Semantic tags: 'https://www.semrush.com/blog/semantic-html5-guide/', 'https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements'. --> |
| 4 | + <head> |
| 5 | + <meta charset="UTF-8" /> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | + <!-- Window title. --> |
| 8 | + <title>Hello World | PyScript Exercises</title> |
| 9 | + <!-- Window logo. Goes up x4 folder levels to get to 'media' (rsrcs < io_inputs < app < config < web_pages), where it's stored. --> |
| 10 | + <link rel="icon" type="image/png" href="./../../../../media/icon-favicon.png" /> |
| 11 | + <!-- |
| 12 | + External CSS stylesheet: 'https://www.w3schools.com/html/html_css.asp', 'https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link'. |
| 13 | + - In this case, PyScript CSS. |
| 14 | + --> |
| 15 | + <link rel="stylesheet" href="https://pyscript.net/releases/2025.8.1/core.css" /> |
| 16 | + <!-- External (local) CSS stylesheet, with multiple external CSS links. ORDER MATTERS! 'https://www.programminghead.com/how-to-link-multiple-css-style-sheets-in-html'. --> |
| 17 | + <link rel="stylesheet" href="./home-loading_splashscreen_(style).css"> |
| 18 | + <link rel="stylesheet" href="./home_(style).css"> |
| 19 | + <!-- |
| 20 | + Script call; e.g. this js script tag bootstraps PyScript. |
| 21 | + - NOTE: threated as deferred script. Ref. 'https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup/24070373#24070373'. |
| 22 | + --> |
| 23 | + <script type="module" src="https://pyscript.net/releases/2025.8.1/core.js"></script> |
| 24 | + <!-- |
| 25 | + JS script call: (module) loading splashscreen. |
| 26 | + - If 'type' not defined, defaults to 'text/javascript': 'https://www.w3schools.com/tags/att_script_type.asp'. |
| 27 | + - For HTML 5, if default, discouraged to be explicit, since it's redundant: 'https://stackoverflow.com/questions/4195427/is-the-type-attribute-necessary-for-script-tags/4195504#4195504'. |
| 28 | + - 'type' module: 'https://forum.freecodecamp.org/t/the-type-module-in-html-file-whats-for/488865', 'https://stackoverflow.com/questions/39652618/classic-scripts-vs-module-scripts-in-javascript/53821485#53821485'. |
| 29 | + - 'module' scripts: 'https://neerajdana.medium.com/understanding-type-module-in-javascript-a-comprehensive-guide-ebb13926da7a'. |
| 30 | + - 'module' vs. 'non-module' scripts: 'https://neerajdana.medium.com/understanding-type-module-in-javascript-a-comprehensive-guide-ebb13926da7a'. |
| 31 | + --> |
| 32 | + <script type="module" src="./home-loading_splashscreen_(app).js"></script> |
| 33 | + <!-- Fallback call to PyScript script to trigger 'py:ready' event, in case there are no PyScript scripts in the page. --> |
| 34 | + <script type="py" defer></script> |
| 35 | + </head> |
| 36 | + <body> |
| 37 | + <!-- Main dialog (as 'modal', defined in js module '_app-loading_splashscreen.js'), what appears 1st as soon as web page is loaded. --> |
| 38 | + <dialog id="dialog_loading"> |
| 39 | + <h1>Loading...</h1> |
| 40 | + </dialog> |
| 41 | + <header class="header"> |
| 42 | + <nav class="header-nav"> |
| 43 | + <div class="header-nav-left_aligned"> |
| 44 | + <img class="header-nav-left_aligned-logo" src="./../../../../media/img-logo.png" /> |
| 45 | + <div class="header-nav-left_aligned-links_container"> |
| 46 | + <a class="header-nav-left_aligned-links_container-link" href="./home.html">Home</a> |
| 47 | + <a class="header-nav-left_aligned-links_container-link" href="./hello_world.html"><b>HELLO WORLD</b></a> |
| 48 | + <a class="header-nav-left_aligned-links_container-link" href="./antigravity.html">Antigravity</a> |
| 49 | + </div> |
| 50 | + </div> |
| 51 | + <div class="header-nav-links_container"> |
| 52 | + <!-- '/' in 'href' redirects to ROOT vs. '#' that redirects to TOP of CURRENT PAGE (causing scrolling): 'https://stackoverflow.com/questions/17772692/what-does-it-means-when-there-is-fowards-slash-after-a-href/17772747#17772747', 'https://www.w3schools.com/tags/att_a_href.asp'. --> |
| 53 | + <a class="header-nav-links_container-link" href="/">[GOTO ROOT]</a> |
| 54 | + <!-- Blank 'href' REFRESH CURRENT PAGE; i.e. act as hyperlink to CURRENT PAGE: 'https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used/21397285#21397285'. --> |
| 55 | + <a class="header-nav-links_container-link" href="">[Refresh Current Page]</a> |
| 56 | + <a class="header-nav-links_container-link" href="#">[GOTO TOP]</a> |
| 57 | + </div> |
| 58 | + </nav> |
| 59 | + </header> |
| 60 | + <main> |
| 61 | + <section class="main-content"> |
| 62 | + <h1>'Hello World' Example.</h1> |
| 63 | + <p><b>URL for reference</b>: '<a href="https://pyscript.com/@examples/hello-world/latest" target="_blank">https://pyscript.com/@examples/hello-world/latest</a>'.</p> |
| 64 | + <br> |
| 65 | + <p>This is a basic example of how to create a <code>PyScript</code> application that adds a terminal to the page and prints "Hello World" to it. This example is meant to be a starting point for creating more complex applications.</p> |
| 66 | + <br> |
| 67 | + <hr> |
| 68 | + <!-- Display content: 'https://docs.pyscript.net/2024.5.2/user-guide/builtins/#pyscriptdisplay'. --> |
| 69 | + <h2>Using 'pyscript.display': default (i.e. 'append=True') vs. 'append=False'.</h2> |
| 70 | + <ul> |
| 71 | + <li><b>Default</b>: encapsulates the result from 'pyscript.display' between a 'div' tag. Then the 'div' gets ADDED to the inner content of the target DOM element.</li> |
| 72 | + <li><b>'append=False'</b>: the result from 'pyscript.display' RE-WRITES WHATEVER previous inner content of the target DOM.</li> |
| 73 | + </ul> |
| 74 | + <br> |
| 75 | + <p><b>IMPORTANT</b>: whenever as possible, create an html element (and include an id) to populate with the result of 'pyscript.display' by using the 'target=' parameter / property. Otherwise, <b>un-expected behaviours</b> can happen, as the one described <i>in the comments of this html</i>.</p> |
| 76 | + <br> |
| 77 | + <p>Use the 'target=' specification inside the pyscript as a <b>parameter</b> of the 'pyscript.display' function: '<code>from pyscript import display display("PyScript running...", target="pyscript_output")</code>'.</p> |
| 78 | + <br> |
| 79 | + <p><b>CASE 01: default, default.</b></p> |
| 80 | + <p><i>Default:</i></p> |
| 81 | + <!-- |
| 82 | + If running ALONE: 'pyscript.display' adds new html element '<script-py>'', right after <script>...</script>: '<script-py id="py-0"><div>...<result_from_pyscript01>...</div></script-py>'. |
| 83 | + - IMPORTANT: 'div' is added to ATTACH result, to ANY PREVIOUS inner content of the target DOM element; in this case '<script-py>', since target DOM wasn't specified in the 'pyscript.display' function. |
| 84 | + --> |
| 85 | + <p id="pyscript_tests_case01a" class="main-content-pyscript_output_text"></p> |
| 86 | + <script type="py" defer> |
| 87 | + from pyscript import display |
| 88 | + display("This is PyScript running... Default.", target="pyscript_tests_case01a") |
| 89 | + </script> |
| 90 | + <p><i>Default:</i></p> |
| 91 | + <!-- |
| 92 | + When both 'script's run sequentially, it adds new html elements, but both results get placed at the end, RIGHT AFTER the LAST <script>...</script> EXECUTED (in case, target DOMs were NOT specified in the 'pyscript.display' functions): |
| 93 | + - For 1st script, html element '<script-py id="py-0"></script-py>', still gets created in-place as regular (i.e. after the corresponding '<script>' element), but EMPTY; i.e. '<script-py id="py-0"></script-py>'. |
| 94 | + - Outputs are ALL created and assigned to LAST html element '<script-py>' (in case, target DOMs were NOT specified in the 'pyscript.display' functions): '<script-py id="py-1"><div>...<result_from_pyscript01>...</div><div>...<result_from_pyscript02>...</div></script-py>'; id="py-0" to "py-1", in this case for x2 pyscripts executions. |
| 95 | + --> |
| 96 | + <p id="pyscript_tests_case01b" class="main-content-pyscript_output_text"></p> |
| 97 | + <script type="py" defer> |
| 98 | + from pyscript import display |
| 99 | + display("This is PyScript running... Default.", target="pyscript_tests_case01b") |
| 100 | + </script> |
| 101 | + <br> |
| 102 | + <p><b>CASE 02: default, 'append=False'.</b></p> |
| 103 | + <p><i>Default:</i></p> |
| 104 | + <!-- [As first example.] --> |
| 105 | + <p id="pyscript_tests_case02a" class="main-content-pyscript_output_text"></p> |
| 106 | + <script type="py" defer> |
| 107 | + from pyscript import display |
| 108 | + display("This is PyScript running... Default.", target="pyscript_tests_case02a") |
| 109 | + </script> |
| 110 | + </p><i>'append=False':</i></p> |
| 111 | + <!-- |
| 112 | + If running ALONE: 'pyscript.display' adds new html element '<script-py>'', right after <script>...</script> (without <div>): '<script-py id="py-0">...<result_from_display>...</script-py>'. |
| 113 | + - IMPORTANT: this time, there are no '<div>', since ANY PREVIOUS inner content of the target DOM element is OVERWRITTEN. |
| 114 | + --> |
| 115 | + <!-- |
| 116 | + When both 'script's run sequentially, it adds new html elements, but both results get placed at the end, RIGHT AFTER the LAST <script>...</script> EXECUTED (in case, target DOMs were NOT specified in the 'pyscript.display' functions): |
| 117 | + - For 1st script, html element '<script-py id="py-0"></script-py>', still gets created in-place as regular (i.e. after the corresponding '<script>' element), but EMPTY; i.e. '<script-py id="py-0"></script-py>'. |
| 118 | + - Created outputs depend on which pyscripts were run with 'append=False'. Any pyscript as such, WILL OVERWRITE ANY PREVIOUS inner content of the target DOM (in case, target DOMs were NOT specified in the 'pyscript.display' functions); in this case, 1st pyscript is overwritten and only results from 2nd pyscript are showed: '<script-py id="py-1">...<result_from_pyscript02>...</script-py>'; id="py-0" to "py-1", in this case for x2 scripts executions. |
| 119 | + --> |
| 120 | + <p id="pyscript_tests_case02b" class="main-content-pyscript_output_text"></p> |
| 121 | + <script type="py" defer> |
| 122 | + from pyscript import display |
| 123 | + display("This is PyScript running... 'append=False'.", append=False, target="pyscript_tests_case02b") |
| 124 | + </script> |
| 125 | + <br> |
| 126 | + <hr> |
| 127 | + <h2>Example with 'pyscript.display': review 'pyscript.config' parameters.</h2> |
| 128 | + <!-- USe of 'span' element / tag to manipulate text; more specifi, as an inline element: 'https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/', 'https://www.w3schools.com/tags/tag_span.asp'. --> |
| 129 | + <p><b>Config. files</b>: <span id="pyscript_output_config_files" class="main-content-pyscript_output_text"></span></p> |
| 130 | + <p><b>Config packages</b>: <span id="pyscript_output_config_packages" class="main-content-pyscript_output_text"></span></p> |
| 131 | + <script type="py" defer> |
| 132 | + from pyscript import display, config |
| 133 | + display(config.get("files"), target="pyscript_output_config_files") |
| 134 | + display(config.get("packages"), target="pyscript_output_config_packages") |
| 135 | + </script> |
| 136 | + <br> |
| 137 | + <hr> |
| 138 | + <h2>Example with 'pyscript.display': display date and time, NOT USING 'target=' specification.</h2> |
| 139 | + <p>This is the current date and time, as computed by Python:</p> |
| 140 | + <!-- Following PyScript execution will create an html element <script-py>...</script-py> (with 'div's, since we're running it as 'default') right after the <script>...</script> element, only visible (with developer tools; F12) after browser renders it. --> |
| 141 | + <script type="py" defer> |
| 142 | + from pyscript import display |
| 143 | + from datetime import datetime |
| 144 | + now = datetime.now() |
| 145 | + display(now.strftime("%m/%d/%Y, %H:%M:%S")) |
| 146 | + </script> |
| 147 | + <br> |
| 148 | + </section> |
| 149 | + </main> |
| 150 | + </body> |
| 151 | +</html> |
0 commit comments