Embedding javascript client side.

[aykaramba]

1. I have looked into js-execute and js-query and all of that seems straight forward but I don't want to interact with js from CLOG just yet. Just out of curiosity, is it possible to embed raw html + js in a page and have the js execute like it would in this example: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html

2. The reason that I ask is I wanted to embed this Chartjs sample just to see how that works: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

Note: Loading up the .js is clear: (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js")

I looked into (create-web-content) and related forms but I'm not seeing an obvious way how to do this. Just curious how that might be done so I can play with a bit of javascript and then move on to testing Plotly.

Thanks.

[aykaramba]

For any noob wondering, here is one way to embed raw html + javascript into a page:

(create-div body :content (format nil "~a" 
   "<h2>What Can JavaScript Do?</h2>
   <p id=\"demo\">JavaScript can change HTML content.</p>
  <button type=\"button\" onclick='document.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\"'>Click Me!</button>"))

The key is to escape the double quotes appropriately so the string can be parsed correctly. This let's us embed raw js into a page.

[aykaramba]

And here is how you embed Chartjs into a CLOG page:

1. Link to example: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

2. CLOG code:

(load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js")

(create-div content :content (format nil "~a" 
                                                                            
                                         "
                                           <canvas id=\"bar-chart\" width=\"800\" height=\"450\"></canvas>

                                           <script>
                                           new Chart(document.getElementById(\"bar-chart\"), {
                                               type: 'bar',
                                               data: {
                                                 labels: [\"Africa\", \"Asia\", \"Europe\", \"Latin America\", \"North America\"],
                                                 datasets: [
                                                   {
                                                     label: \"Population (millions)\",
                                                     backgroundColor: [\"#3e95cd\", \"#8e5ea2\",\"#3cba9f\",\"#e8c3b9\",\"#c45850\"],
                                                     data: [2478,5267,734,784,433]
                                                   }
                                                 ]                                                                                 
                                               },
                                               options: {
                                                 legend: { display: false },
                                                 title: {
                                                   display: true,
                                                   text: 'Predicted world population (millions) in 2050'
                                                 }
                                               }
                                             });
                                             </script>

                                           "))
                             

Apologies for the large amount of white space. I tried to make the infix notation clear while making the format notation distinct for anyone looking for the escape characters to compare to the original example.