JavaScript Foundations Lab

Welcome to the JavaScript Foundations Lab! This comprehensive lab takes you from setting up your development environment to building interactive webpages with JavaScript.

🎯 Overview

This lab introduces you to the fundamentals of JavaScript programming, covering both server-side (Node.js) and client-side (browser) development. You'll learn to work with JavaScript's core concepts while building practical, real-world projects.

📚 What You'll Learn

By the end of this lab, you will:

• Understand your JavaScript development environment (Node.js, npm, VS Code)
• Write and run JavaScript programs on your computer
• Master JavaScript's core data types and operators
• Use the browser console for development and debugging
• Build interactive webpages with JavaScript
• Understand how JavaScript works in different environments

🏗️ Lab Structure

This lab consists of four interconnected parts, designed to be completed in sequence:

Part 1: Setting Up Your JavaScript Development Environment

Time: 1 hour

• Understand the tools that power JavaScript development
• Set up your workspace with proper organization
• Learn about terminals, shells, and development workflow
• Connect the tools you've been using to their underlying purpose

Part 2: Introduction to JavaScript Scripting

Time: 1.5 hours

• Explore JavaScript interactively with the Node.js REPL
• Write your first real JavaScript programs
• Build a fictional character profile generator
• Create a smart calculator with conditional logic
• Understand how Node.js runs JavaScript on your computer

Part 3: JavaScript Data Types and Operators

Time: 1.5 hours

• Master JavaScript's core data types (numbers, strings, booleans)
• Learn essential operators for manipulation and comparison
• Preview more powerful data structures (arrays, functions, objects)
• Debug common type-related errors through hands-on exercises
• Prepare for future learning with TypeScript concepts

Part 4: JavaScript Console - Your Browser's Programming Environment

Time: 1.5 hours

• Use the browser console as a JavaScript playground
• Manipulate webpages live using JavaScript
• Build an interactive character creator webpage
• Understand the connection between webpage JavaScript and console
• Master the browser development workflow

🚀 Getting Started

1. Fork this repository to your GitHub account
2. Clone your fork to your local machine in ~/development/labs/ (or your preferred directory) using:

   git clone <your-fork-url>

3. Start with Part 1 and work through each section in order
4. Complete all activities and save your work in the appropriate files
5. Test everything to make sure it works as expected. Remember to run npm test in every part's activity.

📁 Expected File Structure

After completing all parts, your lab folder should contain:

w2_js_foundations/
├── README.md                    # This overview file
├── lab/
│   ├── README.md               # Lab-specific instructions
│   ├── 01_environment_setup.md # Environment setup guide
│   ├── 02_js_scripting.md      # JavaScript scripting tutorial
│   ├── 03_data_types_operators.md # Data types and operators lesson
│   └── 04_js_console.md        # Browser console guide
├── character-profile.js        # From Part 2
├── smart-calculator.js         # From Part 2
├── type-confusion-bugs.js      # From Part 3 (with your fixes)
└── character-creator.html      # From Part 4

📝 Submitting Your Work

After completing all four parts:

1. Check your work: Make sure all files are saved and programs run correctly
2. Add files to git: git add . (Make sure you're in the correct lab directory -- for example ~/development/labs/w2_js_foundations/)
3. Commit your changes: git commit -m "Complete JavaScript Foundations lab"
4. Push to GitHub: git push origin main

---

Ready to begin? Start with Part 1: Environment Setup