Code Camp
Day 3
Some Student Work…
Variables
Container
Types of data
Dynamic Typing
In JavaScript, the type of variable can change to adapt to the type of data stored in it. This is dynamic typing.
JavaScript variables are more of a bag than a box.
Variables Need Names
Can’t start with a number
Case sensitive
myVar !== myvar
Can’t use protected keywords
let if = “this is not a good idea”;
Should be meaningful
Common Types
Number - Only one kind (64-bit floating point double).
----------------------------------------------------------------------------------
Other languages use different types of numbers:
Integers, Floating point, Double floating point, Complex
//undefined
let myVariable;
console.log(myVariable);
console.log(typeof myVariable);
Common Types
String -
Text can be stored in a string.
Can include numbers
Can be concatenated together
//string
myVariable = "Test text";
console.log(myVariable);
console.log(typeof myVariable);
console.log("text can be concatenated " + myVariable);
Common Types
Undefined -
Not the same thing as empty
Not the same thing as zero
//number
myVariable = 12;
console.log(myVariable);
console.log(typeof myVariable);
Common Types
null -
Empty
Not the same thing as zero
Will be reported as a type object
//null
myVariable = null;
console.log(myVariable);
console.log(typeof myVariable);
Common Types
Array -
An ordered list
Is a type of object
//array - one type of object
myVariable = ["first", "second", "third"];
console.log(myVariable);
console.log(typeof myVariable);
console.log(myVariable[0]);
console.log(typeof myVariable[0]);
Common Types
Object -
A way to organize “things”
More later. This is huge.
//literal object
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
myVariable = {
make: "Ford",
model: "Mustang",
year: 1969,
};
console.log(myVariable);
console.log(typeof myVariable);
console.log(myVariable.make);
console.log(typeof myVariable.make);
{
make: "Ford",
model: "Mustang",
year: 1969,
}
Common Types
Boolean-
Is either true or false
Others
Like color:
let c = color(255, 204, 0);
fill(c);
noStroke();
rect(30, 20, 55, 55);
How to Make Variables
Declare & Initialize
let - just use this one
var - just don’t use
Scope
Where you define a variable determines where it can be “seen”
Scope
Where you define a variable determines where it can be “seen”
Scope
Use global declarations sparingly. They can get you into trouble!
Better to get an error message than have code do unexpected things!
Increment a Number Variable
x++
let x = 0; // not really good idea but ok
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
circle(x, x, 60);
x = x +1;
}
This is a lazy way to loop
Let’s draw some math:
Remember old y = mx + b?
Each point on the line has an X and Y
x is just x, y comes from x (see above)
How about something more fun:
circle(x, 200+70*sin(.1*x), 10)
//globals
let x = 0;
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
//
fill (0,150,255);
circle(x, 2*x+3, 10)
x++
}
Day 3 - Part 1 Video Review
Conditional Expressions
If statements
This is true
Do this
if (hour < 18) {
greeting = "Good day";
}
Comparison Operators
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
if(mouseX > 200){
circle(mouseX,mouseY,10);
}
}
About all those “=” characters
myVar = “2”
"2" == 2 // true
"2" === 2 // false
= assigns
== checks value but not type
=== checks value and type
Logical AND and OR
if(mouseX > 200 && mouseY<200){
if(mouseX > 200 || mouseY<200){
These are called “pipes”
The pipe character
Using the Boolean Variable
if(mouseX > 200 && mouseY<200){
let myBoolean = true;
if(myBoolean){//this will execute}
What if this is complicated?
Else Statements
This is true
Do this
Do this
This will ONLY happen if the condition is false.
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
if(mouseX > 200 && mouseY<200){
circle(mouseX,mouseY,40);
}
else{
circle(mouseX,mouseY,10);
}
}
Else if Statements
This is true
Do this
Do this
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
if(mouseX > 200 && mouseY<200){
circle(mouseX,mouseY,40);
}
else if(mouseX<50 ){
circle(mouseX,mouseY,10);
}
}
This is true
Else if Statements
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill('white');
if(mouseX > 200 && mouseY<200){
circle(mouseX,mouseY,40);
}
else if(mouseX<50 ){
circle(mouseX,mouseY,10);
}
else{fill('blue')
circle(mouseX,mouseY,20)}
}
Else if Statements
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill('white');
if(mouseX > 200 && mouseY<200){
circle(mouseX,mouseY,40);
}
else if(mouseX<50 ){
circle(mouseX,mouseY,10);
}
else{fill('blue')
circle(mouseX,mouseY,20)}
}
Else if Statements
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill('white');
if(mouseX > 200 && mouseY<200){
circle(mouseX,mouseY,40);
}
else if(mouseX<50 ){
circle(mouseX,mouseY,10);
}
else{fill('blue')
circle(mouseX,mouseY,20)}
}
Day 3 - Part 2 Review Video
Challenge Exercise
Make an app to get user entry and put it into a variable.