Creative Computing

Index of /

Week 7

Trial and error is part of learning. Be patient with the process, and patient with yourself.

vibes

This Week

Intro to JS

This week, we are focusing on conditional statements. Review Week 4 for a more in-depth example of how we can apply these to create patterns.

if
else if
else

In plain english, we often say things like this:

if this thing happens, do something. Otherwise if this other thing happens, do something else. If all else fails, go to the backup plan.

Using JavaScript syntax, that same statement might look like this:

if ( this == true ) { 
    do something 
} 

else if ( this other thing == true ) { 
    do something 
} 

else { 
    backup plan! 
}

The statement inside the parenthesis that we are evaluating to decide whether or not to proceed is called an operator. The W3Schools page on JavaScript operators has an overview of all the different types of JavaScript operators available. A quick summary follows here.

Comparison and Logical Operators

Some very basic examples of how you might use each operator. There are many other ways you can use JavaScript operators; this is just to get you started.

Equal To ==

var a = 6;
var b = 2;

// if a is equal to b ...
if ( a == b ) {
    // run this code
}

Since a=6 and b=2, a and b are not equal, thus the code does not run.

Not Equal To !=

var a = 6;
var b = 2;

// if a is NOT equal to b ...
if ( a != b ) {
    // run this code
}

Since a=6 and b=2, a and b are not equal, thus this code does run (success!).

Less Than <

var a = 6;
var b = 2;

// if a is less than to b ...
if ( a < b ) {
    // run this code
}

Since a=6 and b=2, a is not less than b, thus this code does not run.

Less Than or Equal To <=

var a = 6;
var b = 2;

// if a is less than or equal to b ...
if ( a <= b ) {
    // run this code
}

Since a=6 and b=2, a is not less than or equal to b, thus this code does not run.

Greater Than >

var a = 6;
var b = 2;

// if a is greater than b ...
if ( a > b ) {
    // run this code
}

Since a=6 and b=2, a is greater than b, thus this code does run (success!).

Greater Than or Equal To >=

var a = 2;
var b = 2;

// if a is greater than or equal to b ...
if ( a >= b ) {
    // run this code
}

Since a=2 and b=2, a is not greater than b, but it is equal to b. Thus this code does run (success!).

Mathematical Operators

Some very basic examples of how you might use each operator. There are many other ways you can use JavaScript operators; this is just to get you started.

Modulus (Remainder) %

var a = 6;
var b = 2;

// if the remainder of a divided by b is 0 ...
if ( a % b == 0 ) {
    // run this code
}

Since a=6 and b=2, the remainder is 0: 2 fits into 6 exactly 3 times. Thus this code does run (success!).

Division /

var a = 6;
var b = 2;
var c = 3;

// if a divided by b is equal to c ...
if ( a / b == c ) {
    // run this code
}

Since a=6, b=2 and c=3: a divided by b does equal c. Thus this code does run (success!).

You can also use / to assign variables or create new numbers:

var c = a / b;

Multiplication *

var a = 6;
var b = 2;
var c = 3;

// if a times b is equal to c ...
if ( a * b == c ) {
    // run this code
}

Since a=6, b=2 and c=3: a × b = 12, thus this code does not run.

// if a times b is equal to c ...
if ( a == b * c ) {
    // run this code
}

Since a=6, b=2 and c=3: b × c = 6, thus this code does run (success!).

Addition + and Subtraction -

var a = 6;
var b = 2;

var c = a + b;

Now c equals 8. Or ...

var c = a - b;

Now c equals 4.

Assignment

DUE WEEK 8

Reading: Javascript for Cats

Repeatable unit (Part 02): Design a program that creates a pattern you find interesting and beautiful. Now that we are finished with the CSS portion of this assignment, we're turning to JavaScript to focus on the "program" part. To get started, copy your CSS from Part 01 into the template from class.

Requirements

In addition to the requirements outlined under Week 05:

  • Create a unique function that adds your unit to the document.
  • Within this function, use conditional statements to add different class names to your unit to form a pattern.
  • Use a loop + your function to repeat your unit 16 times.

JavaScript Resources

www.w3schools.com/js/js_comparisons.asp ⟵ Comparison & Logical Operators
jsforcats.com ⟵ So easy, your cat can do it!