JavaScript Basics Data Types | Lecture 31

Let’s begin with Lecture 31 of the HTML5 & CSS3 series. JavaScript Basics – Variables, Data Types & Conditionals. This lecture is for absolute beginners; even kids can follow along and understand.

🎯 Objective:

By the end of this lecture, you will:

• Understand what variables are and how to use them
• Know the basic data types in JavaScript (strings, numbers, booleans)
• Be able to use conditionals (if, else if, else) to make decisions
• Create simple logic that responds to user input or page state
• Practice with real examples like age checkers , password validators , and theme switchers

🧠 What Is JavaScript?

JavaScript is a programming language that runs in your browser.
It lets you make your website interactive — like showing messages, checking answers, or changing colors when someone clicks.

Think of it like this:

If HTML is the body and CSS is the clothes, then JavaScript is the brain that makes decisions and does things!

🔤 Variables – Store Information

Variables are like labeled boxes where you can store values.

Syntax:

let name = "Alex";
let age = 12;
let isStudent = true;

Use let or const to declare variables:

• Use let for values that might change
• Use const for values that won’t change

📦 JavaScript Data Types

🧮 Basic Operators

🧭 Conditionals – Make Decisions

Conditionals let your code make choices based on conditions.

Basic Syntax:

if (condition) {
    // Do something
} else if (another condition) {
    // Do something else
} else {
    // Default action
}

💻 Try This: Build a Simple Age Checker

Let’s create a script that checks if someone is old enough to play a game.

Step 1: Add HTML

In your portfolio.html or a new file named age-checker.html:

<h2>Age Checker</h2>
<label for="userAge">Enter your age:</label>
<input type="number" id="userAge">
<button onclick="checkAge()">Check Age</button>
<p id="ageResult"></p>

Step 2: Add JavaScript

Add this before </body> or in an external script:

<script>
    function checkAge() {
        let age = document.getElementById("userAge").value;

        if (age >= 18) {
            document.getElementById("ageResult").innerHTML = "You're old enough to play!";
        } else if (age > 0 && age < 18) {
            document.getElementById("ageResult").innerHTML = "Sorry, you're too young to play.";
        } else {
            document.getElementById("ageResult").innerHTML = "Please enter a valid age.";
        }
    }
</script>

🎉 Now users can enter their age and get a response instantly!

💡 Bonus: Password Validator

Let’s add another interactive example — a password checker.

Add HTML:

<h2>Password Validator</h2>
<label for="userPass">Enter password:</label>
<input type="password" id="userPass">
<button onclick="checkPassword()">Submit</button>
<p id="passResult"></p>

Add JavaScript:

<script>
    function checkPassword() {
        let password = document.getElementById("userPass").value;

        if (password === "secret") {
            document.getElementById("passResult").innerHTML = "✅ Access granted!";
        } else {
            document.getElementById("passResult").innerHTML = "❌ Wrong password!";
        }
    }
</script>

Now users can try typing in the correct password and see feedback instantly!

🧪 Try It Yourself!

1. Add a color guesser – ask users to guess a color and show success or error.
2. Create a simple calculator that adds two numbers from inputs and shows result.
3. Write a script that changes greeting based on time of day using Date() object.
4. Make a rock-paper-scissors game using prompt() and alert().

✅ Final Tips

🚀 Next Lecture Preview:

In Lecture 32 , we’ll learn about functions and events in JavaScript — so you can write reusable blocks of code and respond to actions like clicks, hovers, and form submissions!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series