🚀 JavaScript Basics — Getting Started

Welcome! Today you’re taking your very first hands-on steps with JavaScript — the language that brings websites to life.

If a website had human anatomy:

• HTML = the bones
• CSS = the skin and clothes
• JavaScript = the muscles + brain 🧠

JavaScript gives your site logic, movement, and interactivity. In this lab, we’ll focus on the fundamentals: creating a JavaScript file, linking it to HTML, and making sure your code is actually running.

No pressure to be perfect — this is about practice, curiosity, and building confidence.

---

🎯 Learning Objectives

By the end of this activity, you should be able to:

• Understand what JavaScript is and why it matters
• Create a JavaScript file (script.js)
• Link that file to your HTML
• Use:
  • console.log() for developer messages
  • console.error() for debugging
  • alert() for user-facing messages
• Open and use the browser console
• Verify that your JavaScript is connected and working

Remember: every JavaScript project starts the same way:

Create a file → Link it → Test it

---

🧑‍💻 Practice: Create Your First JavaScript File

👉 If you get stuck at any point, start here: Did you create script.js and link it correctly?

Follow the steps below in order.

---

✅ Step 1: Create script.js

Inside your project, create a new file named: 'script.js'

Make sure the spelling matches exactly.

---

✅ Step 2: Link JavaScript to Your HTML

Open your HTML file and add this line right before the closing </body> tag:

<script src="script.js"></script>

✅ Step 3: Log Your First Message

Open script.js and add: console.log("Hello, World!");


Then:
Open your webpage in the browser
Right click → Inspect → Console

Confirm you see: Hello, World!
If you do, your JavaScript is officially working 🎉

✅ Step 4: Create an Error Message

Under your console.log, add: console.error("This is my first JavaScript error!");

Refresh the page and notice how this message appears differently in the console.
✅ Step 5: Use alert() to Show Names

Now let’s send messages directly to the browser.

Add alert statements for:

Yourself

Each member of your team
Example:

alert("Your Name");
alert("Teammate 1");
alert("Teammate 2");


Each alert should appear one at a time and require clicking OK.

Notice how alerts behave differently than console messages.

✨ Stretch (Optional)
Try logging the entire console object: console.log(console);

Take a moment to explore what shows up.

🧠 Reflection (Optional)
Take a minute to think about:
- What felt easy?
- What felt confusing?
- What surprised you about alerts vs console logs?
No need to submit — this is just for you.

✅ Key Takeaways

JavaScript lives in its own file: script.js
You must link JavaScript to HTML using a <script> tag
Always test your connection with console.log()
The browser console is one of your most important developer tools

These fundamentals are the foundation for all future JavaScript interactivity

JavaScript may feel very different from HTML and CSS — that’s totally normal. Nobody masters it instantly. Growth comes from practicing, debugging, and trying again.

You’ve officially started your JavaScript journey. Let’s go.