Javascript runtime environments: Difference between revisions
From wikinotes
No edit summary Tag: Reverted |
Tag: Reverted |
||
Line 53: | Line 53: | ||
<div id="sum-div"> | <div id="sum-div"> | ||
<button id="sum">Add</button> | <button id="sum-btn">Add</button> | ||
<input | <input class="addend" type="text" placeholder="1"> | ||
<input | <input class="addend" type="text" placeholder="2"> | ||
<span>=</span> | <span>=</span> | ||
<input | <input class="result" type="text" readonly="1"> | ||
</div> | </div> | ||
</body> | </body> | ||
Line 69: | Line 69: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import * as Math from './modules/math.js' | // import { multiply } from './modules/math.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); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
}} | }} | ||
Line 81: | Line 93: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
export function sum(a, b) { | export function sum(a, b) { | ||
return a + b; | |||
} | } | ||
export function multiply(a, b) { | export function multiply(a, b) { | ||
return a * b; | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 16:05, 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-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 { multiply } from './modules/math.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