Javascript runtime environments

From wikinotes
Revision as of 16:06, 18 December 2022 by Will (talk | contribs) (→‎WebBrowser)

Javascript is executed by a javascript engine (ex: v8).
the runtime environment is how you communicate with it.

Generally, this environment is provided by your web browser.
There are also tools like node.js that let you run javascript on the commandline.

Runtime Environments

nodejs interpreter, cli
spidermonkey (firefox) includes interpreter, cli

Engines

v8 google chrome's javascript engine
spidermonkey firefox javascript engine
nitro safari javascript engine

Templates

WebBrowser

Some features of javascript (ex. ES6 modules) do not work when loading webpages directly from the filesystem.
You can use a tiny toy web-server like python http or golang simple-go-web-server to load your javascript instead.

${PROJECT}/index.html 

<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
  <head>
    <title>My Website</title>
    <script type="module" src="main.js"></script>
  <!--   <link rel="stylesheet" href="stylesheet.css" /> -->
  </head>
  <body>
    <h1>My Title</h1>
    <p>Some paragraph</p>

    <div id="sum-div">
      <button id="sum-btn">Add</button>
      <input class="addend" type="text" placeholder="1">
      <input class="addend" type="text" placeholder="2">
      <span>=</span>
      <input class="result" type="text" readonly="1">
    </div>
  </body>
</html>

${PROJECT}/main.js 


import * as Math from './modules/math.js'


function sumClicked() {
  var sum_btn = document.getElementById("sum-div");
  var addend_inputs = Array.from(sum_btn.querySelectorAll(".addend"));
  var addend_values = addend_inputs.map((input) => { return Number(input.value) });
  var sum = Math.sum(...addend_values);

  var result_input = sum_btn.querySelector(".result");
  result_input.setAttribute("value", String(sum));
}


document.getElementById("sum-btn").addEventListener("click", sumClicked);

${PROJECT}/modules/math.js 


export function sum(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}



open 'http://localhost:3000'
simple-go-web-server --hot
# reload to get changes
Retrieved from "http://willpittman.net:8080/index.php?title=Javascript_runtime_environments&oldid=32576"