Press F12 → Go to Elements tab → See the DOM tree.
Go to Console and try:
document.title
document.body.style.backgroundColor = "lightblue"
5. Practice Tasks
✅ Beginner Level
Change the background color of the page using document.body.style.
Print the text of the <h1> element in the console.
<html>
<head>
<title> Welcome To Ramakayal Computer Education</title>
<style>
#p1
{
color:blue;
}
#p2
{
color:red;
}
.myarea1
{
background-color:yellow
}
</style>
</head>
<body>
<h1 style='color:red'> My Festivals </h1>
<p id='p1'> There are two prevailing definitions of the lunar month: amānta, where the month ends with the new moon, and pūrṇimānta, where it ends with the full moon.[3] Consequently, the same day may be associated with different but adjoining months. When a festival takes place during śukla paksha (the waxing phase of the moon), both traditions attribute it to the same month. However, if the festival occurs during kṛiṣhṇa paksha (the waning phase of the moon), the two traditions assign it to different, but adjacent months. </p>
<h1> Welcome </h1>
</div>
<script>
document.body.style.backgroundColor="green"
</script>
</body>
</html>
✅ Challenge Level
Create an HTML file with a <p> tag.
Use JavaScript to:
Print its text in the console.
Change it to “Hello from JavaScript!”.
Module 2 – Selecting Elements
1. Why We Need to Select Elements
Before changing an element, JavaScript needs to find it in the DOM.
We can select elements in different ways depending on:
ID
Class
Tag name
CSS selector patterns
2. Main Selection Methods
a) getElementById()
Finds an element by its id (must be unique in a page).
<p id="myPara">Hello World</p> <script> let para = document.getElementById("myPara"); console.log(para.innerText); </script>
b) getElementsByClassName()
Finds elements by class name.
Returns an HTMLCollection (like an array, but not exactly).
Select all <li> elements and log how many there are.
✅ Challenge Level
Create a list of items with the same class.
Use querySelectorAll() to select them and change their color to red.
Got it — let’s build Module 3: Changing Content in the DOM so it’s easy to teach and practice. I’ll give lesson notes, code examples, a comparison table, practice exercises, and a ready-to-use teaching script.
Module 3 – Changing Content
1. Why Change Content?
Web pages can be dynamic — content can change without reloading.
JavaScript lets you:
Change text
Change HTML structure
Change attributes (like src, href, alt, etc.)
2. Changing Text Content
We can change only the text (without HTML tags) using:
a) .innerText
Shows text as displayed (ignores hidden elements, respects CSS).
<p id="myPara">Hello</p>
<script>
document.getElementById("myPara").innerText = "Hello from JavaScript!";
</script>
Change the text of an <h1> from “Welcome” to “Hello World”.
Change the src of an image.
✅ Challenge
Create a <p> with “Click the button to update me”.
On button click:
Change text to “Updated!”
Make it bold using .innerHTML.
8. Teaching Script
“In the last module, we learned how to find elements in the DOM. Now we’ll change them. This is how websites update without a refresh — like showing a live score or updating a news headline. We can change only the text, or even replace the whole HTML inside an element. For example, .innerText changes only the visible text, while .innerHTML lets you insert HTML tags too. And if we want to change things like an image’s source or a link’s address, we use .setAttribute(). Let’s try replacing an image by changing its src…”
If you want, I can prepare Modules 1–3 as a single interactive HTML page where each module has:
Code sample
“Run” button
Output area
That would make your teaching hands-on and fun.
Do you want me to prepare that combined demo?
Alright — let’s make Module 4: Styling Elements clear, visual, and ready for teaching. I’ll include lesson notes, examples, practice tasks, and a short teaching script so your students can both see and try the changes.
Module 4 – Styling Elements
1. Why Style Elements with JavaScript?
Sometimes we want dynamic styles that change based on:
User actions (hover, click)
Data changes
Time or random effects
Two main ways to style:
Directly change CSS properties via .style
Add/Remove CSS classes via .classList
2. Method 1 – Using .style.property
Changes inline CSS styles directly.
Syntax:
element.style.propertyName = "value";
⚠ Property names use camelCase in JavaScript (e.g., backgroundColor not background-color).
Change a <div> background color to green using .style.
Increase an <h1> font size using .style.fontSize.
✅ Challenge
Create a button that toggles a “dark-mode” class on the <body> (changes background and text color).
6. Teaching Script
“In Module 3, we changed content. Now, let’s change how it looks. JavaScript can style elements in two ways — directly, using .style.property, or by adding/removing CSS classes with .classList. Changing styles directly is quick, but adding classes is cleaner because you keep design in CSS and just tell JavaScript when to apply it. Let’s try both methods — first, let’s make a box turn red, then let’s toggle a dark mode for the whole page.”
If you want, I can make Modules 1–4 in one HTML page with buttons so you can demonstrate each step interactively. It will be perfect for teaching because your students can click and instantly see the effect.
Do you want me to prepare that interactive combined HTML file next?
Alright — here’s Module 6: Forms and Input explained step-by-step, with teaching notes, examples, practice exercises, and a ready-to-use teaching script.
Module 6 – Forms and Input
1. Why Work with Forms in JavaScript?
Forms allow users to enter data (name, email, password, etc.).
JavaScript can:
Read input values.
Validate data before submission.
Show error or success messages.
Prevent page reload on submit.
📌 Think of forms as the “conversation” between your website and the user.
2. Accessing Input Values
We can use .value to get or set input field values.
Example:
<input type="text" id="username" placeholder="Enter your name">
<script>
let nameField = document.getElementById("username");
console.log(nameField.value); // Empty at first
</script>
// Checkbox
document.getElementById("subscribe").checked; // true/false
// Radio buttons
let gender = document.querySelector('input[name="gender"]:checked').value;
5. Practice Tasks
✅ Beginner
Create a form with a text box and a submit button.
When submitted, show the typed text in an alert.
✅ Challenge
Create a form with:
Name (text)
Email (text)
Subscribe (checkbox)
When submitted:
If email is empty → Show an error message in red.
Else → Show “Form submitted successfully!” in green.
6. Teaching Script
“We’ve learned how to react to clicks and keypresses, but forms are where users actually give us data. JavaScript can read these values, check them, and even stop the form from sending until the data is correct. The key here is .value for text inputs and .checked for checkboxes. Also, remember to use preventDefault() if you want to stop the form from reloading. Let’s try making a form that says hello to the user after they submit their name.”
If you want, I can make Modules 1–6 in one HTML teaching file where each module has:
The lesson text
Example code
A “Run Demo” section
That way, you can just open it in the browser and teach straight from there without switching files.
Do you want me to prepare that full Modules 1–6 combined HTML demo?
Alright — here’s Module 7: DOM Traversal in a way that’s beginner-friendly but still thorough enough for advanced understanding. I’ll include lesson notes, code examples, practice tasks, and a teaching script so it’s ready to teach.
Module 7 – DOM Traversal
1. What is DOM Traversal?
DOM traversal means moving through the DOM tree to find related elements:
From parent to child
From child to parent
Between siblings
📌 This is useful when you know the position of an element relative to another, but not its exact ID/class.
2. Moving Down the DOM Tree (Children)
let parent = document.getElementById("container");
console.log(parent.children); // HTMLCollection of child elements
console.log(parent.firstElementChild); // First child element
console.log(parent.lastElementChild); // Last child element
Select the first child of a <div> and change its text.
Select the last child of a <ul> and change its background.
✅ Challenge
Given a <ul>, find the second item using .firstElementChild.nextElementSibling and make it bold.
8. Teaching Script
“Up to now, we’ve been grabbing elements directly with getElementById or querySelector. But sometimes we don’t know the exact selector — instead, we know where an element is relative to another one. DOM traversal lets us move up, down, or sideways in the DOM tree. We can grab parents, children, and siblings easily. This is especially useful when handling events — for example, when you click a button inside a card, you can find the card’s title by moving up to its parent, then down to the right child.”
If you want, I can make Modules 1–7 into a single interactive HTML demo where each module has a “Run Example” button and live results — so your students can try every traversal method right there in the browser.
Do you want me to prepare that combined teaching file?
Got it — here’s Module 8: Creating & Removing Elements in a clear, step-by-step teaching format with examples, practice, and a ready-to-use teaching script.
Module 8 – Creating & Removing Elements
1. Why Create or Remove Elements?
To add new content dynamically (e.g., chat messages, notifications, list items).
To remove outdated or unnecessary content (e.g., dismissing popups).
This makes your page interactive without reloading.
<div id="container"></div>
<script>
let newP = document.createElement("p");
newP.textContent = "This is a new paragraph.";
document.getElementById("container").appendChild(newP);
</script>
3. Removing Elements
Two main ways:
a) Remove a Specific Element
let element = document.getElementById("removeMe");
element.remove();
b) Remove a Child from a Parent
let parent = document.getElementById("container");
let child = document.getElementById("item1");
parent.removeChild(child);
4. Inserting in Specific Positions
let newItem = document.createElement("li");
newItem.textContent = "Mango";
let list = document.getElementById("fruits");
list.insertBefore(newItem, list.children[1]); // before Banana
5. Example – Adding and Removing with a Button
<div id="box"></div>
<button id="add">Add Paragraph</button>
<button id="remove">Remove Last Paragraph</button>
<script>
let box = document.getElementById("box");
document.getElementById("add").addEventListener("click", function(){
let p = document.createElement("p");
p.textContent = "New paragraph";
box.appendChild(p);
});
document.getElementById("remove").addEventListener("click", function(){
if (box.lastElementChild) {
box.removeChild(box.lastElementChild);
}
});
</script>
6. Practice Tasks
✅ Beginner
Create a <ul> and add a new <li> with text “New Item”.
Remove the first item from a <ul>.
✅ Challenge
Make a button that adds a numbered <li> each time it’s clicked.
Make another button that removes all <li> items.
7. Teaching Script
“So far, we’ve worked with elements that already exist. But what if you want new content — say, a new chat message or a notification? We can create elements with document.createElement(), set their content with .textContent or .innerHTML, and then place them into the DOM using .appendChild() or .insertBefore(). Removing is just as simple — use .remove() for a single element or .removeChild() if you’re working from the parent. Let’s make a button that adds new paragraphs and another that deletes them.”
If you want, I can now prepare Modules 1–8 in one interactive HTML teaching file, with a tab or section for each module and live editable examples so students can try code instantly in the browser. That would make your course fully hands-on from start to finish.
Do you want me to make that combined interactive file?
