Your First JavaScript Program

Let's write some JavaScript code! In this lesson, you'll create your first program and learn the fundamental building blocks.

Hello, World! 🌍

Every programmer's journey starts with "Hello, World!" - a simple program that displays a message.

What Just Happened?

• console.log() - A function that prints output to the console
• "Hello, World!" - A string (text) we want to display
• ; - Semicolon marks the end of a statement (optional in JS, but good practice)

The Console: Beyond log() 🖥️

The console is your primary debugging tool. While console.log is great, there are other powerful methods you should know.

Strict Mode: Coding Safely 🛡️

JavaScript is a very forgiving language, which can sometimes lead to bugs. Strict Mode makes it stricter and safer.

Always start your scripts (or functions) with "use strict";.

Comments 💬

Comments are notes in your code that JavaScript ignores. They help explain what your code does.

Basic Syntax Rules 📜

JavaScript has some basic rules you need to follow:

1. Case Sensitivity

2. Semicolons (ASI)

JavaScript has Automatic Semicolon Insertion (ASI), but relying on it can be dangerous.

Script Loading Strategies ⚡

When adding JavaScript to HTML, where you put the <script> tag matters for performance.

<!-- 1. Default (Blocks parsing) -->
<script src="app.js"></script>

<!-- 2. Async (Downloads in parallel, runs when ready) -->
<!-- Good for analytics, ads (independent scripts) -->
<script async src="analytics.js"></script>

<!-- 3. Defer (Downloads in parallel, runs after HTML parsing) -->
<!-- BEST PRACTICE for your main app code -->
<script defer src="app.js"></script>

Strings: Working with Text 📝

Strings are sequences of characters (text). You can create them with quotes:

Numbers and Math 🔢

JavaScript can do math! Let's explore numbers and basic operations.

Your First Interactive Program 🎮

Let's combine what we've learned to create something more interesting!

Common Syntax Errors 🚫

Learning to read errors is a superpower.

1. ReferenceError: Using a variable that doesn't exist.
   • console.log(x); // x is not defined
2. SyntaxError: Breaking the rules of the language.
   • const x = ; // Unexpected token ';'
3. TypeError: Doing something impossible with a type.
   • const num = 42; num.toUpperCase(); // num.toUpperCase is not a function

Coding Challenge: Personal Info Card 🎯

Create a program that displays your personal information in a formatted way using console.table.

Quiz

Key Takeaways

✅ console.table() and console.warn() are powerful debugging tools
✅ "use strict"; catches common mistakes early
✅ defer is the best way to load external scripts
✅ Template literals are superior to string concatenation
✅ ReferenceError means you're using a missing variable

What's Next?

Now that you can write basic JavaScript, let's learn about Variables - how to store and work with data!

Keep coding! 🚀