Month 1, Week 3

The Art of Instruction: An Introduction to Programming

Today, we stop being users of technology and start becoming its creators.

Module 1

The Language of Logic

What, Really, IS Programming?

Imagine you have a house help who is:

• Incredibly fast and perfectly obedient.
• Completely, utterly dumb. Zero common sense.

Programming is the art of writing perfect, unambiguous instructions for our dumb but fast house help: the computer.

The Problem with Human Language

Consider the sentence:

"I saw the man on the hill with a telescope."

• Did you use a telescope to see the man?
• Did the man on the hill have a telescope?
• Is the hill itself topped with a telescope?

A computer cannot guess. It needs a language where every word and symbol has one, and only one, meaning.

High-Level vs. Low-Level Languages

• Low-Level (Machine Code): The computer's native tongue (1s and 0s). Incredibly difficult for humans.
• High-Level (JavaScript, Python): Designed to be readable by humans, using words like if, for, and function.

We need a special program called an Interpreter to translate our high-level JavaScript into low-level machine code the computer can execute.

Module 2

Our Programming Environments

Where Does JavaScript Live?

1. The Browser Developer Console (Our instant scratchpad)
2. A .js File via Node.js (Our server-side home)
3. A <script> Tag in an HTML File (The traditional web context)

The Universal Greeting: console.log()

In programming, the first thing you learn is how to make the computer display a message.

                        console.log('Hello, World!');
                    

• console An object representing the developer console.
• .log(): An action (a function) that prints whatever you put inside the parentheses.

Environment 1: The Browser Console

The fastest way to get feedback.

1. Open Chrome/Firefox.
2. Open Developer Tools (Ctrl+Shift+I or Cmd+Option+I).
3. Click the "Console" tab.
4. Type your code and press Enter.

                        > console.log('Hello from the browser console!');
                    

Environment 2: Node.js

This is how we'll run most of our code.

1. Open your terminal and create a file: touch app.js
2. Open app.js in VS Code.
3. Write the code:
   console.log('Hello from a Node.js file!');
4. Save the file.
5. Go back to the terminal and execute the file:

                        $ node app.js
                        Hello from a Node.js file!
                    

Module 3

The Atoms of Information: Values & Data Types

Primitive Data Types

The most basic, indivisible pieces of data. The fundamental building blocks, like atoms.

• Number (for math)
• String (for text)
• Boolean (for truth)
• undefined (accidental emptiness)
• null (intentional emptiness)

Data Type: Number

• Purpose: For all mathematical operations.
• Represents: Integers, decimals, positive, and negative numbers.

                        10
                        -55
                        3.14159
                        // Try this in the console:
                        100 + 50 * 2 // result is 200
                    

Data Type: String

• Purpose: For representing text.
• How to create: Wrap text in quotes.

                        'Hello' // Single quotes
                        "World" // Double quotes
                        `This is special!` // Backticks (Template Literals)

                        // Concatenation (joining strings)
                        'Hello' + ' ' + 'World' // results in 'Hello World'
                    

Data Type: Boolean

• Purpose: For representing logic and truth.
• The Only Two Values: true and false.
• Crucial Note: These are special keywords, not strings. true is very different from 'true'.

Booleans are the foundation of decision-making in code.

The "Empty" Types: undefined vs. null

Both represent emptiness, but in different ways.

• undefined
  • Meaning: "A value has not been assigned." It's the default state, an accidental emptiness.
• null
  • Meaning: "There is no value here, and this is intentional." It's a value you, the programmer, explicitly assign.

Module 4

Storing Information: Variables

The "Labeled Jars" Analogy

Variables are named containers for storing data values. They are the labeled jars in our programming kitchen, bringing order to the chaos of raw data.

Declaration & Assignment

Working with variables is a two-step process:

1. Declaration: Creating the jar and giving it a label.

                            let myAge; // Jar "myAge" is created. It's empty (undefined).
                        

2. Assignment: Putting a value into the jar with the = operator.

                            myAge = 30; // The number 30 is now in the "myAge" jar.
                        

You can also do both at once (initialization):

                        let myName = 'The Architect';
                    

The Keywords: let, const, and var

• let: The standard. Use for variables whose value can change.

  
                                  let score = 0;
                                  score = 100; // Allowed
                              

• const: The safeguard. Use for variables whose value will not change.

  
                                  const birthYear = 1990;
                                  // birthYear = 1991; // ERROR!
                              

• var: The old way. Has confusing behavior. We will not use it.

Best Practice: Use const by default. Only use let when you know you'll need to re-assign the value.

Modules 5 & 6

Making Decisions: Operators & Control Flow

Asking Questions: Comparison Operators

These operators compare two values and always result in a boolean (true or false).

• === : Strict equality (Are the value AND type the same?)
• !== : Strict inequality
• > : Greater than
• < : Less than
• >= : Greater than or equal to
• <= : Less than or equal to

Golden Rule: Always use strict equality (===). Avoid loose equality (==) which can have confusing behavior (e.g., 77 == '77' is true!).

Combining Questions: Logical Operators

• && (AND): Is the condition on the left AND the condition on the right true? (Both must be true)
• || (OR): Is the condition on the left OR the condition on the right true? (At least one must be true)
• ! (NOT): Flips a boolean value. !true becomes false.

Making Decisions: if / else

This is the heart of programming. It allows our "butler" to take different paths based on the answers to our questions.

                        const age = 20;

                        if (age >= 18) {
                            console.log('You are eligible to vote.');
                        } else {
                            console.log('You are not yet eligible to vote.');
                        }
                    

Handling Multiple Paths: if, else if, else

                        const score = 85;

                        if (score >= 90) {
                            console.log('You get an A!');
                        } else if (score >= 80) {
                            console.log('You get a B!');
                        } else if (score >= 70) {
                            console.log('You get a C.');
                        } else {
                            console.log('You need to study more.');
                        }
                

Module 7

The First Creation: In-Class Exercise

Let's apply everything we've learned to build an interactive story.