1.
Introduction to Modern Javascript and DOM
[Link] a javascript program to link javascript file with html page
project-folder/
│
├── [Link]
├── [Link]
└── [Link]
1. [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Input Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Welcome!</h1>
<p>Enter your name below:</p>
<input type="text" id="nameInput" placeholder="Enter your name" />
<button onclick="displayGreeting()">Submit</button>
<div id="output"></div>
</div>
<script src="[Link]"></script>
</body>
</html>
2. [Link]
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #f3f4f6, #e0e7ff);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
input {
padding: 10px;
font-size: 16px;
width: 60%;
margin: 10px 0;
border: 2px solid #a5b4fc;
border-radius: 8px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #6366f1;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #4f46e5;
}
#output {
margin-top: 20px;
font-size: 20px;
color: #1f2937;
}
3. [Link]
function displayGreeting() {
const name = [Link]("nameInput").[Link]();
const output = [Link]("output");
if (name === "") {
[Link] = "<span style='color: red;'>Please enter a valid name!</span>";
} else {
👋 Hello, <strong>${name}</strong>! Welcome to our site.`;
[Link] = `
}
}
[Link] a Javascript program to select the elements in html page using selectors
HTML + JavaScript Code Example
getElementById("id") Selects a single element by its
ID
getElementsByClassName("class") Selects all elements with a given
class
getElementsByTagName("tag") Selects all elements of a given
tag
querySelector("selector") Selects the first element matching the CSS
selector
querySelectorAll("selector") Selects all elements matching the CSS
selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selectors Demo</title>
<style>
.highlight {
color: white;
background-color: #4ade80;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1 id="mainTitle">Welcome to JavaScript Selector Demo</h1>
<p class="intro">This is the first paragraph.</p>
<p class="intro">This is the second paragraph.</p>
<button onclick="changeText()">Change Text</button>
<ul>
<li>Apple</li>
<li>Banana</li>
<li class="special">Cherry</li>
</ul>
<div id="output"></div>
<script>
function changeText() {
// 1. Select by ID
const title = [Link]("mainTitle");
[Link] = "JavaScript DOM Manipulation!";
// 2. Select by Class
const introParas = [Link]("intro");
for (let para of introParas) {
[Link]("highlight");
}
// 3. Select by Tag Name
const listItems = [Link]("li");
listItems[0].textContent = " Apple (Updated)";
// 4. Select using querySelector
const firstSpecial = [Link](".special");
[Link] = "bold";
// 5. Select using querySelectorAll
const allListItems = [Link]("ul li");
[Link]((li, index) => {
[Link] = "5px";
});
// Output confirmation
const output = [Link]("output");
[Link] = "<strong> ✔️ Elements selected and updated!</strong>";
}
</script>
</body>
</html>
[Link] a Javascript program to implement the event listeners
JavaScript program to implement Event Listeners in a simple and interactive HTML page.
It shows how to:
● Attach event listeners using addEventListener()
● Handle multiple events (click, mouseover, keydown)
● Update the DOM dynamically
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Demo</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
background-color: #f0f4f8;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #6366f1;
color: white;
border: none;
border-radius: 8px;
margin: 10px;
cursor: pointer;
}
button:hover {
background-color: #4f46e5;
}
#output {
margin-top: 20px;
font-size: 18px;
color: #374151;
}
input {
padding: 10px;
font-size: 16px;
border: 2px solid #a5b4fc;
border-radius: 6px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Event Listeners</h1>
<button id="clickBtn">Click Me</button>
<button id="hoverBtn">Hover Over Me</button>
<input type="text" id="inputBox" placeholder="Type something here..." />
<div id="output"></div>
<script src="[Link]"></script>
</body>
</html>
[Link]
// 1. Click event
const clickBtn = [Link]("clickBtn");
[Link]("click", function () {
[Link]("output").innerText = " 🖱️ Button was clicked!";
});
// 2. Mouseover event
const hoverBtn = [Link]("hoverBtn");
👆
[Link]("mouseover", function () {
[Link]("output").innerText = " You hovered over the button!";
});
// 3. Keydown event on input
const inputBox = [Link]("inputBox");
[Link]("keydown", function (event) {
[Link]("output").innerText =
` You pressed: ${[Link]}`;
});
Explanation
Event Description Trigger
click Runs function when button is clicked User clicks button
mouseover Runs when mouse enters element User hovers on
button
keydown Detects key press in input box User types in input
[Link] a javascript program to handle the click events for the html button elements
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Button Click Events</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Advanced Button Actions</h1>
<div id="buttonPanel">
<button class="action-btn" data-id="1">Click Me 1</button>
<button class="action-btn" data-id="2">Click Me 2</button>
<button class="action-btn" data-id="3">Click Me 3</button>
</div>
<div id="resultArea"></div>
<button id="resetBtn">Reset All</button>
<script src="[Link]"></script>
</body>
</html>
[Link]
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f9fafb;
text-align: center;
padding: 40px;
}
#buttonPanel {
margin: 20px auto;
}
button {
padding: 10px 25px;
margin: 10px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #3b82f6;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2563eb;
}
#resetBtn {
margin-top: 30px;
background-color: #ef4444;
}
#resultArea {
margin-top: 30px;
font-size: 18px;
color: #111827;
}
[Link]
// Click counters for each button
const counters = {
1: 0,
2: 0,
3: 0,
};
// Reference to the result display area
const resultArea = [Link]("resultArea");
// Function to handle button click
function handleButtonClick(buttonId) {
counters[buttonId]++;
const msg = `Button ${buttonId} clicked ${counters[buttonId]} time(s).`;
// Change background color dynamically
const button = [Link](`button[data-id="${buttonId}"]`);
const colorMap = ['#3b82f6', '#10b981', '#f59e0b', '#6366f1', '#ec4899'];
const color = colorMap[counters[buttonId] % [Link]];
[Link] = color;
// Update result area
[Link] = `<strong>${msg}</strong>`;
}
// Add event listeners to each button dynamically
[Link](".action-btn").forEach(button => {
[Link]("click", () => {
const id = [Link]("data-id");
handleButtonClick(id);
});
});
// Reset button functionality
[Link]("resetBtn").addEventListener("click", () => {
[Link](counters).forEach(id => {
counters[id] = 0;
const button = [Link](`button[data-id="${id}"]`);
[Link] = "#3b82f6";
});
[Link] = "All counters reset.";
});
[Link] a JavaScript program to With three types of functions
i. Function declaration
ii. Function definition
iii. Arrow functions
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function Types Demo</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>JavaScript Function Types Demo</h1>
<div class="input-section">
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
</div>
<div class="buttons">
<button onclick="useDeclaration()">Add (Function Declaration)</button>
<button onclick="useExpression()">Multiply (Function Expression)</button>
<button onclick="useArrow()">Power (Arrow Function)</button>
</div>
<div id="result"></div>
<script src="[Link]"></script>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
background: #f1f5f9;
text-align: center;
padding: 50px;
}
h1 {
color: #1e293b;
}
.input-section input {
padding: 10px;
margin: 10px;
width: 150px;
font-size: 16px;
}
.buttons button {
padding: 10px 20px;
margin: 10px;
font-size: 14px;
cursor: pointer;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 5px;
}
#result {
margin-top: 30px;
font-size: 20px;
color: #0f172a;
}
[Link]
// Function Declaration
function add(a, b) {
return a + b;
}
// Function Expression (Definition using variable)
const multiply = function(a, b) {
return a * b;
};
// Arrow Function
const power = (a, b) => {
return [Link](a, b);
};
// Helper: Get input values
function getInputs() {
const num1 = parseFloat([Link]("num1").value);
const num2 = parseFloat([Link]("num2").value);
return { num1, num2 };
}
// Use Function Declaration
function useDeclaration() {
const { num1, num2 } = getInputs();
const result = add(num1, num2);
[Link]("result").textContent = `Result of Addition: ${result}`;
}
// Use Function Expression
function useExpression() {
const { num1, num2 } = getInputs();
const result = multiply(num1, num2);
[Link]("result").textContent = `Result of Multiplication: ${result}`;
}
// Use Arrow Function
function useArrow() {
const { num1, num2 } = getInputs();
const result = power(num1, num2);
[Link]("result").textContent = `Result of Power: ${result}`;
}
Function Types Used
Function Type Syntax Used For
Function Declaration function add(a, b) {} Addition
Function Expression const multiply = Multiplication
function(a, b) {}
Arrow Function const power = (a, b) => {} Exponentiation