SitesByYogi text logo
Contact
JavaScript Foundations • StreetGeek Academy

🧠 MODULE 1: Introduction to JavaScript & Setup

Understand what JavaScript is, where it runs, how to connect it to your HTML pages, and how to use the browser console for debugging and experimentation.

1) What Is JavaScript?

JavaScript (JS) is the behavior layer of the web. It adds interactivity, logic, and dynamic changes to HTML and CSS.

LayerLanguagePurpose
StructureHTMLDefines content
StyleCSSDefines appearance
BehaviorJavaScriptDefines interaction
Examples of what JS can do
  • Toggle menus, modals, and tabs
  • Validate contact forms
  • Animate or change elements dynamically
  • Fetch live data (APIs)
  • Save preferences (e.g., dark mode, language)
💡 JS runs in the browser — no server setup required.

2) Setting Up Your Environment

Use the same portfolio project folder from your HTML & CSS course.

portfolio-site/
├── index.html
├── about.html
├── projects.html
├── contact.html
├── css/
│   └── style.css
└── js/
    └── app.js
If there’s no /js folder yet, create one.

3) Linking JavaScript to Your Webpage

Open index.html and link your JavaScript file before the closing </body> tag:

<script src="js/app.js" defer></script>
</body>
</html>
Why defer?
  • Loads the HTML first, then runs JS.
  • Prevents “undefined” errors when elements aren’t ready.
✅ Best practice: Always use defer for external scripts.

4) Writing Your First JavaScript

In js/app.js, type this:

// app.js
console.log("Hello, StreetGeek!");
document.title = "StreetGeek Portfolio | JavaScript Active";

Open your page → press F12 → Console tab — you’ll see your message logged.

5) The Role of the Console

The browser console is your developer command line.

console.log("I love JavaScript!");
console.warn("This is a warning!");
console.error("Oops, an error happened!");
💡 The console is your best friend for testing and debugging.

6) The Anatomy of a Script

Basic building blocks:

// Single-line comment
/* Multi-line
   comment */
let user = "Yogi";
console.log(`Welcome, ${user}!`);
  • Statements: Each line that performs an action.
  • Comments: Notes ignored by the computer.
  • Case-sensitive: User ≠ user.
  • Semicolons: Optional—be consistent.

7) How the Browser Executes JavaScript

  1. Browser reads the HTML.
  2. Encounters your <script> tag.
  3. Loads the JS file (and defers execution until HTML is parsed).
  4. Runs JS line-by-line, top to bottom.
✅ Execution stops on syntax errors — check the console for the exact line and message.

8) Hands-On Practice

Exercise 1: Add a Welcome Message

// app.js
let name = "Yogi";
console.log(`Welcome to StreetGeek, ${name}!`);

Now, change the text content of an element dynamically.

<h1 id="hero-title">Welcome!</h1>
const heroTitle = document.getElementById("hero-title");
heroTitle.textContent = "Welcome to My Interactive Portfolio 👋";
✅ You’ve now changed page content using JavaScript!

Exercise 2: Display Current Year in Footer

<footer>
  <p>© <span id="year"></span> StreetGeek Academy</p>
</footer>
const yearSpan = document.getElementById("year");
yearSpan.textContent = new Date().getFullYear();
💡 Great habit — your footer auto-updates every year.

9) Quiz Time

Show/Hide Questions

1) What attribute should you use on your <script> tag to ensure it runs after the HTML loads?

2) Which console method displays errors?

3) What’s the difference between HTML, CSS, and JavaScript in a website?

4) Why is document.getElementById() useful?

5) What will this output in the console?

let city = "Richmond";
console.log(`I live in ${city}.`);

🚀 Challenge Task: Dynamic Greeting

<p id="greeting"></p>
const greeting = document.getElementById("greeting");
const hour = new Date().getHours();

if (hour < 12) {
  greeting.textContent = "Good morning ☀️, welcome to StreetGeek!";
} else if (hour < 18) {
  greeting.textContent = "Good afternoon 🌤️, keep coding!";
} else {
  greeting.textContent = "Good evening 🌙, time to build something great!";
}

Refresh — your greeting changes automatically based on the time of day.

🏁 Module 1 Summary

  • What JavaScript is and how it runs
  • How to connect JS files with HTML
  • How to use the browser console
  • How to manipulate content dynamically
  • How to write your first simple script

Next up → MODULE 2: Variables, Data Types & Operators