Prev Next

HTML JavaScript

JavaScript brings interactivity and logic to your HTML pages. You can include JavaScript directly in your HTML using the <script> tag or link to an external .js file. JavaScript can modify the DOM, handle events, validate forms, and perform calculations, making webpages dynamic.

Key Topics

Inline JavaScript

Example: Placing JavaScript code directly in HTML inside <script>.

<script>
    console.log("Hello from inline JS!");
</script>

External JavaScript

Example: Linking an external .js file for better organization and maintenance.

<script src="app.js"></script>

JavaScript Example

This example shows a button that triggers a JavaScript function. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
    <script>
        function showMessage() {
            alert("Hello, JavaScript!");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

Explanation: Clicking the button triggers the showMessage() function, displaying an alert. JavaScript enables interactive features that respond to user actions.

Key Takeaways

  • JavaScript adds dynamic behavior and logic to HTML pages.
  • Use <script> tags inline or link external .js files.
  • Organize code externally for scalability and maintainability.
  • JavaScript interacts with the DOM to update and manipulate elements.
  • Leverage events and functions to create interactive user experiences.
Prev Next