Let's Get Set Up

Time to get our starter code!

Step 1: Fork the Repository

1. Go to the workshop repository on GitHub
2. Click the "Fork" button (top right)
3. This creates your own copy!

Already Have a Fork?

If you forked for a previous workshop, update it first:

1. Go to your fork on GitHub
2. Click Sync fork → Update branch
3. Then run git pull in your local folder

See the Setup Guide for details

Step 2: Clone to Your Computer

git clone https://github.com/YOUR-USERNAME/workshops.git
cd workshops/
					

Step 3: Open in VS Code

code .
					

This opens VS Code in the current folder

Step 4: Verify Node.js

Open the integrated terminal (View → Terminal)

node --version
					

You should see v18 or higher!

Step 5: Run Hello World

cd javascript-basics/starter-code
node hello.js
					

You should see a welcome message!

If it works, you're ready to code!

What is JavaScript?

JavaScript Runs Everywhere

• In web browsers (Chrome, Firefox, Safari)
• On servers (Node.js)
• In mobile apps
• Even in robots!

It's one of the most popular programming languages

What is Node.js?

Node.js lets us run JavaScript outside the browser

• In the terminal
• On servers
• To build tools and programs

Today we're using Node.js to keep things simple

Variables

Labeled boxes for storing information

Why Do We Need Variables?

To remember information and use it later!

• A player's name
• A score that changes
• User settings
• Story elements

Creating Variables

Two keywords: let and const

const studentName = "Scooby";
let snacks = 7;
					

• const - stays the same (constant)
• let - can change later

Naming Rules

• Start with a letter
• No spaces (use camelCase instead)
• Can't use special keywords (like let, const)
• Be descriptive!

// Good names
let playerName = "Sam";
let currentScore = 100;

// Bad names
let x = "Sam";  // What is x?
let name = "Sam";  // Which name?
let my name = "Sam";  // Has a space!
					

Data Types

Different kinds of information

Strings

Text wrapped in quotes

let greeting = "Hello, world!";
let name = "Scooby";
let story = 'Once upon a time...';
					

Use double quotes " " or single quotes ' '

Numbers

No quotes needed!

let age = 13;
let score = 100;
let pi = 3.14;
					

Can do math with numbers!

Booleans

True or false values

const isLearning = true;
const hasFinished = false;
const lovesJavaScript = true;
					

Great for yes/no questions!

Activity: Your First Variables

Open story.js and create variables about yourself:

let myName = "put your name here";
let myAge = 0;  // put your age
const isLearningJS = true;
					

Run it: node story.js

Console.log

Seeing what your program is doing

Why console.log?

• Displays information in the terminal
• Shows you what variables contain
• Helps you debug (find mistakes)
• Your programming superpower!

Using console.log

let name = "Alex";
console.log(name);
					

Output:

Alex
					

Logging Different Things

console.log("Hello!");
console.log(42);
console.log(true);
					

Output:

Hello!
42
true
					

String Concatenation

Joining strings together

The + Operator

Combines strings (and numbers)

let firstName = "Alex";
let lastName = "Smith";
console.log(firstName + " " + lastName);
					

Output:

Alex Smith
					

Don't forget the space!

Mixing Variables and Text

let name = "Alex";
let age = 13;
console.log("My name is " + name);
console.log("I am " + age + " years old");
					

Output:

My name is Alex
I am 13 years old
					

Common Mistake: Missing Spaces

// Without space
console.log("Hello" + name + "!");

// With space
console.log("Hello " + name + "!");
					

Always check your spacing!

Activity: Build Messages

Add to your story.js:

console.log("Hello, my name is " + myName);
console.log("I am " + myAge + " years old");
console.log("Am I learning JavaScript? " + isLearningJS);
					

Run it: node story.js

🎉 Break Time! 🎉

Stretch, move around, grab some water

Back in 10 minutes!

Would you rather...

• Have a computer that never crashes, or one that never needs updates?
• Be able to teleport anywhere, or be able to time travel?
• Be better at debugging, or better at design/ideas?

Your Mission

Create a dynamic story using variables!

The Goal

• Create story variables (characters, places, objects)
• Use console.log to tell your story
• Combine variables with text
• Make it creative and personal!

Example Story

const hero = "Captain Code";
let location = "Digital Forest";
let treasure = 0;

console.log(hero + " entered the " + location);
treasure = treasure + 5;
console.log("Found " + treasure + " gems!");
					

Your Template

Open story.js - it has TODO comments to guide you!

Build your story step by step:

1. Add variables
2. Create opening
3. Develop the story
4. Build the climax
5. Write the ending

Hands-On: Build Your Story!

Getting Help

• Run it frequently with small changes: node story.js
• Read the error messages - they're helpful!
• Check for missing quotes
• Check for missing + signs
• Ask an instructor
• Help your neighbor

Everyone makes mistakes - that's how we learn!

If you are finished early

• See if you can help a neighbor
• Add math to track scores
• Create multiple chapters
• Use let to change values
• Add more variables
• Make your story longer!

Remember

Your story is unique!

There's no "right" story - be creative!

The goal is to practice variables and console.log

Save Your Work

Let's commit to Git!

Git Commands

git add .
git commit -m "Complete dynamic story"
git push
					

Now your work is saved on GitHub!

Show & Tell

Who wants to share their story?

Wrap-Up

What We Learned

• JavaScript runs everywhere
• Variables store information
• let vs const
• Data types: strings, numbers, booleans
• console.log displays output
• String concatenation with +
• Running code with Node.js

Reflection

What surprised you about JavaScript?

What would you add to your story with more time?

Coming Up Next

Interactive HTML + JavaScript

Your code will respond to real button clicks!

Variables will store user input!

Keep Practicing

• Create more stories
• Experiment with variables
• Try the Node REPL: type node
• Check out the Next Steps guide