/*  TURTLE GRAPHICS
 *  Direct       | JavaScript       | Description
 * --------------+------------------+----------------------------
 *  FD n         | FD(n)            | Move pen n units forward
 *  BK n         | BK(n)            | Move pen n units back
 *  LT deg       | LT(deg)          | Turn pen deg degrees left
 *  RT deg       | RT(deg)          | Turn pen deg degrees right
 *  UP           | UP()             | Pen up   - move only
 *  DN           | DN()             | Pen down - draw
 *  WIDTH w      | WIDTH(w)         | Set stroke width
 *  COLOR c      | COLOR("c")       | Set drawing color
 */

/* Draws a colored square */

COLOR("red")    FD(10) LT(90)
COLOR("yellow") FD(10) LT(90)
COLOR("green")  FD(10) LT(90)
COLOR("blue")   FD(10) LT(90)

// You can loop over a section of code like so:

REPEAT 12 BEGIN
	FD(10)
	LT(30)
END

// REPEAT loops can be nested:

REPEAT 6 BEGIN
	WIDTH(2) FD(10) LT(60)
	WIDTH(1) RT(45)

	REPEAT 12 BEGIN
		FD(2)
		RT(30)
	END
	LT(45)
END

// Using constants makes the code easier to read and change:

const nr_segments = 12

REPEAT nr_segments BEGIN
	FD(10)
	LT(360/nr_segments)
END

/* Functions group instructions, that can be called from different
 * locations in the program.
 */

function nested_polygon( outer_steps, inner_steps ) {
	const outer_size  = 10
	const outer_width = 2
	const outer_angle = 360/outer_steps

	const inner_size  = 5
	const inner_width = 1
	const inner_angle = 360/inner_steps

	const inner_rotation = (outer_angle + inner_angle)/2

	REPEAT outer_steps BEGIN
		WIDTH(outer_width)
		FD(outer_size)
		LT(outer_angle)

		RT(inner_rotation)
		WIDTH(inner_width)

		REPEAT inner_steps BEGIN
			FD(inner_size)
			RT(inner_angle)
		END

		LT(inner_rotation)
	END
}

nested_polygon(4, 3)
nested_polygon(4, 5)

// Unlike constants, variables can change their contents in run time.

const colors = [                              // Define an array of strings
	"red",  "yellow", "green",
	"cyan",	"blue",	  "magenta",
];

var index = 0;                                // Counts through the colors

WIDTH(5); UP();  RT(90); FD(11.5); LT(90);    // Move down 11.5 units,
BK(2)                                         // centering the circle
REPEAT 12 BEGIN
	index = index + 1                     // Select next color

	// The colors[] array has a range of [0..5] in this example.
	// So we clamp  index  to values from 0 to (colors.length-1).
	// "%" is like "/", but the result is the remainder of the division:
	index = index % colors.length

	COLOR( colors[index] )                // Set the color
	DN()   FD(4)                          // Draw line
	UP()   FD(1) LT(30) FD(1)             // Move to next line
END

// "The code is the documentation."
// - 1337 hax0r

function recurse( distance, angle ) {
	if (distance > 0) {
		FD(distance);
		LT(angle);
		recurse(distance - 1, angle);
	}
}

function multiple( distance, angle, iterations ) {
	for( let i = 0 ; i < iterations ; ++i ) {
		recurse(distance, angle);
	}
}


const selected_variant = 0;

switch (selected_variant) {
	case 1:  recurse ( 20, 30    );  break;
	case 2:  multiple( 20, 30, 3 );  break;
	case 3:  recurse ( 10, 60    );  break;
	case 4:  multiple( 10, 60, 3 );  break;
	default: throw Error("Oopsie...");
}

const angle_reduction  = 0.8
const length_reduction = 0.65
const hex = "0123456789abcdef";

function draw_branch( angle = 50, length = 32 ) {
	if (length < 1) return;

	const brightness = Math.floor((32 - length)/5);
	COLOR("#6" + hex.charAt(brightness+2) + "0")

	WIDTH(length/2)
	FD(length)

	PUSH()
	LT(angle)
	draw_branch(
		angle *angle_reduction,
		length*length_reduction
	)
	POP()

	PUSH()
	RT(angle)
	draw_branch(
		angle *angle_reduction,
		length*length_reduction
	)
	POP()
}

RESET(NO_GRID) BACKGROUND("#030")
LT(90) UP() BK(40) DN()

draw_branch()

HIDE()

/* EcmaTurtle provides you with a set of functions, like FD, REPEAT, etc.
 * Let's take a look, how REPEAT is implemented:
 */

function MyRepeat( times, callback ) {
	while (times > 0) {                                await
		callback();          // Please ignore the "await".
		times = times - 1;
	}
}

/* The function takes another function as parameter (callback) and
 * executes that function repeatedly. It is used like so:
 */

const do_something = async function() {
// My parser can't handle callbacks yet
//...Xunction do_something() {
	FD(10)
	LT(30)
}

MyRepeat(12, do_something);

/* You don't have to declare a function for using it with repeat;
 * instead, use "anomnymous functions", which are declared on the spot:
 */

REPEAT(
	12,
	async function() {   // Ignore the "async" for now
		FD(10)
		LT(30)
	}
);

// Arrow functions can be used in similar fashion to anonymous functions:

REPEAT( 12, ()=>{
	FD(10)
	LT(30)
});

/* In reality, all the code you enter here is JavaScript. Before execution,
 * parts of your code will be replaced with real JS code, for example:
 *
 *	REPEAT 12 BEGIN
 *		FD(10) LT(30)
 *	END
 *
 * will be turned into the following code:
 */

// REPEAT --> "REPEAT("
REPEAT(12, ()=>{          // BEGIN --> ", ()=>{"
	FD(10); LT(30);
});                       // END   --> "});"

/* The take-away of this lesson is, that EcmaTurtle's replacements may do
 * something silly, causing your program to crash. Of course I did some
 * testing and most things will work just fine. If your program crashes
 * for no apparent reason and you suspect EcmaTurtle to be the culprit,
 * you can check the actual code being run; It is dumped to the Developer
 * Console of your browser before execution.
 */

//...SPEED(NO_ANIMATION)

const max_segments   = 15   // 16 hexadecimal digits
const rotation_speed = 5;

BACKGROUND("black")

function draw_circles( nr_segments, rotation ) {
	RESET(NO_GRID | NO_TURTLE | FULL_SPEED)
	LT(rotation)

	const hex_digits = "0123456789abcdef";
	const R = hex_digits.charAt(nr_segments * (rotation % 3 == 0));
	const G = hex_digits.charAt(nr_segments * (rotation % 3 == 1));
	const B = hex_digits.charAt(nr_segments * (rotation % 3 == 2));

	COLOR("#"+R+G+B);

	for( let r=0 ; r<nr_segments ; ++r ) {
		for( let i=0 ; i<36 ; ++i ) {
			FD(2)
			LT(10)
		}
		RT(360/nr_segments)
	}

	RT(360/max_segments)
	SLEEP(33)
	UPDATE()
}

let r = 0
while (true) {
	for( let s=2 ; s<max_segments ; ++s ) {
		draw_circles(s, r)
		r += rotation_speed
	}
	for( let s=max_segments ; s>2 ; --s ) {
		draw_circles(s, r)
		r += rotation_speed
	}
}

const nr_segments    = 36
const radius         = 50

function circle( radius, nr_segments ) {
	const circumference  = 2*radius*π
	const segment_length = circumference/nr_segments

	UP()
	FD(radius) LT(90) BK(segment_length/2)
	DN()

	REPEAT nr_segments BEGIN
		FD(segment_length)
		LT(360/nr_segments)
	END

	UP()
	FD(segment_length/2) RT(90) BK(radius)
	DN()
}

function coordinates( radius ) {
	const length      = 2*(radius+10)
	const dash_length = 2;
	const nr_dashes   = length/(2*dash_length)+1
	const distance    = length/2 + dash_length/2

	LT(90)
	UP() BK(distance) DN()
	REPEAT nr_dashes BEGIN  FD(2) UP() FD(2) DN()  END
	UP() BK(distance+dash_length) DN()

	RT(90)
	UP() BK(distance) DN()
	REPEAT nr_dashes BEGIN  FD(2) UP() FD(2) DN()  END
	UP() BK(distance+dash_length) DN()
}

function triangle(radius, angle) {
	const x = COS(angle)*radius
	const y = SIN(angle)*radius

	FD(x)	LT(90)
	FD(y)	LT(90+angle)
	FD(radius)
	LT(180-angle)
}

WIDTH(1) COLOR("black") coordinates(radius)
WIDTH(4) COLOR("black") circle(radius, nr_segments)
WIDTH(2) COLOR("red")   triangle(radius,  30)
WIDTH(2) COLOR("green") triangle(radius, -45)
WIDTH(2) COLOR("blue")  triangle(radius, 120)

const letter_width = 9;
const letter_gap   = 4;
const curvature    = 5;
const text         = "Hello, World!";

function draw_character( character ) {

	const w = letter_width    // Typical letter width

	switch (character.toUpperCase()) {
	case "H":
		LT(90)  FD(20)
		UP()    BK(10)  DN()
		RT(90)  FD(w)   LT(90)
		UP()    FD(10)  DN()
		BK(20)  RT(90)
	break

	case "E":
		LT(90)  FD(20)  RT(90)  FD(w)
		UP()    RT(90)  FD(10)  RT(90)  FD(3)  DN()
		FD(w-3)
		UP()   LT(90)   FD(10)  LT(90)  DN()
		FD(w)
	break

	case "L":
		LT(90)  FD(20)
		UP()    BK(20)  DN()
		RT(90)  FD(w)
	break

	case "O":
		UP()  LT(90) FD(10)  DN()
		REPEAT 3 BEGIN  FD(4) RT(30)  END
		RT(30)
		REPEAT 3 BEGIN  FD(4) RT(30)  END
		LT(30)
		REPEAT 3 BEGIN  FD(4) RT(30)  END
		RT(30)
		REPEAT 3 BEGIN  FD(4) RT(30)  END
		LT(30)
		UP()  BK(10) RT(90) FD(11)  DN()
	break

	case ",":
		LT(75)  BK(5)  FD(5)

		REPEAT 6 BEGIN  FD(1)  LT(60)  END
		RT(75)
	break

	//case "W":
	//break

	//case "R":
	//break

	//case "D":
	//break

	case "!":
		LT(90)  FD(1)
		UP()  FD(2)  DN()
		FD(17)
		UP()  BK(20)  DN()
		RT(90)
	break

	case " ":
		UP()  FD(8)  DN()
	break

	default:
		COLOR("red")  FD(w)  COLOR("BLACK")
	} // switch

	UP()  FD(letter_gap)  DN()
}

function draw_text( text, angle=0 ) {
	// Move half the text width to the left
	UP()
	REPEAT text.length BEGIN  BK((letter_width+letter_gap)/2) END
	FD( text.length * ((360 - curvature) / 360) )
	DN()

	// Turn left half as much, as the loop below will turn right in total
	const length
	= text.length
	- 1   // The "," has virtually no width
	- 1   // The "!" has virtually no width
	;
	LT( length*angle/2 )

	// Draw each character
	for( let i=0 ; i<text.length ; ++i ) {
		const character = text.charAt(i);
		draw_character(character);

		RT(angle)   // Turn right after each char, creating an arc
	}
}

WIDTH(3)
draw_text(text, curvature)
HIDE()

// Bannkreis
GRID(OFF)
BACKGROUND("black")

const radius = 50
const nr_segments = 360/5
const segment_length = 2*π*radius/nr_segments

COLOR("#642") WIDTH(22)
LT(72*3)

UP() FD(radius) LT(90) BK(segment_length/2) DN()
REPEAT nr_segments BEGIN
	FD(segment_length)
	LT(360/nr_segments)
END
UP() FD(segment_length/2) RT(90) BK(radius) DN()

LT(72*3)

UP() LT(90) FD(16.2) RT(90) BK(50) DN()
COLOR("black") WIDTH(33)

REPEAT 5 BEGIN
	FD(38);
	UP(); FD(2); DN()
	FD(60)
	RT(180*4/5)
END

COLOR("#ca0") WIDTH(1.5)
REPEAT 5 BEGIN
	FD(38);
	UP(); FD(3.25); DN()
	FD(58.25)
	RT(180*4/5)
END

RT(180*1/5/2)
UP() FD(10) DN()
LT(180*1/5/2)

REPEAT 5 BEGIN
	FD(27.5);
	UP(); FD(3.25); DN()
	FD(49.75)
	RT(180 *4/5)
END

HIDE()

// New Program

Read the
Manual

EcmaTurtle

Set the cursor on a command in the source code above to get help on it.

TurtleScript

JavaScript functions provided by EcmaTurtle:

Drawing

Control

Math

JavaScript

Predefined Objects

Supplementary Articles

Introductions on MDN

Supplementary Articles

Scope

The scope of an object (or variable, function) is the region in the program, where it is "visible"and this can be accessed. The top level is the "global scope", where your program and its functions live in. Code within curly braces gets its own new scope. While objects outside the local scope can be accessed from the inside, code outside of the scope cannot access local objects.

var myGlobalVariable = 1;

function func( myArgument ) {
	var myLocalVariable = myArgument;
	myGlobalVariable = myLocalVariable;
}

console.log(myGlobalVariable);   // Output: "1"
func(2);
console.log(myGlobalVariable);   // Output: "2"
console.log(myLocalVariable);    // Uncaught ReferenceError: myLocalVariable is not defined
console.log(myArgument);         // Uncaught ReferenceError: myArgument is not defined

It is possible to re-use a name, that already exists outside of the current scope. This makes access to the outside object impossible. It is also quesionable, if this is a good idea:

function x() {
	const y = 1;
	console.log(y);

	function z() {
		const y = 2;
		console.log(y);
	}

	z();
}

x();   // Output: "1", "2"

Hoisting

Variables declared with var are put into memory during the compile phase, before the program is started. Therfore, those variables are available, before they seemingly have been declared, as if they were automagically moved to the top of the scope. This can be prevented by never using the outdated var instruction, but instead using let (which was added to JavaScript at a later time), thus preventing nasty surprises:

function func() {
	console.log(my_var);
	console.log(my_let);

	var my_var = "This will be logged to the console.";
	let my_let = "Will trigger a Reference Error.";
}

Code Security

JavaScript is a very powerful language. Unfortunately, it has some really strange quirks, that can easily trip unexpirienced programmers, sometimes even experts are scratching their heads. It also allows you to do things, that are not always smart to do. Simpler code is safer in general, and easier to understand, when you come back to it a long time later.

Therefore, I recommend, you stick to certain coding styles and refrain from writing clever constructs. Here are a few hints, that will make your code easier to debug and will prevent certain mistakes from happenening in the first place:

Keep your code clean and well formatted, even if you are just writing a small test program. This will make writing clean code a habit.
Stick to one style of formatting.
Insert paragraphs, where they make sense. Block things, that belong together.
I use one empty line between steps of a larger operation and two empty lines, when I have to write a long function (spaghetti code) and need to separate independent tasks. This way, you will have it easier to find a section, you are looking for later.
Be strict about your formatting, really!
Always use curly braces for if statements. Never do this:
```
if (something == true)
	do_another_thing();
```
To prevent forgetting to add the braces, when you add code to the true branch later, format it either like so:
```
if (something == true) do_another_thing();
```
Preferrably be strict and use curly braces:
```
if (something == true) {
	do_another_thing();
}
```
Never use var (see Hoisting)
Make variable and function names expressive.
Take your time to find good names for your identifiers (variable/function names).
Don't be lazy and use (too) short names, only to have to type less. Avoid abbreviations.
Be consistent with your naming scheme. You will not remember, when you used an abbreviation or not, if there are 100 variables and functions in your code.
Make your identifiers easy to guess. You will soon have so many variables, that looking them up constantly will become tedious.
Write good comments.
Don't comment obvious things, that are easy to understand by looking at the code itself.
Don't comment too much. This will make your code look like a jungle and you won't find, what you are looking for as easily.
Don't comment, what a command does, but rather explain, what it achieves.
Instead of:
```
i = i + 1;   // Increase i by one
```
it should be something like:
```
i = i + 1;   // Select next entry
```

Comments

are inactive parts of a source code, helping the reader to understand, what's going on.

/* This is a
multi-line comment */

const y = 1;   // The rest of this line is a comment.

/* This type of comment, can wrap around
   // this type of comment
*/

Arrays

are lists of values, which can be accessed by their index.

const myArray = [ 1, 2, "three", {"four": 4} ];

for( let i=0 ; i<myArray.length ; ++i ) {
	console.log( myArray[i] );
}

// Output:
// 1
// 2
// three
// {four: 4}

Curly Braces

can either group a set commands (scope) or be a list of key/value pairs (objects).

The if statement will always execute the next command, if the condition evaluates to true:

if (condition == true) doSomething();

In order to have it execute several commands, one can combine them into a "block", that behaves like it was one single command:

if (condition == true) {
	doSomething();
	doAnotherThing();
}

Objects

const myObject = {
	"key1": "value1",
	"key2": "value2",
};

console.log( myObject.key1    );   // Output: value1
console.log( myObject["key2"] );   // Output: value2

myObject["key3"] = "value3";
console.log(myObject.key3);        // Output: value3

const key_name = "key4";
myObject[key_name] = "value4";
console.log(myObject.key4);        // Output: value4

The variable myObject contains a reference to the data within the object and will usually not change throughout the lifetime of the variable. Therefore it should be declared const. The contents (properties) of an object are always variable.

Parentheses

Used for functions and their arguments or in mathematical expressions.

function myFunc( someArgument ) {
	console.log(someArgument);
}

myFunc("Text");   // Output: Text

const someValue = (1 + 2) / 3;

Comparisons

Comparison operators return Boolean values (true/false).

if (var1 == var2) { do_something(); }
const true_or_not = (1 < 2);   // Result: true

true also represents the value (+1), while false equals to zero:

const add_offset = true;
const offset     = 3;
const value      = 10 + (add_offset * offset);   // Result: 13

Operators

Operators combine one, two or three values. Most of the time you will see arithmetical operators (const x = a + b;) or assignments (const x = 1;).

Like in mathematics, operators have different priorities, called "operator precedence". See the MDN link below for a list of all operators and their order of precedence.

const x = 1 + 2 * 3;         // Result: 7
const x = (1 + 2) * 3;       // Result: 9
const remainder = 7 % 3;     // Modulo, remainder of division. Result: 1
const is_equal = (a == b);   // Boolean operator (equality). Result: true/false

Turtle Commands

FD(units)

moves the turtle forward. If the turtle is "down", this will draw a line.

FD(10);

BK(units)

moves the turtle backwards. If the turtle is "down", this will draw a line.

BK(10);

LT(degrees)

turns the turtle to the left.

LT(90)

RT(degrees)

turns the turtle to the right.

RT(90)

UP()

lifts the turtle, so it will not draw a line, when moving.

UP()

DN()

Lowers the turtle, so it will draw a line, while moving.

DN()

HOME()

Sets the pen to the home position (0|0) and the direction 0° (to the right).

DN()

PUSH()

Pushes position, direction, color, line width and pen up/down status to the stack.

PUSH()

POP()

Retreives position, direction, color, line width and pen up/down status from the stack.

POP()

SHOW()

Shows the pen.

SHOW()

HIDE()

Hides the pen

HIDE()

WIDTH(1/SCALE_FACTOR units)

sets the line width. At 100% zoom, a unit is SCALE_FACTOR pixels on the screen.

WIDTH(1)

COLOR("color code")

sets the drawing color. CSS color codes and names are allowed.

COLOR("red")
COLOR("#f00")
COLOR("#ff0000")
COLOR("rgb(255,0,0)")
COLOR("rgba(100%,0,0, 0.5)")
COLOR("hsl(0,1,0.5)")
COLOR("hsla(0,100%,50%, 0.5)")

BACKGROUND("color code")

sets the background color. CSS color codes and names are allowed

BACKGROUND("red")
BACKGROUND("#f00")
BACKGROUND("#ff0000")
BACKGROUND("rgb(255,0,0)")
BACKGROUND("rgba(100%,0,0, 0.5)")
BACKGROUND("hsl(0,1,0.5)")
BACKGROUND("hsla(0,100%,50%, 0.5)")

REPEAT

Repeats a block of commands a given number of times.

REPEAT 12 BEGIN
	do_this_12_times();
END

BEGIN

Starts a block of repeated commands.

REPEAT 12 BEGIN
	do_this_12_times();
END

END

Ends a block of repeated commands.

REPEAT 12 BEGIN
	do_this_12_times();
END

SLEEP(milliseconds)

upadets the screen and pauses program execution.

SLEEP(1000)

UPDATE()

shows, what has been drawn so far. Useful, when speed is set to "No animation".

UPDATE()

RESET(options)

Clears the drawing, sets options.

RESET()
RESET(NO_GRID)
RESET(NO_GRID | NO_TURTLE)
RESET(NO_GRID | NO_TURTLE | FULL_SPEED)
RESET(NO_GRID | NO_TURTLE | NO_ANIMATION | NO_TRACE | NO_LOG)

RESET will enable all options, unless one or more flags prohibiting the option(s) are set.

Options

NO_GRID: Same effect as GRID(OFF)
NO_TURTLE: Same effect as HIDE()
NO_ANIMATION: Same effect as SPEED(-1) (Single turtle operations are not shown), sets maximum execution speed, no automatic screen updates, see UPDATE()
NO_TRACE: Don't follow the code in the debugger
NO_LOG: Don't add turtle commands to the log. Slightly improves speed, but redrawing is impossible. FULL_SPEED; const FULL_SPEED = (NO_ANIMATION | NO_TRACE | NO_LOG);

SPEED(milliseconds)

Set execution speed as a delay between every command.

SPEED(33)
SPEED(NO_ANIMATION)   // No automatic update of the screen while running.
                      // See RESET() and UPDATE()

GRID([on|off])

toggles the grid on or off. The grid will never be saved when downloading the image.

GRID()       // Turns the grid on
GRID(ON)
GRID(1)
GRID(true)

GRID(OFF)    // Turns the grid off
GRID(0)
GRID(false)

Math

RND([min, max])

returns a random value from 0..1 or min..max

let random_float = RND()      // Returns values from 0 to 0.999...
let random_integer = (2, 9)   // Returns values from 2 to 9

SIN(degrees)

returns the sinus of a value.

let y = SIN(45)

While JavaScript Math functions take angles in radians, Turtle functions use degrees:

const x = COS(45);
const y = Math.sin(45 / 180 * Math.PI);

COS(degrees)

returns the cosinus of a value.

let x = COS(45)

While JavaScript Math functions take angles in radians, Turtle functions use degrees:

const x = COS(45);
const y = Math.sin(45 / 180 * Math.PI);

TAN(degrees)

returns the tangens of a value.

let y = TAN(45);

While JavaScript Math functions take angles in radians, Turtle functions use degrees:

const x = COS(45);
const y = Math.sin(45 / 180 * Math.PI);

COT(degrees)

returns the cotangens of a value.

let x = COT(90);

While JavaScript Math functions take angles in radians, Turtle functions use degrees:

const x = COS(45);
const y = Math.sin(45 / 180 * Math.PI);

SQRT(n)

returns the square root of a value.

let r = SQRT(4);   // r will be 2

PI

- the mathematical constant π.

let radians = degrees / 180 * PI;
let degrees = radians * 180 / π;    // The unicode charcter is allowed, too.

TAU

- the mathematical constant τ = 2π.

let radians = degrees / 360 * TAU;
let degrees = radians * 360 / τ;     // The unicode charcter is allowed, too.

JavaScript

const

defines a constant and assigns a value to it.

const my_string = "String";
const my_array  = ["with", 1, 3, "mixed", "content"];
const my_object = { name:"My PC", type:"Notebook", GB_ram:8 };

It is a good idea to define all variables as const, if you don't intend to change their contents later. This prevents you from accidentially assigning values to it.

var

defines a variable for the current function. Initial values can also be set:

var π;
var my_string = "String";
var my_array  = ["with", 1, 3, "mixed", "content", my_string];
var my_object = { name:"My PC", type:"Notebook", GB_ram:8 };

let

defines a variable for the current scope.

Initial values can also be set:

let my_string = "String";
let my_array  = ["with", 1, 3, "mixed", "content"];
let my_object = { name:"My PC", type:"Notebook", GB_ram:8 };
for( let i=0 ; i<MAX ; ++i ) { console.log(i); }

if

executes a command, if a given condition evaluates to true.

if (myVariable == 1) {
	console.log("Yay. It is 1.");
} else {
	console.log("Nay. It isn't 1.");
}

else

Executes the commands in the else branch, if the given condition evaluates to false.

if (myVariable == 1) {
	console.log("Yay. It is 1.");
} else {
	console.log("Nay. It isn't 1.");
}

switch

will execute a block of commands, if the given variable equals to the case:

switch (command) {
	case "do_something":
		do_something();
		break;

	case "do_another_thing":
		do_another_thing();
		break;

	default:
		do_a_default_action();
}

In fact, a switch statement is similar to a combination of if and goto; The first case with a label equal to the switch variable will be jumped to, like in the following example:

if (command == "do_something")     goto DO_SOMETHING;
if (command == "do_another_thing") goto DO_ANOTHER_THING;
goto DEFAULT;

DO_SOMETHING:
	do_something();
	goto SWITCH_END;   // break; will jump to the end of a switch

DO_ANOTHER_THING:
	do_another_thing();
	goto SWITCH_END;   // break; will jump to the end of a switch

DEFAULT:
	do_a_default_action();

SWITCH_END:
	// Done.

Therefore, if the break; instruction is omitted, the next case block will be executed, too. This is called "fall through" and might be intended. It is a good idea, to place a comment explaining, that the fall through is intended and not a case of a forgotten break;

switch (command) {
	case "do_a":
		// Doing nothing here means, that do_a is effectively the same as do_b.
		// fall through

	case "do_b":
		do_something_only_if_a_or_b();
		// fall through

	case "do_c":
		do_in_all_three_cases();
		break;   // Make sure, no other case blocks after this are executed.
}

case

part of a switch statement, that is executed, when the switch variable is equal to the case label:

switch (command) {
	case "do_something":
		do_something();
		break;

	case "do_another_thing":
		do_another_thing();
		break;

	default:
		do_a_default_action();
}

default

part of a switch statement, that is executed, when no case applied:

switch (command) {
	case "do_something":
		do_something();
		break;

	case "do_another_thing":
		do_another_thing();
		break;

	default:
		do_a_default_action();
}

break

exits the current loop or switch and jumps to the next command after the loop/switch.

switch (command) {
	case "do_something":
		do_something();
		break;   // Do NOT execute the commands in the next case section

	case "do_another_thing":
		do_another_thing();
		break;   // Do NOT execute the commands in the default section

	default:
		do_a_default_action();
}

jump_here_when_break_is_called();

let text = "";
for( let i=1 ; i<=10 ; ++i ) {
	if (i == 5) {
		break;   // Exit the for loop alltogether
	}
	text = text + i;
}

console.log(text);   // Expected output: "1234"

continue

terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.

var text = "";

for( let i=0 ; i<10 ; ++i ) {
	if (i == 3) {
		continue;   // Skip the rest of this iteration
	}
	text = text + i;
}

console.log(text);   // Expected output: "012456789"

for

repeats a block of commands as long as a given condition evaluates to true.

for( initialization ; condition ; command list );

for(
	var i=0, text="" ;
	text.length<4    ;
	++i, text+=i
);

console.log(text);   // Expected output: "1234"

Note, that commands in each section are separated by commas, not semicolons.

The above example is a bit unwieldy. Furthermore, the instruction or block after the for can also be executed in each iteration. The block will be executed before the instructions in the "command list" section.

It is common to use the sections in the for statement for counting the numbers of iterations and put the actual work in the block after the for:

let text = "";
for( let i=1 ; i<=4 ; ++i ) {
	text += i;
}
console.log(text);   // Expected output: "1234"

for is pretty flexible. You can create an endless loop like so:

for(;;) {
	repeat_me_endlessly();
}

which is equal to:

while (true) {
	repeat_me_endlessly();
}

while

executes a block of commands as long as the condition evaluates to true

let we_are_running = true;
while (we_are_running) {
	we_are_running = decide_if_we_keep_running();
}

One can use while to do the same as a for loop:

let counter = 1;
let text    = "";

while (counter <= 4) {
	text = text + counter;
	counter = counter + 1;
}

console.log(text);   // Expected output: "1234"

Take care not to create unterminated (endless) loops in EcmaTurtle. It is not designed for this and may crash.

function

introduces a new "sub-program", which can be called from elsewhere.

function do_something() {
	console.log("Hello, world!");
}

do_something();
console.log("Test");
do_something();        // Prints three lines: "Hello World!", "Test", "Hello, World!"

As in mathematics, functions can return values to the caller:

function add_numbers( n1, n2 ) {
	return n1 + n2;
}
const sum = add_numbers(1, 2);
console.log(sum);   // Expected output: 3

return

terminates the execution of a function and may return a value.

function compare( value1, value2 ) {
	if (value1 < value2) {
		return -1;
	}

	if (value1 > value2) {
		return +1;
	}

	return 0;
}

If no return statement is used, the return value is undefined:

function do_something() {
	// Calculate things
}
const value = do_something();
console.log( typeof value );   // Expected output: "undefined"

this

short description

Example code

true

- Boolean flag. Equal to ON and +1

if (true) always_do_this();
GRID(true)
GRID(ON)
GRID(1)

false

- Boolean flag, equal to OFF and 0

if (false) never_do_this();
GRID(false)
GRID(OFF)
GRID(0)

Pre-defined Objects

Array

short description

Example code

Object

short description

Example code

Math

short description

Example code

Settings

Editor/Debugger

Help

Log

Direct

EcmaTurtle

TurtleScript

Drawing

Control

Math

JavaScript

Predefined Objects

Supplementary Articles

Introductions on MDN

Supplementary Articles

Scope

See also:

Hoisting

See also:

Code Security

See also:

Comments

See also:

Arrays

See also:

Curly Braces

Objects

See also:

Parentheses

See also:

Comparisons

See also:

Operators

See also:

Turtle Commands

FD(units)

See also:

BK(units)

See also:

LT(degrees)

See also:

RT(degrees)

See also:

UP()

See also:

DN()

See also:

HOME()

See also:

PUSH()

See also:

POP()

See also:

SHOW()

See also:

HIDE()

See also:

WIDTH(1/SCALE_FACTOR units)

COLOR("color code")

See also:

BACKGROUND("color code")

See also:

REPEAT

See also:

BEGIN

See also:

END

See also:

SLEEP(milliseconds)

See also:

UPDATE()

See also:

RESET(options)

Options

See also:

SPEED(milliseconds)

See also:

GRID([on|off])

See also:

Math