To make sense of this sample page, you need to build yourself a mental model of how Flask, HTML, CSS, Javascript, your browser, and the server are working together.
Towards that end, you should first just try using the page. Poke the buttons, type in the text box, type outside the text box...just play with the page and see what it does.
Then, study all four source files (javascript_sample.py, index.html, sample.css, and sample.js). Figure out what's going on in every line. Try modifying pieces and see what happens when you reload the page (or when you forget to reload the page).
Also, you can debug the Javascript in most modern browsers by right-clicking on the page, selecting "Inspect", choosing the Source tab and sample.js, placing breakpoints, and then reloading the page or clicking the buttons or typing at the keyboard.
You can execute Javascript code whenever the page loads into the browser. In this case
This example shows how you can execute Javascript in response to keyboard events. It also illustrates how to modify an element's CSS style (in this case, the background-color) from within Javascript.
Type g, r, or b to change the color to green, red, or blue.
How to execute Javascript in response to a button click. Also, how to extract user-entered text from a text box.
This section demonstrates AJAX, where the Javascript issues a network query without reloading the whole page. Note that Javascript is restricted by the Same Origin Policy, which prevents Javascript from retrieving anything from a domain other than the domain this page came from.
Click on the button below to obtain the current time on the server this page came from.