forked from bjpop/js-turtle
-
Notifications
You must be signed in to change notification settings - Fork 7
/
javascript.html
1686 lines (1672 loc) · 57.3 KB
/
javascript.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
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
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<title>JavaScript for Turtle Graphics</title>
<link rel="stylesheet" href="turtleweb.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto" rel="stylesheet">
</head>
<body>
<header>
<h1>JavaScript Turtle Graphics</h1>
<div class="navigation">
<ul>
<li><a href="overview.html" title="Overview of Turtle Graphics">Intro</a></li>
<li><a href="guide.html" title="User Guide for Turtle Graphics Integrated Development Environment">Guide</a></li>
<li><a href="turtle.html" title="Integrated Development Environment for Turtle Graphics">IDE</a></li>
<li><a class="active" href="javascript.html" title="Tutorial for Simple JavaScript">JavaScript</a></li>
<li><a href="tutorial.html" title="Tutorial for Basic Turtle Graphics">Tutorial</a></li>
<li><a href="animation.html" title="Tutorial for Animation with Turtle Graphics">Animation</a></li>
<li><a href="examples.html" title="Examples of Things Created with Turtle Graphics">Examples</a></li>
<li><a href="reference.html" title="Language Reference">Reference</a></li>
<li><a href="nerd.html" title="Nerd Links">Nerd</a></li>
<li><a href="about.html" title="About Turtle Graphics">About</a></li>
</div>
</header>
<article>
<h2 id="basic grammar">Basic JavaScript Grammar</h2>
<p>
This is a brief tutorial on JavaScript. Read as much as you can, but come back
to review or to learn a new concept. If you need more depth, there are
other tutorials and guides on JavaScript on the internet or in your library.
</p>
<h3>Comments</h3>
<p>
A <strong>comment</strong> is a note left by the developer to others, including the
developer, about some aspect of the code. This makes the code
easier to understand. Comments are not executed by the JavaScript
interpreter, so they provide no functionality. Yet they are very
(important as a way to communicate intent. Comments can also be
used to turn off sections of code during testing.
</p>
<p>
JavaScript has two kinds of comments.
<ul>
<li>
A line end comment starts with a double slash <code>//</code> and
runs to the end of the current line. The line may or may not
contain other JavaScript code before the double slash.
</li>
<code>// comment to the end of the line
a = 1 // comment after code to end of line
</code>
<li>
A bounded comment is fenced in by a slash-star <code>/*</code> start
sequence and ends in a star-slash <code>*/</code> sequence.
Bounded comments may cover several lines, it may be a whole line
of code, or it may be within a line of code.
Bounded comments may not be nested as it will end on the first
occurrence of star-slash <code>*/</code>.
This type of comment is used by several other languages including
C, C++, Java, and CSS.
</li>
<code>/*
a bounded comment
may span more than
one line
*/
/* a bounded comment may be a single line */
a /* a bounded comment may be within code */ = 1;
/* bounded comments /* cannot be nested */ syntax error */
</code>
</ul>
</p>
<h3 id=functions>Functions</h3>
<p>
JavaScript allows the programmer to define blocks of code that can
be used over and over. These blocks are called
<span class="keywod">function</span>s.
Some functions may take <strong>arguments</strong> as inputs,
others do not. It is
up to the programmer to decide what the function will do, whether
it takes parameters and whether it returns a result. A function may
be called a procedure, a subroutine, or other names. These names
are generally talking about the same thing that JavaScript calls a
function. A function is <strong>invoked</strong> in a statement by using its name
followed by a opening and closing parentheses '(' and ')'. There
may be arguments between the parentheses.
</p>
<p>
A simple example could be a function that draws a square on the
canvas. The turtle is moved to where the
shape is required and the function is invoked.
</p>
<code>// define the square function
function square () {
forward (100);
right (90);
forward (100);
right (90);
forward (100);
right (90);
forward (100);
right (90);
}
square () { // invoke the square function
right(30) // invoke the Turtle Graphic right() function
// with the distance argument 30
square () { // invoke the square function again
right(30) // invoke the Turtle Graphic right() function again
square () { // invoke the square function once again
</code>
<p>
Good functions have no side effects, that is, they should not change
the value of global variables. So a function that draws a shape
should leave the turtle in the same position as it
was when the function was called and pointing in the same direction.
Of course there are exceptions like a function that draws
a fancy corner. The point is, the function should be predictable
and not have a side effect which would manifest itself as a
nasty bug down the road.
</p>
<h3 id=variables>Variables</h3>
<p>
Variables are used to store a value for later use. Sometimes it is
for convenience. For instance, it is a lot easier to remember and
type <span class="var">pi</span>, than it is to remember and type
<span class="var">3.141596...</span>
Sometimes a variable is used is to remember a partial result, like
how many times has the race car gone around the track or how many
brothers and sisters do you have.
</p>
<code>a = 1; // assign the value of the integer '1' to the variable 'a'.
a = 1.0; // assign the value of the number '1.0' to the variable 'a'.
a = "cabbage"; // assign the string "cabbage" to the variable 'a'.
a = true; // assign the Boolean value true to the variable 'a'.
</code>
<p>
Variable names that have a clear meaning make code easier to read
and understand.
For example: <code>lapsCompleted = 3</code> is easy to understand.
<code>l = 3</code> can be difficult to understand. What is
<span class="var">l</span>"
and how is it being used? Is that the letter <strong>l</strong> or the digit
<strong>1</strong>.
Variables have some restrictions on naming:
<ul>
<li>
cannot start with a digit.
</li>
<li>
cannot contain an operator character, any of
+-%/*!~<>{}[]()<>;,.'"&|\
</li>
<li>
cannot be a <strong>key word</strong> (a word reserved by the JavaScript
language (e.g., <span class="keyword">if</span>,
<span class="keyword">then</span>,
<span class="keyword">var</span>,
<span class="keyword">while</span>,
<span class="keyword">function</span>).
</li>
<li>
can contain any lower or upper case letter.</li>
<li>
can contain one or more digits as long as it is not the starting
character.
</li>
<li>can contain any of the following symbols: $_. These can be the
starting character, but usually are not, mainly because of
conventions of other languages.
</li>
</ul>
<p>
So the following are acceptable as variable names:
</p>
<ul>
<li>
allowance,
</li>
<li>
nationalDebt,
</li>
<li>
national_debt,
</li>
<li>
gradePointAverage,
</li>
<li>
address2,
</li>
<li>
sunshinePercent.
</li>
</ul>
<p>
The following are unacceptable as variable names:
</p>
<ul>
<li>
2week,
</li>
<li>
national-debt,
</li>
<li>
if,
</li>
<li>
sunshine%,
</li>
<li>
function.
</li>
</ul>
<p>
Variable names are <strong>case sensitive</strong>, so Dog and dog
and doG are different names. It usually is not a good idea to use
names with the only difference being the case of the letter.
</p>
<p>
Variables are <strong>declared</strong> with the
<span class="keyword">var</span> keyword.
Variables may be <strong>initialized</strong> or <strong>assigned</strong>
at the same time as they are declared. JavaScript is
not strict about declaring variables, but it is a good idea to do so.
</p>
<code>var lapsCompleted; // declared but not initialized
var lapsToGo = 50; //declared and initialized
lapsToGo = 51; //previously declared, now assigned
</code>
<p>
Each variables should be declared only once by using the reserved
key word <span class="keyword">var</span> and should be declared
before they are used elsewhere.
</p>
<h3>Data Types</h3>
<p>
JavaScript has four primitive data types. They are:
</p>
<ul>
<li>number (e.g., 1, 1.1, -2)</li>
<li>string (e.g., "a", "hi", "How are you?",
'What do you know?')</li>
<li>Boolean (e.g., true, false)</li>
<li>undefined
</li>
</ul>
<p> A primitive data type is only composed of itself or data types like
it, e.g., <code>1.1 is 1 + .1; "hi" is "h" + "i"</code>. Boolean values
cannot be combined, they are simply either true or they are false. A
variable is undefined if it is not initialized or assigned prior to
using its value.
It can also happen when setting a variable to the results of a
function that does not return a value. Some functions
return
undefined when they can't return what was requested, for instance
when something isn't found. Undefined can be very useful and very
hard to debug in some cases.
</p>
<code>a = 1 // variable a is defined to be 1
var b // variable b is declared but undefined
var c = 1 // variable c is declared and set to 1
</code>
</p>
<p>
Additionally JavaScript has compound data types including a
<strong>array</strong>,
e.g., [1,2,3, "fish"] is an array of data elements, each element may be
a different data type.
</p>
<code>// assigning an array to a variable
a = [1, 2, 3, 5]; //a is list of numbers
// access an element of an array
b = a[1]; // b is second element of list a, so it is 2
</code>
<p>
Another compound JavaScript data element is <strong>object</strong>. An
object is similar to a list in that it is a collection of values,
but in an object each value or attribute is named. Let's say you
want an object to define the characteristics of a dog. You might
define a dog object as in the following code.
</p>
<code>dog = {
name: "Fido",
breed: "dalmatian",
color: "white and black",
gender: "M",
age: 3
}
// accessing an element of the object
breedOfDog = dog.breed // breedOfDog = "dalmatian"
ageOfDog = dog["age"] // ageOfDog = 3
</code>
<p>
An object may be a collection of primitive data types and compound
data types like lists and other objects. Internally all data within
JavaScript is handled as an object. Even a JavaScript function is
treated as an object.
</p>
<p>
JavaScript is said to be <strong>typeless</strong>. This really
means that the language doesn't
check the type of a variable when setting it. So you can set
variable <span class="var">a</span> to 1 and a while later set
<span class="var">a</span> to "hi."
JavaScript doesn't mind a bit, but this can lead to errors especially
when unintentionally reusing a variable or having a number when you
expect a string.
</p>
<h3>Functions with Parameters</h3>
<p>
A more powerful version of a function is a function that is called
with one or more parameters. A parameter is named like a variable and
may be any data type. It may be just about anything that the
function needs to complete its task.
There is no limit to the number of parameters that a function can
use, but it is usually wise to keep the number down to the minimum
required for the particular function.
</p>
<code>function square (size) { // size is a single parameter
forward (size); // here it is used in the forward function call
right (90);
forward (size); // here it is used in the forward function call
right (90);
forward (size); // here it is used in the forward function call
right (90);
forward (size); // here it is used in the forward function call
right (90);
}
</code>
<p>
A function is invoked with its name and supplying
<strong>arguments</strong> as
needed. The value of the arguments is passed to the function
parameters. Notice how inside a function, the passed values are
called parameters and when the function is invoked,
the values are called arguments. In JavaScript functions are said to
be called by value, so the value is copied from the argument to the
parameter. The function cannot affect the value of the arguments
in the caller. (There is an exception to this with passing objects
in a certain way, but that is left as an exercise for the reader.)
</p>
<code>square (10) // invokes the square function with one argument '10'
// to produce a square with each side equal to 10.
</code>
<p>
A function may also <strong>return</strong> a value by using the
<code>return</code> key
word. For example let's say you want a
function that produces the cube of a number. Such code would look like
the following.
</p>
<code>function cube( number) {
return number * number * number
}
b = cube (2) // b = 8
c = cube (10) // c = 1000
</code>
<h3 id=expressions>Expressions</h3>
<p>
Expressions are a way of combining variables, numbers, strings and
Boolean values into other
forms. Expressions have operators that act upon one or more operands.
Much of this is familiar. Adding two numbers to produce a sum.
Subtracting one number from another to find a difference. Dividing
one number by another to get get a dividend, proportion or ratio.
</p>
<h4>Assignment Operators</h4>
<p>
Assignment operators are used to assign values to variables. You can't
change the value of number or a string as these are
<strong>constant</strong>or <strong>immutable</strong> (unchangeable).
</p>
<table>
<tr>
<th>Operator</th> <th>Use</th> <th>Example</th> <th>Result</th>
</tr>
<tr>
<td>=</td>
<td>assign</td>
<td>a=4</td>
<td>a is the number 4</td>
</tr>
<tr>
<td>(white space: space, tab, new lines, comments)</td>
<td>increase readability</td>
<td>a = 4</td>
<td>a is 4, white space has no effect</td>
</tr>
<tr>
<td>=</td>
<td>assign</td>
<td>a = "Hello, World"</td>
<td>a is the string "Hello, World"</td>
</tr>
<tr>
<td>=</td>
<td>assign</td>
<td>a = true</td>
<td>a is the Boolean true</td>
</tr>
<tr>
<td>=</td>
<td>assign</td>
<td>b = a</td>
<td>b has the current value of the variable a</td>
</tr>
</table>
<h4>Number Operators</h4>
<p>
Number operators are used to manipulate numbers to get sums, differences,
products, dividends, remainders, etc.
</p>
<table>
<tr>
<th>Operator</th> <th>Use</th> <th>Example</th> <th>Result</th>
</tr>
<tr>
<td>_</td>
<td>add</td>
<td>1+3</td>
<td>4</td>
</tr>
<tr>
<td>-</td>
<td>subtract</td>
<td>5-3</td>
<td>2</td>
</tr>
<tr>
<td>*</td>
<td>multiply</td>
<td>5-3</td>
<td>2</td>
</tr>
<tr>
<td>/</td>
<td>divide</td>
<td>5/4</td>
<td>1.25</td>
</tr>
<tr>
<td>%</td>
<td>mod or modulo (remainder after division)</td>
<td>5%4</td>
<td>1</td>
</tr>
<tr>
<td>-</td>
<td>negate</td>
<td>-5</td>
<td>-5</td>
</tr>
</table>
<h4>String Operators</h4>
<p>
There is a operator to manipulate strings.
</p>
<table>
<tr>
<th>Operator</th> <th>Use</th> <th>Example</th> <th>Result</th>
</tr>
<tr>
<td>+</td>
<td><strong>concatenate</strong> or join</td>
<td>"tom" + "cat"</td>
<td>"tomcat"</td>
</tr>
</table>
<h4>Boolean Operators</h4>
<p>
There are a set of operators to manipulate Boolean values.
Remember that a Boolean can only be either true or
false.
</p>
<table>
<tr>
<th>Operator</th> <th>Use</th> <th>Example</th> <th>Result</th>
</tr>
<tr>
<td>&&</td>
<td>logical AND</td>
<td>a && b</td>
<td>true if both a and b are true, else false</td>
</tr>
<tr>
<td>||</td>
<td>logical OR</td>
<td>a || b</td>
<td>true if either a or b is true, else false</td>
</tr>
<tr>
<td>!</td>
<td>logical NOT</td>
<td>!a</td>
<td>true if a is false, else true</td>
</tr>
</table>
<h4>Comparison Operators</h4>
<p>
Comparison operators are used to compare two operands to result
in a Boolean true or false value.
Not that equality is similar to assignment.
</p>
<table>
<tr>
<th>Operator</th> <th>Use</th> <th>Example</th> <th>Result</th>
</tr>
<tr>
<td rowspan=2>==</td>
<td rowspan=2>equality</td>
<td>a == b</td>
<td>true if a evaluates to b, else false. Be careful with this
when comparing different types.</td>
</tr>
<tr>
<td>1 == "1"</td>
<td>true, both evaluate to "1"</td>
</tr>
<tr>
<td rowspan=2>===</td>
<td rowspan=2>strict equality</td>
<td>a === b</td>
<td>true if a is same type as b and a equals b, else false</td>
</tr>
<tr>
<td>1 === "1"</td>
<td>false, different data types</td>
</tr>
<tr>
<td>!=</td>
<td>inequality</td>
<td>a != b</td>
<td>true if a does not evaluate to b, else false</td>
<tr>
<td>!==</td>
<td>strict inequality</td>
<td>a !== b</td>
<td>true if a is a different type than b or a is not equals b,
else true</td>
</tr>
<tr>
<td rowspan=2><</td>
<td rowspan=2>less than</td>
<td>a < b</td>
<td>when a and b are numbers, true if a is less than b, else
false</td>
</tr>
<tr>
<td>a < b</td>
<td>where a and b are strings, true if a is alphabetically before b,
else false. Note that the ASCII order is used, so all
upper case letters are less than any lower case letter.</td>
</tr>
<tr>
<td>></td>
<td>greater than</td>
<td>a > b</td>
<td>true if a is greater than b, else false</td>
</tr>
<tr>
<td><=</td>
<td>less than or equal</td>
<td>a <<= b</td>
<td>true if a is less than or equal to b, else false</td>
</tr>
<tr>
<td>>=</td>
<td>greater than or equal</td>
<td>a >= b</td>
<td>true if a is greater than or equal to b, else false</td>
</tr>
<tr>
<td><==</td>
<td>strict less than or equal</td>
<td>a <<= b</td>
<td>true if a is of the same type as b and a is less than or equal
to b, else false</td>
</tr>
<tr>
<td>>==</td>
<td>strict greater than or equal</td>
<td>a >== b</td>
<td>true if a is of the same type as b and a is greater than or
equal to b, else false</td>
</tr>
</table>
<p>
The following is a list of things to consider when doing comparisons.
(from the Mozilla development foundation).
</p>
<ul>
<li>
Two strings are strictly equal when they have the same sequence of
characters, same length, and same characters in corresponding positions.
</li>
<li>
Two numbers are strictly equal when they are numerically equal
(have the same number value).
</li>
<li>
<strong>NaN</strong> (<strong>N</strong>ot <strong>a</strong> <strong>N</strong>umber) is not equal to
anything, including NaN or undefined.
</li>
<li>
undefined is equal only to itself.
</li>
<li>
Positive and negative zeros are equal to one another.
</li>
<li>
Two Boolean operands are strictly equal only if both are true or
both are false.
</li>
<li>
Two distinct objects are never equal for either strict or abstract
comparisons.
</li>
<li>
An expression comparing Objects is only true if the operands
reference the same Object.
</li>
<li>
Null and Undefined Types are strictly equal to themselves and
abstractly equal to each other.
</li>
</ul>
<h4>Simplified Operator Precedence</h4>
<p>
JavaScript has some twenty levels of precedence that is described
more fully in the advanced section of this document. The precedence
of the operators discussed up to this point is summarized in the
following table.
</p>
<table class="fullwidth-table">
<tbody>
<tr>
<th>Precedence</th>
<th>Operator type</th>
<th>Associativity</th>
<th>Individual operators</th>
</tr>
<tr>
<td>20</td>
<td>Grouping</td>
<td>n/a</td>
<!-- … is an ellipsis character -->
<td><code>( … )</code></td>
</tr>
<tr>
<td colspan="1" rowspan="2">19</td>
<td>Member Access</td>
<td>left-to-right</td>
<td><code>… . …</code></td>
</tr>
<tr>
<td>Computed Member Access</td>
<td>left-to-right</td>
<td><code>… [ … ]</code></td>
</tr>
<tr>
<td colspan="1" rowspan="3">16</td>
<td>Logical NOT</td>
<td colspan="1" rowspan="3">right-to-left</td>
<td><code>! …</code></td>
</tr>
<tr>
<td>Unary Plus</td>
<td><code>+ …</code></td>
</tr>
<tr>
<td>Unary Negation</td>
<td><code>- …</code></td>
</tr>
<td>15</td>
<td>Exponentiation</td>
<td>right-to-left</td>
<td><code>… ** …</code></td>
</tr>
<tr>
<td rowspan="3">14</td>
<td>Multiplication</td>
<td colspan="1" rowspan="3">left-to-right</td>
<td><code>… * …</code></td>
</tr>
<tr>
<td>Division</td>
<td><code>… / …</code></td>
</tr>
<tr>
<td>Remainder</td>
<td><code>… % …</code></td>
</tr>
<tr>
<td rowspan="2">13</td>
<td>Addition</td>
<td colspan="1" rowspan="2">left-to-right</td>
<td><code>… + …</code></td>
</tr>
<tr>
<td>Subtraction</td>
<td><code>… - …</code></td>
</tr>
<tr>
<td rowspan="4">11</td>
<td>Less Than</td>
<td colspan="1" rowspan="4">left-to-right</td>
<td><code>… < …</code></td>
</tr>
<tr>
<td>Less Than Or Equal</td>
<td><code>… <= …</code></td>
</tr>
<tr>
<td>Greater Than</td>
<td><code>… > …</code></td>
</tr>
<tr>
<td>Greater Than Or Equal</td>
<td><code>… >= …</code></td>
</tr>
<tr>
<td rowspan="4">10</td>
<td>Equality</td>
<td colspan="1" rowspan="4">left-to-right</td>
<td><code>… == …</code></td>
</tr>
<tr>
<td>Inequality</td>
<td><code>… != …</code></td>
</tr>
<tr>
<td>Strict Equality</td>
<td><code>… === …</code></td>
</tr>
<tr>
<td>Strict Inequality</td>
<td><code>… !== …</code></td>
</tr>
<tr>
<td>6</td>
<td>Logical AND</td>
<td>left-to-right</td>
<td><code>… && …</code></td>
</tr>
<tr>
<td>5</td>
<td>Logical OR</td>
<td>left-to-right</td>
<td><code>… || …</code></td>
</tr>
<tr>
<td>3</td>
<td>Assignment</td>
<td>right-to-left</td>
<td><code>… = …</code></td>
</tr>
</tbody>
</table>
<h3 id=statements>Statements</h3>
<p>
Usually there is one JavaScript statement per line, but you can
put more on a line as long as each statement is separated with a
semicolon ';'. In modern browsers this semicolon is optional.
Some programmers like to end each statement with a semi-colon
anyway. Some statements may span more than one line, especially
complex assignment statements. JavaScript determines the end of
a statement explicitly with the presence of the semi-colon or it
guesses the end of statement by the context of the various lines of
code as in the following example.
</p>
<code>a = 1; // statement with ending semicolon
a = 1 // statement without the ending semicolon
a = 1; b = 2 // two statements on a line
a = 1 // could be the end or not depending on what follows
+ 1 // appended to preceding line
+ 1 // appended to the preceding lines
+ 2 // appended to the preceding lines, so a = 5
b = 3 // another statement
</code>
<p>
Now let's try some Turtle Graphics functions.
These statements are simple function calls.
turn the turtle the right 90 degrees, <code>right(90)</code>, and
move the turtle forward 10 units, <code>forward(10)</code>.
</p>
<code>right(90)
forward(10)
right(90)
forward(10)
right(90)
forward(10)
right(90)
</code>
<img src="images/square.gif">
<p>
This tells the turtle to move and turn, move and turn, move and turn,
move and turn to complete a square as in the following figure.
</p>
<p>
Some of JavaScript's constructs come in pairs. Strings are
enclosed in pair of single quotes (apostrophes) or a pair of double
quotes. A single quote may appear in a string set off with double
quotes and a double quote may appear in a string set of with single
quotes. An opening parentheses, square bracket, or curly brace
(brace), must be matched with the closing parentheses, square bracket
or curly brace.
</p>
<code>r = 'string' // string of characters
a = "string" // string of characters
b = ' another string' // string of characters
b = (2 + 3) * 5 // parentheses to affect order of calculation
// b = 25
b = 2 + 3 * 5 // without parentheses, multiplication
// take precedence over addition, so b = 17
d = [a, b, c] // list of variables
function foo (a, b, c) // group of parameters
{ statement, statement, statement} ; // group of statements in a function
f = foo (1, 2, 3) // group of arguments 1,2,3
{ a=1; b=2; c=a+b} // group of statements
dog = { breed: "dalmatian", //object with 4 attributes
color: "white and black",
gender: "M",
age:2
}
</code>
<h2 id="basic javascript concepts">Basic JavaScript Concepts</h2>
<h3>Conditionals</h3>
<img src="images/conditional.png">
<p>
A <strong>conditional</strong> is code that is executed when some
Boolean condition
is true or false. Conditionals start with an
<span class="keyword">if</span> key word
followed by an expression, called the <strong>condition</strong>,
contained within parentheses which evaluates to a Boolean value,
either <span class="keyword">true</span> or
<span class="keyword">false</span>.
This is followed by a single statement or a block
of statements surrounded by curly braces that is executed if
the condition is true.
This statement or group of statements is sometimes called
the <strong>then clause</strong> of the conditional.
Many programmers always use the curly brackets to make their code
more consistent, even if there is only a single statement. The
<span class="keyword">if</span>
statement can be followed immediately by the
<span class="keyword">else</span> keyword
followed with a single statement or a block of statements surrounded
by curly braces.
This statement or group of statements is sometimes called
the <strong>else clause</strong> of the conditional.
The else clause is executed if the condition is false.
</p>
<code>function square() {
for (i=0; i<4; i=i+1) {
if (i % 2 == 0) { //i is even
color (blue);
width (4);
} else {
color (black);
width (.5);
}
forward(50);
right(90);
}
}
</code>
<p>
Note: JavaScript allows the use of the short cuts <code>i++</code>
instead of "<code>=i+1</code> and <code>i--</code> instead of
<code>i=i-1</code>. The long form is used here and most of the
examples to make the code easier to understand and less prone
to errors.
</p>
<h3>Iteration</h3>
<p>
Computer science calls the process of doing things over and
over, <strong>iteration</strong>. Turtle graphics give you a way to
do iteration with the
<code>repeat(<span class="var">count</span>, <span class="var">function</span>)</code>
statement. This lets you
execute a defined function a number of times.
</p>
<code>function square (size) {
repeat (4, function () {
forward (size);
right (90);
})
}
</code>
<p>
So in using a while statement, there are three things you need to
do:
</p>
<ul>
<li>
Set up the initial condition of the loop.
</li>
<li>
Test the condition to see whether to continue
or not. It is important that there be a condition
that will turn false to prevent the code from looping
forever, a so-called <strong>infinite loop</strong>.
</li>
<li>
Change the condition within the loop.
</li>
</ul>
<img src="images/square.gif">
<p>
In the example, the condition being tested is the turtle running
off of the screen. Since its path is enlarged each loop, eventually
it should run off the screen and prevent an infinite loop.
</p>
<code>function spiral () {
var i = 0;
while ( i < 10) {
forward (i + i);
right (90 - i);
i = i + 1;
}
}
</code>
<p>
In this example, the condition is initialized with <code>i = 0</code>.
The continuing condition is <code>i > 10</code>, so the stopping
condition would be <code>i >= 10</code>. The condition is changed
within the loop with <code>i = i + 1</code>.
</p>
<img src="images/simple_spiral.png">
<p>
Sometimes you want the repetition to continue until some other
criteria is met. Below is an example of a spiral that will expand
until it moves off of the canvas. This example also shows a variable
that is increased in value for each loop to make the length of the
sides increase. The condition for continuing the loop is whether the
turtle remains withing the bounds of the canvas. This is inherently
initialized when the program starts. It is changed every iteration
when the turtle moves. It should be noted that if the turtle does
not move in bigger and bigger paths, the program will get stuck in
an infinite loop.
</p>
<code>function spiral () {
wrap(false);
var i = 1;
while ( turtle.pos.x < maxX()
&& turtle.pos.x > minX()
&& turtle.pos.y < maxY()
&& turtle.pos.y > minY()) {
forward (i + i);
right (90 - i);
i = i + 1;
}
}
</code>
<p>
JavaScript has other way of doing iteration loops, but a commonly
used one is the for loop. It uses the
<span class="keyword">for</span> key word followed by three sub-statements
enclosed in parentheses and separate with semi-colons. The
three sub-statements:
initialization, while condition, and iterator. Initialization is used to
initialize the value of the iteration variable or iterator. This
variable is commonly named 'i', but any valid variable name can be
used. Make sure to include a declaration for the iterator using the
keyword <span class="keyword">var</span> somewhere within the function.
The second part, the while condition
is an expression that is evaluated before every loop and must
evaluate to <span class="keyword">true</span> for the loop to
be executed. The third and
last part is the iterator where something is done to change the
looping variable at the bottom of the loop. Most of the time the
parts are fairly simple as in the following now familiar example:
</p>
<code>function square() {
for (i=0; i<4; i=i+1) {
forward(20);
right(90);
}
}
</code>
<h3 id=scope>Scope of Variables</h3>
<p>
Variables declared within a function are local to that function and
can only be accessed within that function. These variables are called
<strong>local</strong> variables. Variables declared outside functions
and variables that are not declared with the <span class="keyword">var</span>
can be accessed by any function. These variables are called
<strong>global</strong> variables. Most programmers try to avoid global
variables to limit the number of functions that can change the
value of a variable.