HTMLify

Full JavaScript
Views: 398 | Author: djdj
<!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>
HTMLify

Share this file:
