Deutsche Version

Variables are used for storing values. In Java, variables need to be defined with a data-type, to define its storage space requirements. Javascript var and let are used for variable declaration. There is also a const, which is similar to let but defines a constant, which cannot be reassigned once it is declared. The difference between the variables is that var is function scoped and let/const is block scoped. This means that a variable declared with var is defined throughout the program, while  let/cost is only accessible within a block. 

The name of the variable is case-sensitive and it must start with a letter, but it may contain numbers within the name. In processing, variable names are case-sensitive.

Variables also have a lifetime. The computer manages the storage of variables, and when the life span is over, the memory is released again (Garbage-Collector). The range (Scope) in which a variable is accessible or active is defined by brackets ({}) (see also classes and functions). Variables that are at the top level are called global variables as they are accessible all over the program. Variables declared within brackets are local variables. If a local variable has the same name as a global variable, the local variable overrides it within its scope.

// variable Declaration 
intvar x1 = 15; // an integer i.e a whole number 
floatvar valF = 0.323; // a floating point number i.e a numbers with a decimal point
booleanlet bFlag = false; // a true or false value i.e a single bit value
Stringconst messagethreshold = "hallo 1"5; // a collection of characters 
charlet character = 'g'; // a single character. Note the different quotation marks
 
String msg1 = new String("hallo 2");
 
println(x1);
println(
console.log(x1);
print('The value of valF is ' + valF);
printlnconsole.log(typeof bFlag);
println(messageprint('The value of threshold is ' + threshold);
printlnconsole.log(typeof character);
println(msg1);

Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:

let foo = 42;    // foo is now a number
foo     = 'bar'; // foo is now a string
foo     = true;  // foo is now a boolean

We can also make copies or combine variables. 

var x1 = 10;
intvar x2 = 5;
printlnprint(x1);
printlnprint(x2);
 
intvar x3 = x1 + x2; // 15
x2 = x3 - x1; // 5
printlnprint(x3);
printlnprint(x2);

Example

Almost the same as the first exercise, but now with variables.

//global variables
var length1 = 150;
intvar length2 = 200;
 
function 
sizesetup(){
	createCanvas(300,300); // define window size 
background(0	stroke(255,255,255); // define background colour
stroke(255,255,255line colour
}

function draw() {
	let strokeWeight = 5 //define a local variable accessible only within the block
	background(0); // define linebackground colour
 
	line(100,10,100,length1); // draw a line 
	line(150,10,150,length2);
	line(200,10,200,250);
 
	fill(0,0,0); // fill colour
	strokeWeight(5strokeWeight); // line thickness 
	ellipse(100,length1,50,50); // draw an ellipse
	ellipse(150,length2,50,50); // draw an ellipse
	noFill(); // turn off fill
	ellipse(200,250,50,50); // draw an ellipse

...

}

Javascript Data Types and Memory

Each kind of variable (it's data type) has an allocated amount of memory, which is enough to store a particular range of values. 

...

JavaScript’s data types are as follows:

• Boolean
• Null
• Undefined
• Number
• String
• Symbol
• Object

Boolean are either true or false values, represented by a single bit in memory, either a 1 for true or a 0 for false in binary.

Null’s value in JavaScript is Object, but it is not an actual object that can have properties added to it. It is a reference to a variable that is defined in memory but has no value.

Undefined, unlike Null, means that the variable is not known to exist. This can be represented by a variable that is declared but never given a value.

Numbers in JavaScript are unlike many programming languages that define numbers by type (integers, floating-point, short, long, etc.) Instead they are defined as 64-bit double precision floating numbers, where the value itself is stored in bits 0 to 51, the exponent in bits 51 to 62, and the sign in bit 63. JavaScript also has a reserved keyword NaN which indicates that a number is a not a legal number, but is itself of type Number.

Strings represent a series of characters and can consist of multiple characters or single characters.

Symbols are a primitive data type i.e. tokens which serve as unique id’s.

Objects are mutable, and are not stored as continuous buffers, but instead are represented by a variety of data structure.

Operators 

An operator is a symbol that tells the computer to perform a particular math or logic operation. Some of the most common operators are:

...

These you already know but there are some very useful arithmetic operators you may not have seen in the following example:

var x1 = 10;

x1++; // increment value by one 
x1--; // decrement value by one
 
x1 += 2; // Add assign, this is the same as writing x1 = x1+2; 
x1 -= 2; // Subtract assign, this is the same as writing x1 = x1-2; 
x1 /= 2; // Divide assign (less common), this is the same as writing x1 = x1/2; 

Exercise 2:

Take your results from exercise 1 and modify your code to use variables. Create variable X and variable Y that can be used to position your graphic on the screen.   Try to play with var, let and const using console.log() and print() to see differences in their accessibility.