Introduction to

JavaScript: The Language

of the Web
Welcome to this comprehensive introduction to JavaScript, the versatile
programming language that powers the interactive web. In this
presentation, we'll explore its fundamental concepts, from basic syntax to
advanced features, and understand why it's an indispensable tool for
modern developers.
JavaScript is not just for web browsers anymore; its reach has expanded
significantly into server-side development, mobile applications, and even
desktop software, making it a truly universal language in the programming
world. Join us as we demystify JavaScript and equip you with the
foundational knowledge to start building dynamic and engaging
applications.
By Aditya Nandgirwar
 What is JavaScript?
JavaScript, often abbreviated as JS, is a high-level,
interpreted, and dynamically-typed programming
language. It is primarily used to create interactive
and dynamic web content, making websites come
alive for users.

Role in Web Development:

• HTML: Structures the content of a web page.
• CSS: Styles the visual presentation of the content.
• JavaScript: Adds behavior and interactivity, enabling
features like animations, form validations, and dynamic
content updates.

Beyond the Browser:

While its roots are in client-side web development, JavaScript's ecosystem has expanded:

• Node.js: Allows JavaScript to run on the server-side, enabling full-stack JavaScript development.
• React Native: Used for building native mobile applications for iOS and Android.
• Electron: Facilitates the creation of cross-platform desktop applications using web technologies.
JavaScript in Perspective
Understanding JavaScript's core characteristics is key to leveraging its full potential:

Client-Side Scripting Event-Driven

Historically, JS runs directly in the user's web browser, JavaScript excels at responding to user actions (like
executing code on the client's machine rather than the clicks or key presses) and browser events (such as page
server, which enhances responsiveness and reduces loading or image errors), making web pages interactive.
server load.

Asynchronous Loosely-Typed & Object-Oriented

It can perform tasks in the background without blocking Variable types are determined at runtime, offering
the main execution thread, crucial for responsive web flexibility. It uses a prototype-based object model,
applications that need to fetch data or perform long- allowing for flexible object creation and inheritance.
running operations without freezing the UI.
Basic Syntax: The Foundation of JavaScript Code
JavaScript syntax is fundamental to writing functional code. It shares similarities with C, C++, and Java, making it somewha
familiar to developers from those backgrounds. Key rules to remember include:

Case-Sensitivity Comments
JavaScript is case-sensitive, meaning myVariable is different • Single-line comments: Begin with //. Everything after //
from MyVariable. Pay close attention to capitalization. on that line is ignored by the interpreter.
Semicolons • Multi-line comments: Start with /* and end with
*/. They can span multiple lines and are often used
Statements are typically terminated with a semicolon (;). While for block explanations or temporarily disabling code
Automatic Semicolon Insertion (ASI) can make them optional in sections.
many cases, explicit use is highly recommended for clarity and
to prevent unexpected behavior.
Example:
// This is a single-line comment
let greeting = "Hello, World!"; // Declares a variable and assigns a string
/*This is a multi-line comment.
It demonstrates how comments can span across several lines.*/
console.log(greeting); // Prints the value to the console

Output (in browser console or Node.js):

Hello, World!
Variables and Data Types: Storing Information
Variables are containers for storing data values. In JavaScript, you declare them using var, let, or const,
each with distinct scoping and reassignment rules.
var let const
(Older, pre-ES6) Function-scoped. Variables declared (ES6+) Block-scoped. let allows variables to be reassigned (ES6+) Block-scoped. Variables declared with const must
with var can be redeclared and reassigned, which can but not redeclared within the same scope, offering more be initialized at declaration and cannot be reassigned. This
sometimes lead to unexpected behavior in larger predictable behavior than var. is preferred for values that should remain constant
codebases. throughout execution.

Example:

var oldVar = "I'm a var";

let newVar = "I'm a let";
const constantVar = "I'm a const";
console.log(oldVar);
console.log(newVar);
console.log(constantVar);
oldVar = "Var changed";
newVar = "Let changed";
constantVar = "Const changed"; // This line would cause a TypeError!
console.log(oldVar);
console.log(newVar);

Output:

I'm a varI'm a letI'm a constVar changedLet changed

Data Types: What Kind of Data?
JavaScript has several built-in data types that define the kind of value a variable can hold. These are broadly categorized into
Primitive and Non-Primitive types.

1. Primitive Data Types (Immutable): 2. Non-Primitive Data Type (Mutable):

• String: Represents textual data. E.g., "Hello, world!" • Object: A collection of properties, where each property has
• Number: Represents both integers and floating-point a name (or key) and a value. This is a fundamental concept
numbers. E.g., 10, 3.14 in JavaScript as almost everything is an object. This

• •includes:
Plain Objects: { name: "Alice", age: 30 }
Boolean: Represents a logical entity, either true or false.
• • Arrays: Ordered collections of values. E.g., ["apple",
Undefined: Represents a variable that has been declared
but not yet assigned a value. E.g., let x; // x is "banana"]

• undefined • Functions: Blocks of reusable code.

Null: Represents the intentional absence of any object
value. E.g., let y = null;
• Symbol (ES6): Represents a unique identifier. E.g., Symbol('id')
• BigInt (ES11): Represents whole numbers larger than 253
- 1. E.g., 12345678901234567890n
// Declare variables of different types

let greeting = "Hello Developers!"; // String

let currentYear = 2025; // Numberlet

isLearning = true; // Booleanlet

favoriteFruits = ["Apple", "Banana", "Cherry"]; // Array (an object)

let myLaptop = { // Object

brand: "HP",
model: "Spectre“
};// Print each variable's value and its data type

console.log("--- My Data Showcase ---");

console.log("Greeting:", greeting);
console.log("Type of greeting:", typeof greeting);
console.log("\nCurrent Year:", currentYear);
console.log("Type of currentYear:", typeof currentYear);
console.log("\nAm I learning JS?", isLearning);
console.log("Type of isLearning:", typeof isLearning);
console.log("\nFavorite Fruits:", favoriteFruits);
console.log("Type of favoriteFruits:", typeof favoriteFruits); // Arrays are objects
console.log("\nMy Laptop Details:", myLaptop);
console.log("Type of myLaptop:", typeof myLaptop);
Output:

--- My Data Showcase ---

Greeting: Hello Developers!
Type of greeting: string

Current Year: 2025

Type of currentYear: number

Am I learning JS? True

Type of isLearning: Boolean

Favorite Fruits: [ 'Apple', 'Banana', 'Cherry' ]

Type of favoriteFruits: object
My Laptop Details: { brand: 'HP', model: 'Spectre' }
Type of myLaptop: object
Functions, Objects, and Arrays: Organizing Your Code
Functions, objects, and arrays are fundamental concepts for structuring and managing data and logic in JavaScript, enabling reusability and

Functions: Reusable Code Blocks // Calling the functions and logging their outputs
Functions are blocks of reusable code designed to perform a console.log("--- Function Call Outputs ---");
particular task. They can accept input (arguments) and return
output. JavaScript supports different ways to define functions: // Call greet()
const greetingMessage = greet("John");
console.log("Output of greet('John'):",
// Function declaration
greetingMessage);
function greet(name)
// Call multiply()
{
const product = multiply(5, 3);
return "Hello, " + name + "!";
console.log("Output of multiply(5, 3):", product);
}// Function expression
// Call add()
const multiply = function (a, b) {
const sum = add(10, 7);
return a * b;
console.log("Output of add(10, 7):", sum);
};

// Arrow function (ES6+) Output:

const add = (a, b) => a + b;
--- Function Call Outputs ---
Output of greet('John'): Hello, John!
Output of multiply(5, 3): 15
Output of add(10, 7): 17
Objects: Collections of Properties and Methods

In JavaScript, almost everything can behave like an object. An object is a collection of key-value pairs (properties) and functions (methods

const person =
{ name: "Alice",
age: 30, isStudent: false,
greet: function () {
console.log("Hi, my name is " + this.name);
},
};
console.log(person.name); // Accessing a property
person.greet(); // Calling a method

Output:

Alice
Hi, my name is Alice
Arrays: Ordered Collections

Arrays are special types of objects used to store ordered collections of values. They are zero-indexed, meaning the first element is at
index 0.

const fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]); // Accessing elements by index
fruits.push("date"); // Adding an element
console.log(fruits.length); // Getting the length

Output:

Apple
4
Built-in Objects & Debuggers: Essential Tools
JavaScript provides a rich set of built-in objects that offer a wide range of functionalities, making common programming tasks much
easier. Alongside these, understanding how to use debuggers is crucial for identifying and fixing errors in your code.

Powerful Built-in Objects: • Math: Provides mathematical constants and functions

(e.g., Math.PI, Math.random()).
• String: Methods for manipulating textual data (e.g., • Date: For creating and manipulating dates and times.
length, toUpperCase()).
• JSON: For working with JSON (JavaScript Object Notation)
• Number: Methods for working with numeric values (e.g., data.
toFixed(), parseInt()).
• Promise (ES6): Fundamental for handling asynchronous
• Array: Extensive methods for array manipulation (e.g., operations cleanly.
push(), pop(), map(), filter()).
• Map and Set (ES6): New data structures for key-value
pairs and unique values, respectively.
EXAMPLE: Built-in Objects Used:
function calculateCircleArea(radius) { Math.PI and Math.pow() – For calculating the area of a circle.
// Check for invalid input using built-in Number object
if (typeof radius !== 'number' || isNaN(radius) || radius <= 0) { Number – Used implicitly via typeof, isNaN(), and toFixed() methods.
console.error("Invalid radius value");
return; console.error() and console.log() – Part of the console object for logging
} output and errors.

debugger; // This will pause execution in developer tools if they're open debugger Statement:

// Use Math object to calculate area Acts like a breakpoint.

const area = Math.PI * Math.pow(radius, 2);
When developer tools are open in the browser, JavaScript execution will
// Use toFixed() from the Number prototype to format output pause at this line, letting you inspect variables and call stack.
console.log("Area of the circle:", area.toFixed(2));

return area;
}

// Call the function isNaN(value)

calculateCircleArea(5); Returns: true if the value is NaN or cannot be converted to
a number.

Returns: false if the value is a valid number or can be

converted to one.
JavaScript Debuggers:
Debugging is the process of finding and fixing errors (bugs) in your code. Modern web browsers come with
powerful built-in JavaScript debuggers, often called Developer Tools (DevTools).

• Console: For logging messages, inspecting variables, and running small code snippets.
• Sources Panel: Allows you to set breakpoints, step through your code line by line, inspect variable values,
and examine the call stack.
• Network Panel: To inspect network requests made by your application.
• Elements Panel: To inspect and modify the HTML and CSS of your page.

How to Use: Right-click on any web page and select "Inspect" (or F12). Navigate to the "Sources" tab to set
breakpoints and step through your code. Use console.log() for quick inspections.
The Document Object
Model (DOM):
Interacting with Web
Content
Understanding, manipulating, and enhancing web pages is crucial
for modern web development. This presentation will guide you
through the intricacies of the Document Object Model (DOM), from
its historical roots to its modern applications.

by Aditya Nandgirwar
Agenda: Navigating the DOM Landscape
1 Introduction to the DOM
Defining what the DOM is and why it's essential for web interaction.

2 DOM History and Levels

A brief look at its evolution and standardization efforts.

3 The Document Tree

Visualizing the hierarchical structure of web documents.

4 Event Handling & Styling

How to respond to user actions and modify element appearances.

5 jQuery & AngularJS

Exploring frameworks that simplify DOM manipulation.
What is the Document Object Model (DOM
The DOM is a programming interface for web
documents. It defines the logical structure of
documents. It allows programs and scripts to
dynamically access and update content, structure, and
style.
Think of the DOM as a building's blueprint. Each part,
like a room or a window, is an object. You can identify,
open, or repaint it with code.

When a web page loads, the browser parses the HTML. It creates a DOM tree in memory. JavaScript interacts with
this in-memory representation.
Why is the DOM Important?

Dynamic Pages
Enables interactive web pages. Update content without reloading. Create animations and effects.

JavaScript's Gateway
It's the primary API. JavaScript manipulates web page structure and appearance. Respond to user
actions.

Modern Web Foundation

Basis for all major JavaScript frameworks. React, Angular, Vue, and jQuery rely on it.

Accessibility
Proper DOM manipulation enhances accessibility. Changes ARIA attributes for users with disabilities.
DOM History: The Path to Standardization
The Wild West (Mid-1990s) The Call for Standardization (Late 1990s)

Netscape Navigator and Microsoft Internet Explorer The W3C recognized the need for a common,
introduced proprietary methods for web content interoperable standard. Their goal was to create a
manipulation. These implementations were consistent set of APIs that all browsers could
incompatible, forcing developers to write browser- implement reliably.
specific code.
This was the era of "Works best in Netscape" or This effort aimed to end the browser wars and promote
"Optimized for IE." cross-browser compatibility.
DOM Levels: A Journey of Evolution
DOM Level 0 (Informal) 1
Non-standardized, browser-specific DOMs before W3C.
E.g., document.layers (Netscape 4) or document.all
(IE 4). 2 DOM Level 1 (1998)
Focused on core document structure. Defined Node,
Document, Element objects. No event handling included.
DOM Level 2 (2000) 3
Major milestone! Introduced the Event Model
(addEventListener). Added CSS styling
(getComputedStyle). Supported XML namespaces.
4 DOM Level 3 (2004)
Further refined functionality. Added document
loading/saving, validation, keyboard events. More robust
Modern DOM (Living Standard) 5 features.

Maintained by WHATWG. Continuously updated and

aligned with browsers. Levels concept has faded into
ongoing evolution.
Selecting Elements by ID: The Unique Identifier
document.getElementById() Code Example & Output
This method is your go-to for retrieving a single, specific
element. It leverages the unique id attribute, making it HTML:
highly efficient for direct access when you know the exact <div id="header">Welcome</div>
element you need to target. Remember, IDs must be unique JavaScript:
within an HTML document to ensure consistent and const headerDiv =
predictable selection. document.getElementById('header');
console.log(headerDiv.textContent);
console.log(headerDiv.id);

Output:
Welcome
header

Using getElementById is often the quickest way to grab an element, especially for major page sections or interactive components.
Its efficiency stems from directly indexing the DOM by ID, avoiding a full tree traversal.
Selecting Elements by Class Name: Dynamic
Collections
document.getElementsByClassName() Practical Use Cases
This method returns a live HTMLCollection of all Ideal for applying styles or behavior to multiple elements
elements that share a specified class name. The "live" that serve a similar purpose, such as all form inputs,
aspect is crucial: if elements with that class are navigation links, or interactive cards. Its live nature
dynamically added or removed from the document, the means you don't need to re-query the DOM after
collection automatically updates, reflecting the current structural changes related to these classes.
state of the DOM.
Understanding the "live" nature of HTMLCollections returned by this method is key to avoiding unexpected behavior in dynamic
web applications. Always be mindful that the collection reflects the DOM's most current state.
document.getElementsByClassName('className'): This returns a live
HTMLCollection of all elements that have the specified class name. "Live"
means the collection automatically updates if elements with that class are
added or removed from the document.
Code Example:
HTML

<p class="highlight">Text 1</p>

<span class="highlight">Text 2</span>
<script>
const highlightedElements = document.getElementsByClassName('highlight');
console.log(highlightedElements.length);
console.log(highlightedElements[0].textContent);
</script>
Conceptual Output:
2
Text 1
Selecting Elements by Tag Name: Broad
Category Targeting
document.getElementsByTagName()
HTML:
Similar to getElementsByClassName, this method returns a <ul>
live HTMLCollection of all elements with a specific HTML tag <li>Item 1</li>
name (e.g., 'div', 'p', 'a', 'li'). It's effective for broadly selecting <li>Item 2</li>
all instances of a particular element type across your </ul>
document. JavaScript:
Like class-based selections, the returned collection updates const listItems =
automatically as elements with the specified tag are added or document.getElementsByTagName('li');
removed, making it dynamic and current with the DOM. console.log(listItems.length);
listItems[0].style.color = 'blue';

Output:
2
(Visually: "Item 1" appears in blue)
Navigating the Document Tree:
Relationships and Traversal
Once you have a reference to a DOM node, you can traverse the document tree to access its parent, children, or siblings. This
allows for dynamic interaction with related elements without needing to re-query the entire document.

Parent Node
element.parentNode: Returns the direct parent Node of the element. This can be an Element, Document, or DocumentFragment.

Children Elements
element.children: Returns a live HTMLCollection containing only the element children (ignoring text nodes or comments).

element.firstElementChild and element.lastElementChild provide quick access to the first and last child elements, respectively

Sibling Elements
element.nextElementSibling: Returns the next sibling Element in the document tree.

element.previousElementSibling: Returns the previous sibling Element in the document tree.

Putting It All Together: DOM Traversal in Practice
Conceptual Code Example
const child2 =
document.getElementById('child2');console.log("P
HTML:
revious sibling of child2:",
<div id="parent">
child2.previousElementSibling.id);Output:Parent
<p id="child1">First Child</p>
of child1: parentChildren of parent: 2First
<span id="child2">Second =Child</span>
child element: First ChildPrevious sibling of
</div>
child2: child1

JavaScript:
const child1 = document.getElementById('child1');
console.log("Parent of child1:",
child1.parentNode.id);
const parentDiv = document.getElementById('parent');
console.log("Children of parent:",
parentDiv.children.length);
console.log("First child element:",
parentDiv.firstElementChild.textContent);
 Intrinsic event handling
Intrinsic event handling refers to adding event handlers directly in the HTML element's tag using event
attributes like onclick, onmouseover, etc.
Concept Description

Basic Example Intrinsic Events Event is written inside the HTML tag
<!DOCTYPE html> Handler Location Function is defined in a <script> block
<html> Common Events onclick, onmouseover, onchange, etc.
<body>
More Intrinsic Event Examples
<button onclick="showMessage()">Click Me</button>
<!-- Mouse Events -->
<p onmouseover="this.style.color='red'">Hover over me</p>
<script>
function showMessage() { <!-- Form Events -->
alert("Button was clicked!"); <input type="text" onchange="alert('Text changed!')">
}
</script> <!-- Keyboard Events -->
<input type="text" onkeydown="console.log('Key pressed')">
</body>
</html>
Concept Description
Intrinsic Events Event is written inside the HTML Tag
Handler Location Function is Defined in a <script> block
Commom Events Onclick,onmouse,onchane,etc
 Modifying element style
To modify an element's style using JavaScript and the DOM, you can directly access the style property of the element. Here's how you do it:
Basic Syntax: Tip: Add multiple styles at once using
(a) setAttribute or style.cssText
element.style.property = "value";
element.setAttribute("style", "color: blue; font-weight: bold;");
<!DOCTYPE html>
<html> EXAMPLE:
<head> para.setAttribute("style", "color: blue; font-weight: bold; background-color: lightgray;");
<title>Style Change</title>
</head> (b) Using element.style.cssText = "..."
<body>
EXAMPLE:
<p id="myPara">This is a paragraph.</p> para.style.cssText = "color: green; font-style: italic; background-color: #f0f0f0;"
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
var para = document.getElementById("myPara"); Both approaches set multiple styles at once, but:
para.style.color = "red";
para.style.fontSize = "20px"; setAttribute can override existing inline styles completely.
para.style.backgroundColor = "yellow";
} cssText can also replace all inline styles, but gives slightly more direct DOM
</script> control.
</body>
</html>
The Document Tree: Visualizing the DOM
The DOM represents a document as a logical tree
structure. Every part of an HTML document is a "node"
in this tree. Nodes have parent-child and sibling
relationships.

The Document node is the root. Element nodes are

HTML tags. Attribute nodes are element properties.
Text nodes are content.

This hierarchical structure allows developers to traverse and manipulate elements programmatically. Understanding
this tree is fundamental to effective DOM interaction.
 DOM event handling

DOM event handling uses JavaScript to assign functions (event handlers) to DOM elements, separating structure (HTML) and
behavior (JavaScript) — a best practice in web development.

3 Main Ways to Handle Events in the DOM: 1. Using element.onclick (Property Method)

Method Description <!DOCTYPE html>

<html>
1. HTML event attributes Intrinsic (inline, not recommended) <body>
2. element.onclick = fn Property-based (simple, but limited)
3. addEventListener() Standard, flexible, supports multiple <button id="btn">Click Me</button>

<script>
document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
</script>

</body>
</html>
2. Using addEventListener() (Recommended) Example: Handling Multiple Events Common Events in DOM

<!DOCTYPE html> btn.addEventListener("mouseover", () => { Event Triggered When...

<html> btn.style.backgroundColor = "yellow";
<body> }); click Element is clicked
mouseover Mouse enters element
<button id="btn2">Click Me Too</button> btn.addEventListener("mouseout", () => { mouseout Mouse leaves element
btn.style.backgroundColor = ""; keydown Key is pressed
<script> }); change Input value changes (forms)
const btn = document.getElementById("btn2"); submit Form is submitted
btn.addEventListener("click", function() {
alert("Handled using addEventListener!"); Explanation:
});
</script> btn.addEventListener("click", function() {
alert("Handled using addEventListener!");
</body>
</html>
});

• You can add multiple listeners for the same event. addEventListener("click", ...): Adds a click event listener to the button.

When the button is clicked:

This anonymous function runs.

alert("Handled using addEventListener!"): Displays a popup message.

 JQuery

jQuery is a fast, small, and feature-rich JavaScript library.

• Key Features
It simplifies common JavaScript tasks like:
Easy DOM traversal and manipulation
-> DOM manipulation
Cross-browser compatibility
-> Event handling
Event handling
-> AJAX calls
Effects and animations
-> Animations
AJAX support
jQuery uses CSS-style selectors and chaining for easy, readable code.

jQuery is still used in legacy systems but is less preferred in modern single-page applications (SPAs).
Basic Example

<!DOCTYPE html>
<html>
Explanation:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js
$(document).ready(function(){
"></script>
$("#btn").click(function(){
</head>
$("#demo").hide();
<body>
});
});
<p id="demo">Click the button to hide me!</p>
<button id="btn">Hide</button>
✅ What it means:
<script>
Line Explanation
$(document).ready(function(){
$("#btn").click(function(){
$(document).ready(...) Ensures the DOM is fully
$("#demo").hide();
loaded before running the code.
});
$("#btn") Selects the button with id="btn".
});
.click(function(){...}) Adds a click event handler to the
</script>
button.
$("#demo").hide(); Hides the paragraph with
</body>
id="demo" when the button is clicked.
</html>
 AngularJS

AngularJS is an open-source JavaScript

framework developed by Google.

Used for building dynamic, single-page web

applications (SPAs).

Follows the MVC (Model-View-Controller)

Feature Description

Two-way Binding -> Syncs data between model and view automatically

Directives -> Adds custom behavior to HTML elements (e.g., ng-model)

Dependency Injection -> Automatically injects services (like $http)

Templates -> Uses HTML with dynamic expressions

SPA Friendly -> Built-in routing and controllers for single-page apps
 Line-by-Line Explanation:
Example:
1. <!DOCTYPE html>
<!DOCTYPE html> Declares the document as an HTML5 page.
<html ng-app>
2. <html ng-app>
<head> ng-app is a directive that tells AngularJS:
<script 👉 "Start AngularJS here!"

src="https://ajax.googleapis.com/ajax/libs/angul It bootstraps the AngularJS application.

arjs/1.8.2/angular.min.js"></script>
3. <script src="https://...angular.min.js"></script>
</head> Loads the AngularJS library from Google’s CDN.
<body> Required to use AngularJS features like ng-model, ng-bind, {{ }}, etc.

4. <div ng-init="name='John'">
<div ng-init="name='John'"> ng-init initializes the AngularJS variable name with the value "John".
<p>Hello, {{name}}!</p>
So, inside Angular, we now have: name = "John"
<input type="text" ng-model="name">
</div> 5. <p>Hello, {{name}}!</p>

{{name}} is AngularJS expression binding.

</body>
It dynamically displays the value of name.
</html>
Initially shows: Hello, John!
THANK YOU