-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathCh3_Console.html
More file actions
995 lines (992 loc) · 50.4 KB
/
Ch3_Console.html
File metadata and controls
995 lines (992 loc) · 50.4 KB
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
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript: Ch3 Console</title>
<meta name="title" content="Variations on a Theme: JavaScript: Ch3 Console">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<meta name="description" content="An object-oriented Introduction">
<meta name="keywords" content="JavaScript,object orientation,introduction">
<meta name="author" content="Ralph P. Lano">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="book.css">
</head>
<body>
<center>
<div id="wrap">
<ul class="sidenav">
<p><a href="../index.html">Variations on a Theme</a><a href="index.html">JavaScript</a></p>
<li><a href="Ch1_Karel.html">Karel</a></li>
<li><a href="Ch2_Graphics.html">Graphics</a></li>
<li><a href="Ch3_Console.html">Console</a></li>
<li><a href="Ch4_Agrar.html">Agrar</a></li>
<li><a href="Ch5_MindReader.html">MindReader</a></li>
<li><a href="Ch6_Swing.html">Swing</a></li>
<li><a href="Ch7_Asteroids.html">Asteroids</a></li>
<li><a href="Ch8_Stocks.html">Stocks</a></li>
<li><a href="index.html"> </a></li>
<li><a href="AppA_Primer.html">Primer</a></li>
<li><a href="AppB_Libraries.html">Libraries</a></li>
<li><a href="AppC_Ideas.html">Ideas</a></li>
</ul>
<div class="content">
<p>
<img alt="" src="img/c08baf41-0039-4102-9b2c-ef97f4d8ce6a.png" style="display: block; margin-left: auto; margin-right: auto; width: 267px; height: 158px;" /></p>
<h1>
Console</h1>
<p>
Console programs are actually even easier to write than graphics programs. Console programs are text based and they are about interacting with our users. Many concepts we have learned and used in the last two chapters will become clearer in this chapter and they will be set in a new context and explained in more detail.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/helloWorld" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/helloWorld2.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Console Program</h2>
<p>
Let's have a look at a simple 'HelloWorld' console program:</p>
<pre style="margin-left: 40px;">
<span style="color:#0000ff;">async</span> function setup() {
createConsole();
println('Hello World!');
}</pre>
<p>
As usual, we are only interested in the code inside the setup() function. It basically tells the computer to display the text in quotation marks, i.e. "Hello World", in a console window. 'println' is the short form for 'print line' and means exactly that, so write a line in the console window. Whenever we want the user to enter some information, we need to add the <em>async</em> keyword before the <em>setup()</em> function. Console programs will not work without it. </p>
<p>
.</p>
<h2>
readInt()</h2>
<p>
Console programs would be quite boring if all we could do is 'println()'. The counterpart to println is <em>readInt()</em>. It allows the user of our program to enter a number:</p>
<pre style="margin-left: 40px;">
let n1 = <span style="color:#0000ff;">await</span> readInt('Enter number one: ');</pre>
<p>
The text in quotation marks is not really necessary, but it gives the users an indication of what they should do. Here we see the <em>await</em> statement: it means await input from the user. If we forget it, the program wont wait for the user. The await and the async always go together.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/addTwoIntegers" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/addTwoIntegers.png" style="width: 206px; display: block; height: 116px;" />Try it</a></div>
<h2>
Exercise: AddTwoIntegers</h2>
<p>
Let's take a look at an example. We want to add two numbers and display the result on the console.</p>
<pre style="margin-left: 40px;">
async function setup() {
createConsole();
println('This program adds two numbers.');
let n1 = await readInt('Enter number one: ');
let n2 = await readInt('Enter number two: ');
let sum = n1 + n2;
println( 'The sum is: ' + sum );
}</pre>
<p>
The first line simply tells the user what the program does. Then the user is asked to enter the first number. The program waits until the user enters a number. Then it prompts the user to enter the second number. After the user has done this, we add the two numbers n1 and n2 and store the result in the variable sum. The total is then displayed in the last line.</p>
<p>
Question: What would a program look like that subtracts two numbers?</p>
<p>
.</p>
<h2>
Variables</h2>
<p>
The question we ask ourselves immediately, what is a variable? Variables are a bit like boxes into which you can put things. What kind of things can you put in the box? For example, numbers or GRects.</p>
<p>
<img alt="" src="img/326453ea-b08c-4c56-a18a-d0704d8ff997.png" style="margin-left: 10px; margin-right: 10px; width: 107px; height: 103px; float: right;" />Variables also have names, e.g., 'n1' or 'fritz'. We write the name on the outside of the box. For instance, if we say</p>
<pre style="margin-left: 40px;">
let n1;</pre>
<p>
that means there's a box called 'n1'. Next we say</p>
<pre style="margin-left: 40px;">
n1 = 6;</pre>
<p>
This is like putting the number 6 in the box. This is called assignment, so the box 'n1' is assigned the number '6'. If you want, you can change the number in the box. Then you simply make a new assignment and say</p>
<pre style="margin-left: 40px;">
n1 = 5;</pre>
<p>
i.e., we replace the old number '6' with the new number '5'. However, the name 'n1' has not changed, it is still written on the outside of the box.</p>
<p>
<img alt="" src="img/a41fa673-8c0a-4c37-a383-096c11cb0060.png" style="margin-left: 10px; margin-right: 10px; width: 110px; height: 103px; float: right;" />We can not only put numbers in our boxes, but also other things. E.g. with</p>
<pre style="margin-left: 40px;">
let fritz;</pre>
<p>
we say that there is a box called 'fritz'. We can put GRects into this box, so with</p>
<pre style="margin-left: 40px;">
fritz = new GRect(50, 50);</pre>
<p>
we put a new GRect 50 pixels wide and 50 pixels high in the box. </p>
<p>
.</p>
<h2>
Declaration and Assignment</h2>
<p>
When we say</p>
<pre style="margin-left: 40px;">
let n1;</pre>
<p>
we <em>declare</em> a variable. The variable is called 'n1' and has no value, it is <em>undefined</em>. When we say</p>
<pre style="margin-left: 40px;">
n1 <span style="color:#0000ff;">=</span> 6;</pre>
<p>
we make an <em>assignment</em>, i.e. we assign the value '6' to the variable 'n1'. So the '=' does not mean equality, but assignment. This is very important.</p>
<p>
<img alt="" src="img/9e4eacca-64b8-4b55-8c81-4a58fa273f9d.png" style="margin-left: 10px; margin-right: 10px; width: 306px; height: 115px; float: right;" />As far as the names of variables are concerned, they can be almost arbitrary, they can consist of letters, numbers and the underscore. However, some words are not allowed, such as 'if' and 'for', because they are already used by JavaScript. Names should not start with numbers and special characters should generally be avoided. And you always have to worry about upper and lower case!</p>
<p>
A variable always has a name, a type and a value.</p>
<p>
<b>SEP: The names of variables should always be descriptive, e.g. 'blueRect'.</b></p>
<p>
.</p>
<h2>
Types</h2>
<p>
What kind of types are there? In the last chapter we already got to know some: GRect, GOval, GLine etc. are all types, more precisely data types. But there are other types too. The ones that will occupy us in this chapter are the simple data types. There are about six in JavaScript, but we are only interested in the following three:</p>
<ul>
<li>
<strong>number:</strong> can be integers or floating point number.</li>
<li>
<strong>boolean:</strong> used for logical values, can only have the two values true or false.</li>
<li>
<strong>string:</strong> a string can contain letters, digits, but also special characters such as '.' and '$', etc.</li>
</ul>
<p>
To see how they are used consider the following examples:</p>
<pre style="margin-left: 40px;">
let x = 42;
let y = 42.0;
let b = true;
let z = "42";</pre>
<p>
The first two, x and y, are numbers. The third one is a boolean. Booleans should have the values <em>true</em> or <em>false</em>. Notice there are no quotation marks around the true or false. The last defines a string, you can tell by the quotation marks. They can be single or double quotation marks, but they should match. We will deal with the boolean data type below, the string data type we will cover in the next chapter.</p>
<p>
.</p>
<h2>
Expression</h2>
<p>
The word <em>expression</em> as we use it, is used in the sense of 'mathematical expression'. We have already seen an example, namely</p>
<pre style="margin-left: 40px;">
let sum = <span style="color:#0000ff;">n1 + n2</span>;</pre>
<p>
On the left side of the assignment there is a variable, 'sum', and on the right side there is a mathematical expression, namely the sum of the numbers 'n1' and 'n2'. More precisely, the sum of the numbers inside the boxes 'n1' and 'n2'.</p>
<p>
So what this line means is: Get the numbers in the boxes 'n1' and 'n2', add them together and save the result in the box 'sum'. You can illustrate this very nicely with the 'Jeliot' program [1].</p>
<p>
.</p>
<h2>
Exercise: Jeliot</h2>
<p>
Jeliot is a very nice program that helps us to visualize what happens, when we execute the three lines:</p>
<pre style="margin-left: 40px;">
int n1 = 6;
int n2 = 4;
int sum = n1 + n2;</pre>
<p>
We see our code in the code window on the left. We can go through this code step by step. And on the right side we see the Method Area where we also see our boxes 'n1', 'n2' and 'sum', as well as the Expression Evaluation Area. We observe how the expression '6+4=' is currently being evaluated. In the next step the result ('10') is put into the box 'sum'.</p>
<p>
<img alt="" src="img/jeliot.png" style="margin-left: 10px; margin-right: 10px; width: 586px; height: 255px;" /></p>
<p>
.</p>
<h2>
Operators</h2>
<p>
When we use the word operator, we use it in the mathematical sense, i.e. the 'plus' operator or the 'minus' operator. In JavaScript we use the characters '+', '-', '*' and '/' to denote these operations. </p>
<p>
Expressions can also be a little longer:</p>
<pre style="margin-left: 40px;">
let x = 1 + 3 * 5 / 2;</pre>
<p>
In such a case, they are usually evaluated from left to right. Kind of in the same way you write them. The exception, however, are multiplication and division. You might remember from school: brackets before multiplication/division before addition/substraction.</p>
<p>
.</p>
<p>
<img alt="" src="img/95e52edc-59c9-477a-a561-ddc5df1d9cb5.png" style="margin-left: 10px; margin-right: 10px; width: 96px; height: 236px; float: right;" /></p>
<h2>
Remainder</h2>
<p>
One operator we haven't talked about is the remainder operator, sometimes also called the modulo operator. The last time we probably heard about it was in the second grade, and that was before we were able to divide properly. If we calculated 5 / 2 at that time, then the result was: two <em>remainder</em> one. Or the result of 4 / 2, was two <em>remainder</em> zero. Do you still remember those times? Those were good times.</p>
<pre style="margin-left: 40px;">
let remainder = 5 % 2;</pre>
<p>
It turns out that the remainder operator is extremely useful, so in JavaScript there is an extra sign for it, the percentage sign: '%'. Actually, we use the remainder operator every day: if we say it is 2 pm, then we have implicitly calculated 14 % 12 in our mind.</p>
<p>
.</p>
<h2>
Exercise: Even Numbers, Odd Numbers</h2>
<p>
A useful exercise is to list the numbers from 0 to 6 and to calculate the remainder with respect to division by 2 for each of these numbers, i.e. x % 2 We see that for even numbers the remainder is always zero and for odd numbers the remainder is always one. This is very useful, because sometimes we want to know if a number is even or odd.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/averageTwoIntegers" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/averageTwoIntegers.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Exercise: AverageTwoIntegers</h2>
<p>
We have to be a little careful when doing mathematical calculations, the example AverageTwoIntegers will illustrate why. Similar to AddTwoIntegers, we first read in two integers. And if someone is a bit careless, he might write the following statement to calculate the average of two numbers:</p>
<pre style="margin-left: 40px;">
let average = n1 + n2 / 2;</pre>
<p>
Interestingly, this even works, e.g. if n1=0 and n2=2. However, for other numerical values you quickly notice that something is wrong.</p>
<p>
Of course, the error was the missing parentheses! What we should have written is the following:</p>
<pre style="margin-left: 40px;">
let average = ( n1 + n2 ) / 2;</pre>
<p>
However, an even better solution is the following:</p>
<pre style="margin-left: 40px;">
let average = ( n1 + n2 ) / <span style="color:#0000ff;">2.0</span>;</pre>
<p>
In JavaScript it makes little difference, in other languages it does.</p>
<p>
<b>SEP: You should always test your code thoroughly.</b></p>
<p>
.</p>
<h2>
Order of Precedence</h2>
<p>
There are many rules relating to the order of precedence in JavaScript. The following hierarchy lists the most important ones:</p>
<ol>
<li>
parentheses: ()</li>
<li>
*, /, %</li>
<li>
+, -</li>
</ol>
<p>
It says that first parentheses are evaluated, then multiplication, division and remainder, and finally addition and subtraction. But it can get even more complicated with operators like '^', '&', '|', etc. Therefore it is always recommended to make heavy use of parentheses.</p>
<p>
<strong>SEP: To avoid trouble, use a lot of parentheses!</strong></p>
<p>
.</p>
<h2>
Constants</h2>
<p>
Some variables do not change, so they are actually constants. For example, the circle number 'Pi' always has the value '3.1415...'. To make a variable constant, we mark it with the keyword <em>const</em>:</p>
<pre style="margin-left: 40px;">
<span style="color:#0000ff;">const</span> PI = 3.1415;</pre>
<p>
Constants cannot be changed once they have been initialized. This may seem not very useful at first, but later we will see that using constants leads to much better code.</p>
<p>
<strong>SEP: Constants should always be written in capital letters, e.g. 'MAX_NUM', so that they can be immediately distinguished from normal variables.</strong></p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/area" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/area.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Exercise: Area</h2>
<p>
Write a ConsoleProgram that asks the user for the radius of a circle, then calculates its area (area = PI * radius * radius) and prints the result to the console (println()). PI should be a constant in this program.</p>
<p>
.</p>
<h2>
Boolean Values</h2>
<p>
So far we have dealt with the numbers. Now let's take a look at the logical type, also called <em>boolean</em>. To get a feeling for booleans, we take a look at the following inequality:</p>
<pre style="margin-left: 40px;">
3 > 5</pre>
<p>
It is like a question: is three greater than five? The answer is no. One also says the statement '3 > 5' is wrong or false. To deal with this, the data type boolean was invented:</p>
<pre style="margin-left: 40px;">
let b = 3 > 5;
println(b);</pre>
<p>
That is, the variable b is of the data type boolean and can take the values <em>true</em> or <em>false</em>. The whole thing should remind us a little of Karel's sensors: e.g. the beepersPresent() sensor always returned true if a beeper was there and false if none was there.</p>
<p>
.</p>
<h2>
Conditions</h2>
<p>
Boolean expressions mostly make sense when used in a condition. In Karel's world we used them with the if statement:</p>
<pre style="margin-left: 40px;">
if ( beepersPresent() ) {
pickBeeper();
} else {
putBeeper();
}</pre>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/condition" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/condition.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<p>
We can do the same in a console program:</p>
<pre style="margin-left: 40px;">
let x = readInt("Enter a number: ");
if ( x > 5 ) {
println("Number is larger than 5.");
} else {
println("Number is less than or equal to 5.");
}</pre>
<p>
The fact that 'x > 5' is a boolean expression is actually not really important.</p>
<p>
<strong>SEP: We should always use the curly braces with an if statement!</strong></p>
<p>
.</p>
<h2>
Comparisons</h2>
<p>
What other comparisons exist besides '>'? Six in all:</p>
<pre style="margin-left: 40px;">
== equal to
!= not equal to
> greater than
< less than
>= greater than or equal to
<= less than or equal to
</pre>
<p>
In addition, JavaScript has two more comparison operators: the exactly equals '===' and the not exactly equals '!=='. They compare not only value but also data type. The following example shows the difference:</p>
<pre style="margin-left: 40px;">
let x = 42;
let y = "42";
if (x == y) {
println("x and y are equal");
}
if (x === y) {
println("x and y are exactly equal");
}</pre>
<p>
Since x is a number and y is a string, they are equal, but not exactly equal. In general, always use the exactly equals operators.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/dayOfTheWeek" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/dayOfTheWeek.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Exercise: DayOfTheWeek</h2>
<p>
Let's write a program that tells us whether a day is a weekday, a Saturday or a Sunday:</p>
<pre style="margin-left: 40px;">
let day = await readInt("Enter day of week as int (0-6): ");
if (day == 0) {
println("Sunday");
} else if (day <= 5) {
println("Weekday");
} else {
println("Saturday");
}</pre>
<p>
If the day entered is zero, it is a Sunday; otherwise, if the day is less than or equal to 5, it is a weekday; and otherwise it must be a Saturday. This form of concatenated if statements is also known as a 'cascading if'.</p>
<p>
.</p>
<h2>
switch Statement</h2>
<p>
Karel didn't know about the switch statement, but it is quite handy. In principle, it does the same thing as the 'cascading if', but a little more elegantly:</p>
<pre style="margin-left: 40px;">
let day = await readInt("Enter day of week as int (0-6): ");
switch (day) {
case 0:
println("Sunday");
break;
case 6:
println("Saturday");
break;
default:
println("Weekday");
break;
}</pre>
<p>
If you do not think that this looks more elegantly just wait a little.</p>
<p>
<strong>SEP: You should always have a default in your switch statement. Also, in a cascading if there should always be an else branch.</strong></p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/dayOfTheWeek2" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/dayOfTheWeek2.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Exercise: DayOfTheWeek</h2>
<p>
We want to solve our DayOfTheWeek problem with the switch statement. First, we use the code as above, and test if it works. Testing means that we test many different possible inputs, even unusual ones. (What happens if we enter -1 or 42?)</p>
<p>
Question: What happens if we omit one of the break statements?</p>
<p>
.</p>
<h2>
Boolean Operators</h2>
<p>
Let's remember YardstickKarel: in the last step, when Karel was collecting all the beepers to put them in a big pile, it would have been great if we could have tested two conditions at the same time:</p>
<pre>
while ( leftIsBlocked() <strong><span style="color:#0000ff;">&&</span></strong> beepersPresent() ) {...}
</pre>
<p>
Here the '&&' means as much as 'and', so only if both conditions are fulfilled, Karel should do something. It would have been similarly practical if we had a way for Karel only to do something when something is not fulfilled,</p>
<pre>
if ( <strong><span style="color:#0000ff;">!</span></strong>beepersPresent() ) {...}
</pre>
<p>
Here the '!' means as much as 'not'. Finally, we had the example of BreadcrumbKarel where Karel was supposed to do something when there was either a wall in front of him or no beeper:</p>
<pre>
if ( frontIsBlocked() <span style="color:#0000ff;"><strong>||</strong></span> noBeepersPresent() ) {...}
</pre>
<p>
That '||' means 'or' in the sense of either-or, i.e., if either the front is blocked or there are no beepers present should Karel do something.</p>
<p>
These three operators are the so-called boolean operators:</p>
<pre>
! not
&& and
|| or
</pre>
<p>
The order also reflects the priority rules, so '!' has a higher priority than 'and'.</p>
<p>
.</p>
<h2>
Truth Tables</h2>
<p>
It is common to display boolean operations in so-called truth tables. Here b1 and b2 are the two boolean operands, and out is the boolean result, e.g.</p>
<pre style="margin-left: 40px;">
let out = b1 && b2;</pre>
<p>
for the 'and' operation. The truth tables for the three logical operations are as follows:</p>
<p style="margin-left: 40px;">
<img alt="" src="img/98bce237-bbb2-4d00-adad-cfeb82d7d284.png" style="margin-left: 10px; margin-right: 10px; width: 464px; height: 167px;" /></p>
<p>
.</p>
<h2>
Exercise: LeapYear</h2>
<p>
There is a cool boolean expression that tells us whether a year is a leap year or not:</p>
<pre style="margin-left: 40px;">
let p = ((y % 4 == 0) && (y % 100 != 0)) || (y % 400 == 0);</pre>
<p>
To understand the expression, it is best to write down the truth table for it.</p>
<p style="margin-left: 40px;">
<img alt="" src="img/29d01bac-4234-46ed-9a3f-4c12bcf33588.png" style="margin-left: 10px; margin-right: 10px; width: 405px; height: 319px;" /></p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/counterWithWhile" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/counterWithWhile.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
while Loop</h2>
<p>
We have already met the while loop with Karel:</p>
<pre style="margin-left: 40px;">
while ( frontIsClear() ) {
move();
}
</pre>
<p>
The while loop is executed as long as a certain condition is fulfilled. As a simple example, let's output the numbers from 0 to 9.</p>
<pre style="margin-left: 40px;">
let i = 0;
while (<span style="color:#0000ff;">i < 10</span>) {
print(i + ", ");
i = i + 1;
}
</pre>
<p>
In the first line we declare a variable named i of data type int and set its value to 0. Then we test if i is less than 10. As long as this is the case, we print the current value of i in the console window. After that we increase the value of i by one.</p>
<p>
This last line might be a bit unusual (especially mathematicians have a problem with it). But it is important to remember that '=' does not stand for equality, but for assignment. So</p>
<pre style="margin-left: 40px;">
i = i + 1;</pre>
<p>
means: take the current value of i, add one to it, and then assign the result to the variable i.</p>
<p>
.</p>
<h2>
Exercise: CounterWithWhile</h2>
<p>
As a little exercise we will try out the counter code: simply insert the lines above into the setup() function of a console program. What happens if we only use print() instead of println()?</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/counterWithFor" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/counterWithFor.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
for Loop</h2>
<p>
We got to know the for loop from the very beginning with Karel. At that time, we were only interested in the number of times the loop is run. But now we are ready to understand the rest. The following for loop also outputs the numbers from 0 to 9:</p>
<pre style="margin-left: 40px;">
for (let i = 0; i < 10; i++) {
print(i + ", ");
}</pre>
<p>
In general, a for loop always looks like this:</p>
<pre style="margin-left: 40px;">
for ( init; condition; step ) {
statements;
}</pre>
<p>
First, the init step is executed, usually something like 'int i = 0'. Then the condition is checked, so is 'i < 10'? If yes, the statements are executed within the loop. Finally, step 'i++' is executed. This is done until the condition is no longer fulfilled.</p>
<p>
What does this 'i++' mean? It is called the increment operator, and it means as much as the line,</p>
<pre style="margin-left: 40px;">
i = i + 1;</pre>
<p>
So the value of the variable i is increased by one. There is also a decrement operator that does exactly the opposite: 'i--'.</p>
<p>
.</p>
<h2>
Exercise: For Loops with Jeliot</h2>
<p>
To understand the for loop even better, let's take a look at the for loop in Jeliot and watch step by step what happens.</p>
<p>
<img alt="" src="img/JeliotForLoop.png" style="margin-left: 10px; margin-right: 10px; width: 586px; height: 255px;" />.</p>
<p>
.</p>
<h2>
for versus while</h2>
<p>
As we have seen, while loop and for loop actually do the same thing. Thus the question arises when to use which?</p>
<ul>
<li>
<strong>for:</strong> if we know from the outset how often something is done, e.g.,<br />
<span style="font-family:courier new,courier,monospace;">for ( let i=0; i<10; i++ ) {...} </span></li>
<li>
<strong>while:</strong> we use the while loop, if we don't know exactly how often a loop is executed, e.g.,<br />
<span style="font-family:courier new,courier,monospace;">while ( frontIsClear() ) {...} </span></li>
</ul>
<p>
.</p>
<h2>
OBOB: FillRowKarel</h2>
<p>
There is another loop we haven't talked about yet, the 'Loop and a Half': it is the solution to our OBOB problem. Let's remember FillRowKarel:</p>
<pre style="margin-left: 40px;">
while ( frontIsClear() ) {
putBeeper();
move();
}
putBeeper();
</pre>
<p>
The problem is that we need the 'putBeeper()' function twice. This duplication of code occurs with every OBOB and duplicate code is always a bad thing.</p>
<p>
<strong>SEP: Avoid duplicate code.</strong></p>
<p>
.</p>
<h2>
Loop and a Half</h2>
<p>
The solution is actually quite simple and is called the 'Loop and a Half':</p>
<pre style="margin-left: 40px;">
while ( true ) {
putBeeper();
if ( frontIsBlocked() ) <span style="color:#0000ff;">break</span>;
move();
}
</pre>
<p>
Let's analyze the code: First of all, we have an infinite loop, 'while (true)'. However, we can end this infinite loop with the break statement. We do this when there is a wall in front of Karel, 'if ( frontIsBlocked() )''. Now we can see why it is called 'Loop and a Half': only half of the loop is executed in the last step. To understand the code, we should go through it step by step on a piece of paper.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/cashRegister" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/cashRegister.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Exercise: CashRegister</h2>
<p>
A nice application for the 'Loop and a Half' is the cash register in a grocery store: assume, we have five items in our shopping cart and we are ready to pay. The cashier enters the prices of the individual goods, one after the other into the cash register. It adds them up and at the end outputs how much we should pay:</p>
<pre style="margin-left: 40px;">
const SENTINEL = 0;
let total = 0;
while (true) {
let price = await readInt("Enter price: ");
if (price == SENTINEL)
<span style="color:#0000ff;">break</span>;
total += price;
}
println("Your total is: " + total);
</pre>
<p>
But since not all people always buy exactly five things, we need some termination criterion: in our case it is when the cashier enters 0 for the price. This abort criterion is sometimes also called the sentinel.</p>
<p>
Question: Could we also use a negative number as abort criterion?</p>
<p>
<strong>SEP: If possible, you should not use more than one break statement.</strong></p>
<p>
.</p>
<h2>
Post-Increment vs Pre-Increment</h2>
<p>
So far we have only seen the increment operator as post-increment operator, but it is also available as pre-increment. The difference is that the '++' operator is either before the variable (pre) or after (post) it. So:</p>
<pre style="margin-left: 40px;">
let x = 5;
let y = x++; // Post: y=5
</pre>
<p>
or</p>
<pre style="margin-left: 40px;">
let x = 5;
let y = ++x; // Pre: y=6
</pre>
<p>
The difference is subtle, and you only notice it when this operator is related to assignments or other operations:</p>
<pre style="margin-left: 40px;">
let a = 6;
<span style="color:#0000ff;">let x = ++­­a;</span>
let y = x++;
</pre>
<p>
In the second line, first (pre) the variable a is increased by one, and then the assignment is done. In the third line, the assignment is done first, and then (post) the variable x is incremented by one.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Ch3_Console/typeOf" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/typeOf.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
typeOf</h2>
<p>
You can ask JavaScript what the type of a given variable is with the <em>typeof</em> operator. For instance, the following code,</p>
<pre style="margin-left: 40px;">
let x = 42;
println( typeof(x) );</pre>
<p>
would output <em>number</em> to the console. You may want to try the following examples to see how the typeof operator works.</p>
<pre style="margin-left: 40px;">
let u1;
println(typeof (u1)); // undefined
let u2 = undefined;
println(typeof (u2)); // undefined
let x = 42;
println(typeof (x)); // number
let y = 42.0;
println(typeof (y)); // number
let z = "42";
println(typeof (z)); // string
let b = true;
println(typeof (b)); // boolean
let n = null;
println(typeof (n)); // object
let arr = [];
println(typeof (arr)); // object
let obj = { name: "Garfield", age: 42 };
println(typeof (obj)); // object
let f = function () { };
println(typeof (f)); // function</pre>
<p>
The last four types you have not seen, they will come soon.</p>
<p>
.</p>
<hr />
<h1>
Review</h1>
<p>
We have made it! This chapter was a little more difficult than the previous two. But from now on it's all downhill. What have we learned in this chapter? We have</p>
<ul>
<li>
got to know variables,</li>
<li>
reminded us of the remainder operator,</li>
<li>
had our first contact with constants,</li>
<li>
seen boolean operators and truth tables for the first time,</li>
<li>
found that the if and switch statements are very similar,</li>
<li>
learned when we should use a for and when a while loop and</li>
<li>
found the solution to our OBOB problem with the 'Loop and a Half'.</li>
</ul>
<p>
The most important thing in this chapter however was that we filled all the little details we left unexplained in the first two chapters.</p>
<p>
.</p>
<hr />
<h1>
Projects</h1>
<p>
The following projects may not be as interesting as those in the last chapter. But they are the basis for future chapters.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/countdown" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/countdown.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Countdown</h2>
<p>
Karel loves rockets and especially the countdown just before lift-off. Therefore we want to write a program that displays the numbers from 10 to 0 on the console.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/calculator" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/calculator.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Calculator</h2>
<p>
The DoubleBeeper was a lot of work for Karel. This is much easier with console programs and variables. That's why we want to write a console program that adds two numbers.</p>
<p>
What is a bit annoying about the program, that we have to restart it every time we want to make a new addition. What could be done to allow the program to allow multiple additions (always of two numbers)?</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/temperature" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/temperature.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Temperature</h2>
<p>
Karel loves Europe, but he can't deal with those Celsius. That's why we write a program for him that converts Fahrenheit to Celsius. We ask the user to give us a temperature in Fahrenheit. Using <em>readInt()</em> we store them in the variable <em>f</em>. And with the formula</p>
<pre style="margin-left: 40px;">
let c = (5.0 / 9.0) * (f - 32);</pre>
<p>
we can convert it to Celsius.</p>
<p>
What happens if you enter 33 for the Fahrenheit? The result is: 0.5555555555555556. If you rather want rounded results, you can use the function <em>Math.round()</em> to do that:</p>
<pre style="margin-left: 40px;">
let c = Math.round( (5.0 / 9.0) * (f - 32) );</pre>
<p>
We will also need the function <em>Math.trunc()</em>: it truncates, that rounds off the result. Both can be used to convert floating point numbers to integers.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/squares" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/squares.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Squares</h2>
<p>
As an example for the use of constants, we want to write a console program that outputs the square numbers of the numbers from 0 to MAX_NUM, where MAX_NUM is a constant that is to be set to the value 10.</p>
<p>
<strong>SEP: 'Magic Numbers' are numbers that appear somewhere in our code, and we usually have no idea where they come from and what they mean. Therefore, all numbers except 0, 1 and 2 should be declared as constants.</strong></p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/evenOdd" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/evenOdd.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
EvenOdd</h2>
<p>
We want to write a small console program that lists the numbers from 0 to 10, next to it the value of the (number % 2), and finally whether the number is even or odd. What we see is that the remainder operator can be used to determine if a number is even or odd.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/money" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/money.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Money</h2>
<p>
If we are dealing with money in our programs, should we use an int data type or a double data type? The answer is very simple when you ask yourself: can you count money? Everything you can count uses the int data type.</p>
<p>
That means when we work with money we should always think in cents. However, if we then spend them, it would be better if we did not spend 120 cents but 1.20 euros. Here too, the remainder operator '%' is of great benefit:</p>
<pre style="margin-left: 40px;">
int money = 120;
int euros = money / 100;
int cents = money % 100;
println("The amount is " + euros + "," + cents + " Euro.");
</pre>
<p>
To make sure that our code really works, we should try different inputs. Good test candidates are the inputs: 120, 90, 100, 102 and 002. Our program has always returned the correct output, yes?</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/bigMoney" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/bigMoney.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
BigMoney</h2>
<p>
For amounts over a thousand euros, one more comma is added for the thousands and millions, for example: 1,001,233.45 euros. So we want to write a function formatNumericString(int cent), which gets an amount of money in cents as parameter, and returns a string that is correctly formatted. When we test the program, we should use the above amount. We will find that it makes sense to write a function padWithZeros().</p>
<p>
Also here we should try different inputs, e.g. 100123345, 100123305, and 05 might be good test candidates.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/time" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/time.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
Time</h2>
<p>
People prefer to specify the time in hours, minutes and seconds. Computers, on the other hand, only think in seconds, seconds that have passed since midnight. That's why we want to write a program that calculates the current time from the seconds that have passed since midnight. For this we again need the remainder operator. It may also make sense to write a function padWithZeros() which ensures that "06" minutes are displayed instead of "6" minutes.</p>
<p>
For testing we should try at least the following inputs: 5, 61, 85, 3600, 3601.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/leapYear" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/leapYear.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
LeapYear</h2>
<p>
We have seen above how to determine if a year is a leap year. With this knowledge, we want to write a console program that tells us if the year someone was born in was a leap year. For example, 1996, 2000, and 2004 should be leap years, but 1800 and 1900 should not be.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/truthTables" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/truthTables.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
TruthTables*</h2>
<p>
In this project we want to deal with the boolean data type and the logical operators && (and), || (or) and ^ (exclusive or). We want to write a program that calculates and outputs the truth tables for all three operators. Possibly helpful is the following trick how to create a boolean datatype from an number datatype:</p>
<pre style="margin-left: 40px;">
let in1 = 0;
let b1 = (in1 != 0);</pre>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/interactiveMenuProgram" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/interactiveMenuProgram.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
InteractiveMenuProgram</h2>
<p>
Very often you need a kind of menu in a console program. The user can choose between different menu items by entering a number. We therefore want to write a program in which the user can choose between three possibilities: if he enters '0', the program should be terminated, if he enters '1', a message should be output, and if he enters '2', nothing should happen. The first thing you want to do is, tell the user what the options are:</p>
<pre style="margin-left: 40px;">
println("0: Exit / 1: Print message / 2: Do nothing");</pre>
<p>
Then comes a 'Loop and a Half', in which we ask the user for the choice:</p>
<pre style="margin-left: 40px;">
let choice = await readInt("Your choice: ");</pre>
<p>
If the user enters the '0' we end the 'Loop and a Half':</p>
<pre style="margin-left: 40px;">
if (choice == 0) break;</pre>
<p>
After this follows a switch or cascading if for the options '1' and '2'.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/yearlyRate" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/yearlyRate.png" style="width: 220px; height: 124px; display: block;" />Try it</a></div>
<h2>
YearlyRate</h2>
<p>
Karel wants to buy a car, so he started saving up. He wants to buy a Mini (Mercedes is to expensive), and he has seen a used one for 5000 euros. He saw a cheap loan from a bank of 5% a year. What's his annual rate if he wants the loan to be paid off in five years?</p>
<p>
For this Karel needs a program in which he can enter the loan amount (k), the interest rate (z) and the years (n). The program should then tell him how high his annual rate (y) is. The formula for this can be found in the Wikipedia under compound interest formula [2]:</p>
<pre style="margin-left: 40px;">
let q = 1.0 + z;
let qn = Math.pow(q, n);
let y = k * qn * (q - 1) / (qn - 1);</pre>
<p>
It is helpful to know that floating point numbers can be read with readDouble().</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/tryIt.html?name=Pr3_Console/chessboard" style="display: block; text-align: center;" target="_blank"><img alt="" src="img/chessboard.png" style="width: 197px; height: 197px; display: block;" />Try it</a></div>
<h2>
ChessBoard</h2>
<p>
We want to draw a checkerboard pattern using GRects. Of course, this must be a GraphicsProgram. It is a nice, but not quite easy application of loops and residual operator '%'.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<hr />
<h1>
Questions</h1>
<ol>
<li>
Name three of the standard data types of JavaScript.<br />
</li>
<li>
What is a magic number?<br />
</li>
<li>
What is the difference between a graphics program and a console program?<br />
</li>
<li>
In the lecture you have heard of many software engineering principles. Give three examples.<br />
</li>
<li>
During programming there are some typical errors that happen again and again (Common Errors). Name two of those errors.<br />
</li>
<li>
Write a console program that asks the user for the radius of a circle, then calculates its area (area = PI * radius * radius) and prints it to the console.<br />
</li>
<li>
What is the difference between 'print("hi")' and 'println("hi")'?<br />
</li>
<li>
What does the 'readInt()' function do?<br />
</li>
<li>
What are the values of the variables 'x' and 'y' after the following three lines have been executed?<br />
<span style="font-family:courier new,courier,monospace;">a = 6;<br />
x = ++­­a;<br />
y = x++;</span><br />
</li>
<li>
Describe in your own words what the following expression means:<br />
<span style="font-family:courier new,courier,monospace;"> (x < 0) || (x > WIDTH)</span><br />
</li>
<li>
What is the advantage of using constants?<br />
</li>
<li>
Compare the two 'switch' examples below, and describe their output.<br />
<span style="font-family:courier new,courier,monospace;">a) let day = 0;<br />
switch (day) {<br />
case 0:<br />
println("Sunday");<br />
break;<br />
case 6:<br />
println("Saturday");<br />
break;<br />
}</span><br />
<br />
<span style="font-family:courier new,courier,monospace;">b) let day = 0;<br />
switch (day) {<br />
case 0:<br />
println("Sunday");<br />
case 6:<br />
println("Saturday");<br />
}</span><br />
<br />
</li>
<li>
Which values can a boolean variable take?<br />
</li>
<li>
What data type must the variable 'b' be in the example below?<br />
<span style="font-family:courier new,courier,monospace;"> if ( b ) {<br />
println("hi");<br />
}</span><br />
</li>
<li>
Write the test which determines whether a number y is divisible by 400.<br />
</li>
<li>
Recall the remainder '%' operator? Give two examples of what you can use it for.<br />
</li>
<li>
People prefer to specify times in hours, minutes and seconds. Computers prefer to calculate in seconds. For example, the time 13:35:12 for the computer simply is 48912 seconds. Use this knowledge to convert the computer time 't' into a human readable form, i.e. hours, minutes and seconds. You can also use several intermediate steps.<br />
</li>
<li>
When should you use a for loop and when a while loop?<br />
</li>
<li>
Anything you can do with a 'for' loop can also be done with a 'while' loop and vice versa. Rewrite the following 'for' loop as a 'while' loop.<br />
<span style="font-family:courier new,courier,monospace;"> for (let i=0; i<5; i++) {<br />
println(i);<br />
}</span><br />
</li>
<li>
Describe the structure of the 'loop-and-a-half'. Which problem does it solve?<br />
</li>
<li>
Loop and a Half: Rewrite the following Karel example using the Loop and a Half. What is the advantage of the Loop and a Half?<br />
<span style="font-family:courier new,courier,monospace;"> function run() {<br />
while ( frontIsClear() ) {<br />
putBeeper();<br />
}<br />
putBeeper();<br />
}</span></li>
</ol>
<p>
.</p>
<hr />
<h1>
References</h1>
<p>
References for the topics in this chapter can be found in practically every book on Java, especially of course in [3].</p>
<p>
[1] Jeliot 3, Program Visualization application, University of Helsinki, <a href="http://cs.joensuu.fi/jeliot/description.php">cs.joensuu.fi/jeliot/description.php</a></p>
<p>
[2] Seite „Sparkassenformel“. In: Wikipedia, Die freie Enzyklopädie. URL: <a href="https://de.wikipedia.org/w/index.php?title=Sparkassenformel&oldid=143971427">https://de.wikipedia.org/w/index.php?title=Sparkassenformel&oldid=143971427</a></p>
<p>
[3] The Art and Science of Java, von Eric Roberts, Addison-Wesley, 2008</p>
<p>
.</p>
<p class="footer">
Copyright © 2016-2023 <a href="http://www.lano.de">Ralph P. Lano</a>. All rights reserved.
</p>
</div>
</div>
</center>
</body>
</html>