Javascript anatomy: Difference between revisions
From wikinotes
(Created page with " = Web Browser = <blockquote> Some features of javascript (ex. 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="e...") |
|||
Line 1: | Line 1: | ||
= NodeJS Cli = | |||
<blockquote> | |||
</blockquote><!-- NodeJS Cli --> | |||
= Web Browser = | = Web Browser = | ||
Line 79: | Line 84: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote><!-- Web Browser --> | </blockquote><!-- Web Browser --> | ||
= Web Browser, Bundled javascript = | |||
<blockquote> | |||
</blockquote><!-- Web Browser, Bundled javascript --> |
Revision as of 16:11, 18 December 2022
NodeJS Cli
Web Browser
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