Multiplication tables: Difference between revisions
Added JavaScript example that works with non-browser environments.
(Added JavaScript example that works with non-browser environments.) |
|||
Line 4,613:
=={{header|JavaScript}}==
===
The following example works with any (modern) JavaScript runtime:
<syntaxhighlight lang="javascript" lines>
function timesTable(){
let output = "";
const size = 12;
for(let i = 1; i <= size; i++){
output += i.toString().padStart(3);
output += i !== size ? " " : "\n";
}▼
for(let i = 0; i <= size; i++)
output += i !== size ? "════" : "╕\n";
for(let i = 1; i <= size; i++){
for(let j = 1; j <= size; j++){
output += j < i
? " "
: (i * j).toString().padStart(3) + " ";
}
output += `│ ${i}\n`;
}▼
return output;
}
</syntaxhighlight>
{{out}}
<pre>
1 2 3 4 5 6 7 8 9 10 11 12
════════════════════════════════════════════════╕
1 2 3 4 5 6 7 8 9 10 11 12 │ 1
4 6 8 10 12 14 16 18 20 22 24 │ 2
9 12 15 18 21 24 27 30 33 36 │ 3
16 20 24 28 32 36 40 44 48 │ 4
25 30 35 40 45 50 55 60 │ 5
36 42 48 54 60 66 72 │ 6
49 56 63 70 77 84 │ 7
64 72 80 88 96 │ 8
81 90 99 108 │ 9
100 110 120 │ 10
121 132 │ 11
144 │ 12
</pre>
=== HTML tables ===
The following examples require a browser or browser-like environment:
====Imperative====
<syntaxhighlight lang="html4strict"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
Line 4,620 ⟶ 4,666:
<title>12 times table</title>
<script type='text/javascript'>
function multiplication_table(n, target) {
var table = document.createElement('table');
Line 4,655 ⟶ 4,700:
target.appendChild(table);
}
</script>
<style type='text/css'>
Line 4,671 ⟶ 4,715:
<div><table><tr><th>x</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th></tr><tr><th>1</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><th>2</th><td> </td><td>4</td><td>6</td><td>8</td><td>10</td><td>12</td><td>14</td><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td></tr><tr><th>3</th><td> </td><td> </td><td>9</td><td>12</td><td>15</td><td>18</td><td>21</td><td>24</td><td>27</td><td>30</td><td>33</td><td>36</td></tr><tr><th>4</th><td> </td><td> </td><td> </td><td>16</td><td>20</td><td>24</td><td>28</td><td>32</td><td>36</td><td>40</td><td>44</td><td>48</td></tr><tr><th>5</th><td> </td><td> </td><td> </td><td> </td><td>25</td><td>30</td><td>35</td><td>40</td><td>45</td><td>50</td><td>55</td><td>60</td></tr><tr><th>6</th><td> </td><td> </td><td> </td><td> </td><td> </td><td>36</td><td>42</td><td>48</td><td>54</td><td>60</td><td>66</td><td>72</td></tr><tr><th>7</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>49</td><td>56</td><td>63</td><td>70</td><td>77</td><td>84</td></tr><tr><th>8</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>64</td><td>72</td><td>80</td><td>88</td><td>96</td></tr><tr><th>9</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>81</td><td>90</td><td>99</td><td>108</td></tr><tr><th>10</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>100</td><td>110</td><td>120</td></tr><tr><th>11</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>121</td><td>132</td></tr><tr><th>12</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>144</td></tr></table></div>
====Functional====
=====ES5=====
<syntaxhighlight lang="javascript">(function (m, n) {
// [m..n]
function range(m, n) {
Line 4,686 ⟶ 4,730:
return [].concat.apply([], xs.map(f));
}
var rng = range(m, n),
lstTable = [['x'].concat( rng )]
.concat(mb(rng, function (x) {
return [[x].concat(mb(rng, function (y) {
return y < x ? [''] : [x * y]; // triangle only
}))]}));
Line 4,720 ⟶ 4,761:
// or simply stringified as JSON
JSON.stringify(lstTable);
})(1, 12);</syntaxhighlight>
Line 4,768 ⟶ 4,808:
[12,"","","","","","","","","","","",144]]</syntaxhighlight>
=====ES6=====
<syntaxhighlight lang="javascript">(() => {
"use strict";
| |||