<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<!--
    Playing with JavaScript and some of functional programming
    features

    by: Sharon Tuttle
    last modified: 2025-05-01

    you can run this using the URL:

https://nrs-projects.humboldt.edu/~st10/s25cs328/328lect14-2/js-funct-play.html

-->


<head>
    <title> JS function play </title>
    <meta charset="utf-8" />

    <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css"
          type="text/css" rel="stylesheet" />

    <script type="text/javascript">

        "use strict";
        
        // set a variable looky to an anonymous function

        let looky = function()
                    {
                         alert("Called by a function with no name!");
                    };

        looky();

        // you can also have a named function:

        function named()
        {
            alert("called by a NAMED function");
        }

        named();

        // you can set a variable to a named function, also
        //
        // NOTE that there are NO parentheses below!!!!!!

        let alsoNamed = named;

        alsoNamed();

        // a JS function can have a function as its argument

        function silly(functParam)
        {
            alert("BEGINNING of function silly");
            functParam();
            alert("END of function silly");
        }

        silly(named);

        silly(function()
              {
                  alert("MOOOOOOOOOOOOOOOO!");
              });

        /*===
            UNCOMMENT, run this, and (if in Chrome) look at:
            View->Developer->JavaScript Console
            ...to see the error message
        ===*/    

        //silly(named());
        
        alert("the HEAD element JavaScript popup nightmare is now over!");

        window.onload =
            function()
            {
                let greetButton = document.getElementById("greet");

                // so, NOW changing the DOM, after the document has been loaded,
                //     adding an onclick attribute to this button with id="greet"

                greetButton.onclick =
                    function()
                    {
                        let greetHeader = document.getElementById("greeting");

                        // when this button is clicked, change the content of the
                        //    element with id="greeting" based on its current content

                        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> JavaScript Function Play </h1>

    <p> <strong>NOTE</strong> - OY, this does NOTHING if
        JavaScript is disabled or 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>