JavaScript Basics

Welcome to the final lesson of the Web Basics track! You have come a long way. In Lesson 5 you got your first taste of JavaScript — variables, data types, and printing messages to the console. Now it is time to level up. In this lesson you will learn how to write functions, make decisions with conditionals, and — most exciting of all — use JavaScript to actually change what appears on your web page. By the end, you will build a small interactive project that brings together everything you have learned across all six lessons. Let's go!

1. Functions: Reusable Blocks of Code

Imagine you work at a coffee shop in Lansing and every time a customer walks in, you say "Welcome to the shop!" You do not re-learn how to say that greeting each time — you just do it automatically. A function in JavaScript works the same way. It is a named block of code that you write once and can use over and over again.

Here is how you create a function:

function greet(name) {
  return "Hello, " + name + "!";
}

Let's break that down:

• function — This keyword tells JavaScript you are creating a function.
• greet — This is the name of the function. You choose the name.
• (name) — This is a parameter. It is like a placeholder. When you call the function, you pass in an actual value that takes the parameter's place.
• return — This sends a value back to wherever the function was called. Think of it as the function's answer.

To call (use) the function, you write its name followed by parentheses with the value you want to pass in:

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Lansing"));
console.log(greet("Maria"));
console.log(greet("Coders Farm"));

Functions can have multiple parameters too. Here is a function that adds two numbers together:

function add(a, b) {
  return a + b;
}

console.log(add(5, 3));
console.log(add(100, 250));

Arrow Functions (A Shortcut)

JavaScript also has a shorter way to write functions called arrow functions. They do the same thing but use less code. Here is the greet function written as an arrow function:

const greet = (name) => "Hello, " + name + "!";

The => symbol (called an "arrow") replaces the function keyword. For short, simple functions this is very convenient. You will see arrow functions everywhere in modern JavaScript. For now, just know they exist — you can stick with regular functions while you are learning.

2. Conditionals: Making Decisions

So far, our code runs every line from top to bottom. But what if you want your code to make a choice? That is what conditionals are for. They let you say: "If this condition is true, do one thing. Otherwise, do something else."

The basic pattern looks like this:

if (condition) {
  // do this if the condition is true
} else {
  // do this if the condition is false
}

You can also chain multiple conditions with else if:

if (temperature > 90) {
  console.log("It is hot outside!");
} else if (temperature > 60) {
  console.log("Nice weather today.");
} else {
  console.log("Better grab a jacket!");
}

Comparison Operators

Inside the parentheses of an if statement, you use comparison operators to compare values:

• === — equals (strict equality — checks both value and type)
• !== — not equals
• > — greater than
• < — less than
• >= — greater than or equal to
• <= — less than or equal to

Logical Operators

You can combine conditions using logical operators:

• && — AND (both conditions must be true)
• || — OR (at least one condition must be true)
• ! — NOT (flips true to false and false to true)

function canVote(age) {
  if (age >= 18) {
    return "Yes, you can vote!";
  } else {
    return "Not yet — you need to be 18.";
  }
}

console.log(canVote(21));
console.log(canVote(15));
console.log(canVote(18));

3. The DOM: Connecting JavaScript to HTML

Here is where things get really exciting. So far, we have been using console.log to see our output. But JavaScript can do much more than print messages to a hidden console. It can actually reach into your web page and change it.

How? Through something called the DOM, which stands for Document Object Model.

When your browser loads an HTML page, it does not just display the text. It reads through all of your HTML and builds a tree of objects — a structured representation of every element on the page. That tree is the DOM. Every heading, paragraph, button, image, and link becomes an object in the tree that JavaScript can find, read, and change.

Think of it like this: your HTML file is like the blueprint of a house. The DOM is the actual house that the browser builds from that blueprint. JavaScript is the homeowner who can walk through the house, rearrange the furniture, repaint the walls, and add new rooms.

4. Selecting Elements with document.querySelector

Before you can change something on the page, you need to find it. The most common way to select an element is with document.querySelector(). This method takes a CSS selector (just like the ones you learned in Lesson 4!) and returns the first matching element.

// Select by tag name
document.querySelector("h1");

// Select by class name (use a dot, just like CSS)
document.querySelector(".my-class");

// Select by ID (use a hash, just like CSS)
document.querySelector("#my-id");

Notice something familiar? The selectors are exactly the same as what you used in CSS. Your CSS knowledge is already paying off!

There is also document.getElementById(), which is a shortcut for selecting by ID:

// These two do the same thing:
document.querySelector("#my-id");
document.getElementById("my-id");

5. Changing Content on the Page

Once you have selected an element, you can change it. Here are the three most important properties for changing what appears on the page:

• .textContent — Changes the text inside an element. This is the safest option for plain text.
• .innerHTML — Changes the HTML inside an element. Use this when you want to insert tags like <strong> or <em>.
• .style — Changes the CSS styles of an element directly. For example, element.style.color = "red"; changes the text color to red.

<h1 id="demo-heading">I am the original heading.</h1>
<p id="demo-text">I am the original paragraph.</p>

<script>
// Change the text of the heading
document.getElementById("demo-heading").textContent = "I was changed by JavaScript!";

// Change the HTML inside the paragraph
document.getElementById("demo-text").innerHTML = "Now I have <strong>bold text</strong> and <em>italic text</em>!";

// Change the style of the heading
document.getElementById("demo-heading").style.color = "#16825d";
document.getElementById("demo-heading").style.fontSize = "28px";
</script>

6. addEventListener: Responding to User Actions

Changing elements when the page loads is useful, but the real magic happens when you respond to what the user does. When someone clicks a button, presses a key, or moves their mouse, the browser creates an event. You can use addEventListener to tell JavaScript: "When this event happens on this element, run this function."

Here is the basic pattern:

element.addEventListener("click", function() {
  // code to run when the element is clicked
});

The first argument is the event type (like "click", "keydown", or "mouseover"). The second argument is a function that runs when that event happens. This is how every interactive website works — from social media "like" buttons to shopping cart "add to cart" buttons.

<h2 id="message">Click the button below!</h2>
<button id="myBtn" style="padding: 10px 24px; font-size: 16px; cursor: pointer;">Click Me</button>

<script>
var clickCount = 0;

document.getElementById("myBtn").addEventListener("click", function() {
  clickCount = clickCount + 1;
  document.getElementById("message").textContent = "You clicked " + clickCount + " time(s)!";
});
</script>

7. Interactive Exercise: Make a Button That Changes Text

This is the capstone exercise for the entire Web Basics track! You are going to combine HTML, CSS, and JavaScript into one interactive project. The goal: create a page with a heading and a button. When the user clicks the button, the heading's text and color change.

This exercise brings together everything you have learned across all six lessons:

• HTML (Lessons 1-2) — the structure of the heading and button
• CSS (Lessons 3-4) — the styling and layout
• JavaScript (Lessons 5-6) — the interactivity and logic

<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 40px;
    background-color: #f9f9f9;
  }
  #main-heading {
    font-size: 32px;
    color: #333;
    transition: all 0.3s ease;
  }
  .action-btn {
    padding: 12px 32px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    background-color: #16825d;
    color: white;
    cursor: pointer;
    margin: 8px;
  }
  .action-btn:hover {
    background-color: #12694b;
  }
  #click-counter {
    margin-top: 16px;
    font-size: 14px;
    color: #777;
  }
</style>

<h1 id="main-heading">Welcome to Coders Farm!</h1>
<button class="action-btn" id="change-btn">Change the Heading</button>
<button class="action-btn" id="reset-btn">Reset</button>
<p id="click-counter">Clicks: 0</p>

<script>
var clicks = 0;
var heading = document.getElementById("main-heading");
var changeBtn = document.getElementById("change-btn");
var resetBtn = document.getElementById("reset-btn");
var counter = document.getElementById("click-counter");

var messages = [
  "You are a coder now!",
  "JavaScript is awesome!",
  "Keep building cool things!",
  "Lansing's newest developer!",
  "HTML + CSS + JS = Magic!"
];

var colors = ["#e74c3c", "#3498db", "#9b59b6", "#e67e22", "#16825d"];

changeBtn.addEventListener("click", function() {
  clicks = clicks + 1;
  var index = (clicks - 1) % messages.length;
  heading.textContent = messages[index];
  heading.style.color = colors[index];
  counter.textContent = "Clicks: " + clicks;
});

resetBtn.addEventListener("click", function() {
  heading.textContent = "Welcome to Coders Farm!";
  heading.style.color = "#333";
  clicks = 0;
  counter.textContent = "Clicks: 0";
});
</script>

8. Course Wrap-Up: You Did It!

Take a moment to feel proud of yourself. You have just completed the entire Web Basics track at Coders Farm! When you started Lesson 1, you may have never written a single line of code. Now look at what you know:

• Lesson 1 — Intro to HTML: You learned that HTML is the structure of every web page. You wrote your first tags, created headings, paragraphs, and links.
• Lesson 2 — HTML Elements: You went deeper into HTML with lists, images, tables, forms, and semantic elements that give your pages meaning.
• Lesson 3 — Intro to CSS: You discovered how CSS controls the visual appearance of your pages — colors, fonts, sizes, and backgrounds.
• Lesson 4 — CSS Selectors & Layout: You mastered targeting specific elements with selectors, understood the box model, and used Flexbox to create professional layouts.
• Lesson 5 — Intro to JavaScript: You took your first steps with JavaScript — variables, data types, strings, numbers, and the console.
• Lesson 6 — JavaScript Basics (this lesson!): You learned functions, conditionals, the DOM, and how to make truly interactive web pages.

That is a real skill set. HTML, CSS, and JavaScript are the three core technologies that power every website on the internet — from simple personal blogs to massive platforms like Google, YouTube, and Amazon. You now understand the fundamentals of all three.

What Comes Next?

This is just the beginning of your coding journey. Here are some ideas to keep growing:

• Practice, practice, practice. The best way to get better at coding is to build things. Try creating a personal website, a to-do list app, or a simple calculator.
• View source on websites you like. Right-click any web page and choose "View Page Source" or "Inspect" to see the HTML, CSS, and JavaScript behind it. You will recognize so much of what you see now!
• Stay connected with Coders Farm. Come to our meetups, ask questions, and help others who are just starting out. Teaching is one of the best ways to learn.
• Coming soon: Java & Spring Boot track! If you want to learn how to build powerful back-end applications and APIs, our Java & Spring Boot track is on the way. Stay tuned!

Remember: every expert was once a beginner. You have already taken the hardest step — starting. Keep going, keep building, and keep being curious. The Lansing coding community is cheering for you!

Test Your Knowledge

Wonderful work finishing the final lesson and the entire Web Basics track! You now have a real foundation in web development. Save your projects, share them with friends, and keep coding. We cannot wait to see what you build next!