Javascript runtime environments: Difference between revisions
From wikinotes
No edit summary Tag: Reverted |
|||
Line 28: | Line 28: | ||
|} | |} | ||
</blockquote><!-- Engines --> | </blockquote><!-- Engines --> | ||
= Templates = | |||
<blockquote> | |||
== WebBrowser == | |||
<blockquote> | |||
Some features of javascript (ex. [[javascript modules|ES6 modules]]) do not work when loading webpages directly from the filesystem.<br> | |||
You can use a tiny toy web-server like [[python http]] or [[golang simple-go-web-server]] to load your javascript instead. | |||
{{ expand | |||
| ${PROJECT}/index.html | |||
| | |||
<syntaxhighlight lang="html5"> | |||
<!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> | |||
</syntaxhighlight> | |||
}} | |||
{{ expand | |||
| ${PROJECT}/main.js | |||
| | |||
<syntaxhighlight lang="javascript"> | |||
import * as Math from './modules/math.js'; | |||
console.log(Math.sum(1, 1)); | |||
console.log(Math.multiply(2, 2)); | |||
</syntaxhighlight> | |||
}} | |||
{{ expand | |||
| ${PROJECT}/modules/math.js | |||
| | |||
<syntaxhighlight lang="javascript"> | |||
export function sum(a, b) { | |||
return a + b; | |||
} | |||
export function multiply(a, b) { | |||
return a * b; | |||
} | |||
</syntaxhighlight> | |||
}} | |||
<syntaxhighlight lang="bash"> | |||
open 'http://localhost:3000' | |||
simple-go-web-server --hot | |||
# reload to get changes | |||
</syntaxhighlight> | |||
</blockquote><!-- WebBrowser --> | |||
</blockquote><!-- Templates --> |
Revision as of 14:46, 18 December 2022
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