JavaScript

JavaScript is a high-level, interpreted, object-based scripting language used to make web pages
interactive and dynamic. It was developed by Brendan Eich in 1995 and is supported by all modern
web browsers.
JavaScript works mainly on the client side, but with technologies like [Link], it can also run on the
server side.

Features of JavaScript
1. Lightweight and fast – Executes quickly in the browser
2. Interpreted language – No need for compilation
3. Object-based – Uses objects for data handling
4. Event-driven – Responds to user actions
5. Platform-independent – Runs on any browser or OS
6. Case-sensitive – name and Name are different

Uses of JavaScript
 Form validation
 Creating dynamic web pages
 Handling user events (clicks, keyboard input)
 DOM manipulation
 Game development
 Web and mobile applications

JavaScript Variables
Variables are used to store data values.
EXAMPLE:
let name = "Rahul";
const age = 16;
Types of variable declarations:
 var – function-scoped
 let – block-scoped
 const – constant values

JavaScript Data Types

1. Number
2. String
 3. Boolean
4. Undefined
5. Null
6. Object
7. Array
Example:
let marks = 85;
let passed = true;

JavaScript Functions
Functions are reusable blocks of code that perform specific tasks.
EXAMPLE:
function add(a, b) {
return a + b;
}
Advantages:
 Code reusability
 Easy debugging
 Modular programming

JavaScript Events
Events are actions performed by users or the browser.
Examples:
 click
 mouseover
 keydown
 submit
[Link] = function() {
alert("Button clicked");
};
DOM Manipulation
DOM (Document Object Model) allows JavaScript to access and modify HTML elements.
EXAMPLE:
[Link]("demo").innerHTML = "Hello JavaScript";
Uses:
 Dynamic content update
 Interactive UI
 Form validation
Advantages of JavaScript
 Easy to learn
 Improves user experience
 Reduces server load
 Supported by all browsers
Limitations of JavaScript
 Security issues (client-side execution)
 Browser compatibility problems
 Not suitable for complex backend tasks alone

JavaScript Variables (20 Marks)

Definition
A variable in JavaScript is a named container used to store data values which can be changed or
used later in the program. Variables allow programs to be dynamic and reusable.

Syntax
let variableName = value;
const constantName = value;
var oldVariable = value;

Types of Variables
1. var
o Function-scoped

o Can be redeclared and updated

o Hoisted (initialized as undefined)

var x = 10;
x = 20; // Allowed
var x = 30; // Allowed
2. let
o Block-scoped

o Can be updated but cannot be redeclared in the same scope

let age = 16;

age = 17; // Allowed
// let age = 18; // Not allowed
3. const
o Block-scoped

o Cannot be updated or redeclared

o Used for constants

const PI = 3.14;
// PI = 3.141; // Error

Data Types Stored in Variables

 Primitive Types: Number, String, Boolean, Null, Undefined, Symbol
 Non-Primitive Types: Object, Array, Function
let name = "Rahul"; // String
let marks = 85; // Number
let isPassed = true; // Boolean
let student = {id:1}; // Object
Rules for Naming Variables
1. Must start with a letter, $ or _
2. Cannot start with a number
3. Cannot use JavaScript reserved keywords
4. Case-sensitive (age ≠ Age)

Advantages of Variables
 Store and reuse data
 Improve program readability
 Make code dynamic and flexible
 Essential for calculations and logic

Example of Using Variables

let name = "Alex";
let age = 16;
const country = "India";

[Link]("Name: " + name);

[Link]("Age: " + age);
[Link]("Country: " + country);

Conclusion:
Variables are fundamental building blocks in JavaScript. They allow developers to store data,
manipulate it, and create dynamic, interactive web applications.
JavaScript Functions (20 Marks)
Definition
A function is a reusable block of code in JavaScript that performs a specific task. Functions help
organize code, avoid repetition, and make programs modular.

Syntax
function functionName(parameters) {
// Code to execute
return value; // Optional
}

Types of Functions
1. Function Declaration
 Defined using the function keyword
 Can be called before or after declaration (hoisting)
function add(a, b) {
return a + b;
}

let sum = add(5, 10); // sum = 15

2. Function Expression
 Stored in a variable
 Cannot be hoisted
const multiply = function(a, b) {
return a * b;
};

let result = multiply(2, 3); // result = 6

3. Arrow Function (ES6)
 Shorter syntax
 Does not have its own this
const square = x => x * x;
[Link](square(5)); // 25
4. Anonymous Function
 A function without a name
 Often used in event handling or callbacks
setTimeout(function() {
[Link]("Hello");
}, 1000);

Function Parameters and Return Values

  Parameters: Values passed to a function
 Return Value: Value returned after execution
function greet(name) {
return "Hello " + name;
}

[Link](greet("Alex")); // Hello Alex

Advantages of Functions
1. Code Reusability – Write once, use multiple times
2. Organized Code – Makes code modular and readable
3. Simplifies Complex Tasks – Breaks programs into smaller tasks
4. Easier Debugging – Errors are easier to locate

Example
function calculateArea(length, width) {
return length * width;
}

let area = calculateArea(5, 10);

[Link]("Area: " + area); // Area: 50

Conclusion
Functions are essential in JavaScript for performing tasks repeatedly, making code efficient,
readable, and modular. They are a key feature in both small scripts and large applications.
JavaScript Arrays (20 Marks)
Definition
An array is a special variable in JavaScript that can store multiple values under a single name.
Arrays are ordered lists, and each element has an index starting from 0.

Syntax
let arrayName = [element1, element2, element3];
Example:
let fruits = ["Apple", "Banana", "Mango"];

Characteristics of Arrays
1. Can store multiple data types (numbers, strings, objects, arrays)
2. Index starts from 0
3. Dynamic size – can add or remove elements anytime
4. Can be nested (array of arrays)
let mixedArray = [10, "Hello", true, [1, 2, 3]];

Accessing Array Elements

[Link](fruits[0]); // Apple
[Link](fruits[2]); // Mango

Common Array Methods

Method Description Example

push() Add element at the end [Link]("Orange");

pop() Remove last element [Link]();

shift() Remove first element [Link]();

unshift() Add element at the beginning [Link]("Kiwi");

length Returns the number of elements [Link];

forEach() Loop through each element [Link](f => [Link](f));

Looping Through Arrays

for (let i = 0; i < [Link]; i++) {
 [Link](fruits[i]);
}

// Using forEach
[Link](function(fruit) {
[Link](fruit);
});

Advantages of Arrays
1. Store multiple values in a single variable
2. Easier data manipulation and iteration
3. Useful for lists, collections, and data storage
4. Makes programs organized and efficient

Example of Using an Array

let marks = [85, 90, 78, 92];
[Link](88); // Adding a new mark
[Link]("All Marks: " + marks);
[Link]("First Mark: " + marks[0]);

Conclusion
Arrays are fundamental in JavaScript for handling collections of data. They are used in loops,
calculations, and dynamic web applications to make code efficient and organized.

JavaScript Events (20 Marks)

Definition
An event in JavaScript is an action or occurrence that happens in the browser, often triggered by the
user or the system. Examples include clicking a button, moving the mouse, or pressing a key. Events
make web pages interactive and dynamic.

Common Types of Events

Event Type Description Example

click Triggered when an element is clicked Button click

mouseover When the mouse pointer moves over an element Hover effect

mouseout When the mouse leaves an element Tooltip hide

keydown When a key is pressed Form input

submit When a form is submitted Form validation

load When the page or image finishes loading Display content after loading

Event Handling Methods

1. Inline HTML Event
<button onclick="alert('Button Clicked')">Click Me</button>
2. Using JavaScript Property
let btn = [Link]("myButton");
[Link] = function() {
alert("Button Clicked");
};
3. Using addEventListener() (Recommended)
[Link]("click", function() {
alert("Button Clicked");
});

Event Object
The event object contains information about the event, such as the target element and mouse
position.
[Link]("myButton").addEventListener("click", function(event) {
[Link]("Clicked element:", [Link]);
});
Advantages of Events
1. Interactive Web Pages – Respond to user actions
2. Real-time Feedback – Immediate response to input
3. Better User Experience – Dynamic updates without reloading
4. Modular Programming – Event-driven code is organized

Example of Event Handling

<button id="btn">Click Me</button>

<script>
[Link]("btn").addEventListener("click", function() {
[Link]("demo").innerHTML = "Button was clicked!";
});
</script>

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

Conclusion
Events are essential in JavaScript for creating dynamic, interactive, and responsive websites.
They allow web pages to react to user actions, improving user experience and functionality.

JavaScript DOM Manipulation (20 Marks)

Definition
DOM (Document Object Model) is a tree-like representation of an HTML document. DOM
manipulation allows JavaScript to access, modify, and update HTML elements, content, and styles
dynamically without reloading the page.

Accessing DOM Elements

1. By ID
let element = [Link]("demo");
2. By Class Name
let elements = [Link]("box");
3. By Tag Name
let elements = [Link]("p");
4. Using Query Selector
let element = [Link](".box"); // First element with class 'box'
let elements = [Link]("p"); // All <p> elements

Modifying Content
 Change text inside an element
[Link] = "Hello JavaScript!";
 Change attribute
[Link]("src", "[Link]");
 Get attribute
let src = [Link]("src");

Changing Styles
[Link] = "blue";
[Link] = "yellow";
[Link] = "20px";

Creating and Removing Elements

 Create a new element
let p = [Link]("p");
[Link] = "This is a new paragraph";
[Link](p); // Adds paragraph to the page
  Remove an element
let p = [Link]("removeMe");
[Link]();

Looping Through DOM Elements

let boxes = [Link](".box");
[Link](function(box) {
[Link] = "2px solid red";
});

Advantages of DOM Manipulation

1. Create dynamic web pages
2. Update content without reloading
3. Handle events and user interactions
4. Build interactive forms, games, and UI components

Example
<p id="demo">Original Text</p>
<button id="btn">Change Text</button>

<script>
[Link]("btn").addEventListener("click", function() {
[Link]("demo").innerHTML = "Text Changed!";
});
</script>

Conclusion
DOM Manipulation is a core feature of JavaScript that allows developers to create interactive and
responsive websites by dynamically updating content, styles, and structure.
ES6+ Features in JavaScript (20 Marks)
Definition
ES6 (ECMAScript 2015) and later versions introduced modern features in JavaScript to make code
cleaner, faster, and easier to write. These features improve readability, maintainability, and
performance of web applications.

Key ES6+ Features

1. let and const
 let – Block-scoped, can be updated
 const – Block-scoped, cannot be updated or redeclared
let age = 16;
const PI = 3.14;

2. Arrow Functions
 Shorter syntax for functions
 Does not have its own this
const add = (a, b) => a + b;
[Link](add(5, 10)); // 15

3. Template Literals
 Use backticks (``) for strings
 Supports string interpolation and multi-line strings
let name = "Alex";
[Link](`Hello, ${name}! Welcome to JavaScript.`);

4. Destructuring
 Extract values from arrays or objects into variables
// Array destructuring
let [a, b] = [10, 20];
[Link](a, b); // 10 20

// Object destructuring
let student = {name: "Rahul", age: 16};
let {name, age} = student;
[Link](name, age); // Rahul 16

5. Spread and Rest Operators

 Spread (...) – Expands arrays or objects
 Rest (...) – Collects remaining elements
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // Spread
[Link](arr2); // [1, 2, 3, 4]

function sum(...numbers) { // Rest

return [Link]((a, b) => a + b, 0);
}
[Link](sum(1, 2, 3)); // 6

6. Default Parameters
 Set default values for function parameters
function greet(name = "Guest") {
[Link](`Hello, ${name}!`);
}
greet(); // Hello, Guest!

7. Classes
 ES6 supports object-oriented programming
class Student {
constructor(name, age) {
[Link] = name;
[Link] = age;
}
greet() {
[Link](`Hello, I am ${[Link]}`);
 }
}

let s1 = new Student("Rahul", 16);

[Link](); // Hello, I am Rahul

8. Modules (Import/Export)
 Split code into separate files
 Helps maintain large applications
// [Link]
export const PI = 3.14;

// [Link]
import { PI } from './[Link]';
[Link](PI);

Advantages of ES6+
1. Cleaner and shorter code
2. Better readability and maintainability
3. Supports modern programming practices
4. Easier to handle arrays, objects, and functions
5. Enables modular and scalable applications

Conclusion
ES6+ features have modernized JavaScript by introducing arrow functions, classes, modules,
template literals, destructuring, and more. These features make coding efficient, modular, and
easier to manage, which is essential for modern web development.