12.5  Javascript code  and jQuery


Javascript code runs on the client.


Its locations are:

  • In a server file:  filename.js file.   piWebCAT javascript files are in folder cat/js.

     eg: at the start of catcontrol.php, javascript loads include:

       <script src="/cat/js/clientinit.js"></script>

       <script src="/cat/js/meter.js"></script>

       <script src="/cat/js/tuner.js"></script>


  • Embedded in an HTML web page file
    eg:  - towards the end of catcontrol.php we have:

     <script> $(window).on('load', function() { pwcInit();})  </script>        

      This calls function pcwInit() when web page loading is complete.

      pcwInit()  (in file clientInit.js) calls several initialisation functions for the web page.

       It cannot run until page build is complete because, for example,  it cannot set captions

       and colors on buttons that don't yet exist.
      ( hence the use of $(window).on('load'.. to delay pcwInit() until load is finished)


All Javascript, embedded and file-based becomes part of one composite javascript code block

for the lifetime of the webpage.  Any function defined in embedded code or in a loaded file

is available for use by any other function.


Javascript can read and set the properties of controls on the webpage (eg: buttons and sliders)
JQuery make this much easier:


jQuery


jQuery extends the javascript language with an extensive set of commands that are easier to use.


jQuery commands can all begin with jQuery(.....   but $(.... is shorter and therefore used.


Example:


Every component on the web page is assigned an id field, eg:


<input id="btnTxmA" type="button" class="buttontxmeter" value="TxA"  ..etc


This is the leftmost Tx meter button on my FTdx101D.   Its id field is "btnTxmA".

(Actually a very long definition ..so I truncated it to fit it on this page!)
The button definition above has  value = "TxA". For HTML buttons, this sets the caption.


To change the caption to "PO" with jQuery,  we simply use   $("#btnTxmA").val("PO");


I cannot remember all the wide range of jQuery functions.
I have downloaded and printed the jQuery manual ... but I don't use it.
I just Google what I want to know..... Every search yields multiple helpful answers.


Note the class="buttontxmeter" .

buttonxmeter is a button design specification define in file styles/buttons.css