# Week 7

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

## This Week

- Review CSS patterns
- Intro to JS (in-class demo)
- Comparison and Logical Operators
- Mathematical Operators
- Assignment 03: Part II (JavaScript)

## 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 thinghappens, do something. Otherwise ifthis other thinghappens, 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!