Javascript runtime environments

From wikinotes
Revision as of 14:46, 18 December 2022 by Will (talk | contribs)

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">Add</button>
      <input type="text" name="x" placeholder="1">
      <input type="text" name="y" placeholder="2">
      <span>=</span>
      <input type="text" name="R" readonly="1">
    </div>
  </body>
</html>

${PROJECT}/main.js


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

console.log(Math.sum(1, 1));
console.log(Math.multiply(2, 2));

${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