1. What is JavaScript?

JavaScript is a programming language that allows you to implement complex features on web pages like interactivity, form validation, animations, and more.

2. Including JavaScript

• Inline: <button onclick="alert('Hello')">Click</button>
• Internal: Inside <script> tag in HTML
• External: Link to .js file using <script src="script.js"></script>

3. Variables

let x = 5;
const y = 10;
var z = x + y;

4. Data Types

• String
• Number
• Boolean
• Array
• Object
• Null, Undefined

let name = "Ali";
let age = 25;
let isStudent = true;

5. Operators

• Arithmetic: +, -, *, /, %
• Comparison: ==, ===, !=, >, <, >=, <=
• Logical: &&, ||, !

6. Conditional Statements

if (age >= 18) {
  alert("Adult");
} else {
  alert("Minor");
}

7. Loops

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

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

8. Functions

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

9. Arrays

let fruits = ["Mango", "Banana", "Apple"];
console.log(fruits[1]); // Banana

10. Objects

let person = {
  name: "Ali",
  age: 30,
  greet: function() {
    return "Hi " + this.name;
  }
};
console.log(person.greet());

11. DOM Manipulation

document.getElementById("demo").innerText = "Changed!";

<p id="demo">Original</p>

12. Events

<button onclick="sayHello()">Click Me</button>

function sayHello() {
  alert("Hello World!");
}

13. Alert, Prompt, Confirm

alert("Welcome");
let name = prompt("Enter your name:");
let confirmed = confirm("Are you sure?");

14. Practical Task

Create a form that asks for name and age. When submitted:

• Display name on the screen
• Show if user is minor or adult
• Use alerts to thank them

15. JavaScript Tips

• Use console.log() for debugging
• Always test on browser
• Try tasks on JSFiddle or CodePen
• Learn ES6 features (let, const, arrow functions, template literals)

1. What is JavaScript?

JavaScript is a programming language that allows you to implement complex features on web pages like interactivity, form validation, animations, and more.

16. JavaScript Practical Questions and Answers

Try answering and running these in your browser.

1. Display a greeting message in alert box.

   alert("Welcome to JavaScript!");

2. Print your name using console.log

   console.log("My name is Ali");

3. Create a function that adds two numbers

   function add(a, b) {
     return a + b;
   }
   console.log(add(5, 3));

4. Write a program to check if a number is even or odd

   let num = 7;
   if (num % 2 == 0) {
     console.log("Even");
   } else {
     console.log("Odd");
   }

5. Create an array of 3 fruits and print them

   let fruits = ["Mango", "Apple", "Banana"];
   console.log(fruits);

6. Loop to print numbers 1 to 5

   for (let i = 1; i <= 5; i++) {
     console.log(i);
   }

7. Check if a number is positive or negative

   let num = -3;
   if (num >= 0) {
     console.log("Positive");
   } else {
     console.log("Negative");
   }

8. Create a button that shows alert on click

   <button onclick="alert('Button clicked!')">Click Me</button>

9. Write a function to multiply 3 numbers

   function multiply(a, b, c) {
     return a * b * c;
   }

10. Create an object with name and age

    let person = {
      name: "Ali",
      age: 25
    };
    console.log(person.name);

11. Change HTML content using JavaScript

    <p id="text">Old Text</p>
    <script>
    document.getElementById("text").innerHTML = "New Text";
    </script>

12. Prompt user for age and show a message

    let age = prompt("Enter your age:");
    alert("You are " + age + " years old");

13. Create a program that adds 10 to user input

    let num = Number(prompt("Enter number:"));
    alert(num + 10);

14. Loop through an array

    let items = [1, 2, 3];
    for (let i = 0; i < items.length; i++) {
      console.log(items[i]);
    }

15. Make a function that converts Celsius to Fahrenheit

    function toF(celsius) {
      return (celsius * 9/5) + 32;
    }

16. Compare two numbers and print the larger

    let a = 4, b = 9;
    console.log(a > b ? a : b);

17. Use confirm box before deleting data

    if (confirm("Are you sure to delete?")) {
      alert("Deleted");
    } else {
      alert("Cancelled");
    }

18. Create a live clock with setInterval

    setInterval(() => {
      console.log(new Date().toLocaleTimeString());
    }, 1000);

19. Toggle class on element click

    <div id="box" onclick="this.classList.toggle('bg-primary')">Click Me</div>

20. Sum values of an array

    let nums = [1, 2, 3, 4];
    let sum = nums.reduce((acc, val) => acc + val, 0);
    console.log(sum);