JavaScript Revision Notes (Complete)
1. What is JavaScript?
JavaScript (JS) is a programming language for the web used to make websites interactive and
dynamic.
JavaScript can: - Change HTML content - Change CSS styles - Respond to user actions (clicks, input) -
Fetch data from servers
2. JavaScript in HTML ( <script> tag)
The <script> tag is used to write or link JavaScript in an HTML file.
Ways to use it:
1. Internal JS
<script>
[Link]("Hello");
</script>
2. External JS (recommended)
<script src="[Link]"></script>
Best placement:
• End of <body> OR
• Inside <head> with defer
3. Variables
Used to store data.
let a = 10; // can change
const b = 20; // cannot change
⚠️ Avoid var (old, confusing scope)
1
4. Data Types
• Number → 10 , 3.14
• String → "hello"
• Boolean → true , false
• undefined → declared but not assigned
• null → intentionally empty
• Object → {}
• Array → []
typeof 10 // number
typeof "hi" // string
5. Operators
• Arithmetic: + - * /
• Comparison: > < >= <=
• Equality:
• == loose (avoid)
• === strict (use)
5 === "5" // false
5 == "5" // true
6. Conditions
if (age > 18) {
[Link]("Adult");
} else {
[Link]("Minor");
}
7. Loops
for loop
for (let i = 0; i < 5; i++) {
[Link](i);
}
2
while loop
while (condition) {
}
8. Functions
Functions are reusable blocks of code.
Normal function
function greet(name) {
return "Hello " + name;
}
Arrow function
const greet = (name) => {
return "Hello " + name;
};
Short arrow (implicit return)
const add = (a, b) => a + b;
9. Arrays
const arr = [1, 2, 3];
Important methods
[Link](4);
[Link]();
[Link](x => x * 2);
[Link](x => x > 2);
[Link]((a, b) => a + b);
3
10. Objects
const user = {
name: "Nakul",
age: 20
};
Access:
[Link]
user["age"]
11. DOM (Document Object Model)
DOM represents HTML as a tree of objects.
JavaScript cannot directly modify HTML files — it modifies the DOM.
12. document Object
document is a global browser object that represents the entire web page.
Used to: - Access elements - Modify content - Handle events - Create/remove elements
13. Selecting Elements
[Link]("id");
[Link](".class");
[Link]("p");
14. Changing Content
[Link] = "Hello"; // text only
[Link] = "<b>Hello</b>"; // HTML allowed
⚠️ innerHTML can be unsafe if misused.
4
15. Creating Elements
const h1 = [Link]("h1");
[Link] = "Hello";
[Link](h1);
16. innerHTML , textContent , innerText
• innerHTML → HTML + text
• textContent → only text (safe)
• innerText → text affected by CSS
17. Styling with JavaScript
[Link] = "red";
[Link] = "24px";
18. Events
[Link]("click", () => {
alert("Clicked");
});
Common events: - click - input - submit - keydown
19. Asynchronous JavaScript
Callback
setTimeout(() => {
[Link]("Hi");
}, 1000);
Promise
fetch(url)
.then(res => [Link]())
5
.then(data => [Link](data))
.catch(err => [Link](err));
async / await (recommended)
async function getData() {
try {
const res = await fetch(url);
const data = await [Link]();
[Link](data);
} catch (err) {
[Link](err);
}
}
20. Error Handling
try {
let x = y + 1;
} catch (err) {
[Link](err);
}
21. Scope
• let → block scope
• const → block scope
• var → function scope (avoid)
22. One-line Revision Summary
• JS adds interactivity
• DOM connects JS and HTML
• document is the entry point
• Functions + arrays + DOM = Web dev
6
23. DOM Tree (Detailed Notes)
What is DOM Tree?
The DOM Tree is a hierarchical (tree-like) representation of an HTML document where each HTML
element, attribute, and text is treated as a node (object).
The browser converts:
HTML file → DOM Tree → JavaScript objects
JavaScript interacts with the webpage only through the DOM Tree, not directly with the HTML file.
Why is it called a Tree?
Because it has: - A root node - Parent–child relationships - Sibling elements
Just like a real tree structure.
Root of DOM Tree
• The root node is always:
document
All HTML elements exist inside the document object.
Example HTML
<div id="root">
<h1>Hello</h1>
<p>Welcome</p>
</div>
Corresponding DOM Tree
document
└── html
└── body
└── div (id="root")
├── h1
│ └── "Hello"
7
└── p
└── "Welcome"
Important DOM Tree Terms
Node
Everything in the DOM is a node: - Element nodes ( div , h1 ) - Text nodes ( "Hello" ) - Attribute
nodes ( id )
Parent Node
An element that contains another element.
Child Node
An element inside another element.
Sibling Nodes
Elements that share the same parent.
How JavaScript Uses the DOM Tree
JavaScript accesses elements by traversing the DOM tree using the document object.
const root = [Link]("root");
This internally means:
document → html → body → div#root
Modifying the DOM Tree
const h2 = [Link]("h2");
[Link] = "New Heading";
[Link](h2);
DOM Tree after modification:
div#root
├── h1
├── p
└── h2
8
DOM Traversal (Basic)
[Link]
[Link]
[Link]
[Link]
These properties work because the DOM is structured as a tree.
Why DOM Tree is Important?
• Enables dynamic web pages
• Allows JavaScript to modify structure and content
• Makes events and user interaction possible
• Used by frameworks like React and Angular
Common Mistake
❌ HTML file = DOM
✅ HTML file is parsed into DOM Tree by the browser
One-line Viva / Exam Answer
The DOM Tree is a hierarchical structure of an HTML document where each element is
represented as a node, allowing JavaScript to dynamically access and manipulate the
webpage.
24. React Basics (createElement, Root, render)
What is React?
React is a JavaScript library used to build user interfaces efficiently using a Virtual DOM.
React vs Normal JavaScript
• Normal JS directly manipulates the DOM
• React works with a Virtual DOM and updates the real DOM efficiently
9
[Link]()
const h1 = [Link]('h1', { id: 'heading' }, 'Hello World from
React');
This creates a Virtual DOM object, NOT a real HTML element.
Equivalent HTML:
<h1 id="heading">Hello World from React</h1>
What is React Root?
const root = [Link]([Link]('root'));
A React Root is the entry point where React starts controlling the DOM.
• React does NOT control the whole page
• It controls only the DOM element passed to createRoot
Why do we need to create a root?
1. To tell React where to render UI
2. To manage the Virtual DOM tree
3. To efficiently update the real DOM using diffing
4. To isolate React from the rest of the HTML page
[Link]()
[Link](h1);
• Converts Virtual DOM → Real DOM
• Injects content inside #root
• React takes full control of this DOM subtree
DOM Before Render
<div id="root"></div>
10
DOM After Render
<div id="root">
<h1 id="heading">Hello World from React</h1>
</div>
Virtual DOM Flow (Conceptual)
React Element
↓
Virtual DOM
↓
Diffing Algorithm
↓
Minimal Real DOM Updates
Old vs New React Rendering
❌ Old (React 17):
[Link](h1, [Link]('root'));
✅ New (React 18):
const root = [Link]([Link]('root'));
[Link](h1);
One-line Viva / Exam Answer (React Root)
In React, a root is created to define the DOM container that React will control, allowing
efficient rendering and updates using the Virtual DOM.
25. Final Viva-ready Line
"JavaScript manipulates the DOM directly, while React renders UI through a Virtual DOM using a root
container."
11