Client Side: JavaScript and jQuery

Stephen Lukacs (2) iquanta.org/instruct/python

The Date and Time is:

Enter your name here: 

from py4web import URL
from yatl.helpers import A
"""
reference: https://iquanta.org/instruct/python ::: Example 6, Client Side: JavaScript and jQuery ::: Stephen Lukacs, Ph.D. ©2021-11-09

this is the first example of client-side processing.  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.  
jQuery is an extension to javascipt and makes javascript'ing a bit more easier.

you'll notice that the date and time update every second on this page because the javascript 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.

you'll also notice new tagged sections under the <page_scripts>...</page_scripts> section.  you'll notice <style>...</style> 
which is a CSS section and <script>...</script> which designates the javascript code within it.  in fact, the <script type="text/javascript"> 
tag with the property "type="text/javascript"" tells the web browser that the code between this tag is specifically javascript code.  
we'll use a different script type property in order to use brython under a web browser also.

at this point you're learning 6 programming languages, i.e., python, HTML, py4web, CSS, javascript, and jQuery.
"""
<page_scripts>
<style>
    p { text-align: left; }
</style>
<script type="text/javascript">
var message;
jQuery(function() {
    jQuery('input[type="submit"][id="submit"]').click(function(obj) {
       obj.preventDefault();
       console.log('submitting name');
       jQuery('p#greeting').html(message +" "+ jQuery('input[id="name"]').val() +".  I hope your day is going great." );
    });
});

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

setInterval(function(){
   var now = new Date();
   var dow = days[ now.getDay() ];
   var month = months[ now.getMonth() ];
   var date = now.getDate();
   var year = now.getFullYear();
   var hours = now.getHours();
   var minutes = now.getMinutes();
   var seconds = now.getSeconds();
   message = hours < 12 ? 'Good Morning' : hours < 18 ? 'Good Afternoon' : 'Good Evening';

   // Add leading zeros
   date = (date < 10 ? "0" : "") + date;
   minutes = (minutes < 10 ? "0" : "") + minutes;
   seconds = (seconds < 10 ? "0" : "") + seconds;
   hours = (hours < 10 ? "0" : "") + hours;

   // Compose the string for display
   var currentDateTimeString = dow +", "+ month +" "+ date +", "+ year +" @ <b>"+ hours +":"+ minutes +":"+ seconds +"</b>";
   jQuery('p#clock').html(currentDateTimeString);
   }, 1000); //refresh every 1 second.

jQuery(document).ready( function () {
    var sx = "jQuery.version: "+jQuery.fn.jquery; //+" | jQuery.ui.version: "+jQuery.ui.version;
    console.log("jQuery.document.ready from Example_6.js begin..."+sx);
    console.log("initialization stuff here...");
    console.log("reference: https://iquanta.org/instruct/python ::: Example 6: Client Side: JavaScript and jQuery ::: Stephen Lukacs, Ph.D. ©2021-11-09");
    console.log("jQuery.document.ready from Example_6.js end");
});
</script>
</page_scripts>

<header>
Similar to example: {{=A('Client Side: Brython 3', _href=URL('python/exec/13'))}}.
</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>
</body>