<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Topics with Navigation</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
color: #333;
}
h1, h2 {
color: #0056b3;
}
pre {
background: #f4f4f4;
padding: 10px;
border-left: 5px solid #ccc;
overflow-x: auto;
}
code {
font-family: "Courier New", monospace;
color: #c7254e;
}
section {
margin-bottom: 40px;
}
a {
color: #0056b3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav {
background: #f0f0f0;
padding: 20px;
margin-bottom: 30px;
border-radius: 8px;
}
nav a {
display: block;
padding: 10px;
border-bottom: 1px solid #ddd;
}
nav a:last-child {
border-bottom: none;
}
nav a:hover {
background: #ddd;
}
.back-to-top {
display: block;
margin-top: 20px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>JavaScript Topics with Navigation</h1>
<!-- Navigation Menu -->
<nav>
<h2>📚 Topics Index</h2>
<a href="#variables">1. Variables</a>
<a href="#data-types">2. Data Types</a>
<a href="#operators">3. Operators</a>
<a href="#control-flow">4. Control Flow</a>
<a href="#loops">5. Loops</a>
<a href="#functions">6. Functions</a>
<a href="#arrays">7. Arrays</a>
<a href="#objects">8. Objects</a>
<a href="#events">9. Events</a>
<a href="#dom">10. DOM Manipulation</a>
<a href="#error-handling">11. Error Handling</a>
<a href="#es6">12. ES6 Features</a>
<a href="#promises">13. Promises</a>
</nav>
<!-- Topics Section -->
<section id="variables">
<h2>1. Variables</h2>
<p><strong>Definition:</strong> Variables store data that can be used later in your program.</p>
<pre><code>
// Syntax:
let name = "Alice";
const age = 25;
var city = "Paris";
// Example:
let x = 10;
x = 20;
console.log(x); // Output: 20
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="data-types">
<h2>2. Data Types</h2>
<p><strong>Definition:</strong> JavaScript supports multiple data types, including string, number, and boolean.</p>
<pre><code>
// Syntax:
let str = "Hello";
let num = 123;
let bool = true;
// Example:
console.log(typeof str); // Output: string
console.log(typeof num); // Output: number
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="operators">
<h2>3. Operators</h2>
<p><strong>Definition:</strong> Operators perform operations on variables and values.</p>
<pre><code>
// Syntax:
let sum = 5 + 2;
let diff = 10 - 3;
// Example:
let a = 10, b = 5;
console.log(a + b); // Output: 15
console.log(a > b); // Output: true
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="control-flow">
<h2>4. Control Flow (If-Else)</h2>
<p><strong>Definition:</strong> Used for executing code based on conditions.</p>
<pre><code>
// Syntax:
if (condition) {
// Code if true
} else {
// Code if false
}
// Example:
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="loops">
<h2>5. Loops</h2>
<p><strong>Definition:</strong> Loops are used to repeat a block of code multiple times.</p>
<pre><code>
// Syntax:
for (let i = 0; i < 5; i++) {
console.log(i);
}
// Example:
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="functions">
<h2>6. Functions</h2>
<p><strong>Definition:</strong> Functions are reusable blocks of code.</p>
<pre><code>
// Syntax:
function greet(name) {
console.log("Hello " + name);
}
// Example:
greet("Alice"); // Output: Hello Alice
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="arrays">
<h2>7. Arrays</h2>
<p><strong>Definition:</strong> Arrays store multiple values in a single variable.</p>
<pre><code>
// Syntax:
let colors = ["Red", "Green", "Blue"];
// Example:
console.log(colors[0]); // Output: Red
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="objects">
<h2>8. Objects</h2>
<p><strong>Definition:</strong> Objects store data in key-value pairs.</p>
<pre><code>
// Syntax:
let person = {
name: "Alice",
age: 25
};
// Example:
console.log(person.name); // Output: Alice
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="events">
<h2>9. Events</h2>
<p><strong>Definition:</strong> Events respond to user interactions.</p>
<pre><code>
// Syntax:
<button onclick="alert('Button clicked!')">Click Me</button>
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="dom">
<h2>10. DOM Manipulation</h2>
<p><strong>Definition:</strong> DOM allows JavaScript to manipulate HTML elements.</p>
<pre><code>
// Syntax:
document.getElementById("demo").innerHTML = "Hello, DOM!";
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="error-handling">
<h2>11. Error Handling</h2>
<p><strong>Definition:</strong> Manages runtime errors.</p>
<pre><code>
try {
let x = y;
} catch (error) {
console.log("Error occurred: " + error);
}
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="es6">
<h2>12. ES6 Features</h2>
<p><strong>Definition:</strong> New JS features like arrow functions.</p>
<pre><code>
const greet = (name) => `Hello, ${name}`;
console.log(greet("Alice"));
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
<section id="promises">
<h2>13. Promises</h2>
<pre><code>
let promise = new Promise((resolve, reject) => {
resolve("Done");
});
</code></pre>
<a href="#top" class="back-to-top">⬆️ Back to Top</a>
</section>
</body>
</html>