63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Examples - Fibonacci</title>
|
|
<link rel="stylesheet" type="text/css" href="main.css">
|
|
</head>
|
|
<body>
|
|
<h1>Examples - Fibonacci</h1>
|
|
|
|
<div class="menu">
|
|
<a href="index.html">List</a> - <a href="fib.py.html">Source</a> - <a href="fib.wat.html">WebAssembly</a>
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>
|
|
This example shows a recursive implementation of the <a href="https://en.wikipedia.org/wiki/Fibonacci_sequence">Fibonacci sequence</a>.
|
|
It makes uses of WebAssembly's support for <a href="https://en.wikipedia.org/wiki/Tail_call">tail calls</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Try it out!</h3>
|
|
<div class="example">
|
|
<input type="number" id="example-n" value="25" />
|
|
<button type="click" id="example-click" disabled>Calculate</button>
|
|
<input type="number" id="example-fib" />
|
|
</div>
|
|
|
|
<div class="example-list">
|
|
<ul>
|
|
<li><a href="#" data-n="5">fib(5)</a> = 5</li>
|
|
<li><a href="#" data-n="10">fib(10)</a> = 55</li>
|
|
<li><a href="#" data-n="25">fib(25)</a> = 75025</li>
|
|
<li><a href="#" data-n="50">fib(50)</a> = 12586269025</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
let importObject = {};
|
|
let exampleN = document.querySelector('#example-n');
|
|
let exampleClick = document.querySelector('#example-click');
|
|
let exampleFib = document.querySelector('#example-fib');
|
|
|
|
WebAssembly.instantiateStreaming(fetch('fib.wasm'), importObject)
|
|
.then(app => {
|
|
exampleClick.addEventListener('click', event => {
|
|
let in_put = exampleN.value;
|
|
let result = app.instance.exports.fib(BigInt(in_put));
|
|
exampleFib.value = result;
|
|
});
|
|
exampleClick.removeAttribute('disabled');
|
|
});
|
|
|
|
for(let exmpl of document.querySelectorAll('a[data-n]') ) {
|
|
exmpl.addEventListener('click', event => {
|
|
exampleN.value = exmpl.getAttribute('data-n');
|
|
exampleClick.click();
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|