Multiplication tables: Difference between revisions
Content added Content deleted
(Added JavaScript example that works with non-browser environments.) |
|||
Line 4,613: | Line 4,613: | ||
=={{header|JavaScript}}== |
=={{header|JavaScript}}== |
||
=== |
=== Unicode output === |
||
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"> |
<syntaxhighlight lang="html4strict"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
||
<head> |
<head> |
||
Line 4,620: | Line 4,666: | ||
<title>12 times table</title> |
<title>12 times table</title> |
||
<script type='text/javascript'> |
<script type='text/javascript'> |
||
function multiplication_table(n, target) { |
function multiplication_table(n, target) { |
||
var table = document.createElement('table'); |
var table = document.createElement('table'); |
||
Line 4,655: | Line 4,700: | ||
target.appendChild(table); |
target.appendChild(table); |
||
} |
} |
||
</script> |
</script> |
||
<style type='text/css'> |
<style type='text/css'> |
||
Line 4,671: | Line 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> |
<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=== |
====Functional==== |
||
====ES5==== |
=====ES5===== |
||
<syntaxhighlight lang="javascript">(function (m, n) { |
<syntaxhighlight lang="javascript">(function (m, n) { |
||
⚫ | |||
// [m..n] |
// [m..n] |
||
function range(m, n) { |
function range(m, n) { |
||
Line 4,686: | Line 4,730: | ||
return [].concat.apply([], xs.map(f)); |
return [].concat.apply([], xs.map(f)); |
||
} |
} |
||
⚫ | |||
var rng = range(m, n), |
var rng = range(m, n), |
||
lstTable = [['x'].concat( rng )] |
lstTable = [['x'].concat( rng )] |
||
.concat(mb(rng, function (x) { |
.concat(mb(rng, function (x) { |
||
return [[x].concat(mb(rng, function (y) { |
return [[x].concat(mb(rng, function (y) { |
||
return y < x ? [''] : [x * y]; // triangle only |
return y < x ? [''] : [x * y]; // triangle only |
||
}))]})); |
}))]})); |
||
Line 4,720: | Line 4,761: | ||
// or simply stringified as JSON |
// or simply stringified as JSON |
||
JSON.stringify(lstTable); |
JSON.stringify(lstTable); |
||
})(1, 12);</syntaxhighlight> |
})(1, 12);</syntaxhighlight> |
||
Line 4,768: | Line 4,808: | ||
[12,"","","","","","","","","","","",144]]</syntaxhighlight> |
[12,"","","","","","","","","","","",144]]</syntaxhighlight> |
||
====ES6==== |
=====ES6===== |
||
<syntaxhighlight lang="javascript">(() => { |
<syntaxhighlight lang="javascript">(() => { |
||
"use strict"; |
"use strict"; |