|
|
| (One intermediate revision by the same user not shown) |
| 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-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>
| |
| </syntaxhighlight>
| |
| }}
| |
|
| |
| {{ expand
| |
| | ${PROJECT}/main.js
| |
| |
| |
|
| |
| <syntaxhighlight lang="javascript">
| |
| 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>
| |
| }}
| |
|
| |
| {{ 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 -->
| |
