Starting New Course Javascript Module 1

  Module 1 : 📘Introduction to JavaScript

🎯 what JavaScript is and its role in web development.

Learn basic JavaScript syntax and structure.

Write and execute basic JavaScript code.

Apply JavaScript for interactivity in web pages.

Complete  details and method to reinforce theoretical understanding.

🧠 1. What is JavaScript?

JavaScript is a scripting language used to create dynamic and interactive web content like sliders, pop-ups, form validations, animations, and more. It runs in the browser and can interact with HTML and CSS to enhance user experience.

✨ Key Features:

Interpreted Language

Event-driven

Client-side and server-side (with Node.js)

Object-Oriented

 2. JavaScript Syntax and Structure

Here’s a simple breakdown of JavaScript syntax:

✅ Variables

javascript

 code

let name = "Alice"; const age = 25; var city = "New York";

let and const are block-scoped.

var is function-scoped (older version).

✅ Data Types

javascript

code

let number = 100; // Number let name = "John"; // String let isAvailable = true; // Boolean let car = null; // Null let user; // Undefined

✅ Operators

javascript

code

let sum = 5 + 10; // Addition let isEqual = 5 == "5"; // true (loose equality) let isStrict = 5 === "5"; // false (strict equality)

✅ Control Flow

javascript

 code

if (age > 18) { console.log("Adult"); } else { console.log("Minor"); }

✅ Loops

javascript code

for (let i = 0; i < 5; i++) { console.log("Number: " + i); }

✅ Functions

javascript code

function greet(name) { return "Hello, " + name + "!"; } console.log(greet("Sam"));

🛠️ 3.  Methods with Examples

 Example 1: Change Text on Button Click

HTML

html

code

<button onclick="changeText()">Click Me</button> <p id="demo">Hello World!</p>

JavaScript

javascript

 code

function changeText() { document.getElementById("demo").innerHTML = "You clicked the button!"; }

✅ Explanation:

This script changes the paragraph text when the button is clicked using DOM manipulation.

 Example 2: Validate a Form Field

html

 code

<form onsubmit="return validateForm()"> <input type="text" id="username" placeholder="Enter username"> <input type="submit" value="Submit"> </form> <p id="error"></p>

javascript

code

function validateForm() { let username = document.getElementById("username").value; if (username === "") { document.getElementById("error").innerHTML = "Username is required"; return false; } return true; }

✅ Explanation:

Prevents form submission if the username is empty.

🎯 4. Exercises with Explanations

🔁 Exercise 1: Create a Simple Calculator

Task: Create a calculator that adds two numbers entered by the user.

HTML

html code

<input type="number" id="num1" placeholder="Number 1"> <input type="number" id="num2" placeholder="Number 2"> <button onclick="addNumbers()">Add</button> <p id="result"></p>

JavaScript

javascript

 code

function addNumbers() { let a = parseFloat(document.getElementById("num1").value); let b = parseFloat(document.getElementById("num2").value); let sum = a + b; document.getElementById("result").innerHTML = "Sum is: " + sum; }

✅ Explanation:

Grabs values from the input fields, converts them to numbers, and displays their sum.

🔁 Exercise 2: Check Even or Odd

html

 code

<input type="number" id="number" placeholder="Enter a number"> <button onclick="checkEvenOdd()">Check</button> <p id="output"></p>

javascript

code

function checkEvenOdd() { let num = document.getElementById("number").value; if (num % 2 === 0) { document.getElementById("output").innerHTML = "Even Number"; } else { document.getElementById("output").innerHTML = "Odd Number"; } }

🧪 5. Creating an Interactive Quiz

🎯 Objective:

To build a simple interactive quiz that checks user input and provides feedback.

✅ Tools:

HTML for structure

JavaScript for logic

HTML

html

 code

<h3>What is the capital of France?</h3> <input type="text" id="answer"> <button onclick="checkAnswer()">Submit</button> <p id="feedback"></p>

JavaScript

javascript

 code

function checkAnswer() { let userAnswer = document.getElementById("answer").value.toLowerCase(); if (userAnswer === "paris") { document.getElementById("feedback").innerHTML = "Correct!"; } else { document.getElementById("feedback").innerHTML = "Wrong! Try again."; } }

✅ Explanation:

This use basic input handling, string comparison, conditionals, and DOM manipulation to simulate a quiz experience.

📌 Summary

JavaScript adds interactivity to websites.

You learned variables, functions, conditionals, and events.

Practical use cases included DOM manipulation and form validation.

 work allows to apply skills in a scenario.

📋 Homework

Create a page with 3 quiz questions.

Use JavaScript to check the answers and show the score.

Use styling (CSS) to make it visually appealing.