All About JavaScript
var, loop, functions and the art of debugging
1.31.2018 // DataViz for Arch, Urbanism, Humanities
First things first: Syntax
but upper/lower case DOES matter.
Reserved word
Comment
Literals
Comment
Constant
Variables
Variables
How to make variables
var blackjack;
blackjack = 21;
var blackjack = 21;
Numbers represent numerical data
Integer: 75 or Float: 3.14159
Strings are used for storing textual information
"a name means a lot just by itself"
Booleans* represent a binary value
true or false
Arrays store multiple variables together
[ 1, 1, 2, 3, 5, 8, 13, 21, 34,... ]
Numbers
console.log(3.14 * 57);
Some Math Functions
console.log(random()); // prints 0.1734...
random(10, 20); // prints 14.493...
ceil(3.14159); // prints 3
floor(random(-10, 50)); // prints 23
String
var name1 = 'Harry Potter';
var name2 = "O'Malley";
// ^ can't use single quotes here
// because of apostrophe
**On Characters and Encoding
Arrays
An array is...
var name = "Hermione Granger";
var age = 13;
var courses = ["Astronomy",
"Arithmancy",
"Ancient Runes",
"Care of Magical...",
"Muggle Studies",
"Potions",
"Divination" ];
Notes on array syntax...
var scores = [17, 23, 25, 29, 37];
Conditionals: if, else, else if
Sometimes we want to describe behavior like—
If I am hungry then eat some food, otherwise if I am thirsty, drink some water, otherwise, take a nap.
In drawing we might have something more like—
If mouse is inside the circle, color it green, otherwise color it red.
Many tasks require conditional control, aka ability to react differently based upon what happens. “If user does A, produce X behavior; if user does B, produce Y response instead.”
To do this, we use booleans that store truth values and if-statements which do conditional action based on a boolean value; i.e. depending on the condition, execute different code.
If-statement syntax:
if (BOOLEAN_EXPRESSION) { // aka "test expression"
STATEMENTS_IF_TRUE // aka "then branch"
} else {
STATEMENTS_IF_FALSE // aka "else branch"
}
Relational operators, for numbers*
num < 50 | Less than |
num <= 23 | Less than or equal to |
num == 57 | Equal to (Note: == tests equality, = assigns a value!) |
num != 17 | Not equal to |
num > 110 | Greater than |
num >= 42 | Greater than or equal two |
*Next week we’ll talk about comparing strings
Loops, or Iteration
ellipse(1, 100, 10, 10);
ellipse(50, 100, 10, 10);
ellipse(100, 100, 10, 10);
ellipse(150, 100, 10, 10);
ellipse(200, 100, 10, 10);
ellipse(250, 100, 10, 10);
ellipse(300, 100, 10, 10);
ellipse(350, 100, 10, 10);
ellipse(400, 100, 10, 10);
ellipse(450, 100, 10, 10);
ellipse(500, 100, 10, 10);
ellipse(550, 100, 10, 10);
ellipse(600, 100, 10, 10);
ellipse(650, 100, 10, 10);
Loops are about repeating a set of instructions.
For example:
Basic components of a for-loop
for (var i = 0; i < 100; i++) {
line(0, i, 10, i);
}
command
counting variable
# of times to repeat
What this does: draw 100 horizontal lines, 1 line per pixel, starting at top of canvas.
For-loop repeats instruction until condition is satisfied
for (var x = 0; x < width; x = x + 50) {
ellipse(x, 100, 10, 10);
}
Initial state
condition to satisfy,
a.k.a.“repeat until this is true”
change after each repetition
What this does: make ball elements, 50px apart, until the edge of the screen
A note on “shorthand”...
for (var i = 0; i < 100; i++) {
line(0, i, 10, i);
}
???
for (var x = 0; x < width; x = x + 50) {
ellipse(x, 100, 10, 10);
}
change after each repetition
Increment and decrement are just shorthand ways to write out “add one” or “minus one”:
myNum = myNum + 1;
myNum++;
n = n - 1;
n--;
Functions
function myFunc(a, b) {
/* do some computation... */
return r;
}
INPUT x
FUNCTION f
OUTPUT f(x)
Functions are a method of abstraction.
Functions by analogy:
… like a recipe, say for chocolate cake
… like a machine, a blender
… like a workspace, a kitchen with its own storage space
Combined: a function is like a kitchen with a chef inside, customers who eat food that comes out of the kitchen don’t need to know anything about how it works.
Anatomy of a function
function draw() {
ellipse(x1, y1, 100, 200);
}
name
parameters (none!)
name
parameters (4)
Drawing a blue circle without a function—
fill('#8470ff');
ellipse(50, 50, 20, 20);
… // draw other shapes
fill('#8470ff');
ellipse(480, 23, 20, 20);
… // draw other shapes
fill('#8470ff');
ellipse(42, 280, 20, 20);
…
Drawing a blue circle with a function—
function draw() {
drawBlueCircle(50, 50);
… // draw other shapes
drawBlueCircle(480, 23);
… // draw other shapes
drawBlueCircle(42, 280); …
}
function drawBlueCircle(x, y) {
fill('#8470ff');
ellipse(x, y, 20, 20);
}
Variables Scope
Variables have global or function scope.
Global variables can be used anywhere in program.
Variables declared in a function can only be used locally, within that function.
If, inside a function you declare a variable with the same name as a global variable, the program will calculate with the value of the function variable within the scope of the function.
Global variables
Local variables
The art of debugging
Hofstadter's Law: It always takes longer than you expect, even when you take into account Hofstadter's Law. —Gödel, Escher, Bach
Make background green
Set fill to yellow
Draw rectangle with fixed X1, Y1, X2, but map Y2 between 0~400 depending on # seconds.
Scale everything 11x.
Draw a circle of fixed size.
Reset everything back to 1x scale.
End.