JavaScript in HTML

JavaScript is used to add interactivity to HTML pages.

Script Tag

<!-- External Script -->
<script src="script.js"></script>

<!-- Internal Script -->
<script>
    console.log('Hello!');
</script>

Inline Event Handlers

<button onclick="alert('Click!')">Click Me</button>
<input onfocus="this.style.background='yellow'">
<div onmouseover="this.style.color='red'">Hover me</div>

Case Study: Form Interactivity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Form</title>
    <style>
        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .error {
            color: red;
            font-size: 12px;
            display: none;
        }

        .success {
            color: green;
            font-size: 12px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Registration Form</h1>

    <form id="registrationForm">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required>
            <span class="error" id="nameError">Name is required</span>
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
            <span class="error" id="emailError">Email is not valid</span>
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
            <span class="error" id="passwordError">Password must be at least 8 characters</span>
        </div>

        <div class="form-group">
            <label for="confirmPassword">Confirm Password</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>
            <span class="error" id="confirmError">Passwords do not match</span>
        </div>

        <button type="submit">Register</button>
    </form>

    <script>
        document.getElementById('registrationForm').addEventListener('submit', function(e) {
            e.preventDefault();

            let isValid = true;

            // Validate name
            const name = document.getElementById('name').value;
            if (name.length < 3) {
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('nameError').style.display = 'none';
            }

            // Validate email
            const email = document.getElementById('email').value;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                document.getElementById('emailError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('emailError').style.display = 'none';
            }

            // Validate password
            const password = document.getElementById('password').value;
            if (password.length < 8) {
                document.getElementById('passwordError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('passwordError').style.display = 'none';
            }

            // Validate password confirmation
            const confirmPassword = document.getElementById('confirmPassword').value;
            if (password !== confirmPassword) {
                document.getElementById('confirmError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('confirmError').style.display = 'none';
            }

            if (isValid) {
                alert('Form submitted successfully!');
                // Submit the form to the server
            }
        });
    </script>
</body>
</html>

Everyday Case Study

Case: A developer needs to add interactivity.

<button onclick="toggleMenu()">Toggle Menu</button>

<div id="menu" style="display: none;">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="academic.html">Academic</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

<script>
    function toggleMenu() {
        const menu = document.getElementById('menu');
        if (menu.style.display === 'none') {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    }
</script>

DOM Manipulation

// Select element
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');

// Change content
element.innerHTML = '<p>New content</p>';
element.textContent = 'New text';

// Change style
element.style.color = 'red';
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');

// Create element
const newElement = document.createElement('div');
newElement.innerHTML = '<p>New element</p>';
document.body.appendChild(newElement);

Best Practices

1. Use external JS: For maintainability
2. Defer or async: For performance
3. Event delegation: For performance
4. Client-side validation: For UX
5. Error handling: Use try-catch

Summary

JavaScript adds interactivity to HTML pages. Use DOM manipulation to dynamically change content and styles.