<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- Trying out some JavaScript functional programming features by: Sharon Tuttle last modified: 2024-04-23 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s24cs328/328lect14-1/js-funct-play.html --> <head> <title> JS functional-progr features </title> <meta charset="utf-8" /> <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> <!-- playing around with JavaScript anonymous functions and event-handling --> <script type="text/javascript"> // can set a variable to have a function as its value! // (happening to set it to an anonymous function here, // but it COULD be a named function as well...) let looky = function() { alert("Called by a function with no name!"); }; // and now calling the function that is looky's current value looky(); // silly example of a function with a function parameter function silly(funct_param) { alert("BEGINNING of function silly"); funct_param(); alert("END of function silly"); } // now calling that function with a function parameter: // ...once with an anonymous function argument: silly(function() { alert("MOOOOOOOOOOOOOOOOOOO"); } ); // ...and once with an argument whose value is a function: silly(looky); // when this document is done loading into the browser window, // add an onclick attribute to its button window.onload = function() { let greetButton = document.getElementById("greet"); greetButton.onclick = function() { let greetHeader = document.getElementById("greeting"); // vary the greeting added to the content of the // element with id="greeting" based on // its current value when the button is clicked if (greetHeader.innerHTML == "") { greetHeader.innerHTML = "GREETINGS for the FIRST TIME!"; } else { if (greetHeader.innerHTML == "Hello!") { greetHeader.innerHTML = "Howdy!"; } else { greetHeader.innerHTML = "Hello!"; } } }; }; </script> </head> <body> <h1> PLAYING with some JavaScript functional programming features </h1> <p> <strong>NOTE</strong> - OY, this does NOTHING if JavaScript disabled OR if pop-ups are not enabled!!! </p> <p> <button id="greet">Get a greeting</button> </p> <h2 id="greeting"></h2> <footer> <hr /> <p> Validate by pasting .xhtml copy's URL into<br /> <a href="https://validator.w3.org/nu"> https://validator.w3.org/nu </a> or <a href="https://html5.validator.nu/"> https://html5.validator.nu/ </a> </p> </footer> </body> </html>