This repository has been archived by the owner on Feb 19, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathP19_BITS_AND_BYTES.html
582 lines (548 loc) · 44.1 KB
/
P19_BITS_AND_BYTES.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
<hr>
<p><strong>BITS_AND_BYTES</strong></p>
<hr>
<p><span style="background: #ffff00">The <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank" rel="noopener">single web page application</a> featured in this tutorial web page allows the end user to click switches which each flip a single uniquely corresponding light bulb from “OFF” to “ON” and vice versa and, also, to click a BINARY_TO_DECIMAL button which computes the binary number represented by the light bulb array configuration at the time that button is clicked. Algebraic equations which are used to convert the base-two integer value represented by the sequence of eight light bulbs to that base-two integer’s base-ten equivalent value are displayed at the bottom of this web page. (Clicking the RESET button will return this web page to its initial state such that each one of the eight light bulbs is set to “OFF” and all buttons on this web page are set to visible).</span></p>
<p>The binary integer value 0 is an abstract representation of the relatively physical “OFF” (insufficiently high voltage) light bulb state.</p>
<p>The binary integer value 1 is an abstract representation of the relatively physical “ON” (sufficiently high voltage) light bulb state.</p>
<p>Each one of the eight light bulbs displayed in the table below represents a particular power of two.</p>
<p>(N in the table below represents a nonnegative integer value no larger than seven).</p>
<p>While light_bulb_N is in its “ON” state, light_bulb_N represents two multiplied by itself N times.</p>
<p>While light_bulb_N is in its “OFF” state, light_bulb_N represents zero.</p>
<p>The nonnegative decimal integer value which the sequence of eight light bulbs represents is computed by adding up the nonnegative decimal integer values which each of those eight light bulbs represents.</p>
<p>The largest decimal integer value which the sequence of eight light bulbs can represent is 255.</p>
<p>The smallest decimal integer value which the sequence of eight light bulbs can represents is 0.</p>
<p>The total number of unique states which the sequence of eight light bulbs can represent is 256.</p>
<p>The largest binary integer value which any one of the eight light bulbs can represent is 1.</p>
<p>The smallest binary integer value which any one of the eight light bulbs can represent is 0.</p>
<p>The total number of unqiue states which any one of the eight light bulbs can represent is 2.</p>
<p>The rightmost light bulb has an N value of 0.</p>
<p>The rightmost light bulb represents the “lowest order bit” in the byte which the sequence of eight light bulb represents.</p>
<p>lowest_order_bit(ON) = 1 * (2 ^ 0) = 1 * 1 = 1.</p>
<p>lowest_order_bit(OFF) = 0 * (2 ^ 0) = 0 * 1 = 0.</p>
<p>The leftmost light bulb has an N value of 7.</p>
<p>The leftmost light bulb represents the “highest order bit” in the byte which the sequence of eight light bulb represents.</p>
<p>highest_order_bit(ON) = 1 * (2 ^ 7) = 1 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 128.</p>
<p>highest_order_bit(OFF) = 0 * (2 ^ 7) = 0 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 0.</p>
<p><em>To view hidden text inside each of the preformatted text boxes below, scroll horizontally.</em></p>
<pre>BIT := abbreviation("binary digit") = OR(0,1). // A bit represents one of two possible unique states at a time (and those two states are the integers 0 and 1).</pre>
<pre>BYTE := abbreviation("binary term") = BIT[8]. // A byte represents a sequence of eight bits.</pre>
<hr>
<p><strong>SOFTWARE_APPLICATION_COMPONENTS</strong></p>
<hr>
<p>Hyper-Text-Markup-Language_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.html</a></p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css</a></p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.js</a></p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/light_bulb_off.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/light_bulb_off.png</a></p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/light_bulb_on.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/KARLINA_OBJECT_summer_2023_starter_pack/main/light_bulb_on.png</a></p>
<hr>
<p><strong>Hyper-Text-Markup-Language Code</strong></p>
<hr>
<p>The following Hyper-Text-Markup-Language (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a>) code defines the user interface component of the BINARY_TO_DECIMAL web page application. Copy the HTML code from the source code file which is linked below into a text editor and save that file as <strong>binary_to_decimal.html</strong>. Use a web browser such as <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Firefox" target="_blank" rel="noopener">Firefox</a> to open that HTML file (and ensure that the JavaScript and Cascading-Style-Sheet files are in the same file directory as the HTML file).</p>
<p><em>(Note that angle brackets which resemble <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a> tags (i.e. an “is less than” symbol (i.e. ‘<‘) followed by an “is greater than” symbol (i.e. ‘>’)) displayed on this web page have been replaced (at the source code level of this web page) with the Unicode symbols <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Less-than_sign" target="_blank" rel="noopener">U+003C</a> (which is rendered by the web browser as ‘<‘) and <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Greater-than_sign" target="_blank" rel="noopener">U+003E</a> (which is rendered by the web browser as ‘>’). That is because the <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/WordPress.com" target="_blank" rel="noopener">WordPress</a> web page editor or web browser interprets a plain-text version of an “is less than” symbol followed by an “is greater than” symbol as being an opening HTML tag (which means that the WordPress web page editor or web browser deletes or fails to display those (plain-text) inequality symbols and the content between those (plain-text) inequality symbols)).</em></p>
<p><em><strong>If copy-pasting the following HTML code from the preformatted text box below into a text editor, remove the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Zero-width_space" target="_blank" rel="noopener">zero-width space</a> Unicode character (<span style="background:#000000;color:#fe9eff">&​#8203;</span>) which is located between the ‘s’ and the ‘r’ in the script tag(s) which each link to a <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JavaScript</a> file.</em></strong></p>
<p>Hyper-Text-Markup-Language_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.html</a></p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_html_code_screenshot.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_html_code_screenshot.png</a></p>
<hr>
<pre>
<!--
/**
* file: binary_to_decimal.html
* type: Hyper-Text-Markup-Language
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BINARY_TO_DECIMAL</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<script s​rc="binary_to_decimal.js"></script>
<style>
.highlight {
background: #ffff00;
color: #000000;
}
div {
padding-bottom: 10px;
}
hr {
border: 3px solid #00ff00;
border-radius: 5px;
}
</style>
</head>
<body onload="initialize_application()">
<h1>BINARY_TO_DECIMAL</h1>
<p class="highlight">
This single page web application allows the user to click switches which each
flip a single uniquely corresponding light bulb from "OFF" to "ON" and vice versa and, also,
to click a BINARY_TO_DECIMAL button which computes the binary number represented
by the light bulb array configuration at the time that button is clicked. Algebraic equations
which are used to convert the base-two integer value represented by the sequence of eight light bulbs
to that base-two integer's base-ten equivalent value are displayed at the bottom of this web page.
(Clicking the RESET button will return this web page to its initial state such that each one of
the eight light bulbs is set to "OFF" and all buttons on this web page are set to visible).
</p>
<p>
The binary integer value <span class="highlight">0</span> is an abstract representation of
the relatively physical "OFF" (insufficiently high voltage) light bulb state.
</p>
<p>
The binary integer value <span class="highlight">1</span> is an abstract representation of
the relatively physical "ON" (sufficiently high voltage) light bulb state.
</p>
<hr>
<p>Each one of the eight light bulbs displayed in the table below represents a particular power of two.</p>
<p>(N in the table below represents a nonnegative integer value no larger than seven).
<p>While light_bulb_N is in its "ON" state, light_bulb_N represents two multiplied by itself N times.</p>
<p>While light_bulb_N is in its "OFF" state, light_bulb_N represents zero.</p>
<hr>
<p>
The nonnegative decimal integer value which the sequence of eight light bulbs represents is computed by
adding up the nonnegative decimal integer values which each of those eight light bulbs represents.
</p>
<hr>
<p>The largest decimal integer value which the sequence of eight light bulbs can represent is 255.</p>
<p>The smallest decimal integer value which the sequence of eight light bulbs can represents is 0.</p>
<p>The total number of unique states which the sequence of eight light bulbs can represent is 256.</p>
<hr>
<p>The largest binary integer value which any one of the eight light bulbs can represent is <span class="highlight">1</span>.</p>
<p>The smallest binary integer value which any one of the eight light bulbs can represent is <span class="highlight">0</span>.</p>
<p>The total number of unqiue states which any one of the eight light bulbs can represent is 2.</p>
<hr>
<p>The rightmost light bulb has an N value of 0.</p>
<p>The rightmost light bulb represents the "lowest order bit" in the byte which the sequence of eight light bulb represents.</p>
<p class="console">lowest_order_bit(<span class="highlight">ON</span>) = <span class="highlight">1</span> * (2 ^ 0) = 1 * 1 = 1.</p>
<p class="console">lowest_order_bit(<span class="highlight">OFF</span>) = <span class="highlight">0</span> * (2 ^ 0) = 0 * 1 = 0.</p>
<hr>
<p>The leftmost light bulb has an N value of 7.</p>
<p>The leftmost light bulb represents the "highest order bit" in the byte which the sequence of eight light bulb represents.</p>
<p class="console">
highest_order_bit(<span class="highlight">ON</span>) = <span class="highlight">1</span> * (2 ^ 7) = 1 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 128.
</p>
<p class="console">
highest_order_bit(<span class="highlight">OFF</span>) = <span class="highlight">0</span> * (2 ^ 7) = 0 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 0.
</p>
<div>
<table style="text-align: center">
<tr>
<td>N</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>light_bulb_N</td>
<td id="light_bulb_7"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_6"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_5"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_4"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_3"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_2"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_1"><img s​rc="light_bulb_off.png" width="60"></td>
<td id="light_bulb_0"><img s​rc="light_bulb_off.png" width="60"></td>
</tr>
<tr>
<td>bit_N</td>
<td id="bit_7" class="console">0</td>
<td id="bit_6" class="console">0</td>
<td id="bit_5" class="console">0</td>
<td id="bit_4" class="console">0</td>
<td id="bit_3" class="console">0</td>
<td id="bit_2" class="console">0</td>
<td id="bit_1" class="console">0</td>
<td id="bit_0" class="console">0</td>
</tr>
<tr>
<td>switch_N</td>
<td><input type="button" id="switch_7" value="SWITCH" onclick="switch_7()"></td>
<td><input type="button" id="switch_6" value="SWITCH" onclick="switch_6()"></td>
<td><input type="button" id="switch_5" value="SWITCH" onclick="switch_5()"></td>
<td><input type="button" id="switch_4" value="SWITCH" onclick="switch_4()"></td>
<td><input type="button" id="switch_3" value="SWITCH" onclick="switch_3()"></td>
<td><input type="button" id="switch_2" value="SWITCH" onclick="switch_2()"></td>
<td><input type="button" id="switch_1" value="SWITCH" onclick="switch_1()"></td>
<td><input type="button" id="switch_0" value="SWITCH" onclick="switch_0()"></td>
</tr>
</table>
</div>
<div>
<input type="button" id="binary_to_decimal_button" value="BINARY_TO_DECIMAL" onclick="binary_to_decimal()">
<input type="button" id="reset_button" value="RESET" onclick="initialize_application()">
</div>
<div id="output"><p>???</p></div>
</body>
</html>
</pre>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21852" data-permalink="https://karlinaobject.wordpress.com/bits_and_bytes/binary_to_decimal_html_code_screenshot-2/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png" data-orig-size="1372,3344" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="binary_to_decimal_html_code_screenshot" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png?w=123" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png?w=420" width="1372" height="3344" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png" alt="" class="wp-image-21852" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png 1372w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png?w=62&h=150 62w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png?w=123&h=300 123w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png?w=768&h=1872 768w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_html_code_screenshot.png?w=420&h=1024 420w" sizes="(max-width: 1372px) 100vw, 1372px" /></figure>
<hr>
<p><strong>Cascading-Style-Sheet Code</strong></p>
<hr>
<p>The following Cascading-Style-Sheet (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/CSS" target="_blank" rel="noopener">CSS</a>) code defines a stylesheet which customizes the appearance of interface components of the BINARY_TO_DECIMAL web page application. Copy the CSS code from the source code file which is linked below into a text editor and save that file as <strong>karbytes_aesthetic.css</strong>.</p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css</a></p>
<hr>
<pre>/**
* file: karbytes_aesthetic.css
* type: Cascading-Style-Sheet
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/** Make the page background BLACK, the text orange and monospace, and the page content width 800 pixels or less. */
body {
background: #000000;
color: #ff9000;
font-family: monospace;
font-size: 16px;
padding: 10px;
width: 800px;
}
/** Make input elements and select elements have an orange rounded border, a BLACK background, and orange monospace text. */
input, select {
background: #000000;
color: #ff9000;
border-color: #ff9000;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 10px;
appearance: none;
font-family: monospace;
font-size: 16px;
}
/** Invert the text color and background color of INPUT and SELECT elements when the cursor (i.e. mouse) hovers over them. */
input:hover, select:hover {
background: #ff9000;
color: #000000;
}
/** Make table data borders one pixel thick and CYAN. Give table data content 10 pixels in padding on all four sides. */
td {
color: #00ffff;
border-color: #00ffff;
border-width: 1px;
border-style: solid;
padding: 10px;
}
/** Set the text color of elements whose identifier (id) is "output" to CYAN. */
#output {
color: #00ffff;
}
/** Set the text color of elements whose class is "console" to GREEN and make the text background of those elements BLACK. */
.console {
color: #00ff00;
background: #000000;
}
</pre>
<hr>
<p><strong>JavaScript Code</strong></p>
<hr>
<p>The following JavaScript (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JS</a>) code defines the functions which control the behavior of the BINARY_TO_DECIMAL web page application. Copy the JS code from the source code file which is linked below into a text editor and save that file as <strong>binary_to_decimal.js</strong>.</p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal.js</a></p>
<hr>
<pre>/**
* file: binary_to_decimal.js
* type: JavaScript
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/**
* Display a time stamped message inside of the div element whose id is "output".
*
* Set each of the eight light bulbs to "OFF" rather rather than to "ON".
*
* Set each of the eight binary digit values to zero (0) rather than to one (1).
*
* Set each of the buttons on the web page to visible rather than to hidden.
*/
function initialize_application() {
try {
const time_point = Date.now(), p0 = ('<' + 'p' + '>'), p1 = ('<' + '/' + 'p' + '>');
let light_bulb_off = '<' + 'img src="light_bulb_off.png" width="60"' + '>', i = 0;
const message = "The initialize_application() function was called at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).";
console.log(message);
document.getElementById("output").innerHTML = p0 + message + p1;
for (i = 0; i < 8; i += 1) {
document.getElementById("light_bulb_" + i).innerHTML = light_bulb_off;
document.getElementById("bit_" + i).innerHTML = 0;
document.getElementById("switch_" + i).style.display = "block";
}
document.getElementById("binary_to_decimal_button").style.display = "inline";
}
catch(exception) {
console.log("An exception to expected functioning occurred during the runtime of the JavaScript function named initialize_application(): " + exception);
}
}
/**
* Change the binary state represented by the Nth light bulb in the sequence of 8 light bulbs to its only alternative state.
*
* If the Nth bit value is set to 0, the Nth light bulb state is assumed to be "OFF".
*
* If the Nth bit value is set to 1, the Nth light bulb state is assumed to be "ON".
*
* When the switch for the Nth light bulb is clicked, the following will occur:
*
* If the Nth bit is set to 0, the Nth bit will be set to 1 and the Nth light bulb state will be set to "ON".
*
* If the Nth bit is set to 1, the Nth bit will be set to 0 and the Nth light bulb state will be set to "OFF".
*
* @param {Number} N is assumed to be a base-ten integer no smaller than 0 and no larger than 7.
*/
function binary_switch(N) {
try {
const p0 = ('<' + 'p' + '>'), p1 = ('<' + '/' + 'p' + '>');
let bit = undefined, light_bulb_image = undefined, light_bulb_off = '<' + 'img src="light_bulb_off.png" width="60"' + '>', light_bulb_on = '<' + 'img src="light_bulb_on.png" width="60"' + '>';
bit = parseInt(document.getElementById("bit_" + N).innerHTML);
if (bit === 0) {
document.getElementById("bit_" + N).innerHTML = 1;
document.getElementById("light_bulb_" + N).innerHTML = light_bulb_on;
}
else {
document.getElementById("bit_" + N).innerHTML = 0;
document.getElementById("light_bulb_" + N).innerHTML = light_bulb_off;
}
}
catch(exception) {
console.log("An exception to expected functioning occurred during the runtime of the JavaScript function named binary_switch(N): " + exception);
}
}
/**
* Change the binary state represented by the 7th (i.e. seventh) light bulb in the array of 8 light bulbs to its only alternative state.
*
* Note that the 7th light bulb represents the highest order bit and is the leftmost light bulb in the array.
*
* If the 7th bit value is set to 0, the 7th light bulb state is assumed to be "OFF".
*
* If the 7th bit value is set to 1, the 7th light bulb state is assumed to be "ON".
*
* When the switch for the 7th light bulb is clicked, the following will occur:
*
* If the 7th bit is set to 0, then the Nth bit will be set to 1 and the 7th light bulb state will be set to "ON".
*
* Otherwise, the 7th bit will be set to 0 and the 7th light bulb state will be set to "OFF".
*/
function switch_7() {
const time_point = Date.now();
console.log("The switch_7 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(7);
}
/**
* Change the binary state represented by the 6th (i.e. sixth) light bulb in the array of 8 light bulbs to its only alternative state.
*
* If the 6th bit value is set to 0, the 6th light bulb state is assumed to be "OFF".
*
* If the 6th bit value is set to 1, the 6th light bulb state is assumed to be "ON".
*
* When the switch for the 6th light bulb is clicked, the following will occur:
*
* If the 6th bit is set to 0, then the 6th bit will be set to 1 and the 6th light bulb state will be set to "ON".
*
* Otherwise, the 6th bit will be set to 0 and the 6th light bulb state will be set to "OFF".
*/
function switch_6() {
const time_point = Date.now();
console.log("The switch_6 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(6);
}
/**
* Change the binary state represented by the 5th (i.e. fifth) light bulb in the array of 8 light bulbs to its only alternative state.
*
* If the 5th bit value is set to 0, the 5th light bulb state is assumed to be "OFF".
*
* If the 5th bit value is set to 1, the 5th light bulb state is assumed to be "ON".
*
* When the switch for the 5th light bulb is clicked, the following will occur:
*
* If the 5th bit is set to 0, then the 5th bit will be set to 1 and the 5th light bulb state will be set to "ON".
*
* Otherwise, the 5th bit will be set to 0 and the 5th light bulb state will be set to "OFF".
*/
function switch_5() {
const time_point = Date.now();
console.log("The switch_5 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(5);
}
/**
* Change the binary state represented by the 4th (i.e. fourth) light bulb in the array of 8 light bulbs to its only alternative state.
*
* If the 4th bit value is set to 0, the 4th light bulb state is assumed to be "OFF".
*
* If the 4th bit value is set to 1, the 4th light bulb state is assumed to be "ON".
*
* When the switch for the 4th light bulb is clicked, the following will occur:
*
* If the 4th bit is set to 0, then the 4th bit will be set to 1 and the 4th light bulb state will be set to "ON".
*
* Otherwise, the 4th bit will be set to 0 and the 4th light bulb state will be set to "OFF".
*/
function switch_4() {
const time_point = Date.now();
console.log("The switch_4 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(4);
}
/**
* Change the binary state represented by the 3rd (i.e. third) light bulb in the array of 8 light bulbs to its only alternative state.
*
* If the 3rd bit value is set to 0, the 3rd light bulb state is assumed to be "OFF".
*
* If the 3rd bit value is set to 1, the 3rd light bulb state is assumed to be "ON".
*
* When the switch for the 3rd light bulb is clicked, the following will occur:
*
* If the 3rd bit is set to 0, then the 3rd bit will be set to 1 and the 3rd light bulb state will be set to "ON".
*
* Otherwise, the 3rd bit will be set to 0 and the 3rd light bulb state will be set to "OFF".
*/
function switch_3() {
const time_point = Date.now();
console.log("The switch_3 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(3);
}
/**
* Change the binary state represented by the 2nd (i.e. second) light bulb in the array of 8 light bulbs to its only alternative state.
*
* If the 2nd bit value is set to 0, the 2nd light bulb state is assumed to be "OFF".
*
* If the 2nd bit value is set to 1, the 2nd light bulb state is assumed to be "ON".
*
* When the switch for the 2nd light bulb is clicked, the following will occur:
*
* If the 2nd bit is set to 0, then the 2nd bit will be set to 1 and the 2nd light bulb state will be set to "ON".
*
* Otherwise, the 2nd bit will be set to 0 and the 2nd light bulb state will be set to "OFF".
*/
function switch_2() {
const time_point = Date.now();
console.log("The switch_2 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(2);
}
/**
* Change the binary state represented by the 1st (i.e. first) light bulb in the array of 8 light bulbs to its only alternative state.
*
* If the 1st bit value is set to 0, the 1st light bulb state is assumed to be "OFF".
*
* If the 1st bit value is set to 1, the 1st light bulb state is assumed to be "ON".
*
* When the switch for the 1st light bulb is clicked, the following will occur:
*
* If the 1st bit is set to 0, then the 1st bit will be set to 1 and the 1st light bulb state will be set to "ON".
*
* Otherwise, the 1st bit will be set to 0 and the 1st light bulb state will be set to "OFF".
*/
function switch_1() {
const time_point = Date.now();
console.log("The switch_1 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(1);
}
/**
* Change the binary state represented by the 0th (i.e. zeroth) light bulb in the array of 8 light bulbs to its only alternative state.
*
* Note that the 0th light bulb represents the lowest order bit and is the rightmost light bulb in the array.
*
* If the 0th bit value is set to 0, the 0th light bulb state is assumed to be "OFF".
*
* If the 0th bit value is set to 1, the 0th light bulb state is assumed to be "ON".
*
* When the switch for the 1st light bulb is clicked, the following will occur:
*
* If the 0th bit is set to 0, then the 0th bit will be set to 1 and the 1st light bulb state will be set to "ON".
*
* Otherwise, the 0th bit will be set to 0 and the 0th light bulb state will be set to "OFF".
*/
function switch_0() {
const time_point = Date.now();
console.log("The switch_0 button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).");
binary_switch(0);
}
/**
* Hide all buttons except for the RESET button.
*
* Convert the input binary number (represented by the current configuration of eight light bulbs)
* to its logically equivalent decimal output number and
* display the arithmetic steps used to convert the input value to the output value inside the div element whose id is "output".
*/
function binary_to_decimal() {
try {
const time_point = Date.now(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>', s0 = '<' + 'span class="console"' + '>', s1 = '<' + '/' + 'span' + '>';
let i = 0, binary_digits_string = "", decimal_output_number = 0, decimal_term_value = 0, arithmetic_steps = "", message = "";
message = "The BINARY_TO_DECIMAL button was clicked at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).";
console.log(message);
document.getElementById("output").innerHTML += p0 + message + p1;
for (i = 0; i < 8; i += 1) document.getElementById("switch_" + i).style.display = "none";
document.getElementById("binary_to_decimal_button").style.display = "none";
for (i = 7; i > -1; i -= 1) binary_digits_string += document.getElementById("bit_" + i).innerHTML;
console.log("The input binary digit sequence is " + binary_digits_string + ".");
for (i = 7; i > -1; i -= 1) {
decimal_term_value = parseInt(binary_digits_string[i]) * Math.pow(2, 7 - i);
decimal_output_number += decimal_term_value;
}
console.log("The output decimal digit sequence is " + decimal_output_number + ".");
arithmetic_steps += p0 + "binary_input: " + s0 + binary_digits_string + s1 + "." + p1;
arithmetic_steps += p0 + "decimal_output: " + decimal_output_number + "." + p1;
arithmetic_steps += p0 + "arithmetic_steps: " + p1;
arithmetic_steps += p0 + decimal_output_number + " = " + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[0] + s1 + " * (2 ^ 7)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[1] + s1 + " * (2 ^ 6)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[2] + s1 + " * (2 ^ 5)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[3] + s1 + " * (2 ^ 4)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[4] + s1 + " * (2 ^ 3)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[5] + s1 + " * (2 ^ 2)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[6] + s1 + " * (2 ^ 1)) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[7] + s1 + " * (2 ^ 0)) = " + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[0] + s1 + " * 128) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[1] + s1 + " * 64) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[2] + s1 + " * 32) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[3] + s1 + " * 16) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[4] + s1 + " * 8) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[5] + s1 + " * 4) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[6] + s1 + " * 2) +" + p1;
arithmetic_steps += p0 + "(" + s0 + binary_digits_string[7] + s1 + " * 1) = " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[0]) * 128 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[1]) * 64 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[2]) * 32 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[3]) * 16 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[4]) * 8 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[5]) * 4 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[6]) * 2 + " + " + p1;
arithmetic_steps += p0 + parseInt(binary_digits_string[7]) * 1 + "." + p1;
document.getElementById("output").innerHTML += arithmetic_steps;
}
catch(exception) {
console.log("An exception to expected functioning occurred during the runtime of the JavaScript function named binary_to_decimal(): " + exception);
}
}
</pre>
<hr>
<p><strong>BINARY_TO_DECIMAL Interface (Initial)</strong></p>
<hr>
<p>The screenshot image below depicts what the BINARY_TO_DECIMAL web page interface is supposed to look like when the web page is initially loaded by a web browser or after the RESET button on that web page is clicked.</p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_interface_initial.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_interface_initial.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21847" data-permalink="https://karlinaobject.wordpress.com/bits_and_bytes/binary_to_decimal_interface_initial-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png" data-orig-size="999,1994" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="binary_to_decimal_interface_initial" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png?w=150" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png?w=513" width="999" height="1994" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png" alt="" class="wp-image-21847" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png 999w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png?w=75&h=150 75w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png?w=150&h=300 150w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_initial.png?w=768&h=1533 768w" sizes="(max-width: 999px) 100vw, 999px" /></figure>
<hr>
<p><strong>BINARY_TO_DECIMAL Interface (Progress)</strong></p>
<hr>
<p>The screenshot image below depicts what the BINARY_TO_DECIMAL web page interface looks like after some of the eight binary switches are clicked.</p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_interface_progress.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_interface_progress.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21843" data-permalink="https://karlinaobject.wordpress.com/bits_and_bytes/binary_to_decimal_interface_progress-2/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png" data-orig-size="1004,391" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="binary_to_decimal_interface_progress" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png?w=300" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png?w=1000" width="1004" height="391" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png" alt="" class="wp-image-21843" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png 1004w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png?w=150&h=58 150w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png?w=300&h=117 300w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_progress.png?w=768&h=299 768w" sizes="(max-width: 1004px) 100vw, 1004px" /></figure>
<hr>
<p><strong>BINARY_TO_DECIMAL Interface (Final)</strong></p>
<hr>
<p>The screenshot image below depicts what the BINARY_TO_DECIMAL web page interface looks like after some of the eight binary switches are clicked and then the BINARY_TO_DECIMAL button is clicked.</p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_interface_final.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/binary_to_decimal_interface_final.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21840" data-permalink="https://karlinaobject.wordpress.com/bits_and_bytes/binary_to_decimal_interface_final-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png" data-orig-size="849,1521" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="binary_to_decimal_interface_final" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png?w=167" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png?w=572" loading="lazy" width="849" height="1521" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png" alt="" class="wp-image-21840" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png 849w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png?w=84&h=150 84w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png?w=167&h=300 167w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/binary_to_decimal_interface_final.png?w=768&h=1376 768w" sizes="(max-width: 849px) 100vw, 849px" /></figure>
<hr>
<p>This web page was last updated on 19_FEBRUARY_2025. The content displayed on this web page is licensed as <a style="background: #000000;color: #ff9000" href="https://karlinaobject.wordpress.com/public_domain/" target="_blank" rel="noopener">PUBLIC_DOMAIN</a> intellectual property.</p>
<hr>